/* =============================================================================
   componentes/aviso-test.css — Distintivos de pruebas  (componentes/_aviso-test.php)
   -----------------------------------------------------------------------------
   "Modo pruebas" (web capada por IP), "viendo como cliente" (?ver=publico) y el
   selector de vista que llevan dentro los dos.
   ============================================================================= */

/* ---------- AVISO "MODO PRUEBAS" ----------
   Distintivo fijo que recuerda que la web está capada por IP.
   Arriba a la IZQUIERDA y SIN botón de cerrar: mientras el gate esté puesto queremos verlo
   siempre, y abajo se perdía de vista en cuanto la página era larga. Se queda por encima
   de la cabecera (que no es sticky), pero traslúcido hasta que pasas el ratón. */
#ss-aviso-test {
   position: fixed;
   left: .75rem;
   top: .75rem;
   z-index: 1050;
   display: inline-flex;
   align-items: center;
   gap: .45rem;
   padding: .3rem .6rem .3rem .5rem;
   border-radius: 50rem;
   background: rgba(33, 37, 41, .88);
   color: #fff;
   font-size: .72rem;
   line-height: 1.2;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
   backdrop-filter: blur(6px);
   opacity: .82;
   transition: opacity .15s ease;
}

#ss-aviso-test:hover {
   opacity: 1;
}

#ss-aviso-test i {
   color: #ffc107;
}

.ss-aviso-test__ip {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   opacity: .7;
}

/* Campaña visible solo desde las IPs de pruebas: se separa con una línea del color del aviso. */
.ss-aviso-test__camp {
   display: inline-flex;
   align-items: center;
   gap: .3rem;
   padding-left: .45rem;
   border-left: 1px solid rgba(255, 255, 255, .35);
}

.ss-aviso-test__camp i {
   font-size: .68rem;
}

@media (max-width: 575.98px) {

   .ss-aviso-test__txt,
   .ss-ver-publico__txt {
      display: none;
   }
}

/* ---------- "VIENDO COMO CLIENTE" ----------
   Distintivo del modo ?ver=publico. Deliberadamente discreto y ABAJO a la izquierda, para
   no falsear la pantalla que se está revisando: es lo único que se añade a la página en ese
   modo. El de "modo pruebas" va arriba, así que no se pisan si algún día coincidieran. */
#ss-ver-publico {
   position: fixed;
   left: .75rem;
   bottom: .75rem;
   z-index: 1050;
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   padding: .25rem .45rem .25rem .6rem;
   border-radius: 50rem;
   background: rgba(33, 37, 41, .82);
   color: #fff;
   text-decoration: none;
   font-size: .7rem;
   line-height: 1.2;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
   opacity: .7;
   transition: opacity .15s ease;
}

/* focus-within, no solo hover: ahora lleva dentro un desplegable, y al llegar a el con el
   teclado tiene que verse entero. */
#ss-ver-publico:hover,
#ss-ver-publico:focus-within {
   opacity: 1;
   color: #fff;
}

/* ---------- SELECTOR DE VISTA (dev / publico) ----------
   Vive dentro de los dos distintivos de arriba y sirve para lo mismo desde los dos lados:
   entrar y salir del modo "ver como cliente".

   Es un <select> de verdad, sin maquillar: se abre con el teclado y lo lee un lector de
   pantalla. Las <option> llevan color propio porque el desplegable lo pinta el SISTEMA, no
   la pagina: heredando el blanco del distintivo se quedarian en blanco sobre blanco. */
.ss-ver-modo {
   display: inline-flex;
   align-items: center;
   margin: 0;
   padding-left: .45rem;
   border-left: 1px solid rgba(255, 255, 255, .35);
}

.ss-ver-modo__sel {
   max-width: 7rem;
   padding: .05rem .15rem;
   border: 0;
   border-radius: .35rem;
   background: rgba(255, 255, 255, .14);
   color: #fff;
   font: inherit;
   font-size: .68rem;
   line-height: 1.3;
   cursor: pointer;
}

.ss-ver-modo__sel:focus-visible {
   outline: 2px solid #ffc107;
   outline-offset: 1px;
}

.ss-ver-modo__sel option {
   color: #212529;
   background: #fff;
}

/* Solo aparece sin JavaScript (<noscript>), para poder cambiar de vista igualmente. */
.ss-ver-modo__ir {
   margin-left: .25rem;
   padding: 0 .35rem;
   border: 0;
   border-radius: .35rem;
   background: rgba(255, 255, 255, .2);
   color: #fff;
   font-size: .68rem;
   cursor: pointer;
}