/* ==========================================================================
   ALEXANDRIA - LA CLASIFICACION TIENE SU PROPIO COLOR
   ==========================================================================
   Este archivo SOLO se carga en la pagina de clasificaciones.
   Al salir, se carga la web normal y todo vuelve a como estaba.

   Tema: FUEGO de Cataclysm.
   Los colores estan sacados de la miniatura del video del usuario:
      color medio   #68361c
      dominantes    #200000  #402000  #804020  #c06020
   ========================================================================== */

:root {
  --fuego:         #ff8a3d;
  --fuego-claro:   #ffc08a;
  --fuego-oscuro:  #a03c10;
  --brasa:         #c06020;
}

/* ------------------- EL VIDEO DE FONDO ------------------- */
.clasi-video-fondo {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: #0a0503;
}
.clasi-video-fondo iframe,
.clasi-video-fondo video {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%) scale(1.45);
  border: 0;
  pointer-events: none !important;
  filter: brightness(1.18) saturate(1.2) contrast(1.05);
}
.clasi-video-velo {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(160,60,16,.20), transparent 65%),
    linear-gradient(180deg, rgba(10,5,3,.55) 0%, rgba(10,5,3,.66) 45%, rgba(10,5,3,.86) 100%);
}

/* ------------------- LOS COLORES: FUEGO ------------------- */
body { background: transparent !important; }
body::before { display: none !important; }
body::after  { display: none !important; }

/* La cabecera */
.cabecera {
  background: linear-gradient(180deg, rgba(24,10,4,.96), rgba(12,5,2,.93)) !important;
  border-bottom: 1px solid rgba(255,138,61,.45) !important;
  box-shadow: 0 6px 30px rgba(0,0,0,.7), 0 1px 0 rgba(255,138,61,.25) !important;
}
.marca-texto strong {
  color: #ffa860 !important;
  text-shadow: 0 0 16px rgba(255,138,61,.45) !important;
}
.navegacion a { color: #e0a880 !important; }
.navegacion a:hover { color: #fff !important; background: rgba(255,138,61,.14) !important; }
.navegacion a.activo { color: #ffc08a !important; text-shadow: 0 0 12px rgba(255,138,61,.5) !important; }

/* Los botones */
.boton-principal {
  background: linear-gradient(180deg, #ffdcb8 0%, #ffb877 30%, #ff8a3d 62%, #d45a12 100%) !important;
  border-color: #ffe6cc !important;
  color: #2a0f02 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 0 16px rgba(255,138,61,.5), 0 6px 22px rgba(160,60,16,.45) !important;
}
.boton-secundario { border-color: rgba(255,138,61,.45) !important; color: #ffc08a !important; }
.boton-secundario:hover { background: rgba(255,138,61,.13) !important; border-color: #ff8a3d !important; }

/* Los titulos */
h1, h2, h3 { color: #fff2e6 !important; }
.titulo-seccion::after {
  background: linear-gradient(90deg, #ff8a3d, rgba(255,138,61,0)) !important;
  box-shadow: 0 0 14px rgba(255,138,61,.55) !important;
}
p { color: #ecd9cb !important; }
.nota, .subtitulo { color: #c0a08a !important; }

/* La tabla de clasificacion */
.tabla-clasificacion, table {
  background: linear-gradient(180deg, rgba(26,12,5,.88), rgba(14,6,2,.92)) !important;
  border-color: rgba(255,138,61,.30) !important;
}
.tabla-clasificacion th, table th {
  background: linear-gradient(180deg, rgba(60,26,8,.95), rgba(36,15,5,.95)) !important;
  color: #ffc08a !important;
  border-bottom-color: rgba(255,138,61,.4) !important;
}
.tabla-clasificacion td, table td { border-bottom-color: rgba(255,138,61,.14) !important; color: #f0e0d4 !important; }
.tabla-clasificacion tr:hover, table tr:hover { background: rgba(255,138,61,.09) !important; }

/* Las tarjetas y el resto */
.tarjeta, .grupoTemas, .ventanaCuentaCaja {
  background: linear-gradient(180deg, rgba(26,12,5,.82), rgba(14,6,2,.88)) !important;
  border-color: rgba(255,138,61,.28) !important;
}
.tarjeta::before { background: linear-gradient(90deg, transparent, #ff8a3d, transparent) !important; }
.tarjeta:hover {
  border-color: rgba(255,138,61,.8) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 22px rgba(255,138,61,.22) !important;
}
.tarjeta::after {
  background-image:
    linear-gradient(135deg, rgba(255,220,184,.9) 0 2px, transparent 2px),
    linear-gradient(45deg,  rgba(255,220,184,.9) 0 2px, transparent 2px),
    linear-gradient(315deg, rgba(255,220,184,.9) 0 2px, transparent 2px),
    linear-gradient(225deg, rgba(255,220,184,.9) 0 2px, transparent 2px) !important;
}

/* Los enlaces y las pestanas */
a { color: #ff9a52 !important; }
a:hover { color: #ffc08a !important; }
.pestanaClasificacion, .filtro { border-color: rgba(255,138,61,.35) !important; color: #d9b090 !important; }
.pestanaClasificacion:hover, .filtro:hover { border-color: #ff8a3d !important; color: #fff !important; }
.pestanaClasificacion.activa, .filtro.activo {
  background: linear-gradient(180deg, #ffdcb8, #ff8a3d) !important;
  border-color: #ffe6cc !important;
  color: #2a0f02 !important;
  box-shadow: 0 0 16px rgba(255,138,61,.45) !important;
}

/* El pie */
.pie {
  background: linear-gradient(180deg, rgba(14,6,2,.92), rgba(8,3,1,.96)) !important;
  border-top: 1px solid rgba(255,138,61,.28) !important;
}
.pie h4 { color: #ff9a52 !important; }
.pie a { color: #c0a08a !important; }
.pie a:hover { color: #ff8a3d !important; }

.aviso { border-left-color: #ff8a3d !important; background: rgba(255,138,61,.08) !important; }
code { color: #ffb877 !important; }

/* La caja del reproductor (por si la API de YouTube no carga) */
.clasi-video-fondo .yt-caja,
.clasi-video-fondo .yt-caja iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%) scale(1.45);
  border: 0;
  pointer-events: none !important;
  filter: brightness(1.18) saturate(1.2);
}
/* ==========================================================================
   QUE EL DRAGON SE VEA BIEN
   ==========================================================================
   Antes el video estaba muy ampliado (x1.45) y con una capa oscura encima:
   el dragon casi no se veia.

   Ahora:
     - Menos ampliacion (x1.08): se ve TODO el encuadre  ✓
     - Menos capa oscura: el video luce  ✓
     - Mas color y contraste: el fuego resalta  ✓
   ========================================================================== */
.clasi-video-fondo iframe,
.clasi-video-fondo video,
.clasi-video-fondo .yt-caja,
.clasi-video-fondo .yt-caja iframe {
  transform: translate(-50%, -50%) scale(1.08) !important;
  filter: brightness(1.22) saturate(1.35) contrast(1.08) !important;
}

.clasi-video-velo {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(255,120,40,.06), transparent 60%),
    linear-gradient(180deg,
      rgba(10,5,3,.30) 0%,
      rgba(10,5,3,.40) 40%,
      rgba(10,5,3,.62) 75%,
      rgba(10,5,3,.85) 100%) !important;
}

/* El titulo y el texto, con sombra fuerte para que se lean sobre el video claro */
h1, h2, h3, .titulo-seccion, p, .nota {
  text-shadow: 0 2px 14px rgba(0,0,0,1), 0 0 40px rgba(0,0,0,.9) !important;
}
/* El video de verdad (MP4): sin botones, sin controles */
.clasi-video-fondo video {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%) scale(1.02) !important;
  object-fit: cover;
  border: 0;
  pointer-events: none !important;
  filter: brightness(1.20) saturate(1.30) contrast(1.06) !important;
}