* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    background: linear-gradient(135deg, rgba(248, 164, 20, 0.1), rgba(67, 112, 179, 0.1));
    position: relative;
    margin: 0;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><path d="M200 350c-50-20-80-60-80-120 0-80 60-140 140-140s140 60 140 140c0 60-30 100-80 120-20-40-60-60-120 0z" fill="%23f8a414" opacity="0.6"/><path d="M150 280c-30-15-50-40-50-80 0-50 40-90 90-90s90 40 90 90c0 40-20 65-50 80-15-25-40-40-80 0z" fill="%234370b3" opacity="0.7"/></svg>') center/contain no-repeat;
    opacity: 0.3;
    z-index: -1;
}

.container {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.form-wrapper {
    background: rgba(248, 249, 250, 0.95);
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 900px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
}

.form-logo {
    position: absolute;
    top: 2rem;
    left: 2rem;
    width: 220px; /* Aumentado de 150px */
    height: auto;
    z-index: 10;
}

.form-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    min-height: 54px; /* Height of a button + margins */
    margin-top: 50px; /* Space for the absolute positioned logo */
}

.top-back-button-container {
    position: absolute;
    display: none;
}

.top-back-button-container .btn {
    margin: 0;
}

.top-back-button-container .btn-icon {
    display: none;
}

.step-indicator {
    display: flex;
    justify-content: center;
    width: 100%;
}

.step {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.5rem;
    font-weight: 600;
    color: #666;
    transition: all 0.3s ease;
    font-size: 1rem;
    cursor: default;
}

.step.navigable {
    cursor: pointer;
}

.step.completed {
    background: #a9d6e5; /* Light Blue */
    color: #212529;
}

.step.active {
    background: #4370b3; /* Original Blue */
    color: white;
}

.step.highest {
    background: #f8a414; /* Orange */
    color: white;
}

.step.navigable:hover {
    transform: translateY(-2px);
}

.form-title {
    font-size: 2rem;
    font-weight: 700;
    color: #2c2c2c;
    margin-bottom: 0.5rem;
    text-align: center;
}

.form-subtitle {
    color: #666;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

/* --- NEW: Parent for grids to control spacing --- */
.form-grid-parent {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Reduced vertical gap between grid rows */
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.form-grid-info-laboral {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem; /* Reduced vertical gap */
}

#info-laboral-section, #info-laboral-section-conyuge {
    margin-bottom: 2.5rem; /* Space after section */
}

.form-grid-demographics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}


.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
    font-size: 0.9rem;
}

.question-label {
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: #333;
    line-height: 1.5;
}

input, select, textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 2px solid #e1e5e9;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    background: #fafbfc;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #f8a414;
    background: white;
    box-shadow: 0 0 0 3px rgba(248, 164, 20, 0.1);
}

input.is-invalid, select.is-invalid, textarea.is-invalid, .perfil-trigger-container.is-invalid, .upload-area.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

.selection-group.is-invalid {
     border-color: #dc3545 !important;
}

.radio-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.radio-section-pep, .radio-section-fatca, .radio-section-small {
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

/* --- UPDATED: Generic class for radio/checkbox containers --- */
.selection-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    border: 2px solid #e1e5e9;
    border-radius: 10px;
    background: #fafbfc;
    transition: all 0.3s ease;
    cursor: pointer;
}

.selection-group:hover {
    border-color: #f8a414;
}

.selection-group input[type="radio"], .selection-group input[type="checkbox"] {
    width: auto;
    margin: 0;
    transform: scale(1.3);
    accent-color: #f8a414;
}

.selection-group label {
    margin: 0;
    font-size: 0.9rem;
    cursor: pointer;
    flex: 1;
}

/* --- NEW: Compact modifier for selection groups --- */
.selection-group.compact {
    padding: 0.5rem 1rem;
}

.section-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    border-bottom: 2px solid #f8a414;
    padding-bottom: 0.5rem;
}

/* --- NEW: Spacing for section titles --- */
.section-title.spaced-top {
    margin-top: 2.5rem;
}

/* --- PEP STYLES --- */
.pep-details-container {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
}

.pep-details-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    font-size: 1rem;
}

#especificar-proposito-group {
    margin-top: 1.5rem;
}

.btn {
    padding: 0.8rem 1.5rem;
    background: #f8a414;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn:hover {
    background: #e6940f;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(248, 164, 20, 0.3);
}

.btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    background: #e9ecef;
    color: #495057;
    border: 1px solid #ced4da;
    margin-right: 1rem;
}

.btn-secondary:hover {
    background: #dee2e6;
    border-color: #adb5bd;
    color: #212529;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.btn-add {
    background: #4370b3;
    margin-top: 0.5rem;
    margin-bottom: 0rem;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
}

.btn-add:hover {
    background: #365a94;
}

.button-group {
    display: flex;
    justify-content: space-between;
}

.step-content {
    display: none;
    width: 100%;
}

.step-content.active {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.step-content-main {
    flex-grow: 1;
}

.button-group {
    margin-top: auto;
    padding-top: 2rem;
}

.confirm-email-label {
    font-size: 1rem;
    color: #333;
    margin-bottom: 0.75rem;
}

.input-with-icon-wrapper {
    position: relative;
    border: 2px solid #e1e5e9;
    border-radius: 10px;
    transition: all 0.3s ease;
    background-color: #e9ecef;
    cursor: pointer;
}

.input-with-icon-wrapper:hover {
    border-color: #f8a414;
}

.input-with-icon-wrapper input {
    padding-right: 7.5rem; /* Space for the icon button */
    border: none;
    background: transparent;
    cursor: pointer;
}

.btn-icon-inner {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    height: 90%;
    padding: 0 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #6c757d;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.input-with-icon-wrapper:hover .btn-icon-inner {
    color: #212529;
}

.btn-icon-inner svg {
    width: 18px;
    height: 18px;
}

.success-message {
    text-align: center;
    padding: 3rem;
}

.success-icon {
    font-size: 5rem;
    color: #f8a414;
    margin-bottom: 2rem;
}

.hidden, .file-input-hidden {
    display: none !important;
}

.cuenta-bancaria {
    border: 2px solid #e1e5e9;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: white;
}

.btn-remove {
    background: #dc3545;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    margin-top: 1rem;
}

.btn-remove:hover {
    background: #c82333;
}

/* --- STYLES FOR STEP 2 --- */
#cuentas-layout-manager {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#cuentas-choice-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
}

.cuenta-choice-card {
    flex: 1;
    padding: 2rem 1.5rem;
    border: 2px dashed #4370b3;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: rgba(67, 112, 179, 0.05);
}

.cuenta-choice-card:hover {
    border-style: solid;
    background-color: rgba(67, 112, 179, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(67, 112, 179, 0.15);
}

.cuenta-choice-card h3 {
    color: #4370b3;
    margin-bottom: 0.5rem;
}

.cuenta-choice-card p {
    color: #666;
    font-size: 0.9rem;
}

/* --- DYNAMIC TABLE STYLES --- */
.dynamic-table-container {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dynamic-table-title {
    font-weight: 600;
    color: #4370b3;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.dynamic-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.dynamic-table th {
    background-color: #f1f3f5;
    color: #495057;
    padding: 0.8rem 1rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

.dynamic-table td {
    padding: 0.8rem;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.dynamic-table tr:last-child td {
    border-bottom: none;
}

.dynamic-table input, .dynamic-table select {
    padding: 0.6rem;
    font-size: 0.9rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
}

.dynamic-table input[type="text"], .dynamic-table input[type="number"], .dynamic-table select {
    min-width: 100px;
}

.dynamic-table .radio-cell {
    white-space: nowrap;
}

.dynamic-table .radio-cell label {
    display: inline-flex;
    align-items: center;
    margin-right: 1rem;
    margin-bottom: 0;
    font-weight: 400;
    gap: 0.3rem;
    cursor: pointer;
}

.dynamic-table .radio-cell input[type="radio"] {
    width: auto;
    transform: scale(1.1);
}

.dynamic-table .total-row {
    background-color: #f8f9fa;
}

.dynamic-table .total-row td {
    font-weight: 600;
}

.dynamic-table .total-cell {
    text-align: right;
    padding-right: 1rem !important;
}

.dynamic-table .btn-remove {
    margin: 0;
    padding: 0.4rem 0.8rem;
}

/* --- NEW SECTION STYLES --- */
#inversor-calificado-section {
    margin-bottom: 2.5rem;
}

.fondos-mutuos-container {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.fondos-mutuos-container .question-label {
    font-size: 0.85rem;
}

.fondos-mutuos-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}
.fondos-mutuos-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
    vertical-align: middle;
}
.fondos-mutuos-table tr:last-child td {
    border-bottom: none;
}
.fondos-mutuos-table td:first-child {
    width: 70%;
}
.fondos-mutuos-table td:last-child {
    text-align: right;
}
.radio-section-inline {
    display: inline-flex;
    gap: 0.5rem;
}

.fondos-mutuos-container .selection-group {
    padding: 0.6rem 0.8rem;
    gap: 0.5rem;
}
.fondos-mutuos-container .selection-group label {
    font-size: 0.85rem;
}
.fondos-mutuos-container .selection-group input[type="radio"] {
    transform: scale(1.1);
}
#fondos-mutuos-section {
    margin-bottom: 2rem;
}
.mandato-final {
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.6;
    margin-top: 1.5rem;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 10px;
}

/* --- PERFIL INVERSIONISTA STYLES --- */
#perfil-score-display {
    font-size: 0.8rem;
    color: #6c757d;
    text-align: right;
    margin-top: 0.5rem;
}
.perfil-trigger-container {
    display: flex;
    gap: 1rem;
    border: 2px solid #e1e5e9;
    border-radius: 10px;
    padding: 0.5rem;
    transition: all 0.3s ease;
}
.perfil-trigger-container.completed {
    border-color: #198754;
}
.perfil-trigger-container .selection-group {
    flex: 1;
    justify-content: center;
    background-color: #e9ecef;
    border-color: #e9ecef;
}
.perfil-trigger-container .selection-group.selected {
    background-color: #f8a414;
    border-color: #e6940f;
}
.perfil-trigger-container .selection-group.selected label {
     color: white;
     font-weight: 700;
}

.perfil-questions-area {
    flex-grow: 1;
    overflow-y: auto;
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 10px;
}
.perfil-question {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e1e5e9;
}
.perfil-question:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.perfil-question h4 {
    margin-bottom: 1rem;
    font-weight: 600;
    color: #333;
}
.perfil-question .selection-group {
    background-color: #fff;
}
.perfil-question .selection-group:hover {
    border-color: #f8a414;
}

/* --- UPLOAD SECTION STYLES --- */
.upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}
.file-upload-container {
    width: 100%;
}
.upload-area {
    border: 2px dashed #ced4da;
    border-radius: 10px;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upload-area:hover {
    border-color: #f8a414;
    background-color: #f8f9fa;
}
.upload-placeholder svg {
    color: #6c757d;
    margin-bottom: 1rem;
}
.upload-placeholder p {
    font-weight: 500;
    color: #495057;
    margin: 0;
}
.upload-preview {
    position: relative;
    width: 100%;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}
.upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}
.upload-preview .file-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
    text-align: center;
}
.file-info .file-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}
.file-info .file-name {
    font-size: 0.8rem;
    word-break: break-all;
}
.btn-remove-upload {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
}

/* --- FATCA STYLES --- */
.fatca-question-group p {
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: #333;
    line-height: 1.5;
}

#fatca-details {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e1e5e9;
}

.fatca-details-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 1070;
    opacity: 1;
    transition: opacity 0.4s ease, bottom 0.4s ease;
    font-weight: 500;
    color: #fff;
    background-color: #333; /* neutro, se sobreescribe con success/error */
}

/* Verde para avisos positivos */
.toast-success {
    background-color: #198754;
}

/* Rojo para errores (el mismo que tenías antes) */
.toast-error {
    background-color: #dc3545;
}


.toast.hidden {
    opacity: 0;
    bottom: -100px;
    pointer-events: none;
}

.dynamic-tooltip {
    position: fixed;
    background: #2c2c2c;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    z-index: 1080;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    max-width: 250px;
    text-align: center;
}

.dynamic-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    transition: opacity 0.3s ease;
}

.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-title {
    text-align: center;
    margin-bottom: 10px;
    color: #333;
    font-size: 1em;
}

.contract-text-area {
    flex-grow: 1;
    overflow-y: auto;
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.contract-text-area p {
    margin-bottom: 1em;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-button-group {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.modal-button-group .btn {
    margin-top: 0;
}

@media (max-width: 768px) {
    .container {
        padding: 0;
    }
    .form-wrapper {
        padding: 1rem;
        min-height: 100vh;
        border-radius: 0;
    }

    .form-logo {
        position: static;
        display: block;
        width: 180px; /* Aumentado de 140px */
        margin: 0.5rem auto;
    }

    .form-header {
        flex-direction: column-reverse;
        margin-bottom: 2rem;
        margin-top: 0; /* Reset margin for mobile */
    }
    
    .top-back-button-container {
        display: none;
    }

    .step-indicator {
        margin: 0 auto;
    }

    .step {
        width: 35px; /* Adjusted for more steps */
        height: 35px; /* Adjusted for more steps */
        margin: 0 0.2rem; /* Adjusted for more steps */
        font-size: 0.9rem;
    }

    .form-grid, .form-grid-3, .form-grid-demographics, .form-grid-info-laboral {
        grid-template-columns: 1fr;
    }
    
    .form-grid-parent .form-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        flex-direction: column;
    }
    
    .perfil-trigger-container {
        flex-direction: column;
    }

    .form-title {
        font-size: 1.5rem;
    }
    
    #cuentas-choice-container {
        flex-direction: column;
    }

    .button-group {
        flex-direction: row;
        gap: 1rem;
    }

    .button-group .btn {
        flex: 1;
    }
    
    .btn-secondary {
        margin-right: 0;
    }
    
    .dynamic-table {
        font-size: 0.8rem;
    }

    .dynamic-table th, .dynamic-table td {
        padding: 0.4rem;
    }
    
    .modal-content {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        padding: 1.5rem 1rem;
    }
    .modal-button-group {
        flex-direction: column-reverse;
    }
    .form-grid, .form-grid-3, .form-grid-demographics, .form-grid-info-laboral, .form-grid-direccion /* <- Clase añadida aquí */ {
        grid-template-columns: 1fr;
    }
    
    .form-grid-parent .form-grid {
        grid-template-columns: 1fr;
    }

    /* --- INICIO: ESTILOS PARA TABLAS RESPONSIVAS EN MÓVILES --- */

    /* 1. Ocultamos el encabezado original de la tabla en móviles. */
    .dynamic-table thead {
        display: none;
    }

    /* 2. Hacemos que la tabla y sus elementos se comporten como bloques para apilarse. */
    .dynamic-table, .dynamic-table tbody, .dynamic-table tr, .dynamic-table td {
        display: block;
        width: 100%;
    }

    /* 3. Estilo para cada fila, que ahora se verá como una "tarjeta". */
    .dynamic-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #e1e5e9;
        border-radius: 10px;
        padding: 0.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .dynamic-table tbody tr:last-child {
        margin-bottom: 0;
    }
    
    /* 4. Reseteamos los bordes de las celdas y añadimos espaciado. */
    .dynamic-table td {
        border: none;
        padding: 0.5rem 0.2rem;
        display: flex; /* Usamos flex para alinear etiqueta y campo */
        justify-content: space-between; /* Espacio entre etiqueta y campo */
        align-items: center; /* Centramos verticalmente */
        text-align: right; /* Alineamos el contenido de la celda (el input) a la derecha */
        min-height: 40px; /* Altura mínima para mejor toque */
    }
    
    /* 5. La magia: usamos el pseudo-elemento ::before para mostrar la etiqueta de la columna. */
    .dynamic-table td::before {
        content: attr(data-label); /* Obtenemos el texto de la etiqueta del atributo data-label */
        font-weight: 600;
        color: #495057;
        text-align: left;
        margin-right: 1rem; /* Espacio entre la etiqueta y el input */
        flex-shrink: 0;
    }
    
    /* 6. Ajustes específicos para celdas con radios y botones. */
    .dynamic-table .radio-cell {
        flex-direction: column; /* Apilamos etiqueta y opciones de radio */
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    /* Aseguramos que el botón de eliminar ocupe todo el ancho disponible */
    .dynamic-table td:has(.btn-remove) {
        padding-top: 0.5rem;
    }
     .dynamic-table .btn-remove {
        width: 100%;
        margin: 0;
    }
     .dynamic-table td:has(.btn-remove)::before {
        display: none; /* No necesitamos etiqueta para el botón de eliminar */
    }

    /* 7. Ocultamos la fila de total, que no es necesaria en esta vista. */
    .dynamic-table .total-row {
        display: none;
    }

    /* --- FIN: ESTILOS PARA TABLAS RESPONSIVAS EN MÓVILES --- */

    /* --- INICIO: AJUSTES DE ESPACIADO PARA MÓVILES --- */

    /* 1. Reduce el margen inferior de los grupos de campos para un diseño más compacto. */
    .form-group {
        margin-bottom: 1.1rem; 
    }

    /* 2. Añade un margen superior a los títulos de sección para separarlos de los campos anteriores. */
    .form-group .section-title {
        margin-top: 1.8rem;
    }

    /* 3. Evita el margen superior extra en el primer título de cada paso. */
    .step-content-main > .form-group:first-child .section-title {
        margin-top: 0;
    }

    /* --- INICIO: AJUSTES PARA ACORTAR ESPACIO VERTICAL EN MÓVILES --- */
    .form-grid-compact {
        /* Reduce el espacio vertical entre filas de campos a un valor más pequeño */
        gap: 0.5rem;
    }

    .form-grid-compact .form-group {
        /* Elimina el margen inferior de los campos para que el 'gap' del grid sea el único que controle el espacio */
        margin-bottom: 0;
    }
    /* --- FIN: AJUSTES PARA ACORTAR ESPACIO VERTICAL EN MÓVILES --- */
    
    /* --- FIN: AJUSTES DE ESPACIADO PARA MÓVILES --- */
}

.form-grid-demographics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* --- NUEVO: Grid específico para la dirección --- */
.form-grid-direccion {
    display: grid;
    /* Dirección ocupa el doble de espacio que Barrio */
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}


.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* --- ESTILOS PARA EL ÍCONO DE TOOLTIP MÓVIL --- */
.tooltip-info-icon {
    /* Por defecto, el ícono estará oculto en la vista de escritorio */
    display: none; 
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-color: #4370b3; /* Azul institucional */
    color: white;
    border-radius: 30%;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    font-family: serif; /* Para una 'i' más estilizada */
    font-style: normal;
    cursor: pointer;
    z-index: 5;
    transition: background-color 0.2s;
    user-select: none; /* Evita que el texto 'i' se seleccione */
    padding: 10px;
}

.tooltip-info-icon:hover {
    background-color: #365a94; /* Tono más oscuro al pasar el cursor */
}

/* En la media query para móviles, hacemos visible el ícono */
@media (max-width: 768px) {
    .tooltip-info-icon {
        display: flex; /* Cambiamos a flex para que sea visible y centrar la 'i' */
    }

    /* Ajuste para que el ícono no se superponga con el texto en campos de input/select */
    .form-group input, .form-group select {
        padding-right: 40px !important;
    }

    .form-group .tooltip-info-icon {
        top: auto; /* Anulamos el posicionamiento desde arriba */
        bottom: 12px; /* Posicionamos el ícono a 12px desde abajo */
        transform: none; /* Quitamos la transformación que lo centraba */
    }
}

/* --- ESTILOS PARA GRUPO DE INPUT Y BOTÓN (PASO 0) --- */
.input-group-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.input-group-row > input {
    flex-grow: 1; /* El input de correo ocupa el espacio disponible */
}

.input-group-row > button {
    flex-shrink: 0; /* El botón mantiene su tamaño */
    margin-top: 0;
}

/* --- ESTILO PARA CAMPOS DE TEXTO CORTOS --- */
.input-short {
    width: 12rem;
    max-width: 100%; /* Asegura que no se desborde en pantallas muy pequeñas */
}

/* Vista para móviles: el botón se coloca debajo del campo de correo */
@media (max-width: 768px) {
    .input-group-row {
        flex-direction: column;
        align-items: stretch;
    }

    .input-group-row > button {
       margin-top: 0.5rem;
    }
}

.btn.btn-small {
    padding: 0.5rem 1.1rem;
    font-size: 0.8rem;
}

#codigo-verificacion {
    font-weight: bold;
}

#codigo-verificacion::placeholder {
    font-weight: normal;
}
html, body {
  overflow-x: hidden; /* previene que un desborde empuje otra “copia” a la vista */
}
 * {
     margin: 0;
     padding: 0;
 }
     .form-wrapper {
  max-width: 900px;
  margin: 0 auto; /* fuerza centrado real */
}
.typeahead-list{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border:1px solid #e5e7eb; border-radius:6px;
  max-height:240px; overflow:auto; margin-top:4px; z-index:20; display:none;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.typeahead-item{
  padding:8px 10px; cursor:pointer;
}
.typeahead-item[aria-selected="true"],
.typeahead-item:hover{
  background:#f1f5f9;
}
.typeahead-empty{ padding:8px 10px; color:#6b7280; }
@media (max-width: 480px) {
  .form-grid-demographics {
    grid-template-columns: 1fr;   /* una sola columna en mobile */
    row-gap: 0.75rem;             /* separación vertical entre los dos campos */
  }

  .form-grid-demographics .form-group {
    min-width: 0;                 /* previene desbordes raros en iOS */
  }
}