/* ═══════════════════════════════════════════════════════════ responsive_global.css — Sistema Coral Incluir en TODOS los archivos PHP dentro de : ═══════════════════════════════════════════════════════════ */ /* ── HAMBURGER BUTTON ──────────────────── */ .sb-toggle { display: none; position: fixed; top: 10px; left: 10px; z-index: 300; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(7,10,15,.96); align-items: center; justify-content: center; cursor: pointer; font-size: 18px; color: #ccc; box-shadow: 0 2px 12px rgba(0,0,0,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 99; backdrop-filter: blur(2px); } /* ── TABLET (≤860px) ────────────────────── */ @media (max-width: 860px) { /* Mostrar hamburguesa */ .sb-toggle { display: flex !important; } .sb-backdrop.show { display: block; } /* Sidebar: ocultar y deslizar */ .sb, .sidebar { transform: translateX(-100%) !important; transition: transform .25s ease !important; position: fixed !important; z-index: 100 !important; top: 0 !important; bottom: 0 !important; left: 0 !important; } .sb.open, .sidebar.open { transform: translateX(0) !important; } /* Main: sin margen izquierdo */ .main { margin-left: 0 !important; } /* Topbar: espacio para hamburguesa */ .topbar, .topbar-inner { padding-left: 56px !important; padding-right: 14px !important; } /* Ocultar botones secundarios en topbar */ .tb-r .btn:not(.acc):not(.accent):not(.primary), .tb-right .btn:not(.acc):not(.teal):not(.primary) { display: none !important; } /* Contenido */ .content { padding: 16px 14px 72px !important; } /* Grids */ .kpi-row { grid-template-columns: repeat(2, 1fr) !important; } .stats-row { grid-template-columns: repeat(2, 1fr) !important; } .g2, .g3, .charts-row { grid-template-columns: 1fr !important; } .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .voz-cards { grid-template-columns: 1fr 1fr !important; } .coros-grid { grid-template-columns: 1fr !important; } /* Filtros */ .filters-row, .fr { grid-template-columns: 1fr 1fr !important; } /* Modales */ .modal, .modal-confirm { width: calc(100vw - 20px) !important; padding: 18px !important; } .mrow { grid-template-columns: 1fr !important; } /* Tablas */ table { font-size: .76rem; } td, th { padding: 7px 8px !important; } /* Credencial */ .scene { padding: 14px !important; } .cred-wrap { margin-top: 56px !important; max-width: 100% !important; } .cred-actions { flex-wrap: wrap; } .cred-actions .ca-btn { flex: 1 1 calc(50% - 5px); } /* Hero perfil */ .hero { grid-template-columns: auto 1fr !important; } .hero-stats { flex-direction: row !important; grid-column: 1 / -1 !important; } /* Reporte */ .rep-footer { grid-template-columns: 1fr !important; } .rh-right { display: none !important; } .screen-toolbar { flex-direction: column !important; gap: 8px !important; } /* Tabs */ .tabs, .tabs-nav { width: 100% !important; } .tab, .tab-btn { flex: 1; text-align: center; } /* Dashboard estatal */ .dash-grid { grid-template-columns: 1fr !important; } } /* ── MÓVIL (≤480px) ─────────────────────── */ @media (max-width: 480px) { /* Topbar título más pequeño */ .topbar h1, .tb-l h1 { font-size: .88rem !important; } .tb-l p { font-size: .62rem !important; } /* KPIs en 2 columnas */ .kpi-row { grid-template-columns: 1fr 1fr !important; } .kpi-grid { grid-template-columns: 1fr 1fr !important; } /* Filtros en 1 columna */ .filters-row, .fr { grid-template-columns: 1fr !important; } /* Contenido más compacto */ .content { padding: 12px 10px 72px !important; } /* Hero centrado */ .hero { grid-template-columns: 1fr !important; justify-items: center; text-align: center !important; } .hero-meta { justify-content: center !important; } /* Credencial */ .cc-qr-section { flex-direction: column !important; align-items: center !important; text-align: center !important; } .cc-identity { flex-direction: column !important; align-items: center !important; text-align: center !important; } .cc-badges { align-items: center !important; } .cred-actions .ca-btn { flex: 1 1 100% !important; } /* Botones de acción en tabla */ .act-btns { flex-direction: column !important; } /* Topbar ocultar texto extra */ .tb-r .btn { font-size: .72rem !important; padding: 5px 8px !important; } /* Modales full width */ .modal { padding: 14px !important; } } /* ── PANTALLA MUY PEQUEÑA (≤360px) ─────── */ @media (max-width: 360px) { .kpi-row { grid-template-columns: 1fr 1fr !important; } .topbar h1, .tb-l h1 { font-size: .8rem !important; } .content { padding: 10px 8px 72px !important; } } /* ── COMPATIBILIDAD: clase .hamburger (usuarios.php, coros.php) ── */ .hamburger { display: none; position: fixed; top: 10px; left: 10px; z-index: 200; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(7,10,15,.96); align-items: center; justify-content: center; cursor: pointer; font-size: 18px; color: #ccc; backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0,0,0,.4); } .sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 99; } @media (max-width: 860px) { .hamburger { display: flex !important; } .sb-backdrop.show { display: block; } /* Sidebar con clase .sidebar (coros.php) */ .sidebar { transform: translateX(-100%) !important; transition: transform .25s ease !important; position: fixed !important; z-index: 100 !important; } .sidebar.open { transform: translateX(0) !important; } }