/* ============================================================
   Lottia — identidad grafica
   ------------------------------------------------------------
   Fuente de verdad de color y tipografia de toda la app.
   Las reglas de marca estan en docs/identidad-lottia.md.

   Se carga DESPUES de volt.css a proposito: volt es vendor (28k
   lineas) y no se toca; aqui se pisan sus variables y las pocas
   reglas donde trae el color quemado en vez de la variable.
   ============================================================ */

/* ---------- Tipografia ----------
   Poppins servida localmente (subset latino, ~7,7 KB por peso).
   Los .ttf originales viven en core/static/core/fonts/poppins/ y
   son la fuente de estos .woff2; ver README de la conversion en
   docs/identidad-lottia.md. */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lottia/Poppins-Regular.26d37f003ddc.woff2") format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/lottia/Poppins-Medium.4c2eb3f430b6.woff2") format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/lottia/Poppins-SemiBold.6baf0a9702ec.woff2") format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lottia/Poppins-Bold.6d37b1e64ade.woff2") format('woff2');
}

/* ---------- Paleta ---------- */

:root {
  /* Colores de marca. No agregar otros: si hace falta un tono
     nuevo, derivarlo de estos. */
  --lottia-navy: #12284b;
  --lottia-balota: #ffc24d;
  --lottia-crema: #f4f1ea;
  --lottia-blanco: #ffffff;

  /* Derivados del navy */
  --lottia-navy-oscuro: #0c1c35; /* hover/active de botones */
  --lottia-navy-claro: #2a4a7f; /* enlaces sobre fondo claro */
  --lottia-texto: #12284b; /* 14,7:1 sobre blanco */
  /* 5,4:1 sobre blanco y 4,8:1 sobre el crema del fondo. El valor
     anterior (#65738a) pasaba sobre blanco pero se quedaba en 4,26:1
     sobre el crema, que es el fondo real de la mayoria de las paginas. */
  --lottia-texto-suave: #5e6b81;
  --lottia-borde: rgba(18, 40, 75, 0.12);
  --lottia-borde-fuerte: rgba(18, 40, 75, 0.24);
  --lottia-sombra: rgba(18, 40, 75, 0.1);
  --lottia-sombra-alta: rgba(18, 40, 75, 0.18);

  /* Derivados de la balota */
  --lottia-balota-oscuro: #e5a52f; /* hover de botones amarillos */
  --lottia-balota-tenue: rgba(255, 194, 77, 0.18);

  /* Superficies */
  --lottia-fondo: var(--lottia-crema);
  --lottia-superficie: var(--lottia-blanco);

  /* ---------- Bootstrap / volt ----------
     volt.css usa var(--bs-*) para el grueso del tema, asi que
     redefinirlas aqui alcanza. Las excepciones (colores quemados)
     se corrigen mas abajo. */
  --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-weight: 400;
  --bs-body-color: var(--lottia-navy);
  --bs-body-color-rgb: 18, 40, 75;
  --bs-body-bg: var(--lottia-crema);
  --bs-body-bg-rgb: 244, 241, 234;

  --bs-primary: #12284b;
  --bs-primary-rgb: 18, 40, 75;
  --bs-secondary: #ffc24d;
  --bs-secondary-rgb: 255, 194, 77;

  --bs-link-color: #12284b;
  --bs-link-hover-color: #2a4a7f;

  --bs-border-color: rgba(18, 40, 75, 0.12);
}

/* ---------- Anillo de foco ----------
   Navy por dentro (14,7:1 sobre blanco, muy por encima del 3:1 que
   pide WCAG 2.4.11) y balota por fuera, que es la mitad que se ve
   cuando el fondo es navy. Asi un solo anillo sirve en claro y en
   oscuro. El amarillo NUNCA va solo: sobre blanco da 1,6:1. */

:root {
  --lottia-foco: 0 0 0 3px var(--lottia-navy), 0 0 0 6px var(--lottia-balota);
  --lottia-foco-oscuro: 0 0 0 3px var(--lottia-balota), 0 0 0 6px rgba(255, 255, 255, 0.35);
}

/* ---------- Cifras ----------
   Las tablas de plata y de numeros de chance alinean por columna.
   OJO: Poppins NO sirve para esto — sus digitos son proporcionales
   (el "1" mide 287 unidades y el "8" 621) y el archivo no trae la
   feature 'tnum', asi que font-variant-numeric no hace nada. Por eso
   las cifras van en la mono del sistema: alinea siempre, no pesa
   nada y no depende de ningun CDN. Reemplaza a DM Mono. */

:root {
  --lottia-cifras: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;
}

.cifras {
  font-family: var(--lottia-cifras);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Correcciones a volt.css
   Solo las reglas donde volt trae el color quemado (#1F2937 gris,
   #f0bc74 arena) en vez de la variable. Se limitan a las clases
   que las plantillas de este proyecto usan de verdad.
   ============================================================ */

/* ---------- Boton primario: navy ---------- */

.btn-primary {
  color: var(--lottia-blanco);
  background-color: var(--lottia-navy);
  border-color: var(--lottia-navy);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary,
.show > .btn-primary.dropdown-toggle {
  color: var(--lottia-blanco);
  background-color: var(--lottia-navy-oscuro);
  border-color: var(--lottia-navy-oscuro);
}

.btn-primary:focus-visible {
  box-shadow: var(--lottia-foco);
}

.btn-primary:disabled,
.btn-primary.disabled {
  color: var(--lottia-blanco);
  background-color: var(--lottia-navy);
  border-color: var(--lottia-navy);
  opacity: 0.55;
}

/* ---------- Boton primario en contorno ---------- */

.btn-outline-primary {
  color: var(--lottia-navy);
  border-color: var(--lottia-navy);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: var(--lottia-blanco);
  background-color: var(--lottia-navy);
  border-color: var(--lottia-navy);
}

.btn-outline-primary:focus-visible {
  box-shadow: var(--lottia-foco);
}

/* ---------- Boton secundario: la balota ----------
   Texto navy sobre amarillo = 9,1:1. Es el unico lugar donde el
   amarillo cubre area grande, y solo porque lleva navy encima. */

.btn-secondary {
  color: var(--lottia-navy);
  background-color: var(--lottia-balota);
  border-color: var(--lottia-balota);
  font-weight: 600;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  color: var(--lottia-navy);
  background-color: var(--lottia-balota-oscuro);
  border-color: var(--lottia-balota-oscuro);
}

.btn-secondary:focus-visible {
  box-shadow: var(--lottia-foco);
}

/* ---------- Formularios ---------- */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--lottia-navy-claro);
  box-shadow: 0 0 0 3px rgba(255, 194, 77, 0.45);
}

.form-check-input:checked {
  background-color: var(--lottia-navy);
  border-color: var(--lottia-navy);
}

/* ---------- Foco general del teclado ----------
   Respaldo para todo lo que no tenga una regla propia. */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--lottia-navy);
  outline-offset: 2px;
}

/* ---------- Menus desplegables ----------
   volt.css (linea 22331) le pone `width: 30px` a TODO <span> que viva dentro
   de un .dropdown-menu. Viene de su demo, donde esos span eran iconos de
   ancho fijo. Aqui rompe cualquier texto que se ponga en un desplegable,
   dejando una palabra por renglon: en el selector de loterias de ventas.html
   ya habia dos reglas peleandole a mano, una de ellas con !important.
   Se devuelve a `auto`: el que necesite 30px, que los pida. */

.dropdown-menu span {
  width: auto;
}

/* ---------- Tarjetas ---------- */

.card {
  border-color: var(--lottia-borde);
}

/* ---------- Encabezados ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--lottia-texto);
  font-weight: 600;
}

/* ============================================================
   Logo en la barra superior
   ============================================================ */

.lottia-marca {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.lottia-marca__logo {
  display: block;
  height: 30px;
  width: auto;
}

.lottia-marca:focus-visible {
  outline: none;
  box-shadow: var(--lottia-foco);
  border-radius: 6px;
}

@media (max-width: 575.98px) {
  .lottia-marca__logo {
    height: 24px;
  }
}