:root {
    --bg: #f2f5fb;
    --card: #fff;
    --accent: #1a5276;
    --accent-hover: #2c3e50;
    --text: #2d3748;
    --text-muted: #4a5568;
    --border: #e2e8f0;
    --error: #c53030;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: "Open Sans", -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    min-height: 100dvh; /* Mejor soporte viewport en móviles (barra de direcciones) */
    overflow-x: hidden;
}

/* Modal de bienvenida: centrado, llama la atención, con scroll en móviles */
.modal-inicio {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    background: rgba(26, 82, 118, 0.35);
    backdrop-filter: blur(4px);
    animation: modal-inicio-fade 0.3s ease;
}
.modal-inicio--cerrado {
    display: none;
}
@keyframes modal-inicio-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-inicio__box {
    background: var(--card);
    border-radius: 16px;
    padding: 2rem;
    max-width: 440px;
    width: 100%;
    margin: 0 0 2rem 0; /* Espacio inferior al hacer scroll en móviles */
    flex-shrink: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    animation: modal-inicio-scale 0.35s ease;
}
@keyframes modal-inicio-scale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.modal-inicio__logo {
    background: linear-gradient(135deg, var(--accent) 0%, #1e3a5f 100%);
    margin: -2rem -2rem 1.5rem -2rem;
    padding: 0.35rem;
    text-align: center;
    border-radius: 16px 16px 0 0;
}
.modal-inicio__logo img {
    height: 5rem;
    width: auto;
    display: block;
    margin: 0 auto;
}
.modal-inicio__titulo {
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: center;
}
.modal-inicio__aviso {
    margin-bottom: 1.25rem;
}
.modal-inicio__aviso.aviso-uso { font-size: 0.9rem; }
.modal-inicio__btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1.5rem;
}

.layout { max-width: 560px; margin: 0 auto; padding: 1.5rem; }

.header {
    text-align: center;
    margin-bottom: 1.25rem;
}
.header .titulo {
    font-size: 1.5rem;
    color: var(--accent);
    font-weight: 700;
}

/* Stepper: visible solo en pasos 1-6 */
.stepper {
    margin-bottom: 1.25rem;
    display: none;
}
.stepper.stepper--visible {
    display: block;
}
.stepper__text {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.5rem;
}
.stepper__bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.stepper__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #2980b9);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}

.main { background: var(--card); border-radius: 12px; padding: 2rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid var(--border); }

.paso { display: none; }
.paso.activo { display: block; }
.paso h2 { font-size: 1.25rem; margin-bottom: 1rem; color: var(--text); }
.paso h3 { font-size: 1rem; margin: 1rem 0 0.5rem; color: var(--text-muted); }
.paso .hint { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1rem; }

.aviso-uso {
    background: #edf2f7;
    border-left: 4px solid var(--accent);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: var(--text);
    border-radius: 0 8px 8px 0;
}
.aviso-uso p { margin-bottom: 0.75rem; }
.aviso-uso p:last-child { margin-bottom: 0; }

/* Modalidad: opciones tipo tarjeta */
.modalidad-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.modalidad-opcion {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    border: 2px solid var(--border);
    background: var(--card);
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.modalidad-opcion:hover {
    border-color: var(--accent);
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(26, 82, 118, 0.1);
}
.modalidad-opcion.modalidad-opcion--selected {
    border-color: var(--accent);
    background: linear-gradient(135deg, #2c3e50, #2980b9);
    color: #fff;
    box-shadow: 0 4px 12px rgba(26, 82, 118, 0.25);
}
.modalidad-opcion__icon { font-size: 2rem; margin-bottom: 0.5rem; display: block; }
.modalidad-opcion__titulo { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.35rem; display: block; }
.modalidad-opcion__texto { font-size: 0.85rem; line-height: 1.4; opacity: 0.9; }
.modalidad-opcion.modalidad-opcion--selected .modalidad-opcion__texto { opacity: 0.95; }

/* Chips (reutilizando estilo siig-cdn componentes/chips.css) */
.ui-chips { display: block; margin-bottom: 1.5rem; }
.ui-chips__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ui-chips__item {
    cursor: pointer;
    color: #4a5568;
    background: #e2e8f0;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.45rem 0.9rem;
    display: inline-flex;
    align-items: center;
    transition: background .2s, color .2s, border-color .2s;
    font-family: inherit;
}
.ui-chips__item:hover {
    background: #cbd5e1;
    color: #2d3748;
}
.ui-chips__item.ui-chips__item--selected {
    background: linear-gradient(135deg, #2c3e50, #2980b9);
    color: #fff;
    border-color: #1a5276;
}
.ui-chips__item.ui-chips__item--selected:hover {
    background: linear-gradient(135deg, #34495e, #3498db);
}

.campo {
    display: block;
    margin-bottom: 1.25rem;
}
.campo > span:not(.contador) { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.9rem; }
.campo span em { color: var(--error); }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="date"],
.campo input[type="file"],
.campo textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
}
/* Corrige input date en Chrome iOS: el padding en el input provoca width incorrecto (bug WebKit).
   El wrapper .campo-input-date lleva el padding/borde; el input interno sin padding evita el bug. */
.campo-input-date {
    display: block;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}
.campo-input-date:focus-within {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(26, 82, 118, 0.2);
}
.campo-input-date input {
    width: 100%;
    min-width: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    font-size: 1rem;
    font-family: inherit;
    color: inherit;
    text-align: left;
}
.campo-input-date input:focus {
    outline: none;
}
.campo.error .campo-input-date {
    border-color: var(--error);
}
.campo input:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(26, 82, 118, 0.2);
}
.campo small { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--text-muted); }
.campo .contador { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
.campo.error input,
.campo.error textarea { border-color: var(--error); }

.nav-pasos {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.nav-pasos .btn:first-child { margin-right: auto; }

.btn {
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
}
.btn--icon { display: inline-flex; align-items: center; gap: 0.5rem; }
.btn--icon .fa-solid, .btn--icon .fa-regular { font-size: 0.9em; }
.btn-primario { background: var(--accent); color: #fff; }
.btn-primario:hover { background: var(--accent-hover); }
.btn-primario:disabled { opacity: 0.85; cursor: wait; }
#btn-enviar.is-loading .btn-enviar__text,
#btn-enviar.is-loading .btn-enviar__icon { display: none; }
#btn-enviar.is-loading .btn-enviar__spinner { display: inline-block !important; }
.btn-secundario { background: #edf2f7; color: var(--text); }
.btn-secundario:hover { background: #e2e8f0; }

/* Paso 6: resumen por secciones */
.resumen {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}
.resumen-seccion {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.resumen-seccion:last-child { border-bottom: none; }
.resumen-seccion__titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.resumen-seccion__titulo .icon { font-size: 1rem; opacity: 0.9; }
.resumen-seccion__contenido { color: var(--text); line-height: 1.5; }
.resumen-seccion__contenido p { margin: 0.25rem 0; }
.resumen-seccion__contenido p:first-child { margin-top: 0; }
.resumen-seccion__contenido strong { color: var(--text); font-weight: 600; }
.resumen-aviso-envio {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: #edf2f7;
    border-left: 4px solid var(--accent);
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
    color: var(--text);
}

.mensaje-envio { margin-top: 1rem; font-size: 0.9rem; }
.mensaje-envio.error { color: var(--error); }

.paso-gracias { text-align: center; }
.paso-gracias__icon {
    margin-bottom: 1rem;
    display: block;
}
.paso-gracias__icon .icon {
    font-size: 4rem;
    color: #2ecc71;
}
.codigo-badge {
    background: #f0f9ff;
    border: 2px solid var(--accent);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
    display: inline-block;
    text-align: center;
}
.codigo-badge__label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}
.codigo-badge__valor {
    display: block;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--accent);
    margin-bottom: 1rem;
    font-family: ui-monospace, monospace;
}
.codigo-badge__copiar { margin-top: 0; }
.codigo-badge__copiar.copied .codigo-badge__copiar-texto::after { content: ' ✓ Copiado'; }
.paso-gracias .hint { margin-top: 1rem; }

/* Aviso protección de datos (paso 7) */
.aviso-datos {
    margin-top: 1.5rem;
    text-align: left;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem 1rem 1rem 1.25rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.aviso-datos__icon {
    font-size: 1.25rem;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.aviso-datos__texto {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
}

@media (max-width: 520px) {
    .layout { padding: 1rem; }
    .main { padding: 1.5rem; }
    .chips { flex-direction: column; }
    .chip { width: 100%; text-align: center; }
    /* Modal en móviles: más padding para scroll cómodo */
    .modal-inicio { padding: 1rem; }
    .modal-inicio__box { padding: 1.5rem; margin-bottom: 1.5rem; }
    .modal-inicio__logo img { height: 4rem; }
}