/* ============================================================
   Modales de cuenta del sitio publico (28-09-2026)
   Documentacion/Web/PLAN_MODAL_INICIO_SESION.md, fase F2.
   Prefijo mc-. Se carga despues de Landing2.css y usa sus tokens
   (--landing-*), que ya cambian con html.dark: por eso casi no hay
   reglas propias de modo oscuro.
   Por ahora solo #modal-inicio-sesion lleva la clase mc-modal; F3
   aplicara las mismas clases a olvide-contrasena y registro.
   - Celular (< 768 px): hoja que sube desde abajo, maximo 92 % de la
     altura visible (dvh), desplazamiento propio y margen para la barra
     de gestos (safe-area-inset-bottom).
   - Escritorio: tarjeta de 420 px centrada de verdad (flex).
   - Bootstrap 3 sigue manejando abrir y cerrar (.modal, .modal-dialog,
     .fade/.in, modal-open en el body); aqui solo se cambia el aspecto.
   - Los selectores van con .mc-modal delante para ganarle a Bootstrap
     (.form-control, .help-block, .alert) y a Landing2 (.modal-content label).
   ============================================================ */

/* ---------- Dialogo: tarjeta centrada en escritorio ---------- */
.mc-modal .modal-dialog {
    display: flex;
    width: 420px;
    max-width: calc(100% - 32px);
    min-height: calc(100% - 48px);
    align-items: center;
}

/* style.min.css fija margin-top: 30vh con id; se anula con la misma especificidad. */
#modal-inicio-sesion .modal-dialog {
    margin: 24px auto;
}

.mc-modal .modal-content {
    position: relative;
    width: 100%;
    padding: 28px 28px 24px;
    border: 0;
    border-radius: var(--landing-radius, 18px);
    background: var(--landing-card, #fff);
    color: var(--landing-fg, #003450);
    box-shadow: var(--landing-shadow, 0 18px 45px rgba(0, 52, 80, .12));
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    text-align: left;
}

html.dark .mc-modal .modal-content {
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

/* ---------- Asa (solo en la hoja del celular) ---------- */
.mc-asa {
    display: none;
    width: 44px;
    height: 5px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: var(--landing-line);
}

/* ---------- Cerrar: 44 px para el dedo ---------- */
.mc-modal .mc-cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--landing-fg-soft);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.mc-modal .mc-cerrar:hover,
.mc-modal .mc-cerrar:focus-visible {
    background: var(--landing-page-alt);
    color: var(--landing-fg);
    outline: 0;
}

.mc-modal .mc-cerrar svg {
    width: 20px;
    height: 20px;
}

/* ---------- Cabecera ---------- */
.mc-modal .mc-titulo {
    margin: 0 48px 4px 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--landing-fg);
}

.mc-modal .mc-subtitulo {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--landing-fg-soft);
}

/* ---------- Campos ---------- */
.mc-modal .mc-campo {
    margin-bottom: 14px;
}

.mc-modal .mc-label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--landing-fg);
}

.mc-modal .mc-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--landing-line);
    border-radius: 12px;
    background: var(--landing-page);
    color: var(--landing-fg);
    font-family: inherit;
    font-size: 16px; /* Safari en iPhone hace zoom con menos de 16 px */
    line-height: 1.3;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.mc-modal .mc-input::placeholder {
    color: var(--landing-fg-soft);
    opacity: .7;
}

.mc-modal .mc-input:focus {
    border-color: var(--landing-cian-600);
    box-shadow: 0 0 0 3px rgba(6, 184, 166, .2);
    outline: 0;
}

.mc-modal .has-error .mc-input {
    border-color: #e5484d;
    box-shadow: none;
}

.mc-modal .has-error .mc-input:focus {
    box-shadow: 0 0 0 3px rgba(229, 72, 77, .18);
}

.mc-modal .mc-input-wrap {
    position: relative;
}

.mc-modal .mc-input-wrap .mc-input {
    padding-right: 52px;
}

/* Ojo para ver la contrasena */
.mc-modal .mc-ojo {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--landing-fg-soft);
    cursor: pointer;
}

.mc-modal .mc-ojo:hover,
.mc-modal .mc-ojo:focus-visible {
    color: var(--landing-cian-600);
    outline: 0;
}

.mc-modal .mc-ojo svg {
    width: 22px;
    height: 22px;
}

.mc-modal .mc-ojo .mc-ojo__off,
.mc-modal .mc-ojo[aria-pressed="true"] .mc-ojo__on {
    display: none;
}

.mc-modal .mc-ojo[aria-pressed="true"] .mc-ojo__off {
    display: block;
}

/* Mensaje bajo el campo (lo escribe FuncionesLayaut.ValidarCamposObligatorios) */
.mc-modal .mc-ayuda {
    display: block;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #d93025;
}

html.dark .mc-modal .mc-ayuda {
    color: #ff8a8e;
}

.mc-modal .mc-olvide {
    margin-top: 8px;
    text-align: right;
}

/* Enlaces de accion (son <button> para que respondan al teclado; conservan sus ids) */
.mc-modal .mc-enlace {
    padding: 0;
    border: 0;
    background: none;
    color: var(--landing-azul-700);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.mc-modal .mc-enlace:hover,
.mc-modal .mc-enlace:focus-visible {
    color: var(--landing-cian-700);
    outline: 0;
}

html.dark .mc-modal .mc-enlace {
    color: var(--landing-cian-400);
}

html.dark .mc-modal .mc-enlace:hover,
html.dark .mc-modal .mc-enlace:focus-visible {
    color: var(--landing-cian-200);
}

/* ---------- Mensaje de error del servidor o de red ---------- */
.mc-modal .mc-mensaje {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(229, 72, 77, .35);
    border-radius: 12px;
    background: rgba(229, 72, 77, .08);
    color: #b3261e;
    font-size: 13px;
    line-height: 1.45;
}

html.dark .mc-modal .mc-mensaje {
    background: rgba(229, 72, 77, .18);
    color: #ffb4b6;
}

/* ---------- Boton principal ---------- */
.mc-modal .mc-boton {
    display: flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--landing-cian-500);
    color: var(--landing-azul-950);
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(15, 239, 217, .26);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease;
}

.mc-modal .mc-boton:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.mc-modal .mc-boton:focus-visible {
    outline: 2px solid var(--landing-azul-800);
    outline-offset: 3px;
}

.mc-modal .mc-boton:disabled {
    opacity: .75;
    transform: none;
    filter: none;
    cursor: default;
}

.mc-modal .mc-boton__cargando {
    display: none;
    align-items: center;
    gap: 10px;
}

.mc-modal .mc-boton__cargando::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 31, 48, .3);
    border-top-color: var(--landing-azul-950);
    border-radius: 50%;
    animation: mc-girar .8s linear infinite;
}

.mc-modal .mc-boton--cargando .mc-boton__texto {
    display: none;
}

.mc-modal .mc-boton--cargando .mc-boton__cargando {
    display: inline-flex;
}

@keyframes mc-girar {
    to { transform: rotate(360deg); }
}

/* ---------- Separador "o" ---------- */
.mc-modal .mc-separador {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
    color: var(--landing-fg-soft);
    font-size: 12px;
}

.mc-modal .mc-separador::before,
.mc-modal .mc-separador::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--landing-line);
}

/* ---------- Google (lo dibuja Google en un iframe; Layaut.js fija el ancho) ---------- */
.mc-modal .mc-google {
    display: flex;
    justify-content: center;
}

.mc-modal .mc-google .g_id_signin > div {
    margin: 0 auto;
}

/* ---------- Pie ---------- */
.mc-modal .mc-pie {
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--landing-fg-soft);
}

/* ---------- Celular: hoja inferior ---------- */
@media (max-width: 767px) {
    .mc-modal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        width: auto;
        max-width: none;
        min-height: 0;
    }

    #modal-inicio-sesion .modal-dialog {
        margin: 0;
    }

    /* Bootstrap desliza el dialogo desde arriba (translate -25 %); la hoja sube desde abajo. */
    .mc-modal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform .3s ease-out;
    }

    .mc-modal.in .modal-dialog {
        transform: none;
    }

    .mc-modal .modal-content {
        max-height: 92vh;
        max-height: 92dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px));
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -12px 40px rgba(0, 18, 29, .3);
    }

    .mc-asa {
        display: block;
    }

    .mc-modal .mc-cerrar {
        top: 8px;
        right: 8px;
    }

    .mc-modal .mc-titulo {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-modal.fade .modal-dialog,
    .mc-modal .mc-boton,
    .mc-modal .mc-input {
        transition: none;
    }

    .mc-modal .mc-boton__cargando::before {
        animation: none;
    }
}