/* ═══════════════════════════════════════════════════════════════════
   ImperioBet — capa de marca greco-romana (negro + oro)
   ───────────────────────────────────────────────────────────────────
   ESTE ES EL ÚNICO ARCHIVO QUE HAY QUE TOCAR PARA CAMBIAR EL LOOK.
   Se carga al final del <head>, después de style.css / regional.css /
   oct7vfe.css.

   ponytail: se usa !important en casi todo a propósito. El tema base
   declara !important en sus propias reglas y además mete un <style>
   dentro del <body> (fondo de body), que por orden de documento gana
   sobre cualquier hoja del <head>. Sin !important esta capa no pega.

   Paleta tomada del logo (ImperioBetlogo.png):
     oro claro  #E8CF8F   oro imperial #C9A227   oro profundo #8A6A1F
     carmesí    #A81D1D   grafito escudo #26262A  negro #07070A
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --imp-black:      #07070A;
  --imp-panel:      #0E0E12;
  --imp-panel-2:    #15151B;
  --imp-graphite:   #26262A;

  --imp-gold:       #C9A227;
  --imp-gold-lt:    #E8CF8F;
  --imp-gold-pale:  #F0D68A;
  --imp-gold-dk:    #8A6A1F;
  --imp-bronze:     #4A3410;
  --imp-crimson:    #A81D1D;

  --imp-line:       rgba(201, 162, 39, .28);
  --imp-line-soft:  rgba(201, 162, 39, .14);
  --imp-glow:       0 0 18px rgba(201, 162, 39, .22);

  --imp-serif:      'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --imp-display:    'Cinzel Decorative', 'Cinzel', serif;

  /* Meandro (greca) griega, el mismo motivo que bordea el escudo del logo */
  --imp-meandro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M1,11 L1,1 L19,1 L19,9 L5,9 L5,5 L15,5'/%3E%3Cpath d='M21,11 L21,1 L39,1 L39,9 L25,9 L25,5 L35,5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Fondo: negro liso, sin la textura del tema viejo ───────────── */
html body {
  background-image: none !important;
  background-color: var(--imp-black) !important;
}

/* ── Tipografía romana ──────────────────────────────────────────────
   Cinzel son capitales lapidarias romanas: van en títulos, navegación
   y botones. El cuerpo de texto NO se toca — Cinzel en párrafos largos
   y en tablas de saldos es ilegible. */
h1, h2, h3, h4,
.gl-nav-section,
.gl-nav-link,
.provider-button__label,
.gl-novedad-btn,
.footer-copyright,
.section-title,
.modal-base__title,
button.btn, .btn, .button,
.header__logo-link {
  font-family: var(--imp-serif) !important;
  letter-spacing: .06em !important;
}

h1, h2, h3 {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--imp-gold-lt) !important;
}

/* ── Encabezados de sección con greca dorada debajo ───────────────
   Los .section-title son display:flex, sólo tan anchos como su texto, y el
   tema base les fuerza padding:0 desde un selector más específico que "h2".
   Por eso la greca va FUERA de la caja (bottom negativo) y con hueco propio
   vía margin-bottom, en vez de pelear por el padding. */
html body h2.section-title {
  position: relative !important;
  margin-bottom: 26px !important;
  overflow: visible !important;
  /* El h2 es flex y se encoge al ancho de su texto, así que la greca quedaba corta.
     Estirarlo a todo el .section-header es seguro: los 6 headers tienen un solo hijo,
     y el h2 alinea a la izquierda (justify-content: normal), así que el título no se mueve. */
  flex: 1 1 100% !important;
  width: 100% !important;
}
html body .section-header {
  display: flex !important;
}
html body h2.section-title::after {
  content: "" !important;
  position: absolute !important;
  /* left+right en vez de un width fijo: la greca ocupa todo el ancho de la columna de
     contenido. ponytail: no se usa 100vw a propósito — se metería debajo del panel de
     chat y sacaría barra de scroll horizontal. */
  left: 0 !important;
  right: 0 !important;
  bottom: -15px !important;
  width: auto !important;
  max-width: none !important;
  height: 11px !important;
  background-image: var(--imp-meandro) !important;
  /* "round" en vez de "repeat-x": el navegador ajusta el módulo para que entre un
     número entero de veces y la greca cierre justo contra el borde. Con repeat-x
     sobraban 5px y el último recuadro quedaba cortado por la mitad. */
  background-repeat: round !important;
  background-position: left center !important;
  background-size: 37px 11px !important;
  opacity: .8 !important;
  pointer-events: none !important;
}

/* ── Logo ───────────────────────────────────────────────────────────
   El logo nuevo es vertical (642×698); el de Gladiador era apaisado
   (750×268). Sin una altura explícita el <img> se renderiza a tamaño
   natural y desborda la barra lateral. */
.gl-sidebar-logo {
  border-bottom: 1px solid var(--imp-line) !important;
  padding: 14px 12px 12px !important;
}
.gl-sidebar-logo img {
  display: block !important;
  height: 104px !important;
  width: auto !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .8));
}
.header__logo-img {
  height: 54px !important;
  width: auto !important;
}
.footer-logo {
  height: 84px !important;
  width: auto !important;
}
.footer-logo-degraded {
  width: 88px !important;
  height: auto !important;
}

/* ── Paneles y bordes ───────────────────────────────────────────── */
.gl-sidebar-left,
.gl-sidebar-inner {
  background: linear-gradient(180deg, var(--imp-panel) 0%, var(--imp-black) 100%) !important;
  border-right: 1px solid var(--imp-line-soft) !important;
}

.gl-nav-section {
  color: var(--imp-gold-dk) !important;
  font-weight: 700 !important;
}

.gl-nav-link {
  color: rgba(240, 214, 138, .78) !important;
  border-left: 2px solid transparent !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}
.gl-nav-link:hover,
.gl-nav-link.active {
  color: var(--imp-gold-pale) !important;
  background: linear-gradient(90deg, rgba(201, 162, 39, .14), transparent) !important;
  border-left-color: var(--imp-gold) !important;
}

/* ── Chips de proveedor ─────────────────────────────────────────── */
.provider-button {
  background: var(--imp-panel-2) !important;
  border: 1px solid var(--imp-line-soft) !important;
  color: var(--imp-gold-pale) !important;
}
.provider-button:hover {
  border-color: var(--imp-gold) !important;
  box-shadow: var(--imp-glow) !important;
}
.provider-button.active,
.provider-button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--imp-bronze), var(--imp-gold)) !important;
  border-color: var(--imp-gold-lt) !important;
  color: var(--imp-black) !important;
}

/* ── Botones de acción ──────────────────────────────────────────── */
.gl-novedad-btn {
  background: linear-gradient(135deg, var(--imp-gold-dk), var(--imp-gold)) !important;
  border: 1px solid var(--imp-gold-lt) !important;
  color: var(--imp-black) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
.gl-novedad-btn:hover {
  background: linear-gradient(135deg, var(--imp-gold), var(--imp-gold-lt)) !important;
  box-shadow: var(--imp-glow) !important;
}

/* ── Verificación de edad: marco imperial ───────────────────────── */
.age-verification-dog {
  filter: drop-shadow(0 6px 22px rgba(201, 162, 39, .35));
}

/* ── Barra superior ─────────────────────────────────────────────── */
.header,
.gl-topbar,
.gl-header {
  background: linear-gradient(180deg, var(--imp-panel) 0%, var(--imp-black) 100%) !important;
  border-bottom: 1px solid var(--imp-line) !important;
}

/* ── Pie ────────────────────────────────────────────────────────── */
.footer,
.footer-site {
  background: var(--imp-black) !important;
  border-top: 1px solid var(--imp-line) !important;
}
.footer-copyright {
  color: rgba(232, 207, 143, .45) !important;
}

/* ── Gate de edad: sin parpadeo ─────────────────────────────────────
   La clase la pone un script inline del <head> antes de pintar, leyendo
   localStorage (con respaldo en cookie). Así el que ya verificó no ve
   asomar el modal mientras cargan los 12 scripts del tema. */
html.imp-age-ok #age-verification-overlay {
  display: none !important;
}

/* ── Móvil: el tema achica demasiado ────────────────────────────────
   `html { font-size: 10px }` (appef21.css) hace que 1rem = 10px en todo el sitio,
   así que la regla móvil `.section-title { font-size: 1rem }` daba 10px reales.
   ponytail: NO se toca el font-size del html — los 800 KB de CSS del tema están
   calibrados a esa raíz y cambiarla mueve todos los layouts. Se suben sólo los
   elementos que se leían mal. */
@media (max-width: 768px) {
  /* El <style> del body trae `html body .section-header .section-title {font-size:1rem}`
     (0,2,2), que le ganaba a `html body h2.section-title` (0,1,3): en CSS pesan primero
     las clases. Sumando .section-header quedamos en (0,2,3) y ahora sí pega. */
  html body .section-header h2.section-title,
  html body h2.section-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }
  html body .section-header h2.section-title::after,
  html body h2.section-title::after {
    bottom: -13px !important;
    height: 10px !important;
    background-size: 34px 10px !important;
  }
  html body .gl-nav-link       { font-size: 15px !important; }
  html body .gl-nav-section    { font-size: 11px !important; }
  /* El inline usa el mismo selector `html body .provider-button__label` y va después
     en el documento, así que empataba y ganaba por orden. Sumamos .provider-button. */
  html body .provider-button .provider-button__label { font-size: 12px !important; }
  html body .gl-novedad-btn    { font-size: 13px !important; }
}
