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

/* Breakpoints (mobile-first, solo min-width): 480 · 640 · 860 px. */
html {
  -webkit-text-size-adjust: 100%;
  /* La barra de «Siguiente» va fija abajo: al tabular, el foco no debe quedar tapado por ella. */
  scroll-padding-bottom: 6rem;
}

/* Sin el retardo de doble toque y sin zoom por doble toque en controles. */
button,
a,
input,
select,
summary,
label {
  touch-action: manipulation;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 100% -10%, var(--ceu-blue-50), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, var(--ceu-blue-100), transparent 55%),
    var(--bg-subtle);
  min-height: 100dvh;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- Shell ---------- */
.shell {
  max-width: var(--container);
  margin: 0 auto;
  /* Con viewport-fit=cover, en horizontal el contenido no debe quedar bajo la muesca. */
  padding: var(--sp-4) max(var(--sp-3), env(safe-area-inset-right)) calc(var(--sp-7) + env(safe-area-inset-bottom))
    max(var(--sp-3), env(safe-area-inset-left));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}
/* El fichero del logotipo va recortado a su dibujo, sin márgenes (contenido/LEEME.md).
   36 px de alto desde ~390 de ancho y 29 a 320, donde con el selector de idioma de 44 px por
   opción no cabe más. El ancho sale de la proporción del fichero, con un tope por si otro
   logotipo es más alargado: entonces se encoge dentro de la caja sin deformarse. */
.brand .brand-logo {
  --logo-h: clamp(29px, 9.3vw, 36px);
  height: var(--logo-h);
  width: auto;
  max-width: calc(var(--logo-h) * 4.6);
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}
/* Logotipo como botón (vuelve al inicio): sin aspecto de botón. */
.brand .brand-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.brand .brand-link:focus-visible {
  outline: 2px solid var(--ceu-blue);
  outline-offset: 4px;
}
.brand .brand-sub {
  display: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--border-strong);
  white-space: nowrap;
}
@media (min-width: 640px) {
  .shell {
    padding: var(--sp-5) max(var(--sp-4), env(safe-area-inset-right)) calc(var(--sp-8) + env(safe-area-inset-bottom))
      max(var(--sp-4), env(safe-area-inset-left));
  }
  .topbar {
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
  }
  .brand .brand-logo {
    --logo-h: 45px;
  }
  .brand .brand-sub {
    display: block;
  }
}

/* Selector de idioma segmentado (ES · EN · FR) */
.lang-switch {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
}
.lang-option {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}
.lang-option:hover {
  color: var(--ceu-blue);
  background: var(--ceu-blue-50);
}
.lang-option[aria-pressed='true'] {
  background: var(--ceu-blue);
  color: var(--text-onblue);
  cursor: default;
}
.lang-option:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

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

/* ---------- Pie legal ---------- */
.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
}
.legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a:hover {
  color: var(--ceu-blue-700);
}
.legal a:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* ---------- Card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: clip;
}

.card-head {
  min-width: 0;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fff, var(--surface-2));
}
.card-head h1 {
  font-size: var(--fs-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ceu-blue-800);
}
/* El h1 recibe foco por script al cambiar de paso (fuera del tabulado normal,
   tabindex="-1"): no necesita el anillo de foco de teclado. */
.card-head h1:focus {
  outline: none;
}
.card-head p {
  color: var(--text-muted);
  margin-top: var(--sp-2);
  max-width: 60ch;
}

.card-body {
  min-width: 0;
  padding: var(--sp-4);
}

@media (min-width: 640px) {
  .card {
    border-radius: var(--r-xl);
  }
  .card-head {
    padding: var(--sp-5) var(--sp-6) var(--sp-4);
  }
  .card-body {
    padding: var(--sp-6);
  }
}

/* ---------- Progreso ---------- */
.progress {
  padding: var(--sp-4) var(--sp-4) 0;
}
.progress-track {
  height: 8px;
  border-radius: var(--r-full);
  background: var(--ceu-blue-100);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--ceu-blue-600), var(--ceu-blue));
  transition: width var(--dur-slow) var(--ease-out);
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  margin-top: var(--sp-2);
  font-weight: 600;
  gap: var(--sp-2);
}
.progress-meta span {
  min-width: 0;
}
.progress-meta span:last-child {
  text-align: right;
}
@media (min-width: 640px) {
  .progress {
    padding: var(--sp-4) var(--sp-6) 0;
  }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  padding: var(--sp-3) var(--sp-5);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out);
}
.btn:active {
  transform: scale(0.97);
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn-ghost {
  background: transparent;
  color: var(--ceu-blue-700);
  border-color: var(--control-line);
}
.btn-ghost:hover {
  background: var(--surface-2);
}

/* Barra de «Anterior» / «Siguiente». En móvil va pegada al borde inferior de la pantalla
   mientras el final del paso no se ve (pasos largos: campus, gastos), y ocupa el ancho
   de la tarjeta; «Siguiente» se reparte el espacio. Desde 640 px vuelve al pie normal. */
.actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  /* Sale al ancho de la tarjeta y al borde inferior (padding del .card-body). */
  margin: var(--sp-6) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4));
  padding: var(--sp-3) var(--sp-4) max(var(--sp-3), env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 -8px 16px -12px rgba(16, 21, 43, 0.3);
}
.actions .spacer {
  display: none;
}
.actions > :empty {
  display: none;
}
.actions > .btn-primary {
  flex: 1 1 7.5rem;
}
.actions > .btn-ghost {
  flex: 0 1 auto;
}

/* En apaisado el alto es poco: una barra fija se comería media pantalla. */
@media (max-height: 500px) {
  .actions {
    position: static;
    box-shadow: none;
  }
}

@media (min-width: 640px) {
  .actions {
    position: static;
    justify-content: space-between;
    margin: var(--sp-6) 0 0;
    padding: var(--sp-5) 0 0;
    background: none;
    box-shadow: none;
  }
  .actions .spacer {
    display: block;
    flex: 1;
  }
  .actions > .btn-primary,
  .actions > .btn-ghost {
    flex: 0 0 auto;
  }
}

/* ---------- Transición de paso ---------- */
.step {
  animation: step-in var(--dur-slow) var(--ease-out) both;
}
@keyframes step-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-q {
  font-size: var(--fs-xl);
  color: var(--ceu-blue-800);
  letter-spacing: -0.01em;
}
.section-help {
  color: var(--text-muted);
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-5);
  max-width: 66ch;
  font-size: var(--fs-sm);
}

@media (prefers-reduced-motion: reduce) {
  .step {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* Modo de alto contraste de Windows: el sistema quita las sombras (el aro de foco
   es una box-shadow), así que el foco se dibuja con contorno. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
  /* El estado seleccionado de chips e idioma se apoya en el fondo, que este modo quita. */
  .chip[aria-pressed='true'],
  .lang-option[aria-pressed='true'] {
    border: 3px solid Highlight;
    text-decoration: underline;
  }
}