/* =========================================================
   RAMALLO - COMPONENTES / PREVALIDACIÓN
   CSS sanitizado: variables, cards, seguridad, modales y responsive.
   ========================================================= */

:root {
    --color-principal: #4ccdf8;
    --color-secundario: #4ccdf8;
    --color-verde: #078543;
    --color-verde-hover: #066f39;
    --color-texto: #5f6368;
    --color-gris: #888;
}


/* ========================================================= */
/* TIPO DE CLIENTE                                           */
/* ========================================================= */

/* Ocultamos el radio original */
.opcion input[type="radio"] {
    display: none;
}

/* Ícono y título en gris por defecto */
.icon-cliente {
    color: #888;
    transition: color 0.3s ease;
}

.opcion h4 {
    font-size: 22px;
    font-weight: 600;
    color: #888;
    transition: color 0.3s ease;
    margin-top: 10px;
    margin-bottom: 5px;
}

/* Subtítulos */
.opcion p {
    font-size: 16px;
    color: #999;
}

/* Panel estilo botón */
.opcion {
    cursor: pointer;
    display: block;
    border: 2px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .opcion:hover {
        border-color: #bbb;
    }

    /* Cuando está seleccionado */
    .opcion input[type="radio"]:checked ~ .panel-body .icon-cliente,
    .opcion input[type="radio"]:checked ~ .panel-body h4 {
        color: var(--color-principal);
    }

    .opcion input[type="radio"]:checked ~ .panel-body {
        border-color: var(--color-principal);
    }


/* ========================================================= */
/* TITULO VALIDACION                                         */
/* ========================================================= */

.titulo-validacion {
    text-align: center;
    margin-bottom: 35px;
}

    .titulo-validacion h1 {
        font-size: 34px;
        font-weight: 700;
        color: var(--color-principal);
        margin-bottom: 10px;
        line-height: 1.1;
    }

    .titulo-validacion p {
        font-size: 18px;
        color: var(--color-texto);
        margin: 0;
    }


/* ========================================================= */
/* CONTENEDOR PRINCIPAL                                      */
/* ========================================================= */

#FORM_TIPO {
    position: relative;
    top: -45px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


/* ========================================================= */
/* CARDS PARTICULAR / EMPRESA                                */
/* ========================================================= */

/* FIX: Alinea los extremos de las cards con el formulario. */
.cuadroOpc .row > .col-sm-6:first-child {
    padding-left: 0;
}

.cuadroOpc .row > .col-sm-6:last-child {
    padding-right: 0;
}


/* ========================================================= */
/* SEGURIDAD DE DATOS                                        */
/* ========================================================= */

.seguridad-datos {
    margin-top: 30px;
    margin-bottom: 10px;
    padding: 18px 24px;
    background: #f5f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.seguridad-icono i {
    font-size: 42px;
    color: var(--color-principal);
}

.seguridad-texto {
    text-align: left;
}

.titulo-seguridad {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-principal);
    line-height: 1.2;
}

.texto-seguridad {
    font-size: 15px;
    color: var(--color-texto);
    margin-top: 6px;
    line-height: 1.4;
}


/* ========================================================= */
/* VALIDACIONES                                              */
/* ========================================================= */

/* FIX: Permite que los mensajes ocupen varias líneas. */
.help-block,
.has-error span {
    white-space: normal;
    overflow: visible;
    width: 100%;
}


/* ========================================================= */
/* MODALES PREVALIDACION                                     */
/* PARTICULAR + EMPRESA                                      */
/* ========================================================= */

/* FIX: Centrado vertical común para ambos modales. */
#PreValidacionParticular .vertical-alignment-helper,
#PreValidacionEmpresa .vertical-alignment-helper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.modal-center-screen {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}


/* Dialog */

#PreValidacionParticular .modal-dialog,
#PreValidacionEmpresa .modal-dialog,
.prevalidacion-dialog {
    width: 92%;
    max-width: 820px;
    margin: 0 auto;
}


/* Modal */

#PreValidacionParticular .modal-content,
#PreValidacionEmpresa .modal-content,
.prevalidacion-modal {
    width: 100%;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .20);
}


/* ========================================================= */
/* HEADER MODAL                                              */
/* ========================================================= */

.prevalidacion-header {
    position: relative;
    min-height: 78px;
    padding: 18px 28px 8px;
    border: 0;
    background: #fff;
}

.prevalidacion-logo {
    max-height: 52px;
    max-width: 210px;
}

.prevalidacion-close {
    position: absolute;
    top: 17px;
    right: 22px;
    color: #999;
    opacity: 1;
    font-size: 30px;
    font-weight: 300;
    text-shadow: none;
}

    .prevalidacion-close:hover,
    .prevalidacion-close:focus {
        color: #666;
        opacity: 1;
    }


/* ========================================================= */
/* BODY MODAL                                                */
/* ========================================================= */

.prevalidacion-body {
    padding: 10px 45px 30px;
    text-align: center;
}

.prevalidacion-estado {
    max-width: 700px;
    margin: 0 auto;
}


/* ========================================================= */
/* ICONOS ESTADO                                             */
/* ========================================================= */

.prevalidacion-icono {
    width: 74px;
    height: 74px;
    margin: 5px auto 22px;
    border-radius: 50%;
    text-align: center;
    line-height: 74px;
    font-size: 31px;
}

/* Información */
.prevalidacion-icono-info {
    color: var(--color-principal);
    background: #eaf8fd;
}

/* Éxito */
.prevalidacion-icono-ok {
    color: var(--color-verde);
    background: #eaf8f0;
}

/* Error */
.prevalidacion-icono-error {
    color: #c94c42;
    background: #fff0ed;
}

/* Advertencia */
.prevalidacion-icono-warning {
    color: #b7791f;
    background: #fff8e8;
}


/* ========================================================= */
/* TEXTOS MODAL                                              */
/* ========================================================= */

.prevalidacion-titulo {
    max-width: 650px;
    margin: 0 auto 15px;
    color: var(--color-principal);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
}

.prevalidacion-descripcion {
    max-width: 650px;
    margin: 0 auto 25px;
    color: var(--color-texto);
    font-size: 17px;
    line-height: 1.55;
}

    .prevalidacion-descripcion strong {
        color: #444;
    }


/* ========================================================= */
/* AVISOS                                                    */
/* ========================================================= */

.prevalidacion-aviso {
    margin: 25px auto 0;
    padding: 16px 20px;
    border-radius: 7px;
    text-align: left;
    font-size: 15px;
    line-height: 1.5;
}

/* Información */
.prevalidacion-aviso-info {
    color: #39768f;
    background: #eaf7fd;
    border-left: 5px solid var(--color-principal);
}

/* Éxito */
.prevalidacion-aviso-ok {
    color: #326348;
    background: #f1faf5;
    border-left: 5px solid var(--color-verde);
}

/* Error */
.prevalidacion-aviso-error {
    color: #71372f;
    background: #fff5f2;
    border-left: 5px solid #ca5146;
}

/* Advertencia */
.prevalidacion-aviso-warning {
    color: #72551d;
    background: #fff8e8;
    border-left: 5px solid #d69e2e;
}


/* ========================================================= */
/* LISTA DE EMAILS                                           */
/* ========================================================= */

.prevalidacion-lista-mails {
    max-width: 600px;
    margin: 20px auto;
    padding: 18px 20px;
    background: #f7f9f8;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    text-align: left;
}

    /* Por si el JS agrega elementos directamente */
    .prevalidacion-lista-mails p,
    .prevalidacion-lista-mails div {
        color: var(--color-texto);
    }


/* ========================================================= */
/* ACCIONES                                                  */
/* ========================================================= */

.prevalidacion-acciones {
    margin-top: 28px;
    text-align: center;
}

.prevalidacion-btn-principal {
    min-width: 230px;
    padding: 12px 25px;
    color: #fff;
    background: var(--color-verde);
    border: 1px solid var(--color-verde);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .prevalidacion-btn-principal:hover,
    .prevalidacion-btn-principal:focus,
    .prevalidacion-btn-principal:active {
        color: #fff;
        background: var(--color-verde-hover);
        border-color: var(--color-verde-hover);
        outline: none;
    }


/* Botón secundario por si lo necesitamos en Empresa */
.prevalidacion-btn-secundario {
    min-width: 180px;
    padding: 12px 25px;
    color: #555;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
}

    .prevalidacion-btn-secundario:hover,
    .prevalidacion-btn-secundario:focus {
        color: #333;
        background: #f5f5f5;
    }


/* ========================================================= */
/* FOOTER MODAL                                              */
/* ========================================================= */

.prevalidacion-footer {
    padding: 5px 25px 22px;
    text-align: center;
    border: 0;
    background: #fff;
}

.prevalidacion-marca {
    color: var(--color-verde);
    font-size: 13px;
}

    .prevalidacion-marca strong {
        font-weight: 700;
    }

    .prevalidacion-marca span {
        color: #999;
    }


/* ========================================================= */
/* RESPONSIVE                                                */
/* ========================================================= */

@media (max-width: 767px) {

    #FORM_TIPO {
        top: -20px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .titulo-validacion {
        margin-bottom: 25px;
    }

        .titulo-validacion h1 {
            font-size: 28px;
        }

        .titulo-validacion p {
            font-size: 16px;
        }


    /* Cards */

    .cuadroOpc .row > .col-sm-6:first-child,
    .cuadroOpc .row > .col-sm-6:last-child {
        padding-left: 15px;
        padding-right: 15px;
    }

    .opcion {
        margin-bottom: 15px;
    }


    /* Seguridad */

    .seguridad-datos {
        flex-direction: column;
        padding: 18px;
        text-align: center;
        gap: 10px;
    }

    .seguridad-texto {
        text-align: center;
    }

    .titulo-seguridad {
        font-size: 20px;
    }


    /* Modal */

    #PreValidacionParticular .modal-dialog,
    #PreValidacionEmpresa .modal-dialog,
    .prevalidacion-dialog {
        width: auto;
        max-width: none;
        margin: 10px;
    }

    .prevalidacion-header {
        min-height: 65px;
        padding: 15px 20px 5px;
    }

    .prevalidacion-logo {
        max-height: 45px;
        max-width: 170px;
    }

    .prevalidacion-close {
        top: 13px;
        right: 18px;
    }

    .prevalidacion-body {
        padding: 10px 20px 25px;
    }

    .prevalidacion-icono {
        width: 65px;
        height: 65px;
        line-height: 65px;
        font-size: 27px;
        margin-bottom: 18px;
    }

    .prevalidacion-titulo {
        font-size: 25px;
    }

    .prevalidacion-descripcion {
        font-size: 16px;
    }

    .prevalidacion-aviso {
        padding: 14px 16px;
    }

    .prevalidacion-btn-principal,
    .prevalidacion-btn-secundario {
        width: 100%;
        min-width: 0;
        margin-top: 8px;
    }

    .prevalidacion-footer {
        padding-bottom: 18px;
    }
}