/* Inicio de sesión en el teléfono (< 768 px): la primera impresión de la app.
   Lienzo crema con un resplandor terracota arriba (CSS, sin imágenes), tarjeta
   redondeada con sombra cálida, campos grandes y botón firme. En computadora no cambia. */
@media (max-width: 767.98px) {
    .login-page {
        --login-brand: #8a4534;
        --login-ink: #243348;
        --login-muted: #596779;
        --login-line: #eadfd8;
        min-height: 100dvh;
        align-items: flex-start !important;
        padding: calc(40px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        background:
            radial-gradient(120% 60% at 50% -12%, rgba(138, 69, 52, 0.16), rgba(138, 69, 52, 0) 70%),
            #f7f2ee !important;
    }

    /* Logo y nombre del sistema. */
    .login-page .text-center.mb-6 {
        margin-bottom: 22px;
    }

    .login-page .text-center.mb-6 img {
        height: 72px;
    }

    .login-page .text-center.mb-6 p {
        color: var(--login-muted);
        font-size: 14px;
        letter-spacing: 0.01em;
    }

    /* Tarjeta. */
    .login-page .bg-white.rounded-2xl {
        padding: 26px 22px 20px !important;
        border: 1px solid var(--login-line);
        border-radius: 24px !important;
        box-shadow: 0 2px 4px rgba(74, 38, 27, 0.05), 0 24px 48px -28px rgba(74, 38, 27, 0.45) !important;
    }

    .login-page h2 {
        margin-bottom: 20px !important;
        color: var(--login-ink) !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em;
    }

    .login-page label {
        color: var(--login-ink) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
    }

    /* Campos: 52 px, esquinas suaves, relleno cálido; el ícono a la izquierda siempre visible. */
    .login-page .input-custom {
        height: 52px;
        padding-left: 46px !important;
        border: 1.5px solid var(--login-line) !important;
        border-radius: 14px !important;
        background: #fbf8f6 !important;
        color: var(--login-ink);
        font-size: 16px !important;
        text-align: left !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }

    .login-page .input-custom::placeholder {
        color: #8a94a3;
    }

    .login-page .input-custom:focus {
        outline: none;
        border-color: var(--login-brand) !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 4px rgba(138, 69, 52, 0.14) !important;
    }

    .login-page .relative > .absolute.left-0 {
        z-index: 1;
        padding-left: 16px !important;
        color: #8a94a3;
    }

    .login-page .relative > .absolute.left-0 i {
        font-size: 16px !important;
    }

    .login-page .login-eye {
        min-width: 48px;
        justify-content: center;
        padding-right: 4px !important;
    }

    /* Botón principal. */
    .login-page #loginSubmitBtn {
        min-height: 54px;
        margin-top: 4px;
        border-radius: 14px !important;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.01em;
        box-shadow: 0 10px 22px -12px rgba(138, 69, 52, 0.8);
    }

    .login-page #loginSubmitBtn:active {
        transform: translateY(1px);
        box-shadow: 0 4px 10px -6px rgba(138, 69, 52, 0.8);
    }

    /* Pie: discreto. */
    .login-page .mt-6.pt-6 {
        margin-top: 14px !important;
        padding-top: 14px !important;
        border-top: 1px solid #f1e9e4;
    }

    .login-page .mt-6.pt-6 .text-sm {
        font-size: 12.5px;
    }
}