/** * BeniFit — estilos móvil / tablet * Se activan con clases en : device-mobile | device-tablet | device-desktop */ /* ── Base móvil ───────────────────────────────────────────── */ html.device-mobile { -webkit-text-size-adjust: 100%; } html.device-mobile body { padding-bottom: env(safe-area-inset-bottom, 0); } html.device-mobile .container { padding-left: 12px; padding-right: 12px; } html.device-mobile .main-content { padding-top: 1rem; padding-bottom: 1.25rem; } /* ── Header colapsable (dashboard y similares) ───────────── */ .header-menu-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 1.35rem; cursor: pointer; flex-shrink: 0; } html.device-mobile .header-content { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; } html.device-mobile .header-brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } html.device-mobile .logo-header h1 { font-size: 1.35rem; } html.device-mobile .header-menu-toggle { display: inline-flex; } html.device-mobile .header-right { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 0 4px; border-top: 1px solid rgba(255, 255, 255, 0.15); } html.device-mobile .header.header-open .header-right { display: flex; } html.device-mobile .header-right .user-name { font-size: 0.9rem; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 2px; } html.device-mobile .header-right .btn, html.device-mobile .header-right .logout-link { width: 100%; justify-content: center; margin: 0 !important; } /* ── Módulos dashboard ─────────────────────────────────── */ html.device-mobile .module-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } html.device-mobile .module-card { padding: 12px 6px; min-height: 72px; } html.device-mobile .mc-label { font-size: 0.65rem; line-height: 1.2; } html.device-mobile .mc-icon { font-size: 1.35rem; } /* ── Panel profesional: tabs horizontales con scroll ───── */ html.device-mobile .tabs-professional { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; padding: 8px; } html.device-mobile .tabs-professional::-webkit-scrollbar { display: none; } html.device-mobile .tab-prof { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; font-size: 0.88rem; } html.device-mobile .section-header { flex-direction: column; align-items: flex-start; gap: 10px; } html.device-mobile .section-header .btn { width: 100%; } /* ── Modales a pantalla casi completa ──────────────────── */ html.device-mobile .modal-overlay.active .modal-content, html.device-mobile .modal:not(.hidden) .modal-content { width: calc(100vw - 24px) !important; max-width: none !important; max-height: calc(100dvh - 32px); overflow-y: auto; margin: 16px auto; } html.device-mobile .modal-plan-editor { padding: 0.5rem; } /* ── Login / welcome ───────────────────────────────────── */ html.device-mobile .welcome-container, html.device-mobile .login-container { padding: 28px 18px; border-radius: 16px; } html.device-mobile .welcome-container h1 { font-size: 1.75rem; } /* Tablet: header en una fila pero botones más compactos */ html.device-tablet .header-right { flex-wrap: wrap; justify-content: flex-end; gap: 8px; } html.device-tablet .header-right .btn-small { font-size: 0.78rem; padding: 6px 10px; } @media (max-width: 380px) { html.device-mobile .module-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }