/* Fondo claro de la portada: el mismo papel cálido y la misma tinta que el tema claro de la
   aplicación (ver «Tema claro» en ../index.html). Se activa con data-tema="claro" en <html>,
   que comparte la elección guardada en localStorage («ivs-tema») con la aplicación. */
html[data-tema="claro"]{
  --bg:#f5f1e7;--fg:#1f1b14;--mute:rgba(31,27,20,.64);--dim:rgba(31,27,20,.46);--line:rgba(31,27,20,.18);
  --gold:#946a06;--bg-rgb:245,241,231;--ov-rgb:40,34,20;
  color-scheme:light
}
html[data-tema="claro"] ::selection{background:var(--gold);color:var(--bg)}
html[data-tema="claro"] .grano{opacity:.6!important;filter:invert(1);mix-blend-mode:multiply}   /* el grano son puntos claros: en el papel se invierten */

/* botones: el texto en papel sobre el oro y sobre la tinta */
html[data-tema="claro"] .btn{color:var(--bg)}
html[data-tema="claro"] .btn:hover{color:var(--bg)}
html[data-tema="claro"] .btn.sec{color:var(--fg)}
html[data-tema="claro"] .btn.sec:hover{color:var(--gold)}

/* la marca en un oro más hondo, que se lea sobre el papel */
html[data-tema="claro"] .marca .v,html[data-tema="claro"] .marca-g .v{background-image:linear-gradient(170deg,#c08d16 8%,#946a06 46%,#6b4c03 92%)}
html[data-tema="claro"] .marca-g .d{background:linear-gradient(170deg,#c08d16,#946a06 50%,#6b4c03)}

/* cabecera y piezas comunes */
html[data-tema="claro"] .cab{background:linear-gradient(var(--bg) 20%,rgba(245,241,231,0))}
html[data-tema="claro"] .cab .sello{box-shadow:0 0 0 1px rgba(31,27,20,.24)}
html[data-tema="claro"] .dib .dl{stroke:rgba(31,27,20,.7)}
html[data-tema="claro"] .dib .dp{fill:rgba(31,27,20,.4)}
html[data-tema="claro"] .h6d i::after{background:var(--gold);box-shadow:0 0 8px 1px rgba(148,106,6,.45)}
html[data-tema="claro"] .cierre .marcaf{color:rgba(31,27,20,.8)}
html[data-tema="claro"] .idx6{background:rgba(245,241,231,.85)}

/* el laboratorio */
html[data-tema="claro"] .tab[aria-selected="true"]{color:var(--bg)}
html[data-tema="claro"] .panel{background:rgba(31,27,20,.02)}
html[data-tema="claro"] .panel input[type=text],html[data-tema="claro"] .panel input[type=date],html[data-tema="claro"] .panel select,html[data-tema="claro"] .panel input[type=number]{color-scheme:light}
html[data-tema="claro"] .panel select option{background:#fbf8f1}
html[data-tema="claro"] .chip[aria-pressed="true"]{color:var(--bg)}
html[data-tema="claro"] .sal{background:rgba(148,106,6,.07);border-color:rgba(148,106,6,.3)}
html[data-tema="claro"] .sal .mal{color:#a23d2c}
html[data-tema="claro"] .drop{border-color:rgba(31,27,20,.3)}
html[data-tema="claro"] .ofr .cel .dib .dl{stroke:rgba(31,27,20,.42)}
html[data-tema="claro"] .ofr .cel .dib .dd{fill:rgba(31,27,20,.55)}
html[data-tema="claro"] .ofr .cel:hover .dib .dd,html[data-tema="claro"] .ofr .cel:focus .dib .dd,html[data-tema="claro"] .ofr .cel:active .dib .dd{fill:var(--gold)}
html[data-tema="claro"] .legal-velo{background:rgba(40,34,20,.45)}

/* interruptor de fondo: sol y luna, como en la aplicación */
/* interruptor de colores: un círculo que abre una burbuja con las paletas */
.tema-seg{position:relative;flex:none;display:inline-flex}
.tema-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:35px;height:35px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--fg);cursor:pointer;transition:border-color .25s}
.tema-btn:hover,.tema-btn[aria-expanded="true"]{border-color:var(--gold-55)}
.tema-btn svg{display:block}
.tema-pop{position:absolute;z-index:80;top:calc(100% + 10px);right:0;display:flex;flex-direction:column;gap:2px;min-width:214px;padding:6px;border:1px solid var(--line);border-radius:22px;background:color-mix(in srgb,var(--fg) 9%,var(--bg));box-shadow:0 18px 44px rgba(0,0,0,.35);transform-origin:top right;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.88);transition:opacity .2s ease,transform .3s cubic-bezier(.4,0,.6,1),visibility 0s linear .3s}
.tema-pop.abre{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .5s cubic-bezier(.2,1.15,.3,1),visibility 0s}
.tema-op{appearance:none;display:flex;align-items:center;gap:11px;width:100%;padding:8px 16px 8px 10px;border:0;border-radius:999px;background:transparent;color:var(--fg);font:400 13.5px/1.2 var(--sans);text-align:left;cursor:pointer;opacity:0;transform:translateY(-6px);transition:background .2s,color .2s,opacity .2s,transform .2s}
.abre .tema-op{opacity:1;transform:none;transition:background .2s,color .2s,opacity .35s ease calc(.07s + var(--i,0)*.045s),transform .45s cubic-bezier(.2,1,.3,1) calc(.07s + var(--i,0)*.045s)}
@media (prefers-reduced-motion:reduce){.tema-pop,.tema-pop.abre,.tema-op,.abre .tema-op{transition:none}}
.tema-op em{font-style:normal}
.tema-op svg{display:block;flex:none}
.tema-op .sw,.tema-btn .sw{display:block;flex:none;width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px rgba(128,128,128,.55)}
.tema-op:hover{background:rgba(128,128,128,.16)}
.tema-op[aria-pressed="true"]{background:var(--fg);color:var(--bg)}

/* Paletas oscuras (mismos colores que en ../index.html): solo cambian las variables de color. */
html[data-tema="arena"]{--bg:#1e252d;--fg:#e6e9eb;--mute:rgba(230,233,235,.62);--dim:rgba(230,233,235,.36);--line:rgba(230,233,235,.15);--gold:#bd995c;--bg-rgb:30,37,45;--ov-rgb:15,18,22}
html[data-tema="salvia"]{--bg:#181d1b;--fg:#e2e0cc;--mute:rgba(226,224,204,.62);--dim:rgba(226,224,204,.36);--line:rgba(226,224,204,.15);--gold:#c8a96e;--bg-rgb:24,29,27;--ov-rgb:12,14,14}
html[data-tema="marino"]{--bg:#1a2030;--fg:#f1efea;--mute:rgba(241,239,234,.62);--dim:rgba(241,239,234,.36);--line:rgba(241,239,234,.15);--gold:#f0b430;--bg-rgb:26,32,48;--ov-rgb:13,16,24}
html[data-tema="negro"]{--bg:#0b0b0c;--fg:#e4e4e6;--mute:rgba(228,228,230,.62);--dim:rgba(228,228,230,.36);--line:rgba(228,228,230,.15);--gold:#b8a986;--bg-rgb:11,11,12;--ov-rgb:6,6,6}