/* Plantilla Sistemas Públicos DGME — generado de tokens.json y de los componentes de la plantilla.
   No se edita a mano: los cambios van en la plantilla (https://claude.ai/artifact/9FcHbLe73H1sriQ3h7Vtcw) y se vuelve a generar. */
@font-face { font-family: "Nunito Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/nunito-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/nunito-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/nunito-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/nunito-sans-800.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/outfit-400.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/outfit-500.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/outfit-600.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/outfit-700.woff2") format("woff2"); }

:root {
    --fondo: #f4f6fb;
    --superficie: #ffffff;
    --encabezado: #2f3541;
    --encabezado-texto: #e6e9f0;
    --encabezado-separador: #4a5163;
    --menu: #e9edf7;
    --menu-hover: #dce2f3;
    --texto-menu: #3a4256;
    --marino: #1f2f7a;
    --marino-hover: #18256a;
    --marino-2: #2b3c8c;
    --marino-texto: #d5dcf7;
    --primario: #3d5bd9;
    --primario-hover: #2e4bc7;
    --primario-suave: #e6ebfc;
    --contorno-claro: #8c9ce8;
    --contorno-claro-texto: #c7d0fa;
    --foco: #3d5bd9;
    --foco-sobre-oscuro: var(--contorno-claro-texto);
    --avatar: #4b5aa8;
    --info: #dcebfd;
    --info-texto: #173b7a;
    --pendiente: #fef3c7;
    --pendiente-texto: #92400e;
    --pendiente-punto: #d97706;
    --pendiente-claro: #fffbeb;
    --pendiente-borde: #f5d08a;
    --ambar: #f59e0b;
    --exito: #dcfce7;
    --exito-texto: #166534;
    --exito-fuerte: #16a34a;
    --exito-aviso-texto: #14532d;
    --peligro: #b91c1c;
    --peligro-hover: #991b1b;
    --peligro-suave: #fee2e2;
    --peligro-aviso-texto: #7f1d1d;
    --peligro-borde: #e9a5a5;
    --neutro: #eef0f4;
    --neutro-texto: #3f4656;
    --texto: #1e2433;
    --texto-2: #4a5368;
    --texto-3: #5b6478;
    --borde: #e1e6f0;
    --borde-suave: #e8ecf4;
    --borde-campo: #838da2;
    --borde-boton: #cfd6e6;
    --borde-punteado: #7d879c;
    --linea-pasos: #d5dbe8;
    --hover-suave: #f0f3fa;
    --separacion-campo: 6px;
    --separacion-chips: 8px;
    --separacion-acciones: 10px;
    --separacion-rejilla-fila: 16px;
    --separacion-rejilla-col: 18px;
    --relleno-tarjeta: 22px;
    --relleno-tarjeta-movil: 18px;
    --separacion-bloques: 24px;
    --relleno-heroe: 32px;
    --relleno-pagina-sup: 36px;
    --relleno-pagina-lado: 40px;
    --relleno-pagina-movil: 16px;
    --alto-control: 44px;
    --alto-entrada: 48px;
    --radio: 18px;
    --radio-campo: 10px;
    --radio-segmentado: 12px;
    --radio-aviso: 14px;
    --radio-carga: 16px;
    --radio-heroe: 20px;
    --radio-pildora: 999px;
    --sombra: 0 6px 20px rgba(61, 91, 217, .12);
    --sombra-control: 0 1px 3px rgba(30, 40, 80, .12);
    --sombra-flotante: 0 10px 30px rgba(20, 30, 60, .18);
    --sombra-dialogo: 0 20px 60px rgba(20, 30, 60, .3);
    --font-texto: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-titulos: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-placa: ui-monospace, "SFMono-Regular", Consolas, monospace;
    color-scheme: light;
}


/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 16px/1.5 var(--font-texto); }
h1, h2, h3 { font-family: var(--font-titulos); font-weight: 600; line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: 32px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p { margin: 0; }
a { color: var(--primario); }
a:hover { color: var(--primario-hover); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.encabezado :focus-visible, .heroe :focus-visible { outline-color: var(--foco-sobre-oscuro); }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-chico { width: 16px; height: 16px; }
.ico-grande { width: 24px; height: 24px; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--superficie); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 8px; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.placa { font-family: var(--font-placa); letter-spacing: .02em; }
.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); }

/* ---------- Estructura ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.app-cuerpo { flex: 1; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.app-principal { flex: 1; min-width: 0; padding: var(--relleno-pagina-sup) var(--relleno-pagina-lado) 56px; }
.contenedor { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--separacion-bloques); }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: var(--separacion-bloques); align-items: start; }
.formulario-publico { grid-template-columns: minmax(0, 1fr) 300px; }
.columna { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---------- Encabezado y marca ---------- */
.encabezado { background: var(--encabezado); color: #fff; padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; min-width: 0; }
.marca:hover { color: inherit; }
.marca-logo { height: 40px; width: auto; }
.marca-separador { width: 1px; height: 32px; background: var(--encabezado-separador); flex: none; }
.marca-servicio { font-family: var(--font-titulos); font-weight: 500; font-size: 16px; color: var(--encabezado-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuenta { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--encabezado-texto); }
.cuenta form { margin: 0; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--avatar); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: none; }
.encabezado-acciones { display: flex; align-items: center; gap: 10px; flex: none; }

/* Selector de idioma sobre el encabezado (portales bilingües) */
.selector-idioma { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1.5px solid var(--contorno-claro); }
.selector-idioma a, .selector-idioma button { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--contorno-claro-texto); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.selector-idioma a:hover, .selector-idioma button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.selector-idioma [aria-current="true"], .selector-idioma [aria-pressed="true"] { background: var(--superficie); color: var(--encabezado); }

/* ---------- Pie ---------- */
.pie { background: var(--superficie); border-top: 1px solid var(--borde); padding: 18px var(--relleno-pagina-lado); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--texto-2); }
.pie-institucion { font-weight: 700; }
.pie-logo { height: 34px; width: auto; filter: brightness(0.4); } /* el logo GOES es gris claro (#d2d2d2) */

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--alto-control); padding: 0 22px; border-radius: var(--radio-pildora); border: 0; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; background: transparent; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-primario { background: var(--primario); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--primario-hover); color: #fff; }
.btn-marino { background: var(--marino); color: #fff; }
.btn-marino:hover:not(:disabled) { background: var(--marino-hover); color: #fff; }
.btn-secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-boton); }
.btn-secundario:hover:not(:disabled) { background: var(--hover-suave); color: var(--texto); }
.btn-peligro { background: var(--peligro); color: #fff; }
.btn-peligro:hover:not(:disabled) { background: var(--peligro-hover); color: #fff; }
.btn-texto-peligro { color: var(--peligro); padding: 0 12px; }
.btn-texto-peligro:hover:not(:disabled) { background: var(--peligro-suave); color: var(--peligro); }
.btn-contorno-claro { border: 1.5px solid var(--contorno-claro); color: var(--contorno-claro-texto); }
.btn-contorno-claro:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.btn-blanco { background: #fff; color: var(--marino); }
.btn-blanco:hover { background: var(--menu); color: var(--marino); }
.btn-chico { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-grande { min-height: 54px; font-size: 16px; }
.btn-bloque { width: 100%; }
.btn-icono { width: var(--alto-control); height: var(--alto-control); padding: 0; border-radius: 50%; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-icono:hover { background: var(--hover-suave); color: var(--texto); }
.btn-icono.peligro { color: var(--peligro); }
.btn-icono.peligro:hover { background: var(--peligro-suave); }
.enlace-volver { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; min-height: var(--alto-control); }
.ico-giratorio { animation: girar 1.1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Títulos de página, saludo y banda de pasos ---------- */
.titulo-pagina { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.titulo-pagina p { margin-top: 6px; font-size: 16px; color: var(--texto-2); }
.sobretitulo { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primario); }
.saludo { display: flex; flex-direction: column; gap: 6px; }
.saludo h1 { font-size: 36px; }
.heroe { background: var(--marino); color: #fff; border-radius: var(--radio-heroe); padding: var(--relleno-heroe); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; align-items: center; }
.heroe h2 { font-size: 26px; }
.heroe-texto { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.heroe-texto p { color: var(--marino-texto); }
.heroe-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.heroe-pasos li { background: var(--marino-2); border-radius: var(--radio-aviso); padding: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--marino-texto); }
.heroe-pasos strong { color: #fff; font-size: 16px; }
.heroe-numero { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--marino); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }

/* Opciones dentro de la banda (elegir el tipo de trámite) */
.heroe-opciones { grid-template-columns: minmax(0, 1fr); }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.opcion { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; background: var(--marino-2); color: var(--marino-texto); border: 2px solid transparent; border-radius: var(--radio-aviso); padding: 16px; font-size: 14px; cursor: pointer; }
.opcion:hover { border-color: var(--contorno-claro); }
.opcion strong { color: #fff; font-family: var(--font-titulos); font-weight: 600; font-size: 17px; }
.opcion .ico { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; }
.opcion[aria-checked="true"] { background: var(--superficie); color: var(--texto-2); border-color: var(--superficie); }
.opcion[aria-checked="true"] strong { color: var(--marino); }
.opcion[aria-checked="true"] .ico { background: var(--primario-suave); color: var(--primario); }
.opcion:focus-visible { outline: 2px solid var(--foco-sobre-oscuro); outline-offset: 2px; }

/* ---------- Pasos (stepper) ---------- */
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; }
.paso { flex: 1 1 160px; display: flex; align-items: center; gap: 10px; position: relative; padding-right: 12px; }
.paso:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--linea-pasos); min-width: 16px; }
.paso-hecho:not(:last-child)::after { background: var(--exito-fuerte); }
.paso-marca { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; background: var(--menu); color: var(--texto-2); }
.paso-marca .ico { width: 18px; height: 18px; stroke-width: 3; }
.paso-actual .paso-marca { background: var(--primario); color: #fff; }
.paso-hecho .paso-marca { background: var(--exito-fuerte); color: #fff; }
.paso-texto { display: flex; flex-direction: column; line-height: 1.2; }
.paso-nombre { font-weight: 700; font-size: 14px; }
.paso-estado { font-size: 12px; color: var(--texto-3); }
.paso-actual .paso-estado { color: var(--primario); }
.paso-hecho .paso-estado { color: var(--exito-texto); }

/* ---------- Avisos ---------- */
.aviso { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--radio-aviso); padding: 14px 18px; font-size: 15px; }
.aviso .ico { margin-top: 2px; }
.aviso-info { background: var(--info); color: var(--info-texto); }
.aviso-info .ico { color: var(--primario-hover); }
.aviso-pendiente { background: var(--pendiente-claro); color: var(--pendiente-texto); border: 1px solid var(--pendiente-borde); }
.aviso-exito { background: var(--exito); color: var(--exito-aviso-texto); }
.aviso-error { background: var(--peligro-suave); color: var(--peligro-aviso-texto); }
.resumen-errores ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.resumen-errores a { color: inherit; font-weight: 700; }

/* ---------- Tarjetas y etiquetas ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--relleno-tarjeta); }
.tarjeta-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rotulo { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.separador { border: 0; border-top: 1px solid var(--borde-suave); margin: 0; }
.grupo-titulo { display: flex; align-items: center; gap: 10px; font-family: var(--font-titulos); font-weight: 600; font-size: 18px; margin-bottom: 12px; }
.grupo-titulo .ico { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--primario-suave); color: var(--primario); }
.seccion { display: flex; flex-direction: column; gap: 18px; }
.seccion > .tarjeta-titulo { margin-bottom: 0; align-items: flex-start; }
.seccion-titulo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.seccion .grupo-titulo { margin: 0; font-size: 20px; }
.subgrupo { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--borde-suave); padding-top: 18px; }
.subgrupo-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-family: var(--font-titulos); font-weight: 600; font-size: 16px; }
.subgrupo-titulo .campo-ayuda { font-family: var(--font-texto); font-weight: 400; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; padding: 5px 12px; border-radius: var(--radio-pildora); white-space: nowrap; }
.etiqueta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.etiqueta-pendiente { background: var(--pendiente); color: var(--pendiente-texto); }
.etiqueta-pendiente::before { background: var(--pendiente-punto); }
.etiqueta-exito { background: var(--exito); color: var(--exito-texto); }
.etiqueta-exito::before { background: var(--exito-fuerte); }
.etiqueta-neutra { background: var(--neutro); color: var(--neutro-texto); }
.etiqueta-peligro { background: var(--peligro-suave); color: var(--peligro); }
.etiqueta-info { background: var(--info); color: var(--info-texto); }
.etiqueta-info::before { background: var(--primario); }
.etiqueta-sin-punto::before { display: none; }

/* Datos clave–valor */
.ficha { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 18px; }
.ficha dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.ficha dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.ficha-lista { grid-template-columns: minmax(0, 1fr); margin: 14px 0; }
.ficha-lista > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--borde-suave); padding-bottom: 8px; }
.ficha-lista dt { flex: none; }
.ficha-lista dd { margin: 0; text-align: right; min-width: 0; }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: var(--separacion-campo); min-width: 0; }
.campo-etiqueta { font-weight: 700; font-size: 14px; }
.campo-opcional { font-weight: 400; color: var(--texto-3); }
.campo-ayuda { font-size: 13px; color: var(--texto-3); }
.campo-error { font-size: 13px; color: var(--peligro); font-weight: 600; }
.campo-ok { font-size: 13px; color: var(--exito-texto); font-weight: 600; }
.requerido { color: var(--peligro); font-weight: 800; }
.entrada { width: 100%; min-height: var(--alto-entrada); padding: 10px 14px; border: 1.5px solid var(--borde-campo); border-radius: var(--radio-campo); background: var(--superficie); font-size: 16px; }
.entrada:focus { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--primario); }
.entrada[aria-invalid="true"] { border-color: var(--peligro); }
.entrada.valido { border-color: var(--exito-fuerte); }
.entrada[readonly] { background: var(--fondo); color: var(--texto-2); }
.entrada-mayusculas { text-transform: uppercase; }
.entrada-mayusculas::placeholder { text-transform: none; }
textarea.entrada { min-height: 96px; resize: vertical; line-height: 1.5; }
.entrada-con-prefijo { position: relative; display: block; }
.entrada-prefijo { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--texto-3); pointer-events: none; }
.entrada-prefijo + .entrada { padding-left: 30px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--separacion-rejilla-fila) var(--separacion-rejilla-col); }
.rejilla-2, .rejilla-3 { display: grid; gap: var(--separacion-rejilla-fila) var(--separacion-rejilla-col); }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.casilla { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.casilla input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--primario); flex: none; }
.autorizacion { padding: 14px 16px; border: 1px solid var(--borde); border-radius: var(--radio-aviso); background: var(--fondo); }
.campo.es-invalido .autorizacion { border-color: var(--peligro); }
.segmentado { border: 0; padding: 0; margin: 0; min-width: 0; }
.segmentado > legend { padding: 0; margin-bottom: 6px; }
.segmentado-opciones { display: flex; gap: 6px; background: var(--menu); padding: 4px; border-radius: var(--radio-segmentado); }
.segmentado-opciones label { flex: 1; position: relative; }
.segmentado-opciones input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado-opciones span { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--texto-2); cursor: pointer; }
.segmentado-opciones input:checked + span { background: var(--superficie); color: var(--primario-hover); box-shadow: var(--sombra-control); }
.segmentado-opciones input:focus-visible + span { outline: 2px solid var(--foco); }
.segmentado-grande span { min-height: 46px; font-size: 15px; }
.campo.es-invalido .segmentado-opciones { box-shadow: inset 0 0 0 1.5px var(--peligro); }
.acciones-formulario { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.envio-seguro { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 13px; color: var(--texto-2); }
.envio-seguro .ico { width: 16px; height: 16px; color: var(--exito-fuerte); }

/* Chips que se eligen */
.grupo-chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.grupo-chips > legend { padding: 0; margin-bottom: 4px; }
.grupo-chips > legend.chips-cabeza { display: flex; width: 100%; }
.chips-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.chips-elegibles { display: flex; flex-wrap: wrap; gap: var(--separacion-chips); }
.chip { position: relative; display: inline-flex; max-width: 100%; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--borde-campo); border-radius: var(--radio-pildora); background: var(--superficie); font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--texto-2); cursor: pointer; user-select: none; }
.chip span .ico { width: 15px; height: 15px; stroke-width: 3; display: none; }
.chip span:hover { border-color: var(--primario); color: var(--texto); }
.chip input:checked + span { background: var(--primario-suave); border-color: var(--primario); color: var(--primario-hover); }
.chip input:checked + span .ico { display: inline-block; }
.chip input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
.chips-compactos .chip span { min-height: 36px; padding: 4px 12px; font-size: 13px; }
.campo.es-invalido .chip input:not(:checked) + span { border-color: var(--peligro-borde); }

/* Bloques que se repiten (estudios, experiencia, menores de edad) */
.lista-repetible { display: flex; flex-direction: column; gap: 12px; }
.agregado { border: 1px solid var(--borde); border-radius: var(--radio-aviso); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.agregado-fila { display: flex; align-items: center; gap: 10px; }
.repetible { padding: 16px; gap: 14px; }
.repetible-cabeza { justify-content: space-between; min-height: 40px; }
.repetible-cabeza strong { font-family: var(--font-titulos); font-weight: 600; font-size: 16px; }
.enlace-punteado { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border: 1.5px dashed var(--borde-punteado); border-radius: var(--radio-carga); font-weight: 700; font-size: 15px; text-decoration: none; color: var(--primario-hover); }
button.enlace-punteado { width: 100%; background: transparent; cursor: pointer; }
.enlace-punteado:hover { background: var(--primario-suave); border-color: var(--primario); color: var(--primario-hover); }
.enlace-punteado[aria-disabled="true"], .enlace-punteado:disabled { color: var(--texto-3); border-color: var(--borde-campo); background: transparent; cursor: not-allowed; }

/* Carga de foto (retrato) */
.carga-foto { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px; border: 1.5px dashed var(--borde-punteado); border-radius: var(--radio-carga); background: var(--fondo); cursor: pointer; }
.carga-foto:hover { border-color: var(--primario); background: var(--primario-suave); }
.carga-foto:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; border-color: var(--primario); }
.carga-foto[data-foto-estado="analizando"] { border-style: solid; border-color: var(--primario); background: var(--superficie); }
.carga-foto[data-foto-estado="aceptada"] { border-style: solid; border-color: var(--exito-fuerte); background: var(--superficie); }
.carga-foto[data-foto-estado="rechazada"], .campo.es-invalido .carga-foto { border-style: solid; border-color: var(--peligro); background: var(--superficie); }
.carga-foto-marco { width: 104px; max-width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borde); display: flex; align-items: center; justify-content: center; color: var(--primario); overflow: hidden; }
.carga-foto-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carga-foto-marco .ico { width: 34px; height: 34px; stroke-width: 1.6; }
.carga-foto-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.carga-foto-texto strong { font-family: var(--font-titulos); font-weight: 600; font-size: 18px; line-height: 1.25; }
.carga-foto-detalle { font-size: 13px; color: var(--texto-3); overflow-wrap: anywhere; }
.requisitos-foto { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--texto-2); }
.requisitos-foto li { display: inline-flex; align-items: center; gap: 6px; }
.requisitos-foto .ico { width: 15px; height: 15px; color: var(--exito-fuerte); stroke-width: 3; }

/* Carga de documentos PDF (arrastrar o elegir) */
.zona-carga { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 26px 18px; border: 1.5px dashed var(--borde-punteado); border-radius: var(--radio-carga); background: var(--fondo); cursor: pointer; }
.zona-carga:hover, .zona-carga.arrastrando { border-color: var(--primario); background: var(--primario-suave); }
.zona-carga:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; border-color: var(--primario); }
.zona-carga > .ico { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--primario-suave); color: var(--primario); }
.zona-carga strong { font-family: var(--font-titulos); font-weight: 600; font-size: 17px; }
.zona-carga-enlace { color: var(--primario-hover); text-decoration: underline; }
.campo.es-invalido .zona-carga { border-style: solid; border-color: var(--peligro); background: var(--superficie); }
.lista-archivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.archivo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); }
.archivo-icono { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--peligro-suave); color: var(--peligro); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.archivo-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.archivo-nombre { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.archivo-peso { font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.archivo-acciones { display: flex; gap: 6px; flex: none; }
.archivo.es-historico { background: var(--fondo); }
.archivo.es-historico .archivo-icono { background: var(--neutro); color: var(--neutro-texto); }

/* Indicaciones plegables */
.indicaciones { padding: 0; overflow: hidden; }
.indicaciones-boton { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px var(--relleno-tarjeta); border: 0; background: transparent; text-align: left; cursor: pointer; font-family: var(--font-titulos); font-weight: 600; font-size: 17px; color: var(--texto); }
.indicaciones-boton > .ico:first-child { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--info); color: var(--info-texto); }
.indicaciones-boton .indicaciones-accion { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-texto); font-size: 14px; font-weight: 700; color: var(--primario-hover); }
.indicaciones-boton[aria-expanded="false"] .ico-flecha { transform: rotate(180deg); }
.indicaciones-lista { list-style: none; margin: 0; padding: 0 var(--relleno-tarjeta) var(--relleno-tarjeta); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 22px; }
.indicaciones-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--texto-2); }
.indicaciones-lista .ico { width: 18px; height: 18px; color: var(--primario); margin-top: 2px; }

/* ---------- Avance (línea de tiempo, medidor, barra del teléfono) ---------- */
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.hito { display: flex; gap: 12px; align-items: flex-start; position: relative; padding-bottom: 18px; font-size: 14px; }
.hito:last-child { padding-bottom: 0; }
.hito:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--linea-pasos); }
.hito-hecho:not(:last-child)::before { background: var(--exito-fuerte); }
.hito-marca { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--superficie); border: 2px solid var(--borde-campo); }
.hito-marca .ico { width: 14px; height: 14px; stroke-width: 3; }
.hito-hecho .hito-marca { background: var(--exito-fuerte); border-color: var(--exito-fuerte); color: #fff; }
.hito-actual .hito-marca { background: var(--ambar); border: 4px solid var(--pendiente); }
.hito-pendiente { color: var(--texto-2); }
.hito-pendiente strong { font-weight: 600; }
.hito-error .hito-marca { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.hito-error strong { color: var(--peligro); }
.hito a { color: inherit; text-decoration: none; display: flex; flex-direction: column; line-height: 1.3; }
.hito a:hover strong { color: var(--primario-hover); text-decoration: underline; }
.hito-detalle { font-size: 13px; color: var(--texto-3); }
.medidor { height: 8px; border-radius: var(--radio-pildora); background: var(--menu); overflow: hidden; }
.medidor > span { display: block; height: 100%; width: 0; background: var(--primario); border-radius: inherit; transition: width .3s ease; }
.medidor.completo > span { background: var(--exito-fuerte); }
.avance { display: flex; flex-direction: column; gap: 16px; }
.avance .grupo-titulo { margin: 0; }
.avance-cuenta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 700; color: var(--texto-2); }
.barra-avance { display: none; position: sticky; bottom: 0; z-index: 20; background: var(--superficie); border-top: 1px solid var(--borde); box-shadow: 0 -6px 20px rgba(20, 30, 60, .08);
    padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
    flex-direction: column; gap: 8px; }
.barra-avance-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.barra-avance-texto { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; font-size: 13px; color: var(--texto-3); }
.barra-avance-texto strong { font-size: 14px; color: var(--texto); }

/* ---------- Resultado: confirmación y código ---------- */
.resultado { width: 100%; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.confirmacion { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 36px 24px; }
.confirmacion .aviso { text-align: left; }
.sistema-titulo { font-size: 26px; }
.sistema-texto { color: var(--texto-2); }
.sistema-icono { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.sistema-icono .ico { width: 30px; height: 30px; }
.sistema-icono-ok { background: var(--exito); color: var(--exito-texto); }
.sistema-icono-alerta { background: var(--pendiente); color: var(--pendiente-texto); }
.sistema-icono-espera { background: var(--primario-suave); color: var(--primario); }
.codigo-aplicacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; background: var(--primario-suave); border-radius: var(--radio-aviso); padding: 14px 18px; }
.codigo-aplicacion .placa { font-size: 22px; font-weight: 700; color: var(--marino); }

/* ---------- Diálogo ---------- */
.dialogo { border: 0; border-radius: var(--radio-heroe); padding: 0; width: min(480px, calc(100vw - 32px)); box-shadow: var(--sombra-dialogo); color: var(--texto); background: var(--superficie); }
.dialogo::backdrop { background: rgba(20, 26, 40, .55); }
.dialogo-cuerpo { padding: 26px; display: flex; flex-direction: column; gap: 16px; margin: 0; }
.dialogo-mensaje { color: var(--texto-2); }
.dialogo-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* ---------- Teléfono y tableta ---------- */
@media (max-width: 1023px) {
    .app-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .app-principal { padding: 24px var(--relleno-pagina-movil) 32px; }
    .encabezado { padding: 10px var(--relleno-pagina-movil); }
    .marca-logo { height: 32px; }
    .cuenta-nombre, .solo-escritorio { display: none; }
    .encabezado .btn-chico { width: var(--alto-control); height: var(--alto-control); padding: 0; }
    .pie { padding: 16px var(--relleno-pagina-movil) 20px; justify-content: center; text-align: center; }
    h1 { font-size: 26px; }
    .dos-columnas { grid-template-columns: minmax(0, 1fr); }
    .heroe { grid-template-columns: minmax(0, 1fr); padding: 24px; }
    .saludo h1 { font-size: 28px; }
    .avance-lateral { display: none; }
    .barra-avance { display: flex; }
}
@media (max-width: 560px) {
    .tarjeta { padding: var(--relleno-tarjeta-movil); }
    .rejilla-2, .rejilla-3 { grid-template-columns: minmax(0, 1fr); }
    .paso { flex-basis: 50%; }
    .paso:not(:last-child)::after { display: none; }
    .heroe-pasos { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .heroe-pasos li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 12px 14px; }
    .heroe-numero { grid-row: span 2; margin: 0; align-self: center; }
    .carga-foto { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px; }
    .carga-foto-marco { width: 84px; }
    .indicaciones-boton { padding: 14px var(--relleno-tarjeta-movil); }
    .indicaciones-lista { padding: 0 var(--relleno-tarjeta-movil) var(--relleno-tarjeta-movil); }
}
@media print {
    body { background: #fff; }
    .encabezado, .pie, .barra-avance, .no-imprimir, .saltar { display: none !important; }
    .app-principal { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}