/* [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 -------------------------------------------------------------------------
   Design intent (EN): a split screen. Left, the form on the stage colour (#0A0A2E in every
   theme: light is only read on darkness). Right, a real greenhouse photo under a slow
   spectral glow made of the four channel colours. The glow drifts over ~28 s and never
   loops visibly; with prefers-reduced-motion it just stands still. Nothing else moves.
   ----------------------------------------------------------------------------------- */
.entrada{
  min-height:100dvh; display:grid; grid-template-columns:minmax(22rem,30rem) 1fr;
  background:var(--escenario); color:#F7F8FA;
}
.entrada__panel{
  display:flex; flex-direction:column; gap:var(--e-6);
  padding:clamp(1.5rem,4vw,3.5rem);
  justify-content:center; min-width:0;
}
/* Apiladas y con jerarquia: la marca de quien fabrica arriba, el producto chico debajo.
   Antes iban lado a lado, del mismo alto y con una raya entre medio, y parecian dos
   empresas (pasada de diseno del 2026-09-02). */
.entrada__marcas{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-4); }
.entrada__marca{ display:block; width:14rem; max-width:70%; height:auto; }
.entrada__producto{ display:block; width:6.5rem; max-width:34%; height:auto; }
.entrada__texto{ display:flex; flex-direction:column; gap:var(--e-3); }
.entrada__titulo{
  font-size:clamp(1.75rem,3.2vw,2.4375rem); line-height:var(--lh-apretado);
  letter-spacing:var(--track-titulo); color:#F7F8FA; text-wrap:balance; margin:0;
}
.entrada__bajada{ color:#AEB6C9; margin:0; font-size:var(--txt-base); line-height:var(--lh-medio);
  max-width:38ch; }
.entrada form{ display:flex; flex-direction:column; }
.entrada label{ margin:var(--e-4) 0 var(--e-1); color:#AEB6C9; font-size:var(--txt-menor); }
.entrada input{
  width:100%; background:#0F0F32; color:#F7F8FA; border-color:#5A6099;
}
.entrada input:focus-visible{ outline-color:var(--esp-cian); box-shadow:0 0 0 2px var(--escenario); }
.entrada button{ width:100%; margin-top:var(--e-5); background:var(--azul-500);
  border-color:var(--azul-300); color:#F7F8FA; }
.entrada button:hover{ background:#4E61EE; }
.entrada__pie{ margin:0; color:#7E88A3; font-size:var(--txt-micro); }
.entrada .aviso{ margin-bottom:var(--e-3); }

/* --- LAS OTRAS DOS CARAS DE LA ENTRADA (clave olvidada y clave nueva) -----------------
   El panel es noche en los tres temas, asi que los colores van en literal como el resto de
   .entrada: las variables del sistema cambian con el tema y aqui no hay tema que valga.

   .entrada button lleva fondo azul y ancho completo, y eso es correcto para el boton que
   manda el formulario. El de "Olvidé mi clave" NO es ese boton: es la salida de emergencia,
   y pintarla igual de fuerte que la puerta deja dos puertas del mismo tamano. Se devuelve a
   lo que .btn-terciario significa en el resto de la web, adaptado a fondo oscuro. */
.entrada__nota{ margin:0 0 var(--e-2); color:#AEB6C9; font-size:var(--txt-menor);
  line-height:var(--lh-medio); max-width:38ch; }
.entrada .btn-terciario.entrada__enlace{
  width:auto; align-self:flex-start; margin-top:var(--e-3);
  background:transparent; border-color:transparent; color:#AEB6C9;
  min-height:auto; font-size:var(--txt-menor); padding-inline:0;
  text-decoration:underline; text-underline-offset:.2em;
}
.entrada .btn-terciario.entrada__enlace:hover{ background:transparent; color:#F7F8FA; }

.entrada__foto{
  position:relative; overflow:hidden; min-height:100%;
  background:#050733 url("../assets/fotos/invernadero.jpg") center/cover no-repeat;
  isolation:isolate;
}
/* The photo is dimmed so the glow reads as light, not as a filter over a picture. */
.entrada__foto::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(10,10,46,.92) 0%, rgba(10,10,46,.35) 40%, rgba(10,10,46,.25) 100%),
             linear-gradient(0deg, rgba(10,10,46,.85) 0%, rgba(10,10,46,0) 45%);
}
.entrada__luz{
  position:absolute; z-index:2; width:70vmin; height:70vmin; border-radius:50%;
  left:30%; top:20%; filter:blur(70px); opacity:.55; mix-blend-mode:screen;
  background:radial-gradient(circle at 40% 40%, var(--esp-cian) 0%, transparent 60%),
             radial-gradient(circle at 70% 60%, var(--esp-fr) 0%, transparent 55%);
  animation:entrada-deriva 28s ease-in-out infinite alternate;
}
.entrada__luz--2{
  left:55%; top:45%; width:60vmin; height:60vmin; opacity:.4;
  background:radial-gradient(circle at 50% 50%, var(--esp-lima) 0%, transparent 60%),
             radial-gradient(circle at 20% 70%, #3B4FE4 0%, transparent 55%);
  animation-duration:34s; animation-delay:-9s;
}
@keyframes entrada-deriva{
  from{ transform:translate3d(-6%,-4%,0) scale(1); }
  to  { transform:translate3d(8%,6%,0)  scale(1.12); }
}
/* The four channels, named. The spectrum gradient is allowed here because it is about
   the light itself, not decoration. */
.entrada__espectro{
  position:absolute; z-index:3; left:clamp(1.5rem,4vw,3.5rem); right:clamp(1.5rem,4vw,3.5rem);
  bottom:clamp(1.5rem,4vw,3rem);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e-2);
  padding-top:var(--e-3); border-top:2px solid transparent;
  border-image:var(--espectro) 1;
  font-family:var(--fuente-dato); font-size:var(--txt-micro); letter-spacing:var(--track-etiqueta);
  text-transform:uppercase; color:#AEB6C9;
}
.entrada__canal::before{ content:attr(data-canal) "  "; color:#F7F8FA; font-weight:var(--peso-fuerte); }
.entrada__canal[data-canal="FR"]{ color:var(--fr-texto); }

@media (prefers-reduced-motion: reduce){ .entrada__luz{ animation:none; } }
@media (max-width: 48rem){
  .entrada{ grid-template-columns:1fr; grid-template-rows:38vh 1fr; }
  .entrada__foto{ order:-1; min-height:38vh; }
  .entrada__foto::before{ background:linear-gradient(0deg, rgba(10,10,46,1) 0%, rgba(10,10,46,.15) 60%); }
  .entrada__espectro{ display:none; }
  .entrada__panel{ padding:var(--e-5); gap:var(--e-5); }
  .entrada__marca{ width:11rem; }
  .entrada__producto{ width:5.5rem; }
}

/* --- LA BARRA ------------------------------------------------------------------------
   DE NOCHE EN LOS TRES TEMAS, igual que la pantalla de entrar y que el escenario. Antes
   era blanca con el nombre del cliente en texto: al entrar, la puerta (noche, logos,
   espectro) y la casa (un back office gris) no se parecian en nada, y JP dijo que la web
   «es fea, no tiene logos». Los colores van en literal a proposito, como en .entrada: esta
   franja no cambia con el tema (pasada de diseno del 2026-09-02).
   ----------------------------------------------------------------------------------- */
.barra{
  display:flex; align-items:center; gap:var(--e-5); flex-wrap:wrap;
  min-height:3.5rem; padding:var(--e-2) var(--e-5);
  background:#0A0A2E; color:#F7F8FA; border-bottom:0;
  position:sticky; top:0; z-index:20;
}
/* Termina en la regla de luz, como termina el pie y como empieza el escenario. */
.barra::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--regla-luz); opacity:calc(var(--regla-luz-op) * .6); pointer-events:none;
}
.barra__marca{ display:flex; align-items:center; gap:var(--e-3); min-width:0; }
.barra__marca a{ display:inline-flex; align-items:center; color:inherit; text-decoration:none; }
/* La marca de la casa se mide por ANCHO: cp-plano-blanco es una caja de 900x298 en la que
   las helices del ADN suben y bajan mucho mas que las letras. */
.barra__propia img{ width:9rem; height:auto; display:block; }
/* El logo de un cliente ajeno puede ser oscuro sobre transparente, asi que va en placa. */
.barra__marca > img{ height:2rem; width:auto; max-width:9rem;
  background:#FFFFFF; padding:.25rem .5rem; border-radius:6px; box-sizing:content-box; }
.barra__cliente{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#F7F8FA; }
.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); color:#F7F8FA; }
#rol{ color:#7E88A3; }
#salir{ color:#8E9BF2; }
#salir:hover{ color:#F7F8FA; background:#1F1F40; }
.tema__boton{ display:inline-grid; place-items:center; padding:0; width:2.5rem; height:2.5rem;
  color:#AEB6C9; border-radius:8px; }
.tema__boton svg{ width:1.25rem; height:1.25rem; transition:transform 160ms var(--sal-estandar); }
.tema__boton:hover{ background:#1F1F40; color:#F7F8FA; }
.tema__boton:active svg{ transform:rotate(40deg); }

/* Se llama nav-secciones y no "menu" porque .menu es ahora el menu de tres puntos de las
   filas (js/menu.js); compartir el nombre le ponia display:flex al menu chico (pasada de
   diseno del 2026-09-02). */
.nav-secciones{ display:flex; gap:var(--e-1); flex-wrap:wrap; }
/* Design intent (EN): the current section is marked by a 2 px rule in the spectrum cyan
   that slides between items, not by a filled pill. Action blue would sit at 2.3:1 on the
   night bar; the cyan is the same one the login spectrum ends with. */
.nav-secciones a{
  position:relative; display:inline-flex; align-items:center;
  padding:var(--e-2) var(--e-3); border-radius:var(--r-2);
  color:#AEB6C9; text-decoration:none; font-size:var(--txt-menor);
  font-weight:var(--peso-medio);
  /* 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;
  transition:color var(--dur-rapida) var(--sal-estandar);
}
.nav-secciones a::after{
  content:""; position:absolute; left:var(--e-3); right:var(--e-3); bottom:.25rem; height:2px;
  border-radius:1px; background:#22D3EE; transform:scaleX(0); transform-origin:50% 50%;
  transition:transform var(--dur-media) var(--sal-estandar);
}
.nav-secciones a:hover{ color:#F7F8FA; background:#1F1F40; }
.nav-secciones a[aria-current="page"]{ color:#F7F8FA; }
.nav-secciones a[aria-current="page"]::after{ transform:scaleX(1); }
/* Con el menu desplazandose, el borde derecho se desvanece para decir que hay mas. */
.nav-secciones.desborda{
  mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);
}

/* --- 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; }
/* UN SOLO MARCO PARA TODAS. Cada pantalla traia el suyo: Inicio y Salas se estiraban a
   96rem pegadas al borde y Alertas y Sensores iban centradas a 76rem, asi que al cambiar
   de pestaña se movia todo (pasada de diseno del 2026-09-02). */
#pantalla{ display:block; max-width:80rem; margin:0 auto; width:100%; flex:1 0 auto;
  padding:var(--e-6) clamp(var(--e-5),4vw,var(--e-8)) var(--e-9); }
#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{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:var(--e-3);
  /* Mas bajo y mas callado que antes: es la firma, no una seccion (pasada de diseno del
     2026-09-02). */
  min-height:4.5rem; padding:var(--e-5) var(--e-5); color:var(--tinta-2); font-size:var(--txt-micro);
  border-top:0; margin-top:var(--e-8);
}
.pie::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--regla-luz); opacity:var(--regla-luz-op);
}
.pie__texto{ font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--tinta-3); margin-right:var(--e-2); }
/* 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. */
/* La firma se lee: 8.5rem y 6rem sin opacidad. A 6rem con .65 PARALED era un fantasma gris y
   JP dijo que la web «no tiene logos» (pasada de diseno del 2026-09-02). */
.pie img{ width:8.5rem; height:auto; opacity:1; }
.pie img.pie__producto{ width:6rem; }
:root[data-tema="oscuro"] .pie img{ opacity:.92; }

/* 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__sep{ display:inline-block; width:1px; height:1.5rem; background:currentColor; opacity:.35; margin:0 var(--e-3); vertical-align:middle; }
.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__sep{ display:inline-block; width:1px; height:1.5rem; background:currentColor; opacity:.35; margin:0 var(--e-3); vertical-align:middle; }
.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{ min-height:3.25rem; 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. */
  /* La marca se lleva TODO el ancho que deja «Salir», y el nombre nace con base 0 para
     que nunca baje debajo del logo: con base auto (su ancho de texto) el wrap lo mandaba
     a una segunda fila y la barra salia de cuatro pisos (pasada de diseno del 2026-09-02). */
  .barra__marca{ flex:1 1 0; min-width:0; }
  .barra__cliente{ min-width:0; flex:1 1 0; }
  .barra__marca > img{ height:1.5rem; }
  .barra__propia img{ width:7.5rem; }
  .chip-sin-clave{ height:1.375rem; padding:0 .5rem; }
  .barra__yo{ flex:0 0 auto; }
  .nav-secciones{ order:3; width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .nav-secciones::-webkit-scrollbar{ display:none; }
  #pantalla{ padding:var(--e-4) var(--e-3) var(--e-7); }
  .nav-secciones a{ padding:var(--e-2); font-size:var(--txt-dato); min-height:2.5rem; }
  .pie{ flex-wrap:wrap; row-gap:var(--e-2); }
  .pie img{ width:7rem; }
  .pie img.pie__producto{ width:5rem; }
}

/* --- 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{ display:inline-grid; place-items:center; padding:0; width:2.5rem; height:2.5rem; }
.tema__boton svg{ width:1.25rem; height:1.25rem; }

/* --- 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:14rem; min-height:2rem; padding:var(--e-1) var(--e-2);
  font-size:var(--txt-menor); color:var(--tinta-2);
}
@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; }
}

/* --- LA TRANSICION ENTRE PANTALLAS -----------------------------------------------------
   Design intent (EN): 320 ms cross-fade with a 6 px rise for the incoming screen. The
   header, footer and the theme switch are excluded so only the content moves. The
   stage (.escenario) inside a screen does NOT get its own name: light never animates. */
::view-transition-old(root){ animation:pantalla-sale var(--dur-media) var(--sal-salida) both; }
::view-transition-new(root){ animation:pantalla-entra var(--dur-lenta) var(--sal-entrada) both; }
@keyframes pantalla-sale { to  { opacity:0; } }
@keyframes pantalla-entra{ from{ opacity:0; transform:translateY(6px); } }
/* Each name must be unique in the document or the browser skips the whole transition. */
.barra{ view-transition-name:cromo-barra; }
.pie{ view-transition-name:cromo-pie; }
#avisos{ view-transition-name:cromo-avisos; }
.chip-sin-clave{ view-transition-name:cromo-cartel; }
::view-transition-group(cromo-barra), ::view-transition-group(cromo-pie),
::view-transition-group(cromo-avisos), ::view-transition-group(cromo-cartel){ animation:none; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}