/* ═══════════════════════════════════════════════════════════════════════════
   SUELO · TEMA CLARO — LOS AJUSTES A MANO (2026-09-29)
   ───────────────────────────────────────────────────────────────────────────
   `suelo-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 CEIBA y CAMPO, que Luis revisó pieza por pieza: el riel
   es el mismo (prisma-riel.js), así que sus reglas son las mismas. Lo propio de SUELO va al final.
   Todo medido con el auditor de contraste, que compone cada texto sobre su fondo real.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · EL MENÚ, EN EL SUELO TEAL #046477 ───────────────────────────────────────────────────
   Arriba sigue transparente porque ahí pasa la fotografía; `--alto-cab` con reserva, o el
   degradado entero se descarta. */
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, los enlaces en blanco al 82 % (5,2:1: la crema al 70 % del oscuro daba 3,3) y los
   rótulos de grupo en blanco al 76 % (4,6:1) */
html:not(#_):not(#_)[data-tema="claro"] #main-sidebar .sidebar-link,
html:not(#_):not(#_)[data-tema="claro"] #main-sidebar .sidebar-link .material-icons-outlined{ color:rgba(255,255,255,.82) !important; }
html:not(#_):not(#_)[data-tema="claro"] #main-sidebar .sue-grupo{ color:rgba(255,255,255,.76) !important; }
html:not(#_):not(#_)[data-tema="claro"] #main-sidebar .sue-grupo::after{ background:linear-gradient(90deg, rgba(234,223,206,.22), transparent) !important; }
html:not(#_):not(#_)[data-tema="claro"] #main-sidebar .sidebar-link:hover{ background-color:rgba(234,223,206,.10) !important; }
html:not(#_):not(#_)[data-tema="claro"] #main-sidebar .sidebar-link:hover,
html:not(#_):not(#_)[data-tema="claro"] #main-sidebar .sidebar-link:hover *{ color:#FFFFFF !important; }
/* el activo, con el mismo degradado del oscuro corrido a la escala clara */
html:not(#_):not(#_)[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:not(#_):not(#_)[data-tema="claro"] #main-sidebar .sidebar-link.active,
html:not(#_):not(#_)[data-tema="claro"] #main-sidebar .sidebar-link.active *{ color:#FFFFFF !important; }
/* el pie, como en el teal (el mismo de CEIBA y CAMPO): transparente con su filete; el traductor de
   vidrio con el inactivo en blanco, y la firma en blanco tenue */
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:not(#_):not(#_)[data-tema="claro"] #main-sidebar #ui-lang-switcher{ background:rgba(234,223,206,.08) !important; border-color:rgba(234,223,206,.18) !important; color:#FFFFFF !important; }
html[data-tema="claro"][data-tema="claro"] #main-sidebar #ui-lang-switcher .lang-btn:not(.active){ color:rgba(255,255,255,.86) !important; }
html[data-tema="claro"][data-tema="claro"] #main-sidebar > div:last-of-type .text-center{ color:#FFFFFF !important; }
html[data-tema="claro"][data-tema="claro"] #main-sidebar > div:last-of-type .text-center > p:first-child{ color:rgba(255,255,255,.4) !important; }
html[data-tema="claro"][data-tema="claro"] #main-sidebar > div:last-of-type .text-center > p + p{ color:rgba(255,255,255,.3) !important; }
/* el botón que abre el menú flota sobre el papel: pertenece al menú, va en su teal */
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; }
/* el círculo del tema cabe entero dentro de la franja */
.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,
  .pz-accesos .pz-tema-btn svg,
  .pz-accesos .pz-tema-btn i{ font-size:15px !important; width:15px !important; height:15px !important; }
}

/* ── 2 · SOBRE LA FOTOGRAFÍA NO CAMBIA NADA ──────────────────────────────────────────────────
   Las reglas del tema no entran por `data-pz-foto`, pero sus VARIABLES sí heredan: se devuelven a
   las del oscuro dentro de la rama de la foto (el buscador de la Matriz salía en papel). */
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); }
/* y la letra heredada, la del oscuro: va en el contenedor, nunca en sus hijos */
html[data-tema="claro"] :where(.sue-cab, #riel-banda, #main-sidebar > div:first-child){ color:#EADFCE; }

/* ── 3 · LA LETRA SOBRE LOS RELLENOS DE ACCIÓN, BLANCA EN LOS TRES TEMAS ─────────────────────
   Los rellenos deep son los mismos en claro; el generador había traducido su letra blanca a tinta
   (1,8:1). Vuelve al blanco: los botones de acción, la confirmación, el disco de iniciales, el
   ícono del modal y la palomita de las casillas marcadas. */
html:not(#_):not(#_)[data-tema="claro"] :is(main, .modal-container) :is(.bg-red-700, .bg-rose-600, .bg-amber-500):not(.peer-checked\:bg-rose-600),
html:not(#_):not(#_)[data-tema="claro"] :is(main, .modal-container) :is(.bg-red-700, .bg-rose-600, .bg-amber-500):not(.peer-checked\:bg-rose-600) *,
html:not(#_):not(#_)[data-tema="claro"] :is(#btn-confirm-ok, #btn-confirm-ok *, .sue-inicial, .sue-modal-icono){ color:#FFFFFF !important; }
html[data-tema="claro"].suelo-lujo :is(input.sue-casilla, #user-modal input[type=checkbox]):checked::before{ border-color:#FFFFFF !important; }

/* ── 4 · LOS FILETES Y LAS HOJAS DEL CONTENIDO ───────────────────────────────────────────────
   Las líneas de las tablas, finas; y la única sombra, la del papel. */
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"] .text-slate-300:not([data-pz-foto]), html[data-tema="claro"] .text-gray-300:not([data-pz-foto]){ color:rgba(26,38,51,.60) !important; }
html:not(#_):not(#_)[data-tema="claro"] :is(main, .modal-container) thead th{ color:rgba(26,38,51,.68) !important; border-bottom-color:rgba(26,38,51,.12) !important; }

/* ── 5 · LA ESTRELLA DE LA CARGA ─────────────────────────────────────────────────────────────
   La de la marca es crema y sobre el papel no se ve: va en tinta, con un halo claro. */
html[data-tema="claro"][data-tema="claro"] #loader .sue-carga{ filter:brightness(.22) drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 12px rgba(255,255,255,.75)) !important; }

/* ── 6 · LA PESTAÑA ELEGIDA, DEEP CON LETRA BLANCA ──────────────────────────────────────────
   Igual en los tres temas. En claro la tapaban dos reglas generadas: el velo de `bg-white/5`
   (que lleva un id en su selector y pesa más) y la letra traducida a tinta. */
html:not(#_):not(#_):not(#_)[data-tema="claro"] :is(.mcp-tab.active, .mcp-con.active, .toursys-tab-btn.active, .user-tab.text-white):not([data-pz-foto]){
  background:#005565 !important; color:#FFFFFF !important; }
html:not(#_):not(#_):not(#_)[data-tema="claro"] :is(.mcp-tab.active, .mcp-con.active, .toursys-tab-btn.active, .user-tab.text-white):not([data-pz-foto]) *{ color:#FFFFFF !important; }