/* ========================================
   MOBILE-FIRST RESPONSIVE SYSTEM
   CEMI Platform - Production
   ========================================
   
   ARCHITECTURE:
   - All styles encapsulated in @media (max-width: 768px)
   - Desktop version remains completely untouched
   - Z-index hierarchy for proper stacking
   - Touch-optimized interactions (44px minimum)
   - Simplified UI for mobile experience
   
   ======================================== */

/* ========================================
   DESKTOP DEFAULTS - Hidden mobile-only elements
   ======================================== */
.sidebar-close-btn {
  display: none;
}

/* ========================================
   MOBILE STYLES - 768px and below
   ======================================== */
@media (max-width: 768px) {
  
  /* ========================================
     CSS CUSTOM PROPERTIES - Z-INDEX HIERARCHY
     ======================================== */
  :root {
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-sidebar: 500;
    --z-header: 600;
    --z-overlay: 800;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-mega-menu: 1001;
    --z-toast: 1100;
    --z-tooltip: 1200;
    
    /* Touch target minimum */
    --touch-target-min: 44px;
    
    /* Safe area for notched devices */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  }
  
  /* ========================================
     BODY SCROLL LOCK
     Applied via JS when modals/sidebars open
     ======================================== */
  body.modal-open,
  body.sidebar-open,
  body.menu-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
    touch-action: none;
  }
  
  /* ========================================
     PREVENT HORIZONTAL OVERFLOW
     ======================================== */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  .dashboard-body,
  .classroom-container,
  .dashboard-main,
  .classroom-main,
  #mainContent {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Cuando el chat está activo, permitir scroll y altura completa */
  #mainContent:has(.user-chat-full-container),
  #mainContent:has(.admin-chat-container) {
    overflow: visible !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
  }
  
  /* ========================================
     TASK 1: BOTÓN "VOLVER" ESTILIZADO
     Rediseño del botón volver en mega-menu
     ======================================== */
  .mobile-back-btn {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .mobile-back-btn:hover,
  .mobile-back-btn:active {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
  }
  
  .mobile-back-btn .back-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 16px;
    transition: transform 0.2s ease;
  }
  
  .mobile-back-btn:hover .back-arrow {
    transform: translateX(-3px);
  }
  
  /* ========================================
     TASK 2: ACORDEÓN NAVEGACIÓN
     Paneles expandibles en mega-menu móvil
     ======================================== */
  
  /* Estilos para items de navegación con hijos */
  .mega-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .mega-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .mega-nav-item.active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }
  
  /* Panel secundario - acordeón */
  .mega-nav-secondary {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
  }
  
  .mega-nav-secondary.visible {
    max-height: 1000px;
    opacity: 1;
    padding: 8px 0;
  }
  
  /* Links dentro del acordeón */
  .mega-sub-link {
    display: flex;
    align-items: center;
    padding: 14px 20px 14px 40px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
  }
  
  .mega-sub-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-left-color: rgba(255, 255, 255, 0.5);
  }
  
  /* Panel terciario */
  .mega-nav-tertiary {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    background: rgba(0, 0, 0, 0.15);
  }
  
  .mega-nav-tertiary.visible {
    max-height: 500px;
    opacity: 1;
    padding: 8px 0;
  }
  
  .mega-tertiary-item {
    padding: 12px 20px 12px 56px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
  }
  
  .mega-tertiary-item a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .mega-tertiary-item a:hover {
    color: #ffffff;
  }
  
  /* ========================================
     TASK 3: BOTÓN X CERRAR MENÚ
     ======================================== */
  .mega-menu-close-mobile {
    display: flex !important;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
  }
  
  .mega-menu-close-mobile:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
  }
  
  .mega-menu-close-mobile svg,
  .mega-menu-close-mobile i {
    width: 24px;
    height: 24px;
  }
  
  /* Asegurar que el botón existente sea visible */
  #megaMenuClose {
    display: flex !important;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
  }
  
  #megaMenuClose:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  /* Ocultar texto "Cerrar" en móvil, solo mostrar X */
  #megaMenuClose > span:first-child {
    display: none !important;
  }
  
  #megaMenuClose .close-icon-circle {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #megaMenuClose .close-icon-circle svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #ffffff !important;
    stroke-width: 2 !important;
  }
  
  /* ========================================
     MEGA-MENU MOBILE OVERRIDES
     Asegurar comportamiento acordeón
     ======================================== */
  
  /* Mega menu container */
  .harvard-mega-menu {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .harvard-mega-menu.active {
    display: block !important;
  }
  
  /* Header del mega menu */
  .mega-menu-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    padding: 0 16px !important;
    background: #1e1e1e !important;
    z-index: 10 !important;
  }
  
  /* Logo más pequeño en móvil */
  .mega-menu-logo .mega-logo-long {
    height: 36px !important;
    max-width: 180px !important;
  }
  
  /* Contenido del mega menu */
  .mega-menu-content {
    padding-top: 70px !important;
    padding-bottom: 80px !important;
    height: auto !important;
    min-height: calc(100vh - 70px) !important;
  }
  
  /* Navegación primaria - asegurar display correcto */
  .mega-nav-primary {
    padding: 16px !important;
    width: 100% !important;
    min-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Items de navegación - tamaño móvil */
  .mega-nav-item {
    font-size: 22px !important;
    padding: 18px 16px !important;
    margin-top: 0 !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: rgba(255,255,255,0.9) !important;
    transition: all 0.2s ease !important;
  }
  
  .mega-nav-item:hover {
    background: rgba(255,255,255,0.05) !important;
  }
  
  .mega-nav-item.active {
    background: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
  }
  
  .mega-nav-item + .mega-nav-item {
    margin-top: 0 !important;
  }
  
  /* Agregar chevron indicador */
  .mega-nav-item::after {
    content: '>' !important;
    font-size: 20px !important;
    color: rgba(255,255,255,0.5) !important;
    transition: transform 0.3s ease !important;
  }
  
  .mega-nav-item.active::after {
    transform: rotate(90deg) !important;
  }
  
  /* Ocultar el texto interior y mostrar en display flex */
  .mega-nav-item .mega-nav-item-text {
    flex: 1 !important;
  }
  
  /* Paneles secundarios - comportamiento acordeón inline */
  .mega-nav-secondary-container {
    display: block !important;
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
    flex: none !important;
    background: transparent !important;
  }
  
  /* Los paneles secundarios aparecen como acordeón justo después del item */
  .mega-nav-secondary {
    display: none !important;
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-left: 3px solid rgba(255, 255, 255, 0.3) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                padding 0.3s ease !important;
  }
  
  .mega-nav-secondary.visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 1200px !important;
    padding: 8px 0 !important;
  }
  
  /* Títulos y descripciones en paneles secundarios */
  .mega-nav-secondary .mega-sub-title {
    display: none !important;
  }
  
  .mega-nav-secondary .mega-sub-description {
    display: none !important;
  }
  
  .mega-nav-secondary .mega-sub-links {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Sub-links estilo móvil */
  .mega-nav-secondary .mega-sub-link {
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.9) !important;
    text-decoration: none !important;
    border-left: 2px solid transparent !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  .mega-nav-secondary .mega-sub-link:hover {
    background: rgba(255,255,255,0.08) !important;
    border-left-color: rgba(255, 255, 255, 0.6) !important;
    padding-left: 20px !important;
  }
  
  .mega-nav-secondary .mega-sub-link + .mega-sub-link {
    margin-top: 0 !important;
    border-top: none !important;
  }
  
  /* Paneles terciarios inline */
  .mega-nav-tertiary-container {
    display: none !important;
  }
  
  /* Panel terciario - similar al secundario pero con más indentación */
  .mega-nav-tertiary {
    display: none !important;
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
    margin: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                padding 0.3s ease !important;
  }
  
  .mega-nav-tertiary.visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 900px !important;
    padding: 8px 0 !important;
  }
  
  .mega-nav-tertiary .mega-tertiary-item {
    padding: 0 !important;
  }
  
  .mega-nav-tertiary .mega-tertiary-link,
  .mega-nav-tertiary .mega-tertiary-action {
    display: block !important;
    padding: 9px 16px 9px 32px !important;
    color: rgba(255,255,255,0.8) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    border-left: 2px solid transparent !important;
    transition: all 0.2s ease !important;
  }
  
  .mega-nav-tertiary .mega-tertiary-link:hover,
  .mega-nav-tertiary .mega-tertiary-action:hover {
    background: rgba(255,255,255,0.06) !important;
    border-left-color: rgba(255, 255, 255, 0.5) !important;
    padding-left: 36px !important;
  }
  
  /* Ocultar items Nosotros, Soporte y Recursos en móvil */
  .mega-nav-item[data-panel="panel-nosotros"],
  .mega-nav-item[data-panel="panel-soporte"],
  .mega-nav-item[data-panel="panel-recursos"] {
    display: none !important;
  }
  
  /* Ocultar chevrones inline del HTML en sub-links */
  .mega-sub-link.has-children .chevron {
    display: none !important;
  }
  
  /* Para links directos en móvil, no mostrar chevron CSS tampoco */
  .mega-sub-link.mobile-direct-link::after {
    display: none !important;
  }
  
  /* Sub-link con children debe mostrar chevron */
  .mega-sub-link.has-children {
    position: relative !important;
  }
  
  .mega-sub-link.has-children::after {
    content: '>' !important;
    position: absolute !important;
    right: 20px !important;
    font-size: 16px !important;
    color: rgba(255,255,255,0.5) !important;
    transition: transform 0.3s ease !important;
  }
  
  .mega-sub-link.has-children.active::after {
    transform: rotate(90deg) !important;
  }
  
  /* Footer del mega menu */
  .mega-menu-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px 16px !important;
    background: #1e1e1e !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }
  
  .mega-footer-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  .mega-footer-label {
    font-size: 12px !important;
    color: rgba(255,255,255,0.6) !important;
  }
  
  .mega-footer-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }
  
  .mega-footer-link {
    font-size: 11px !important;
    white-space: nowrap !important;
    color: rgba(255,255,255,0.8) !important;
  }

  /* ========================================
     TASK 4: LOGIN UNIFICADO
     Estilo consistente con classroom-login
     ======================================== */
  
  /* Login Dashboard y Admin */
  .login-wrapper {
    min-width: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100vh !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    box-shadow: none !important;
  }
  
  /* OCULTAR BANNERS DE BIENVENIDA EN LOGIN MÓVIL */
  .login-side-panel,
  .login-side-panel::before,
  .login-side-panel::after,
  .side-panel-icon,
  .side-panel-content,
  .login-features,
  .login-left-panel {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Links centrados en login */
  .login-actions,
  .login-links,
  .login-footer-links {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .login-actions a,
  .login-links a,
  .login-footer-links a {
    text-align: center !important;
  }
  
  .login-box {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    padding: 32px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
  
  .login-header {
    text-align: center !important;
    margin-bottom: 24px !important;
  }
  
  .login-logo {
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto 12px !important;
  }
  
  .login-logo i,
  .login-logo svg {
    width: 65% !important;
    height: 65% !important;
  }
  
  .login-header h1 {
    font-size: 1.5rem !important;
  }
  
  .form-group {
    margin-bottom: 16px !important;
  }
  
  .form-group input {
    font-size: 16px !important; /* Evita zoom en iOS */
    padding: 14px 16px !important;
  }
  
  .login-submit {
    padding: 14px !important;
    font-size: 15px !important;
  }
  
  /* Classroom Login - ya está bien, solo ajustes menores */
  .classroom-login-container {
    flex-direction: column !important;
  }
  
  .login-left-panel {
    display: none !important;
  }
  
  .login-right-panel {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 24px 20px !important;
  }
  
  .login-form-container {
    max-width: 100% !important;
  }
  
  .welcome-header .login-logo {
    width: 80px !important;
    height: 80px !important;
  }
  
  /* ========================================
     TASK 6: CARDS Y PANELES COMPACTOS
     ======================================== */
  
  /* Stats Grid - columna única */
  .stats-grid,
  .pagos-stats-grid,
  .alumno-pagos-stats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  
  .stat-card,
  .stat-pago-card {
    padding: 14px 16px !important;
    border-radius: 10px !important;
  }
  
  .stat-card h3,
  .stat-pago-card h3 {
    font-size: 1.4rem !important;
  }
  
  .stat-card p,
  .stat-pago-card p {
    font-size: 0.8rem !important;
  }
  
  .stat-card .stat-icon,
  .stat-pago-card .stat-icon {
    width: 36px !important;
    height: 36px !important;
  }
  
  .stat-card .stat-icon i,
  .stat-pago-card .stat-icon i {
    width: 18px !important;
    height: 18px !important;
  }
  
  /* Section Headers compactos */
  .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 0 !important;
  }
  
  .section-header h2 {
    font-size: 1.25rem !important;
  }
  
  .section-header .actions,
  .section-header .btn-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .section-header .actions button,
  .section-header .btn-group button {
    width: 100% !important;
  }
  
  /* Cards de usuarios compactas */
  .alumno-card,
  .profesor-card,
  .user-card,
  .curso-card {
    padding: 14px !important;
    border-radius: 10px !important;
  }
  
  .alumno-card .card-header,
  .profesor-card .card-header {
    gap: 10px !important;
  }
  
  .alumno-card .avatar,
  .profesor-card .avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 14px !important;
  }
  
  .alumno-card .card-actions,
  .profesor-card .card-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
  }
  
  .alumno-card .card-actions button,
  .profesor-card .card-actions button {
    flex: 1 !important;
    min-width: 70px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  
  /* Tablas responsivas */
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -16px !important;
    padding: 0 16px !important;
  }
  
  table {
    font-size: 12px !important;
  }
  
  table th,
  table td {
    padding: 10px 8px !important;
    white-space: nowrap !important;
  }
  
  /* Main content padding reducido */
  #mainContent {
    padding: 12px !important;
  }
  
  .dashboard-main {
    margin-left: 0 !important;
    padding: 12px !important;
  }
  
  /* ========================================
     TASK 7: SIDEBAR BEHAVIOR FIX
     ======================================== */
  
  /* Sidebar overlay */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  
  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  /* Sidebar móvil */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: var(--z-sidebar) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Sidebar visible cuando tiene clase 'open' o cuando NO tiene 'collapsed' Y el toggle fue clickeado */
  .sidebar.open {
    transform: translateX(0) !important;
  }
  
  /* Dashboard main cuando sidebar está abierto */
  .dashboard-main.sidebar-open {
    pointer-events: none;
  }
  
  /* Toggle button */
  .mobile-menu-toggle,
  .sidebar-toggle {
    display: flex !important;
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 9999 !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }
  
  /* ========================================
     TASK 8: CHAT SOPORTE LAYOUT
     ======================================== */
  .admin-chat-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    z-index: var(--z-modal) !important;
  }
  
  .chat-conversations-panel {
    width: 100% !important;
    height: 100% !important;
    border-right: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .chat-conversations-panel.hidden {
    display: none !important;
  }
  
  .chat-main-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    background: #fff !important;
  }
  
  .chat-main-panel.active {
    transform: translateX(0) !important;
  }
  
  .chat-panel-header {
    padding: 16px !important;
  }
  
  .chat-panel-header h3 {
    font-size: 18px !important;
  }
  
  .chat-messages-container {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px !important;
  }
  
  .chat-input-container {
    padding: 12px !important;
    padding-bottom: calc(12px + var(--safe-area-bottom)) !important;
    border-top: 1px solid #e5e7eb !important;
  }
  
  .chat-input-container input,
  .chat-input-container textarea {
    font-size: 16px !important;
  }
  
  /* Back button for chat */
  .chat-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    margin-bottom: 12px !important;
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
  }
  
  .chat-conversation-item {
    padding: 14px 16px !important;
  }
  
  /* ========================================
     PANEL LATERAL (CURSO/ALUMNO/PROFESOR)
     Fix botón X y layout fullscreen
     ======================================== */
  
  /* Panel overlay */
  .curso-panel-overlay,
  .alumno-panel-overlay,
  .profesor-panel-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 1000 !important;
  }
  
  /* Panel fullscreen en móvil */
  .curso-panel,
  .alumno-panel,
  .profesor-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    transform: none !important;
    z-index: 1001 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .curso-panel.active,
  .alumno-panel.active,
  .profesor-panel.active {
    transform: none !important;
  }
  
  /* Header del panel */
  .curso-panel-header,
  .alumno-panel-header,
  .profesor-panel-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
  }
  
  .curso-panel-header h2,
  .alumno-panel-header h2,
  .profesor-panel-header h2 {
    font-size: 1.2rem !important;
    margin: 0 !important;
    padding-right: 50px !important;
  }
  
  /* BOTÓN X - Fix crítico para que sea clickeable */
  .close-panel {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.3) !important;
  }
  
  .close-panel:hover,
  .close-panel:active {
    background: rgba(255,255,255,0.35) !important;
    transform: scale(1.05) !important;
  }
  
  /* Contenido del panel */
  .curso-panel-content,
  .alumno-panel-content,
  .profesor-panel-content {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px !important;
  }
  
  /* Acciones del panel */
  .panel-actions {
    position: sticky !important;
    bottom: 0 !important;
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  
  .panel-actions .panel-btn {
    flex: 1 !important;
    padding: 12px 8px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  
  /* Stats grid en panel */
  .curso-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  
  .curso-stats-grid .stat-item {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  
  /* ========================================
     CHAT SOPORTE REORGANIZADO
     Vista de lista -> Vista de chat con botón volver
     ======================================== */
  
  /* Container principal del chat admin */
  .admin-chat-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
  }
  
  /* Panel de conversaciones - Vista principal */
  .chat-conversations-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    z-index: 1 !important;
    transition: transform 0.3s ease !important;
  }
  
  /* Cuando hay chat activo, ocultar lista */
  .chat-conversations-panel.chat-active {
    transform: translateX(-100%) !important;
  }
  
  /* Header de conversaciones */
  .chat-panel-header {
    padding: 16px !important;
    flex-shrink: 0 !important;
  }
  
  .chat-panel-header h3 {
    font-size: 18px !important;
    margin: 0 !important;
  }
  
  /* Lista de conversaciones scrolleable - sin espacios ni divisores */
  .chat-conversations-list {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    background: #ffffff !important;
  }
  
  /* Item de conversación - sin divisores ni bordes */
  .chat-conversation-item {
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    background: #ffffff !important;
  }
  
  .chat-conversation-item:active {
    background: #f3f4f6 !important;
  }
  
  /* Panel principal del chat - fullscreen sobre lista */
  .chat-main-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #fff !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
  }
  
  .chat-main-panel.active {
    transform: translateX(0) !important;
  }
  
  /* Header del chat activo con botón volver */
  .chat-active-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background: #1e1e1e !important;
    color: #fff !important;
    flex-shrink: 0 !important;
  }
  
  /* Botón volver en chat - SOLO VISIBLE EN MÓVIL */
  .chat-back-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  
  .chat-back-btn:active {
    background: rgba(255,255,255,0.3) !important;
  }
  
  /* Mejorar header de conversaciones en móvil */
  .chat-panel-header {
    background: #4a5259 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    color: white !important;
  }
  
  .chat-panel-header h3 {
    font-size: 18px !important;
    font-weight: 500 !important;
  }
  
  /* Botón volver a bandeja en header del chat */
  .chat-return-to-list-btn {
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  
  .chat-return-to-list-btn:active {
    background: rgba(255,255,255,0.3) !important;
  }
  
  /* Mostrar/ocultar elementos según dispositivo */
  .show-mobile-only {
    display: flex !important;
  }
  
  .hide-mobile-text {
    display: none !important;
  }
  
  /* Info del usuario en header del chat */
  .chat-user-info {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .chat-user-info h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 0 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .chat-user-info span {
    font-size: 12px !important;
    opacity: 0.9 !important;
  }
  
  /* Área de mensajes */
  .chat-messages-area {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 16px !important;
    background: #f9fafb !important;
  }
  
  /* Mensajes */
  .admin-chat-message {
    max-width: 80% !important;
    margin-bottom: 12px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
  }
  
  .admin-chat-message.sent {
    margin-left: auto !important;
    background: #1e1e1e !important;
    color: #fff !important;
    border-bottom-right-radius: 4px !important;
  }
  
  .admin-chat-message.received {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-bottom-left-radius: 4px !important;
  }
  
  /* Input de mensaje */
  .chat-messages-input {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    flex-shrink: 0 !important;
  }
  
  .chat-input-wrapper-admin {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    background: #f3f4f6 !important;
    border-radius: 24px !important;
    padding: 8px 16px !important;
  }
  
  .chat-input-wrapper-admin input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    font-size: 16px !important;
    outline: none !important;
  }
  
  .chat-send-btn-admin {
    width: 44px !important;
    height: 44px !important;
    background: #1e1e1e !important;
    border: none !important;
    border-radius: 50% !important;
    color: white !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  
  .chat-send-btn-admin:active {
    background: #2d2d2d !important;
  }
  
  /* ========================================
     TASK 9: CLASSROOM - FIX DOBLE HAMBURGUESA
     ======================================== */
  
  /* Ocultar el segundo botón hamburguesa */
  .classroom-container .mobile-sidebar-toggle {
    display: none !important;
  }
  
  /* Solo mostrar el del header */
  .classroom-header #menuToggle {
    display: flex !important;
  }
  
  /* Sidebar classroom */
  .classroom-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 9998 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    padding-top: 0 !important;
    background: #ffffff !important;
  }
  
  .classroom-sidebar.show {
    transform: translateX(0) !important;
  }
  
  .sidebar-overlay-classroom {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9997 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }
  
  .sidebar-overlay-classroom.active {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Ocultar banner animado en mobile */
  .welcome-section,
  .welcome-video,
  .welcome-banner,
  .video-container {
    display: none !important;
  }
  
  /* Botón cerrar sidebar - visible solo en móvil */
  .sidebar-close-btn {
    display: flex !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    background: #f1f1f1 !important;
    border: none !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: background 0.2s ease !important;
  }
  
  .sidebar-close-btn:hover,
  .sidebar-close-btn:active {
    background: #e0e0e0 !important;
  }
  
  .sidebar-close-btn i,
  .sidebar-close-btn svg {
    width: 20px !important;
    height: 20px !important;
    color: #333 !important;
  }
  
  /* Ajustar padding del sidebar para el botón de cierre */
  .classroom-sidebar .sidebar-nav {
    padding-top: 60px !important;
  }
  
  /* Research banner responsive */
  .research-banner {
    flex-direction: column !important;
    padding: 16px !important;
    gap: 12px !important;
    margin: 12px !important;
    border-radius: 12px !important;
  }
  
  .research-banner-content {
    text-align: center !important;
  }
  
  .research-banner-content h3 {
    font-size: 15px !important;
  }
  
  .research-banner-content p {
    font-size: 13px !important;
    display: none !important;
  }
  
  .research-banner-icon {
    display: none !important;
  }
  
  .research-banner-action {
    width: 100% !important;
  }
  
  .btn-research {
    width: 100% !important;
    text-align: center !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  
  /* Classroom main */
  .classroom-main {
    margin-left: 0 !important;
    padding: 12px !important;
    padding-top: 70px !important;
  }
  
  /* Classroom header */
  .classroom-header {
    padding: 10px 16px !important;
  }
  
  .classroom-header .header-content {
    gap: 10px !important;
  }
  
  .classroom-header .logo-section h1 {
    font-size: 14px !important;
  }
  
  .classroom-header .logo-icon {
    width: 24px !important;
    height: 24px !important;
  }
  
  /* Ocultar selector de curso en móvil */
  #courseSelectorContainer {
    display: none !important;
  }
  
  /* ========================================
     TASK 10: COMUNIDAD LAYOUT
     ======================================== */
  .community-header {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  
  .community-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .community-actions button {
    width: 100% !important;
    padding: 12px 16px !important;
  }
  
  .question-card {
    padding: 14px !important;
    margin-bottom: 10px !important;
  }
  
  .question-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  
  .question-meta {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  .question-stats {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
  }
  
  /* ========================================
     TASK 11: SIMPLIFICACIÓN MOBILE
     Ocultar elementos no esenciales
     ======================================== */
  
  /* Ocultar acciones secundarias en dashboards */
  .hide-mobile,
  .desktop-only {
    display: none !important;
  }
  
  /* Ocultar botones de edición masiva */
  .bulk-actions,
  .export-btn,
  .import-btn {
    display: none !important;
  }
  
  /* Simplificar headers de sección */
  .section-actions .btn-secondary {
    display: none !important;
  }
  
  /* MOSTRAR TODOS los botones de cards - incluyendo view/ojo */
  .card-actions .btn-edit,
  .card-actions .btn-delete,
  .card-actions .btn-view,
  .card-actions .btn-primary,
  .btn-icon-success,
  .btn-icon-primary,
  .btn-icon-edit,
  .btn-icon-danger {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }
  
  .btn-icon-success i,
  .btn-icon-primary i,
  .btn-icon-edit i,
  .btn-icon-danger i {
    width: 16px !important;
    height: 16px !important;
  }
  
  /* Classroom - simplificar menú profesor/admin en móvil */
  #profesorMenu,
  #adminMenu {
    display: none !important;
  }
  
  /* Mensaje indicando funciones limitadas */
  .mobile-notice {
    display: block !important;
    padding: 12px 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    color: #856404;
    font-size: 13px;
    margin-bottom: 16px;
    text-align: center;
  }
  
  /* ========================================
     DASHBOARD MOBILE OPTIMIZATION
     Optimización completa de todas las secciones
     ======================================== */
  
  /* ----- DASHBOARD HEADER COMPACTO ----- */
  .dashboard-header {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    text-align: center !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    margin: -12px -12px 16px !important;
    border-radius: 0 !important;
    border-bottom: 2px solid #dee2e6 !important;
  }
  
  .dashboard-header h1 {
    font-size: 1.1rem !important;
    margin: 0 !important;
    order: 1 !important;
    color: #2c3e50 !important;
  }
  
  .dashboard-header .user-info {
    font-size: 12px !important;
    padding: 6px 14px !important;
    background: rgba(44, 62, 80, 0.08) !important;
    border-radius: 20px !important;
    order: 2 !important;
    gap: 6px !important;
    color: #495057 !important;
  }
  
  .dashboard-header .user-info i {
    width: 14px !important;
    height: 14px !important;
    color: #495057 !important;
  }
  
  .dashboard-header .user-info span {
    color: #495057 !important;
  }
  
  /* Ocultar items Investigación y Status del Sistema en móvil */
  #btnInvestigacion,
  #btnStatus {
    display: none !important;
  }
  
  /* ----- SECCIÓN CURSOS OPTIMIZADA ----- */
  .cursos-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  
  .cursos-header > div:first-child {
    text-align: center !important;
  }
  
  .cursos-header h2 {
    font-size: 1.2rem !important;
    margin: 0 0 4px !important;
  }
  
  .cursos-header p {
    font-size: 12px !important;
    margin: 0 !important;
  }
  
  /* Ocultar barra de búsqueda en móvil */
  .cursos-header > div[style*="position: relative"][style*="flex: 1"],
  .cursos-header input[type="text"],
  #cursosSearch {
    display: none !important;
  }
  
  /* Botón Nuevo Curso compacto */
  .cursos-header .btn-primary,
  .cursos-header button[onclick*="Nuevo"] {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    justify-content: center !important;
  }
  
  /* Grid de cursos - una columna */
  .cursos-grid,
  #cursosGrid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  /* Cards de cursos compactas */
  .curso-card-new {
    padding: 16px !important;
    border-radius: 12px !important;
  }
  
  .curso-card-new > div[style*="display: flex"][style*="gap: 16px"] {
    gap: 12px !important;
  }
  
  .curso-card-new div[style*="width: 56px"] {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }
  
  .curso-card-new div[style*="width: 56px"] i {
    width: 22px !important;
    height: 22px !important;
  }
  
  .curso-card-new h3 {
    font-size: 15px !important;
    padding-right: 50px !important;
  }
  
  /* Nivel badge más pequeño */
  .curso-card-new > div[style*="position: absolute"][style*="top: 12px"] {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  
  /* Acciones de curso - mostrar todos los botones */
  .curso-card-new div[style*="display: flex"][style*="justify-content: flex-end"] {
    justify-content: center !important;
    gap: 10px !important;
  }
  
  /* ----- SECCIÓN ALUMNOS OPTIMIZADA ----- */
  .alumnos-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  
  .alumnos-header > div:first-child {
    text-align: center !important;
  }
  
  .alumnos-header h2 {
    font-size: 1.2rem !important;
  }
  
  /* Ocultar búsqueda y filtros en móvil */
  .alumnos-search-filter {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .alumnos-search-filter > div[style*="position: relative"],
  .alumnos-search-filter input,
  #alumnosSearch {
    display: none !important;
  }
  
  /* Solo mostrar botón principal */
  .alumnos-search-filter .btn-secondary,
  .alumnos-header .btn-secondary {
    display: none !important;
  }
  
  .alumnos-header .btn-primary {
    width: 100% !important;
    justify-content: center !important;
  }
  
  /* Grid de alumnos */
  .alumnos-grid,
  #alumnosGrid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  /* Cards de alumnos compactas */
  .alumno-card-premium,
  .alumno-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }
  
  .alumno-card-premium .alumno-avatar,
  .alumno-card .alumno-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 14px !important;
  }
  
  .alumno-card-premium .alumno-info h3,
  .alumno-card .alumno-info h3 {
    font-size: 14px !important;
  }
  
  .alumno-card-premium .alumno-info p,
  .alumno-card .alumno-info p {
    font-size: 11px !important;
  }
  
  /* Acciones de alumno simplificadas */
  .alumno-card-premium .alumno-actions,
  .alumno-card .alumno-actions {
    gap: 6px !important;
  }
  
  .alumno-card-premium .alumno-actions button,
  .alumno-card .alumno-actions button {
    padding: 8px !important;
    min-width: 36px !important;
  }
  
  .alumno-card-premium .alumno-actions button span,
  .alumno-card .alumno-actions button span,
  .alumno-card-premium .alumno-actions button:not(:first-child),
  .alumno-card .alumno-actions button:not(:first-child):not(:nth-child(2)) {
    display: none !important;
  }
  
  /* ----- SECCIÓN PROFESORES OPTIMIZADA ----- */
  .profesores-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  
  .profesores-header h2 {
    font-size: 1.2rem !important;
    text-align: center !important;
  }
  
  .profesores-search-filter {
    display: none !important;
  }
  
  .profesores-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .profesor-card-new,
  .profesor-card {
    padding: 14px !important;
  }
  
  /* ----- SECCIÓN PAGOS OPTIMIZADA ----- */
  .pagos-section-header {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
  
  .pagos-section-header h2 {
    font-size: 1.2rem !important;
  }
  
  .pagos-filters {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .pagos-filters select,
  .pagos-filters input {
    width: 100% !important;
    font-size: 14px !important;
  }
  
  .pagos-filters .btn-secondary {
    display: none !important;
  }
  
  /* Stats de pagos compactos */
  .pagos-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  
  .stat-pago-card {
    padding: 12px !important;
  }
  
  .stat-pago-card h3 {
    font-size: 1.1rem !important;
  }
  
  .stat-pago-card p {
    font-size: 10px !important;
  }
  
  /* ----- SECCIÓN AULAS OPTIMIZADA ----- */
  .aulas-header {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
  
  .aulas-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .aula-card {
    padding: 14px !important;
  }
  
  /* ----- SECCIÓN IDIOMAS OPTIMIZADA ----- */
  .idiomas-header {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
  
  .idiomas-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  /* ----- SECCIÓN ADMINISTRADORES OPTIMIZADA ----- */
  .admins-header {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
  
  .admins-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  /* ----- STATUS SECTION OPTIMIZADA ----- */
  .status-admin-container {
    padding: 0 !important;
  }
  
  .status-hero {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px !important;
    gap: 16px !important;
  }
  
  .status-hero-info h2 {
    font-size: 1.2rem !important;
    justify-content: center !important;
  }
  
  .status-hero-actions {
    width: 100% !important;
    flex-direction: column !important;
  }
  
  .status-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  
  .status-services-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  /* ----- INVESTIGACIÓN OPTIMIZADA ----- */
  .investigacion-header {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
  
  .investigacion-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* ----- MODALES OPTIMIZADOS ----- */
  .modal-content,
  .swal2-popup {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 10px !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }
  
  .modal-header {
    padding: 12px 16px !important;
  }
  
  .modal-header h2 {
    font-size: 1.1rem !important;
  }
  
  .modal-body {
    padding: 16px !important;
  }
  
  .form-group {
    margin-bottom: 12px !important;
  }
  
  .form-group label {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px !important;
    font-size: 16px !important; /* Evita zoom iOS */
    border-radius: 8px !important;
  }
  
  .modal-footer {
    padding: 12px 16px !important;
    gap: 8px !important;
    flex-direction: column-reverse !important;
  }
  
  .modal-footer button {
    width: 100% !important;
    padding: 12px !important;
  }
  
  /* ----- BOTONES GLOBALES MÓVIL ----- */
  .btn-primary,
  .btn-secondary {
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }
  
  .btn-icon-primary,
  .btn-icon-edit,
  .btn-icon-danger,
  .btn-icon-success {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
  }
  
  .btn-icon-primary i,
  .btn-icon-edit i,
  .btn-icon-danger i,
  .btn-icon-success i {
    width: 16px !important;
    height: 16px !important;
  }
  
  /* ----- PANEL LATERAL DE DETALLES ----- */
  .detail-panel,
  .slide-panel,
  .curso-detail-panel {
    width: 100% !important;
    max-width: 100% !important;
    right: 0 !important;
    border-radius: 0 !important;
  }
  
  .panel-header {
    padding: 16px !important;
  }
  
  .panel-body {
    padding: 16px !important;
  }
  
  /* ----- TABS OPTIMIZADOS ----- */
  .tabs-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .tab-btn {
    padding: 10px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* ========================================
     UTILITY CLASSES
     ======================================== */
  .show-mobile {
    display: block !important;
  }
  
  .flex-mobile {
    display: flex !important;
  }
  
  .text-center-mobile {
    text-align: center !important;
  }
  
  .full-width-mobile {
    width: 100% !important;
  }
  
  /* ========================================
     USER CHAT (PROFESOR/ALUMNO) - RESPONSIVE
     ======================================== */
  
  /* Container principal del chat */
  .user-chat-full-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Panel de conversaciones */
  .user-chat-conversations-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    z-index: 1 !important;
    transition: transform 0.3s ease !important;
    overflow: hidden !important;
  }
  
  .user-chat-conversations-panel.chat-active {
    transform: translateX(-100%) !important;
  }
  
  /* Header de conversaciones */
  .user-chat-conversations-header {
    padding: 12px 16px !important;
    background: #4a5259 !important;
    color: white !important;
    flex-shrink: 0 !important;
    min-height: 50px !important;
  }
  
  .user-chat-conversations-header h3 {
    font-size: 16px !important;
    margin: 0 !important;
  }
  
  /* Lista de conversaciones */
  .user-chat-conversations-list {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    background: #ffffff !important;
  }
  
  /* Items de conversación */
  .user-chat-conversation-item {
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    background: #ffffff !important;
  }
  
  .user-chat-conversation-item:active {
    background: #f3f4f6 !important;
  }
  
  /* Panel de mensajes */
  .user-chat-messages-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #fff !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  .user-chat-messages-panel.active {
    transform: translateX(0) !important;
  }
  
  /* Header del chat activo */
  .user-chat-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background: #1e1e1e !important;
    color: #fff !important;
    flex-shrink: 0 !important;
    min-height: 50px !important;
  }
  
  /* Área de mensajes */
  .user-chat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 12px !important;
    background: #f9fafb !important;
    min-height: 0 !important;
  }
  
  /* Input area fija en la parte inferior */
  .user-chat-input-area {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    padding-right: 14px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    flex-shrink: 0 !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  
  /* Mensajes */
  .user-chat-message {
    max-width: 80% !important;
    margin-bottom: 12px !important;
  }
  
  .user-chat-message.sent .user-chat-message-bubble {
    background: #1e1e1e !important;
    color: #fff !important;
  }
  
  /* Input de mensaje - consolidado */
  .user-chat-input {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 14px !important;
    font-size: 16px !important;
    border-radius: 20px !important;
  }
  
  .user-chat-send-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    background: #1e1e1e !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
  }
  
  .user-chat-send-btn:active {
    background: #2d2d2d !important;
  }
  
  /* Botón adjuntar archivo */
  .user-chat-attach-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-shrink: 0 !important;
  }
  
  /* Botón volver en user chat - visible solo en móvil */
  .user-chat-header .chat-back-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  
  .user-chat-header .chat-back-btn:active {
    background: rgba(255,255,255,0.3) !important;
  }
  
  /* ========================================
     HELP WIDGET - VISIBLE EN MÓVIL
     ======================================== */
  .cemi-help-widget {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 99999 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #656f77 0%, #4a5259 100%) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
    pointer-events: auto !important;
  }
  
  .cemi-help-widget i,
  .cemi-help-widget svg {
    color: #fff !important;
    width: 24px !important;
    height: 24px !important;
  }
  
  /* ========================================
     COMUNIDAD CEMI - MOBILE FIRST LAYOUT
     ======================================== */
  
  /* Hero Section */
  .community-hero {
    min-height: 60vh !important;
    padding: 60px 20px !important;
  }
  
  .community-hero-content {
    padding: 0 16px !important;
  }
  
  .community-hero h1 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }
  
  .community-hero p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  
  .community-hero-badge {
    font-size: 0.75rem !important;
    padding: 6px 16px !important;
    margin-bottom: 20px !important;
  }
  
  /* Quote Section */
  .community-quote {
    padding: 50px 20px !important;
  }
  
  .community-quote blockquote {
    font-size: 1.2rem !important;
    line-height: 1.5 !important;
  }
  
  .community-quote blockquote::before {
    font-size: 3rem !important;
    top: -15px !important;
  }
  
  /* Values Section */
  .community-values {
    padding: 50px 16px !important;
  }
  
  .community-values-header {
    margin-bottom: 32px !important;
  }
  
  .community-values-header h2 {
    font-size: 1.6rem !important;
  }
  
  .community-values-header p {
    font-size: 1rem !important;
  }
  
  .values-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 0 4px !important;
  }
  
  .value-card {
    padding: 28px 20px !important;
    border-radius: 12px !important;
  }
  
  .value-card:hover {
    transform: none !important;
  }
  
  .value-icon {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 20px !important;
    border-radius: 14px !important;
  }
  
  .value-icon i {
    width: 28px !important;
    height: 28px !important;
  }
  
  .value-card h3 {
    font-size: 1.2rem !important;
  }
  
  .value-card p {
    font-size: 0.95rem !important;
  }
  
  /* Gallery Section */
  .community-gallery {
    padding: 50px 16px !important;
  }
  
  .gallery-header {
    margin-bottom: 32px !important;
  }
  
  .gallery-header h2 {
    font-size: 1.6rem !important;
  }
  
  .gallery-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .gallery-item {
    border-radius: 12px !important;
    aspect-ratio: 16/10 !important;
  }
  
  .gallery-overlay {
    padding: 20px !important;
  }
  
  .gallery-overlay h3 {
    font-size: 1.1rem !important;
  }
  
  .gallery-overlay p {
    font-size: 0.85rem !important;
  }
  
  /* Activities Section */
  .community-activities {
    padding: 50px 16px !important;
  }
  
  .activities-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  
  .activities-content {
    order: 1 !important;
  }
  
  .activities-image {
    order: 2 !important;
    border-radius: 12px !important;
  }
  
  .activities-content h2 {
    font-size: 1.6rem !important;
    margin-bottom: 16px !important;
  }
  
  .activities-content p {
    font-size: 1rem !important;
    margin-bottom: 24px !important;
  }
  
  .activity-list li {
    font-size: 0.95rem !important;
    padding: 12px 0 !important;
    gap: 12px !important;
  }
  
  .activity-list i {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  
  .activities-image img {
    height: 280px !important;
    border-radius: 12px !important;
  }
  
  /* Testimonials Section */
  .community-testimonials {
    padding: 50px 16px !important;
  }
  
  .testimonials-header {
    margin-bottom: 32px !important;
  }
  
  .testimonials-header h2 {
    font-size: 1.6rem !important;
  }
  
  .testimonials-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .testimonial-card {
    padding: 28px 20px !important;
    border-radius: 12px !important;
  }
  
  .testimonial-card:hover {
    transform: none !important;
  }
  
  .testimonial-text {
    font-size: 0.95rem !important;
    margin-bottom: 20px !important;
  }
  
  .author-avatar {
    width: 42px !important;
    height: 42px !important;
    font-size: 1rem !important;
  }
  
  .author-info h4 {
    font-size: 0.9rem !important;
  }
  
  .author-info p {
    font-size: 0.8rem !important;
  }
  
  /* CTA Section */
  .community-cta {
    padding: 60px 20px !important;
  }
  
  .community-cta h2 {
    font-size: 1.6rem !important;
    margin-bottom: 12px !important;
  }
  
  .community-cta p {
    font-size: 1rem !important;
    margin-bottom: 28px !important;
  }
  
  .community-cta-btn {
    padding: 14px 32px !important;
    font-size: 1rem !important;
    width: 100% !important;
    max-width: 280px !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }
  
  /* Scroll reveal - desactivar animaciones móvil para mejor rendimiento */
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  /* ========================================
     ANIMATIONS - REDUCED MOTION
     ======================================== */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  
}

/* ========================================
   END OF MOBILE STYLES
   ======================================== */