/* ═══════════════════════════════════════════ MOBILE GLOBAL STYLES Scoped under .mobile-shell to prevent any desktop impact ═══════════════════════════════════════════ */ /* Base font size to prevent mobile browser zoom on input focus */ .mobile-shell input, .mobile-shell textarea, .mobile-shell select, .mobile-shell .mud-input-root input { font-size: 16px !important; } /* Touch targets: minimum 48px */ .mobile-shell button, .mobile-shell a, .mobile-shell .mud-button-root, .mobile-shell .mud-icon-button-root { min-height: 44px; min-width: 44px; } /* Full-screen dialogs on mobile */ .mobile-shell .mud-dialog-container .mud-dialog:not(.mfe) { max-width: 100vw !important; max-height: 100dvh !important; width: 100vw !important; margin: 0 !important; border-radius: 0 !important; } /* (la altura del contenido la gobierna la media query global de abajo) */ /* MudBlazor renders dialogs in a portal outside .mobile-shell, so we also need a global media query for fullscreen dialogs */ /* Layout movil: dialogos a pantalla completa. Se excluye .mfe (selector de version movil), que trae su propio layout de pantalla completa sin titulo ni acciones: el tratamiento generico le recortaba el alto y encimaba el contenido. El criterio lo decide index.html (deviceLayout.isMobileLayout) y lo publica en : tactil (telefono/tablet, cualquier orientacion) o ventana angosta, con ?mobile=1|0 como override. El CSS y el layout de Blazor leen la MISMA senal, asi no pueden divergir. */ :where(html[data-touch-layout="1"]) .mud-dialog-container .mud-dialog:not(.mfe) { max-width: 100vw !important; max-height: 100dvh !important; width: 100vw !important; /* Los modales de escritorio fijan min-width (820–900px en los BPM de Mis Tareas, 800px inline en el genérico). Sin neutralizarlo aquí el diálogo mide 900px en un teléfono de 390: se corta el header y el cuerpo scrollea en horizontal. */ min-width: 0 !important; height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; position: fixed !important; top: 0 !important; left: 0 !important; } /* ── Date/Time picker (PickerVariant.Dialog) en móvil: centrarlo ── Según el DOM de MudBlazor el picker puede salir como un .mud-dialog (dentro de .mud-dialog-container) o como su propio .mud-picker-container. En móvil quedaba pegado arriba / estirado. Cubrimos ambos casos y lo forzamos al centro del viewport (el shell móvil no tiene transform, así que position:fixed sí ancla al viewport). */ /* Caso A: el picker es un .mud-dialog */ :where(html[data-touch-layout="1"]) .mud-dialog-container .mud-dialog:has(.mud-day), :where(html[data-touch-layout="1"]) .mud-dialog-container .mud-dialog:has(.mud-picker), :where(html[data-touch-layout="1"]) .mud-dialog-container .mud-dialog:has(.mud-picker-container) { width: auto !important; height: auto !important; max-width: 92vw !important; max-height: 90dvh !important; inset: auto !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; border-radius: 16px !important; } /* Caso B: el picker es un .mud-picker-container propio (overlay) → centrar en viewport */ :where(html[data-touch-layout="1"]) .mud-picker-container { position: fixed !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; } :where(html[data-touch-layout="1"]) .mud-picker-container > .mud-paper, :where(html[data-touch-layout="1"]) .mud-picker-container .mud-picker, :where(html[data-touch-layout="1"]) .mud-picker-container .mud-picker-paper { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; margin: auto !important; max-width: 92vw !important; max-height: 90dvh !important; overflow: auto !important; border-radius: 16px !important; } :where(html[data-touch-layout="1"]) .mud-dialog-container .mud-dialog:not(.mfe) .mud-dialog-content { /* título sticky (~56px) + acciones sticky (~68px) + safe-area */ max-height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } :where(html[data-touch-layout="1"]) .mud-dialog-container .mud-dialog:not(.mfe) .mud-dialog-title { position: sticky; top: 0; z-index: 1; background: white; padding: 16px 24px; border-bottom: 1px solid #E5E7EB; } :where(html[data-touch-layout="1"]) .mud-dialog-container .mud-dialog:not(.mfe) .mud-dialog-actions { position: sticky; bottom: 0; background: white; border-top: 1px solid #E5E7EB; padding: 12px 24px max(12px, env(safe-area-inset-bottom)) !important; } :where(html[data-touch-layout="1"]) .mud-overlay { z-index: 1300 !important; } /* Los diálogos se renderizan en el portal de MudBlazor, FUERA de .mobile-shell, así que la regla de arriba (.mobile-shell input) no los alcanza: sin esto el navegador móvil hace zoom al enfocar cualquier campo de un modal. */ :where(html[data-touch-layout="1"]) .mud-dialog input, :where(html[data-touch-layout="1"]) .mud-dialog textarea, :where(html[data-touch-layout="1"]) .mud-dialog select, :where(html[data-touch-layout="1"]) .mud-dialog .mud-input-root input { font-size: 16px !important; } /* Tables: more compact on mobile */ .mobile-shell .mud-table-cell { padding: 8px 10px !important; font-size: 0.82rem !important; } .mobile-shell .mud-table-head .mud-table-cell { font-size: 0.7rem !important; } /* Cards: full width */ .mobile-shell .mud-paper { border-radius: 12px !important; } /* Tabs: scrollable on mobile */ .mobile-shell .mud-tabs-toolbar { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Grid: stack on mobile */ .mobile-shell .mud-grid { gap: 8px !important; } /* Typography: slightly larger for readability */ .mobile-shell .mud-typography-body1 { font-size: 0.92rem !important; } .mobile-shell .mud-typography-body2 { font-size: 0.82rem !important; } .mobile-shell .mud-typography-h5 { font-size: 1.2rem !important; } .mobile-shell .mud-typography-h6 { font-size: 1rem !important; } /* Chip sizes */ .mobile-shell .mud-chip-root { min-height: 28px !important; } /* Safe area superior: la aporta .mobile-header (sticky, presente en TODAS las rutas — MobileShell.razor). Aquí NO, para no duplicar el inset. */ /* ── AppDateField: input de fecha nativo en móvil (rueda / picker del sistema) ── */ .mx-datefield { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px; } .mx-datefield__label { font-size: 12px; font-weight: 600; color: #6B7280; padding-left: 2px; letter-spacing: 0.01em; } .mx-datefield__input { width: 100%; box-sizing: border-box; min-height: 46px; padding: 11px 14px; border: 1px solid rgba(0,0,0,0.23); border-radius: 8px; font-size: 16px; /* >=16px evita el zoom automático en móvil */ line-height: 1.2; background: #fff; color: #111827; -webkit-appearance: none; appearance: none; font-family: inherit; } .mx-datefield__input:focus { outline: none; border-color: #1A3D7A; box-shadow: 0 0 0 1px #1A3D7A; } .mx-datefield__input:disabled { background: #F3F4F6; color: #9CA3AF; } /* que el texto de la fecha no quede a la izquierda pegado al indicador nativo */ .mx-datefield__input::-webkit-date-and-time-value { text-align: left; }