/* public/skins.css — catálogo de apariencias.
 *
 * Un skin NO cambia la maqueta: solo redefine las variables de color, el radio
 * de las esquinas y la familia tipográfica. Por eso el diseño responsivo sigue
 * igual por construcción — no hay una sola regla de tamaño ni de posición acá.
 *
 * Las paletas no se eligieron a ojo. Se generan con un script que ajusta la
 * luminosidad de cada color de TEXTO hasta alcanzar el contraste WCAG contra el
 * fondo concreto sobre el que se apoya, y después vuelve a medir los 16 pares
 * de texto y los 3 de interfaz de cada skin. Ninguno baja de 4,5:1 en texto ni
 * de 3,0:1 en interfaz. Si tocás un color a mano, volvé a correr el script.
 *
 * Las tipografías son todas del sistema: sin CDN, sin descargas, funciona con
 * la red de UTU caída.
 *
 * Este archivo se carga DESPUÉS de base.css. Los selectores :root[data-skin]
 * tienen especificidad (0,2,0), la misma que el :root:not([data-tema="claro"])
 * del tema automático, así que ganan por orden de aparición. Sin data-skin no
 * pasa nada y rige el comportamiento de siempre: claro, u oscuro si el sistema
 * operativo lo pide.
 */


/* Papel — El de siempre. Sobrio y sin sorpresas. */
:root[data-skin="papel"]{
  --tinta:#14181d;
  --tinta-suave:#4a5560;
  --papel:#ffffff;
  --fondo:#f2f4f6;
  --borde:#c8d0d8;
  --borde-fuerte:#7b8ea2;
  --foco:#a15c00;
  --acento:#1a4f8a;
  --acento-texto:#ffffff;
  --acento-claro:#e7effa;
  --alerta:#8a3216;
  --alerta-fondo:#fdf0e9;
  --ok:#1f6b3f;
  --ok-fondo:#e9f5ee;
  --err:#8c1f15;
  --err-fondo:#fdecea;
  --revisar:#8a5a00;
  --revisar-fondo:#fdf6e3;
  --revisar-borde:#8a5a00;
  --revisar-marca:#8a5a00;
  --neutro-fondo:#f1f3f5;
  --neutro-texto:#4a5560;
  --cabecera-tabla:#f1f3f5;
  --codigo-fondo:#e6eaee;
  --codigo-texto:#14181d;
  --editor-fondo:#111820;
  --editor-texto:#e6edf3;
  --barra-vacia:#f1f3f5;
  --radio:6px;
  --fuente:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fuente-titulo:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme: light;
}

/* Cuaderno — Papel crema, tinta azul y esquinas redondas. */
:root[data-skin="cuaderno"]{
  --tinta:#23201a;
  --tinta-suave:#5d564a;
  --papel:#fffdf6;
  --fondo:#f4efe2;
  --borde:#d8cdb4;
  --borde-fuerte:#9e8652;
  --foco:#8a4b00;
  --acento:#2f5d7c;
  --acento-texto:#ffffff;
  --acento-claro:#e4eef4;
  --alerta:#8a4a16;
  --alerta-fondo:#fbeedd;
  --ok:#3d6b32;
  --ok-fondo:#eaf3e5;
  --err:#8f2418;
  --err-fondo:#fbe7e3;
  --revisar:#7d5a12;
  --revisar-fondo:#f9f0d8;
  --revisar-borde:#7d5a12;
  --revisar-marca:#7d5a12;
  --neutro-fondo:#efe9db;
  --neutro-texto:#5d564a;
  --cabecera-tabla:#efe9db;
  --codigo-fondo:#eae3d2;
  --codigo-texto:#23201a;
  --editor-fondo:#2b2721;
  --editor-texto:#e6edf3;
  --barra-vacia:#efe9db;
  --radio:14px;
  --fuente:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
  --fuente-titulo:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
  color-scheme: light;
}

/* Cítrico — Blanco, naranja y esquinas rectas. */
:root[data-skin="citrico"]{
  --tinta:#1c1c1a;
  --tinta-suave:#55554f;
  --papel:#fbfbfa;
  --fondo:#ffffff;
  --borde:#d2d2c8;
  --borde-fuerte:#93937b;
  --foco:#1d4ed8;
  --acento:#a34a00;
  --acento-texto:#ffffff;
  --acento-claro:#fdeee0;
  --alerta:#9a4a00;
  --alerta-fondo:#fdefe0;
  --ok:#186b52;
  --ok-fondo:#e2f4ee;
  --err:#961a1a;
  --err-fondo:#fdeaea;
  --revisar:#7a5c00;
  --revisar-fondo:#fbf3d8;
  --revisar-borde:#7a5c00;
  --revisar-marca:#7a5c00;
  --neutro-fondo:#f4f4f0;
  --neutro-texto:#55554f;
  --cabecera-tabla:#f4f4f0;
  --codigo-fondo:#eeeee8;
  --codigo-texto:#1c1c1a;
  --editor-fondo:#1c1c1a;
  --editor-texto:#e6edf3;
  --barra-vacia:#f4f4f0;
  --radio:2px;
  --fuente:"Trebuchet MS","Segoe UI",Tahoma,Verdana,sans-serif;
  --fuente-titulo:"Trebuchet MS","Segoe UI",Tahoma,Verdana,sans-serif;
  color-scheme: light;
}

/* Pizarrón — El oscuro de siempre. Descansa la vista. */
:root[data-skin="pizarron"]{
  --tinta:#e8eef4;
  --tinta-suave:#a9b8c6;
  --papel:#1a222b;
  --fondo:#0f1419;
  --borde:#33414f;
  --borde-fuerte:#576f86;
  --foco:#ffc857;
  --acento:#8ab8f0;
  --acento-texto:#000000;
  --acento-claro:#17293f;
  --alerta:#f0a878;
  --alerta-fondo:#33200f;
  --ok:#7fd6a2;
  --ok-fondo:#12291c;
  --err:#f2a6a0;
  --err-fondo:#331512;
  --revisar:#e8c56a;
  --revisar-fondo:#332a10;
  --revisar-borde:#e8c56a;
  --revisar-marca:#e8c56a;
  --neutro-fondo:#232d38;
  --neutro-texto:#a9b8c6;
  --cabecera-tabla:#232d38;
  --codigo-fondo:#232d38;
  --codigo-texto:#e8eef4;
  --editor-fondo:#0d1319;
  --editor-texto:#e6edf3;
  --barra-vacia:#232d38;
  --radio:6px;
  --fuente:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fuente-titulo:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme: dark;
}

/* Neón — Violeta profundo, magenta y cian. Esquinas filosas. */
:root[data-skin="neon"]{
  --tinta:#e9e2ff;
  --tinta-suave:#b0a3d6;
  --papel:#150e2b;
  --fondo:#0a0616;
  --borde:#3d2d6b;
  --borde-fuerte:#6b51b6;
  --foco:#ffe14d;
  --acento:#ff5ce1;
  --acento-texto:#000000;
  --acento-claro:#2a0f3d;
  --alerta:#ffb03c;
  --alerta-fondo:#31210a;
  --ok:#3ce8c8;
  --ok-fondo:#072e2a;
  --err:#ff6b8a;
  --err-fondo:#33101d;
  --revisar:#ffd93c;
  --revisar-fondo:#2e2708;
  --revisar-borde:#ffd93c;
  --revisar-marca:#ffd93c;
  --neutro-fondo:#1d1436;
  --neutro-texto:#b0a3d6;
  --cabecera-tabla:#1d1436;
  --codigo-fondo:#1d1436;
  --codigo-texto:#e9e2ff;
  --editor-fondo:#080412;
  --editor-texto:#e6edf3;
  --barra-vacia:#1d1436;
  --radio:2px;
  --fuente:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --fuente-titulo:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  color-scheme: dark;
}

/* Terminal — Fósforo verde sobre negro. Sin esquinas. */
:root[data-skin="terminal"]{
  --tinta:#c8f5c8;
  --tinta-suave:#8ab88a;
  --papel:#0d120d;
  --fondo:#050705;
  --borde:#26401f;
  --borde-fuerte:#416d35;
  --foco:#ffe14d;
  --acento:#4ce04c;
  --acento-texto:#000000;
  --acento-claro:#0f2410;
  --alerta:#e0c04c;
  --alerta-fondo:#251f08;
  --ok:#4ce04c;
  --ok-fondo:#0f2410;
  --err:#ff7a6b;
  --err-fondo:#2b1210;
  --revisar:#e0c04c;
  --revisar-fondo:#251f08;
  --revisar-borde:#e0c04c;
  --revisar-marca:#e0c04c;
  --neutro-fondo:#111811;
  --neutro-texto:#8ab88a;
  --cabecera-tabla:#111811;
  --codigo-fondo:#111811;
  --codigo-texto:#c8f5c8;
  --editor-fondo:#030503;
  --editor-texto:#e6edf3;
  --barra-vacia:#111811;
  --radio:0px;
  --fuente:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --fuente-titulo:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  color-scheme: dark;
}

/* Río — Azul petróleo y turquesa. Todo bien redondeado. */
:root[data-skin="rio"]{
  --tinta:#dff0f4;
  --tinta-suave:#9fc3cd;
  --papel:#0e2b36;
  --fondo:#071c24;
  --borde:#1f4c5c;
  --borde-fuerte:#327993;
  --foco:#ffd166;
  --acento:#4fd1c5;
  --acento-texto:#000000;
  --acento-claro:#0d3a42;
  --alerta:#f0b071;
  --alerta-fondo:#2f2010;
  --ok:#63d9a0;
  --ok-fondo:#0a2e21;
  --err:#f49a95;
  --err-fondo:#301513;
  --revisar:#e5c96f;
  --revisar-fondo:#2d2711;
  --revisar-borde:#e5c96f;
  --revisar-marca:#e5c96f;
  --neutro-fondo:#123642;
  --neutro-texto:#9fc3cd;
  --cabecera-tabla:#123642;
  --codigo-fondo:#123642;
  --codigo-texto:#dff0f4;
  --editor-fondo:#04141a;
  --editor-texto:#e6edf3;
  --barra-vacia:#123642;
  --radio:16px;
  --fuente:"Trebuchet MS","Segoe UI",Tahoma,Verdana,sans-serif;
  --fuente-titulo:"Trebuchet MS","Segoe UI",Tahoma,Verdana,sans-serif;
  color-scheme: dark;
}

/* Brasa — Marrón oscuro con naranja de fogata. */
:root[data-skin="brasa"]{
  --tinta:#f4e6da;
  --tinta-suave:#c4a892;
  --papel:#241811;
  --fondo:#160f0a;
  --borde:#4a3121;
  --borde-fuerte:#8a5b3e;
  --foco:#8ad3ff;
  --acento:#ff9a4d;
  --acento-texto:#000000;
  --acento-claro:#3a2110;
  --alerta:#ffb861;
  --alerta-fondo:#33220c;
  --ok:#8fd67f;
  --ok-fondo:#152a12;
  --err:#ff8b7a;
  --err-fondo:#331612;
  --revisar:#f0cc6b;
  --revisar-fondo:#2e2610;
  --revisar-borde:#f0cc6b;
  --revisar-marca:#f0cc6b;
  --neutro-fondo:#2d1e15;
  --neutro-texto:#c4a892;
  --cabecera-tabla:#2d1e15;
  --codigo-fondo:#2d1e15;
  --codigo-texto:#f4e6da;
  --editor-fondo:#0e0906;
  --editor-texto:#e6edf3;
  --barra-vacia:#2d1e15;
  --radio:10px;
  --fuente:Verdana,Geneva,Tahoma,sans-serif;
  --fuente-titulo:Verdana,Geneva,Tahoma,sans-serif;
  color-scheme: dark;
}

/* La tipografía del skin. El valor de reserva es el de siempre, así que sin
   skin elegido no cambia nada. */
body{font-family:var(--fuente,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif)}
h1,h2,h3{font-family:var(--fuente-titulo,var(--fuente,inherit))}

/* ---- Galería de skins ---- */
.galeria-skins{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;margin:10px 0
}
.muestra-skin{
  display:flex;flex-direction:column;gap:6px;align-items:stretch;
  padding:10px;cursor:pointer;text-align:left;font-family:inherit;
  border:2px solid var(--borde);border-radius:var(--radio);
  background:var(--papel);color:var(--tinta);min-height:auto
}
.muestra-skin[aria-pressed="true"]{border-color:var(--acento);box-shadow:0 0 0 2px var(--acento-claro)}
.muestra-skin .nombre-skin{font-weight:700;font-size:.95rem;display:flex;gap:6px;align-items:center}
.muestra-skin .desc-skin{font-size:.78rem;color:var(--tinta-suave);line-height:1.35}
/* La tirita de colores es la vista previa: los colores reales del skin,
   tomados de sus propias variables mediante las clases de abajo. */
.tira-skin{display:flex;height:22px;border-radius:calc(var(--radio) / 2);overflow:hidden}
.tira-skin span{flex:1}
.muestra-skin .marca-activo{font-size:.75rem;font-weight:700;color:var(--acento)}

@media (max-width:520px){
  .galeria-skins{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}
.muestra-skin[data-muestra="papel"] .tira-skin span:nth-child(1){background:#f2f4f6}
.muestra-skin[data-muestra="papel"] .tira-skin span:nth-child(2){background:#ffffff}
.muestra-skin[data-muestra="papel"] .tira-skin span:nth-child(3){background:#1a4f8a}
.muestra-skin[data-muestra="papel"] .tira-skin span:nth-child(4){background:#1f6b3f}
.muestra-skin[data-muestra="papel"] .tira-skin span:nth-child(5){background:#14181d}
.muestra-skin[data-muestra="cuaderno"] .tira-skin span:nth-child(1){background:#f4efe2}
.muestra-skin[data-muestra="cuaderno"] .tira-skin span:nth-child(2){background:#fffdf6}
.muestra-skin[data-muestra="cuaderno"] .tira-skin span:nth-child(3){background:#2f5d7c}
.muestra-skin[data-muestra="cuaderno"] .tira-skin span:nth-child(4){background:#3d6b32}
.muestra-skin[data-muestra="cuaderno"] .tira-skin span:nth-child(5){background:#23201a}
.muestra-skin[data-muestra="citrico"] .tira-skin span:nth-child(1){background:#ffffff}
.muestra-skin[data-muestra="citrico"] .tira-skin span:nth-child(2){background:#fbfbfa}
.muestra-skin[data-muestra="citrico"] .tira-skin span:nth-child(3){background:#a34a00}
.muestra-skin[data-muestra="citrico"] .tira-skin span:nth-child(4){background:#186b52}
.muestra-skin[data-muestra="citrico"] .tira-skin span:nth-child(5){background:#1c1c1a}
.muestra-skin[data-muestra="pizarron"] .tira-skin span:nth-child(1){background:#0f1419}
.muestra-skin[data-muestra="pizarron"] .tira-skin span:nth-child(2){background:#1a222b}
.muestra-skin[data-muestra="pizarron"] .tira-skin span:nth-child(3){background:#8ab8f0}
.muestra-skin[data-muestra="pizarron"] .tira-skin span:nth-child(4){background:#7fd6a2}
.muestra-skin[data-muestra="pizarron"] .tira-skin span:nth-child(5){background:#e8eef4}
.muestra-skin[data-muestra="neon"] .tira-skin span:nth-child(1){background:#0a0616}
.muestra-skin[data-muestra="neon"] .tira-skin span:nth-child(2){background:#150e2b}
.muestra-skin[data-muestra="neon"] .tira-skin span:nth-child(3){background:#ff5ce1}
.muestra-skin[data-muestra="neon"] .tira-skin span:nth-child(4){background:#3ce8c8}
.muestra-skin[data-muestra="neon"] .tira-skin span:nth-child(5){background:#e9e2ff}
.muestra-skin[data-muestra="terminal"] .tira-skin span:nth-child(1){background:#050705}
.muestra-skin[data-muestra="terminal"] .tira-skin span:nth-child(2){background:#0d120d}
.muestra-skin[data-muestra="terminal"] .tira-skin span:nth-child(3){background:#4ce04c}
.muestra-skin[data-muestra="terminal"] .tira-skin span:nth-child(4){background:#4ce04c}
.muestra-skin[data-muestra="terminal"] .tira-skin span:nth-child(5){background:#c8f5c8}
.muestra-skin[data-muestra="rio"] .tira-skin span:nth-child(1){background:#071c24}
.muestra-skin[data-muestra="rio"] .tira-skin span:nth-child(2){background:#0e2b36}
.muestra-skin[data-muestra="rio"] .tira-skin span:nth-child(3){background:#4fd1c5}
.muestra-skin[data-muestra="rio"] .tira-skin span:nth-child(4){background:#63d9a0}
.muestra-skin[data-muestra="rio"] .tira-skin span:nth-child(5){background:#dff0f4}
.muestra-skin[data-muestra="brasa"] .tira-skin span:nth-child(1){background:#160f0a}
.muestra-skin[data-muestra="brasa"] .tira-skin span:nth-child(2){background:#241811}
.muestra-skin[data-muestra="brasa"] .tira-skin span:nth-child(3){background:#ff9a4d}
.muestra-skin[data-muestra="brasa"] .tira-skin span:nth-child(4){background:#8fd67f}
.muestra-skin[data-muestra="brasa"] .tira-skin span:nth-child(5){background:#f4e6da}