/* ═══════════════════════════════════════════════════════
   02-temas.css  —  Modo noche / modo dia.
   Orden: las hojas se cargan 01→06 y el orden IMPORTA;
   cada una afina la anterior. No las reordenes.
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MODO NOCHE / MODO DÍA — dos materiales, un mismo taller

   El sitio ya pinta con fichas (--noche, --carbon, --hueso…), así
   que el día solo redefine esas fichas en :root[data-tema="dia"] y
   corrige a mano los colores que estaban clavados. Bloque aditivo:
   el modo noche original queda intacto.

   NOCHE  → grafito, cobre encendido, grano y luz rasante.
   DÍA    → papel blanco, grises de yeso y cobre quemado. Regla de
            oro del día: la foto NO se lava. El velo claro se
            comprime abajo, donde va el texto, y suelta la imagen
            a media altura; la profundidad la dan sombras finas,
            no bordes gruesos.
   ═══════════════════════════════════════════════════════════════ */

/* ── capa de ambiente: luz de sala, distinta en cada modo ──── */
:root{
  --ambiente:
    radial-gradient(120% 75% at 50% -10%,rgba(201,145,100,.11),transparent 60%),
    radial-gradient(85% 55% at 100% 102%,rgba(201,145,100,.055),transparent 66%),
    radial-gradient(70% 50% at 0% 40%,rgba(237,230,221,.030),transparent 70%),
    repeating-linear-gradient(90deg,rgba(237,230,221,.016) 0 1px,transparent 1px 132px),
    repeating-linear-gradient(0deg,rgba(237,230,221,.012) 0 1px,transparent 1px 132px);
  --mezcla-grano:overlay;
  --tx-luz:rgba(237,230,221,.9);
  --cristal:rgba(19,18,17,.88);
  --cristal-firme:rgba(19,18,17,.95);
  --cobre-toque:#DCAB82;
  --lamina:#0E0D0C;
}

:root[data-tema="dia"]{
  color-scheme:light;

  /* papel, yeso y grafito: blancos y grises neutros, sin beige */
  --noche:#F0F0EE; --carbon:#FFFFFF; --carbon-alto:#EBEBE8;
  --filete:#B4B3AF; --filete-db:#E3E2DE;
  --cobre:#96602F; --cobre-luz:#8A5527; --cobre-hondo:#EBD9C4;
  --hueso:#171614; --hueso-med:#63625E; --alarma:#A8391F; --exito:#2C7A4B;

  --luz-alta:inset 0 1px 0 #FFFFFF;
  --sombra:0 12px 28px -20px rgba(30,29,27,.42);
  --sombra-alta:0 26px 52px -30px rgba(30,29,27,.40);

  --mezcla-grano:overlay;
  --tx-luz:rgba(255,255,255,.95);
  --cristal:rgba(252,252,251,.84);
  --cristal-firme:rgba(252,252,251,.94);
  --cobre-toque:#6E421D;
  --lamina:#FFFFFF;

  /* luz cenital limpia + retícula de plano + hilo de cobre lejano */
  --ambiente:
    radial-gradient(110% 62% at 50% -14%,rgba(255,255,255,.92),transparent 56%),
    radial-gradient(78% 52% at 2% 6%,rgba(150,96,47,.045),transparent 60%),
    radial-gradient(92% 62% at 100% 104%,rgba(60,60,58,.055),transparent 62%),
    repeating-linear-gradient(90deg,rgba(30,29,27,.018) 0 1px,transparent 1px 132px),
    repeating-linear-gradient(0deg,rgba(30,29,27,.014) 0 1px,transparent 1px 132px),
    repeating-linear-gradient(45deg,rgba(30,29,27,.011) 0 1px,transparent 1px 6px);
}

/* el grano incrustado se mezcla distinto según el modo */
body{ background-blend-mode:var(--mezcla-grano); }
:root[data-tema="dia"] body{ background-size:112px 112px; }

/* sala: luz de fondo y retícula de plano, fija y sin peticiones */
body::before{ content:""; position:fixed; inset:0; z-index:-1;
  pointer-events:none; background-image:var(--ambiente); }

/* ── botón de modo ──────────────────────────────────────────── */
.tema{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex:none; padding:0; overflow:hidden;
  background:transparent; border:1px solid var(--filete); border-radius:var(--radio);
  color:var(--hueso-med); cursor:pointer; box-shadow:var(--luz-alta);
  transition:color .18s var(--curva),border-color .18s var(--curva),
             background .18s var(--curva),transform .18s var(--curva); }
.tema:hover{ color:var(--cobre-luz); border-color:var(--cobre-luz);
  background:var(--carbon-alto); transform:translateY(-1px); }
.tema:active{ transform:translateY(0); }
.tema::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background:linear-gradient(145deg,var(--tx-luz) -60%,transparent 48%); }
.tema svg{ position:absolute; z-index:1; width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .42s var(--curva),opacity .26s var(--curva); }
.tema .sol { opacity:0; transform:rotate(-90deg) scale(.55); }
.tema .luna{ opacity:1; transform:none; }
[data-tema="dia"] .tema .sol { opacity:1; transform:none; }
[data-tema="dia"] .tema .luna{ opacity:0; transform:rotate(90deg) scale(.55); }
[data-tema="dia"] .tema{ background:var(--carbon); box-shadow:var(--luz-alta),0 1px 2px rgba(30,29,27,.06); }
.panel-arriba{ justify-content:space-between; align-items:center; }

/* el cambio se funde, no parpadea */
html.cambiando *,html.cambiando *::before,html.cambiando *::after{
  transition:background-color .34s var(--curva),border-color .34s var(--curva),
             color .34s var(--curva),box-shadow .34s var(--curva),
             stroke .34s var(--curva),fill .34s var(--curva) !important; }

/* ── filete de cobre bajo el encabezado (en los dos modos) ─── */
.techo::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  pointer-events:none; opacity:.55;
  background:linear-gradient(90deg,transparent,var(--cobre) 18%,var(--cobre-luz) 50%,var(--cobre) 82%,transparent); }

/* ═══ DÍA — cristales, papel y sombras ═══════════════════════ */
[data-tema="dia"] .techo{ background:var(--cristal); border-bottom-color:var(--filete-db); }
[data-tema="dia"] .techo.encogido{ background:var(--cristal-firme);
  box-shadow:0 16px 30px -30px rgba(30,29,27,.9); }
[data-tema="dia"] .techo::after{ opacity:.42; }
[data-tema="dia"] .barra-movil{ background:var(--cristal-firme);
  box-shadow:0 -14px 30px -28px rgba(30,29,27,.8); }
[data-tema="dia"] .boton:hover{ background:var(--cobre-toque); border-color:var(--cobre-toque); }
[data-tema="dia"] .boton--hueco{ background:var(--carbon); }
[data-tema="dia"] .boton--hueco:hover{ background:var(--carbon-alto); border-color:var(--hueso); }
[data-tema="dia"] .escenario{ background:var(--lamina); border-color:var(--filete-db); }
[data-tema="dia"] .panel{ background:var(--noche); }

/* velos de foto: cortos y pegados abajo. Arriba la foto respira. */
[data-tema="dia"] .fondo-portada::after{
  background:
    radial-gradient(ellipse at 50% 32%,rgba(255,255,255,0),rgba(255,255,255,.30) 58%,rgba(255,255,255,.72)),
    linear-gradient(to top,rgba(255,255,255,.92) 2%,rgba(255,255,255,.46) 26%,rgba(255,255,255,0) 62%),
    linear-gradient(150deg,rgba(150,96,47,.10),transparent 54%); }
[data-tema="dia"] .fondo-portada img{ filter:contrast(1.03) saturate(.96) brightness(1.06); }
[data-tema="dia"] .corte::after{
  background:linear-gradient(to top,rgba(255,255,255,.96) 4%,rgba(255,255,255,.80) 30%,
             rgba(255,255,255,.18) 62%,rgba(255,255,255,0) 84%); }
/* la foto se queda con su color: nada de gris lavado en día */
[data-tema="dia"] .corte::before{
  filter:saturate(1.02) contrast(1.03) brightness(1.01); }
[data-tema="dia"] .corte:hover::before,[data-tema="dia"] .corte:focus-within::before{
  filter:saturate(1.08) contrast(1.05) brightness(1.03); }
[data-tema="dia"] .corte{ background:#E7E6E3;
  border-color:var(--filete-db); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); }
[data-tema="dia"] .corte:hover{ border-color:var(--cobre); }
[data-tema="dia"] .corte b{ text-shadow:0 1px 0 rgba(255,255,255,.85); }
[data-tema="dia"] .trama{ opacity:.28;
  background-image:linear-gradient(rgba(30,29,27,.20) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(30,29,27,.20) 1px,transparent 1px); }

/* volumen: en día la jerarquía la dan sombras, no bordes duros */
[data-tema="dia"] .lienzo{ background:#EDEDEA; border-color:var(--filete-db);
  box-shadow:0 1px 2px rgba(30,29,27,.05),0 18px 40px -30px rgba(30,29,27,.55); }
[data-tema="dia"] .obra:hover .lienzo,[data-tema="dia"] .obra:focus-within .lienzo{
  border-color:var(--filete);
  box-shadow:0 2px 4px rgba(30,29,27,.06),0 26px 50px -32px rgba(30,29,27,.6); }
[data-tema="dia"] .tipo-op span{ background:var(--carbon); box-shadow:0 1px 2px rgba(30,29,27,.05); }
[data-tema="dia"] .tipo-op input:checked + span{ background:#FBF4EC; border-color:var(--cobre-luz); }
[data-tema="dia"] .campo input,[data-tema="dia"] .campo select,[data-tema="dia"] .campo textarea{
  background:var(--carbon); border-color:var(--filete);
  box-shadow:inset 0 1px 2px rgba(30,29,27,.045); }
[data-tema="dia"] .campo input:hover,[data-tema="dia"] .campo select:hover,
[data-tema="dia"] .campo textarea:hover{ border-color:var(--hueso-med); }
[data-tema="dia"] .campo input::placeholder,
[data-tema="dia"] .campo textarea::placeholder{ color:#96958F; }
[data-tema="dia"] .modulo:hover{ background:var(--carbon); }
[data-tema="dia"] .punto{ background:var(--carbon); }
[data-tema="dia"] dialog.visor{ background:var(--carbon); }
[data-tema="dia"] dialog.visor::backdrop{ background:rgba(36,35,33,.5); }
[data-tema="dia"] .saltar{ color:#FFFFFF; }

/* dibujo técnico: la sombra deja de ser negra y pasa a gris de lápiz */
[data-tema="dia"] .sombra-dib{ stroke:#A6A49E; opacity:.45; }
[data-tema="dia"] .pieza img{ filter:drop-shadow(0 18px 32px rgba(30,29,27,.22)); }
[data-tema="dia"] .foco::after{
  background:conic-gradient(from 0deg,transparent 0 58%,
             rgba(150,96,47,.5) 76%,rgba(150,96,47,0) 90%); }
[data-tema="dia"] .foco::before{ opacity:.45; }
[data-tema="dia"] .firma:hover img,[data-tema="dia"] .firma:focus-visible img{
  filter:drop-shadow(0 4px 10px rgba(138,85,39,.3)); }

/* ═══ TEXTURAS DE DÍA — mismas tramas, tinta invertida ═══════
   En noche la trama la dibuja la luz (hueso) sobre el grafito;
   en día la dibuja la sombra (grafito) sobre el papel. */
[data-tema="dia"] .vt-veta::before{ opacity:.5; background-image:
  repeating-linear-gradient(91deg,rgba(255,255,255,.85) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(91deg,rgba(30,29,27,.055) 0 1px,transparent 1px 7px),
  repeating-linear-gradient(91deg,rgba(150,96,47,.06) 0 2px,transparent 2px 23px); }
[data-tema="dia"] .vt-lino::before{ opacity:.55; background-image:
  repeating-linear-gradient(45deg,rgba(255,255,255,.9) 0 1px,transparent 1px 4px),
  repeating-linear-gradient(-45deg,rgba(30,29,27,.045) 0 1px,transparent 1px 4px); }
[data-tema="dia"] .vt-cepillo::before{ opacity:.55; background-image:
  repeating-linear-gradient(0deg,rgba(30,29,27,.035) 0 1px,transparent 1px 2px),
  linear-gradient(100deg,transparent 18%,rgba(255,255,255,.85) 46%,transparent 64%); }
[data-tema="dia"] .vt-poro::before{ opacity:.42; background-size:5px 5px; background-image:
  radial-gradient(circle at 50% 50%,rgba(30,29,27,.10) .5px,transparent .7px); }

/* ── detalles finos que suman en los dos modos ─────────────── */
/* cada sección con filete recibe una luz cenital muy corta */
.seccion.linea-sec{ position:relative; isolation:isolate; }
.seccion.linea-sec::before{ content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none; opacity:.5;
  background:linear-gradient(180deg,var(--tx-luz) -190%,transparent 32%); }
[data-tema="dia"] .seccion.linea-sec::before{ opacity:.75;
  background:linear-gradient(180deg,rgba(255,255,255,.9),transparent 26%); }
[data-tema="dia"] .linea-sec{ border-top-color:var(--filete-db); }
/* remate: hilo de cobre apoyado en el filete superior */
.remate{ position:relative; }
.remate::after{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  pointer-events:none; opacity:.4;
  background:linear-gradient(90deg,transparent,var(--cobre) 30%,var(--cobre) 70%,transparent); }
[data-tema="dia"] .remate{ background:linear-gradient(180deg,rgba(255,255,255,.85),transparent 60%); }