/*
 * Sistema de diseño de Pista de Karting Trinidad.
 *
 * Lo cargan la home pública (assets/site.css) y el admin (assets/admin.css),
 * siempre DESPUÉS de Bootstrap 5.3.3. Acá vive todo lo compartido: fuentes,
 * colores, escala tipográfica, el mapeo de Bootstrap a la marca y los dos
 * elementos gráficos de la identidad. Los estilos de cada área van en su
 * propio archivo y solo usan estos tokens (nunca colores sueltos).
 *
 * Origen de los colores:
 *  - Bandera de Flores (assets/img/banner.png, muestreada píxel a píxel):
 *    ladrillo #B43232, cielo #5274B3, dorado #EFB016.
 *  - Terreno de la pista (foto aérea del hero): tierra oscura #2B201B.
 *
 * Roles (no mezclar):
 *  - ladrillo  = la ÚNICA acción (botones, enlaces, foco de formularios).
 *                6,1:1 con blanco en ambos sentidos. NO usarlo como texto
 *                sobre --pk-tierra (2,6:1): ahí es solo relleno con texto blanco.
 *  - azul      = información y estados (texto: 8,7:1 sobre blanco). El cielo
 *                puro (4,7:1) solo como relleno grande con texto blanco.
 *  - dorado    = acento sobre superficies oscuras (8,2:1 sobre tierra) y la
 *                doble línea de la cruz de la bandera. Nunca como texto sobre claro.
 *  - tierra    = superficies oscuras (hero, subida de fotos, footer).
 */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("/assets/fonts/big-shoulders-display.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/barlow-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/barlow-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Bandera de Flores */
  --pk-ladrillo: #B43232;
  --pk-ladrillo-oscuro: #8F2525;
  --pk-ladrillo-rgb: 180, 50, 50;
  --pk-cielo: #5274B3;
  --pk-azul: #2C4A85;
  --pk-dorado: #EFB016;

  /* Terreno y papel */
  --pk-tierra: #2B201B;
  --pk-tierra-2: #3B2E27;
  --pk-papel: #F4F5F0;
  --pk-blanco: #FFFFFF;

  /* Texto y líneas */
  --pk-texto: #241C18;
  --pk-texto-2: #5E5750;
  --pk-linea: #D9DBD2;
  --pk-linea-oscura: rgba(255, 255, 255, 0.18);
  --pk-borde-campo: #8A857D;   /* límite de campos de formulario: 3,7:1 sobre blanco (WCAG 1.4.11 pide 3:1) */
  --pk-texto-sobre-oscuro: #E9E4E1;

  /* Tipografía */
  --pk-fuente-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --pk-fuente: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Forma: plano, radios chicos, sin sombras decorativas */
  --pk-radio: 4px;
  --pk-radio-chico: 2px;

  /* Mapeo de Bootstrap a la marca */
  --bs-body-font-family: var(--pk-fuente);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--pk-texto);
  --bs-body-color-rgb: 36, 28, 24;
  --bs-body-bg: var(--pk-blanco);
  --bs-secondary-color: var(--pk-texto-2);
  --bs-border-color: var(--pk-linea);
  --bs-primary: var(--pk-ladrillo);
  --bs-primary-rgb: var(--pk-ladrillo-rgb);
  --bs-link-color: var(--pk-ladrillo);
  --bs-link-color-rgb: var(--pk-ladrillo-rgb);
  --bs-link-hover-color: var(--pk-ladrillo-oscuro);
  --bs-link-hover-color-rgb: 143, 37, 37;
  --bs-border-radius: var(--pk-radio);
  --bs-border-radius-sm: var(--pk-radio-chico);
  --bs-border-radius-lg: 6px;
  --bs-heading-color: var(--pk-texto);
}

body {
  font-family: var(--pk-fuente);
  color: var(--pk-texto);
  background: var(--pk-blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Escala tipográfica ---------- */
h1, h2, h3, h4, .pk-display {
  font-family: var(--pk-fuente-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.005em;
  text-wrap: balance;
  color: var(--bs-heading-color);
}
h1 { font-size: clamp(2.75rem, 1.6rem + 6vw, 6.25rem); }
h2 { font-size: clamp(2.125rem, 1.5rem + 3vw, 3.5rem); }
h3 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); }
h4 { font-size: 1.5rem; }
h5, h6 { font-family: var(--pk-fuente); font-weight: 600; }
p { max-width: 68ch; }
.pk-tnum { font-variant-numeric: tabular-nums; }
.pk-suave { color: var(--pk-texto-2); }

/* Enlaces: subrayado con desplazamiento, legible sin depender del color */
a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* ---------- Foco visible (nunca se quita) ---------- */
:focus-visible {
  outline: 3px solid var(--pk-azul);
  outline-offset: 3px;
  border-radius: var(--pk-radio-chico);
}
/* El azul no se ve sobre tierra: en superficies oscuras el foco es dorado. */
.pk-oscuro :focus-visible { outline-color: var(--pk-dorado); }

/* Bootstrap pone `outline: 0` (y un halo azul tenue) en estos componentes con
   más especificidad que `:focus-visible`, así que sin esto el foco de teclado
   era INVISIBLE sobre fondos oscuros. Se restituye acá, una sola vez, para la
   home y para el admin. */
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.page-link:focus-visible,
.btn-close:focus-visible,
.accordion-button:focus-visible {
  outline: 3px solid var(--pk-azul);
  outline-offset: 3px;
  box-shadow: none;
}
.pk-oscuro .btn:focus-visible,
.pk-oscuro .nav-link:focus-visible,
.pk-oscuro .navbar-toggler:focus-visible,
.pk-oscuro .btn-close:focus-visible {
  outline-color: var(--pk-dorado);
}

/* ---------- Botones ---------- */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--pk-radio);
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.65rem;
  letter-spacing: 0.01em;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--pk-ladrillo);
  --bs-btn-border-color: var(--pk-ladrillo);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pk-ladrillo-oscuro);
  --bs-btn-hover-border-color: var(--pk-ladrillo-oscuro);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #751E1E;
  --bs-btn-active-border-color: #751E1E;
  --bs-btn-disabled-bg: var(--pk-ladrillo);
  --bs-btn-disabled-border-color: var(--pk-ladrillo);
  --bs-btn-focus-shadow-rgb: var(--pk-ladrillo-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--pk-ladrillo);
  --bs-btn-border-color: var(--pk-ladrillo);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pk-ladrillo);
  --bs-btn-hover-border-color: var(--pk-ladrillo);
  --bs-btn-active-bg: var(--pk-ladrillo-oscuro);
  --bs-btn-active-border-color: var(--pk-ladrillo-oscuro);
  --bs-btn-focus-shadow-rgb: var(--pk-ladrillo-rgb);
}
/* Botón sobre superficies oscuras: dorado con texto tierra (8,2:1) */
.btn-dorado {
  --bs-btn-color: var(--pk-tierra);
  --bs-btn-bg: var(--pk-dorado);
  --bs-btn-border-color: var(--pk-dorado);
  --bs-btn-hover-color: var(--pk-tierra);
  --bs-btn-hover-bg: #F7C443;
  --bs-btn-hover-border-color: #F7C443;
  --bs-btn-active-color: var(--pk-tierra);
  --bs-btn-active-bg: #D99D0C;
  --bs-btn-active-border-color: #D99D0C;
}
/* Botón "fantasma" sobre superficies oscuras */
.btn-sobre-oscuro {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.55);
  --bs-btn-hover-color: var(--pk-tierra);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--pk-tierra);
  --bs-btn-active-bg: #E9E4E1;
}

/* ---------- Formularios ---------- */
.form-control, .form-select {
  border-color: var(--pk-borde-campo);
  border-radius: var(--pk-radio);
}
.form-control:focus, .form-select:focus {
  border-color: var(--pk-ladrillo);
  box-shadow: 0 0 0 0.2rem rgba(var(--pk-ladrillo-rgb), 0.25);
}
.form-check-input:checked {
  background-color: var(--pk-ladrillo);
  border-color: var(--pk-ladrillo);
}
.form-check-input:focus {
  border-color: var(--pk-ladrillo);
  box-shadow: 0 0 0 0.2rem rgba(var(--pk-ladrillo-rgb), 0.25);
}
.form-text, .text-muted { color: var(--pk-texto-2) !important; }
.form-label { font-weight: 600; }

/* ---------- Paginación, badges, alertas ---------- */
.pagination {
  --bs-pagination-color: var(--pk-ladrillo);
  --bs-pagination-hover-color: var(--pk-ladrillo-oscuro);
  --bs-pagination-active-bg: var(--pk-ladrillo);
  --bs-pagination-active-border-color: var(--pk-ladrillo);
  --bs-pagination-focus-color: var(--pk-ladrillo-oscuro);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--pk-ladrillo-rgb), 0.25);
  --bs-pagination-border-radius: var(--pk-radio);
}
.badge { font-weight: 600; border-radius: var(--pk-radio-chico); }

/* ---------- Elementos gráficos de la identidad ---------- */

/* Franja de la bandera de Flores: la doble línea dorada de la cruz sobre
   el azul cielo (el brazo horizontal de la bandera). Separador de marca. */
.pk-franja {
  height: 12px;
  background: linear-gradient(
    to bottom,
    var(--pk-dorado) 0 25%,
    var(--pk-cielo) 25% 75%,
    var(--pk-dorado) 75% 100%
  );
}

/* Banda de meta: cuadros de las banderas del logo. Se usa UNA vez, en el
   borde inferior del hero (la línea de llegada). */
.pk-meta {
  position: relative;   /* si no, un velo posicionado encima la tapa */
  z-index: 1;
  height: 20px;
  background:
    repeating-conic-gradient(var(--pk-blanco) 0 25%, var(--pk-tierra) 0 50%)
    0 0 / 20px 20px;
}

/* Enlace de salto para teclado */
.pk-salto {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 2000;
  padding: 0.6rem 1rem;
  background: var(--pk-blanco);
  color: var(--pk-texto);
  font-weight: 600;
  border-radius: var(--pk-radio);
  transition: top 0.15s ease;
}
.pk-salto:focus { top: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}