/* ==========================================================================
   AloneGamer Torneos - estilos compartidos y TEMAS
   Todos los colores salen de estas variables. Para crear un tema nuevo,
   copie un bloque [data-tema="..."], cambie los valores y agreguelo a la
   lista TEMAS de comun.js y a TEMAS_VALIDOS de server.js.
   ========================================================================== */

/* ---------- 1. OSCURO (negro con naranja) ---------- */
:root, [data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0c0b0a;
  --fondo-pagina: #0c0b0a;
  --fondo-2: #15130f;
  --fondo-exterior: #050505;
  --tarjeta: #1b1814;
  --tarjeta-2: #241f19;
  --linea: #33291e;
  --texto: #f6ece2;
  --tenue: #a8998a;
  --naranja: #ff8c00;
  --naranja-2: #e85d04;
  --naranja-suave: rgba(255, 140, 0, .14);
  --acento-fondo: #ff8c00;
  --sobre-naranja: #1a0d00;
  --grad-primario: linear-gradient(100deg, #ff7a00 0%, #ff9d00 55%, #ffc21a 100%);
  --sobre-primario: #1a0d00;
  --verde: #22c55e;
  --verde-suave: rgba(34, 197, 94, .14);
  --verde-borde: rgba(34, 197, 94, .45);
  --oro: #ffc53d;
  --oro-suave: rgba(255, 197, 61, .16);
  --gris: #6b6259;
  --rojo: #ef4444;
  --c-azul: #2b7fff;
  --c-turquesa: #0fa596;
  --c-morado: #8b5cf6;
  --c-rosa: #e83e8c;
  --c-ambar: #f59e0b;
  --chip-vivo: #8ff0b4;
  --chip-naranja: #ffc58a;
  --brillo-1: rgba(255, 140, 0, .20);
  --brillo-2: rgba(232, 93, 4, .16);
  --fila-vivo: color-mix(in srgb, var(--verde) 16%, var(--tarjeta));
  --campeon-fondo: radial-gradient(500px 260px at 50% 0, rgba(255,197,61,.28), transparent 70%), linear-gradient(180deg, #2a2112, #17130c);
  --pie-fondo: linear-gradient(90deg, rgba(255,140,0,.16), rgba(255,140,0,.04));
  --pie-borde: rgba(255,140,0,.38);
  --logo-filtro: drop-shadow(0 6px 24px rgba(255,140,0,.35));
  --sombra: 0 10px 30px rgba(0,0,0,.4);
  --opacidad-eliminado: 1;
  --color-meta: #0c0b0a;
  --tx-azul: #ffffff;
  --tx-turquesa: #ffffff;
  --tx-morado: #ffffff;
  --tx-rosa: #ffffff;
  --tx-ambar: #1a0d00;
  --tx-verde: #05200e;
  --tx-rojo: #ffffff;
  --tx-oro: #1a0d00;
}

/* ---------- 2. CLARO (crema con naranja) ---------- */
[data-tema="claro"] {
  color-scheme: light;
  --sombra-tarjeta: 0 1px 2px rgba(80,50,20,.06), 0 10px 26px -14px rgba(80,50,20,.28);
  --fondo: #f7f2ec;
  --fondo-pagina: #f7f2ec;
  --fondo-2: #efe6db;
  --fondo-exterior: #e9e0d4;
  --tarjeta: #ffffff;
  --tarjeta-2: #fdf8f2;
  --linea: #e5d6c4;
  --texto: #1d1712;
  --tenue: #6e6255;
  --naranja: #e06a00;
  --naranja-2: #c2410c;
  --naranja-suave: rgba(224, 106, 0, .12);
  --acento-fondo: #d35f00;
  --sobre-naranja: #ffffff;
  --grad-primario: linear-gradient(100deg, #f06400 0%, #ff9200 55%, #ffbf1f 100%);
  --sobre-primario: #1f0e00;
  --verde: #15803d;
  --verde-suave: rgba(21, 128, 61, .11);
  --verde-borde: rgba(21, 128, 61, .40);
  --oro: #a15c07;
  --oro-suave: rgba(217, 140, 6, .14);
  --gris: #a1958a;
  --rojo: #dc2626;
  --c-azul: #1d6fe0;
  --c-turquesa: #0e9488;
  --c-morado: #7c3aed;
  --c-rosa: #db2777;
  --c-ambar: #c27803;
  --chip-vivo: #166534;
  --chip-naranja: #9a3e00;
  --brillo-1: rgba(255, 140, 0, .22);
  --brillo-2: rgba(232, 93, 4, .12);
  --fila-vivo: color-mix(in srgb, var(--verde) 16%, var(--tarjeta));
  --campeon-fondo: radial-gradient(500px 260px at 50% 0, rgba(255,197,61,.45), transparent 70%), linear-gradient(180deg, #fff6df, #ffffff);
  --pie-fondo: linear-gradient(90deg, rgba(255,140,0,.16), rgba(255,140,0,.05));
  --pie-borde: rgba(255,140,0,.38);
  --logo-filtro: drop-shadow(0 6px 18px rgba(255,140,0,.30));
  --sombra: 0 10px 30px rgba(80,50,20,.12);
  --opacidad-eliminado: 1;
  --color-meta: #f7f2ec;
  --tx-azul: #ffffff;
  --tx-turquesa: #ffffff;
  --tx-morado: #ffffff;
  --tx-rosa: #ffffff;
  --tx-ambar: #ffffff;
  --tx-verde: #ffffff;
  --tx-rojo: #ffffff;
  --tx-oro: #ffffff;
}

/* ---------- 3. ATARDECER (naranja vivo que baja a negro) ---------- */
[data-tema="atardecer"] {
  color-scheme: dark;
  --fondo: #0d0906;
  --fondo-pagina: radial-gradient(1100px 620px at 50% -12%, #ffa21f 0%, rgba(255,162,31,0) 62%),
                  linear-gradient(180deg, #ff8a00 0%, #e36d00 20%, #9c4a00 40%, #4a2400 60%, #1c1108 80%, #0d0906 100%);
  --fondo-2: #1f160c;
  --fondo-exterior: #080503;
  --tarjeta: #1a120a;
  --tarjeta-2: #251a0e;
  --linea: #4a3216;
  --texto: #fff4e6;
  --tenue: #e3b98a;
  --naranja: #ff9a1f;
  --naranja-2: #ff7a00;
  --naranja-suave: rgba(255, 154, 31, .16);
  --acento-fondo: #ffffff;
  --sobre-naranja: #1a0d00;
  --grad-primario: linear-gradient(100deg, #ff7a00 0%, #ff9a1f 60%, #ffae3d 100%);
  --sobre-primario: #1a0d00;
  --verde: #34d399;
  --verde-suave: rgba(52, 211, 153, .14);
  --verde-borde: rgba(52, 211, 153, .5);
  --oro: #ffc46b;
  --oro-suave: rgba(255, 196, 107, .16);
  --gris: #8a6a4a;
  --rojo: #ff5c5c;
  --c-azul: #4aa3ff;
  --c-turquesa: #2dd4bf;
  --c-morado: #b18cff;
  --c-rosa: #ff6fa5;
  --c-ambar: #ffb347;
  --chip-vivo: #a7f3d0;
  --chip-naranja: #ffd2b0;
  --brillo-1: rgba(255, 140, 0, .30);
  --brillo-2: rgba(255, 122, 0, .16);
  --fila-vivo: color-mix(in srgb, var(--verde) 14%, var(--tarjeta));
  --campeon-fondo: radial-gradient(500px 260px at 50% 0, rgba(255,196,107,.30), transparent 70%), linear-gradient(180deg, #3a2610, #1a120a);
  --pie-fondo: linear-gradient(90deg, #251a0e, #1a120a);
  --pie-borde: #ff9a1f;
  --logo-filtro: brightness(0) invert(1) drop-shadow(0 6px 22px rgba(0,0,0,.45));
  --sombra: 0 10px 30px rgba(0,0,0,.45);
  --opacidad-eliminado: 1;
  --color-meta: #ff8a00;
  --tx-azul: #04121f;
  --tx-turquesa: #03201c;
  --tx-morado: #160733;
  --tx-rosa: #2a0714;
  --tx-ambar: #2a1300;
  --tx-verde: #03201a;
  --tx-rojo: #2a0606;
  --tx-oro: #2a1300;
  --tenue-fondo: #fff0dc;
}

/* ---------- 4. NEON (violeta oscuro con rosa y cian) ---------- */
[data-tema="neon"] {
  color-scheme: dark;
  --fondo: #0d0718;
  --fondo-pagina: linear-gradient(180deg, #120824 0%, #0b0616 60%, #08040f 100%);
  --fondo-2: #170d2a;
  --fondo-exterior: #06030d;
  --tarjeta: #1a1030;
  --tarjeta-2: #23153f;
  --linea: #3b2563;
  --texto: #f4ecff;
  --tenue: #a99bcb;
  --naranja: #ff8c00;
  --naranja-2: #ff5e3a;
  --naranja-suave: rgba(255, 140, 0, .15);
  --acento-fondo: #ff9d2e;
  --sobre-naranja: #1a0d00;
  --grad-primario: linear-gradient(100deg, #ff8c00 0%, #ff4fa3 100%);
  --sobre-primario: #ffffff;
  --verde: #2ef2a0;
  --verde-suave: rgba(46, 242, 160, .13);
  --verde-borde: rgba(46, 242, 160, .5);
  --oro: #ffd166;
  --oro-suave: rgba(255, 209, 102, .16);
  --gris: #6c5d8c;
  --rojo: #ff4d6d;
  --c-azul: #3ddcff;
  --c-turquesa: #2ef2c8;
  --c-morado: #c27bff;
  --c-rosa: #ff4fd8;
  --c-ambar: #ffc02e;
  --chip-vivo: #8dffd0;
  --chip-naranja: #ffc58a;
  --brillo-1: rgba(255, 60, 200, .22);
  --brillo-2: rgba(0, 220, 255, .18);
  --fila-vivo: color-mix(in srgb, var(--verde) 16%, var(--tarjeta));
  --campeon-fondo: radial-gradient(500px 260px at 50% 0, rgba(255,79,216,.35), transparent 70%), linear-gradient(180deg, #2a1240, #150a26);
  --pie-fondo: linear-gradient(90deg, rgba(255,79,216,.18), rgba(61,220,255,.10));
  --pie-borde: rgba(255,79,216,.45);
  --logo-filtro: drop-shadow(0 0 22px rgba(255,79,216,.55));
  --sombra: 0 10px 30px rgba(0,0,0,.5);
  --opacidad-eliminado: 1;
  --color-meta: #0d0718;
  --tx-azul: #04141c;
  --tx-turquesa: #03201a;
  --tx-morado: #1a0533;
  --tx-rosa: #2a0022;
  --tx-ambar: #1f1300;
  --tx-verde: #03200f;
  --tx-rojo: #2a0008;
  --tx-oro: #1f1300;
}

/* ---------- 5. OCEANO (azul profundo con naranja y turquesa) ---------- */
[data-tema="oceano"] {
  color-scheme: dark;
  --fondo: #06121f;
  --fondo-pagina: linear-gradient(180deg, #0a1d33 0%, #06121f 55%, #040c16 100%);
  --fondo-2: #0b1d30;
  --fondo-exterior: #030a12;
  --tarjeta: #0e2238;
  --tarjeta-2: #132b45;
  --linea: #1f3d5c;
  --texto: #eaf4ff;
  --tenue: #8fa9c4;
  --naranja: #ff9a1f;
  --naranja-2: #ff6b2c;
  --naranja-suave: rgba(255, 154, 31, .14);
  --acento-fondo: #ffa733;
  --sobre-naranja: #1a0d00;
  --grad-primario: linear-gradient(100deg, #ff7a00 0%, #ffb703 100%);
  --sobre-primario: #1a0d00;
  --verde: #2dd4bf;
  --verde-suave: rgba(45, 212, 191, .13);
  --verde-borde: rgba(45, 212, 191, .5);
  --oro: #ffd166;
  --oro-suave: rgba(255, 209, 102, .15);
  --gris: #5f7891;
  --rojo: #ff5c5c;
  --c-azul: #4aa8ff;
  --c-turquesa: #2dd4bf;
  --c-morado: #a78bfa;
  --c-rosa: #fb7185;
  --c-ambar: #fbbf24;
  --chip-vivo: #99f6e4;
  --chip-naranja: #ffcf8f;
  --brillo-1: rgba(255, 154, 31, .18);
  --brillo-2: rgba(45, 212, 191, .16);
  --fila-vivo: color-mix(in srgb, var(--verde) 16%, var(--tarjeta));
  --campeon-fondo: radial-gradient(500px 260px at 50% 0, rgba(255,209,102,.30), transparent 70%), linear-gradient(180deg, #13304d, #0a1a2c);
  --pie-fondo: linear-gradient(90deg, rgba(255,154,31,.16), rgba(45,212,191,.08));
  --pie-borde: rgba(255,154,31,.40);
  --logo-filtro: drop-shadow(0 6px 24px rgba(255,154,31,.40));
  --sombra: 0 10px 30px rgba(0,0,0,.45);
  --opacidad-eliminado: 1;
  --color-meta: #06121f;
  --tx-azul: #04121f;
  --tx-turquesa: #03201c;
  --tx-morado: #120a30;
  --tx-rosa: #2a0710;
  --tx-ambar: #1f1300;
  --tx-verde: #03201c;
  --tx-rojo: #2a0606;
  --tx-oro: #1f1300;
}

/* ---------- 6. CLARO 2 (naranja vivo que baja a blanco) ---------- */
[data-tema="claro2"] {
  color-scheme: light;
  --sombra-tarjeta: 0 1px 2px rgba(80,50,20,.06), 0 10px 26px -14px rgba(80,50,20,.28);
  --fondo: #ffffff;
  --fondo-pagina: radial-gradient(1100px 620px at 50% -12%, #ffa21f 0%, rgba(255,162,31,0) 62%),
                  linear-gradient(180deg, #ff8a00 0%, #ff9d2e 18%, #ffc27a 38%, #ffe3c2 55%, #fff4e8 72%, #ffffff 100%);
  --fondo-2: #fff1e3;
  --fondo-exterior: #fff4e8;
  --tarjeta: #ffffff;
  --tarjeta-2: #fff8f0;
  --linea: #f3d3ae;
  --texto: #1d1208;
  --tenue: #6e5640;
  --naranja: #e06a00;
  --naranja-2: #c2410c;
  --naranja-suave: rgba(224, 106, 0, .12);
  --acento-fondo: #9a3c00;
  --sobre-naranja: #ffffff;
  --grad-primario: linear-gradient(100deg, #ff7a00 0%, #ff9a1f 60%, #ffae3d 100%);
  --sobre-primario: #1a0d00;
  --verde: #15803d;
  --verde-suave: rgba(21, 128, 61, .11);
  --verde-borde: rgba(21, 128, 61, .40);
  --oro: #a15c07;
  --oro-suave: rgba(217, 140, 6, .14);
  --gris: #a1958a;
  --rojo: #dc2626;
  --c-azul: #1d6fe0;
  --c-turquesa: #0e9488;
  --c-morado: #7c3aed;
  --c-rosa: #db2777;
  --c-ambar: #c27803;
  --chip-vivo: #166534;
  --chip-naranja: #9a3e00;
  --brillo-1: rgba(255, 162, 31, .30);
  --brillo-2: rgba(255, 122, 0, .12);
  --fila-vivo: color-mix(in srgb, var(--verde) 12%, #ffffff);
  --campeon-fondo: radial-gradient(500px 260px at 50% 0, rgba(255,197,61,.45), transparent 70%), linear-gradient(180deg, #fff6df, #ffffff);
  --pie-fondo: #ffffff;
  --pie-borde: #ff9a1f;
  --logo-filtro: brightness(0) invert(1) drop-shadow(0 4px 14px rgba(150, 60, 0, .45));
  --sombra: 0 10px 30px rgba(80,50,20,.12);
  --opacidad-eliminado: 1;
  --color-meta: #ff8a00;
  --tx-azul: #ffffff;
  --tx-turquesa: #ffffff;
  --tx-morado: #ffffff;
  --tx-rosa: #ffffff;
  --tx-ambar: #ffffff;
  --tx-verde: #ffffff;
  --tx-rojo: #ffffff;
  --tx-oro: #ffffff;
  --tenue-fondo: #7a3a10;
}

:root {
  --sombra-tarjeta: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 26px -12px rgba(0,0,0,.55);
  --radio: 12px;
  --fuente-titulo: 'Oxanium', 'Segoe UI', system-ui, sans-serif;
  --fuente: 'Barlow', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--fondo); }
body { margin: 0; min-height: 100vh; color: var(--texto); font-family: var(--fuente); background: var(--fondo-pagina); background-attachment: fixed; }
a { color: var(--naranja); }
button, input, select, textarea { font: inherit; color: inherit; }
.titulo { font-family: var(--fuente-titulo); letter-spacing: .02em; }

/* ---------- Etiquetas ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.chip.vivo, .chip.en_curso { background: var(--verde); color: var(--tx-verde); }
.chip.eliminado { background: var(--fondo-2); color: var(--tenue); box-shadow: inset 0 0 0 1px var(--linea); }
.chip.campeon, .chip.finalizado { background: var(--oro); color: var(--tx-oro); }
.chip.inscrito, .chip.inscripcion, .chip.naranja { background: var(--naranja); color: var(--sobre-naranja); }
.chip.rojo { background: var(--rojo); color: var(--tx-rojo); }
.chip.azul { background: var(--c-azul); color: var(--tx-azul); }
.chip.morado { background: var(--c-morado); color: var(--tx-morado); }
.chip.rosa { background: var(--c-rosa); color: var(--tx-rosa); }
.vacio { color: var(--tenue); text-align: center; padding: 28px 12px; }

/* ---------- Botones de colores (panel y paginas publicas) ---------- */
.btn { --c: var(--texto); border: 1px solid var(--linea); background: var(--tarjeta-2); padding: 9px 14px; border-radius: 10px;
  font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--texto); transition: transform .08s, box-shadow .15s, border-color .15s, background-color .15s; }
.btn:hover { border-color: var(--naranja); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primario { background: var(--grad-primario); border-color: transparent; color: var(--sobre-primario); font-weight: 700;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--naranja) 35%, transparent); }
.btn.primario:hover { filter: brightness(1.06); box-shadow: 0 6px 20px color-mix(in srgb, var(--naranja) 45%, transparent); }
.btn.azul, .btn.turquesa, .btn.morado, .btn.rosa, .btn.ambar, .btn.verde, .btn.peligro {
  background: var(--c); border-color: var(--c); color: var(--tx); font-weight: 700;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 35%, transparent); }
.btn.azul:hover, .btn.turquesa:hover, .btn.morado:hover, .btn.rosa:hover, .btn.ambar:hover, .btn.verde:hover, .btn.peligro:hover {
  filter: brightness(1.08); border-color: var(--c); }
.btn.azul { --c: var(--c-azul); --tx: var(--tx-azul); }
.btn.turquesa { --c: var(--c-turquesa); --tx: var(--tx-turquesa); }
.btn.morado { --c: var(--c-morado); --tx: var(--tx-morado); }
.btn.rosa { --c: var(--c-rosa); --tx: var(--tx-rosa); }
.btn.ambar { --c: var(--c-ambar); --tx: var(--tx-ambar); }
.btn.verde { --c: var(--verde); --tx: var(--tx-verde); }
.btn.peligro { --c: var(--rojo); --tx: var(--tx-rojo); }
.btn.chico { padding: 5px 9px; font-size: 13px; }
.btn svg { width: 18px; height: 18px; }

/* ---------- Selector de tema ---------- */
.selector-tema { position: relative; display: inline-block; }
.selector-tema.flotante { position: fixed; top: 12px; right: 12px; z-index: 30; }
.boton-tema { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); background: var(--tarjeta);
  color: var(--texto); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra); padding: 0; }
.boton-tema svg { width: 20px; height: 20px; }
.menu-temas { position: absolute; right: 0; top: calc(100% + 8px); background: var(--tarjeta-2); border: 1px solid var(--linea);
  border-radius: 14px; padding: 6px; min-width: 200px; box-shadow: var(--sombra); display: none; z-index: 40; }
.menu-temas.abierto { display: block; }
.menu-temas button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent;
  border-radius: 10px; cursor: pointer; color: var(--texto); font-weight: 600; text-align: left; }
.menu-temas button:hover { background: var(--naranja-suave); }
.menu-temas button.actual { outline: 2px solid var(--naranja); }
.muestra { width: 34px; height: 22px; border-radius: 6px; flex: none; border: 1px solid rgba(128,128,128,.35); }
.menu-temas .sep { height: 1px; background: var(--linea); margin: 4px 6px; }


/* ---------- Avatar con iniciales ---------- */
.avatar { flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fuente-titulo); font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  box-shadow: 0 0 0 2px var(--tarjeta), 0 0 0 4px color-mix(in srgb, currentColor 0%, var(--linea)); }
.eliminado .avatar, .avatar.apagado { filter: grayscale(1) brightness(.85); }

/* ---------- Barra de avance ---------- */
.avance { height: 10px; border-radius: 999px; background: var(--fondo-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--linea); }
.avance > span { display: block; height: 100%; border-radius: 999px; background: var(--grad-primario); transition: width .8s ease; }

/* Atardecer: el texto que va directo sobre el fondo naranja lleva una sombra
   ligera para leerse igual de bien en la parte naranja y en la parte negra */
[data-tema="atardecer"] :is(#nombre, #subtitulo, .seccion-titulo, .estado-torneo .lin, .siguen, .cabeza h1, .cabeza .datos, .pagina > h2, main > h3, main h2, .encabezado, details.ronda > summary) {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* Claro 2: lo que va arriba, sobre el naranja (logo, titulo, datos del torneo),
   va en blanco con sombra calida; lo de abajo, sobre lo claro, en naranja oscuro */
[data-tema="claro2"] :is(#nombre, #subtitulo, #subtitulo b, .cabeza h1, .cabeza .datos, .cabeza .datos b, main > .encabezado h2, main > .encabezado > div > div) {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(130, 50, 0, .45);
}
[data-tema="claro2"] .barra { background: linear-gradient(90deg, #ff7a00, #ff9a1f); border-bottom-color: #f08a1a; }
[data-tema="claro2"] .barra .tit { color: #ffffff; text-shadow: 0 1px 3px rgba(130, 50, 0, .45); }