/* ===================================================================================== 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: #12123C; /* tarjeta, panel */ --superficie-alta: #1B1B48; /* 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(2.5rem,4.2vw,4rem); /* era 88 px: gritaba (2026-09-02) */ --track-portada:-.025em; --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; --peso-display:800; /* --- 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:14px; --r-4:22px; --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. ---------------- */ /* LA FIRMA DE LA CASA: la regla de luz. Es --espectro con nombre de rol y vive en cuatro sitios y en ninguno mas: el borde de arriba del escenario, el de abajo de la barra, el de arriba del pie y el de la cabecera de la hoja. Siempre LINEA de 2 px, nunca relleno (pasada de diseno del 2026-09-02). */ --regla-luz: linear-gradient(90deg,#001090 0%,#22D3EE 34%,#9EE52B 67%,#E0218A 100%); --regla-luz-op:.85; --sombra-panel: inset 0 1px 0 rgba(255,255,255,.045); --sombra-tarjeta: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.03), 0 12px 32px -20px rgba(0,0,0,.8); --sombra-tarjeta-hover: inset 0 1px 0 rgba(255,255,255,.09), 0 20px 44px -20px rgba(0,0,0,.85); --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-escenario:var(--r-4); --radio-control:10px; --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:#F3F4F9; --superficie:#FFFFFF; --superficie-alta:#FFFFFF; --superficie-hueco:#EDEFF6; --tinta:#0A0A2E; /* 18.03:1 */ --tinta-2:#3F4763; /* 8.62:1 */ --tinta-3:#6B7280; /* 4.55:1 */ --linea:#E6E8F0; --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; --regla-luz-op:.6; --sombra-tarjeta: 0 1px 2px rgba(10,10,46,.05), 0 10px 28px -16px rgba(10,10,46,.16); --sombra-tarjeta-hover: 0 2px 4px rgba(10,10,46,.06), 0 18px 40px -18px rgba(10,10,46,.26); --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:#F3F4F9; --superficie:#FFFFFF; --superficie-alta:#FFFFFF; --superficie-hueco:#EDEFF6; --tinta:#0A0A2E; /* 18.03:1 */ --tinta-2:#3F4763; /* 8.62:1 */ --tinta-3:#6B7280; /* 4.55:1 */ --linea:#E6E8F0; --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; --regla-luz-op:.6; --sombra-tarjeta: 0 1px 2px rgba(10,10,46,.05), 0 10px 28px -16px rgba(10,10,46,.16); --sombra-tarjeta-hover: 0 2px 4px rgba(10,10,46,.06), 0 18px 40px -18px rgba(10,10,46,.26); --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; --regla-luz-op:1; --sombra-tarjeta:none; --sombra-tarjeta-hover: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; --regla-luz-op:1; --sombra-tarjeta:none; --sombra-tarjeta-hover:0 0 0 2px #24294A; --regla-luz-op:1; --sombra-tarjeta:none; --sombra-tarjeta-hover: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 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 con el dedo, 40 con el mouse; 56 en lo que mueve luz sobre un cultivo. ----------------------------------------------------------------- Design intent (EN): four button tiers and one height. Primary (filled, one per view), secondary (thin outline), tertiary (text only, action color) and icon (quiet square, for row actions and the kebab). Medium weight everywhere except the primary. Touch keeps 48 px; a pointer gets 40 px, which is what makes a desktop screen stop looking like a kiosk. The sun theme keeps its 56 px: gloves. (Pasada de diseno del 2026-09-02.) */ @media (pointer:fine){ :root{ --alto-control:40px; --alto-control-clave:48px; --pad-control:var(--e-2) var(--e-3); } } 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-medio); font-size:var(--txt-menor); line-height:1.2; border-radius:var(--radio-control); cursor:pointer; transition:background var(--dur-rapida) var(--sal-estandar), border-color var(--dur-rapida) var(--sal-estandar); } .btn-primario{background:var(--accion);color:var(--tinta-sobre-color);font-weight:var(--peso-fuerte); border:1px solid var(--accion-borde)} /* el borde recorta el boton del fondo */ .btn-primario{transition:background var(--dur-rapida) var(--sal-estandar),translate var(--dur-rapida) var(--sal-estandar),box-shadow var(--dur-rapida) var(--sal-estandar)} .btn-primario:hover{background:var(--accion-viva);translate:0 -1px;box-shadow:0 8px 20px -10px var(--accion)} .btn-primario:active{translate:0 0;scale:.985;box-shadow:none} .btn-secundario{background:transparent;color:var(--tinta);border:1px solid var(--linea-fuerte)} .btn-secundario:hover{border-color:var(--tinta-2)} .btn-secundario:hover{background:var(--superficie-hueco);border-color:var(--tinta-3)} /* Terciario: solo texto en el color de accion. Para "Mostrar todo", "Reintentar", "Mejor no". */ .btn-terciario{background:transparent;color:var(--accion);border:1px solid transparent;padding-inline:var(--e-2)} .btn-terciario:hover{background:var(--superficie-hueco)} /* Icono: un cuadrado callado. Para el menu de tres puntos y acciones de fila. */ .btn-icono{background:transparent;color:var(--tinta-2);border:1px solid transparent; min-width:var(--alto-control);padding:0;font-size:1.25rem;line-height:1;letter-spacing:.05em} .btn-icono:hover{background:var(--superficie-hueco);color:var(--tinta)} .btn-clave{min-height:var(--alto-control-clave);font-size:var(--txt-base)} /* "Mandar receta a una luminaria" */ button:disabled{opacity:.45;cursor:not-allowed} /* --- EL MENU DE TRES PUNTOS (js/menu.js) ---------------------------------------------- */ .menu{position:relative;display:inline-flex;flex:0 0 auto} .menu__lista{position:absolute;right:0;top:calc(100% + 4px);z-index:60;min-width:12rem; padding:var(--e-1);background:var(--superficie);color:var(--tinta); border:1px solid var(--linea-fuerte);border-radius:var(--radio-control);box-shadow:var(--sombra-flotante)} .menu[data-arriba="1"] .menu__lista{top:auto;bottom:calc(100% + 4px)} .menu__item{display:block;width:100%;min-height:36px;padding:var(--e-2) var(--e-3);text-align:left; background:transparent;color:var(--tinta);border:0;border-radius:var(--r-1);font-weight:var(--peso-texto);font-size:var(--txt-menor)} .menu__item:hover,.menu__item:focus-visible{background:var(--superficie-hueco);outline-offset:-2px} .menu__item--peligro{color:var(--mal)} .menu__sep{height:1px;margin:var(--e-1) 0;background:var(--linea)} /* --- EL CONTROL SEGMENTADO. Un filtro con tres o cuatro estados, en vez de una fila de chips que parecen botones. El estado elegido va relleno; los demas, en texto. -------- */ .segmentado{display:inline-flex;padding:2px;gap:2px;background:var(--superficie-hueco); border:1px solid var(--linea);border-radius:var(--radio-control)} .segmentado>button{min-height:calc(var(--alto-control) - 8px);min-width:0;padding:0 var(--e-3); background:transparent;color:var(--tinta-2);border:0;border-radius:calc(var(--radio-control) - 2px);font-weight:var(--peso-medio)} .segmentado>button[aria-pressed="true"]{background:var(--superficie);color:var(--tinta);box-shadow:0 1px 2px rgba(0,0,0,.18)} .segmentado>button:hover{color:var(--tinta)} /* --- LA BARRA DE FILTROS. Una sola fila: segmentado, buscador, y como mucho un select. */ .barra-filtros{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap} .barra-filtros input[type=search],.barra-filtros input[type=text]{flex:1 1 14rem;min-width:10rem;width:auto} .barra-filtros select{width:auto;flex:0 1 auto} /* 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. El fondo dejo de ser un rectangulo liso: lleva un halo arriba, que es material y no luz de luminaria, y arriba del todo la regla de luz (pasada de diseno del 2026-09-02). */ .escenario{ background:radial-gradient(120% 90% at 50% -10%,#16164E 0%,#0A0A2E 55%); color:#F7F8FA; border-radius:var(--radio-escenario); position:relative; isolation:isolate; border:1px solid #1E1E45; box-shadow:var(--sombra-tarjeta); } .escenario::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--regla-luz); opacity:var(--regla-luz-op); border-radius:var(--radio-escenario) var(--radio-escenario) 0 0; pointer-events:none; z-index:1; } .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)} /* ------------------------------------------------------------------------------------ EL PANEL SIN CLAVE ------------------------------------------------------------------------------------ No se puede cerrar y ocupa el ancho entero, a proposito. Un modo inseguro discreto es un modo inseguro permanente: se enciende para una tarde de pruebas, no se nota, y se queda puesto meses. Este tiene que estorbar hasta que alguien lo apague. Los colores van escritos y no salen de una variable de tema: este cartel tiene que leerse igual en claro, en oscuro y en automatico, y una variable que alguien redefina podria dejarlo invisible, que es justo lo unico que no puede pasarle. */ .chip-sin-clave{ display:inline-flex; align-items:center; gap:.375rem; height:1.5rem; padding:0 .625rem; border-radius:999px; background:#33260C; color:#F5B544; border:1px solid #F5B544; font-family:var(--fuente-dato); font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; } .chip-sin-clave::before{ content:""; width:.375rem; height:.375rem; border-radius:50%; background:#F5B544; } /* Era una franja roja de ancho completo arriba de todo. Se cambio por este chip dentro de la barra en la pasada de diseno del 2026-09-02: seguia sin poderse cerrar, pero era el color mas fuerte de la web y tapaba la marca. */ /* --- LA HOJA LATERAL (js/hoja.js): donde viven los formularios -------------------------- Design intent (EN): a right-hand sheet over a dimmed page, one at a time, no animation. */ .hoja__fondo{position:fixed;inset:0;z-index:70;background:rgb(10 10 46 / .45)} .hoja{position:fixed;inset:0 0 0 auto;z-index:71;width:min(28rem,100%); display:flex;flex-direction:column;background:var(--superficie);color:var(--tinta); border-left:1px solid var(--linea);box-shadow:var(--sombra-flotante)} .hoja__cab{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--e-3); padding:var(--e-4) var(--e-5);border-bottom:1px solid var(--linea)} .hoja__titulo{margin:0;font-size:var(--txt-guia,1.25rem);font-weight:var(--peso-fuerte)} .hoja__cerrar{font-size:1.5rem} .hoja__cuerpo{flex:1 1 auto;overflow:auto;padding:var(--e-5)} .hoja__cuerpo .campos,.hoja__cuerpo .aj__campos,.hoja__cuerpo .lums__campos{grid-template-columns:1fr} .hoja__pie,.hoja__cuerpo .fila-acciones{display:flex;gap:var(--e-2);margin-top:var(--e-5)} body.con-hoja{overflow:hidden} /* --- LA CABECERA DE PANTALLA. Titulo, una linea de contexto y, a la derecha, como mucho un primario y un secundario (o el buscador). Todas las pantallas usan esta. ----------- */ .cabecera{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e-1) var(--e-4); align-items:center;margin-bottom:var(--e-5)} .cabecera h1{margin:0;font-size:var(--txt-t2);letter-spacing:var(--track-titulo)} .cabecera__contexto{grid-column:1;margin:0;color:var(--tinta-2);font-size:var(--txt-menor)} .cabecera__acciones{grid-column:2;grid-row:1 / span 2;display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap;justify-content:flex-end} @media (max-width:599px){ .cabecera{grid-template-columns:1fr} .cabecera__acciones{grid-column:1;grid-row:auto;justify-content:flex-start} } /* --- SECCIONES Y TARJETAS. Una seccion se separa con titulo y aire, no con un marco. Nunca una caja dentro de otra caja. La tarjeta lleva solo un borde de 1 px --linea. ---- */ .seccion{margin-top:var(--gap-seccion)} .seccion__cab{display:flex;align-items:end;justify-content:space-between;gap:var(--e-4);margin-bottom:var(--e-4)} .seccion__cab h2{margin:0;font-size:var(--txt-guia,1.25rem);font-weight:var(--peso-fuerte)} .seccion__cab p{margin:0;color:var(--tinta-2);font-size:var(--txt-menor)} .tarjeta{background:var(--superficie);border:1px solid color-mix(in srgb,var(--linea) 70%,transparent); border-radius:var(--radio-tarjeta);padding:var(--pad-tarjeta);box-shadow:var(--sombra-tarjeta); transition:translate var(--dur-rapida) var(--sal-estandar),box-shadow var(--dur-rapida) var(--sal-estandar),border-color var(--dur-rapida)} .tarjeta:hover{translate:0 -2px;box-shadow:var(--sombra-tarjeta-hover)} /* Una fila de lista: 56 px, linea fina abajo, y su menu de tres puntos aparece con el mouse. */ .fila-lista{display:flex;align-items:center;gap:var(--e-4);min-height:56px;padding:var(--e-2) 0;border-bottom:1px solid var(--linea)} .fila-lista>.crece{flex:1 1 auto;min-width:0} @media (pointer:fine){ .fila-lista .menu__boton,.fila-lista .btn-terciario.fila-lista__accion{opacity:0} .fila-lista:hover .menu__boton,.fila-lista:focus-within .menu__boton, .fila-lista:hover .fila-lista__accion,.fila-lista:focus-within .fila-lista__accion{opacity:1} } /* En pantalla angosta la cabecera de seccion deja bajar su boton en vez de partirlo en dos lineas (pasada de diseno del 2026-09-02). */ @media (max-width:599px){ .seccion__cab{flex-wrap:wrap;align-items:flex-start} } /* --- ICONOS. Los simbolos viven en el sprite de index.html y se usan asi: Antes la gravedad se dibujaba con los caracteres "!" y "^" de la fuente del sistema, que cambia en cada maquina (pasada de diseno del 2026-09-02). --------------------------- */ .ico{width:1.25rem;height:1.25rem;flex:none;vertical-align:-.2em; stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .ico--l{width:1.5rem;height:1.5rem} .ico--xl{width:2rem;height:2rem} /* La cabecera de la hoja termina en la regla de luz, como el escenario, la barra y el pie. */ .hoja__cab{border-bottom:0} .hoja__cab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--regla-luz);opacity:var(--regla-luz-op);pointer-events:none} /* Hueco de tarjeta mientras llega el servidor. Ninguna pantalla esta obligada a usarlo. */ .esqueleto{background:linear-gradient(90deg,var(--superficie-hueco) 0%,color-mix(in srgb,var(--superficie-hueco) 85%,#fff) 50%,var(--superficie-hueco) 100%); background-size:200% 100%;animation:esq 1.6s linear infinite;border-radius:var(--r-2)} @keyframes esq{to{background-position:-200% 0}}