/* ==========================================
   MAMBO MAGIC ADMIN · MOBILE RESPONSIVE
   Capa aislada: no modifica el escritorio.
========================================== */
.mobile-admin-bar,
.mobile-menu-backdrop {
    display: none;
}

@media (max-width: 820px) {
    :root {
        --mobile-bar-height: 58px;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    body.mobile-menu-open {
        overflow: hidden;
        touch-action: none;
    }

    /* ---------- LOGIN ---------- */
    .login-view {
        min-height: 100dvh;
        height: auto;
        overflow: visible;
    }

    .login-panel {
        width: 100%;
        min-height: 100dvh;
        height: auto;
        padding: max(24px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom));
    }

    .login-logo {
        max-width: min(210px, 72vw);
    }

    .login-form {
        width: min(100%, 520px);
        margin-left: auto;
        margin-right: auto;
    }

    /* Evita el zoom automático de iOS al enfocar formularios. */
    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    /* ---------- BARRA SUPERIOR MÓVIL ---------- */
    .mobile-admin-bar {
        position: fixed;
        z-index: 1300;
        top: 0;
        left: 0;
        right: 0;
        min-height: calc(var(--mobile-bar-height) + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 14px 0;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        align-items: center;
        gap: 10px;
        background: rgba(8, 8, 8, .96);
        border-bottom: 1px solid #292720;
        box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .mobile-menu-button {
        width: 42px;
        height: 42px;
        padding: 0;
        display: grid;
        place-content: center;
        gap: 5px;
        color: var(--gold);
        background: #0d0d0d;
        border: 1px solid #302d27;
        cursor: pointer;
    }

    .mobile-menu-button span {
        width: 18px;
        height: 1px;
        display: block;
        background: currentColor;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    .mobile-menu-button[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .mobile-menu-button[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-button[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .mobile-admin-brand {
        min-width: 0;
        text-align: center;
        line-height: 1.1;
    }

    .mobile-admin-brand strong,
    .mobile-admin-brand span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-admin-brand strong {
        color: #e5e1d7;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 2px;
    }

    .mobile-admin-brand span {
        margin-top: 4px;
        color: var(--gold);
        font-size: 7px;
        font-weight: 900;
        letter-spacing: 2px;
    }

    .mobile-admin-mark {
        width: 34px;
        height: 34px;
        justify-self: end;
        display: grid;
        place-items: center;
        color: var(--gold);
        background: linear-gradient(145deg, rgba(221,185,120,.08), #0d0d0d);
        border: 1px solid #302d27;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 1px;
    }

    /* ---------- DRAWER / MENÚ ---------- */
    .dashboard-view {
        display: block;
        width: 100%;
        min-height: 100dvh;
        height: auto;
        overflow: visible;
    }

    .sidebar {
        position: fixed;
        z-index: 1500;
        top: 0;
        left: 0;
        width: min(84vw, 310px);
        max-width: 310px;
        height: 100dvh;
        padding: max(18px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        background: #090909;
        border-right: 1px solid #332f28;
        border-bottom: 0;
        box-shadow: 22px 0 60px rgba(0,0,0,.55);
        transform: translateX(-104%);
        transition: transform 220ms ease;
        overscroll-behavior: contain;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar-logo-box {
        display: flex;
        margin-bottom: 8px;
    }

    .sidebar-logo {
        width: 154px;
        max-height: 72px;
    }

    .sidebar-title {
        display: block;
        padding-bottom: 14px;
    }

    .sidebar-title small {
        font-size: 8px;
        letter-spacing: 2.5px;
    }

    .sidebar-nav {
        margin-top: 14px;
        display: grid;
        gap: 4px;
        overflow: visible;
    }

    .nav-item,
    .nav-item:hover,
    .nav-item.active {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 0 14px;
        text-align: left;
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .nav-item:hover,
    .nav-item.active {
        padding-left: 19px;
    }

    .nav-item::before {
        top: 10px;
        bottom: 10px;
        left: -1px;
        right: auto;
        width: 2px;
        height: auto;
    }

    .sidebar-partners {
        display: flex;
        margin-top: auto;
    }

    .sidebar > .logout-button {
        display: block;
        min-height: 46px;
        height: 46px;
        margin-top: 0;
        font-size: 9px;
    }

    .mobile-menu-backdrop {
        position: fixed;
        z-index: 1400;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        background: rgba(0,0,0,.68);
        border: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .mobile-menu-backdrop.is-visible {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    /* ---------- CONTENIDO ---------- */
    .admin-main {
        width: 100%;
        min-width: 0;
        min-height: 100dvh;
        height: auto;
        padding: calc(var(--mobile-bar-height) + env(safe-area-inset-top) + 16px) 14px max(42px, env(safe-area-inset-bottom));
        overflow: visible;
        overflow-x: clip;
    }

    .admin-header {
        min-height: 0;
        display: block;
    }

    .admin-header h1 {
        margin-top: 5px;
        font-size: clamp(21px, 7vw, 27px);
        line-height: 1.08;
    }

    .admin-user {
        display: none;
    }

    .header-line {
        width: 54px;
        margin-top: 9px;
    }

    .overline,
    .section-label {
        font-size: 8px;
        letter-spacing: 2px;
    }

    .welcome-section {
        margin-top: 14px;
        padding: 17px 16px;
    }

    .welcome-section h2 {
        margin: 6px 0 5px;
        font-size: clamp(21px, 6.8vw, 27px);
    }

    .welcome-section > p:last-child {
        font-size: 11px;
        line-height: 1.5;
    }

    .quick-section {
        margin-top: 16px;
    }

    .section-heading {
        margin-bottom: 9px;
    }

    .section-heading h2 {
        font-size: 19px;
    }

    /* ---------- DASHBOARD ---------- */
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .stat-card {
        min-height: 96px;
        padding: 13px;
    }

    .stat-card strong {
        font-size: 23px;
    }

    .analytics-section {
        margin-top: 12px;
        padding: 12px;
    }

    .analytics-header {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .analytics-controls {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .analytics-controls select,
    .analytics-controls input,
    .analytics-button {
        width: 100%;
        min-height: 44px;
        height: 44px;
        font-size: 16px;
    }

    .analytics-summary-grid,
    .ledger-summary,
    .attendance-history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-kpi {
        padding: 10px;
    }

    .analytics-kpi strong {
        font-size: 19px;
    }

    .analytics-detail-grid,
    .ledger-columns,
    .payment-grid {
        grid-template-columns: 1fr;
    }

    .analytics-panel {
        max-height: none;
    }

    /* ---------- FORMULARIOS / CONTROLES ---------- */
    .form-group {
        min-width: 0;
        margin-bottom: 11px;
    }

    .form-group label {
        margin-bottom: 6px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    #attendanceType,
    #attendanceStudentSelect,
    #attendanceActivityName,
    #attendanceWorkshopSelect,
    #planSelect,
    #planStartDate {
        min-height: 46px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 16px;
    }

    .gold-button,
    .logout-button,
    .danger-button {
        min-height: 46px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    /* ---------- ALUMNOS ---------- */
    .students-search-actions,
    .student-profile-actions,
    .student-detail-actions,
    .dialog-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .students-search-actions .gold-button,
    .students-secondary-button,
    .student-action-button,
    .student-profile-actions .logout-button,
    .student-profile-actions .danger-button,
    .dialog-actions .gold-button,
    .dialog-actions .logout-button,
    .dialog-actions .danger-button {
        width: 100%;
        min-width: 0;
    }

    .students-suggestions,
    .attendance-student-suggestions,
    .plan-student-suggestions,
    .workshop-student-suggestions {
        max-height: min(42dvh, 320px);
    }

    #studentPhotoArea {
        width: 72px;
        height: 72px;
    }

    /* ---------- ASISTENCIAS ---------- */
    #attendanceView .welcome-section {
        margin-top: 14px;
        padding: 17px 16px;
    }

    .attendance-workspace,
    .attendance-form-stack {
        min-width: 0;
    }

    .attendance-form-card,
    #attendanceForm {
        padding: 15px 14px;
    }

    .attendance-search-row,
    .attendance-visitor-grid,
    .attendance-class-row {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .attendance-class-row #attendanceWorkshopField:not(.hidden) {
        grid-column: auto;
    }

    #attendanceSearchButton.attendance-search-button,
    #attendanceForm .attendance-submit-bar > .gold-button {
        width: 100%;
        min-width: 0;
        min-height: 46px;
    }

    .attendance-submit-bar {
        padding: 12px;
        align-items: stretch;
        flex-direction: column;
    }

    /* ---------- PLANES ---------- */
    .plans-grid {
        grid-template-columns: 1fr;
    }

    .plan-management-card {
        min-height: 0;
        padding: 17px 15px;
    }

    .plans-search-button,
    .plans-cancel-button {
        width: 100%;
        min-width: 0;
    }

    /* ---------- WORKSHOPS ---------- */
    .workshops-list,
    .workshop-form-grid {
        grid-template-columns: 1fr;
    }

    .workshop-toolbar,
    .workshop-enrollment-actions,
    .workshop-detail-actions,
    .workshop-registration-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .workshop-toolbar-button,
    .workshop-action-button,
    .workshop-inline-button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }

    .workshop-enrollment-section {
        padding: 16px 14px;
    }

    .workshop-registration-row {
        align-items: stretch;
        flex-direction: column;
    }

    .workshop-history-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .workshop-history-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workshop-history-participant {
        align-items: flex-start;
        flex-direction: column;
    }

    .workshop-history-participant-progress {
        text-align: left;
    }

    /* ---------- POPUPS / DIALOGS ---------- */
    .admin-dialog,
    .admin-dialog.analytics-dialog,
    .students-directory-dialog,
    .workshop-history-dialog {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
        margin: auto;
    }

    .admin-dialog-card,
    .admin-dialog.analytics-dialog .analytics-dialog-card,
    .workshop-history-dialog-card {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 14px);
        padding: 18px 14px;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    .admin-dialog-header {
        gap: 10px;
    }

    .dialog-close {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }

    .attendance-history-controls {
        grid-template-columns: 1fr;
    }

    .pricing-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .ledger-money-row,
    .ledger-attendance-row,
    .attendance-history-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .ledger-attendance-payment {
        justify-items: end;
    }

    /* ---------- PROTECCIÓN CONTRA DESBORDES ---------- */
    .admin-main *,
    .admin-dialog * {
        min-width: 0;
        box-sizing: border-box;
    }

    .admin-main p,
    .admin-main span,
    .admin-main strong,
    .admin-main small,
    .admin-dialog p,
    .admin-dialog span,
    .admin-dialog strong,
    .admin-dialog small {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 430px) {
    .admin-main {
        padding-left: 11px;
        padding-right: 11px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .analytics-summary-grid,
    .ledger-summary,
    .attendance-history-summary,
    .workshop-history-stats {
        grid-template-columns: 1fr 1fr;
    }

    .analytics-kpi > span,
    .ledger-summary span {
        letter-spacing: 1px;
    }
}

@media (max-width: 350px) {
    .stats-grid,
    .analytics-summary-grid,
    .ledger-summary,
    .attendance-history-summary,
    .workshop-history-stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   MOBILE HOTFIX v7.1
   - Scroll completo de la página
   - Corrige botón BUSCAR gigante en Alumnos
========================================== */
@media (max-width: 820px) {
    html,
    body {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .dashboard-view {
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    .admin-main {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-y: visible !important;
        padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    }

    /* En desktop este botón tiene flex-basis: 280px.
       En columna ese basis se transforma en altura; lo anulamos en móvil. */
    .students-search-actions .gold-button,
    #studentsSearchButton {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        margin-top: 0 !important;
    }
}

/* ==========================================================
   CLASE ACTIVA / SESIÓN EN VIVO - MÓVIL
   ========================================================== */

@media (max-width: 820px) {
    .class-session-console {
        margin: 0 0 12px;
        padding: 14px;
    }

    .class-session-heading {
        gap: 10px;
    }

    .class-session-heading h2 {
        font-size: 21px;
    }

    .class-session-live-badge {
        padding: 7px 9px;
        font-size: 8px;
    }

    .class-session-start-area,
    .class-session-active-area {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 14px;
    }

    .class-session-main-button {
        width: 100%;
        min-height: 48px;
    }

    .class-session-stat {
        min-height: 64px;
        padding: 12px 14px;
    }
}

/* ==========================================================
   CLASES SIMULTÁNEAS - MÓVIL v12
   ========================================================== */
@media (max-width: 820px) {
    .class-session-list {
        grid-template-columns: 1fr;
    }

    .class-session-card {
        padding: 12px;
    }

    .class-session-card-actions {
        grid-template-columns: 1fr 1fr;
    }

    .class-session-card-stats {
        gap: 12px;
        justify-content: space-between;
    }

    .class-session-start-area {
        display: grid;
        grid-template-columns: 1fr;
    }

    .class-session-start-area .class-session-main-button {
        width: 100%;
        max-width: none;
        flex-basis: auto;
    }
}

/* ==========================================================
   WORKSHOP · CLASE EN VIVO - MÓVIL v13
   ========================================================== */
@media (max-width: 820px) {
    .workshop-live-class-heading {
        gap: 10px;
    }

    .workshop-live-class-heading h2 {
        font-size: 21px;
    }

    .workshop-live-badge {
        padding: 7px 9px;
        font-size: 8px;
    }

    .workshop-live-class-stats {
        grid-template-columns: 1fr 1fr;
    }

    .workshop-live-class-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .workshop-live-class-actions .workshop-action-button {
        width: 100%;
    }
}

/* ==========================================================
   QR POR SESIÓN ACTIVA - MÓVIL v14
   ========================================================== */
@media (max-width: 820px) {
    .class-session-card-actions {
        grid-template-columns: 1fr 0.45fr 0.8fr;
    }

    .session-qr-card {
        width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
    }

    .session-qr-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .session-qr-visual {
        min-height: 250px;
        padding: 14px;
    }

    .session-qr-visual svg {
        width: min(100%, 280px);
    }

    .session-qr-actions {
        grid-template-columns: 1fr;
    }
}