/* ═══════════════════════════════════════════════════════════════════════════
   CIMA · TEMA CLARO — LOS AJUSTES A MANO
   ───────────────────────────────────────────────────────────────────────────
   `cima-tema-claro.css` lo escribe la herramienta y se pierde en cada corrida; esto se edita a
   mano y se carga después, así que es lo último que habla.

   Acá va SÓLO lo que de verdad cambia entre un tema y el otro y no se resuelve ni restaurando
   los tokens (eso es `cima-tema-claro-base.css`) ni derivando la regla oscura (eso es el
   generado). En VIVERO este archivo empezó largo y terminó corto: cada valor que uno impone a
   mano aplasta el de tres vecinos, y la cura casi siempre es impedir que el tema entre, no
   devolverle el color pieza por pieza.

   Las excepciones se escriben DESPUÉS de medir en pantalla quién gana, nunca antes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LOS DESPLEGABLES NATIVOS ────────────────────────────────────────────────────────────
   `cima-lujo.css` declara `color-scheme:dark` para que las listas que dibuja el sistema
   operativo —las de un `<select>`, los calendarios— salgan oscuras y no en blanco. En claro hay
   que decir lo contrario, o el desplegable se abre negro sobre una pantalla de papel.
   CIMA no tiene ni un `appearance:none`: todos sus `<select>` usan la flecha nativa, así que
   esto es lo único que hace falta y no hay ninguna flecha que reponer. */
/* OJO CON `var(--alto-cab)`: SIEMPRE CON VALOR DE RESERVA.
   Si esa variable no está definida en el momento en que el navegador calcula el degradado, el
   `var()` no resuelve y se descarta LA DECLARACIÓN ENTERA —no sólo ese trozo—, así que el riel
   se queda sin fondo y manda la regla de abajo, que dice `background-image:none`. Eso fue lo
   que pasó: el menú de Golfito apareció sin su teal porque `--alto-cab` aún no estaba puesta
   (la calcula el script midiendo la cabecera, y hasta que no mide, no existe).
   Con el 200px de reserva el menú nace con su color aunque la medición llegue tarde. */
html[data-tema="claro"],
html[data-tema="claro"] body,
html[data-tema="claro"] #aplicacion,
html[data-tema="claro"] #zona-modales{ color-scheme:light; }

/* ── 2 · EL MENÜ, EN TEAL ─────────────────────────────────────────────────────────────────────
   El mismo patrón que Luis aprobó en VIVERO y que después se calcó en Golfito: en claro el riel
   no se vuelve papel, se vuelve una pieza de teal con la letra en crema. Arriba sigue
   transparente, porque ahí pasa la fotografía, con el corte al píxel exacto que usa el tema
   oscuro —`var(--alto-cab, 200px)`, que en CIMA son 168px—.
   #046477: el blanco encima da 6,79:1 y contra el lienzo 6,13:1.

   EL PESO. El oscuro pinta el riel con `#barra-lateral`, que lleva un id, y el generado lo
   intenta con `.sidebar.bg-atlas-insignia`, que son dos clases: un id pesa más que cualquier
   cantidad de clases, así que el generado perdía y el riel se quedaba en tinta con la letra ya
   traducida a tinta —ilegible—. Acá se le responde con el mismo id. */
/* El atributo va repetido: el generado emite este mismo riel con `:not([data-pz-foto])`, que
   cuenta como una clase más, y además lo repite DENTRO del `@media (max-width:1024px)` con un
   crema opaco. Con un solo atributo mi regla perdía ahí, y en el teléfono el panel del menú
   se pintaba de crema por encima de la fotografía: la cabecera se veía gris en vez de mostrar
   la foto. Luis: «en modo móvil ese menú no se ve como debe de ser». */
html[data-tema="claro"][data-tema="claro"] #barra-lateral{
  background-color:transparent !important;
  background-image:linear-gradient(180deg,
    rgba(4,100,119,0) 0, rgba(4,100,119,0) var(--alto-cab, 200px),
    #046477 var(--alto-cab, 200px)) !important;
  /* LA SOMBRA: EXACTAMENTE LA DEL TEMA OSCURO, SIN RECALCULAR NADA.
     Esto llevó tres intentos y el error de fondo fue mío. Primero le puse una sombra propia,
     más suave, y desapareció. Después calculé la opacidad que «se percibe igual» sobre papel
     —tinta al 3%— y desapareció del todo. Luis, con razón: «no deberías cambiar nada de la
     sombra; el encabezado la regla es que no cambia».

     Y la razón técnica le da la razón a él: esta sombra cae SOBRE LA FOTOGRAFÍA, y la
     fotografía es la misma en los dos temas. El cálculo de «mismo efecto percibido» sirve para
     una sombra que cae sobre el lienzo —que sí cambia de color—, no para una que cae sobre una
     imagen que no cambia. Aplicado acá, lo único que hacía era borrarla.
     Se copian las DOS capas tal cual: la sombra y el filete de 1px que la acompaña. */
  box-shadow:10px 0 26px -10px rgba(13,23,32,.85), 1px 0 0 0 rgba(234,223,206,.12) !important; }

/* SOBRE EL TEAL SE ESCRIBE EN CREMA — Y SÓLO DENTRO DEL MENÚ.
   Cada regla de acá lleva `:not([data-pz-foto])` y cuelga de `#menu`, y las dos cosas son
   deliberadas. La primera versión decía `#barra-lateral h2` a secas, y ese `h2` no es un
   rótulo del menú: es el título «CIMA · CONTROL MAESTRO», que vive ARRIBA, sobre la
   fotografía. Resultado: en claro pasaba de blanco al 82% a crema al 62% — cambiaba algo que
   por regla de la casa no puede cambiar, y Luis lo vio: «esta sección se ve mal».
   Es el mismo error que ya se había cometido en Golfito: pintar de más. Lo que está sobre una
   imagen no se toca, ni para mejorarlo. */
html[data-tema="claro"] #barra-lateral #menu .sidebar-link:not([data-pz-foto]),
html[data-tema="claro"] #barra-lateral #menu .sidebar-link:not([data-pz-foto]) *{ color:rgba(234,223,206,.70) !important; }

/* LOS RÓTULOS DE GRUPO. El texto va DIRECTO en el div —`<div class="menu-grupo">Proveedores y
   servicios</div>`—, sin `<span>` ni `<h2>` adentro. La primera versión apuntaba a esos hijos
   que no existen, así que el rótulo se quedó en la tinta que le puso el generado: tinta sobre
   teal, ilegible. Luis: «los títulos no respetan lo de las otras dos». Crema al 62%, que es el
   valor de VIVERO y de Golfito. */
html[data-tema="claro"] #barra-lateral #menu .menu-grupo:not([data-pz-foto]),
html[data-tema="claro"] #barra-lateral #menu h2:not([data-pz-foto]),
html[data-tema="claro"] #barra-lateral #menu h3:not([data-pz-foto]){ color:rgba(255,255,255,.76) !important; }
/* 2026-09-27: los rótulos de grupo en blanco al 76 % y no en crema al 62 %: sobre el teal del
   menú la crema quedaba en 2,9:1; así dan 4,6:1, lo mismo que en el tema teal. */
html[data-tema="claro"] #barra-lateral #menu hr:not([data-pz-foto]),
html[data-tema="claro"] #barra-lateral #menu .menu-grupo:not([data-pz-foto]) hr{ border-color:rgba(234,223,206,.22) !important; }
html[data-tema="claro"] #barra-lateral #menu .sidebar-link:hover:not([data-pz-foto]){ background-color:rgba(234,223,206,.10) !important; }
html[data-tema="claro"] #barra-lateral #menu .sidebar-link:hover:not([data-pz-foto]),
html[data-tema="claro"] #barra-lateral #menu .sidebar-link:hover:not([data-pz-foto]) *{ color:#FFFFFF !important; }

/* EL ACTIVO, CON SU DEGRADADO: el mismo gesto del tema oscuro —un teal que entra fuerte por la
   izquierda y se va— corrido a la escala clara, con su filete interior. */
html[data-tema="claro"] #barra-lateral #menu .sidebar-link.active:not([data-pz-foto]){
  background-color:transparent !important;
  background-image:linear-gradient(90deg, rgba(0,61,74,.92) 0%, rgba(0,61,74,.34) 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(234,223,206,.16) !important; }
html[data-tema="claro"] #barra-lateral #menu .sidebar-link.active:not([data-pz-foto]),
html[data-tema="claro"] #barra-lateral #menu .sidebar-link.active:not([data-pz-foto]) *{ color:#FFFFFF !important; }

/* el pie del menú —el traductor y la firma—, un tono más hondo del mismo teal */
html[data-tema="claro"] #barra-lateral > div.ocultable:last-of-type:not([data-pz-foto]){
  background-color:rgba(0,61,74,.28) !important;
  border-top:0.8px solid rgba(234,223,206,.16) !important; }
html[data-tema="claro"] #barra-lateral > div.ocultable:last-of-type:not([data-pz-foto]) *{ color:rgba(234,223,206,.72) !important; }
html[data-tema="claro"] #barra-lateral .lang-btn:not([data-pz-foto]){ background-color:transparent !important; }
html[data-tema="claro"][data-tema="claro"] #barra-lateral .lang-btn.active:not([data-pz-foto]),
html[data-tema="claro"][data-tema="claro"] #barra-lateral .lang-btn.active:not([data-pz-foto]) *{
  /* El mismo teal que en oscuro y el mismo que en VIVERO: el botón activo NO se traduce.
     Estaba al 85% para calcular contraste contra el pie teal de CIMA, y eso lo dejaba de
     otro tono que allá, donde es el mismo en los dos temas. */
  background-color:#00455A !important; color:#FFFFFF !important; }
html[data-tema="claro"] #barra-lateral .lang-btn:not(.active):not([data-pz-foto]),
html[data-tema="claro"] #barra-lateral .lang-btn:not(.active):not([data-pz-foto]) *{ color:rgba(234,223,206,.72) !important; }

/* Los dos botones de los extremos —colapsar y ocultar— viven sobre la fotografía y quedan como
   en el tema oscuro, que es la regla de la casa: los dos llevan `data-pz-foto` (el de ocultar
   desde el 2026-09-27, en cima-lujo.js), así que ningún tema los alcanza. */

/* ── 3 · LA CABECERA DE LOS MODALES ───────────────────────────────────────────────
   `.bg-atlas-solido` es la franja de color de TODAS las ventanas de CIMA —las 33 aperturas de
   modal usan el mismo molde—, y era el único degradado de la app que el generador rompió. Se
   buscaron los demás uno por uno con un análisis de luminosidad: es el único, en las dos
   páginas.

   POR QUÉ SE ROMPE. El generador traduce cada color por separado, y eso es correcto para un
   color suelto pero no para un recorrido. En tinta va `#141D27 → #1A2633 → #005565`: arranca en
   el suelo y termina en deep. Traducido color a color queda `#F6F3ED → #F6F3ED → #005565`: los
   dos primeros se aclaran porque son fondos, el deep se queda porque es color de marca y no
   cambia nunca — y el resultado es una franja que va de blanco a teal, cortada por la mitad.

   La cura no es traducir mejor: es decidir. En claro la cabecera del modal es lo mismo que el
   riel, una pieza de teal, y sobre teal se escribe en blanco. Se conserva el gesto del oscuro
   —un recorrido de 135° que termina en deep— corrido a la escala clara. */
html[data-tema="claro"][data-tema="claro"] .bg-atlas-solido{
  background:linear-gradient(135deg, #04566A 0%, #046477 45%, #005565 100%) !important;
  background-image:linear-gradient(135deg, #04566A 0%, #046477 45%, #005565 100%) !important;
  background-color:#046477 !important; }
/* Sobre esa franja, la letra en blanco y los íconos también. El fondo NO baja a los hijos:
   dárselo a todos le pone un cuadro de color a cada ícono, que fue lo que pasó en Golfito. */
/* La letra lleva un atributo MÁS que el fondo, y no es capricho: el generado nombra al título
   con dos clases —`.bg-atlas-solido .fuente-titular:not([data-pz-foto])`—, o sea (0,4,1), y mi
   `*` sólo llegaba a (0,3,1). Con tres atributos queda (0,5,1) y gana sin nombrar una por una
   las clases que la app le ponga mañana a ese título. */
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] .bg-atlas-solido,
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] .bg-atlas-solido *{ color:#FFFFFF !important; }
html[data-tema="claro"][data-tema="claro"] .bg-atlas-solido *{
  background-color:transparent !important; background-image:none !important; }
/* EL PESO, OTRA VEZ. La primera versión de este bloque iba con un solo `[data-tema="claro"]` y
   perdía: el generado escribe `html[data-tema="claro"] .bg-atlas-solido:not([data-pz-foto])`, y
   ese `:not()` cuenta como una clase más. Son (0,3,1) contra (0,2,1). Con el atributo repetido
   quedan parejos y gana el último que habla, que es este archivo. */

/* ── 4 · SOBRE UN RELLENO DE ACENTO, LA LETRA ES BLANCA ───────────────────────────────
   Esto no es un parche: es la ley de texto por fondo del libro de marca —«Fondo Deep → cuerpo
   Blanco»—, escrita para las piezas que llevan relleno deep o teal.

   Hace falta decirla a mano porque el deep y el teal NO CAMBIAN entre temas —son acentos de la
   marca—, mientras que la letra que va encima sí la traduce el generador si no se da cuenta de
   que hay un acento debajo. Se enseñó a la herramienta a darse cuenta —ahora indexa los fondos
   de acento por selector Y por sujeto, en todos los archivos—, y con eso cayó la mayoría; estas
   piezas concretas se aseguran acá porque su fondo se lo da una regla y su color otra, en
   archivos distintos, y la pestaña activa de una ficha tiene OCHO reglas repartidas. */
/* SÓLO LAS QUE TIENEN EL RELLENO, NO TODAS LAS PESTAÑAS ACTIVAS.
   La primera versión decía `.pestana.activa` a secas y pintaba de blanco a todas. Pero no
   todas llevan fondo deep: en «Listas y tipos» hay una pestaña activa SIN relleno, y ahí el
   blanco quedaba sobre papel —el ícono desaparecía, 1,11 de contraste—. Es el mismo error de
   siempre: imponer un valor de más rompe al vecino que no lo pedía.
   Se nombran los dos contextos donde el fondo deep SÍ está declarado, y nada más. La pestaña
   activa sin relleno la traduce el generador, que para eso está. */
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] .pestanas-editor .pestana.activa,
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] .pestanas-editor .pestana.activa *,
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] #zona-detalle div.sin-barra > .pestana.activa,
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] #zona-detalle div.sin-barra > .pestana.activa *{
  color:#FFFFFF !important; }

/* El subtítulo de la cabecera del modal va al 80%, como en el tema oscuro: la regla de arriba
   pone todo en blanco pleno y le borraba ese matiz. */
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] .bg-atlas-solido p{
  color:rgba(255,255,255,.8) !important; }

/* ── 5 · LA DIVISIÓN ENTRE EL MENÚ Y LO DEMÁS ───────────────────────────────────
   Luis: «hay un detalle que desaparece del encabezado en modo claro: la división entre el menú
   y lo demás».
   Es el filete derecho del riel. En tinta es crema al 12% y se ve perfectamente recortado
   contra la fotografía; traducido queda tinta al 6,7%, que sobre una foto no existe.
   Esa línea ARRANCA sobre la fotografía —la cruza de arriba abajo—, así que por la regla de la
   casa va igual en los dos temas. Se le devuelve su crema, y la sombra lateral se conserva en
   la escala clara, que esa sí cae sobre el lienzo y ahí sí cambia. */
html[data-tema="claro"][data-tema="claro"] #barra-lateral{
  border-right:0.8px solid rgba(234,223,206,.12) !important; }

/* ── 6 · LAS PIEZAS QUE PINTA EL JAVASCRIPT ──────────────────────────────────────
   Tres módulos —`cima-integracion.js`, `cima-clientes.js` y `cima-venta.js`— inyectan su propia
   hoja de estilo como un array de cadenas dentro del JavaScript. El generador lee archivos
   `.css`, así que esas reglas nunca pasan por él: son el único rincón de CIMA que queda fuera
   de la cobertura automática, y por eso se resuelven acá, a mano y nombradas una por una.

   El caso que lo destapó: el filtro activo de Clientes —«Todos 450»— se pinta con
   `.enl-chip.activa{background:var(--navy);color:#fff}`, y `--navy` NO significa lo mismo en
   los dos temas: en el oscuro es blanco (es el color de los títulos sobre tinta) y en el claro
   es tinta. El resultado en claro era letra oscura sobre relleno deep, ilegible.
   Luis: «ese botón, la letra oscura no se ve bien, debe ser blanca en clientes».

   La regla es la del libro: sobre un relleno de acento, la letra va en blanco. Y se nombra
   SÓLO el estado con relleno —`.activa`—, nunca el chip en reposo, que vive sobre papel. */
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] .enl-chip.activa,
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] .enl-chip.activa *,
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] .enl-chip.activa b{
  color:#FFFFFF !important; }
/* Y AL PASAR EL RATÓN NO PIERDE SU RELLENO. `.segmento .enl-chip:hover` le pone a CUALQUIER
   chip un fondo de tinta al 6% —casi papel— y eso también alcanza al que está activo: se le
   caía el deep y, con la regla de arriba forzando la letra blanca, quedaba blanco sobre papel.
   Luis: «si pongo la flecha encima, el color desaparece, y eso no pasa en modo oscuro».
   En oscuro no se notaba porque ahí el fondo aguado sigue siendo oscuro y la letra clara se
   lee igual; el fallo sólo aparece sobre papel.
   El activo conserva su relleno y su letra, con o sin ratón encima. */
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] .enl-chip.activa:hover,
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] .segmento .enl-chip.activa:hover{
  background:#005565 !important;
  background-color:#005565 !important;
  border-color:#005565 !important;
  color:#FFFFFF !important; }
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] .enl-chip.activa:hover *,
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] .segmento .enl-chip.activa:hover *{
  color:#FFFFFF !important; }

/* ── 7 · LA PASTILLA DEL ES/EN, TAMBIEN EN CLARO (2026-09-23) ───────────────────────────────
   Al acotar en oscuro las dos reglas de la pastilla del usuario, el pie paso a tener su propia
   regla con un id —(1,2,0)—, y esa le ganaba a la del tema claro, que cuelga solo de clases.
   O sea que arreglar el oscuro habria dejado el pie con crema al 6% sobre papel. Va con el id
   y la clase del pie para pesar mas, y con los valores de VIVERO en claro: tinta al 6% de
   fondo y su filete al 16,5%, sin sombra. */
html[data-tema="claro"] #barra-lateral > div.ocultable:last-of-type .user-glass-pill:not([data-pz-foto]){
  background:rgba(26,38,51,.08) !important;
  border:0.8px solid rgba(26,38,51,.098) !important;
  box-shadow:none !important; }