/* League of Legends: navy Hextech + dorado, marco fino y muesca de gema. */
:root[data-estilo="lol"] {
  --acento-2: #0ac8b9;
  --radio: 8px;
  --radio-chico: 5px;
}
:root[data-estilo="lol"][data-tema="claro"] {
  --verde: #c89b3c;
  --verde-claro: #e0b563;
  --gris-100: #f0ede4;
  --gris-200: #e2d9c4;
  --superficie: #ffffff;
  --superficie-alta: #f3ecda;
  --texto: #0a1428;
  --borde-tarjeta: 1px solid #c89b3c;
  --sombra: 0 2px 6px rgba(10, 20, 40, .1), 0 8px 20px rgba(200, 155, 60, .16);
  --sombra-alta: 0 16px 40px rgba(200, 155, 60, .26);
}
:root[data-estilo="lol"][data-tema="oscuro"] {
  --verde: #c89b3c;
  --verde-claro: #f0c266;
  --gris-100: #05070d;
  --gris-200: #1e2328;
  --superficie: #0a1428;
  --superficie-alta: #10192e;
  --texto: #f0e6d2;
  --borde-tarjeta: 1px solid #3c3423;
  --sombra: 0 2px 8px rgba(0, 0, 0, .5), 0 0 24px rgba(200, 155, 60, .2);
  --sombra-alta: 0 20px 50px rgba(0, 0, 0, .6);
}
:root[data-estilo="lol"] .card,
:root[data-estilo="lol"] .tarjeta-partido,
:root[data-estilo="lol"] .tarjeta-rivales {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
:root[data-estilo="lol"] header.topbar {
  background-image: none;
  background: linear-gradient(180deg, var(--superficie) 0%, color-mix(in srgb, var(--superficie) 60%, black) 100%);
  color: var(--verde);
  border-bottom: 1px solid var(--verde);
  box-shadow: 0 2px 20px color-mix(in srgb, var(--verde) 25%, transparent);
}
:root[data-estilo="lol"] header.topbar select,
:root[data-estilo="lol"] .boton-gestion { background: var(--superficie-alta); color: var(--verde); border-color: var(--verde); }
:root[data-estilo="lol"] nav.bottomnav { border-top: 1px solid var(--verde); }

/* Iconos de menú propios: la misma muesca en la esquina superior
   derecha que ya usan las tarjetas de este tema, con un detalle
   perforado distinto en cada uno. El de Ajustes es una gema tallada
   con sus facetas — la estética Hextech, sin usar el emblema de Riot
   Games. */
:root[data-estilo="lol"] nav.bottomnav a .icono svg,
:root[data-estilo="lol"] nav.bottomnav a .icono-dbz { display: none; }
:root[data-estilo="lol"] nav.bottomnav a .icono-tematico { display: block; }
/* Títulos "grabados en oro": mismo truco que ya usa Dragon Ball (relleno
   degradado + contorno, sobre la misma Oswald de siempre, sin descargar
   ninguna fuente nueva), en la paleta navy+dorado de este tema en vez
   de naranja — sin la inclinación dinámica de Dragon Ball, aquí más
   quieto y "heráldico". */
:root[data-estilo="lol"] h2.titulo-vista,
:root[data-estilo="lol"] header.topbar h1 {
  background: linear-gradient(180deg, #f0dfa8 0%, #c89b3c 55%, #8a6a24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px #0a1428;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
}
:root[data-estilo="lol"] {
  --icono-tema-jornada: url("../../icons/temas/lol/jornada.svg");
  --icono-tema-clasificacion: url("../../icons/temas/lol/clasificacion.svg");
  --icono-tema-muro: url("../../icons/temas/lol/muro.svg");
  --icono-tema-liga: url("../../icons/temas/lol/liga.svg");
  --icono-tema-ajustes: url("../../icons/temas/lol/ajustes.svg");
}