/* [hidden] TIENE QUE GANARLE A CUALQUIER display.
   -------------------------------------------------------------------------------------
   El navegador trae `[hidden] { display: none }` en su hoja por defecto, y esa regla
   pierde contra CUALQUIER clase que ponga display. `.entrada { display: grid }` la gana,
   asi que la pantalla de entrar seguia encima de la aplicacion DESPUES de entrar bien.

   El sintoma era exactamente el de una clave mala, y no lo era: la sesion se abria, el
   menu se dibujaba con sus seis secciones debajo, y no se veia nada de eso. Ni un error en
   la consola. Se encontro mirando el DOM, no la pantalla.

   Va lo primero del archivo y con !important, que es de los pocos sitios donde se
   justifica: esto no es un estilo, es la diferencia entre visible y no visible.
   ===================================================================================== */
[hidden] { display: none !important; }

/* =====================================================================================
   armazon.css - lo que rodea a las pantallas: entrada, barra, menu, pie y avisos
   =====================================================================================
   Aqui NO hay ni un color literal. Todo sale de los tokens de sistema.css, que es lo que
   hace que el modo claro y el modo sol funcionen sin tocar este archivo.
   ===================================================================================== */

/* --- ENTRAR -------------------------------------------------------------------------
   Es la unica pantalla que ve alguien que todavia no es nadie, asi que es donde la marca
   habla. El resplandor es el gradiente espectro: la primera vez que se ve la luz de esta
   empresa es antes de entrar.
   ----------------------------------------------------------------------------------- */
.entrada{
  min-height:100dvh; display:grid; place-items:center; padding:var(--e-5);
  position:relative; overflow:hidden; background:var(--escenario);
}
.entrada__luz{
  position:absolute; inset:auto 50% -46vmin auto; translate:50% 0;
  width:120vmin; height:70vmin; border-radius:50%;
  background:var(--espectro); filter:blur(90px); opacity:.30; pointer-events:none;
}
.entrada__caja{ position:relative; width:min(30rem,100%); }
.entrada__marca{ display:block; max-width:16rem; height:auto; margin-bottom:var(--e-3); }
.entrada__bajada{ color:var(--tinta-2); margin:0 0 var(--e-5); font-size:var(--txt-guia); }
.entrada label{ display:block; margin:var(--e-4) 0 var(--e-1); color:var(--tinta-2);
  font-size:var(--txt-menor); }
.entrada input{ width:100%; }
.entrada button{ width:100%; margin-top:var(--e-5); }

/* --- LA BARRA ----------------------------------------------------------------------- */
.barra{
  display:flex; align-items:center; gap:var(--e-5); flex-wrap:wrap;
  padding:var(--e-3) var(--e-5);
  background:var(--superficie); border-bottom:1px solid var(--linea);
  position:sticky; top:0; z-index:20;
}
.barra__marca{ display:flex; align-items:center; gap:var(--e-3); min-width:0; }
.barra__marca img{ height:2rem; width:auto; }
.barra__cliente{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barra__yo{ margin-left:auto; display:flex; align-items:center; gap:var(--e-3); }
.barra__persona{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; }
.barra__persona span:first-child{ font-size:var(--txt-menor); }

.menu{ display:flex; gap:var(--e-1); flex-wrap:wrap; }
.menu a{
  display:inline-block; padding:var(--e-2) var(--e-3); border-radius:var(--r-2);
  color:var(--tinta-2); text-decoration:none; font-size:var(--txt-menor);
  /* El minimo de blanco de toque, y no es un capricho de accesibilidad: esto se opera con
     guantes mojados dentro de un invernadero. */
  min-height:2.75rem; display:inline-flex; align-items:center;
}
.menu a:hover{ background:var(--superficie-alta); color:var(--tinta); }
.menu a[aria-current="page"]{ background:var(--accion-tenue); color:var(--tinta); font-weight:600; }

/* --- LA PANTALLA --------------------------------------------------------------------
   El armazon es una columna de alto completo para que el pie SE QUEDE ABAJO cuando la
   pantalla trae poco: Salas con dos salas dejaba el pie flotando a media altura con un
   palmo de fondo vacio debajo, que se lee como si faltara algo por cargar. */
#aplicacion{ min-height:100dvh; display:flex; flex-direction:column; }
#pantalla{ display:block; padding:var(--e-5); max-width:96rem; margin:0 auto;
  width:100%; flex:1 0 auto; }
#pantalla:focus{ outline:none; }
#pantalla[data-pantalla="salas"]{ padding:0; max-width:none; }

.vacio{
  padding:var(--e-7) var(--e-5); text-align:center; color:var(--tinta-2);
  border:1px dashed var(--linea-fuerte); border-radius:var(--r-3);
}
.tenue{ color:var(--tinta-3); }

/* --- EL PIE, donde vive nuestra marca ----------------------------------------------- */
.pie{
  display:flex; align-items:center; justify-content:center; gap:var(--e-2);
  padding:var(--e-6) var(--e-5); color:var(--tinta-3); font-size:var(--txt-micro);
  border-top:1px solid var(--linea); margin-top:var(--e-7);
}
/* SE MIDE POR ANCHO, NO POR ALTO, y esto es del logo y no de una preferencia:
   cp-plano-blanco.png es una caja de 900x298 en la que las dos helices de ADN suben y
   bajan mucho mas que las letras, asi que la altura de mayuscula son unos 90 px de esos
   298. Puesto a height:1.05rem, las letras quedaban de 5 px y "CIENCIA PURA" era una
   mancha. Se vio en la primera pasada con el navegador, en el pie de Inicio.
   A 7.5rem de ancho la palabra se lee y el pie sigue siendo el pie. */
.pie img{ width:7.5rem; height:auto; opacity:.75; }

/* CUAL DE LOS DOS LOGOS DEL PIE SE VE.
   Por defecto (fondo oscuro) va el blanco. En cuanto el fondo se aclara, por el ajuste del
   sistema o porque alguien eligio claro o sol, va el azul. El nombre de las clases dice
   SOBRE QUE FONDO sirve cada uno, que es lo unico que no se presta a confusion. */
.pie__marca--oscuro{ display:none; }
@media (prefers-color-scheme: light){
  :root:not([data-tema="oscuro"]) .pie__marca--claro { display:none; }
  :root:not([data-tema="oscuro"]) .pie__marca--oscuro{ display:inline; }
}
:root[data-tema="claro"] .pie__marca--claro,
:root[data-tema="sol"]   .pie__marca--claro { display:none; }
:root[data-tema="claro"] .pie__marca--oscuro,
:root[data-tema="sol"]   .pie__marca--oscuro{ display:inline; }
/* Y el interruptor a oscuro tiene que poder DESHACER lo que hizo la @media de arriba. */
:root[data-tema="oscuro"] .pie__marca--claro { display:inline; }
:root[data-tema="oscuro"] .pie__marca--oscuro{ display:none; }
@media (prefers-contrast: more){
  :root:not([data-tema]) .pie__marca--claro { display:none; }
  :root:not([data-tema]) .pie__marca--oscuro{ display:inline; }
}

/* --- AVISOS -------------------------------------------------------------------------
   Van abajo y no arriba: arriba tapan la barra justo cuando alguien acaba de pulsar algo
   ahi. Y no bloquean el clic, porque un aviso que impide seguir trabajando es un dialogo
   disfrazado.
   ----------------------------------------------------------------------------------- */
.avisos{
  position:fixed; left:50%; translate:-50% 0; bottom:var(--e-5); z-index:60;
  display:flex; flex-direction:column; gap:var(--e-2); width:min(34rem,calc(100% - 2rem));
  pointer-events:none;
}
.aviso{
  padding:var(--e-3) var(--e-4); border-radius:var(--r-2); font-size:var(--txt-menor);
  border:1px solid transparent; pointer-events:auto;
  animation:aviso-entra .22s ease-out both;
}
.aviso--malo { background:var(--mal-fondo);   color:var(--mal);   border-color:var(--mal); }
.aviso--aviso{ background:var(--aviso-fondo); color:var(--aviso); border-color:var(--aviso); }
.aviso--bien { background:var(--bien-fondo);  color:var(--bien);  border-color:var(--bien); }
.aviso--se-va{ animation:aviso-sale .38s ease-in both; }

@keyframes aviso-entra{ from{ opacity:0; translate:0 .5rem } to{ opacity:1; translate:0 0 } }
@keyframes aviso-sale { to  { opacity:0; translate:0 .4rem } }

@media (prefers-reduced-motion: reduce){
  .aviso, .aviso--se-va{ animation:none; }
}

/* --- TELEFONO -----------------------------------------------------------------------
   Lo primero que se cae es el nombre de la persona, que es lo unico que nadie mira; lo
   ultimo, el menu, que es lo unico que hace falta para moverse.
   ----------------------------------------------------------------------------------- */
@media (max-width: 48rem){
  .barra{ padding:var(--e-2) var(--e-3); gap:var(--e-3); }
  .barra__persona{ display:none; }
  /* Que "Salir" quepa EN LA PRIMERA FILA, al lado del nombre. Sin esto la cabecera salia
     en TRES pisos y el del medio estaba vacio salvo por ese boton pegado a la derecha.
     Medido: el logo del cliente (114 px) mas el nombre mas el boton daban 350 px de los
     351 disponibles, y se caia por uno.

     min-width:0 en el NOMBRE es lo que lo arregla: un hijo de un flex trae min-width:auto,
     asi que no baja de su contenido por mucho text-overflow que tenga puesto. Con esto si
     cede, se corta con puntos suspensivos, y el boton se queda arriba. */
  .barra__marca{ flex:0 1 auto; }
  .barra__cliente{ min-width:0; flex:0 1 auto; }
  .barra__marca img{ height:1.5rem; }
  .barra__yo{ flex:0 0 auto; }
  .menu{ order:3; width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .menu::-webkit-scrollbar{ display:none; }
  #pantalla{ padding:var(--e-3); }
}

/* --- EL INTERRUPTOR DE TEMA ----------------------------------------------------------
   Cuadrado, con un glifo y nada mas: al lado de "Salir" un boton con texto compite con el
   unico boton de la barra que importa. El titulo dice el estado en palabras, que es donde
   tiene que estar la explicacion.
   ----------------------------------------------------------------------------------- */
.tema__boton{
  min-width:2.75rem; padding-inline:var(--e-2); font-size:1rem; line-height:1;
}

/* --- LA EMPRESA EN LA QUE TRABAJA SOPORTE -------------------------------------------
   Solo lo ve el rol paraled. Va en la barra, pegado a la marca, porque lo que dice es
   justamente DE QUIEN son los datos de la pantalla. En una herramienta que entra a los
   datos de terceros, eso no es comodidad: es lo que evita tocarle la luz a la empresa
   equivocada.
   ----------------------------------------------------------------------------------- */
.barra__empresa{
  max-width:16rem; min-height:2.25rem; padding:var(--e-1) var(--e-3);
  font-size:var(--txt-menor);
}
@media (max-width: 48rem){
  /* En telefono se lleva la fila entera y baja debajo del nombre: cortarlo a 8rem dejaria
     "Agricola Punta…" y "Agricola Punta Ver…" indistinguibles. */
  .barra__empresa{ max-width:none; width:100%; order:5; }
  .barra__marca{ flex-wrap:wrap; }
}