/* ============================================================
   TEMA CLARO ICC — la misma app en claro, con el mismo naranja.
   Se carga DESPUÉS de tema-icc.css. Solo actúa cuando el <html>
   (o el <body>) lleva data-tema="claro"; en oscuro no pinta nada.

   Encender / apagar:
     ICCTema.set("claro") | ICCTema.set("oscuro") | ICCTema.alternar()
   Se guarda en localStorage y se restaura al cargar. Si el usuario
   nunca ha elegido, sigue la preferencia del sistema.
   ============================================================ */

html[data-tema="claro"], body[data-tema="claro"]{
  --crema:#F7F4F0; --crema-2:#FFFFFF; --blanco:#FFFFFF;
  --tinta:#171310; --suave:#6B5F56; --tenue:#7A6C64;
  --linea:rgba(0,0,0,.07); --linea-2:rgba(0,0,0,.14);
  /* Comprobado sobre `--crema` (#F7F4F0), que es el fondo de las tarjetas,
     y NO sobre blanco: ahí es donde se lee de verdad. #C4501E daba 4,66:1
     sobre blanco y solo 4,24:1 sobre la tarjeta (ICC-216). */
  --terra:#BC4D1D; --ambar:#B1450E; --salvia:#2B7454; --uva:#6B5D53;
  /* ICC-325 · `--salvia` baja de #2D7958 a #2B7454 por lo mismo que el
     ámbar y el rojo en ICC-316: sobre su propio tinte compuesto sobre el
     papel daba 4,34 en ocho chips. Son dos puntos de diferencia y no se
     nota; lo que sí cambia es que ya se leen. Como fondo con texto blanco
     encima también mejora (5,27 -> 5,63), o sea que no hay contrapartida.

     Y `--terra-texto` es el naranja de la marca en su papel de TEXTO: el
     mismo reparto de ICC-183 con `--acento`/`--acento-texto` y el de
     ICC-254 con `--rojo`/`--rojo-fondo`. **El naranja de relleno no se
     toca** —son 84 fondos y bordes del tema claro— y este solo lo usan
     las tres reglas donde el naranja es texto sobre su propio tinte.
     Derivado con `legible_sobre` (ICC-183), no elegido a ojo: 3,92 -> 4,80. */
  --terra-texto:#A5441A;
  --rojo:#B13428;
  /* ICC-316 · el ámbar baja un 4 % y el rojo un 8 %, mezclando con negro para
     conservar el tono (el `legible_sobre` de ICC-183). No es por la página
     —ahí ya daban 4,82 y 4,96— sino por los CHIPS: `.cl-riesgo.medio` y
     `.dn-est.vencida` pintan ese texto sobre su propio tinte, y compuesto sobre
     el papel eso deja 4,40 y 4,10. Es ICC-216 otra vez —el acento se mide
     contra la superficie de verdad y no contra la página—, un escalón más
     abajo. Con esto: 4,69 y 4,67 sobre el chip, 5,14 y 5,65 sobre la página. */
  --grad:linear-gradient(#BC4D1D,#BC4D1D);
  --glow:none; --glow-2:none;
  --sombra:0 1px 2px rgba(23,19,16,.06);
  --sombra-2:0 18px 40px rgba(23,19,16,.14);
  --tinta-boton:#FFFFFF;        /* texto sobre naranja */
  --apagado:#D6CEC6;            /* punto de módulo inactivo */
  color-scheme:light;
}

body[data-tema="claro"], html[data-tema="claro"] body{
  background:var(--crema);color:var(--tinta);
}

/* --- superficies que en oscuro eran casi negras --- */
html[data-tema="claro"] .mod,
html[data-tema="claro"] .panel,
html[data-tema="claro"] .modal,
html[data-tema="claro"] .auth-card,
html[data-tema="claro"] .chat-top,
html[data-tema="claro"] .chat-in,
html[data-tema="claro"] .tokens,
html[data-tema="claro"] .perfil{ background:#FFFFFF }

html[data-tema="claro"] .chat-panel,
html[data-tema="claro"] #auth,
html[data-tema="claro"] .tabs,
html[data-tema="claro"] .price-band{ background:var(--crema) }

html[data-tema="claro"] .campo input,
html[data-tema="claro"] .a-in,
html[data-tema="claro"] textarea.a-in,
html[data-tema="claro"] .c-input,
html[data-tema="claro"] .chat-in input{
  background:#FFFFFF;border-color:var(--linea);color:var(--tinta);
}
html[data-tema="claro"] .campo input:focus,
html[data-tema="claro"] .a-in:focus{ background:#FFFDFB;border-color:var(--terra) }
html[data-tema="claro"] ::placeholder{ color:#B5A79C }

/* --- iconos en tile: claro en vez de casi negro --- */
html[data-tema="claro"] .mod .ic,
html[data-tema="claro"] .modal .ic,
html[data-tema="claro"] .chat-top .ic,
html[data-tema="claro"] .ag-ic{
  background:#FBF7F4!important;border-color:rgba(0,0,0,.06);color:var(--terra)!important;
}
html[data-tema="claro"] .ag-ic.msym{ color:var(--terra) }

/* --- acentos suaves (bloques naranjas translúcidos) --- */
html[data-tema="claro"] .conc,
html[data-tema="claro"] .oferta,
html[data-tema="claro"] #puesta-marcha{
  background:linear-gradient(180deg,rgba(188,77,29,.07),rgba(188,77,29,.015))!important;
  border-color:rgba(188,77,29,.24)!important;
}
html[data-tema="claro"] .tokens{
  background:rgba(188,77,29,.07);border-color:rgba(188,77,29,.28);color:var(--ambar);
}
html[data-tema="claro"] .badge{ background:rgba(0,0,0,.05);color:var(--suave) }
html[data-tema="claro"] .badge.new{ background:rgba(188,77,29,.12);color:var(--ambar) }
html[data-tema="claro"] .badge.inc{ background:rgba(46,125,91,.12);color:var(--salvia) }
html[data-tema="claro"] .badge.lock{ background:rgba(0,0,0,.045);color:var(--tenue) }

/* --- hover: en claro se oscurece, no se aclara --- */
html[data-tema="claro"] #a-body tr:hover td{ background:#FBF7F4 }

/* --- burbujas de chat --- */
html[data-tema="claro"] .msg.bot{ background:#FFFFFF;border-color:var(--linea) }
html[data-tema="claro"] .msg.user{ background:var(--terra);color:#FFFFFF }

/* --- velo del modal: en claro no puede ser casi negro opaco --- */

/* --- pie y separadores --- */
html[data-tema="claro"] .pie-links a,
html[data-tema="claro"] .pie-legal{ color:var(--tenue) }

/* --- el punto de "módulo apagado" necesita otro gris --- */
html[data-tema="claro"] .mod.off{ opacity:.55 }
html[data-tema="claro"] .mod.off:hover{ opacity:.85 }

/* --- interruptor de tema (lo inserta ICCTema.montarBoton) --- */
.icc-tema-btn{
  display:flex;align-items:center;gap:.35rem;height:34px;padding:0 .7rem;
  border-radius:999px;border:1px solid var(--linea);background:var(--blanco);
  color:var(--suave);font-family:var(--fuente);font-size:.78rem;font-weight:600;cursor:pointer;
}
.icc-tema-btn:hover{ border-color:var(--terra);color:var(--terra) }

/* ---------- Los mismos tokens, en claro (ICC-126) ----------
   Ojo con los velos: en oscuro son blancos con alfa (aclaran); en claro
   tienen que ser NEGROS con alfa (oscurecen). Un `rgba(255,255,255,.06)`
   sobre fondo blanco no se ve, y toda la profundidad de la interfaz
   desaparece. */
html[data-tema="claro"], body[data-tema="claro"]{
  --tile:#F2EDE8;
  --hueco:#F4F0EB;
  --texto-3:#3A322C;
  --tenue-2:#B4A79C;
  --terra-hover:#A83F12;
  --sello:rgba(255,255,255,.86);
  --fade:linear-gradient(180deg,rgba(247,244,240,0) 30%,rgba(247,244,240,.92) 100%);

  --terra-02:rgba(188,77,29,.02); --terra-04:rgba(188,77,29,.04);
  --terra-06:rgba(188,77,29,.05); --terra-08:rgba(188,77,29,.07);
  --terra-12:rgba(188,77,29,.10); --terra-14:rgba(188,77,29,.12);
  --terra-20:rgba(188,77,29,.16); --terra-22:rgba(188,77,29,.18);
  --terra-24:rgba(188,77,29,.20); --terra-28:rgba(188,77,29,.24);
  --terra-30:rgba(188,77,29,.26); --terra-45:rgba(188,77,29,.38);
  --terra-50:rgba(188,77,29,.44);

  --salvia-08:rgba(46,125,91,.07); --salvia-14:rgba(46,125,91,.12);
  --salvia-18:rgba(46,125,91,.16); --salvia-30:rgba(46,125,91,.28);

  --rojo-08:rgba(192,57,43,.07); --rojo-20:rgba(192,57,43,.16);
  --rojo-35:rgba(192,57,43,.30); --rojo-claro:#8E2C20;
  /* ICC-254 · el rojo de SUPERFICIE, y es el mismo en los dos temas a
     propósito. `--rojo` cambia porque es para texto rojo sobre el fondo del
     panel; una superficie roja con texto BLANCO encima pide lo contrario —un
     rojo oscuro—, y usar `--rojo` aquí deja el blanco en 3,24 sobre el
     #E4695C del tema oscuro. Medido. */
  --rojo-fondo:#C0392B;
  /* ICC-316 · el mismo reparto para el ámbar. Ver el comentario gemelo en
     `tema-icc.css`: como superficie es el MISMO valor en los dos temas. */
  --ambar-fondo:#E8B563;
  /* ICC-344 · el tinte de `--ambar` en claro, construido del #B1450E de ESTE
     tema. Ver el comentario gemelo en `tema-icc.css`: aquí NO vale el mismo
     valor, porque un tinte de naranja oscuro sobre papel blanco se ve el doble
     de cargado que el del ámbar claro sobre el fondo oscuro. */
  --ambar-08:rgba(177,69,14,.07); --ambar-30:rgba(177,69,14,.26);

  --vel-1:rgba(23,19,16,.015); --vel-2:rgba(23,19,16,.03);
  --vel-3:rgba(23,19,16,.045); --vel-4:rgba(23,19,16,.06);
  --vel-5:rgba(23,19,16,.08);  --vel-6:rgba(23,19,16,.09);
  --vel-7:rgba(23,19,16,.18);

  --texto-2:#5C5148;
  --linea-3:rgba(0,0,0,.12);

  --crema-2-h:#FDF8F4;
  --hueco-h:#EFEAE4;
  --barra:rgba(255,255,255,.94);
  --velo:rgba(23,19,16,.34);
  --velo-2:rgba(23,19,16,.28);
}

/* Los paneles nuevos también son superficie blanca en claro. */
html[data-tema="claro"] .icc-panel{background:#FFFFFF}

/* ---------- Lo que se quedaba oscuro (ICC-130) ----------
   Las tarjetas ya siguen al token, pero quedan piezas cuyo fondo en claro no
   es "el mismo color más claro" sino otra decisión: rejillas, franjas y
   bocetos. Van aquí, no en el tema oscuro. */
html[data-tema="claro"] .ag-card,
html[data-tema="claro"] .kpi,
html[data-tema="claro"] .col-r .panel,
html[data-tema="claro"] .icc-panel,
html[data-tema="claro"] .modal,
html[data-tema="claro"] .ag-panel{ background:#FFFFFF }

html[data-tema="claro"] .lista-caja.rejilla-3{
  background:var(--linea);border-color:var(--linea);
}
html[data-tema="claro"] .fila-mod{ background:#FFFFFF }
html[data-tema="claro"] .fila-mod:hover{ background:var(--hueco-h) }

/* El velo del chat lateral y el del modal oscurecen; en claro no pueden ser
   casi negros opacos o tapan la pantalla entera. */
html[data-tema="claro"] #chat{ background:var(--velo-2) }

/* Franjas y bocetos del panel de administración y de Reels. */
html[data-tema="claro"] .rl-boceto{ background:var(--hueco) }
html[data-tema="claro"] .dns-fila:first-child{ background:var(--vel-2) }

/* Barra del Concierge: en claro es una barra blanca flotando, con sombra
   suave. La sombra de oscuro (negro al 50%) sobre fondo claro es una mancha. */
html[data-tema="claro"] .conc-bar{
  background:var(--barra);box-shadow:0 18px 40px rgba(23,19,16,.12);
}
html[data-tema="claro"] .chat-panel{ box-shadow:-24px 0 60px rgba(23,19,16,.14) }

/* Texto sobre el degradado naranja del Concierge: ahí SIEMPRE es blanco,
   en los dos temas, porque el fondo es naranja en los dos. */
html[data-tema="claro"] .conc,
html[data-tema="claro"] .conc h2,
html[data-tema="claro"] .conc p{ color:inherit }

/* Los `select` y los desplegables nativos: sin esto salen blancos con texto
   blanco en los navegadores que heredan el color del tema oscuro. */
html[data-tema="claro"] select,
html[data-tema="claro"] option{ background:#FFFFFF;color:var(--tinta) }

/* Scroll: en claro, la barra oscura canta. */
html[data-tema="claro"] ::-webkit-scrollbar-thumb{ background:rgba(23,19,16,.18) }
html[data-tema="claro"] ::-webkit-scrollbar-track{ background:transparent }