/* Estilos de la landing de consentimiento".
   IMPORTANTE: se conserva la lógica de visibilidad por etapas
   (.divtotal.dos .formulario.dos, etc.) de la que depende integraciones8.js. */

:root {
    --red: #C7281F;
    --red-bright: #ED3124;
    --ink: #0c0a09;
    --paper: #ffffff;
    --warm: #f5e7e0;
    --muted: #6f6763;
    --line: rgba(12, 10, 9, .12);
    --ok: #1f9d57;
    --warn: #c2790b;
    --font-display: "Poppins", system-ui, sans-serif;
    --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --r-md: 14px;
    --r-xl: 20px;
}

* { box-sizing: border-box; }

body.consentimiento {
    margin: 0;
    min-height: 100vh;
    background: var(--paper);
    font-family: var(--font-sans);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* ---- Split a pantalla completa --------------------------------------- */
body.consentimiento .divtotal {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1.04fr;
    background: var(--paper);
}

/* ---- Panel izquierdo: beige cálido + collage ------------------------- */
body.consentimiento .divtotal .imagen {
    background: var(--warm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 46px;
    overflow: hidden;
    position: relative;
}
body.consentimiento .divtotal .imagen img { display: none; }
body.consentimiento .divtotal .imagen img.img1,
body.consentimiento .divtotal .imagen img.collage {
    display: block;
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 82vh;          /* que no se desborde a lo alto */
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .12));
}

/* ---- Panel derecho: formulario --------------------------------------- */
section.consentimiento {
    background: var(--paper);
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    text-align: left;
    position: relative;
}
section.consentimiento .contenido { width: 100%; }

.logo-box {
    display: inline-flex;
    align-items: center;
    background: var(--ink);
    border-radius: 11px;
    padding: 13px 17px;
    width: max-content;
    margin-bottom: 6px;
}
.logo-box img {
    display: block;
    height: 40px;
    width: auto;
}

/* ---- Formularios (etapas) -------------------------------------------- */
section.consentimiento .contenido .formulario { width: 100%; animation: ttFade .35s ease; }
@keyframes ttFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

section.consentimiento .contenido .formulario h1 {
    font-family: var(--font-display) !important;
    font-size: clamp(26px, 3vw, 34px) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    margin: 8px 0 4px !important;
    color: var(--ink) !important;
    display: block !important;
    visibility: visible !important;
}
section.consentimiento .contenido .formulario.uno h1 {
    font-size: clamp(38px, 5vw, 52px) !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;
}
section.consentimiento .contenido .formulario.cero h1 { color: var(--red); }

section.consentimiento .contenido .formulario span.sub {
    display: block;
    font-size: 14.5px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.5;
}
section.consentimiento .contenido .formulario span.sub.dos { margin: 18px 0 26px; }

section.consentimiento .contenido .formulario span.final {
    display: block;
    margin-top: 18px;
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
}
section.consentimiento .contenido .formulario span.final a { color: var(--red); text-decoration: none; }

/* ---- Campos ---------------------------------------------------------- */
section.consentimiento input[type="text"],
section.consentimiento input[type="tel"],
section.consentimiento input[type="email"],
section.consentimiento input[type="date"],
section.consentimiento input[type="number"],
section.consentimiento select {
    width: 100%;
    height: 52px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    padding: 0 15px;
    font-family: var(--font-sans);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink);
    background: var(--paper);
    transition: border-color .18s ease, box-shadow .18s ease;
    -webkit-appearance: none;
    appearance: none;
}
section.consentimiento input::placeholder { color: #b4aca7; }
section.consentimiento input:focus,
section.consentimiento select:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(199, 40, 31, .13);
}
section.consentimiento 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='%236f6763' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
    cursor: pointer;
    font-weight: 600;
}

/* campo autocompletado por RENIEC (solo lectura) */
section.consentimiento input.autodato {
    background: #f4f1ef;
    color: #4b443f;
    cursor: not-allowed;
}
/* campos NO editables (datos ya verificados por RMS): en gris */
section.consentimiento input:disabled,
section.consentimiento select:disabled {
    background: #f1eeec;
    color: #8a827d;
    border-color: var(--line);
    cursor: not-allowed;
    -webkit-text-fill-color: #8a827d; /* Safari/iOS respeta el color en disabled */
    opacity: 1;
}
/* género deshabilitado: atenuar radio + etiqueta */
section.consentimiento .genero input[type="radio"]:disabled,
section.consentimiento .genero input[type="radio"]:disabled + label {
    opacity: .55;
    cursor: not-allowed;
}
/* campo fecha (flatpickr): readonly pero clickeable */
section.consentimiento input.flatpickr-input,
section.consentimiento input.flatpickr-input[readonly] {
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
}
/* anular fondo azul/amarillo del autocompletado del navegador */
section.consentimiento input:-webkit-autofill,
section.consentimiento input:-webkit-autofill:hover,
section.consentimiento input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: var(--ink);
    transition: background-color 9999s ease-in-out 0s;
}

/* ---- Form: validar documento (etapa uno) ----------------------------- */
section.consentimiento .contenido .formulario form#consultaDNI {
    margin-top: 18px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.doc-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }

/* ---- Botones --------------------------------------------------------- */
section.consentimiento input[type="submit"],
section.consentimiento button.g-recaptcha,
section.consentimiento .contenido .formulario a.bton {
    width: 100%;
    height: 54px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .02em;
    cursor: pointer;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 10px 22px -10px rgba(199, 40, 31, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .16s cubic-bezier(.2, .7, .3, 1), box-shadow .2s ease, background .2s ease;
}
section.consentimiento input[type="submit"]:hover,
section.consentimiento button.g-recaptcha:hover,
section.consentimiento .contenido .formulario a.bton:hover {
    background: var(--red-bright);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -10px rgba(199, 40, 31, .8);
}
section.consentimiento input[type="submit"]:active { transform: translateY(0); }
/* Boton deshabilitado: hasta que el formulario este completo y el correo verificado */
section.consentimiento input[type="submit"]:disabled,
section.consentimiento input[type="submit"][disabled] {
    background: #c9ccd3;
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 1;
}
section.consentimiento input[type="submit"]:disabled:hover,
section.consentimiento input[type="submit"][disabled]:hover {
    background: #c9ccd3;
    transform: none;
    box-shadow: none;
}
/* Estado "verificando correo…" */
.reg-loading { display: block; font-size: 12.5px; margin-top: 2px; text-align: left; color: var(--muted); font-weight: 600; }
section.consentimiento .contenido .formulario a.bton.blanco {
    background: #fff;
    color: var(--ink);
    border: 1.5px solid var(--line);
    box-shadow: none;
}

/* ---- Form registro: layout ------------------------------------------ */
section.consentimiento .contenido .formulario form#nuevoUsuario,
section.consentimiento .contenido .formulario form#antiguoUsuario {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* fecha de nacimiento + género */
.fecha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.fecha span.txt, .generodiv span.txt {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.generodiv .genero { display: flex; gap: 18px; align-items: center; height: 52px; font-size: 14px; font-weight: 600; }
.generodiv .genero br { display: none; }
.generodiv .genero input[type="radio"] { width: auto; height: auto; accent-color: var(--red); margin-right: 4px; }

/* lugar de residencia */
.residencia { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.ubigeo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.ubigeo select { font-size: 14px; padding: 0 10px; background-position: right 8px center; padding-right: 26px; }

/* checks de consentimiento */
.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.check input[type="checkbox"] { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--red); }
.check label { font-size: 12px; line-height: 1.45; color: var(--muted); font-weight: 500; }
.check label a.rojo, .check label a { color: var(--red); font-weight: 700; text-decoration: none; }

/* ---- Dropdown de dominios de correo --------------------------------- */
section.consentimiento .fecha,
section.consentimiento .generodiv,
section.consentimiento form { position: relative; }
.email-suggest {
    position: absolute;
    z-index: 40;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
    overflow: hidden;
    margin-top: 4px;
}
.email-opt {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
}
.email-opt:hover { background: var(--warm); color: var(--red); }

/* ---- Mensajes RENIEC ------------------------------------------------- */
.dni-ok, .dni-warn { display: block; font-size: 12.5px; margin-top: 2px; text-align: left; }
.dni-ok { color: var(--ok); font-weight: 600; }
.dni-warn { color: var(--warn); }
.dni-error {
    display: block; width: 100%; margin: 10px 0 0; padding: 11px 14px;
    background: #fdecec; border: 1px solid #f3b6b4; border-radius: 12px;
    color: #a4231d; font-size: 13px; text-align: left; line-height: 1.4;
}

section.consentimiento input.error,
section.consentimiento select.error {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px rgba(199, 40, 31, .12) !important;
}
section.consentimiento label.error { display: none !important; }

/* ---- Loader overlay -------------------------------------------------- */
body.consentimiento.cargando::before {
    content: ""; position: fixed; inset: 0; background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(1px); z-index: 50;
}
body.consentimiento.cargando::after {
    content: ""; position: fixed; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px;
    border: 4px solid rgba(199, 40, 31, .2); border-top-color: var(--red); border-radius: 50%;
    z-index: 51; animation: ttSpin .8s linear infinite;
}
@keyframes ttSpin { to { transform: rotate(360deg); } }
#loadingCupon img { width: 56px; height: 56px; }

/* ---- Calendario flatpickr (tema Topitop) ---------------------------- */
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--red); border-color: var(--red); }
.flatpickr-day.today { border-color: var(--red); }
.flatpickr-day:hover { background: #fdecec; border-color: #fdecec; }
.flatpickr-calendar { border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); font-family: var(--font-sans); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--red); }
/* Dropdowns propios COMPACTOS de mes/año (reemplazan los <select> nativos,
   que no se pueden acotar en altura). */
/* flatpickr recorta el encabezado (overflow hidden); hay que dejar desbordar
   para que la lista desplegable se vea por debajo de los botones. */
.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-current-month { overflow: visible !important; }
.flatpickr-calendar { overflow: visible; }
/* Elevar TODO el encabezado por encima de la grilla de dias, para que la lista
   desplegable quede arriba y sea clickeable (si no, los numeros la tapan). */
.flatpickr-months { position: relative; z-index: 20; }
.flatpickr-innerContainer { position: relative; z-index: 1; }
.flatpickr-current-month { display: inline-flex; align-items: center; gap: 8px; }
.fp-dd { position: relative; display: inline-block; }
.fp-dd-btn {
    position: relative;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 4px 24px 4px 10px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    line-height: 1.2;
}
.fp-dd-btn::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 50%;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #6f6763;
    transform: translateY(-50%);
}
.fp-dd-btn:hover { border-color: var(--red); }
.fp-dd-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 188px;       /* <- aqui se acota el tamaño: lista compacta con scroll */
    overflow-y: auto;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
    z-index: 120;
    padding: 4px;
}
.fp-dd.open .fp-dd-list { display: block; }
.fp-dd-anio .fp-dd-list { left: auto; right: 0; } /* el año a la derecha para no salirse */
.fp-dd-opt {
    padding: 5px 12px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
}
.fp-dd-opt:hover { background: #fdecec; }
.fp-dd-opt.sel { background: var(--red); color: #fff; }
/* scrollbar discreto en la lista */
.fp-dd-list::-webkit-scrollbar { width: 8px; }
.fp-dd-list::-webkit-scrollbar-thumb { background: #d9d2cd; border-radius: 8px; }

/* ---- Dropdown con BUSCADOR para lugar de residencia (.ss) -------------- */
.ss { position: relative; width: 100%; }
.ss-btn {
    width: 100%;
    height: 52px;
    text-align: left;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    padding: 0 36px 0 15px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ss-btn::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #6f6763;
    transform: translateY(-50%);
}
.ss-btn:hover { border-color: var(--red); }
.ss.open .ss-btn { border-color: var(--red); box-shadow: 0 0 0 4px rgba(199, 40, 31, .13); }
.ss-btn.ss-ph { color: #b4aca7; font-weight: 500; } /* placeholder (-Provincia-, etc.) */
.ss.ss-disabled .ss-btn { background: #f1eeec; color: #8a827d; cursor: not-allowed; border-color: var(--line); }
.ss.ss-disabled .ss-btn::after { opacity: .5; }
.ss-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    min-width: 240px;          /* mas ancho que la columna del grid (nombres largos de distrito) */
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .2);
    z-index: 130;
    padding: 7px;
}
.ss.open .ss-panel { display: block; }
/* en la 3a columna (distrito) abrir hacia la izquierda para no salirse por la derecha */
.ubigeo > div:nth-child(3) .ss-panel { left: auto; right: 0; }
.ss-search {
    width: 100%;
    height: 38px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 7px;
}
.ss-search:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(199, 40, 31, .12); }
.ss-list { max-height: 210px; overflow-y: auto; }
.ss-opt {
    padding: 8px 12px;
    font-family: var(--font-sans);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
    border-radius: 6px;
    cursor: pointer;
}
.ss-opt:hover { background: #fdecec; }
.ss-opt.sel { background: var(--red); color: #fff; }
.ss-list::-webkit-scrollbar { width: 8px; }
.ss-list::-webkit-scrollbar-thumb { background: #d9d2cd; border-radius: 8px; }

/* =========================================================================
   CONTROL DE VISIBILIDAD POR ETAPAS (no modificar: integraciones8.js
   agrega/quita las clases .cero..ocho en .divtotal)
   ========================================================================= */
section.consentimiento .contenido .formulario.cero,
section.consentimiento .contenido .formulario.dos,
section.consentimiento .contenido .formulario.tres,
section.consentimiento .contenido .formulario.cuatro,
section.consentimiento .contenido .formulario.cinco,
section.consentimiento .contenido .formulario.seis,
section.consentimiento .contenido .formulario.siete,
section.consentimiento .contenido .formulario.ocho { display: none; }

body.consentimiento .divtotal.cero  section.consentimiento .contenido .formulario.uno,
body.consentimiento .divtotal.dos   section.consentimiento .contenido .formulario.uno,
body.consentimiento .divtotal.tres  section.consentimiento .contenido .formulario.uno,
body.consentimiento .divtotal.cuatro section.consentimiento .contenido .formulario.uno,
body.consentimiento .divtotal.cinco section.consentimiento .contenido .formulario.uno,
body.consentimiento .divtotal.seis  section.consentimiento .contenido .formulario.uno,
body.consentimiento .divtotal.siete section.consentimiento .contenido .formulario.uno,
body.consentimiento .divtotal.ocho  section.consentimiento .contenido .formulario.uno { display: none; }

body.consentimiento .divtotal.cero   section.consentimiento .contenido .formulario.cero   { display: block; }
body.consentimiento .divtotal.dos    section.consentimiento .contenido .formulario.dos    { display: block; }
body.consentimiento .divtotal.tres   section.consentimiento .contenido .formulario.tres   { display: block; }
body.consentimiento .divtotal.cuatro section.consentimiento .contenido .formulario.cuatro { display: block; }
body.consentimiento .divtotal.cinco  section.consentimiento .contenido .formulario.cinco  { display: block; }
body.consentimiento .divtotal.seis   section.consentimiento .contenido .formulario.seis   { display: block; }
body.consentimiento .divtotal.siete  section.consentimiento .contenido .formulario.siete  { display: block; }
body.consentimiento .divtotal.ocho   section.consentimiento .contenido .formulario.ocho   { display: block; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 760px) {
    body.consentimiento { padding: 0; align-items: stretch; }
    body.consentimiento .divtotal {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        border-radius: 0;
        min-height: 100vh;
        box-shadow: none;
    }
    body.consentimiento .divtotal .imagen { padding: 26px; }
    body.consentimiento .divtotal .imagen img.img1,
    body.consentimiento .divtotal .imagen img.collage { max-width: 56%; max-height: 32vh; }
    section.consentimiento { padding: 30px 22px 40px; justify-content: flex-start; }
}

@media (max-width: 460px) {
    .row-2, .fecha { grid-template-columns: 1fr; }
    .ubigeo { grid-template-columns: 1fr; }
    .doc-row { grid-template-columns: 104px 1fr; }
}