/* =========================================================================
   Garage Labrín 2.1 · Sistema de diseño base («taller nocturno / pit lane»)
   Misma marca: rojo #e50914, fondos #080b0f / #10161d, logo original.
   Novedad: tipografía display condensada (Barlow Condensed, OFL, alojada en el sitio),
   escala tipográfica, superficies con retícula técnica y componentes comunes.
   Se carga después de styles.css/admin.css: evoluciona, no reemplaza.
   ========================================================================= */

@font-face { font-family: "GL Display"; src: url("../fonts/barlow-condensed-800-latin.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "GL Display"; src: url("../fonts/barlow-condensed-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "GL Display"; src: url("../fonts/barlow-condensed-800i-latin.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }

:root {
  --gl-font-display: "GL Display", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  /* Escala 2.1 (display condensada permite tamaños mayores sin romper líneas) */
  --gl21-fs-hero: clamp(3.1rem, 1.6rem + 7.2vw, 8.25rem);
  --gl21-fs-h1: clamp(2.3rem, 1.5rem + 3.4vw, 4.25rem);
  --gl21-fs-h2: clamp(1.9rem, 1.35rem + 2.3vw, 3.25rem);
  --gl21-fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  --gl21-fs-kpi: clamp(2.2rem, 1.7rem + 1.6vw, 3.1rem);
  /* Superficies: misma paleta, más profundidad */
  --gl21-surface: linear-gradient(180deg, rgba(22, 29, 38, .92), rgba(13, 18, 24, .96));
  --gl21-surface-flat: #0f151c;
  --gl21-edge: rgba(255, 255, 255, .07);
  --gl21-edge-strong: rgba(255, 255, 255, .12);
  --gl21-red-glow: 0 0 0 1px rgba(229, 9, 20, .35), 0 18px 48px -18px rgba(229, 9, 20, .55);
  --gl21-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 22px 50px -28px rgba(0, 0, 0, .9);
  --gl21-r: 14px;
  --gl21-r-lg: 20px;
  --gl21-ease-out: cubic-bezier(.16, 1, .3, 1);
  /* Retícula técnica (líneas de taller) */
  --gl21-grid: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px,
               linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px;
  /* Franja diagonal tipo competición */
  --gl21-stripe: repeating-linear-gradient(-55deg, var(--gl-red) 0 10px, transparent 10px 20px);
}

/* ---------- Tipografía ---------- */
h1, h2, h3, .gl21-display, .admin-stat-card strong, .badge, .eyebrow {
  font-family: var(--gl-font-display);
  font-feature-settings: "tnum" 1;
}
h1, h2 { font-weight: 800; letter-spacing: -.005em; line-height: .98; text-transform: uppercase; }
h3 { font-weight: 600; letter-spacing: .01em; line-height: 1.1; }
main h1, .admin-main h1 { font-size: var(--gl21-fs-h1); }
main h2, .admin-main h2 { font-size: var(--gl21-fs-h2); }
.admin-main h2, .card h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.85rem); }
.eyebrow { letter-spacing: .24em; font-weight: 600; font-size: 14px; }
.badge { font-weight: 600; letter-spacing: .16em; font-size: 13px; }

/* ---------- Botones ---------- */
.btn-primary, .btn-secondary, .btn-nav, .footer-btn {
  font-family: var(--gl-font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 12px;
}
.btn-primary { box-shadow: var(--gl21-red-glow), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-secondary { background: rgba(255, 255, 255, .05); border: 1px solid var(--gl21-edge-strong); backdrop-filter: blur(6px); }
.btn-secondary:hover { border-color: rgba(229, 9, 20, .55); background: rgba(229, 9, 20, .08); }

/* ---------- Formularios ---------- */
.field label, .form label { font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--gl-label); }
.field input, .field select, .field textarea, .form input:not([type=checkbox]):not([type=radio]):not([type=file]), .form select, .form textarea {
  border-radius: 12px;
  border: 1px solid var(--gl21-edge-strong);
  background: #0b1016;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255, 255, 255, .2); }
.field input:focus, .field select:focus, .field textarea:focus,
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--gl-red);
  box-shadow: 0 0 0 4px rgba(229, 9, 20, .18);
  background: #0d131a;
  outline: none;
}
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: #ff6570; }

/* ---------- Tarjetas y superficies ---------- */
.card, .gl-legal section {
  background: var(--gl21-surface);
  border: 1px solid var(--gl21-edge);
  border-radius: var(--gl21-r-lg);
  box-shadow: var(--gl21-shadow);
}

/* ---------- Avisos ---------- */
.alert { border-radius: 14px; border-width: 1px; backdrop-filter: blur(4px); }

/* ---------- Foco y selección ---------- */
::selection { background: rgba(229, 9, 20, .55); color: #fff; }
:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 3px; }

/* ---------- Scrollbar sobria (escritorio) ---------- */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: #2a3542 transparent; }
}