/* ═══════════════════════════════════════════════════════════════════════════
   COTIZACIONES GRUPALES · TEMA CLARO — LOS AJUSTES A MANO (2026-09-29)
   ───────────────────────────────────────────────────────────────────────────
   `grupales-tema-claro.css` lo escribe la herramienta y se pierde en cada corrida; esto se
   edita a mano y se carga después. Nace de los de CAMPO (campo-tema-claro-ajustes.css), que
   Luis revisó pieza por pieza: el riel, la píldora, el botón del menú y la foto son los mismos.
   Lo que va sobre la fotografía no está acá: el generador ya lo deja fuera (`data-pz-foto`),
   y sobre la foto el claro es idéntico al oscuro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · EL MENÚ, EN TEAL (el suelo del tema teal: #046477) ────────────────────────────────── */
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; }
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{ color:rgba(234,223,206,.70) !important; }
/* los rótulos de grupo en blanco al 76 %: sobre el teal la crema al 62 % queda en 2,9:1 */
html[data-tema="claro"][data-tema="claro"] #main-sidebar .sidebar-section-label{ color:rgba(255,255,255,.76) !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, en la escala del teal */
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 riel, como en el teal, que es el mismo suelo */
html[data-tema="claro"][data-tema="claro"] #main-sidebar > div:last-of-type{ background:transparent !important; border-top-color:rgba(234,223,206,.10) !important; }
html[data-tema="claro"][data-tema="claro"] #main-sidebar .gru-pie p{ color:rgba(255,255,255,.55) !important; }
html[data-tema="claro"][data-tema="claro"] #main-sidebar .gru-pie p + p{ color:rgba(255,255,255,.42) !important; }

/* ── 2 · EL BOTÓN QUE ABRE EL MENÚ cuando está oculto: flota sobre el papel, va en el teal del menú ── */
html[data-tema="claro"] #riel-mostrar{
  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 *{ color:#FFFFFF !important; }

/* ── 3 · EL CÍRCULO DEL TEMA, EN SU RENGLÓN (como en CAMPO) ─────────────────────────────── */
.pz-accesos{ margin-top:.85rem !important; margin-bottom:.15rem !important; flex:none; }
#main-sidebar > div:first-child{ overflow:visible !important; }
@media (max-width:767px){
  .pz-accesos{ margin-top:.35rem !important; }
  .pz-accesos .pz-tema-btn{ width:28px !important; height:28px !important; }
  .pz-accesos .pz-tema-btn .material-icons-outlined{ font-size:15px !important; width:15px !important; height:15px !important; }
}
/* el disco de la persona, deep y con su muñequito blanco en los tres temas */
html[data-tema="claro"][data-tema="claro"] #user-pill .rounded-full.w-6.h-6:not(button){ background-color:#005565 !important; }
html[data-tema="claro"][data-tema="claro"] #user-pill .rounded-full.w-6.h-6:not(button) span{ color:#FFFFFF !important; }

/* ── 4 · LAS VARIABLES, EN OSCURO DENTRO DE LA FOTOGRAFÍA (reference-tema-sobre-foto, capa 3) ── */
html[data-tema="claro"] [data-pz-foto]{
  --c-tinta:#1A2633; --c-hondo:#141D27; --c-hoja:#222E3A; --c-campo:#2A3541; --c-salvia:#7D9B5B; --c-crema:#EADFCE;
  --c-crema70:rgba(234,223,206,.70); --c-filete:rgba(234,223,206,.16); --c-filete-s:rgba(234,223,206,.09);
  --c-sombra:0 30px 70px -18px rgba(26,38,51,.62); }
/* la letra heredada de la cabecera, la del oscuro: sólo en el contenedor (capa 4) */
html[data-tema="claro"] :where(.gru-cab){ color:#FFFFFF; }
html[data-tema="claro"] :where(#riel-banda){ color:#EADFCE; }

/* ── 5 · LA LETRA SOBRE LOS RELLENOS DE ACCIÓN, BLANCA EN LOS TRES TEMAS ─────────────────────
   Los rellenos deep, teal o rojo son los mismos en claro, y sobre ellos la letra es blanca; el
   generador la tradujo a tinta. */
html[data-tema="claro"][data-tema="claro"] :is(.bg-tnteal, .grp-btn-primary, .grp-tab.active, .grp-pill-convertida, .param-toggle-btn.active,
  .toolbar-btn-active, #btn-confirm-ok, #pv-panel-reopen-btn):not([data-pz-foto]),
html[data-tema="claro"][data-tema="claro"] :is(.bg-tnteal, .grp-btn-primary, .grp-tab.active, .grp-pill-convertida, .param-toggle-btn.active,
  .toolbar-btn-active, #btn-confirm-ok, #pv-panel-reopen-btn):not([data-pz-foto]) *{ color:#FFFFFF !important; }

/* ── 6 · LAS HOJAS DEL CONTENIDO, BLANCAS ─────────────────────────────────────────────────────
   En oscuro son un velo crema casi invisible sobre la tinta; traducido, ese velo quedaba como un
   gris arena sobre el papel. En claro la hoja es blanca, con su filete fino: el papel del libro. */
html:not(#_)[data-tema="claro"][data-tema="claro"].grupales-lujo :is(.grp-card, .grp-stat, .grp-dia-card):not([data-pz-foto]){
  background-color:#FFFFFF !important; border-color:rgba(26,38,51,.08) !important; }
/* los puntos del tablero: rellenos, los mismos del oscuro */
html:not(#_)[data-tema="claro"][data-tema="claro"].grupales-lujo .grp-stat:has(#stat-enviada) .grp-stat-label::before{ background:#006D82 !important; }
html:not(#_)[data-tema="claro"][data-tema="claro"].grupales-lujo .grp-stat:has(#stat-aprobada) .grp-stat-label::before{ background:#7D9B5B !important; }
html:not(#_)[data-tema="claro"][data-tema="claro"].grupales-lujo .grp-card.bg-slate-50{ background-color:#FBF9F5 !important; }
html:not(#_)[data-tema="claro"][data-tema="claro"].grupales-lujo .grp-table-wrap{ background-color:#FFFFFF !important; border-color:rgba(26,38,51,.08) !important; }
html:not(#_)[data-tema="claro"][data-tema="claro"].grupales-lujo .grp-table-wrap .grp-table th{ background-color:#FFFFFF !important; }
html:not(#_)[data-tema="claro"][data-tema="claro"].grupales-lujo .grp-opcion-tab.active{ background-color:#FFFFFF !important; border-color:rgba(26,38,51,.08) !important; border-bottom-color:transparent !important; }
/* la cabecera de las tablas: versalitas en tinta, con el peso del secundario */
html:not(#_):not(#_)[data-tema="claro"] :is(main, .modal-container, .fixed.inset-0) .grp-table th{ color:rgba(26,38,51,.62) !important; border-bottom-color:rgba(26,38,51,.12) !important; }
/* el teal como letra: sobre el papel sí se lee (5,4:1), y es el acento de la app de antes */
html[data-tema="claro"][data-tema="claro"] :is(.text-tnteal, .text-tntealdeep):not([data-pz-foto]){ color:#006D82 !important; }
html[data-tema="claro"][data-tema="claro"] .text-tnnavy:not([data-pz-foto]){ color:#1A2633 !important; }
/* el gris 300 salía en la arena de la rampa clara (1,3:1): tinta al 60 %, como en CAMPO */
html[data-tema="claro"] :is(.text-slate-300, .text-gray-300):not([data-pz-foto]){ color:rgba(26,38,51,.60) !important; }

/* ── 7 · LA CARGA: el disco de la estrella es el mismo en los tres temas (la estrella es clara) ── */
html[data-tema="claro"][data-tema="claro"] #loader .gru-carga,
html[data-tema="claro"][data-tema="claro"] #loader-msg{ background:rgba(13,23,32,.78) !important; border-color:rgba(234,223,206,.34) !important; color:#EADFCE !important; }

/* ── 8 · LA VISTA DEL CLIENTE: la hoja sigue siendo papel; el escritorio, arena ── */
html[data-tema="claro"][data-tema="claro"] #print-view{ background:#FFFFFF !important; box-shadow:0 0 0 1px rgba(26,38,51,.10), 0 10px 26px -18px rgba(26,38,51,.18) !important; }
/* la barra de arriba: los botones traían `text-white` (que no pasa por la rampa) y sobre el papel
   no se veían; van en tinta con su filete, y el de «Descargar PDF» sigue deep con letra blanca */
html:not(#_)[data-tema="claro"] #print-view-overlay > div:first-child button:not(#pv-pdf-btn),
html:not(#_)[data-tema="claro"] #print-view-overlay > div:first-child button:not(#pv-pdf-btn) *{ color:#1A2633 !important; }
html:not(#_)[data-tema="claro"] #print-view-overlay > div:first-child button:not(#pv-pdf-btn){ background:transparent !important; border-color:rgba(26,38,51,.16) !important; }
html:not(#_)[data-tema="claro"] #print-view-overlay > div:first-child button:not(#pv-pdf-btn):hover{ border-color:rgba(26,38,51,.45) !important; }
html:not(#_)[data-tema="claro"] #pv-pdf-btn, html:not(#_)[data-tema="claro"] #pv-pdf-btn *{ color:#FFFFFF !important; }
html:not(#_)[data-tema="claro"] #pv-filtros-panel > div:first-child button,
html:not(#_)[data-tema="claro"] #pv-filtros-panel > div:first-child button *{ color:#1A2633 !important; }