html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* ===============================
   MOBILE MENU BTN — oculto por defecto en desktop
   =============================== */
.mobile-menu-btn {
    display: none;
}

/* ===============================
   RESPONSIVE GLOBAL GAMA
   =============================== */
@media (max-width: 768px) {

    /* --- Contenido general --- */
    .gama-content {
        padding: 20px 12px !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .page-title {
        font-size: 1.45rem !important;
    }

    .page-subtitle {
        font-size: 0.95rem !important;
    }

    .form-card,
    .tabla-card,
    .filtros-card,
    .resumen-card {
        width: 100% !important;
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .resumen-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Acciones y botones --- */
    .acciones,
    .form-actions,
    .actions {
        flex-direction: column !important;
        width: 100% !important;
    }

        .acciones a,
        .acciones button,
        .acciones form,
        .form-actions a,
        .form-actions button,
        .actions a,
        .actions button {
            width: 100% !important;
            text-align: center !important;
            justify-content: center !important;
        }

    .btn,
    .btn-main,
    .btn-back,
    .btn-filtrar,
    .btn-pdf,
    .btn-primary-custom,
    .btn-secondary-custom,
    .btn-action,
    .btn-asignar {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        margin-bottom: 6px !important;
    }

    /* --- Tablas responsive --- */
    .tabla-card {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .tabla,
    .tabla-usuarios,
    table {
        width: 100% !important;
        min-width: 700px !important;
    }

        .tabla thead th,
        .tabla-usuarios thead th,
        table thead th {
            white-space: nowrap !important;
            padding: 12px 14px !important;
            font-size: 0.9rem !important;
        }

        .tabla tbody td,
        .tabla-usuarios tbody td,
        table tbody td {
            white-space: nowrap !important;
            padding: 12px 14px !important;
            font-size: 0.9rem !important;
        }

    /* --- Navbar responsive --- */
    .gama-navbar {
        height: auto !important;
        min-height: 64px !important;
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
    }

    .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: #5A3E35;
        font-size: 1.7rem;
        cursor: pointer;
        margin-left: auto;
    }

    .nav-right {
        margin-left: 8px !important;
        gap: 10px !important;
    }

    .nav-links {
        display: none !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-top: 12px !important;
        padding: 12px 0 !important;
        border-top: 1px solid #DDD0C8 !important;
        order: 10;
    }

        .nav-links.show {
            display: flex !important;
        }

        .nav-links li,
        .nav-links a {
            width: 100% !important;
        }

        .nav-links a {
            padding: 12px 14px !important;
            justify-content: flex-start !important;
            background: #FAF7F2 !important;
            border-radius: 10px !important;
        }

    .nav-right .user-info span,
    .user-info > span {
        display: none !important;
    }

    .btn-logout {
        padding: 8px 12px !important;
        font-size: 0 !important;
    }

        .btn-logout svg {
            margin: 0 !important;
        }

    /* LOGIN RESPONSIVE */
    @media (max-width: 768px) {
        .login-container,
        .login-card,
        .auth-container,
        .auth-card {
            width: 100% !important;
            max-width: 100% !important;
            padding: 22px 18px !important;
            margin: 0 auto !important;
            border-radius: 14px !important;
        }

        .login-wrapper,
        .auth-wrapper {
            padding: 20px 12px !important;
            min-height: auto !important;
        }

        .login-title,
        .auth-title {
            font-size: 1.6rem !important;
            text-align: center !important;
        }

        .login-subtitle,
        .auth-subtitle {
            font-size: 0.95rem !important;
            text-align: center !important;
        }

        .form-control,
        .input-validation-error {
            width: 100% !important;
            font-size: 1rem !important;
        }

        .btn-login,
        .btn-auth,
        .btn-primary-custom {
            width: 100% !important;
            justify-content: center !important;
            text-align: center !important;
        }
    }
    .login-wrapper {
    max-width: 520px;
    padding: 24px 20px;
}

.login-card {
    padding: 34px 40px 38px;
}

.links-secundarios {
    margin-top: 20px;
}

.external-sep {
    margin-top: 22px;
}

@media (min-width: 769px) {
    body {
        align-items: center;
    }

    .login-wrapper {
        max-width: 500px;
    }
}

@@media (max-width: 768px) {
    body {
        align-items: flex-start;
        padding: 12px;
    }

    .login-wrapper {
        max-width: 100%;
        padding: 14px 8px;
    }

    .login-header {
        margin-bottom: 20px;
    }

    .login-card {
        padding: 24px 18px;
    }

    .links-secundarios {
        flex-direction: column;
        gap: 10px;
    }

    .sep-links {
        display: none;
    }
}
}