/* =========================================================
   TEMA OSCURO: letras en blanco sobre negro, degradados y contrastes en azul navy
   ========================================================= */
/* =========================================================
   PALETAS (se elige con el selector de colores de arriba a la derecha)
   carmesí (predeterminada): negro, E61E32 y blanco · azul · morado: negro, AC58E9 y blanco · verde: negro, 1FD65F y blanco
   ========================================================= */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#081233;--white:#0F1B45;--g50:#13214F;--g100:#17285C;--g200:#22366F;--g300:#30478A;--g400:#7F92C4;
  --ink:#F5F8FF;--ink-2:#C2CEEE;--ink-3:#93A4D2;
  --p1:#2F6BFF;--p1-rgb:47,107,255;--p1-hi:#5B97FF;--p1-lo:#2559F0;--p2:#9CC2FF;--p2-rgb:110,168,255;--p3:#173A99;--p4:#22D3EE;
  --hero-1:#1C3478;--hero-2:#0F1E52;--hero-3:#091538;--deep:#0B1640;--deeper:#060D26;--sh-rgb:2,8,30;
  --wine:#6EA8FF;--wine-2:var(--p1);--wine-3:var(--p3);--wine-soft:rgba(var(--p2-rgb),.16);
  --word-grad:linear-gradient(180deg,#FFFFFF 0%,#E3EDFF 30%,#9CC2FF 62%,#4C8DFF 100%);
  --line:rgba(170,200,255,.12);--line-2:rgba(170,200,255,.2);
  --m0:8,18,51;--m1:37,89,240,.55;--m2:12,26,70,.95;--m3:110,168,255,.40;--m4:24,52,140,.8;
  --cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3l17 9.5-7.4 1.8L10.4 22z' fill='%23fff' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='21' cy='21' r='3' fill='%232F6BFF' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 4 3, auto;
  /* derivados (iguales para todas las paletas) */
  --btn-grad:linear-gradient(180deg,var(--p1-hi),var(--p1-lo));--btn-sh:rgba(var(--p1-rgb),.5);--glow-soft:rgba(var(--p2-rgb),.10);
  --sh-1:0 1px 2px rgba(var(--sh-rgb),.35),0 6px 16px rgba(var(--sh-rgb),.3);
  --sh-2:0 2px 6px rgba(var(--sh-rgb),.35),0 22px 50px rgba(var(--sh-rgb),.45);
  --sh-3:0 4px 10px rgba(var(--sh-rgb),.4),0 40px 90px rgba(var(--sh-rgb),.55);
}
/* carmesí, morado y verde comparten el fondo negro con grises; cambia solo el color de acento */
[data-palette="crimson"],[data-palette="purple"],[data-palette="green"]{
  --bg:#050505;--white:#121212;--g50:#171717;--g100:#1E1E1E;--g200:#2B2B2B;--g300:#3B3B3B;--g400:#8A8A8A;
  --ink:#FFFFFF;--ink-2:#D6D6D6;--ink-3:#A3A3A3;
  --hero-3:#050505;--deep:#0C0C0C;--deeper:#000000;--sh-rgb:0,0,0;
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.18);
}
[data-palette="crimson"]{
  --p1:#E61E32;--p1-rgb:230,30,50;--p1-hi:#FF3B4E;--p1-lo:#C4142A;--p2:#FF8A95;--p2-rgb:255,90,105;--p3:#8A0E1B;--p4:#FFC2C8;
  --hero-1:#4A0B13;--hero-2:#1A0507;--wine:#FF5A69;
  --word-grad:linear-gradient(180deg,#FFFFFF 0%,#FFE4E7 30%,#FF8A95 62%,#E61E32 100%);
  --m0:5,5,5;--m1:230,30,50,.34;--m2:14,14,14,.95;--m3:255,90,105,.20;--m4:70,8,16,.85;
  --cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3l17 9.5-7.4 1.8L10.4 22z' fill='%23fff' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='21' cy='21' r='3' fill='%23E61E32' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 4 3, auto;
}
[data-palette="purple"]{
  --p1:#AC58E9;--p1-rgb:172,88,233;--p1-hi:#C27BFF;--p1-lo:#8E3CD0;--p2:#D9B3FF;--p2-rgb:200,150,255;--p3:#5B2391;--p4:#F0ABFC;
  --hero-1:#33154F;--hero-2:#12071F;--wine:#C88BFF;
  --word-grad:linear-gradient(180deg,#FFFFFF 0%,#F2E6FF 30%,#D9B3FF 62%,#AC58E9 100%);
  --m0:5,5,5;--m1:172,88,233,.36;--m2:14,14,14,.95;--m3:200,150,255,.22;--m4:56,18,90,.85;
  --cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3l17 9.5-7.4 1.8L10.4 22z' fill='%23fff' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='21' cy='21' r='3' fill='%23AC58E9' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 4 3, auto;
}
[data-palette="green"]{
  --p1:#1FD65F;--p1-rgb:31,214,95;--p1-hi:#4BEA84;--p1-lo:#14B24D;--p2:#8CF5B0;--p2-rgb:120,240,160;--p3:#0B6B2E;--p4:#D1FAE5;
  --hero-1:#0C3A1D;--hero-2:#06170C;--wine:#4BEA84;--on-p1:#03140A;
  --word-grad:linear-gradient(180deg,#FFFFFF 0%,#E2FBEA 30%,#8CF5B0 62%,#1FD65F 100%);
  --m0:5,5,5;--m1:31,214,95,.26;--m2:14,14,14,.95;--m3:120,240,160,.16;--m4:10,70,32,.85;
  --cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3l17 9.5-7.4 1.8L10.4 22z' fill='%23fff' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='21' cy='21' r='3' fill='%231FD65F' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 4 3, auto;
}
/* el verde es muy claro: encima de él el texto va casi negro para que se lea bien */
[data-palette="green"] .pill-wine,[data-palette="green"] .chip[aria-pressed="true"],[data-palette="green"] .toast,[data-palette="green"] .d-btn:not(.ghost),
[data-palette="green"] .pview .arr,[data-palette="green"] .pill-white .arr,[data-palette="green"] .pill.glass .arr,[data-palette="green"] a.c-row:hover .ci,
[data-palette="green"] .step-btn:hover .si,[data-palette="green"] .sp-top .si,[data-palette="green"] .ct-link .ic,[data-palette="green"] .d-status{color:#03140A}
[data-theme="dark"] .sheet{border-color:var(--line)}
[data-theme="dark"] .glass{background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.03));border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.45)}
[data-theme="dark"] .glass::after{background:radial-gradient(120% 70% at 20% 0%,rgba(255,255,255,.12),transparent 55%)}
[data-theme="dark"] .dock-ind{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(255,255,255,.12)}
[data-theme="dark"] .dock button[aria-current="page"]{color:#fff}
[data-theme="dark"] .chip,[data-theme="dark"] .pill-white,[data-theme="dark"] .pview,[data-theme="dark"] .c-row .ci,[data-theme="dark"] .steps .si,
[data-theme="dark"] .step-btn:hover,[data-theme="dark"] .skill,[data-theme="dark"] .fld input,[data-theme="dark"] .fld textarea,[data-theme="dark"] .preview,
[data-theme="dark"] .sp-nav .icon-btn,[data-theme="dark"] .d-card,[data-theme="dark"] .d-btn.ghost,[data-theme="dark"] .d-table,[data-theme="dark"] .d-input,
[data-theme="dark"] .d-slot,[data-theme="dark"] .d-git,[data-theme="dark"] .d-canvas,[data-theme="dark"] .d-pal,[data-theme="dark"] .d-tests li,
[data-theme="dark"] .d-pop,[data-theme="dark"] .d-zoom button,[data-theme="dark"] .d-issue,[data-theme="dark"] .d-like{background:var(--white);color:var(--ink)}
[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--btn-grad);color:#fff;border-color:transparent}
[data-theme="dark"] .chip:hover{color:#fff}
[data-theme="dark"] .ico{background:#F4F5F8!important}
[data-theme="dark"] .hero{background:radial-gradient(80% 70% at 62% 30%,var(--hero-1) 0%,var(--hero-2) 45%,var(--hero-3) 100%)}
[data-theme="dark"] .hero-glow{background:radial-gradient(circle,rgba(var(--p2-rgb),.55) 0%,rgba(var(--p1-rgb),0) 62%)}
[data-theme="dark"] .hero-word .w{color:var(--p2);text-shadow:none}
/* sin filtro ni máscara sobre la palabra: con el degradado animado, redibujarlos en cada cuadro bajaba de 60 a ~38 cuadros por segundo */
[data-theme="dark"] .hero-word.hw-line .w{color:transparent;-webkit-text-stroke-color:rgba(255,255,255,.22)}
[data-theme="dark"] .name{filter:drop-shadow(0 14px 30px rgba(var(--p1-rgb),.55))}
[data-theme="dark"] .about-photo{background:linear-gradient(160deg,var(--hero-1),var(--hero-2))}
[data-theme="dark"] .mock{border-color:var(--line)}
[data-theme="dark"] .pg-stage{background:radial-gradient(circle at 50% 40%,rgba(var(--p2-rgb),.32),transparent 70%),radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1.5px) 0 0/22px 22px,var(--deep)}
[data-theme="dark"] .pg-card{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:rgba(255,255,255,.16);color:var(--ink);box-shadow:0 calc(30px * var(--ps)) calc(70px * var(--ps)) rgba(0,0,0,calc(var(--ps) * 1.2)),inset 0 1px 0 rgba(255,255,255,.2)}
[data-theme="dark"] .pg-card.solid{background:var(--g50)}
[data-theme="dark"] .pl-badge{background:rgba(0,0,0,.55);color:#fff}
[data-theme="dark"] .pl-seek{background:linear-gradient(90deg,var(--pc) var(--v,0%),rgba(255,255,255,.18) var(--v,0%))}
[data-theme="dark"] .pl-ctrl button:hover{background:rgba(255,255,255,.08)}
[data-theme="dark"] .pg-stage .orb.b{background:radial-gradient(circle at 30% 30%,#fff,var(--p4) 50%,transparent 72%)}
[data-theme="dark"] .sp-bg,[data-theme="dark"] .modal-bg{background:rgba(0,0,0,.6)}
[data-theme="dark"] .code,[data-theme="dark"] .sk-code{background:var(--deeper);box-shadow:0 0 0 1px rgba(255,255,255,.06),var(--sh-2)}
[data-theme="dark"] .toast{background:var(--btn-grad);color:#fff}
[data-theme="dark"] .rng::-webkit-slider-thumb{background:#fff}
[data-theme="dark"] .tgl button::after{background:#fff}
[data-theme="dark"] .tag{background:var(--g100);color:var(--ink-2)}
[data-theme="dark"] .sk-demo{background:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1.5px) 0 0/20px 20px,var(--deep)}
[data-theme="dark"] .d-map{background:var(--deep)}
[data-theme="dark"] .d-map svg path:first-child{fill:var(--g100);stroke:var(--g300)}
[data-theme="dark"] .d-heat i{background:var(--g100)}
[data-theme="dark"] .d-heat i[data-l="1"]{background:var(--p3)}[data-theme="dark"] .d-heat i[data-l="2"]{background:var(--p1)}
[data-theme="dark"] .d-heat i[data-l="3"]{background:var(--p2)}[data-theme="dark"] .d-heat i[data-l="4"]{background:#FFFFFF}
[data-theme="dark"] .d-btn{background:var(--btn-grad);box-shadow:0 8px 18px var(--btn-sh)}
[data-theme="dark"] .d-switch:checked{background:var(--p1)}
[data-theme="dark"] .ed-bar{background:var(--g50)}
[data-theme="dark"] .spark{background:var(--p2)}
[data-theme="dark"] .trail{background:var(--p2)}


/* =========================================================
   SELECTOR DE COLORES (para comparar las paletas)
   ========================================================= */
.pal-pick{position:fixed;z-index:65;top:calc(14px + env(safe-area-inset-top,0px));right:14px;display:flex;align-items:center;gap:4px;padding:5px 5px 5px 14px;border-radius:999px}
.pal-pick .lbl{font-size:12px;font-weight:800;color:var(--ink-2);margin-right:4px}
.pal-pick button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:2px solid transparent;transition:transform .35s var(--spring),border-color .3s}
.pal-pick button:hover{transform:scale(1.1)}
.pal-pick button[aria-checked="true"]{border-color:#fff}
.pal-pick i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.4)}
@media (max-width:599px){.pal-pick .lbl{display:none}.pal-pick{padding:4px}}