/* modal.css — cuadro de inicio de sesión emergente (dialog nativo) */
.modal-login { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; overflow: visible; margin: auto; }
.modal-login::backdrop { background: rgba(28, 27, 11, .62); backdrop-filter: blur(3px); }
.modal-login-caja {
    position: relative; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
    padding: 30px 28px 24px; border-radius: 22px; background: var(--fondo-tarjeta); color: var(--texto-principal);
    box-shadow: 0 24px 60px rgba(28, 27, 11, .35);
}
.modal-login[open] .modal-login-caja { animation: modal-entra .22s ease-out; }
@keyframes modal-entra { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-login h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.3px; }
.modal-login-motivo { margin: 0 0 16px; color: var(--texto-secundario); font-size: 14px; }
.modal-login-google { display: flex; justify-content: center; min-height: 0; }
.modal-login-cerrar {
    position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: transparent; color: var(--texto-principal); font-size: 18px; cursor: pointer;
}
.modal-login-cerrar:hover { background: rgba(255, 96, 22, .12); }
.modal-login-cerrar:focus-visible, .modal-login input:focus-visible { outline: 3px solid var(--color-naranja); outline-offset: 2px; }
.modal-login form label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 14px; }
.modal-login form input {
    width: 100%; padding: 12px 14px; font: inherit; color: var(--texto-principal); background: var(--fondo-tarjeta);
    border: 1.5px solid var(--borde-sutil); border-radius: 12px;
}
.modal-login form input.campo-error { border-color: #d64545; }
.modal-login .btn-primario { width: 100%; margin-top: 18px; }
.modal-login .enlace-secundario { text-align: center; margin: 12px 0 0; font-size: 14px; }
.modal-login .separador { margin: 14px 0 0; }
@media (max-width: 520px) {
    /* en el celular el cuadro sube desde abajo, como una hoja */
    .modal-login { margin: auto 0 0; width: 100%; }
    .modal-login-caja { width: 100%; border-radius: 22px 22px 0 0; max-height: 92dvh; padding: 26px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) { .modal-login[open] .modal-login-caja { animation: none; } }