/* ═══════════════════════════════════════════════════════════════════════════
   VIVERO · TEMA CLARO — LOS AJUSTES A MANO (Luis, 2026-09-23)
   ───────────────────────────────────────────────────────────────────────────
   `vivero-tema-claro.css` lo escribe la herramienta y se pierde en cada corrida; esto se edita
   a mano y se carga después.

   ESTE ARCHIVO ES CORTO A PROPÓSITO, Y ANTES ERA LARGO. Estuve tres intentos replicando acá,
   pieza por pieza, los valores del tema oscuro para las zonas con fotografía: el velo, la
   división, la píldora, los títulos, los botones. Cada vez que corregía una aparecía otra, y
   era una pelea de especificidad que se perdía sola.
   La cura fue dejar de darla: la herramienta emite ahora cada regla con
   `:not([data-pz-foto])`, así que el tema claro NO ENTRA donde hay una
   imagen detrás. No hay nada que devolver, porque nunca se le quita nada: queda el tema oscuro
   intacto. Lo que sobrevive acá es sólo lo que de verdad cambia entre un tema y el otro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · EL MENÚ, EN TEAL ─────────────────────────────────────────────────────────────────────
   Luis: «el color de la selección es como imagino la barra completa, y de ahí todo en escala
   correcta»; después: «el teal del menú debe ser un poquito más oscuro».
   #046477: el blanco encima da 6,79:1 y contra el lienzo 6,13:1. Arriba sigue transparente,
   porque ahí pasa la fotografía, con el corte al píxel igual que en el tema oscuro. */
/* 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"].riel-con-banda #main-sidebar{
  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;
  box-shadow:10px 0 26px -10px rgba(26,38,51,.26), 1px 0 0 rgba(26,38,51,.08) !important; }
html[data-tema="claro"]:not(.riel-con-banda) #main-sidebar{ background:#046477 !important; }

/* Sobre el teal se escribe en crema, con los mismos valores del tema oscuro: los enlaces al
   70%, los rótulos de grupo al 62%. Luis: «el color de la letra de las secciones del menú
   —Ventas, Finanzas— deben ser en color claro como en modo oscuro, porque es el que se ve
   bien». Y nada de teal sobre teal, que él mismo había señalado. */
html[data-tema="claro"] #main-sidebar .sidebar-link{ color:rgba(234,223,206,.70) !important; }
html[data-tema="claro"] #main-sidebar .sidebar-link .material-icons-outlined,
html[data-tema="claro"] #main-sidebar .sidebar-link i,
html[data-tema="claro"] #main-sidebar .sidebar-link svg{ color:rgba(234,223,206,.70) !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"] #main-sidebar .viv-grupo,
html[data-tema="claro"] #main-sidebar .viv-grupo *,
html[data-tema="claro"] #main-sidebar h3{ color:rgba(255,255,255,.76) !important; }
html[data-tema="claro"] #main-sidebar .viv-grupo hr{ border-color:rgba(234,223,206,.22) !important; }
html[data-tema="claro"] #main-sidebar .sidebar-link:hover{ background-color:rgba(234,223,206,.10) !important; }
html[data-tema="claro"] #main-sidebar .sidebar-link:hover,
html[data-tema="claro"] #main-sidebar .sidebar-link:hover *{ color:#FFFFFF !important; }

/* EL ACTIVO, CON SU DEGRADADO. Luis: «en modo oscuro la selección tiene un efecto de color,
   como una especie de degradado; en modo claro no está». Es el mismo gesto —un teal que entra
   fuerte por la izquierda y se va— corrido a la escala clara, con el mismo filete interior. */
html[data-tema="claro"] #main-sidebar .sidebar-link.active{
  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"] #main-sidebar .sidebar-link.active,
html[data-tema="claro"] #main-sidebar .sidebar-link.active *{ color:#FFFFFF !important; }

/* el pie del menú, un tono más hondo del mismo teal */
html[data-tema="claro"] #main-sidebar > div:last-of-type{
  background-color:rgba(0,61,74,.28) !important;
  border-top:0.8px solid rgba(234,223,206,.16) !important; }
html[data-tema="claro"] #main-sidebar > div:last-of-type *{ color:rgba(234,223,206,.72) !important; }
html[data-tema="claro"] #main-sidebar .lang-btn{ background-color:transparent !important; }
/* La letra del idioma activo va en blanco SIEMPRE. Luis: «cuando pongo el inglés la letra no
   se pone color blanco». Eran dos cosas: la regla del pie estaba escrita con `div:last-child`
   —que no alcanza a nada, porque el menú termina con los dos botones de colapsar y ocultar— y
   además el botón arrastra su propia clase `text-gray-400` del marcado, que el tema traduce a
   tinta. Se le gana con el id y nombrando también al hijo. */
/* El atributo va repetido para ganarle a las reglas del tema, que arrastran los selectores
   originales de la app: varias llevan un `:not(#login-screen *)` con un id adentro, y un id
   pesa mas que cualquier clase. Medido: el EN activo quedaba en tinta al 58% pese a estar
   bien marcado como activo. */
html[data-tema="claro"][data-tema="claro"] #main-sidebar .lang-btn.active,
html[data-tema="claro"][data-tema="claro"] #main-sidebar .lang-btn.active *,
html[data-tema="claro"][data-tema="claro"] #main-sidebar > div:last-of-type .lang-btn.active,
html[data-tema="claro"][data-tema="claro"] #main-sidebar > div:last-of-type .lang-btn.active *{
  background-color:rgba(0,61,74,.85) !important; color:#FFFFFF !important; }
/* y el inactivo, en crema como el resto del pie */
html[data-tema="claro"] #main-sidebar > div:last-of-type .lang-btn:not(.active),
html[data-tema="claro"] #main-sidebar > div:last-of-type .lang-btn:not(.active) *{
  color:rgba(234,223,206,.72) !important; }

/* ── 2 · LO ÚNICO QUE CAMBIA SOBRE LA FOTOGRAFÍA: EL ÍCONO DE LA PERSONA ─────────────────────
   Luis: «el campo del usuario también debe ser como el modo oscuro para respetar la regla; lo
   único que cambia es el color del ícono, que ahora debe ser el de la selección de la barra de
   menú, pero con el efecto que tiene en modo oscuro, en la escala del teal del modo claro».
   Lleva el atributo repetido para ganarle a la exclusión general, que es justamente lo que
   protege al resto de la píldora. */
/* OJO CON EL SELECTOR. `> div:first-child` NO es el círculo del ícono: es el bloque que
   envuelve al ícono Y al nombre —89px de ancho contra los 24 del círculo—, así que pintarlo
   ponía una caja de color detrás del nombre. Luis: «no cuadra esto del usuario, aparece un
   contenedor de color». El círculo es el que lleva `bg-sky-500/20`, que es la clase que la app
   ya usaba para él. */
html[data-tema="claro"] #main-sidebar [data-pz-foto][data-pz-foto] .user-glass-pill .bg-sky-500\/20,
html[data-tema="claro"] #main-sidebar .user-glass-pill .bg-sky-500\/20{
  /* El degradado se retiró: Luis eligió el círculo de Golfito, que es el deep sólido, y pidió
     que sea igual en los dos temas. La medida y el color viven ahora en `prisma-riel.css`. */
  background-color:#005565 !important;
  background-image:none !important;
  color:#FFFFFF !important; }
/* y el envoltorio no lleva fondo, como en el tema oscuro */
html[data-tema="claro"] #main-sidebar [data-pz-foto][data-pz-foto] .user-glass-pill > div:first-child{
  background-color:transparent !important; background-image:none !important; }

/* ── 3 · EL BOTÓN QUE ABRE EL MENÚ ───────────────────────────────────────────────────────────
   Luis: «el botón en modo claro pasa a ser del color teal del menú y línea color blanco».
   Es el ÚNICO de los tres que cambia: aparece cuando el menú está cerrado y flota sobre el
   contenido claro, así que pertenece al menú que abre. Los de colapsar y ocultar viven sobre
   la fotografía y quedan idénticos al tema oscuro, por la exclusión general. */
html[data-tema="claro"] #riel-mostrar,
html[data-tema="claro"] #menu-toggle{
  background-color:#046477 !important;
  border:1px solid rgba(255,255,255,.55) !important;
  color:#FFFFFF !important;
  box-shadow:0 10px 26px -14px rgba(26,38,51,.55) !important; }
html[data-tema="claro"] #riel-mostrar *,
html[data-tema="claro"] #menu-toggle *{ color:#FFFFFF !important; }

/* ── 4 · LOS FILETES DEL CONTENIDO, A LA ALTURA DEL DISEÑO ───────────────────────────────────
   Luis: «en modo claro los bordes están muy marcados en color negro y pierde ese efecto
   luxury». La herramienta ya baja el peso de cada filete que traduce, pero las tarjetas y los
   campos traen los suyos de clases de Tailwind, que no pasan por ahí. */
/* OJO: SÓLO SE AFINA LO QUE YA TENÍA FILETE, NO SE LE PONE A LO QUE NO LO TENÍA.
   La primera versión le daba color de borde a los campos y los selectores de filtro. Varios de
   ellos tienen borde declarado pero en `transparent` —es como se les quitó en su día—, así que
   darles color no los afinó: los hizo APARECER. Luis: «habíamos quitado ese borde». Por eso
   acá quedan fuera los `input`, los `select` y los campos: los que llevan filete son las
   tarjetas y las tablas, y son los únicos que se tocan. */
html[data-tema="claro"] main table, html[data-tema="claro"] main th, html[data-tema="claro"] main td{ border-color:rgba(26,38,51,.08) !important; }
html[data-tema="claro"] main [class*="shadow"]:not([data-pz-foto]){
  box-shadow:0 1px 2px rgba(26,38,51,.04), 0 10px 26px -18px rgba(26,38,51,.18) !important; }

/* el círculo del tema cabe entero dentro de la franja: se le da su renglón */
.pz-accesos{ margin-top:.85rem !important; margin-bottom:.15rem !important; flex:none; }
#main-sidebar > div:first-child{ overflow:visible !important; }

/* El muñequito de la píldora, blanco también en claro: la regla general de «sobre la foto va
   en crema» lo alcanzaba y lo apagaba. Con el id del menú delante queda por encima de ella. */
html[data-tema="claro"][data-tema="claro"] #main-sidebar .user-glass-pill .bg-sky-500\/20 .material-icons-outlined,
html[data-tema="claro"][data-tema="claro"] #main-sidebar .user-glass-pill [class*="rounded-full"]:not(button) span{
  color:#FFFFFF !important; }

/* LAS VARIABLES DE LA APP, EN OSCURO DENTRO DE LA FOTOGRAFÍA. Luis lo vio primero en Golfito y
   después acá: «en vivero se da el mismo problema» —en móvil, el nombre del usuario se apaga y
   el filete de la píldora cambia, justo encima de la foto.
   El marcado `data-pz-foto` impide que entren las REGLAS del tema, pero no sus VARIABLES: el
   tema claro las redefine en el `:root` y de ahí heredan hasta el último nieto, así que una
   regla del tema oscuro que dice `color:var(--v-crema)` seguía mandando con la variable ya
   cambiada a tinta. Se devuelven a sus valores oscuros en la rama de la fotografía.
   En escritorio no se veía porque las excepciones de más arriba tapan esos dos elementos; la
   píldora flotante del móvil los dejaba a la vista. */
html[data-tema="claro"] [data-pz-foto]{
  --v-tinta:#1A2633;
  --v-hondo:#141D27;
  --v-hoja:#222E3A;
  --v-salvia:#7D9B5B;
  --v-crema:#EADFCE;
  --v-crema70:rgba(234,223,206,.70);
  --v-filete:rgba(234,223,206,.16);
  --v-filete-s:rgba(234,223,206,.09);
  --v-sombra:0 30px 70px -18px rgba(26,38,51,.62); }

/* EL BOTÓN DEL TEMA NO SE RAYA CON LA UNIÓN. Luis: «si es muy, muy pequeño, se ve cómo el
   botón de cambiar se raya con la unión, cuando no debería».
   Medido en móvil: la banda de fotografía del riel corta a 176px y el botón iba de 145 a 178,
   o sea la línea donde la foto se vuelve teal le pasaba por la base. Dos píxeles, pero en un
   círculo se ven como un filo.
   En el teléfono la cabecera del riel aprieta más que en escritorio —el mismo contenido en un
   panel de 288px—, así que el botón se le sale por abajo. Se le recorta el aire de arriba sólo
   ahí: queda dentro de la fotografía con seis píxeles de sobra, y en escritorio no se mueve
   nada, que es donde ya estaba aprobado. */
@media (max-width:767px){
  .pz-accesos{ margin-top:.35rem !important; }
  /* Y el botón baja de 34 a 28px, que deja ocho píxeles de aire en vez de dos. Se achica él,
     que es pieza propia del tema, y NO el `padding-top` de la cabecera: esos 16,8px son la
     medida de CIMA que Luis pidió milimétrica entre las tres apps, y moverla en el teléfono
     sería desalinear justo lo que se acaba de alinear. */
  .pz-accesos .pz-tema-btn{ width:28px !important; height:28px !important; }
  .pz-accesos .pz-tema-btn .material-icons-outlined,
  .pz-accesos .pz-tema-btn svg,
  .pz-accesos .pz-tema-btn i{ font-size:15px !important; width:15px !important; height:15px !important; }
}

/* ── DOS LETRAS QUE NO SE LEÍAN (medido el 2026-09-27) ────────────────────────────────────────
   · El gris 300 de Tailwind («(10%)» junto a cada porcentaje) salía en la arena de la rampa
     clara, #DCD5C8 sobre el papel: 1,3:1. Va en tinta al 60 %, el gris de la casa en claro.
   · La pestaña activa («Por vendedor»): el fondo es el deep en los dos temas, pero el generador
     tradujo su letra blanca a tinta: 1,8:1. Vuelve a la blanca del oscuro. */
html[data-tema="claro"] .text-slate-300:not([data-pz-foto]){ color:rgba(26,38,51,.60) !important; }
html[data-tema="claro"] .fin-tab.active:not([data-pz-foto]){ color:#FFFFFF !important; }

/* ── LA FRANJA DEL TÍTULO DE LAS VENTANAS, EN TINTA (2026-09-30) ─────────────────────────────
   La franja no tiene relleno (vivero-lujo.css la deja transparente): se ve el papel de la
   ventana. Su letra seguía blanca —el título, el subtítulo y el botón de cerrar— y en claro
   desaparecía en las seis ventanas. Va en tinta, como en RAÍCES y CAMPO. El botón de Excel
   trae su propia letra y no se toca. */
html[data-tema="claro"][data-tema="claro"] :is(.modal-container .bg-oro-insignia, #confirmation-content > div:first-child.bg-oro-insignia) :is(h3, h3 .material-icons-outlined, button:not(.fin-btn-excel), button:not(.fin-btn-excel) .material-icons-outlined){ color:#1A2633 !important; }
html[data-tema="claro"][data-tema="claro"] :is(.modal-container .bg-oro-insignia, #confirmation-content > div:first-child.bg-oro-insignia) p{ color:rgba(26,38,51,.70) !important; }

/* ── EL RESUMEN GENERAL Y EL DETALLE, COMO TABLERO (2026-09-30) ──────────────────────────────
   Las piezas nuevas leen sus variables (vivero-lujo.css, sección 21); en claro sólo cambian
   ellas: la cifra fuerte en tinta, los filetes y las pistas en tinta suave, la hoja blanca, el
   pagado en teal y los rellenos de alerta más livianos sobre el papel. */
html[data-tema="claro"] :is(#view-resumen, #view-bk-detalle, #view-ventas, #view-ventas-proveedor, #view-cotizaciones, #view-comisiones-nuba, #view-comisiones-virtuoso, #view-actualizacion-proveedores):not([data-pz-foto]){
  --vr-f:#1A2633; --vr-tx55:rgba(26,38,51,.62); --vr-filete:rgba(26,38,51,.22); --vr-filete-s:rgba(26,38,51,.10);
  --vr-pista:rgba(26,38,51,.08); --vr-hoja:#FFFFFF; --vr-hoja-borde:rgba(26,38,51,.10); --vr-sale:#006D82; --vr-fact:rgba(26,38,51,.45);
  --vr-rojo-f:rgba(179,38,30,.16); --vr-ocre-f:rgba(138,106,47,.20); --vr-entra-f:rgba(93,116,68,.16); --vr-ev:#EAE6DE; }
html[data-tema="claro"] select.vr-pz option:not([data-pz-foto]){ background:#FFFFFF; color:#1A2633; }