/* ========== IEB LOGIN (ieb.html) — MOBILE ========== */

@media (max-width: 1000px) {
    .page-wrapper {
        padding: 2.5rem 1.5rem;
    }

    .login-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding: 40px 24px 24px;
        width: 100%;
    }

    .login-content {
        margin-left: 0;
        margin-top: 40px;
        width: 100%;
        max-width: 432px;
        min-height: auto;
    }

    .login-title {
        width: 100%;
    }

    .login-left form,
    .ieb-form {
        width: 100%;
        max-width: 432px;
    }

    .login-footer {
        width: 100%;
        max-width: 475px;
        margin-left: 0;
        padding: 16px 0 0;
    }
}

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .page-wrapper {
        padding: 2rem 1rem;
        align-items: stretch;
        min-height: 100svh;
    }

    .login-card {
        gap: 24px;
        padding: 24px 16px 16px;
    }

    .login-content {
        margin-top: 24px;
        max-width: 100%;
    }

    .login-title {
        font-size: 34px;
        height: auto;
    }

    .login-subtitle {
        margin-bottom: 32px;
        font-size: 15px;
    }

    /* Omitir banner promocional en móvil */
    .login-right {
        display: none !important;
    }

    .form-input {
        font-size: 16px;
    }

    .btn-login {
        width: 100%;
    }

    .ieb-token-step {
        padding: 24px 12px;
    }

    .ieb-token-logo {
        width: 140px;
    }

    .ieb-token-row {
        flex-direction: column;
        align-items: center;
    }

    .ieb-token-icon svg {
        width: 56px;
        height: 56px;
    }

    .ieb-token-main {
        width: 100%;
    }

    .ieb-token-fields {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .ieb-token-timer-label,
    .ieb-token-device-label,
    .ieb-token-input-label {
        justify-self: start;
        text-align: left;
    }

    .ieb-token-progress-track,
    .ieb-token-device-code,
    .ieb-token-input-row {
        width: 100%;
        max-width: 100%;
    }

    .ieb-token-input-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .ieb-token-btn {
        align-self: flex-end;
    }

    .ieb-token-warning {
        font-size: 12px;
    }

    .ieb-loading-content {
        padding: 16px;
        max-width: calc(100vw - 32px);
    }

    #adminModal.modal-overlay.active {
        padding: 12px;
        align-items: flex-end;
    }

    #adminModal .modal-container {
        width: 100%;
        max-width: none;
        max-height: 92svh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
    }

    .tela-ieb-modal,
    .tela-token-ieb-modal .modal-message {
        max-width: 100%;
    }

    .tela-ieb-input {
        font-size: 16px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .page-wrapper {
        padding: 1.25rem 0.75rem;
    }

    .login-title {
        font-size: 28px;
    }

    .login-subtitle {
        margin-bottom: 24px;
        font-size: 14px;
    }

    .login-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .footer-link-help {
        margin-left: 0;
    }

    .login-footer-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ieb-token-box,
    .ieb-token-box-inner {
        padding: 14px 12px;
    }

    .token-sync-error-title {
        font-size: 13px;
    }

    .token-sync-error-text {
        font-size: 12px;
    }
}

@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .page-wrapper {
            padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
        }
    }
}