/* =====================================================================================
   Ciencia Pura - tokens del sistema visual
   Una sola regla manda: lo unico brillante, lo unico saturado y lo unico que proyecta
   sombra es la luz que una luminaria esta emitiendo. Todo lo demas es gris azulado.
   La web del cliente y la consola de flota comparten ESTE archivo entero y se separan
   por densidad (data-densidad), nunca por paleta.
   ===================================================================================== */
:root{
  color-scheme: dark;

  /* --- PRIMITIVOS DE COLOR. No se usan directo en un componente, solo por rol. ------ */
  --azul-100:#E4E7FB; --azul-300:#8E9BF2; --azul-500:#3B4FE4;
  --azul-600:#2436C9; --azul-700:#001090; --azul-800:#000B63; --azul-900:#050733;
  --hueso:#F7F8FA;    --blanco:#FFFFFF;
  --noche:#0A0A2E;                        /* el fondo. Es la identidad. */
  --noche-1:#0F0F32; --noche-2:#13133A; --noche-3:#19193A; --noche-4:#1F1F40;

  /* Las cuatro paradas del espectro. Son LUZ, no son paleta de interfaz.
     Fuera de luz.js y de los cuatro sitios que declara la especificacion, no se tocan. */
  --esp-bb:#001090; --esp-cian:#22D3EE; --esp-lima:#9EE52B; --esp-fr:#E0218A;
  --espectro: linear-gradient(90deg,#001090 0%,#22D3EE 34%,#9EE52B 67%,#E0218A 100%);

  /* --- ROLES DE COLOR ------------------------------------------------------------- */
  --fondo:            var(--noche);
  --superficie:       #13133A;    /* tarjeta, panel */
  --superficie-alta:  #1F1F40;    /* menu, dialogo, fila marcada */
  --superficie-hueco: #0F0F32;    /* campo de formulario, fondo de tabla */
  --escenario:        var(--noche); /* el fondo donde vive la luz. NO cambia con el tema. */

  --tinta:    #F7F8FA;   /* 18.03:1 sobre el fondo */
  --tinta-2:  #AEB6C9;   /*  9.43:1 */
  --tinta-3:  #7E88A3;   /*  5.42:1 - el minimo del sistema para texto */
  --tinta-sobre-color: #F7F8FA;

  --linea:        #1E1E45;   /* separador decorativo */
  --linea-fuerte: #5A6099;   /* borde de control: 3.26:1, cumple 1.4.11 */

  --accion:        var(--azul-500);   /* relleno del boton primario */
  --accion-viva:   #4E61EE;           /* su hover */
  --accion-borde:  var(--azul-300);   /* 1 px por dentro, para que el boton se recorte */
  --accion-tenue:  #171B4E;           /* fondo de estado seleccionado */
  --enlace:        #9DA9F7;

  --bien:#3DD68C; --bien-fondo:#0E2E24;   /* 10.22:1 */
  --aviso:#F5B544; --aviso-fondo:#33260C;  /* 10.56:1 */
  --mal:#FF6B6B;  --mal-fondo:#340F16;    /*  6.91:1 */
  --fr-texto:#FF5CA8;                      /*  6.71:1 - el far-red cuando es TEXTO */

  --foco:           var(--esp-cian);   /* 10.60:1 sobre el fondo */
  --foco-invertido: var(--hueso);      /* sobre un relleno de color */
  --seleccion-fondo:#2436C9; --seleccion-tinta:#F7F8FA;

  /* --- TIPOGRAFIA ----------------------------------------------------------------- */
  --fuente-texto:"Chivo","Helvetica Neue","Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  --fuente-dato:"Chivo Mono",ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --txt-micro:.75rem; --txt-dato:.8125rem; --txt-menor:.875rem; --txt-base:1rem;
  --txt-guia:1.25rem; --txt-t3:1.5625rem; --txt-t2:1.9375rem; --txt-t1:2.4375rem;
  --txt-cifra:clamp(2.4375rem,5vw,3.8125rem);
  --txt-portada:clamp(3.0625rem,7vw,5.5rem);
  --lh-apretado:1.05; --lh-titulo:1.18; --lh-medio:1.35; --lh-texto:1.6;
  --track-portada:-.03em; --track-titulo:-.02em; --track-base:0; --track-etiqueta:.14em;
  --peso-texto:400; --peso-medio:500; --peso-fuerte:600; --peso-titular:700;

  /* --- ESPACIADO. Primitivos de 4 px. Estos NO cambian con la densidad. ----------- */
  --e-0:0; --e-1:.25rem; --e-2:.5rem; --e-3:.75rem; --e-4:1rem; --e-5:1.5rem;
  --e-6:2rem; --e-7:3rem; --e-8:4rem; --e-9:6rem; --e-10:8rem;

  /* --- RADIOS --------------------------------------------------------------------- */
  --r-0:0; --r-1:4px; --r-2:8px; --r-3:12px; --r-4:20px; --r-redondo:999px;

  /* --- SOMBRAS. Sobre casi negro una sombra negra no se ve, asi que la elevacion se
         hace con superficie y linea. La UNICA sombra del sistema es la de la luz, y la
         emite luz.js. Estas dos existen para lo que flota de verdad. ---------------- */
  --sombra-panel: inset 0 1px 0 rgba(255,255,255,.045);
  --sombra-flotante: 0 24px 48px -12px rgba(0,0,0,.72), 0 0 0 1px var(--linea-fuerte);

  /* --- MOVIMIENTO ------------------------------------------------------------------ */
  --dur-nula:0ms;      /* cambios de estado en la consola: instantaneos, siempre */
  --dur-rapida:120ms;  /* hover, foco */
  --dur-media:260ms;   /* abrir un panel */
  --dur-lenta:480ms;   /* transicion de vista */
  --dur-luz:600ms;     /* el color de una luminaria al pasar el minuto */
  --dur-escena:900ms;  /* la entrada orquestada de Inicio */
  --sal-estandar:cubic-bezier(.2,0,0,1);
  --sal-entrada:cubic-bezier(0,0,.2,1);
  --sal-salida:cubic-bezier(.4,0,1,1);
  --sal-luz:cubic-bezier(.33,0,.15,1);

  /* --- ROLES DE DENSIDAD. Lo unico que cambia entre la web del cliente y la consola.
         El primitivo (--e-4) no se toca nunca; lo que se cambia es el rol. ---------- */
  --alto-control:48px;      /* blanco de toque minimo, con guantes */
  --alto-control-clave:56px;/* las acciones que mueven luz sobre un cultivo */
  --pad-tarjeta:var(--e-5);
  --pad-celda:var(--e-3) var(--e-4);
  --pad-control:var(--e-3) var(--e-4);
  --gap-rejilla:var(--e-4);
  --gap-seccion:var(--e-7);
  --radio-tarjeta:var(--r-3);
  --radio-control:var(--r-2);
  --txt-tabla:var(--txt-menor);
  --ancho-texto:68ch;
}

/* ===================================== MODO CLARO ====================================
   Existe porque se opera con sol de frente. Ver la decision 1.
   Redefine SOLO tokens ya declarados arriba. El --escenario NO cambia: la luz se lee
   sobre oscuridad y punto. */
@media (prefers-color-scheme: light){
  :root:not([data-tema="oscuro"]){
    color-scheme: light;
    --fondo:#F7F8FA; --superficie:#FFFFFF; --superficie-alta:#FFFFFF;
    --superficie-hueco:#F1F3F8;
    --tinta:#0A0A2E;    /* 18.03:1 */
    --tinta-2:#3F4763;  /*  8.62:1 */
    --tinta-3:#6B7280;  /*  4.55:1 */
    --linea:#E3E7EF; --linea-fuerte:#7F889F;  /* 3.34:1 */
    --accion:var(--azul-700); --accion-viva:var(--azul-600);
    --accion-borde:var(--azul-700); --accion-tenue:#E4E7FB;
    --enlace:var(--azul-700);
    --bien:#0F6E4F; --bien-fondo:#E3F3EC;   /* 5.88:1 */
    --aviso:#8A5A00; --aviso-fondo:#FBF0DC;  /* 5.58:1 */
    --mal:#B3261E;  --mal-fondo:#FBE9E7;    /* 6.15:1 */
    --fr-texto:#B0146C;                      /* 6.25:1 */
    --foco:var(--azul-700);                  /* 13.38:1; el cian falla aqui (1.70:1) */
    --sombra-panel:none;
    --sombra-flotante:0 18px 40px -14px rgba(10,10,46,.28), 0 0 0 1px var(--linea);
  }
}
/* AQUI NO HABIA NADA. El bloque existia con el comentario "misma lista, copiada tal cual"
   y el cuerpo VACIO, asi que el interruptor de tema no hacia absolutamente nada: en una
   maquina con el sistema en oscuro, elegir "claro" dejaba la pagina igual de oscura.
   No se vio antes porque tampoco habia interruptor que lo llamara.

   La lista esta duplicada a proposito y no hay forma de evitarlo sin un compilador de CSS:
   una @media no se puede meter en una lista de selectores. SI SE TOCA UNA, SE TOCA LA OTRA. */
:root[data-tema="claro"]{
  color-scheme: light;
  --fondo:#F7F8FA; --superficie:#FFFFFF; --superficie-alta:#FFFFFF;
  --superficie-hueco:#F1F3F8;
  --tinta:#0A0A2E;  /* 18.03:1 */
  --tinta-2:#3F4763;  /*  8.62:1 */
  --tinta-3:#6B7280;  /*  4.55:1 */
  --linea:#E3E7EF; --linea-fuerte:#7F889F;  /* 3.34:1 */
  --accion:var(--azul-700); --accion-viva:var(--azul-600);
  --accion-borde:var(--azul-700); --accion-tenue:#E4E7FB;
  --enlace:var(--azul-700);
  --bien:#0F6E4F; --bien-fondo:#E3F3EC;   /* 5.88:1 */
  --aviso:#8A5A00; --aviso-fondo:#FBF0DC;  /* 5.58:1 */
  --mal:#B3261E;  --mal-fondo:#FBE9E7;  /* 6.15:1 */
  --fr-texto:#B0146C;            /* 6.25:1 */
  --foco:var(--azul-700);          /* 13.38:1; el cian falla aqui (1.70:1) */
  --sombra-panel:none;
  --sombra-flotante:0 18px 40px -14px rgba(10,10,46,.28), 0 0 0 1px var(--linea);
}

/* ===================================== MODO SOL ======================================
   Un toque en la barra. Es el modo claro llevado al maximo contraste, con el control mas
   alto y el peso mas fuerte. No es un tema nuevo: son ocho tokens.
   Se activa solo tambien con prefers-contrast: more. */
:root[data-tema="sol"]{
  color-scheme: light;
  --fondo:#FFFFFF; --superficie:#FFFFFF; --superficie-hueco:#FFFFFF;
  --tinta:#0A0A2E;   /* 19.16:1 */
  --tinta-2:#24294A; /* 14.08:1 */
  --tinta-3:#24294A; /* el gris tenue desaparece: a pleno sol no existe */
  --linea:#4A5170; --linea-fuerte:#24294A;   /* 7.77:1 */
  --accion:var(--azul-800); --accion-viva:var(--azul-700);
  --bien:#0A4F38;  /* 9.60:1 */
  --aviso:#6B4400; /* 8.56:1 */
  --mal:#8F1008;   /* 9.35:1 */
  --foco:#0A0A2E;
  /* LOS OCHO QUE FALTABAN. El bloque decia "son ocho tokens" y redefinia el fondo y las
     tintas, pero NO estos, asi que se quedaban con el valor del modo oscuro encima de un
     fondo blanco. El peor era --accion-tenue: la seccion actual del menu quedaba con chip
     azul marino (#171B4E) y letra azul marino (#0A0A2E), o sea 1.19:1. En el modo hecho
     para leer con el sol de frente, el peor contraste de toda la web. Medido, no estimado.
     Los tres --*-fondo tenian el mismo problema en los carteles de aviso. */
  --superficie-alta:#FFFFFF;
  --accion-borde:var(--azul-800); --accion-tenue:#DCE1FA;   /* con --tinta: 14.6:1 */
  --enlace:var(--azul-800);
  --bien-fondo:#DCEFE6; --aviso-fondo:#F7EBD2; --mal-fondo:#F9E2DF;
  --fr-texto:#8E0F56;                                       /* 8.9:1 sobre blanco */
  --peso-texto:500; --peso-medio:600; --peso-fuerte:700;
  --alto-control:56px; --alto-control-clave:64px;
  --sombra-panel:none; --sombra-flotante:0 0 0 2px #24294A;
}
/* Igual que el de arriba: estaba vacio, o sea que pedir mas contraste en el sistema no
   hacia nada. Misma lista que [data-tema="sol"], y con la misma regla: se tocan las dos. */
@media (prefers-contrast: more){
  :root:not([data-tema]){
    color-scheme: light;
    --fondo:#FFFFFF; --superficie:#FFFFFF; --superficie-hueco:#FFFFFF;
    --tinta:#0A0A2E;   /* 19.16:1 */
    --tinta-2:#24294A; /* 14.08:1 */
    --tinta-3:#24294A; /* el gris tenue desaparece: a pleno sol no existe */
    --linea:#4A5170; --linea-fuerte:#24294A;   /* 7.77:1 */
    --accion:var(--azul-800); --accion-viva:var(--azul-700);
    --bien:#0A4F38;  /* 9.60:1 */
    --aviso:#6B4400; /* 8.56:1 */
    --mal:#8F1008;   /* 9.35:1 */
    --foco:#0A0A2E;
    /* LOS OCHO QUE FALTABAN. El bloque decia "son ocho tokens" y redefinia el fondo y las
       tintas, pero NO estos, asi que se quedaban con el valor del modo oscuro encima de un
       fondo blanco. El peor era --accion-tenue: la seccion actual del menu quedaba con chip
       azul marino (#171B4E) y letra azul marino (#0A0A2E), o sea 1.19:1. En el modo hecho
       para leer con el sol de frente, el peor contraste de toda la web. Medido, no estimado.
       Los tres --*-fondo tenian el mismo problema en los carteles de aviso. */
    --superficie-alta:#FFFFFF;
    --accion-borde:var(--azul-800); --accion-tenue:#DCE1FA;   /* con --tinta: 14.6:1 */
    --enlace:var(--azul-800);
    --bien-fondo:#DCEFE6; --aviso-fondo:#F7EBD2; --mal-fondo:#F9E2DF;
    --fr-texto:#8E0F56;                                       /* 8.9:1 sobre blanco */
    --peso-texto:500; --peso-medio:600; --peso-fuerte:700;
    --alto-control:56px; --alto-control-clave:64px;
    --sombra-panel:none; --sombra-flotante:0 0 0 2px #24294A;
  }
}

/* ============================ DENSIDAD: LA CONSOLA DE FLOTA ==========================
   Un puesto de control. Misma paleta, mismo tipo, mismo foco. Cambia el aire.
   Se pone <html data-densidad="consola"> y no se toca nada mas. */
:root[data-densidad="consola"]{
  --alto-control:36px; --alto-control-clave:40px;
  --pad-tarjeta:var(--e-3);
  --pad-celda:var(--e-1) var(--e-2);
  --pad-control:var(--e-1) var(--e-2);
  --gap-rejilla:var(--e-2);
  --gap-seccion:var(--e-4);
  --radio-tarjeta:var(--r-1); --radio-control:var(--r-1);
  --txt-tabla:var(--txt-dato);
  --txt-t2:var(--txt-guia); --txt-t3:var(--txt-base);
  --ancho-texto:92ch;
  --dur-rapida:0ms; --dur-media:0ms; --dur-lenta:0ms; --dur-escena:0ms;
}
/* Excepcion: en un telefono nadie opera con guantes una tabla de 13 px. La consola en
   pantalla chica vuelve a la densidad del cliente. */
@media (max-width:599px){
  :root[data-densidad="consola"]{
    --alto-control:48px; --pad-celda:var(--e-3) var(--e-4); --txt-tabla:var(--txt-menor);
  }
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--fuente-texto); font-size:var(--txt-base); font-weight:var(--peso-texto);
  line-height:var(--lh-texto); font-size-adjust:.53;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{margin:0;font-weight:var(--peso-titular);line-height:var(--lh-titulo);
  letter-spacing:var(--track-titulo)}
h1{font-size:var(--txt-t2)} h2{font-size:var(--txt-t3)} h3{font-size:var(--txt-guia)}
.portada{font-size:var(--txt-portada);line-height:var(--lh-apretado);
  letter-spacing:var(--track-portada)}
.etiqueta{font-size:var(--txt-micro);font-weight:var(--peso-fuerte);
  letter-spacing:var(--track-etiqueta);text-transform:uppercase;color:var(--tinta-3)}
.cifra,td.num,code,.mono{font-family:var(--fuente-dato);font-variant-numeric:tabular-nums;
  font-feature-settings:"zero" 1}   /* cero cortado: 0 y O no se confunden en CP-XXXXXXXX */
::selection{background:var(--seleccion-fondo);color:var(--seleccion-tinta)}

/* --- FOCO. Nunca outline:none, ni una sola vez en todo el proyecto. -----------------
   Anillo de 3 px con separacion de 2 px. El doble anillo (el de dentro del color del
   fondo) hace que se vea igual encima del lienzo 3D brillante que sobre una tarjeta. */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--foco); outline-offset:2px;
  box-shadow:0 0 0 2px var(--fondo);
  border-radius:var(--r-1);
}
/* Sobre un relleno de color el anillo se invierte, o desaparece contra su propio color. */
.btn-primario:focus-visible,[data-relleno]:focus-visible{
  outline-color:var(--foco-invertido); box-shadow:0 0 0 2px var(--accion);
}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:var(--e-4);top:var(--e-4);z-index:999;background:var(--superficie);
  padding:var(--e-3) var(--e-4);border-radius:var(--r-2)}

/* --- CONTROLES. 48 px de alto minimo, 56 en lo que mueve luz sobre un cultivo. ------ */
button,[role=button],a.btn{
  min-height:var(--alto-control); min-width:var(--alto-control);
  padding:var(--pad-control); font:inherit; font-weight:var(--peso-fuerte);
  border-radius:var(--radio-control); cursor:pointer;
  transition:background var(--dur-rapida) var(--sal-estandar);
}
.btn-primario{background:var(--accion);color:var(--tinta-sobre-color);
  border:1px solid var(--accion-borde)}   /* el borde recorta el boton del fondo */
.btn-primario:hover{background:var(--accion-viva)}
.btn-secundario{background:transparent;color:var(--tinta);border:1px solid var(--linea-fuerte)}
.btn-clave{min-height:var(--alto-control-clave)}   /* "Mandar receta a una luminaria" */
button:disabled{opacity:.45;cursor:not-allowed}
/* separacion minima entre blancos de toque contiguos: con guantes, 8 px no es adorno */
.fila-acciones{display:flex;gap:var(--e-2);flex-wrap:wrap}

input,select,textarea{
  width:100%; min-height:var(--alto-control); padding:var(--pad-control);
  font:inherit; font-size:var(--txt-base);   /* 16 px SIEMPRE: evita el zoom de iOS */
  background:var(--superficie-hueco); color:var(--tinta);
  border:1px solid var(--linea-fuerte); border-radius:var(--radio-control);
}
label{display:block;font-size:var(--txt-menor);font-weight:var(--peso-medio);
  color:var(--tinta-2);margin:0 0 var(--e-1)}

table{width:100%;border-collapse:collapse;font-size:var(--txt-tabla)}
th,td{text-align:left;padding:var(--pad-celda);border-bottom:1px solid var(--linea)}
th{font-size:var(--txt-micro);text-transform:uppercase;letter-spacing:var(--track-etiqueta);
  color:var(--tinta-3);font-weight:var(--peso-fuerte)}
.envoltorio{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --- MOVIMIENTO REDUCIDO. Se apaga todo salvo el desplazamiento de un lienzo que el
       dedo esta arrastrando, que no es animacion sino manipulacion directa. --------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important; scroll-behavior:auto !important;
  }
  :root{--dur-rapida:0ms;--dur-media:0ms;--dur-lenta:0ms;--dur-luz:0ms;--dur-escena:0ms}
}


/* EL ESCENARIO. Es el unico sitio que se queda oscuro en los tres modos, porque la luz
   no se lee sobre blanco. Lo usan: la sala en 3D, la rejilla de luminarias, el lienzo
   del editor de recetas y la tarjeta de una salida. */
.escenario{
  background:var(--escenario); color:#F7F8FA;
  border-radius:var(--radio-tarjeta); position:relative; isolation:isolate;
  /* el borde superior es la unica linea del gradiente permitida fuera de las cuatro */
  border:1px solid #1E1E45;
}
.escenario .tinta-2{color:#AEB6C9} .escenario .tinta-3{color:#7E88A3}

/* LA LUMINARIA. Tres capas y cada una dice una cosa distinta:
   nucleo  = de que color es la luz que sale (fisica)
   derrame = cuanta luz hay (brillo)
   corona  = cuanto rojo lejano hay (la firma)   <- ver seccion 6
   Las tres se pintan solas desde las variables que devuelve luz.js. */
.luminaria{
  width:var(--luminaria-tam,40px); aspect-ratio:1; border-radius:var(--r-redondo);
  background:var(--luz-nucleo,#000);
  box-shadow:var(--luz-sombra,none);
  transition:background var(--dur-luz) var(--sal-luz), box-shadow var(--dur-luz) var(--sal-luz);
}
.luminaria[data-apagada]{background:#0F0F32;box-shadow:none;border:1px solid #1E1E45}

/* El numero SIEMPRE al lado del color. El color dice que hay rojo lejano; cuanto hay lo
   dice la cifra. Esta regla es de accesibilidad y de honestidad a la vez. */
.luminaria-ficha{display:flex;align-items:center;gap:var(--e-3)}
.luminaria-ficha .cifras{font-family:var(--fuente-dato);font-size:var(--txt-micro);
  font-variant-numeric:tabular-nums;color:#AEB6C9;line-height:1.25}
.luminaria-ficha .fr{color:var(--fr-texto);font-weight:var(--peso-fuerte)}

/* CHIPS DE ESTADO. Nunca color solo: forma + palabra + color. */
.chip{display:inline-flex;align-items:center;gap:var(--e-1);
  padding:var(--e-1) var(--e-3);border-radius:var(--r-redondo);
  font-size:var(--txt-menor);font-weight:var(--peso-fuerte)}
.chip::before{content:"";width:8px;height:8px;background:currentColor}
.chip.bien{color:var(--bien);background:var(--bien-fondo)}
.chip.bien::before{border-radius:50%}                     /* circulo */
.chip.aviso{color:var(--aviso);background:var(--aviso-fondo)}
.chip.aviso::before{clip-path:polygon(50% 0,100% 100%,0 100%)}   /* triangulo */
.chip.mal{color:var(--mal);background:var(--mal-fondo)}
.chip.mal::before{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)} /* hexagono */

/* LA FRANJA DE SUPLANTACION (resuelve la mitad visual de R2).
   Cuando un Soporte PARALED esta mirando los datos de un cliente, la cabecera deja de ser
   del cliente: se pone azul de marca con texto hueso. El azul de Ciencia Pura NUNCA
   aparece en el cromado de la web del cliente, asi que su sola presencia significa
   "estas viendo la casa de otro". No se gasta ningun color del espectro en esto. */
[data-suplantando] .barra{background:var(--azul-700);color:var(--hueso);
  border-bottom:3px solid var(--azul-500)}
[data-suplantando] .barra .quien-veo{font-weight:var(--peso-titular)}