@layer vsg-universal { /* Red de seguridad global anti-desborde horizontal en móvil. Muchas secciones fijan su propio max-width (variable --vsg-banner-map-width, grids con columnas fijas, etc.) pero basta con que UNA se pase del ancho del viewport para que aparezca scroll horizontal en TODA la página. Esto se aplica siempre (no solo dentro de @media) porque html/body deben contener cualquier desborde sin importar el ancho de pantalla. */ html, body { max-width: 100%; overflow-x: hidden; /* fallback para WebViews antiguos */ overflow-x: clip; } @media (max-width: 820px) { .content-container, .universal-top-container { max-width: 100%; box-sizing: border-box; } /* Evita el zoom automático de iOS al enfocar un input (ocurre cuando el font-size es menor a 16px) y agranda el área táctil, en TODA vista móvil y no solo cuando se activa manualmente el "modo rápido". */ input.form-control, select.form-control, textarea.form-control { font-size: 16px; min-height: 36px; } /* Área táctil mínima de 44px para botones y tabs en cualquier sección, sin depender de que cada archivo CSS lo defina por separado. */ .btn-primary, .btn-outline, .nav-btn { min-height: 20px; } /* Cualquier grid con columnas fijas que una sección se haya olvidado de colapsar en su propio responsive cae aquí a una sola columna, para que el texto no quede aplastado en celdas de 100-150px. */ .gp-stats, .mg-form-grid.mg-grid-3, .mg-form-grid.mg-grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .gp-stats, .mg-form-grid.mg-grid-3, .mg-form-grid.mg-grid-4 { grid-template-columns: 1fr; } /* En pantallas muy angostas, imágenes/iconos decorativos con tamaños fijos en px (28-44px) siguen viéndose bien, pero los textos junto a ellos necesitan poder envolver en vez de forzar el ancho del padre. */ .universal-top-title, .section-kicker, .universal-top-subtitle { overflow-wrap: anywhere; } } /* La marca es identidad, no texto decorativo: en pantallas angostas recibe el espacio restante antes de que los controles puedan truncarla. */ @media (max-width: 680px) { .mobile-header { gap: 6px; padding-inline: 9px; } .mobile-header .mobile-brand-summary { flex: 1 1 auto; min-width: 0; gap: 6px; } .mobile-header .mobile-brand-copy { flex: 1 1 auto; min-width: 0; } .mobile-header .mobile-brand-text { display: block; width: auto; max-width: min(9.8rem, 44vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.6rem, 2.55vw, .74rem); letter-spacing: -.02em; } .mobile-header > .u-row-gap-8 { flex: 0 0 auto; gap: 5px; } .mobile-header .mobile-login-btn { padding-inline: 8px; } /* 48px de área táctil real para el control que abre TODA la navegación, sin agrandar el glifo "☰" en sí (el header solo tiene 68px de alto). */ .mobile-header #mobileMenuBtn { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; margin: -8px -6px -8px 0; font-size: 1.66rem; } } @media (max-width: 820px) { .universal-top-container { padding: 12px 14px; gap: 10px; } .universal-top-header { align-items: flex-start; } .universal-top-actions { width: auto; min-width: 0; flex-wrap: wrap; } .universal-top-actions .form-control, .universal-top-actions select.form-control { width: min(100%, 320px); max-width: 320px; } .universal-tab-btn { min-height: 44px; padding: 8px 12px; } .mobile-header { height: 68px; padding: 0 10px; } .mobile-brand-summary { display: flex; align-items: center; min-width: 0; gap: 7px; } .mobile-brand-logo { display: block; width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 4px 9px rgba(56, 189, 248, .3)); } .mobile-brand-copy { display: grid; min-width: 0; gap: 1px; } .mobile-brand-text { max-width: none; overflow: visible; color: #eef8ff; font-size: clamp(.6rem, 3vw, .74rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.05; white-space: nowrap; } .mobile-social-shell { display: inline-grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(96, 165, 250, .22); border-radius: 11px; background: rgba(15, 23, 42, .62); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(1, 6, 20, .24); } .mobile-fb-icon { display: inline-grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border: 1px solid rgba(96, 165, 250, .48); border-radius: 8px; background: linear-gradient(135deg, rgba(24, 119, 242, .82), rgba(29, 78, 216, .86)); box-shadow: 0 7px 17px rgba(29, 78, 216, .2), inset 0 1px rgba(255,255,255,.22); color: #fff; text-decoration: none; } .mobile-fb-icon:active { transform: translateY(1px); } .mobile-login-btn { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 10px; border: 1px solid rgba(125, 211, 252, .48); border-radius: 9px; background: linear-gradient(135deg, rgba(14, 165, 233, .28), rgba(37, 99, 235, .38)); color: #effaff; font: inherit; font-size: .67rem; font-weight: 850; line-height: 1; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 7px 18px rgba(14, 165, 233, .18), inset 0 1px rgba(255,255,255,.15); cursor: pointer; } .mobile-login-btn:active { transform: translateY(1px); } @media (max-width: 460px) { .mobile-login-btn { min-height:34px; padding-inline: 7px; font-size: .6rem; } .mobile-brand-summary { gap:5px; } .mobile-brand-copy { min-width:0; } .mobile-brand-text { max-width:none; font-size:clamp(.58rem,3vw,.68rem); letter-spacing:-.025em; } .mobile-brand-logo { width: 29px; height: 29px; } .mobile-social-shell { width: 34px; height: 34px; flex-basis: 34px; } .mobile-fb-icon { width: 26px; height: 26px; flex-basis: 26px; } } .sidebar { transform: translateX(-100%); width: 250px; /* Refuerzo defensivo: navigation-auth-modern.css ya pone overflow-y:auto en la regla base, pero se repite acá explícito (además de -webkit-overflow-scrolling y overscroll-behavior, que esa hoja no tenía) porque el reporte real era "no puedo bajar hasta ver Mi Cuenta" -- con 11 botones de nav a 44px cada uno más el menú de admin y controles de usuario, el contenido real ya superaba el alto de pantalla en varios teléfonos, y sin -webkit-overflow-scrolling el scroll por inercia de iOS puede sentirse "trabado" a mitad de camino en vez de roto del todo. La compactación de acá abajo (nav-btn más chico, menos gap) ataca la causa real: que sobrara tanto para scrollear. */ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .sidebar.active { transform: translateX(0); } /* Compactar la navegación del sidebar en móvil -- tercera pasada. Las dos anteriores (44px -> 40px -> 34px) solo tocaban el alto, y el reporte seguía siendo que se veían "gordos": el problema no era solo la altura, era que cada botón inactivo llevaba su propia caja (fondo en gradiente + borde de 1px + radio de 9px), como una pastilla independiente por cada ítem de una lista de 11. Acá se aplana: sin fondo/borde propio en estado normal (queda una fila de lista limpia, ícono+texto), y .nav-btn.active sigue teniendo su propio degradado de acento (navigation-auth-modern.css línea 295) así que cuál está activo se sigue viendo con la misma claridad. Ícono más chico (1em vs 1.15em) y columna de ícono más angosta completan el look "lista densa" en vez de "fila de botones". */ .sidebar .main-nav { gap: 1px; } .sidebar .nav-btn { min-height: 32px; grid-template-columns: 19px minmax(0, 1fr) 4px; padding: 0 6px 0 4px; border-radius: 7px; background: transparent; border-color: transparent; font-size: .73rem; } .sidebar .nav-btn::before { width: 1em; height: 1em; } .sidebar .nav-btn:hover { background: rgba(255, 255, 255, .045); } .sidebar .logo-container { margin-bottom: 4px; padding-bottom: 5px; } .sidebar .menu-divider { margin: 3px 5px 2px; } .sidebar #openLoginBtn, .sidebar #userAccountBtn { min-height: 38px; padding-top: 2px; padding-bottom: 2px; } .main-content, .content-container { margin-left: 0; width: 100%; max-width: 100%; } .top-bar { left: 0; width: 100%; } .mobile-menu-btn { display: flex; } /* .table-responsive-wrapper es el nombre "oficial" original, pero casi todas las tablas del sitio (roster, asistencia, gestión de guild, noticias, wlog-test...) en realidad usan .table-responsive a secas. Se replica el mismo tratamiento móvil en ambas para que TODAS las tablas -no solo Discord, que era la única que usaba el nombre largo- reciban borde, fondo y scroll consistentes en pantallas chicas. */ .table-responsive-wrapper, .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); background: rgba(15, 23, 42, 0.4); } .data-table { /* No forzar 800px a cada tabla: era la causa global de scroll horizontal incluso en listados simples. Las vistas de auditoría que realmente necesitan columnas densas optan por --wide. */ min-width: 0; width: 100%; display: table; /* Varias secciones (roster.css, discord.css) fijan su propio border-collapse:collapse en .data-table y, por cargarse después de este archivo global, ganan el empate de especificidad. Con collapse, la primera columna "pegajosa" (sticky) de abajo no funciona de forma confiable en todos los navegadores, así que aquí se fuerza separate con solo dentro de móvil. */ border-collapse: separate; border-spacing: 0; } .table-responsive--wide .data-table, .table-responsive-wrapper--wide .data-table { min-width: min(680px, 100%); } .btn-primary, .btn-outline { touch-action: manipulation; } .data-table th:first-child, .data-table td:first-child { position: sticky; left: 0; background-color: #1e293b; z-index: 2; border-right: 2px solid rgba(56, 189, 248, 0.3); } .data-table th:first-child { z-index: 3; background-color: #0f172a; } .dashboard-cards { grid-template-columns: 1fr; } .card { margin-bottom: 15px; } .modal-content { width: 95%; margin: 10% auto; padding: 20px; } .form-group { margin-bottom: 15px; } .form-control { font-size: 16px; } .btn { /* Las acciones compactas (tabs, filtros, vínculos y toolbar) deben medir su contenido. Cada formulario que requiera una acción a todo lo ancho debe declararlo en su propio módulo. */ width: auto; margin-bottom: 0; } .roster-grid, .news-grid, .bento-grid { grid-template-columns: 1fr; } .media-browser-modal .modal-content { width: 98%; height: 90vh; margin: 5vh auto; } .media-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } } @media (max-width: 480px) { .universal-top-title { font-size: 1.25rem; } h1, h2 { font-size: 1.5rem; } .top-bar-user span { display: none; } .alert-container { width: 90%; left: 5%; transform: translateX(0); } .dc-wrapper { width: 100%; padding: 10px; } /* css/design-system.css ya fuerza .universal-tabs a una sola fila con scroll horizontal (flex-wrap:nowrap;overflow-x:auto) desde los 720px para abajo. Antes, a partir de los 480px este archivo lo contradecía apilando las pestañas en columna a ancho completo — en secciones con muchas pestañas (Gestión de Guild tiene 10) eso empujaba todo el contenido varias pantallas hacia abajo. Se deja consistente con el scroll horizontal en todo el rango móvil. */ .universal-tab-btn { flex: 0 0 auto; white-space: nowrap; } .dc-sim-controls { flex-direction: column; } .dc-sim-controls button { width: 100%; justify-content: center; } } /* Sistema móvil compartido: todas las secciones parten de una retícula vertical legible, con cabeceras compactas y controles alcanzables. Cada módulo puede ampliar esto con su propia composición, sin heredar tablas ni anchos de escritorio. */ @media (max-width: 820px) { :root { --vsg-mobile-gutter: 16px; --vsg-mobile-radius: 14px; } .main-content, .content-container { padding-inline: var(--vsg-mobile-gutter); } /* Solo las tarjetas genéricas reciben esta normalización. Un selector por sufijo de clase alcanzaba módulos no relacionados y alteraba contenedores internos de Noticias, Cuenta y el Studio. */ .content-wrapper > .card { width: 100%; max-width: 100%; min-width: 0; margin-inline: auto; } .universal-top-container { min-height: 0; padding: 14px; border-radius: var(--vsg-mobile-radius); } /* La cabecera con video de Noticias (.nw-header-container) se fusionó con .mobile-header (que ahora muestra el mismo video de fondo y el nombre completo de la guild) — se oculta acá para no duplicar la bienvenida. Ver el video/kicker nuevos en global.css junto a la regla base de .mobile-header y docs/MOBILE-ARCHITECTURE.md. */ .nw-header-container { display: none !important; } .universal-top-header { flex-direction: column; align-items: stretch; gap: 11px; } .universal-top-title { font-size: clamp(1.15rem, 5.5vw, 1.45rem); line-height: 1.08; letter-spacing: -.03em; } .universal-top-subtitle, .universal-top-header p { font-size: 1rem; line-height: 1.4; } .universal-top-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; } /* Las acciones de cabecera no deben convertirse automáticamente en dos tarjetas enormes: conservan su ancho natural, envuelven si hace falta y los formularios pueden declarar su propio ancho cuando lo requieran. */ .universal-top-actions > * { flex: 0 1 auto; min-width: 0; max-width: 100%; } .universal-tabs { gap: 7px; padding-bottom: 3px; scrollbar-width: none; } .universal-tab-btn { min-height: 44px; padding: 8px 11px; border-radius: 9px; font-size: .72rem; } .card { border-radius: var(--vsg-mobile-radius); box-shadow: 0 12px 28px rgba(1,5,18,.2); } .dashboard-cards, .bento-grid, .stats-grid, .overview-grid, .nw-grid, .guides-grid { grid-template-columns: 1fr; } .modal-content, .modal .modal-content { width: calc(100vw - 20px); min-width: 0; max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); margin: 10px auto; border-radius: 15px; } .modal-header { padding: 13px 14px; } .modal-body { padding: 14px; } .form-row, .form-grid, .grid-2, .grid-3, .filters-row { grid-template-columns: 1fr; } .section-actions, .toolbar-actions, .filter-bar { flex-wrap: wrap; gap: 8px; } .section-actions > *, .toolbar-actions > *, .filter-bar > * { min-width: 0; } } /* Reglas: pestañas "Lectura/Edición" del hero (.rules-mode-tabs). Esa clase sigue siendo .universal-tab-btn porque rules.js depende de ella para el toggle de estado — pero por eso mismo design-system.css (esta misma capa) la fuerza con !important (min-height:38px, padding:8px 16px, font-size:.78rem...) sin importar qué diga sections/rules/rules.css (capa vsg-sections, siempre pierde acá). El único lugar donde un ajuste de tamaño para estos botones puede ganar de verdad es esta misma capa, con un selector más específico que el bare ".universal-tab-btn". */ @media (max-width: 820px) { .rules-mode-tabs .universal-tab-btn { flex: 1 1 0 !important; min-width: 0 !important; min-height: 0 !important; padding: 4px 10px !important; border: none !important; border-radius: 6px !important; color: #8e8e93 !important; background: transparent !important; font-size: 11px !important; font-weight: 500 !important; white-space: nowrap !important; } .rules-mode-tabs .universal-tab-btn.active, .rules-mode-tabs .universal-tab-btn.is-active { color: #000 !important; background: #38bdf8 !important; font-weight: 600 !important; box-shadow: none !important; } } /* Calculadora, Calendario, Guías y Estadísticas (Attendance) ya NO necesitan un parche acá: sus cabeceras se restructuraron para usar clases propias (.calc-header-row/.calc-hero-title, .cal-header-row/.cal-hero-title, .gd-header-row/.gd-hero-title/ .gd-mode-tabs, .at-header-row/.at-hero-title/.at-mode-tabs) en vez de .universal-top-header/.universal-top-title/.universal-tabs — esas 3 genéricas están forzadas con !important por design-system.css (esta misma capa vsg-universal) y nunca podían perderse contra ellas de verdad. Ver los comentarios equivalentes en el CSS de cada sección. */ /* El contrato móvil continúa dentro del mismo @layer vsg-universal: una sola capa hace determinista la prioridad frente a las hojas de sección. */ /* Botón de colapso "Administración" del menú lateral (#adminMenuToggle): en el drawer móvil (.sidebar, off-canvas hasta los 992px) pasa de un pill centrado al 86% de ancho a una fila de app nativa a todo el ancho. .admin-menu-toggle no está peleada por design-system.css, así que gana por orden de carga (mobile.css se inyecta después de global.css) sin necesitar !important — se agrega de todos modos por consistencia con el resto de este archivo. */ @media (max-width: 820px) { .admin-menu-toggle { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; height: 40px !important; min-height: 40px !important; margin: 8px 0 !important; padding: 0 16px !important; border-radius: 10px !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .1) !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .admin-menu-toggle::before { display: none !important; } .admin-menu-toggle:hover { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .18) !important; transform: none !important; } /* Ícono chevron en su propia cápsula (36x36, esquinas redondeadas), en vez del glifo "⌄" suelto de antes — gira 90° al expandirse (el SVG ya apunta a la derecha, ver index.html) en vez de voltearse 180°, y se ilumina en cian sutil al pasar el mouse. */ .admin-menu-toggle-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 10px !important; background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .12) !important; color: #fff !important; cursor: pointer; transform: rotate(0deg); transition: transform .2s ease, background .2s ease, border-color .2s ease; } .admin-menu-toggle:hover .admin-menu-toggle-icon { background: rgba(56, 189, 248, .15) !important; border-color: rgba(56, 189, 248, .3) !important; } .admin-menu:not(.is-collapsed) .admin-menu-toggle-icon { transform: rotate(90deg); } } /* Gestión de Guild: con 10 pestañas, ni la fila original (una sola línea nowrap forzada por design-system.css) ni una grilla apretada de botones de 90px eran legibles en móvil. Se reemplaza por un