/* JAVI 2.0 — TEMA «CLÁSICO» (11/10/2026): los colores de antes (carbón, rojo metálico y oro), rediseñados con más pulido.
   Solo colores: nada de estructura, tamaños ni posiciones. Se activa con body.tema-clasico (tema.js, Ajustes ⚙). */
html.tema-clasico {
  --carbon: #08070a; --carbon2: #120d10; --panel: rgba(24, 17, 20, .86); --panel2: rgba(38, 26, 29, .80);
  --borde: rgba(224, 178, 52, .34); --borde2: rgba(227, 37, 47, .50);
  --rojo: #b3121b; --rojo2: #e3252f; --rojo3: #5a070c;
  --oro: #e0b234; --oro2: #f2c94a; --oro3: #fff1b0; --oro4: #8a5a0a;
  --fg: #f6f1e6; --mut: #b3a68c;
}
/* Ajustes (usa los alias del panel de ajustes) */
html.tema-clasico body { --bg: var(--carbon); --border: var(--borde); --text: var(--fg); --text-muted: var(--mut); --gold: var(--oro); --gold-soft: rgba(224,178,52,.18); --on-gold: #1a1204; --danger: var(--rojo2); }

html.tema-clasico, body.tema-clasico { background-color: #08070a !important; }
body.tema-clasico {
  background-image:
    radial-gradient(1100px 560px at 50% -12%, rgba(179, 18, 27, .34), transparent 62%),
    radial-gradient(700px 480px at 100% 100%, rgba(224, 178, 52, .12), transparent 60%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) !important;
  background-size: auto, auto, 32px 32px, 32px 32px !important; background-attachment: fixed !important;
}
body.tema-clasico #app, body.tema-clasico #panel-chat, body.tema-clasico #panel-musica, body.tema-clasico #panel-juegos, body.tema-clasico #panel-javi, body.tema-clasico #log { background-color: transparent; }

body.tema-clasico header#cab { background: linear-gradient(180deg, rgba(52, 9, 14, .96), rgba(16, 11, 13, .96)) !important; border-bottom: 1px solid var(--borde); }
body.tema-clasico header#cab::after { background: linear-gradient(90deg, transparent, var(--oro), var(--rojo2), var(--oro), transparent); opacity: .85; }
body.tema-clasico nav#nav { background: linear-gradient(180deg, rgba(20,14,16,.97), rgba(10,8,9,.99)) !important; border-top: 1px solid var(--borde); }
body.tema-clasico nav#nav button { color: var(--mut); }
body.tema-clasico nav#nav button.on { color: var(--oro2); text-shadow: 0 0 10px rgba(224,178,52,.45); }
body.tema-clasico nav#nav button.on::before { background: linear-gradient(90deg, transparent, var(--oro), transparent); height: 3px; }
body.tema-clasico form#f { background: rgba(14, 10, 12, .94); }

body.tema-clasico .quien .nombre { background: linear-gradient(180deg, #fff6c4, var(--oro2) 55%, #b88a1c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
body.tema-clasico .insignia img { filter: drop-shadow(0 0 7px rgba(227,37,47,.7)); }
body.tema-clasico .tarjeta { background: var(--panel); border: 1px solid var(--borde); box-shadow: 0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,241,176,.05); }
body.tema-clasico .titulo-sec { color: var(--oro2); }

/* burbujas */
body.tema-clasico .yo { background: linear-gradient(135deg, #a3121c, #5a070c) !important; border: 1px solid rgba(255,110,110,.45) !important; box-shadow: 0 4px 16px rgba(179,18,27,.32) !important; color: #fff !important; }
body.tema-clasico .javi, body.tema-clasico .b.javi { background: linear-gradient(180deg, rgba(42,30,33,.88), rgba(26,19,21,.88)) !important; border: 1px solid var(--borde) !important; border-left: 3px solid var(--oro) !important; color: var(--fg) !important; box-shadow: 0 4px 14px rgba(0,0,0,.3) !important; }
body.tema-clasico .b small { color: var(--mut); }
body.tema-clasico .b a { color: var(--oro2); }
body.tema-clasico body, body.tema-clasico .tarjeta { color: var(--fg); }

/* cajas de texto */
body.tema-clasico textarea#t, body.tema-clasico input[type=text] { background: #0d090b; color: var(--fg); border: 1px solid var(--borde); }
body.tema-clasico textarea#t:focus, body.tema-clasico input[type=text]:focus { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(224,178,52,.25); outline: none; }
body.tema-clasico .cancion.actual { background: rgba(224,178,52,.12); border-color: var(--oro); }
body.tema-clasico .cancion .n, body.tema-clasico .cancion.actual .n { color: var(--oro); }
body.tema-clasico .barra i, body.tema-clasico #barra-i { background: linear-gradient(90deg, var(--rojo2), var(--oro2)); }
body.tema-clasico #radio { background: var(--carbon2); }

/* botones: rojo carbón con borde y brillo dorado, ícono y letra en oro claro */
body.tema-clasico .btn-cab, body.tema-clasico header#cab button, body.tema-clasico form#f button, body.tema-clasico .controles button, body.tema-clasico .chips button, body.tema-clasico .acciones button, body.tema-clasico .atajos button, body.tema-clasico .cancion button, body.tema-clasico .auth-card button#authGo, body.tema-clasico .auth-card button[type=submit], body.tema-clasico #panel-juegos button, body.tema-clasico #panel-musica button:not(.cancion), body.tema-clasico #menu-ident button {
  background: linear-gradient(180deg, #4a1a1f 0%, #2a1013 48%, #1a0a0c 100%) !important;
  border: 1px solid var(--oro) !important;
  color: var(--oro3) !important; -webkit-text-fill-color: var(--oro3); text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255,241,176,.30), inset 0 -2px 4px rgba(0,0,0,.55), 0 0 10px rgba(179,18,27,.28) !important; }
body.tema-clasico .btn-cab:active, body.tema-clasico header#cab button:active, body.tema-clasico form#f button:active, body.tema-clasico .controles button:active, body.tema-clasico .chips button:active, body.tema-clasico .acciones button:active, body.tema-clasico #menu-ident button:active { background: linear-gradient(180deg, #1a0a0c, #4a1a1f) !important; }
body.tema-clasico form#f button[type=submit] { background: linear-gradient(180deg, #f0343e, #a3121c 55%, #5a070c) !important; border-color: #ffd36b !important; color: #fff !important; -webkit-text-fill-color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 14px rgba(227,37,47,.55) !important; }
body.tema-clasico .chips button.on, body.tema-clasico #menu-ident button.on { box-shadow: inset 0 1px 0 rgba(255,241,176,.30), 0 0 0 2px var(--oro2), 0 0 14px rgba(224,178,52,.45) !important; color: #fff !important; -webkit-text-fill-color: #fff; }
body.tema-clasico .controles button.principal { background: linear-gradient(180deg, #f0343e, #a3121c 55%, #5a070c) !important; color: #fff !important; -webkit-text-fill-color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 2px var(--oro) !important; }
body.tema-clasico .mp-grande.fav .mp-ico, body.tema-clasico .cancion button.fav, body.tema-clasico #radio #bfav.fav { color: var(--rojo2) !important; }

/* íconos de máscara (eran negros sobre plata): ahora oro claro */
body.tema-clasico header#cab #bcampana::before, body.tema-clasico header#cab #bjuegos::before, body.tema-clasico header#cab #bvoz::before, body.tema-clasico header#cab #bplan::before, body.tema-clasico header#cab #badmin::before, body.tema-clasico header#cab #bayuda::before, body.tema-clasico header#cab #bajustes::before, body.tema-clasico form#f #bcamara::before, body.tema-clasico form#f #badjuntar::before, body.tema-clasico form#f #grabar::before, body.tema-clasico header#cab .btn-cab.texto::before { background: var(--oro3); }
/* emoji: vuelven a su color */
body.tema-clasico .emo, body.tema-clasico .btn-cab .emo, body.tema-clasico header#cab button .emo, body.tema-clasico form#f button .emo, body.tema-clasico .controles button .emo, body.tema-clasico .chips button .emo, body.tema-clasico .acciones button .emo, body.tema-clasico .atajos button .emo, body.tema-clasico .cancion button .emo, body.tema-clasico #panel-juegos button .emo, body.tema-clasico #panel-musica button:not(.cancion) .emo, body.tema-clasico #menu-ident button .emo, body.tema-clasico #bgpt5 .emo { filter: none; }
body.tema-clasico #menu-ident .ventana { border-color: var(--oro); background: linear-gradient(180deg, #1b1114, #0c0809); }
body.tema-clasico #menu-ident h4 { color: var(--oro2); }

/* fila «Colores» en Ajustes y su panel de vista previa (tema_panel.js, se pide al tocar); se ven bien en todos los temas */
.tema-fila { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--borde, rgba(200,205,214,.3)); border-radius: 14px; background: rgba(255,255,255,.04); }
.tema-fila .tema-tit { font: 600 14px var(--f-titulo, system-ui); letter-spacing: 1px; color: var(--fg, #fff); }
.tema-fila .tema-abrir { padding: 8px 14px; border-radius: 999px; font: 600 13px var(--f-texto, system-ui); border: 1px solid var(--borde, #888); background: rgba(0,0,0,.35) !important; color: var(--fg, #fff) !important; -webkit-text-fill-color: var(--fg, #fff); box-shadow: none !important; }
#tema-panel { position: fixed; inset: 0; z-index: 99999; display: none; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.7); }
#tema-panel.abierto { display: flex; }
#tema-panel .tp-caja { width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: #111114; border: 1px solid rgba(200,205,214,.35); color: #fff; }
#tema-panel .tp-cab2 { display: flex; align-items: center; justify-content: space-between; }
#tema-panel h3 { margin: 0; font: 700 17px var(--f-titulo, system-ui); letter-spacing: 1px; color: #fff; }
#tema-panel .tp-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(200,205,214,.4); background: rgba(255,255,255,.08) !important; color: #fff !important; -webkit-text-fill-color: #fff; font-size: 16px; box-shadow: none !important; }
#tema-panel .tp-nota { margin: 6px 0 12px; font: 13px/1.35 var(--f-texto, system-ui); color: #b9bec8; }
#tema-panel .tp-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#tema-panel .tp-op { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; border: 2px solid rgba(200,205,214,.25); background: rgba(255,255,255,.04) !important; color: #fff !important; -webkit-text-fill-color: #fff; text-align: left; box-shadow: none !important; font: 600 14px var(--f-texto, system-ui); }
#tema-panel .tp-op.on { border-color: #fff; background: rgba(255,255,255,.12) !important; }
#tema-panel .tp-v { position: relative; display: block; height: 92px; border-radius: 10px; border: 1px solid; overflow: hidden; }
#tema-panel .tp-v i { position: absolute; display: block; border: 1px solid transparent; font-style: normal; }
#tema-panel .tp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
#tema-panel .tp-cab { left: 0; right: 0; top: 0; height: 18px; border-width: 0 0 1px; }
#tema-panel .tp-cab b { position: absolute; left: 8px; top: 5px; width: 36px; height: 7px; border-radius: 4px; }
#tema-panel .tp-b1 { left: 8px; top: 26px; width: 58%; height: 22px; border-radius: 8px; }
#tema-panel .tp-b2 { right: 8px; top: 54px; width: 50%; height: 16px; border-radius: 8px; }
#tema-panel .tp-bt { left: 8px; bottom: 6px; width: 44px; height: 17px; border-radius: 9px; text-align: center; font: 700 11px/15px system-ui; }
#tema-panel .tp-n { padding: 0 2px; }
#tema-panel .tp-chk { min-height: 14px; padding: 0 2px; font: 700 12px system-ui; color: #9be3a6; }
/* ícono de recargar (imagen negra): se tiñe de oro claro */
body.tema-clasico #brecargar img { filter: invert(1) sepia(.35) saturate(2.2) brightness(1.05); }
#tema-panel .tp-v:has(.tp-img) i { display: none; }