/* ═══════════════════════════════════════════════════════════════════════════
   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. */
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),
    #046477 var(--alto-cab)) !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; }
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(234,223,206,.62) !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-child{
  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-child *{ color:rgba(234,223,206,.72) !important; }
html[data-tema="claro"] #main-sidebar .lang-btn{ background-color:transparent !important; }
html[data-tema="claro"] #main-sidebar .lang-btn.active,
html[data-tema="claro"] #main-sidebar .lang-btn.active *{
  background-color:rgba(0,61,74,.85) !important; color:#FFFFFF !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{
  background-color:transparent !important;
  background-image:linear-gradient(135deg, #046477 0%, #04788E 100%) !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í. */
html[data-tema="claro"] main [class*="border"]:not([data-pz-foto]){
  border-color:rgba(26,38,51,.08) !important; }
html[data-tema="claro"] main .fin-kpi,
html[data-tema="claro"] main .input-field,
html[data-tema="claro"] main select,
html[data-tema="claro"] main input,
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 .fin-kpi,
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; }