/* ---------- Marco ---------- */
.app { display: flex; flex-direction: column; min-height: 100dvh; }

.banda-demo {
  background: var(--color-demo);
  color: var(--muestra-c07-negro);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: var(--espacio-2) var(--espacio-4);
  text-align: center;
}

.cabecera { background: var(--muestra-c07-negro); color: var(--muestra-c07-blanco); }
.cabecera__interior {
  max-width: var(--ancho-contenido); margin: 0 auto;
  display: flex; align-items: center; gap: var(--espacio-3);
  padding: var(--espacio-2) var(--espacio-4);
}
.logo { display: block; flex: none; overflow: hidden; background: var(--muestra-c07-negro); }
.logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.75); }
.cabecera__logo { width: 52px; height: 52px; }
.cabecera__texto { display: flex; flex-direction: column; line-height: 1.2; }
.cabecera__institucion { font-weight: 700; font-size: 0.9375rem; }
.cabecera__ministerio { color: rgb(255 255 255 / 78%); font-size: 0.8125rem; }

.principal {
  flex: 1;
  width: 100%;
  max-width: calc(var(--ancho-contenido) + 2 * var(--espacio-4));
  margin: 0 auto;
  padding: var(--espacio-4) var(--espacio-4) var(--espacio-6);
}

.pie {
  text-align: center; color: var(--ui-texto-suave);
  font-size: 0.8125rem; padding: var(--espacio-4) var(--espacio-4) var(--espacio-6);
}

.tarjeta {
  background: var(--color-superficie);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  padding: var(--espacio-5) var(--espacio-4) 0;
  animation: aparecer 240ms ease-out;
}
.tarjeta:not(.paso) { padding-bottom: var(--espacio-5); }

@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Tipografía ---------- */
.sobretitulo {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ui-texto-suave);
}
.titulo-principal, .titulo-paso {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.005em;
}
.titulo-principal { font-size: clamp(2.5rem, 11vw, 3.5rem); margin-top: var(--espacio-2); }
.titulo-paso { font-size: clamp(2rem, 8.5vw, 2.75rem); margin-top: var(--espacio-4); }
.paso__intro { color: var(--ui-texto-suave); margin-top: var(--espacio-2); }

.nota { font-size: 0.875rem; color: var(--ui-texto-suave); }
.nota--info {
  background: var(--color-acento-suave); color: var(--ui-texto);
  border-radius: var(--radio-control); padding: var(--espacio-3) var(--espacio-4);
}

/* ---------- Bienvenida ---------- */
.bienvenida { text-align: left; }
.bienvenida__logo { width: 120px; height: 120px; margin: 0 0 var(--espacio-5); border-radius: var(--radio-control); }
.fecha {
  display: inline-flex; align-items: center; gap: var(--espacio-2);
  margin-top: var(--espacio-4);
  background: var(--color-acento-suave);
  border-radius: 999px; padding: var(--espacio-1) var(--espacio-4);
  font-weight: 700; font-size: 0.9375rem;
}
.fecha__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--muestra-c02-naranja); }
.bienvenida__texto { margin-top: var(--espacio-4); font-size: 1.0625rem; }
.bienvenida__pasos {
  list-style: none; padding: 0; margin: var(--espacio-5) 0;
  display: grid; gap: var(--espacio-2);
  border-top: 1px solid var(--ui-borde-suave); padding-top: var(--espacio-4);
}
.bienvenida__paso { display: flex; align-items: center; gap: var(--espacio-3); font-weight: 600; }
.bienvenida__numero {
  display: inline-grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1.5px solid var(--ui-texto);
  font-family: var(--fuente-titulos); font-size: 1.125rem; font-weight: 700;
}

/* ---------- Progreso ---------- */
.progreso__texto { font-size: 0.875rem; color: var(--ui-texto-suave); }
.progreso__paso { font-weight: 700; color: var(--ui-texto); }
.progreso__barra {
  list-style: none; padding: 0; margin: var(--espacio-2) 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.progreso__segmento { height: 6px; border-radius: 999px; background: var(--ui-pendiente); transition: background var(--transicion); }
.progreso__segmento--hecho { background: var(--ui-texto); }
.progreso__segmento--actual:not(.progreso__segmento--hecho) { background: var(--color-progreso-actual); }

/* ---------- Formulario y campos ---------- */
.formulario { margin-top: var(--espacio-5); }
.paso__cuerpo { display: grid; gap: var(--espacio-5); }
.fila { display: grid; gap: var(--espacio-5); }
.fila + .nota { margin-top: calc(-1 * var(--espacio-4)); }

.campo { display: grid; gap: var(--espacio-2); }
.campo__etiqueta { font-weight: 700; font-size: 1rem; line-height: 1.35; }
.campo--grupo > .campo__etiqueta { margin-bottom: var(--espacio-2); }
.campo__opcional { font-weight: 500; color: var(--ui-texto-suave); }
.campo__ayuda { font-size: 0.875rem; color: var(--ui-texto-suave); margin-top: calc(-1 * var(--espacio-1)); }
.campo--grupo > .campo__ayuda { margin-top: calc(-1 * var(--espacio-3)); margin-bottom: var(--espacio-1); }

.campo__control {
  width: 100%;
  min-height: var(--altura-control);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1.5px solid var(--ui-borde);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
  font-size: 1rem; /* 16 px evita el zoom automático en iOS */
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
textarea.campo__control { min-height: 6rem; resize: vertical; }
.campo__control--corto { max-width: 9rem; }
.campo__control:hover { border-color: var(--ui-texto); }
.campo__control:focus-visible { outline: none; border-color: var(--color-foco); box-shadow: 0 0 0 2px var(--color-foco); }
.campo--error .campo__control { border-color: var(--color-error); }
select.campo__control { appearance: auto; }

.campo__error {
  display: flex; gap: var(--espacio-2); align-items: flex-start;
  color: var(--color-error); font-size: 0.875rem; font-weight: 600;
}
.campo__error::before {
  content: '!'; flex: none; display: inline-grid; place-items: center;
  width: 1.125rem; height: 1.125rem; margin-top: 0.1rem; border-radius: 50%;
  background: var(--color-error); color: #fff; font-size: 0.75rem; font-weight: 800;
}

/* Opciones (radio/checkbox) como superficies táctiles amplias */
.opciones { display: grid; gap: var(--espacio-2); }
@media (min-width: 22rem) { .opciones--2 { grid-template-columns: 1fr 1fr; } }
.opcion {
  position: relative;
  display: flex; align-items: center; gap: var(--espacio-3);
  min-height: var(--altura-control);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1.5px solid var(--ui-borde);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), box-shadow var(--transicion);
  -webkit-tap-highlight-color: transparent;
}
.opcion:hover { border-color: var(--ui-texto); }
.opcion__control { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opcion__marca {
  flex: none; width: 1.375rem; height: 1.375rem;
  border: 2px solid var(--ui-texto-suave); border-radius: 50%;
  display: grid; place-items: center; background: var(--color-superficie);
  transition: border-color var(--transicion), background var(--transicion);
}
.opcion__marca::after {
  content: ''; width: 0.625rem; height: 0.625rem; border-radius: 50%;
  background: var(--color-accion); transform: scale(0); transition: transform var(--transicion);
}
.opcion--casilla .opcion__marca { border-radius: 6px; }
.opcion--casilla .opcion__marca::after {
  width: 0.4rem; height: 0.75rem; border-radius: 0; background: none;
  border: solid var(--color-accion-texto); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0); margin-top: -0.15rem;
}
.opcion__texto { font-weight: 550; line-height: 1.35; }

.opcion:has(.opcion__control:checked) {
  border-color: var(--color-accion);
  background: var(--color-acento-suave);
  box-shadow: inset 0 0 0 1px var(--color-accion);
}
.opcion:has(.opcion__control:checked) .opcion__marca { border-color: var(--color-accion); }
.opcion:has(.opcion__control:checked) .opcion__marca::after { transform: scale(1); }
.opcion--casilla:has(.opcion__control:checked) .opcion__marca { background: var(--color-accion); }
.opcion--casilla:has(.opcion__control:checked) .opcion__marca::after { transform: rotate(45deg) scale(1); }
.opcion:has(.opcion__control:focus-visible) { outline: 3px solid var(--color-foco); outline-offset: 2px; }
.campo--error .opcion { border-color: var(--color-error); }

.opcion--consentimiento { align-items: flex-start; }
.opcion--consentimiento .opcion__marca { margin-top: 0.1rem; }

.condicional { display: grid; gap: var(--espacio-5); padding-left: var(--espacio-4); border-left: 3px solid var(--color-acento-suave); }
.condicional--entrada { animation: desplegar 200ms ease-out; }
@keyframes desplegar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Resumen de errores */
.resumen-errores {
  border: 2px solid var(--color-error); background: var(--color-error-fondo);
  border-radius: var(--radio-control); padding: var(--espacio-4); margin-bottom: var(--espacio-5);
}
.resumen-errores:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; }
.resumen-errores__titulo { font-size: 1rem; font-weight: 800; color: var(--color-error); }
.resumen-errores__lista { margin-top: var(--espacio-2); padding-left: 1.25rem; display: grid; gap: var(--espacio-1); }
.resumen-errores__lista a { color: var(--ui-texto); font-weight: 600; }

/* ---------- Botones y acciones ---------- */
.acciones {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: var(--espacio-3);
  margin: var(--espacio-5) calc(-1 * var(--espacio-4)) 0;
  padding: var(--espacio-3) var(--espacio-4) calc(var(--espacio-3) + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--ui-borde-suave);
  border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
}
.acciones .boton--primario { flex: 1; }
.acciones--inicio { position: static; border: 0; background: none; backdrop-filter: none; margin: var(--espacio-5) 0 0; padding: 0; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2);
  min-height: var(--altura-control);
  padding: 0 var(--espacio-5);
  border-radius: var(--radio-control);
  border: 1.5px solid var(--color-accion);
  font-weight: 700; font-size: 1rem;
  transition: background var(--transicion), transform 80ms ease-out, opacity var(--transicion);
}
.boton:active:not(:disabled) { transform: scale(0.98); }
.boton:disabled { cursor: not-allowed; opacity: 0.55; }
.boton--primario { background: var(--color-accion); color: var(--color-accion-texto); }
.boton--primario:hover:not(:disabled) { background: #2B2622; }
.boton--secundario { background: var(--color-superficie); color: var(--ui-texto); }
.boton--secundario:hover:not(:disabled) { background: var(--color-fondo); }
.boton--ancho { width: 100%; }
.boton--compacto { min-height: 2.75rem; padding: 0 var(--espacio-4); font-size: 0.9375rem; }
.boton--cargando { opacity: 1 !important; }
.boton--cargando::before {
  content: ''; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 35%); border-top-color: #fff;
  animation: girar 700ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.boton-enlace {
  background: none; border: 0; padding: var(--espacio-2); margin: calc(-1 * var(--espacio-2));
  font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; border-radius: 6px;
}
.boton-enlace:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Revisión ---------- */
.resumen { display: grid; gap: var(--espacio-4); }
.resumen__seccion { border: 1px solid var(--ui-borde-suave); border-radius: var(--radio-control); padding: var(--espacio-4); }
.resumen__encabezado { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-3); }
.resumen__titulo { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.375rem; text-transform: uppercase; line-height: 1.1; }
.resumen__lista { margin-top: var(--espacio-3); display: grid; gap: var(--espacio-3); }
.resumen__fila { display: grid; gap: 2px; }
.resumen__fila dt { font-size: 0.8125rem; color: var(--ui-texto-suave); font-weight: 600; }
.resumen__fila dd { font-weight: 600; overflow-wrap: anywhere; }

.aviso { background: var(--color-fondo); border-radius: var(--radio-control); padding: var(--espacio-4); display: grid; gap: var(--espacio-3); }
.aviso__encabezado { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); }
.aviso__titulo { font-size: 1.0625rem; font-weight: 800; }
.aviso__estado { font-size: 0.8125rem; color: var(--ui-texto-suave); }
.aviso__detalle summary { cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.aviso__detalle ul { margin-top: var(--espacio-2); padding-left: 1.25rem; display: grid; gap: var(--espacio-1); font-size: 0.9375rem; }
.aviso__detalle .nota { margin-top: var(--espacio-3); }
.aviso .opcion { background: var(--color-superficie); }

.etiqueta-estado {
  display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1.5px solid var(--ui-texto); border-radius: 999px; padding: 0 var(--espacio-2);
}
.etiqueta-estado--demo { background: var(--color-demo); border-color: var(--color-demo); color: #000; padding: var(--espacio-1) var(--espacio-3); }

.panel-demo {
  margin-top: var(--espacio-5);
  border: 2px dashed var(--muestra-c07-negro); background: #FFFBEA;
  border-radius: var(--radio-control); padding: var(--espacio-3) var(--espacio-4); display: grid; gap: var(--espacio-2);
}
.panel-demo__etiqueta { font-size: 0.875rem; font-weight: 700; }

/* ---------- Estados de envío ---------- */
.estado-envio:not(:empty) { margin-top: var(--espacio-4); font-weight: 600; color: var(--ui-texto-suave); }
.alerta { margin-top: var(--espacio-5); border-radius: var(--radio-control); padding: var(--espacio-4); border-left: 5px solid; display: grid; gap: var(--espacio-2); }
.alerta:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; }
.alerta--advertencia { background: var(--color-advertencia-fondo); border-color: var(--color-advertencia-borde); }
.alerta--error { background: var(--color-error-fondo); border-color: var(--color-error); }
.alerta__titulo { font-size: 1.0625rem; font-weight: 800; }
.alerta__codigo { font-size: 0.8125rem; color: var(--ui-texto-suave); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.alerta__acciones { margin-top: var(--espacio-2); }

/* ---------- Éxito ---------- */
.exito { text-align: center; }
.exito__icono {
  width: 4.5rem; height: 4.5rem; margin: var(--espacio-2) auto var(--espacio-4);
  border-radius: 50%; background: var(--color-acento-suave);
  display: grid; place-items: center; animation: latido 420ms ease-out;
}
.exito__icono::after {
  content: ''; width: 1.1rem; height: 2rem; margin-top: -0.35rem;
  border: solid var(--muestra-c07-negro); border-width: 0 4px 4px 0; transform: rotate(45deg);
}
.exito--demo .exito__icono { background: var(--color-demo); }
@keyframes latido { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
.exito .etiqueta-estado--demo { margin-bottom: var(--espacio-3); }
.exito__texto { margin-top: var(--espacio-3); color: var(--ui-texto-suave); }
.referencia {
  margin: var(--espacio-5) 0 0; padding: var(--espacio-4);
  border: 1.5px solid var(--ui-texto); border-radius: var(--radio-control); text-align: left;
}
.referencia__etiqueta { font-size: 0.8125rem; font-weight: 700; color: var(--ui-texto-suave); text-transform: uppercase; letter-spacing: 0.06em; }
.referencia__valor {
  margin-top: var(--espacio-1);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.9375rem; font-weight: 600;
  overflow-wrap: anywhere; user-select: all;
}
.referencia__acciones { display: flex; align-items: center; gap: var(--espacio-3); margin-top: var(--espacio-3); flex-wrap: wrap; }
.referencia__estado { font-size: 0.875rem; color: var(--color-exito); font-weight: 700; }
.exito .nota--info { margin-top: var(--espacio-4); text-align: left; }
.siguientes { margin-top: var(--espacio-5); text-align: left; }
.siguientes__titulo { font-family: var(--fuente-titulos); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; }
.siguientes ol { margin-top: var(--espacio-2); padding-left: 1.25rem; display: grid; gap: var(--espacio-2); }

.lista-tecnica { margin-top: var(--espacio-3); padding-left: 1.25rem; font-family: ui-monospace, Consolas, monospace; font-size: 0.875rem; }

/* ---------- Escritorio ---------- */
@media (min-width: 40rem) {
  .principal { padding-top: var(--espacio-6); }
  .tarjeta { padding: var(--espacio-6) var(--espacio-6) 0; }
  .tarjeta:not(.paso) { padding-bottom: var(--espacio-6); }
  .fila { grid-template-columns: 1fr 1fr; }
  .opciones--2 { grid-template-columns: 1fr 1fr; }
  .acciones {
    position: static; margin: var(--espacio-6) calc(-1 * var(--espacio-6)) 0;
    padding: var(--espacio-4) var(--espacio-6) var(--espacio-5); background: none; backdrop-filter: none;
  }
  .acciones .boton--primario { flex: 0 0 auto; margin-left: auto; min-width: 12rem; }
  .acciones--inicio { margin: var(--espacio-5) 0 0; padding: 0; }
  .acciones--inicio .boton { width: auto; min-width: 16rem; }
  .bienvenida__pasos { grid-template-columns: 1fr 1fr; }
}