/* ============================================================
   VVC3 - VALEAGUE VALORANT CROWN 3
   ============================================================ */

:root {
  /* --- fondo: negro neutro, sin el tinte azul de antes --- */
  --fondo: #0a0a0c;
  --fondo-2: #141316;
  --panel: #17161a;
  --panel-2: #201e24;
  --borde: #343139;
  --texto: #f2ede3;
  --texto-2: #9b958b;

  /* --- color de destaque: dorado --- */
  --acento: #f5b921;
  --acento-osc: #d49c0c;
  --acento-rgb: 245,185,33;
  --sobre-acento: #15120a;       /* texto sobre fondo dorado */

  /* --- rojo: reservado solo para errores y acciones destructivas --- */
  --peligro: #ff4655;

  --cian: #2fd9c3;
  --oro: #ffd87a;
  --plata: #cdd7e0;
  --bronce: #d49a6a;
  --verde: #4ade80;
  --radio: 10px;
  --sombra: 0 6px 24px rgba(0,0,0,.45);
  --brillo: #2a2213;
  --cabecera-1: #111013;
  --cabecera-2: rgba(17,16,19,.85);
  --tinte-fila: rgba(var(--acento-rgb), .08);
  --panel-rgb: 23,22,26;
}

/* ---------- MODO CLARO ---------- */
:root[data-tema="claro"] {
  --fondo: #f4f2ed;
  --fondo-2: #ffffff;
  --panel: #ffffff;
  --panel-2: #ecebe5;
  --borde: #d9d4c9;
  --texto: #1d1a14;
  --texto-2: #6b655a;

  --acento: #a87900;             /* dorado oscuro, legible sobre blanco */
  --acento-osc: #8a6300;
  --acento-rgb: 168,121,0;
  --sobre-acento: #ffffff;

  --peligro: #c62330;

  --cian: #0b8f81;
  --oro: #9a6f0a;
  --plata: #7a8795;
  --bronce: #a8632d;
  --verde: #1f9c53;
  --sombra: 0 4px 16px rgba(29,26,20,.12);
  --brillo: #eae2d1;
  --cabecera-1: #ffffff;
  --cabecera-2: rgba(255,255,255,.92);
  --tinte-fila: rgba(var(--acento-rgb), .09);
  --panel-rgb: 255,255,255;
}
:root[data-tema="claro"] .rol-Duelista { color: #c4383c; }
:root[data-tema="claro"] .rol-Iniciador { color: #1f6ea8; }
:root[data-tema="claro"] .rol-Controlador { color: #7340b8; }
:root[data-tema="claro"] .rol-Centinela { color: #1d7d45; }
:root[data-tema="claro"] .av { color: #fff; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 90px; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--brillo) 0%, transparent 60%),
    var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-weight: 800; letter-spacing: .5px; margin: 0 0 .6rem; }
h1 { font-size: 1.7rem; text-transform: uppercase; }
h2 { font-size: 1.2rem; text-transform: uppercase; color: var(--texto); }
h3 { font-size: 1rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: 1px; }

/* ---------- CABECERA ---------- */
.cabecera {
  background: linear-gradient(180deg, var(--cabecera-1) 0%, var(--cabecera-2) 100%);
  border-bottom: 2px solid var(--acento);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
}
.cabecera-int {
  max-width: 1250px; margin: 0 auto; padding: .7rem 1rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.logo {
  font-weight: 900; font-size: 1.05rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--texto); white-space: nowrap;
}
.logo span { color: var(--acento); }
.nav { display: flex; gap: .3rem; flex-wrap: wrap; flex: 1; }
.nav a {
  color: var(--texto-2); text-decoration: none; padding: .45rem .8rem;
  border-radius: 6px; font-weight: 600; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .5px; transition: .15s;
}
.nav a:hover { background: var(--panel-2); color: var(--texto); text-decoration: none; }
.nav a.activo { background: var(--acento); color: var(--sobre-acento); }
.nav a.admin { border: 1px solid var(--borde); }

/* ---------- LAYOUT ---------- */
.contenedor { max-width: 1250px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.cinta { color: var(--texto-2); font-size: .85rem; margin-bottom: 1.2rem; }

.panel {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.1rem; margin-bottom: 1.2rem;
  box-shadow: var(--sombra);
}
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }

.rejilla { display: grid; gap: 1.2rem; }
.rejilla.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- TABLAS ---------- */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
  text-align: left; padding: .55rem .6rem; color: var(--texto-2);
  font-size: .72rem; text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 1px solid var(--borde); white-space: nowrap; font-weight: 700;
}
th.orden { cursor: pointer; user-select: none; }
th.orden:hover { color: var(--texto); }
th.orden.activo { color: var(--acento); }
td { padding: .5rem .6rem; border-bottom: 1px solid rgba(38,56,74,.5); }
tbody tr:hover { background-color: var(--tinte-fila); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-scroll { overflow-x: auto; }

.pos { font-weight: 900; width: 2.2rem; text-align: center; color: var(--texto-2); }
tr.p1 .pos { color: var(--oro); }
tr.p2 .pos { color: var(--plata); }
tr.p3 .pos { color: var(--bronce); }
tr.p1 { background: linear-gradient(90deg, rgba(var(--acento-rgb), .14), transparent 45%); }
tr.p2 { background: linear-gradient(90deg, rgba(205,215,224,.07), transparent 40%); }
tr.p3 { background: linear-gradient(90deg, rgba(212,154,106,.08), transparent 40%); }

/* ---------- JUGADOR ---------- */
.jug { display: flex; align-items: center; gap: .6rem; }
.av {
  position: relative;
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 800; font-size: .8rem;
  color: #0b1117; background: #555; overflow: hidden;
  border: 2px solid rgba(255,255,255,.12);
}
/* la foto tapa las iniciales; si falla al cargar se retira y vuelven a verse */
.av img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; display: block;
}
.av.g { width: 56px; height: 56px; font-size: 1.2rem; }
.av.xl { width: 84px; height: 84px; font-size: 1.8rem; }
.jug-nom { font-weight: 700; }
.jug-sub { font-size: .75rem; color: var(--texto-2); }

/* ---------- PASTILLAS ---------- */
.pill {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  background: var(--panel-2); color: var(--texto-2); border: 1px solid var(--borde);
}
.pill.rojo, .pill.acento { background: rgba(var(--acento-rgb), .16); color: var(--acento); border-color: rgba(var(--acento-rgb), .45); }
.pill.peligro { background: rgba(255,70,85,.15); color: var(--peligro); border-color: rgba(255,70,85,.4); }
.pill.verde { background: rgba(74,222,128,.15); color: var(--verde); border-color: rgba(74,222,128,.35); }
.pill.cian { background: rgba(0,224,199,.14); color: var(--cian); border-color: rgba(0,224,199,.3); }
.pill.oro { background: rgba(255,206,92,.15); color: var(--oro); border-color: rgba(255,206,92,.35); }

.rol-Duelista { color: #ff7a7a; }
.rol-Iniciador { color: #7fd4ff; }
.rol-Controlador { color: #c79bff; }
.rol-Centinela { color: #8fe3a8; }

/* ---------- TARJETAS / KPI ---------- */
.kpi {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: .9rem 1rem; text-align: center;
}
.kpi .v { font-size: 1.7rem; font-weight: 900; color: var(--texto); line-height: 1.1; }
.kpi .e { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-2); margin-top: .2rem; }
.kpi.destacado .v { color: var(--acento); }

.tarjeta-top {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: .9rem; display: flex; align-items: center; gap: .8rem;
}
.tarjeta-top .cifra { margin-left: auto; font-size: 1.4rem; font-weight: 900; color: var(--acento); }

/* ---------- BARRAS ---------- */
.barra { background: var(--panel-2); border-radius: 4px; height: 8px; overflow: hidden; min-width: 60px; }
.barra > i { display: block; height: 100%; background: var(--acento); border-radius: 4px; }
.barra.cian > i { background: var(--cian); }
.barra.verde > i { background: var(--verde); }
.barra.oro > i { background: var(--oro); }

/* ---------- FORMULARIOS ---------- */
label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .6px;
        color: var(--texto-2); margin-bottom: .25rem; font-weight: 700; }
input, select, textarea {
  width: 100%; background: var(--fondo-2); border: 1px solid var(--borde);
  color: var(--texto); padding: .5rem .6rem; border-radius: 6px;
  font-family: inherit; font-size: .9rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); }
input[type=checkbox] { width: auto; accent-color: var(--acento); }
.campo { margin-bottom: .8rem; }
.linea { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.linea > * { flex: 1; min-width: 120px; }
.linea > .fijo { flex: 0 0 auto; min-width: 0; }

.btn {
  background: var(--acento); color: var(--sobre-acento); border: none; padding: .55rem 1rem;
  border-radius: 6px; font-weight: 800; cursor: pointer; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .6px; font-family: inherit; transition: .15s;
}
.btn:hover { background: var(--acento-osc); }
.btn.sec { background: var(--panel-2); color: var(--texto); border: 1px solid var(--borde); }
.btn.sec:hover { background: var(--borde); }
.btn.peligro { background: #7f1d1d; color: #fff; }
.btn.peligro:hover { background: #991b1b; }
.btn.mini { padding: .3rem .55rem; font-size: .7rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.botonera { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- PESTANAS ---------- */
.pestanas { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem;
            border-bottom: 1px solid var(--borde); padding-bottom: .5rem; }
.pestanas button {
  background: transparent; border: 1px solid transparent; color: var(--texto-2);
  padding: .45rem .9rem; border-radius: 6px; cursor: pointer; font-weight: 700;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; font-family: inherit;
}
.pestanas button:hover { color: var(--texto); background: var(--panel-2); }
.pestanas button.activo { background: var(--acento); color: var(--sobre-acento); }
.tab { display: none; }
.tab.activo { display: block; }

/* ---------- LOGIN ---------- */
.login { max-width: 360px; margin: 6rem auto; text-align: center; }
.login .panel { padding: 2rem; }

/* ---------- EQUIPOS ---------- */
.equipo-a { border-left: 3px solid var(--cian); }
.equipo-b { border-left: 3px solid var(--acento); }
.marcador { display: flex; align-items: center; justify-content: center; gap: 1rem;
            font-size: 2rem; font-weight: 900; }
.marcador .a { color: var(--cian); }
.marcador .b { color: var(--acento); }
.marcador .sep { color: var(--texto-2); font-size: 1.2rem; }

/* ---------- RULETA ---------- */
.ruleta-caja { text-align: center; padding: 1.5rem; }
.ruleta-visor {
  position: relative; overflow: hidden;
  font-size: 2.2rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
  padding: 1.5rem; border: 2px dashed var(--borde); border-radius: var(--radio);
  margin-bottom: 1rem; color: var(--texto);
  aspect-ratio: 16 / 7; display: grid; place-items: center;
  /* la imagen llena el recuadro recortandose, nunca se estira */
  background-size: cover; background-position: center; background-repeat: no-repeat;
  /* sin transition: background-image no es animable y el cambio llegaria
     con retardo, descuadrando el nombre respecto a la imagen */
}
.ruleta-visor > span { position: relative; z-index: 1; }
.ruleta-visor.con-img::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.62) 100%);
}
.ruleta-visor.con-img { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.9), 0 0 30px rgba(0,0,0,.7); }
.ruleta-visor.girando { border-color: var(--acento); }
.ruleta-visor.girando:not(.con-img) { color: var(--texto-2); }
.ruleta-visor.final { border-style: solid; border-color: var(--acento);
                      box-shadow: 0 0 40px rgba(var(--acento-rgb), .3) inset; }
.ruleta-visor.final:not(.con-img) { color: var(--acento); }

/* ---------- VARIOS ---------- */
.vacio { text-align: center; padding: 3rem 1rem; color: var(--texto-2); }
.aviso { background: rgba(255,206,92,.1); border: 1px solid rgba(255,206,92,.3);
         color: var(--oro); padding: .7rem .9rem; border-radius: 6px; font-size: .85rem; margin-bottom: 1rem; }
.aviso.error { background: rgba(255,70,85,.1); border-color: rgba(255,70,85,.35); color: var(--peligro); }
.aviso.ok { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.3); color: var(--verde); }
.sep { height: 1px; background: var(--borde); margin: 1.2rem 0; border: none; }
.mini { font-size: .78rem; color: var(--texto-2); }
.dcha { text-align: right; }
.centro { text-align: center; }
.mt { margin-top: 1rem; }
.oculto { display: none !important; }

details.jornada { background: var(--panel); border: 1px solid var(--borde);
                  border-radius: var(--radio); margin-bottom: .8rem; overflow: hidden; }
details.jornada > summary {
  padding: .9rem 1.1rem; cursor: pointer; display: flex; align-items: center;
  gap: .8rem; flex-wrap: wrap; font-weight: 700; list-style: none;
}
details.jornada > summary::-webkit-details-marker { display: none; }
details.jornada > summary:hover { background: var(--panel-2); }
details.jornada[open] > summary { border-bottom: 1px solid var(--borde); background: var(--panel-2); }
details.jornada .cuerpo { padding: 1.1rem; }

.toast {
  position: fixed; bottom: 1.2rem; right: 1.2rem; background: var(--panel-2);
  border: 1px solid var(--acento); color: var(--texto); padding: .7rem 1.1rem;
  border-radius: 8px; box-shadow: var(--sombra); z-index: 999; font-size: .88rem;
  animation: entra .25s ease;
}
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 680px) {
  /* en movil la cabecera se apila: logo, navegacion y acciones,
     cada cosa en su fila y a lo ancho */
  .cabecera-int { flex-direction: column; align-items: stretch; gap: .5rem; padding: .55rem .7rem; }
  .logo { text-align: center; font-size: .92rem; letter-spacing: 1.5px; }
  .nav { justify-content: center; gap: .25rem; flex: none; }
  .nav a { padding: .3rem .5rem; font-size: .7rem; letter-spacing: .3px; }
  .btn-editor { padding: .4rem .7rem; font-size: .72rem; }
  .btn-tema { width: 32px; height: 32px; }

  h1 { font-size: 1.3rem; }
  .contenedor { padding: 1rem .7rem 3rem; }

  /* los indicadores de dos en dos, en vez de uno por fila */
  .rejilla.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .rejilla.c3, .rejilla.c2 { gap: .8rem; }
  .kpi { padding: .7rem .5rem; }
  .kpi .v { font-size: 1.35rem; }
  .kpi .e { font-size: .62rem; letter-spacing: .5px; }
  .kpi-persona, .kpi-agente { flex-direction: column; text-align: center; gap: .45rem; }
  .kpi-persona .v, .kpi-agente .v { font-size: 1rem; }

  /* las tablas anchas se deslizan con el dedo */
  .tabla-scroll { -webkit-overflow-scrolling: touch; }
  th, td { padding: .45rem .4rem; }
}

/* ---------- BOTON EDITOR DE LA CABECERA ---------- */
.btn-editor {
  flex: 0 0 auto; padding: .45rem .9rem; border: 1px solid var(--borde);
  border-radius: 6px; font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--texto-2); text-decoration: none; white-space: nowrap;
  transition: .15s;
}
.btn-editor:hover { border-color: var(--acento); color: var(--texto); text-decoration: none; }
.btn-editor.activo { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }

/* ============================================================
   ACCIONES DE LA CABECERA: buscador, tema y editor
   ============================================================ */
.acciones { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

/* ---------- BUSCADOR ---------- */
.buscador { position: relative; }
.buscador .caja {
  display: flex; align-items: center; gap: .45rem;
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: .3rem .6rem .3rem .75rem; transition: .18s;
  width: 210px;
}
.buscador .caja:focus-within { border-color: var(--acento); width: 290px; box-shadow: 0 0 0 3px rgba(var(--acento-rgb), .18); }
.buscador .lupa { width: 15px; height: 15px; flex: 0 0 auto; stroke: var(--texto-2); fill: none; stroke-width: 2.2; }
.buscador .caja:focus-within .lupa { stroke: var(--acento); }
.buscador input {
  border: none; background: transparent; padding: .15rem 0; font-size: .85rem;
  color: var(--texto); width: 100%;
}
.buscador input:focus { outline: none; border: none; }
.buscador input::placeholder { color: var(--texto-2); }
.buscador kbd {
  font-size: .62rem; font-family: inherit; color: var(--texto-2); border: 1px solid var(--borde);
  border-radius: 4px; padding: .05rem .3rem; flex: 0 0 auto; background: var(--panel-2);
}
.buscador .caja:focus-within kbd { display: none; }

.resultados {
  position: absolute; top: calc(100% + .45rem); right: 0; width: 330px; max-height: 65vh;
  overflow-y: auto; background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: var(--sombra); z-index: 200; padding: .35rem;
}
.resultados:empty, .resultados.oculto { display: none; }
.resultados .grupo {
  font-size: .62rem; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 800;
  color: var(--texto-2); padding: .5rem .6rem .25rem;
}
.resultados a.res {
  display: flex; align-items: center; gap: .55rem; padding: .42rem .6rem;
  border-radius: 7px; color: var(--texto); text-decoration: none; font-size: .86rem;
}
.resultados a.res:hover, .resultados a.res.sel { background: var(--acento); color: var(--sobre-acento); text-decoration: none; }
.resultados a.res:hover .res-extra, .resultados a.res.sel .res-extra { color: rgba(0,0,0,.6); }
.resultados a.res .res-nom { font-weight: 600; }
.resultados a.res .res-nom mark { background: rgba(var(--acento-rgb), .3); color: inherit; border-radius: 3px; padding: 0 1px; }
.resultados a.res.sel .res-nom mark { background: rgba(0,0,0,.18); }
.resultados .res-extra { margin-left: auto; font-size: .7rem; color: var(--texto-2); white-space: nowrap; }
.resultados .res-ico {
  width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; display: grid; place-items: center;
  font-size: .62rem; font-weight: 900; background: var(--panel-2); color: var(--texto-2);
}
.resultados a.res.sel .res-ico { background: rgba(0,0,0,.15); color: var(--sobre-acento); }
.resultados .sin-res { padding: .9rem .6rem; color: var(--texto-2); font-size: .85rem; text-align: center; }

/* ---------- BOTON DE TEMA ---------- */
.btn-tema {
  width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 50%;
  cursor: pointer; color: var(--texto-2); padding: 0; transition: .18s;
}
.btn-tema:hover { border-color: var(--acento); color: var(--acento); }
.btn-tema svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn-tema .ico-luna { display: none; }
:root[data-tema="claro"] .btn-tema .ico-luna { display: block; }
:root[data-tema="claro"] .btn-tema .ico-sol { display: none; }

/* ---------- RESALTADO AL LLEGAR DESDE EL BUSCADOR ---------- */
@keyframes destacar {
  0%, 55% { background-color: rgba(var(--acento-rgb), .3); }
  100% { background-color: transparent; }
}
tr:target > td, details.jornada:target > summary, .panel:target, .kpi:target {
  animation: destacar 2.2s ease-out;
}
.panel:target, details.jornada:target { border-color: var(--acento); }

@media (max-width: 900px) {
  .acciones { width: 100%; margin-left: 0; }
  .buscador { flex: 1; }
  .buscador .caja, .buscador .caja:focus-within { width: 100%; }
  .resultados { width: 100%; }
}

/* ============================================================
   PORTADA DE LA CLASIFICACION
   ============================================================ */
.portada {
  margin: 0 0 .9rem;
  display: flex;
  justify-content: center;
}
.portada img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--acento-rgb), .25);
}
:root[data-tema="claro"] .portada img {
  box-shadow: 0 8px 26px rgba(29,26,20,.18), 0 0 0 1px rgba(var(--acento-rgb), .3);
}
.portada h1 { text-align: center; width: 100%; }

@media (max-width: 680px) {
  .portada { margin-bottom: .7rem; }
  .portada img { border-radius: 8px; }
}

/* ---------- SELECTOR DE EQUIPO EN EL EDITOR ---------- */
.sel-equipo { min-width: 62px; text-align: center; font-weight: 800; }

/* ---------- LEYENDA DE COLUMNAS ---------- */
.leyenda {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
  font-size: .76rem; color: var(--texto-2);
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: 8px; padding: .6rem .8rem; margin: .2rem 0 .6rem;
}
.leyenda b { color: var(--texto); font-weight: 800; letter-spacing: .4px; }
.leyenda i { font-style: normal; color: var(--verde); }

/* ============================================================
   TARJETAS DE MAPA (pool)
   Todas con la misma forma y tamano: la imagen se recorta
   con `cover`, asi que nunca se deforma aunque los archivos
   tengan proporciones distintas.
   ============================================================ */
.mapa-card {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--panel) center / cover no-repeat;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mapa-card:hover { transform: translateY(-3px); border-color: var(--acento);
                   box-shadow: 0 10px 26px rgba(0,0,0,.45); }
/* velo oscuro para que el nombre y las etiquetas se lean sobre cualquier mapa */
.mapa-card.con-img::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.82) 100%);
}
.mapa-card-int { position: relative; z-index: 1; padding: .7rem .8rem; width: 100%; }
.mapa-card.con-img .mapa-nom,
.mapa-card.con-img .mapa-sub { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.95); }
.mapa-nom {
  font-weight: 900; font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--texto); line-height: 1.1;
}
.mapa-sub { font-size: .74rem; color: var(--texto-2); margin: .1rem 0 .4rem; }
.mapa-card.con-img .pill { backdrop-filter: blur(3px); }
/* un mapa ya jugado se ve apagado, para distinguirlo de un vistazo */
.mapa-card.jugado { filter: saturate(.55) brightness(.85); border-color: var(--acento); }
.mapa-card.jugado:hover { filter: none; }

/* ============================================================
   BANDA DEL MARCADOR CON EL MAPA DE FONDO (jornadas normales)
   `cover` escala la imagen hasta llenar la banda y recorta lo
   que sobra: hay zoom, pero nunca deformacion.
   ============================================================ */
.banda-mapa {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  margin-bottom: 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel-2) center / cover no-repeat;
  display: grid;
  place-items: center;
}
.banda-mapa.con-img::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.78) 100%);
}
.banda-int { position: relative; z-index: 1; width: 100%; padding: 1.2rem 1rem; text-align: center; }
.banda-notas {
  margin: 0 0 .5rem; font-size: .85rem; font-style: italic;
  color: var(--texto-2); opacity: .95;
}
.banda-sub { margin: .35rem 0 0; font-size: .82rem; color: var(--texto-2); }
.banda-mapa.con-img .banda-notas,
.banda-mapa.con-img .banda-sub,
.banda-mapa.con-img .marcador .sep { color: #d9d3c7; }
.banda-mapa.con-img .banda-int * { text-shadow: 0 2px 10px rgba(0,0,0,.95); }
.banda-mapa.con-img .marcador .a,
.banda-mapa.con-img .marcador .b { filter: brightness(1.15); }
.banda-mapa .marcador { margin: 0; }

@media (max-width: 680px) {
  .banda-mapa { min-height: 140px; }
  .banda-int { padding: 1rem .7rem; }
}

/* ============================================================
   FILAS DE LA TABLA DE MAPAS CON LA IMAGEN AL FONDO
   La imagen ocupa una franja a la izquierda (nombre + estado) y
   se desvanece con un degradado hacia el color del panel antes
   de llegar a la columna de la barra.
   ============================================================ */
tr.fila-mapa {
  /* la imagen y su degradado se inyectan en linea desde mapas.html */
  background-repeat: no-repeat, no-repeat;
  /* ambas capas ocupan la misma franja de 300px. La imagen va a
     "300px auto": ancho fijo y alto proporcional, asi que se recorta
     por arriba y por abajo pero nunca se deforma */
  background-size: 300px 100%, 300px auto;
  background-position: left center, left center;
}
tr.fila-mapa > td:first-child,
tr.fila-mapa > td:nth-child(2) { text-shadow: 0 1px 5px rgba(0,0,0,.85); }
:root[data-tema="claro"] tr.fila-mapa > td:first-child,
:root[data-tema="claro"] tr.fila-mapa > td:nth-child(2) { text-shadow: 0 1px 5px rgba(255,255,255,.9); }
tr.fila-mapa:hover { background-color: var(--tinte-fila); }

/* ---------- RETRATO DE AGENTE ---------- */
.ag-ico {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 11px; overflow: hidden; display: block;
  /* `isolation` deja que la mezcla del retrato ocurra solo dentro de
     este marco y no se funda con el fondo oscuro de la pagina */
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.ag-ico img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center top;
  /* los PNG traen fondo blanco: al multiplicar, el blanco toma el color
     pastel del marco y el dibujo del agente se conserva */
  mix-blend-mode: multiply;
}
.ag-ico.g { width: 54px; height: 54px; border-radius: 14px; }
.ag-ico-txt {
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 900; color: #3a3a46;
}
td:has(> .ag-ico) { width: 50px; padding-right: .2rem; }

/* tarjeta con retrato a la izquierda y texto a su derecha */
.kpi-persona {
  display: flex; align-items: center; gap: .85rem;
  text-align: left; padding: 1.15rem .9rem .85rem;   /* hueco arriba para la corona */
  text-decoration: none; color: inherit;
}
.kpi-persona:hover { border-color: var(--acento); text-decoration: none; }
.kpi-persona .v { font-size: 1.25rem; line-height: 1.15; }
.kpi-persona .e { margin-top: .15rem; }

.kpi-agente {
  display: flex; align-items: center; gap: .85rem;
  text-align: left; padding: .8rem .9rem;
}
.kpi-agente .v { font-size: 1.2rem; line-height: 1.15; }
.kpi-agente .e { margin-top: .15rem; }

/* ---------- CASILLA DE VERIFICACION CON ETIQUETA ---------- */
.casilla {
  display: inline-flex; align-items: center; gap: .5rem;
  text-transform: none; letter-spacing: 0; font-size: .9rem;
  color: var(--texto); font-weight: 600; cursor: pointer;
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: 8px; padding: .5rem .8rem; margin-bottom: .5rem;
}
.casilla:hover { border-color: var(--acento); }
.casilla input { width: auto; margin: 0; }

/* ============================================================
   BANDA DE NOVEDADES DE LA PORTADA
   El desplazamiento lo lleva el JavaScript (index.html), no una
   animacion de CSS: asi se mueve aunque el sistema tenga las
   animaciones desactivadas.
   ============================================================ */
.banda-noticias {
  display: flex; align-items: stretch; overflow: hidden;
  border: 1px solid rgba(var(--acento-rgb), .55);
  border-radius: var(--radio);
  background: linear-gradient(90deg, rgba(var(--acento-rgb), .13) 0%, var(--panel) 28%, var(--panel) 100%);
  box-shadow: 0 0 22px rgba(var(--acento-rgb), .14);
  margin-bottom: .9rem;
}
.banda-etiqueta {
  flex: 0 0 auto; display: grid; place-items: center;
  padding: .6rem 1.1rem;
  background: linear-gradient(135deg, #ffd34d 0%, var(--acento) 45%, #ff8a1f 100%);
  color: #1a1304;
  font-weight: 900; font-size: .73rem; text-transform: uppercase; letter-spacing: 2px;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 0 18px rgba(var(--acento-rgb), .45);
  position: relative; z-index: 2;
}
.banda-pista {
  flex: 1; overflow: hidden; display: flex; align-items: center;
  position: relative; white-space: nowrap; min-width: 0;
}
/* difuminado en los extremos, para que el texto entre y salga suave */
.banda-pista::before, .banda-pista::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42px; z-index: 1; pointer-events: none;
}
.banda-pista::before { left: 0; background: linear-gradient(90deg, var(--panel), transparent); }
.banda-pista::after { right: 0; background: linear-gradient(270deg, var(--panel), transparent); }
.banda-carro { display: flex; flex: 0 0 auto; will-change: transform; }
.banda-tira {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding-right: 2.5rem; gap: 2.5rem;
}
.noticia {
  color: var(--texto); text-decoration: none; font-size: .86rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 0;
}
.noticia:hover { color: var(--acento); text-decoration: none; }
.noticia-ico { color: var(--acento); font-size: .7rem; }
.noticia-sep { color: var(--texto-2); opacity: .5; }

/* ============================================================
   PROXIMA JORNADA Y ESPECULACION
   ============================================================ */
.proxima-jornada { border-color: var(--acento); }
.proxima-jornada .equipo-a, .proxima-jornada .equipo-b { background: var(--fondo-2); }
.esp-fecha { color: var(--acento); }

.especulacion { margin-top: 1rem; }
.esp-cab {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .45rem;
  font-size: .74rem; text-transform: uppercase; letter-spacing: 1px;
  font-weight: 800; color: var(--texto-2);
}
.esp-cab .mini { text-transform: none; letter-spacing: 0; font-weight: 400; }
.esp-barra {
  display: flex; height: 30px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--borde); background: var(--panel-2);
}
.esp-barra > div {
  display: grid; place-items: center; font-weight: 900; font-size: .85rem;
  transition: width .5s ease; min-width: 0; overflow: hidden;
}
.esp-a { background: var(--cian); color: #06201d; }
.esp-b { background: var(--acento); color: var(--sobre-acento); }
.esp-pie {
  display: flex; justify-content: space-between; margin-top: .3rem;
  font-size: .78rem; font-weight: 700;
}
.esp-nom-a { color: var(--cian); }
.esp-nom-b { color: var(--acento); }

/* ---------- CORONA DEL LIDER SOBRE EL AVATAR ---------- */
.con-corona { position: relative; display: inline-block; flex: 0 0 auto; }
.con-corona::after {
  content: '👑';
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%) rotate(-14deg);
  font-size: 1.05rem; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  pointer-events: none;
}
.kpi-persona:hover .con-corona::after { transform: translateX(-50%) rotate(-14deg) scale(1.15); }
.con-corona::after { transition: transform .2s ease; }