/* ==========================================================================
   ARIAUTO · Base
   Reinicio, tipografía y utilidades. Todo consume tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Antes: el selector universal forzaba font-size:12px a TODOS los elementos,
     lo que anulaba la jerarquía de encabezados y hacía imposible destacar nada. */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ari-fuente);
  font-size: var(--ari-t-body);
  line-height: var(--ari-interlineado);
  color: var(--md-on-surface);
  background: var(--md-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--ari-fuente-titulo);
  font-weight: var(--ari-peso-fuerte);
  line-height: var(--ari-interlineado-denso);
  color: var(--md-on-surface);
}
h1 { font-size: var(--ari-t-display); }
h2 { font-size: var(--ari-t-headline); }
h3 { font-size: var(--ari-t-title-lg); }
h4 { font-size: var(--ari-t-title); }
h5, h6 { font-size: var(--ari-t-body-lg); }

p { margin: 0 0 var(--ari-e4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding-left: var(--ari-e6); }

a {
  color: var(--md-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

code, kbd, samp, pre { font-family: var(--ari-fuente-mono); font-size: .95em; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px var(--ari-e2);
  border: 1px solid var(--md-outline-variant);
  border-bottom-width: 2px;
  border-radius: var(--ari-r-xs);
  background: var(--md-surface-container);
  font-size: var(--ari-t-label);
  text-align: center;
  color: var(--md-on-surface-variant);
}

hr {
  height: 1px;
  margin: var(--ari-e5) 0;
  border: 0;
  background: var(--md-outline-variant);
}

img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

table { border-collapse: collapse; border-spacing: 0; }

/* --- Foco ------------------------------------------------------------------
   La hoja anterior hacía `.form-input:focus { outline: none }`, es decir,
   eliminaba el indicador de foco sin poner nada en su lugar: la aplicación era
   inutilizable con teclado. Aquí el foco es siempre visible y con contraste. */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
  border-radius: var(--ari-r-xs);
}

/* Enlace para saltar al contenido, primero en el orden de tabulación. */
.saltar-al-contenido {
  position: absolute;
  left: var(--ari-e3);
  top: -100px;
  z-index: 100;
  padding: var(--ari-e3) var(--ari-e5);
  border-radius: var(--ari-r-sm);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-weight: var(--ari-peso-medio);
  transition: top var(--ari-rapido) var(--ari-curva);
}
.saltar-al-contenido:focus-visible { top: var(--ari-e3); }

/* --- Barras de desplazamiento --------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--md-outline-variant) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--md-outline-variant);
  border: 2px solid transparent;
  border-radius: var(--ari-r-full);
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--md-outline); background-clip: content-box; }

::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* --- Utilidades ------------------------------------------------------------ */
.oculto { display: none !important; }
[hidden] { display: none !important; }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.texto-derecha { text-align: right; }
.texto-centro  { text-align: center; }
.numero {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
}
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.silenciado { color: var(--md-on-surface-variant); }
.pequeno { font-size: var(--ari-t-label); }
.negrita { font-weight: var(--ari-peso-fuerte); }
.mayusculas { text-transform: uppercase; letter-spacing: .03em; }
.crecer { flex: 1 1 auto; min-width: 0; }
.sin-margen { margin: 0 !important; }

.fila { display: flex; align-items: center; gap: var(--ari-e3); }
.fila-sep { display: flex; align-items: center; justify-content: space-between; gap: var(--ari-e3); }
.columna { display: flex; flex-direction: column; gap: var(--ari-e3); }
.envolver { flex-wrap: wrap; }

/* --- Rejilla de formulario -------------------------------------------------
   12 columnas con hueco pequeño: los formularios de la autoescuela tienen
   muchos campos cortos (código postal, número, piso, letra) y agruparlos en
   una línea ahorra muchísimo espacio vertical. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ari-e4);
}
.c1  { grid-column: span 1; }  .c2  { grid-column: span 2; }
.c3  { grid-column: span 3; }  .c4  { grid-column: span 4; }
.c5  { grid-column: span 5; }  .c6  { grid-column: span 6; }
.c7  { grid-column: span 7; }  .c8  { grid-column: span 8; }
.c9  { grid-column: span 9; }  .c10 { grid-column: span 10; }
.c11 { grid-column: span 11; } .c12 { grid-column: span 12; }

@media (max-width: 1100px) {
  .c2, .c3 { grid-column: span 4; }
  .c4, .c5 { grid-column: span 6; }
  .c7, .c8, .c9, .c10, .c11 { grid-column: span 12; }
}
@media (max-width: 700px) {
  .rejilla > * { grid-column: span 12 !important; }
}

/* --- Movimiento reducido ---------------------------------------------------
   Respetar la preferencia del sistema no es un detalle: hay personas a las que
   la animación les produce mareo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}