/* =========================================================
   0) Fuente y reset básico
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Montserrat:wght@500;600;700&display=swap');

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /*font-family: 'Poppins', system-ui, -apple-system;*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
   /* background-color: #f5f7f6;*/
}

/* Normalizamos inputs básicos */

button, input, select, textarea {
    font-family: inherit;
    box-sizing: border-box;
}

button {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

.btn-opcion,
.btn-contacto,
.btn-circular,
.btn-siguiente,
.btn-atras {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

.btn-opcion2 {
    display: flex;
    align-items: center;
    justify-content: space-between; /* texto izq, icono der */
    width: 100%;
}

.btn-opcion2-texto {
    flex: 1;
    text-align: left;
}

.btn-opcion2-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
}

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

/* =========================================================
   1) Paleta / tokens globales (marca y escalas)
   - Evita cambiar nombres; así todo mantiene coherencia.
   ========================================================= */
:root {
    /* Marca */
    --brand-dark: #006d4a; /* fondo verde institucional */
    --brand-ink: #0A6644; /* texto verde oscuro */
    --brand-accent: #AECB35; /* verde lima botones/bordes */
    /* Tipografías / tamaño base */
    --fs-title: clamp(22px, 5vw, 26px);
    --fs-body: clamp(14px, 4vw, 16px);
    /* Contenedor */
    --container-max: 400px; /* ancho máximo móvil grande */
    --page-pad: 20px; /* padding de pantallas */
    /* Sombras y radios por defecto */
    --shadow-soft: 0 4px 12px rgba(0,0,0,.12);
    --shadow-strong: 0 10px 30px rgba(0,0,0,.20);
    --radius-lg: 25px;
    --radius-md: 12px;
    --gray-green: #6B8D83;
    --top-gap: clamp(16px, 20svh, 5%);
}

/* =========================================================
   2) Pantallas base (fondos por página)
   ========================================================= */
.pantalla-verde {
    background-color: var(--brand-dark);
    color: #fff;
    width: 100svw;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
}

.pantalla-blanca {
    background-color: #fff;
    /*color: var(--brand-ink);*/
    /*width: 100svw;*/
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
}

/* =========================================================
   3) Contenedor principal de la app
   ========================================================= */
.contenedor-app {
    width: 100%;
    max-width: var(--container-max);
    display: flex;
    flex-direction: column;
    justify-content: center;    
}
.contenedor-centrado {
    align-items: center;
    align-content: center;
    text-align: center;
}

.texto-procesando {
    font-size: 18px;
    color: #003300;    
}

/* =========================================================
   4) Cabecera / títulos / descripción
   ========================================================= */
.logo {
    display: flex;
    justify-content: center; /* centra horizontal */
    align-items: center; /* centra vertical si .logo tiene altura */
    margin-bottom: 10px;
}

    .logo img {
        width: 200px;
        height: auto;
        display: block;
    }

.titulo {
    color: white;
    font-size: var(--fs-title);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.titulo-strong {
    font-weight: 700;
}
.titulo-strong2 {
    font-weight: 700;
}

.marca-central {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px auto 24px;
}

    .marca-central img {
        width: min(52vw, 240px);
        height: auto;
        display: block;
    }

.descripcion {
    color: white;
    font-size: var(--fs-body);
    line-height: 1.6;
    margin: 10px 0 10px 0;
    text-align: center;
}
.descripcion2 {
    color: white;
    font-size: var(--fs-body);
    line-height: 1;
    margin: 10px 0 10px 0;
    text-align: center;
}

h1, h2, h3, h4 {
    color: #006d4a;
    text-align: center;
    font-family: Poppins;
    margin-bottom: 20px;
}

h5, h6 {
    color: #006d4a;
    text-align: left;
    font-family: Poppins;
    margin-bottom: 20px;
}

.textos {
    color: #006d4a;
}

/* Utilidades */
.justificado {
    text-align: justify;
}
.justificado2 {
    text-align: center;
}
.mensaje-centrado {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
}

.error-msg {
    color: #c0392b;
    font-size: .9em;
    margin-top: 5px;
    display: block;
}

.msg-panel {
    background: #FFFFFF;
    color: #0A6644; /* Verde de marca (ajústalo si usas otro) */
    border-radius: 14px;
    padding: 14px 16px;
    text-align: center;
    line-height: 1.35;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    width: min(86%, 400px);
    margin: 14px auto 18px;
}

/* (Opcional) contenedor del icono para centrarlo */
.icon-ok-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 16px;
}
.icon-ok {
    font-size: 8rem;
    color: #AECB35;
}

/* =========================================================
   5) Botones (primario / secundario) + alias de compatibilidad
   ========================================================= */
.btn-primary,
.btn-secondary {
    background-color: var(--brand-accent);
    color: var(--brand-ink);
    border: none;
    border-radius: var(--radius-lg);
    padding: 15px;
    width: 80%;    
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    font-family: Montserrat;
    min-height: 44px;
    font-size: 1rem;
}
    .btn-primary:hover,
    .btn-secondary:hover {
        background: gray;
        border: none;
    }
    .btn-primary:active,
    .btn-primary:focus,
    .btn-primary:focus-visible,
    .btn-secondary:active,
    .btn-secondary:focus,
    .btn-secondary:focus-visible {
        background: gray !important;
        color: #fff !important;
        /* “borde” gris mientras está presionado/foco */
        border: 2px solid gray !important; /* si quieres borde real */
        box-shadow: 0 0 0 3px rgba(128,128,128,.35) !important; /* aro gris */
        outline: none !important;
        font-family: Montserrat;
        font-size: 1rem;
    }

    .btn-primary.btn-primary--small {
        font-size: 0.8rem; /* un poco más pequeño */
        line-height: 1.9;
        white-space: nowrap; /* ? evita que el texto se corte en 2 líneas */
        min-height: 44px;
    }


.btn-atras {
    background: #fff;
    color: #000;
    border: 2px solid #ccc;
    border-radius: 50%;
    width: 60px;
    height: 50px;
    font-size: 16px;
    cursor: pointer;
}
    .btn-atras:hover {
        background: gray;
    }

.btn-siguiente {
    background-color: var(--brand-dark);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    padding: 15px;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Montserrat';
}

    .btn-siguiente:hover {
        background: gray;
    }

/* =========================================================
   6) Footer (logo credilinksv)
   ========================================================= */
.footer-app {
    margin-top: 25px;
    text-align: center;    
}

    .footer-app img {
        width: 160px;
        height: auto;
        display: inline-block;
    }
/* Variante texto (si no hay imagen) */
.brand-footer {
    font-size: 40px;
    font-weight: 700;
    color: var(--brand-accent);
    letter-spacing: .5px;
}

    .brand-footer span {
        color: #fff;
    }

/* =========================================================
   7) Formato general de inputs (altura/anchura uniforme)
   - Tema encapsulado en .form-app para no afectar todo.
   ========================================================= */
.form-app {
    --field-height: 56px;
    --field-radius: 14px;
    --field-pad-x: 14px;
    --field-fs: 15px;
    --field-bg: #ffffff;
    --field-bd: rgba(255,255,255,.35);
    --field-bd-focus: var(--brand-accent);
    --field-ink: var(--brand-ink);
    --field-placeholder: #8DA9A0;
    --field-disabled-bg: #F2F6F4;
    --field-error: #E03E3E;
    --label-fs: 14px;
    --help-fs: 12px;
}
    .form-app input.form-control,    
    .form-app textarea.form-control {
        background: var(--field-bg) !important;        
        color: var(--field-ink) !important;
        border: 1.5px solid var(--field-bd) !important;
        height: var(--field-height, 56px);
        line-height: 1;
    }

    /* Select con caret visible y compatible */
    .form-app select.form-control {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B8D83' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
        background-position: right 14px center;
        background-size: 12px 8px;
        background-repeat: no-repeat;
        padding-right: 40px;
    }

        /* Color del caret cuando el select está enfocado */
    .form-app select.form-control:focus select2.form-control:focus {
        background-image: linear-gradient(45deg, transparent 50%, var(--field-bd-focus) 50%), linear-gradient(135deg, var(--field-bd-focus) 50%, transparent 50%);
    }

        /* Estado deshabilitado (caret gris) */
    .form-app select.form-control:disabled select2.form-control:disabled {
        /*background-image: linear-gradient(45deg, transparent 50%, #B8C1BD 50%), linear-gradient(135deg, #B8C1BD 50%, transparent 50%);*/
        cursor: not-allowed;
    }

    /* Grupo y etiqueta */
    .form-app .form-group {
        width: 100%;
        margin-bottom: 14px;
    }

    .form-app .form-label {
        display: block;
        font-size: var(--label-fs);
        color: #0A6644;
        margin: 0 0 6px 2px;
    }

    /* Controles base (misma altura/anchura) */
    .form-app .form-control {
        width: 100%;
        height: var(--field-height);
        background: var(--field-bg);
        color: var(--field-ink);
        border: 1.5px solid var(--field-bd);
        border-radius: var(--field-radius);
        padding: 0 var(--field-pad-x);
        font-size: var(--field-fs);
        line-height: 1;
        outline: none;
        transition: border-color .15s, box-shadow .15s, background .15s;
        box-sizing: border-box;
    }

        .form-app .form-control::placeholder {
            color: var(--field-placeholder);
            opacity: 1;
        }

        .form-app .form-control:focus {
            border-color: var(--field-bd-focus);
            box-shadow: 0 0 0 3px rgba(174,203,53,.25);
        }

        .form-app .form-control[disabled],
        .form-app .form-control[readonly] {
            background: var(--field-disabled-bg);
            color: #6B8D83;
            cursor: not-allowed;
        }

    .form-app textarea.form-control {
        min-height: calc(var(--field-height) * 2);
        padding-top: 12px;
        padding-bottom: 12px;
        line-height: 1.35;
        resize: vertical;
    }

    /* Select con caret */
    .form-app select.form-control {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, #6B8D83 50%), linear-gradient(135deg, #6B8D83 50%, transparent 50%); /*todos los selects*/
        background-position: right 16px center, right 10px center;
        background-size: 8px 8px, 8px 8px;
        background-repeat: no-repeat;
        padding-right: 40px;
    }

    /* Número: quitamos spinners */
    .form-app input[type=number].form-control::-webkit-outer-spin-button,
    .form-app input[type=number].form-control::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .form-app input[type=number].form-control {
        -moz-appearance: textfield;
    }

    /* Date/Datetime */
    /*.form-app input[type=date].form-control,
    .form-app input[type=datetime-local].form-control {
        line-height: 1;
    }*/

    /* Teléfono */
    .form-app input[type=tel].form-control {
        letter-spacing: .2px;
    }

    /* Ayuda y error */
    .form-app .form-help {
        margin-top: 6px;
        font-size: var(--help-fs);
        color: #E6F0EC;
    }

    .form-app .form-error {
        margin-top: 6px;
        font-size: var(--help-fs);
        color: var(--field-error);
    }

    .form-app .is-invalid {
        border-color: var(--field-error) !important;
        box-shadow: 0 0 0 3px rgba(224,62,62,.18);
    }

.field-error {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: #d93025;
}

.form-control.is-invalid {
    border-color: #d93025;
    outline: none;
    box-shadow: 0 0 0 2px rgba(217,48,37,.12);
}

.form-label.required::after {
    content: " *";
    color: #0A6644;
    font-weight: 100;
    margin-left: 2px;
}

label.required::after {
    content: " *";
    color: #0A6644;
    font-weight: 100;
}

/* opcional: si un control está locked */
.control-locked .form-label::after {
    opacity: .85;
}

/* =========================================================
   8) Campos comunes heredados (compatibilidad con tu HTML actual)
   - Mantiene estilos previos y unifica alturas.
   ========================================================= */
label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    color: #0A6644;
    font-family: Poppins;
}

/* Inputs legacy */
input[type="email"],
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"] {
    width: 100%;
    padding: 14px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    background: #fff;
    box-sizing: border-box;
    margin-bottom: 30px;
    transition: border-color .2s, box-shadow .2s;
    height: 56px;
    line-height: 56px;
}

input:focus {
    border-color: var(--brand-dark);
    box-shadow: 0 0 0 2px rgba(0,109,74,.1);
    outline: none;
}

/* Teléfono compuesto (prefijo + input) */
.campo-telefono {
    display: flex;
    /*align-items: center;*/
    border: 1px solid #ccc;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 40px;
    height: 56px;
}

.prefix-container {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: #f0f0f0;
    font-size: 14px;
    border-right: 1px solid #ccc;
    height: 100%;
}

.bandera {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
}

.input-telefono {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    padding: 0 12px;
    background: #fff;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Checks y opciones */
.terminos {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 30px;
}

    .terminos label {
        margin-top: 30px;
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        flex-wrap: wrap;
    }

.terminos-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

    .terminos-check input[type="checkbox"] {
        appearance: auto;
        -webkit-appearance: auto;
        width: clamp(18px, 2.8vw, 22px);
        height: clamp(18px, 2.8vw, 22px);
        margin-top: .25rem; 
        cursor: pointer;
        accent-color: #0A6644; 
        box-shadow: none;
        flex: 0 0 auto;
    }

.terminos-link {
    color: blue;
    text-decoration: underline;
    font-weight: 500;
}

/* Contenedor genérico de grupo de opciones */
.grupo-opciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 30px;
}

/* Botón reutilizable para ambas cosas */
.btn-opcion {
    padding: 12px;
    font-size: 16px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--brand-dark); /* antes #222 o #00695c */
    background-color: #fff;
    color: var(--brand-dark);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem; /* por si agregas iconos */
}

    /* Estado seleccionado / activo (para ambos casos) */
    .btn-opcion:hover,
    .btn-opcion.seleccionado {
        background-color: var(--brand-accent); /* verde lima */
        border-color: var(--brand-accent);
        color: #00695c; /* texto verde oscuro o el que uses */
    }

/* Caso RADIO: cuando el radio está checked, pintamos el label igual que .seleccionado */
.grupo-opciones input[type="radio"] {
    display: none;
}

    .grupo-opciones input[type="radio"]:checked + .btn-opcion {
        background-color: var(--brand-accent);
        border-color: var(--brand-accent);
        color: #00695c;
    }

#horarioModal .modal-content {
    width: 80%;
    max-width: 400px; /* opcional: para que no se haga enorme en PC */
    margin: 0 auto; /* centra el bloque */
}

#horarioModal .horario {
    width: 100%; /* ocupa el 80% del contenedor */
    white-space: pre-line; /* respeta saltos si los dejás en el HTML */
}

.horario {
    white-space: pre-line; /* respeta los saltos de línea del texto */
    width: 100%; /* ocupa el espacio disponible */
    text-align: center; /* por si te lo está centrando algo */
    margin: 0;
}

/* Horario (desde/hasta) */
.horario-contacto {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

    .horario-contacto input[type="time"] {
        flex: 1;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #ccc;
    }

.hasta {
    font-size: 14px;
}

/* Navegación inferior (dos botones) */
.botones-navegacion {
    display: flex;
    justify-content: center; /*space-between;*/
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0 auto;
    margin-top: auto;
}

    /* Si quieres que el botón Siguiente ocupe el espacio y el Atrás sea circular */
    .botones-navegacion .btn-siguiente {
        flex: 1;
    }

    .botones-navegacion .btn-atras {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

.contenedor-botones-cta {
    display: flex;
    flex-direction: column; /* uno debajo del otro */
    align-items: center; /* centrados horizontalmente */
    /*gap: -10px;*/  /*espacio entre botones */
    width: 100%; /* ocupa el ancho del contenedor de la página/formulario */
}
    .contenedor-botones-cta form {
        width: 100%;  /*cada botón (form) ocupa el 80% del ancho */
        
    }

    .contenedor-botones-cta .btn-primary {
        width: 80%; /* el botón se ajusta al ancho del form (80%) */
    }


/* Listas y ayudas */
.subtexto {
    font-size: 16px;
    color: var(--brand-dark);
    margin-bottom: 20px;
}

.indicaciones {
    font-size: 14px;
    color: #444;
    margin-bottom: 40px;
    padding-left: 20px;
}

    .indicaciones li {
        margin-bottom: 10px;
        list-style: disc;
    }

.lista-datos {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    font-size: 15px;
    color: #333;
}

    .lista-datos li {
        background: #f9f9f9;
        margin-bottom: 12px;
        padding: 12px 18px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,.05);
        display: flex;
        flex-direction: column;
    }

        .lista-datos li strong {
            color: #00695c;
            font-size: 15px;
            margin-bottom: 5px;
        }

/* Select “nativo” y Select2 */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
}

.select2-container--default .select2-selection--single {
    width: 100%;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 12px;
    background: #fff;
    color: #333;
    margin-bottom: 20px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: border-color .3s, box-shadow .3s;
    min-height: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #333;
        padding-left: 0;
        padding-right: 1rem;
        line-height: normal;
        font-size: 1rem;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none;
    }

.select2-container--open .select2-dropdown {
    top: 100% !important;
    margin-top: -20px !important;
    border-radius: 0 0 10px 10px;
    border: 1px solid #ccc;
}

field-gap label {
    display: block;
    margin-bottom: 6px;
}

.field-gap .form-control {
    display: block;
    width: 100%;
}

.field-gap {
    margin-bottom: 12px;
}

/* 3) Botones centrados en cada item */
.item-actions.center-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}


.control-locked {
    pointer-events: none;
    user-select: none;
}

    .control-locked .form-control {
        background: #f2f2f2;
    }

/* Estados y alertas */
.alert-warning {
    margin: 20px 0;
    margin-bottom: 20px;
}


.alerta-error, .error-validacion {
    color: #c0392b;
    background: #fbeaea;
    border: 1px solid #e74c3c;
    padding: .75rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}

/* =========================================================
   9) Componente de Steps (ENCAPSULADO)
   - No usa :root global. Solo variables locales de .steps-card
   ========================================================= */
.steps-card {
    /* variables locales (no afectan el resto) */
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --brand-500: #0CB254;
    --accent: #00b358;
    --shadow: 0 10px 30px rgba(0,0,0,.5);
    --gap: 15px;
    --pad: 15px;
    width: 80%;
    max-width: 400px;
    margin: 25px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
}

.step {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    align-items: center;
    gap: 15px;
    padding: var(--pad);
    border-radius: 10px;
    width: 80%;
}

    .step.is-active {
        background: #00994c;
        color: #fff;
        box-shadow: var(--shadow);
    }

    .step.is-disabled {
        background: rgba(0,153,76,.20);
        color: rgba(255,255,255,.2);
        /*box-shadow: var(--shadow);*/
    }

    .step.is-disabled2 {
        background: rgba(0,153,76,.20);
        color: rgba(255,255,255,.5);
        box-shadow: 0 10px 30px rgba(0,0,0,.90);
        width: 80%;
    }

.step-badge {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--accent);
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .step-badge::after {
        content: "";
        position: absolute;
        inset: 8px;
        border-radius: 100px;
        border: 2px solid #fff;
    }

.step.is-disabled .step-badge {
    background: rgba(255,255,255,0.1);
    border-radius: 12%;
}

    .step.is-disabled .step-badge::after {
        border-color: rgba(255,255,255,.2);
    }

.step-title {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
}

/* =========================================================
   10) Secciones específicas que ya usas (ofertas, modales, DUI, etc.)
   - Se preservan pero compactadas.
   ========================================================= */
.contenedor-formulario {
    max-width: var(--container-max);
    min-height: 100svh; /* ? clave: ocupa alto de pantalla */
    margin: auto;
    padding: 30px 20px;
    text-align: justify;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--top-gap));
}
    .contenedor-formulario form {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1; 
    }

    .contenedor-formulario .form-app {
        --field-bg: #ffffff;
        --field-ink: #103027;
        --field-placeholder: #7aa093;
        --field-bd: #D8E1DD; /* gris verdoso visible */
        --field-bd-focus: #AECB35; /* verde lima de marca */
    }

.form-app .form-control:focus {
    border-color: var(--field-bd-focus) !important;
    box-shadow: 0 0 0 3px rgba(174,203,53,.25) !important;
    outline: none;
    border-radius: 12px;
}

.step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

    .step-indicator .step {
        flex: 1;
        height: 4px;
        margin: 0 2px;
        background: #cce5d3;
        border-radius: 2px;
    }

        .step-indicator .step.active {
            background: var(--brand-dark);
        }

.link-agente {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    margin: 15px 0;
}

    .link-agente:hover {
        color: #ffea00;
    }

.grupo-acciones {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
}

.btn-eliminar {
    background: #f44336;
    color: #fff;
}

    .btn-eliminar:hover:enabled {
        background: #d32f2f;
    }

    .btn-eliminar:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.referencia-item {
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.pagina-con-botones {   
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Contenido del formulario: empuja la barra hacia abajo cuando es corto */
/*.pagina-con-botones .contenido-principal {
    flex: 1;*/ /* clave: ocupa el espacio disponible */
    
/*}*/

/* Barra inferior (NO sticky). Se queda abajo si el contenido es corto
   y se va hasta el final si el contenido es largo */
.pagina-con-botones .barra-botones-inferior {
    padding: 16px;
    background: #f9f9f9;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
}

contenido-principal {
  flex: 1;
  padding: 20px;
}

.barra-botones-inferior {
    padding: 20px;
    background: #f9f9f9;
    text-align: center;
    box-shadow: 0 -2px 6px rgba(0,0,0,.05);
}

.pagina-con-botones.has-fixed-bar {
    padding-bottom: calc(88px + var(--safe-bottom)); /* alto aprox de la barra */
}

.barra-botones-inferior.is-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: calc(16px + var(--safe-bottom)); /* respeta notch en iOS */
    z-index: 1000;
    backdrop-filter: saturate(120%) blur(6px); /* opcional: glassy */
}



.btn-cancelar-confirmar, .btn-cancelar-volver {
    background: #222;
    color: #fff;
    padding: .5rem 1rem;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}

.btn-cancelar-volver {
    background: #888;
}

.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #AECB35;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    color: #AECB35;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
    margin: auto;
    align-items: center;
}




.modal-cargando {
    display: none;
    background: rgba(0,0,0,.5);
}

    .modal-cargando .spinner {
        border: 8px solid #f3f3f3;
        border-top: 8px solid #AECB35;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 1s linear infinite;
        margin-bottom: 15px;
    }

.modal-envio, .modal-cancelar, .modal-error, .modal-cargando {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    inset: 0;
}

    .modal-error.show {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-error button {
        margin-top: 1rem;
        padding: .5rem 1rem;
        background: #cc0000;
        border: none;
        border-radius: 6px;
        cursor: pointer;
    }


.modal-envio {
    background: rgba(255,255,255,.85);
    display: flex;
}

.modal-contenido, .modal-error-contenido, .modal-cargando-contenido {
    background: #fff;
    border-radius: 12px;
    text-align: center;
    padding: 2rem;
    box-shadow: var(--shadow-strong);
    min-width: 300px;
    min-height: 100px;
}

.modal-botones {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
}


@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

#modalError .modal-error-contenido button {
    color: #DADADA;
    border-color: #DADADA;
}

/* Ofertas y ajuste */
.contenedor-ofertas, .contenedor-ajuste {
    max-width: var(--container-max);
    margin: auto;
    padding: 1.5rem;
    font-family: 'Segoe UI', sans-serif;
}

.oferta {
    /*background: #e6f0e5;*/
    background: var(--brand-accent);    
    border: 2px solid #c5dcc3;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

    .oferta input[type="radio"] {
        position: absolute;
        top: 1rem;
        right: 1rem;
        transform: scale(1.5);
    }

    .oferta label {
        display: block;
        cursor: pointer;
        padding-right: 2.5rem;
    }

input[type="radio"]:focus {
    outline: 2px solid #AECB35; /
    outline-offset: 2px;
    box-shadow: none;
}
input[type=radio] {
    appearance: auto;
    -webkit-appearance: auto; /* iOS */
    width: clamp(18px, 2.8vw, 22px); /* ~18–22px según pantalla */
    height: clamp(18px, 2.8vw, 22px);
    margin: 0 .35rem; /* separa del texto */
    vertical-align: middle;
    accent-color: #0A6644; /* verde marca */
    opacity: 1 !important; /* 0–1; antes tenías 100 */
    box-shadow: none;
}

.condicion {
    display: block;
    font-size: .9rem;
    color: #666;
    margin-top: .5rem;
}

.card-ajuste {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

.monto-seccion, .plazo-seccion {
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Regla base */
input[type="range"] {
    width: 100%;
    margin-top: 1rem;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

    /* TRACK – Chrome / Edge / Safari */
    input[type="range"]::-webkit-slider-runnable-track {
        height: 6px;
        border-radius: 3px;
        background: linear-gradient( to right, #AECB35 0% var(--range-progress, 50%), /* parte verde lima */
        #e0e0e0 var(--range-progress, 50%) 100% /* resto gris claro */
        );
    }

    /* THUMB – Chrome / Edge / Safari */
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #AECB35; /* verde lima */
        border: none;
        margin-top: -6px;
    }

    /* FIREFOX: track gris + parte rellena verde lima */
    input[type="range"]::-moz-range-track {
        height: 6px;
        border-radius: 3px;
        background: #e0e0e0;
    }

    input[type="range"]::-moz-range-progress {
        height: 6px;
        border-radius: 3px;
        background: #AECB35;
    }

    input[type="range"]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #AECB35;
        border: none;
    }

/* =========================
   Checkbox
   ========================= */
.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: #0A6644; /* color normal */
    transition: all 0.2s ease;
}

.form-check-label {
    margin: 0;
    cursor: pointer;
    color: #1f2937;
    transition: color 0.2s ease;
}

.form-check-input:disabled {
    accent-color: #b8c2cc; /* evita el azul */
    cursor: not-allowed;
    opacity: 1; /* evita que quede demasiado lavado */
}

    .form-check-input:disabled + .form-check-label {
        color: #8a94a6;
        cursor: not-allowed;
    }

/* =========================
   Botones deshabilitados
   ========================= */
button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-opcion2:disabled,
.btn-siguiente:disabled,
.btn-atras:disabled {
    background: #eef2f6 !important;
    border-color: #d8e0e8 !important;
    color: #8a94a6 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    transform: none !important;
}

    button:disabled i,
    .btn-primary:disabled i,
    .btn-secondary:disabled i,
    .btn-opcion2:disabled i,
    .btn-siguiente:disabled i,
    .btn-atras:disabled i {
        color: #8a94a6 !important;
    }

    /* Evita hover cuando están bloqueados */
    button:disabled:hover,
    .btn-primary:disabled:hover,
    .btn-secondary:disabled:hover,
    .btn-opcion2:disabled:hover,
    .btn-siguiente:disabled:hover,
    .btn-atras:disabled:hover {
        background: #eef2f6 !important;
        border-color: #d8e0e8 !important;
        color: #8a94a6 !important;
        transform: none !important;
    }

/* =========================
   Opcional: estilo más claro
   para la zona bloqueada
   ========================= */
.acciones-captura button:disabled,
.acciones-camara button:disabled {
    filter: grayscale(0.1);
}

    /* Si quieres que el label del botón también se vea más suave */
    .acciones-captura button:disabled .btn-opcion-texto,
    .acciones-captura button:disabled .btn-opcion-icono {
        color: #8a94a6 !important;
    }


.rango-texto {
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    color: #666;
    margin-top: .25rem;
}

.resumen-oferta {
    margin-top: 1.5rem;
    background: #AECB35; /* verde lima */
    color: #0A2F1F; /* verde muy oscuro o casi negro */
    padding: 1rem;
    border-radius: 10px;
    font-size: 1rem;
    margin-bottom: 20px;
}

.btn-verde-claro {
    background: #C6EA3A;
    color: #000;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    padding: 1rem;
    width: 100%;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.grupo-contacto {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn-contacto {
    border: 1px solid #1c1c1c;
    padding: 1rem;
    font-size: 1rem;
    background: #fff;
    color: #1c1c1c;
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition: background-color .2s, color .2s;
    width: 100%;
}

    .btn-contacto.active {
       /* background: var(--gray-green);*/
        border-color: var(--gray-green);
        background-color: var(--brand-accent);
        color: #00695c;
        
    }

    .btn-contacto.selected {
       /* background: #1c1c1c;
        color: #fff;*/
        background-color: var(--brand-accent);
        color: #00695c;
    }

.btn-limpiar {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 10;
    background: #f44336;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.grupo-horario {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.consent-text p {
    text-align: justify;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.firma-wrapper {
    border: 1px solid #ccc;
    margin-top: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

.campo-hora {
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .campo-hora label {
        font-weight: 600;
        text-align: center;
        margin-bottom: .2rem;
    }

    .campo-hora select {
        padding: .8rem;
        font-size: 1.5rem;
        border: 1px solid #ccc;
        border-radius: 12px;
        width: 100%;
        text-align: center;
        outline: none;        
    }
        .campo-hora select:focus {
            border-color: #AECB35; 
            box-shadow: 0 0 0 3px rgba(174, 203, 53, 0.4); 
        }

.custom-select {
    position: relative;
    width: 100%;
    font-size: 1rem;
}

/* Botón visible */
.custom-select-toggle {
    width: 100%;
    padding: .8rem;
    font-size: 1.2rem;
    border-radius: 12px;
    border: 1px solid #ccc;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

    .custom-select-toggle:focus {
        border-color: #AECB35;
        box-shadow: 0 0 0 3px rgba(174,203,53,.4);
    }

/* Lista por defecto: hacia ABAJO */
.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: .25rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #ccc;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    list-style: none;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
}

/* Cuando está abierta (dirección la decide JS) */
.custom-select.open .custom-select-options {
    display: block;
}

/* Fuerza abrir hacia ARRIBA cuando tiene la clase open-up */
.custom-select.open-up .custom-select-options {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: .25rem;
}

/* Opción individual */
.custom-select-option {
    padding: .6rem .8rem;
    font-size: 1rem;
    cursor: pointer;
}

    /* Hover + opción seleccionada en verde lima */
    .custom-select-option:hover,
    .custom-select-option.active {
        background-color: #AECB35;
        color: #00695c;
    }

        
/* DUI: cámara/carga */
.contenedor-captura {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    overflow: hidden;
}

.titulo--bump {
    font-size: 48px;
}
.titulo--bump2 {
    font-size: 36px;
}
/* base + 3px */
.titulo-strong.titulo--bump {
    font-size: 60px;
}

.titulo-strong.titulo--bump2 {
    font-size: 60px;
}

.tituloCaptura, .tituloCaptura2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    z-index: 10;
    background: rgba(0,0,0,.5);
    padding: .5rem 1rem;
    border-radius: 8px;
}

.tituloCaptura {
    top: 5%;
    font-size: 1.2rem;
}

.tituloCaptura2 {
    top: 15%;
    font-size: 1rem;
    color: #fff;
}

.textoCaptura {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    z-index: 10;
    background: rgba(0,0,0,.5);
    padding: .5rem 1rem;
    border-radius: 8px;
    top: 60%;
    font-size: 0.8rem;
    width: 400px;
}

.imagenes-dui {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.imagen-dui {
    flex: 1 1 200px;
    text-align: center;
}

    .imagen-dui img {
        max-width: 100%;
        max-height: 200px;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    }

video#videoCamara {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.overlay-oscuro {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    z-index: 1;
}

.marco-guiado, .marco-guiado-selfie {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 420px;
    border: 2px solid #fff;
    border-radius: 12px;
    overflow: hidden;
    z-index: 2;
}

.marco-guiado {
    aspect-ratio: 16/10;
}

.marco-guiado-selfie {
    /*aspect-ratio: 4/3;*/
}

#canvas {
    /*width: 100%;
    height: 100%;*/
    display: block;
    z-index: -1;
    max-width: 100%;
    max-height: 100%;   
}

/* Evita scroll/zoom mientras firmas */
#canvas1 {
    touch-action: none; /* estándar */
    -ms-touch-action: none; /* Edge/IE antiguos */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.guia-dui {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
    opacity: .5;
    object-fit: cover;
    pointer-events: none;
}

.btn-cargar {
    position: absolute;
    bottom: 20%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    padding: .5rem 0;
}

.btn-subir-archivo {
    background: rgba(0,0,0,.5);
    color: #fff;
    padding: .75rem 1.5rem;
    border-radius: 2rem;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
    transition: background-color .3s;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family:Montserrat;
}

    .btn-subir-archivo:hover {
        background: lightslategray;
    }

.icono-folder {
    fill: #fff;
    width: 20px;
    height: 20px;
}

.controles {
    position: absolute;
    bottom: 5%;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 40px;
    z-index: 3;
}

.opciones-pep {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 20px;
}


.btn-circular {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;    
    background: rgba(255,255,255,.2);
    color: #fff;
    backdrop-filter: blur(5px);
    cursor: pointer;
    transition: .3s;    
}

    .btn-circular:hover {
        background: rgba(255,255,255,.4);
    }

    .btn-circular.principal {
        width: 70px;
        height: 70px;
        font-size: 30px;
        background: #AECB35;
        color: #000;
    }
        .btn-circular.principal:hover {
            background: Green;
        }

/* =========================================================
   11) Estados (tarjetas de aviso)
   - Vistas: DificultadesConsulta / SolicitudIncompleta
   - Scope en .pantalla-verde para no afectar otras pantallas
   - Reutiliza variables globales: --brand-ink / --brand-accent / sombras / radios
   ========================================================= */

    /* Contenedor de la tarjeta/aviso */
    .pantalla-verde .tarjeta-estado {
        display: flex; /* columna centrada */
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px; /* separación vertical entre bloques */
        margin: 8px 0 16px; /* aire arriba/abajo */
    }

    /* Título alineado a la izquierda (opcional, para “Estimado cliente,”) */
    .pantalla-verde .titulo.titulo--left {
        text-align: center; /* override del center del contenedor */
    }

    /* Icono grande (Font Awesome: fa-check-circle-o) */
    .pantalla-verde .tarjeta-icono {
        display: grid; /* centrado perfecto */
        place-items: center;
        margin: 4px 0 8px;
    }

        .pantalla-verde .tarjeta-icono i {
            font-size: 8.5rem; /* tamaño visual del check */
            line-height: 1;
            color: var(--brand-accent); /* verde lima de marca */
            text-shadow: 0 1px 0 rgba(0,0,0,.04); /* leve relieve */
        }

    /* “Burbuja” blanca de mensaje bajo el icono (pantalla 1) */
    .pantalla-verde .mensaje-burbuja {
        background: #fff; /* panel blanco */
        color: var(--brand-ink); /* texto verde institucional */
        width: 100%;
        max-width: 380px; /* ancho visual controlado */
        padding: 16px 18px; /* respiración interna */
        border-radius: var(--radius-md); /* esquinas redondeadas globales */
        box-shadow: var(--shadow-soft); /* sombra suave global */
        text-align: center; /* centra el texto del panel */
    }

    /* Cuerpo de texto (pantalla 2) */
    .pantalla-verde .tarjeta-contenido {
        max-width: 420px; /* legibilidad en móviles */
        color: #fff; /* texto blanco sobre fondo verde */
        text-align: left; /* según mock “Estimado cliente,” */
        line-height: 1.45; /* lectura cómoda */
    }

        .pantalla-verde .tarjeta-contenido p {
            margin: 0 0 12px; /* separación entre párrafos */
        }

    /* Área de acciones/botón */
    .pantalla-verde .tarjeta-acciones {
        width: 100%;
        max-width: 380px; /* alinea con la burbuja */
        margin-top: 10px;
    }
        /* Usa tu .btn-primary global; aquí solo forzamos ancho y pastilla */
        .pantalla-verde .tarjeta-acciones .btn-primary {
            width: 100%; /* botón ancho */
            border-radius: var(--radius-lg); /* forma de pastilla (coincide con tu botón) */
        }


.pantalla-verde select {
    color: var(--brand-ink) !important;
    background-color: #fff;
}

    /* Placeholder (nuestro option disabled) */
    .pantalla-verde select option[disabled] {
        color: #8DA9A0 !important;
    }

    /* Deshabilitado */
    .pantalla-verde select:disabled {
        color: #6B8D83 !important;
    }


.slot-adjunto {
    position: relative;
    width: 100%;
    height: 200px; /* espacio reservado fijo */
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .slot-adjunto video,
    .slot-adjunto canvas,
    .slot-adjunto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }

.slot-placeholder {
    color: #666;
    font-size: .95rem;
}

.acciones-captura {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    width: 100%; /* que ocupe todo el ancho del formulario */
}

    .acciones-captura .btn-primary i,
    .acciones-camara .btn-primary i {
        margin-left: 0.35rem; /* texto primero, icono después */
    }

.thumb-preview {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 8px;
}
.preview-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.nombre-archivo {
    font-weight: 600;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-eliminar {
    background: #e74c3c;
    color: #fff;
    border: 0;
    padding: 6px 10px;
    border-radius: 8px;
}

.modal-procesando-overlay {
    position: fixed;
    inset: 0; /* top/right/bottom/left: 0 */
    background: rgba(0, 0, 0, 0.35); /* fondo oscurecido */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Overlay de pantalla completa */
.modal-procesando-overlay {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background: rgba(0, 0, 0, 0.35); /* fondo oscurecido */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Tarjeta/modal centrado */
.modal-procesando-content {
    background: #ffffff;
    border-radius: 16px;
    /*padding: 2rem 2.5rem;*/
    max-width: 380px;
    max-height: 220px;
    width: 100%;
    height: 100%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    color: #333; /* asegura texto oscuro dentro del modal */
    margin-top: -40px; /* ajuste vertical */
}

    /* Logo dentro del modal */
    .modal-procesando-content .logo img {
        max-width: 160px;
        /*margin-bottom: 1rem;*/
    }

    /* Título del modal */
    .modal-procesando-content #mensaje-cabecera {
        font-size: 1.1rem;
        font-weight: 600;
        /*margin-bottom: 1.5rem;*/
        color: #333;
    }

    /* Texto secundario */
    .modal-procesando-content .texto-procesando {
        /*margin-top: 1rem;*/
        font-size: 0.95rem;
        color: #555;
    }

    /* Centrar el spinner si ya existe esa clase en tu CSS */
    .modal-procesando-content .spinner {
        margin: 0 auto;
    }



/* =========================================================
   12) Responsive ajustes finos
   ========================================================= */

    @media (min-width: 400px) {
        
        .pantalla-verde .tarjeta-icono i {
            font-size: 10rem;
        }

        .pantalla-verde .mensaje-burbuja {
            max-width: 400px;
        }

        .pantalla-verde .tarjeta-acciones {
            max-width: 400px;
        }

        .pagina-con-botones .barra-botones-inferior {
            padding: 20px;
        }

        .form-app {
            --field-height: 50px;
            --field-pad-x: 12px;
        }

        .barra-botones-inferior {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

            .barra-botones-inferior button {
                width: 100%;
                font-size: 15px;
                padding: 12px;
                border-radius: 8px;
            }

        .lista-datos {
            font-size: 14px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

            .lista-datos li {
                padding: 10px 12px;
                border-bottom: 1px solid #e0e0e0;
            }

                .lista-datos li strong {
                    font-size: 14px;
                    color: var(--brand-ink);
                }

    }

/* =========================================================
   PATCH / OVERRIDES (NO rompe HTML, NO cambia controles)
   - Pegar AL FINAL del archivo
   ========================================================= */

/* 0) Box-sizing real (tu CSS usa inherit pero no lo inicializa) */
html {
    box-sizing: border-box;
}

/* Mantiene tu idea de inherit, pero ahora sí funciona */
*, *::before, *::after {
    box-sizing: inherit;
}

/* 1) Evitar micro-scroll horizontal en iOS/Android sin “cortar” layouts */
body {
    overflow-x: clip; /* fallback natural; en browsers viejos se comporta como visible/hidden */
}

@supports not (overflow-x: clip) {
    body {
        overflow-x: hidden;
    }
}

/* 2) 100vw/svw: en móviles puede incluir scrollbar/zoom y causar “saltitos”.
      Sin cambiar tus clases, solo las hago más estables. */
.pantalla-verde,
.pantalla-blanca {
    width: 100%;
}

/* 3) Corregir selector accidental de “contenido-principal” (estaba como tag HTML).
      No cambia nada de tus controles; solo asegura que si usas .contenido-principal funcione. */
.contenido-principal {
    flex: 1;
    padding: 20px;
}

/* 4) Modales: tenías height:80% y también inset:0 (contradicción).
      Esto asegura overlay full-screen consistente en iOS/Android/PC. */
.modal-envio,
.modal-cancelar,
.modal-error,
.modal-cargando {
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Mantiene tu intención de “modal-envio visible” */
.modal-envio {
    display: flex;
}

/* 5) Fix del comentario roto que podía invalidar la regla en algunos navegadores */
input[type="radio"]:focus {
    outline: 2px solid #AECB35;
    outline-offset: 2px;
    box-shadow: none;
}

/* 6) Select2 y selects: en tu CSS hay selectores imposibles:
      ".form-app select.form-control select2.form-control" (no existe select2 tag).
      Sin quitar lo tuyo, agrego los correctos. */
.form-app .select2-container--default .select2-selection--single {
    height: var(--field-height);
    min-height: var(--field-height);
    border-radius: var(--field-radius);
    border: 1.5px solid var(--field-bd);
    display: flex;
    align-items: center;
    padding: 0 var(--field-pad-x);
    box-sizing: border-box;
}

    .form-app .select2-container--default .select2-selection--single:focus,
    .form-app .select2-container--default .select2-selection--single.select2-selection--focus,
    .form-app .select2-container--open .select2-selection--single {
        border-color: var(--field-bd-focus);
        box-shadow: 0 0 0 3px rgba(174,203,53,.25);
    }

    /* Rendered text alineado */
    .form-app .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 0;
        padding-right: 1.2rem;
        line-height: normal;
        width: 100%;
    }

/* 7) Evitar doble “caret” en select:
      Tú pintas caret en `select { background-image: ... }` y también en `.form-app select.form-control { ... }`.
      Sin borrar lo tuyo, “anulo” el caret global dentro de .form-app para que quede 1 solo. */
.form-app select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B8D83' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}

/* El caret correcto lo maneja tu regla `.form-app select.form-control { background-image: linear-gradient(...) }` */

/* 8) Inputs: en tu CSS hay estilos “legacy” por type y también por .form-control.
      Sin cambiar controles, priorizo el look de .form-app cuando existe. */
.form-app input[type="email"],
.form-app input[type="text"],
.form-app input[type="password"],
.form-app input[type="number"],
.form-app input[type="date"],
.form-app input[type="tel"],
.form-app textarea {
    margin-bottom: 0; /* evita doble spacing con .form-group */
    line-height: 1.2; /* evita vertical misalignment iOS */
}

/* 9) iOS safe-area: ya usas env() en steps, pero la barra fija usa var(--safe-bottom) sin declararla global.
      Esto la define de forma segura para cualquier pantalla. */
:root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}

/* 10) Barra inferior fija: asegura que no tape inputs (sobre todo iOS con teclado).
       No cambia tus clases, solo mejora. */
.barra-botones-inferior.is-fixed {
    padding-bottom: calc(16px + var(--safe-bottom));
    -webkit-backdrop-filter: saturate(120%) blur(6px);
}

/* 11) Canvas: en tu CSS #canvas tiene z-index:-1, en algunos casos queda “unclickable/oculto”.
       Sin cambiar controles, lo limito a cuando realmente está dentro de marco guiado. */
.marco-guiado #canvas,
.marco-guiado-selfie #canvas {
    z-index: 0;
}

/* 12) Duplicado de .modal-procesando-overlay: dejas 2 bloques iguales.
       No lo quito (porque pediste no omitir), pero hago explícita la versión final. */
.modal-procesando-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* 13) Botón: mejora tap highlight en iOS sin cambiar estilos */
button, .btn-primary, .btn-secondary, .btn-siguiente, .btn-atras, .btn-opcion, .btn-contacto, .btn-circular {
    -webkit-tap-highlight-color: transparent;
}

/* 14) (Opcional) Si iOS/Android cambia zoom por inputs pequeños.
       Mantiene tu clamp pero asegura mínimo 16px en inputs para Safari iOS. */
@supports (-webkit-touch-callout: none) {
    .form-app .form-control,
    .select2-container--default .select2-selection--single {
        font-size: max(16px, var(--field-fs));
    }
}


/* SOLO ADICIONES para Obligaciones. No modifica site.css. */

.obl-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 10px 0 16px;
}

.obl-h5 {
    margin: 0 0 10px 0;
}

.obl-subtexto {
    margin-top: -10px;
    margin-bottom: 16px;
}

.obl-money-wrap {
    position: relative;
}

.obl-money-prefix {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    color: var(--gray-green);
    pointer-events: none;
}

.obl-money-input {
    padding-left: 54px !important;
    margin-bottom: 0 !important;
}

.obl-info-panel {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(10, 102, 68, .06);
    border: 1px solid rgba(10, 102, 68, .12);
    border-radius: 14px;
    padding: 12px 14px;
    color: var(--brand-ink);
    font-weight: 600;
    margin-top: 10px;
}

.obl-info-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-dark);
    margin-top: 6px;
    flex: 0 0 auto;
}

.obl-results-header {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.obl-results-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.obl-results-icon {
    color: var(--brand-dark);
    font-weight: 800;
}

.obl-results-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--brand-ink);
    letter-spacing: .4px;
}

.obl-reload {
    border: 1px solid #d8e1dd;
    background: #fff;
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 800;
    color: var(--brand-ink);
}

.obl-loading {
    background: #fff;
    border: 1px solid #d8e1dd;
    border-radius: 14px;
    padding: 14px 16px;
    color: var(--gray-green);
    font-weight: 700;
    margin-top: 10px;
}

.obl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}


@media (max-width: 520px) {
    .obl-grid {
        grid-template-columns: 1fr;
    }
}

/* Card obligación */
.obl-item {
    background: #fff;
    border: 1px solid #d8e1dd;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    overflow: hidden;
}

    .obl-item.active {
        border-color: rgba(0,109,74,.35);
        box-shadow: 0 0 0 2px rgba(174,203,53,.20);
    }

.obl-head {
    padding: 14px;
    cursor: pointer;
}

.obl-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.obl-name {
    font-weight: 800;
    font-size: 13px;
    color: var(--brand-ink);
}

.obl-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    background: #e8f1ff;
    color: #2563eb;
    border: 1px solid #d7e7ff;
    font-weight: 800;
}

.obl-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--gray-green);
    font-weight: 700;
}

.obl-btns {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.obl-btn {
    flex: 1;
    border: 1px solid #d8e1dd;
    background: #fff;
    border-radius: 14px;
    padding: 10px 8px;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
}

    .obl-btn.cancel.active {
        background: var(--brand-dark);
        border-color: var(--brand-dark);
        color: #fff;
    }

    .obl-btn.payroll.active {
        background: #4f46e5;
        border-color: #4f46e5;
        color: #fff;
    }

.obl-body {
    display: none;
    border-top: 1px solid #e7e9ee;
    background: rgba(245,247,246,.8);
    padding: 14px;
}

    .obl-body.open {
        display: block;
    }

.obl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.obl-mini label {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-green);
    margin-bottom: 6px;
}

.obl-mini input {
    width: 100%;
    height: 50px;
    border-radius: 12px;
    border: 1px solid #d8e1dd;
    padding: 0 12px;
    outline: none;
}

.obl-del {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

    .obl-del button {
        border: none;
        background: transparent;
        color: #e74c3c;
        font-weight: 800;
        cursor: pointer;
    }

.obl-add-manual {
    margin-top: 14px;
    width: 100%;
    padding: 14px;
    border: 2px dashed #d1d5db;
    border-radius: 14px;
    background: transparent;
    font-weight: 800;
    color: var(--gray-green);
    cursor: pointer;
}

    .obl-add-manual:hover {
        border-color: rgba(0,109,74,.35);
        color: var(--brand-ink);
        background: #fff;
    }

/* Totales en barra inferior (se monta sobre tu .barra-botones-inferior) */
.obl-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.obl-total {
    background: #fff;
    border: 1px solid #e7e9ee;
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
}

.obl-total-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--gray-green);
    letter-spacing: .6px;
}

.obl-total-value {
    font-size: 18px;
    font-weight: 900;
    color: var(--brand-ink);
}

.obl-lime {
    color: var(--brand-dark);
}

/* =========================================================
   OVERRIDE FINAL: uniformar select nativo + select2
   Pegar al FINAL del CSS
   ========================================================= */

:root {
    --select-caret-svg-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B8D83' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}

/* SELECT nativo */
.form-app select.form-control,
.form-app select {
    background-image: var(--select-caret-svg-green) !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
    padding-right: 40px !important;
    color: var(--field-ink) !important;
    border: 1.5px solid var(--field-bd) !important;
    background-color: var(--field-bg) !important;
}

/* SELECT2 contenedor */
.form-app .select2-container {
    width: 100% !important;
}

/* SELECT2 caja principal */
.form-app .select2-container--default .select2-selection--single {
    height: var(--field-height) !important;
    min-height: var(--field-height) !important;
    border-radius: var(--field-radius) !important;
    border: 1.5px solid var(--field-bd) !important;
    background-color: var(--field-bg) !important;
    color: var(--field-ink) !important;
    background-image: var(--select-caret-svg-green) !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
    padding: 0 var(--field-pad-x) !important;
    padding-right: 40px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

    /* texto seleccionado */
    .form-app .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--field-ink) !important;
        line-height: normal !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* placeholder */
    .form-app .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: var(--field-placeholder) !important;
    }

    /* ocultar flecha interna de select2 */
    .form-app .select2-container--default .select2-selection--single .select2-selection__arrow,
    .form-app .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none !important;
    }

/* foco igual para ambos */
.form-app select.form-control:focus,
.form-app .select2-container--default.select2-container--open .select2-selection--single,
.form-app .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--field-bd-focus) !important;
    box-shadow: 0 0 0 3px rgba(174,203,53,.25) !important;
    outline: none !important;
}

/* dropdown select2 */
.form-app .select2-dropdown {
    border: 1.5px solid var(--field-bd) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* campo de búsqueda dentro del select2 */
.form-app .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--field-bd) !important;
    border-radius: 10px !important;
    color: var(--field-ink) !important;
}


.app-date-control {
    position: relative;
    width: 100%;
}

.app-date-display {
    width: 100%;
    padding-right: 46px;
    background-color: #fff;
    cursor: pointer;
}

    .app-date-display[readonly] {
        background-color: #fff;
    }

.app-date-button {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 34px;
    height: 34px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: #f3f8f6;
    color: #006d4a;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.app-date-picker-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.app-date-value {
    display: none;
}

.app-date-control.is-invalid .app-date-display,
.app-date-display.is-invalid {
    border-color: #dc3545;
}

.app-date-icon {
    width: 19px;
    height: 19px;
}

.app-date-control:focus-within .app-date-button {
    background: #e4f3ed;
    color: #005c3f;
}