/* ========================================================================== responsive.css — capa responsive compartida de GeoMap / HCP-DATA (26 sep 2026) Se carga AL FINAL (después de los estilos propios de cada página) en: index.html, map.html, admin.html, fallas-recurrentes.html, login.html y change-password.html. js/responsive.js marca la página en . Criterio: - No rediseña: usa los mismos tokens, colores, pastillas y tarjetas. - No cambia funciones, ids, eventos ni endpoints. Solo presentación. - Mobile-first en la experiencia: en celular se reordena (barra de una fila, tiras deslizables, tablas → tarjetas, KPIs en 2 columnas). De 1024 px para arriba la web se ve igual que antes. Breakpoints (referencia): teléfono < 768 px (320 / 375 / 414 validados) tablet 768 – 1023 px notebook 1024 – 1439 px (sin cambios) escritorio 1440 – 1919 px (sin cambios) grande ≥ 1920 px (sin cambios; validado a 1920 y 2560) ========================================================================== */ /* ---------- 0. Base: todas las pantallas ---------- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } img, svg, video, canvas, iframe { max-width: 100%; } /* 100vh en celular queda debajo de la barra del navegador: dvh usa el alto visible real */ [data-rp="index"] .app-layout { height: 100vh; height: 100dvh; } [data-rp="map"] body, [data-rp="admin"] body { height: 100vh; height: 100dvh; } [data-rp="map"] body { width: 100%; } /* w-screen (100vw) suma el ancho de la barra de scroll en Windows */ /* Tiras deslizables (pestañas / servidores): scroll táctil sin barra visible */ .rt-strip { scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rt-strip::-webkit-scrollbar { display: none; } /* ---------- 1. Pantallas táctiles: áreas cómodas (≥ 40 px) ---------- */ @media (pointer: coarse) { [data-rp="index"] .btn, [data-rp="index"] .tab-button, [data-rp="index"] .gs-chip, [data-rp="index"] .alert-badge, [data-rp="index"] .inc-subtab { min-height: 40px; } [data-rp="index"] .res-go { padding: 10px 6px; margin: -10px -6px; } [data-rp="index"] .alert-panel-x, [data-rp="index"] .sto-sg-x { min-width: 40px; min-height: 40px; } [data-rp="admin"] .rb-btn, [data-rp="admin"] .admin-tab, [data-rp="map"] .rb-btn { min-height: 40px; } [data-rp="admin"] td button, [data-rp="admin"] td .rounded-md { min-height: 36px; } input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; } select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea { min-height: 40px; } [data-rp="map"] #sidebar-toggle, [data-rp="map"] #admin-link, [data-rp="map"] #logout-link, [data-rp="map"] #video-close, [data-rp="map"] #grid-close { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } [data-rp="map"] #admin-link.hidden { display: none; } /* Botones compactos (chips de filtro, selectores segmentados, acciones de informe) */ [data-rp="index"] .inc-chip-btn, [data-rp="index"] .cx-seg > button, [data-rp="index"] .pat-btn, [data-rp="index"] .sla-btn, [data-rp="map"] .filter-btn, [data-rp="map"] .grid-select-btn, [data-rp="map"] .map-ctl-btn { min-height: 36px; } [data-rp="map"] .theme-switch { min-height: 40px; } } /* ========================================================================== 2. TABLET y menos (< 1024 px) ========================================================================== */ @media (max-width: 1023.98px) { /* ---- index: barra superior (a 768 px se salía 146 px por la derecha) ---- */ [data-rp="index"] .topbar { gap: 10px; } [data-rp="index"] .topbar-right { gap: 8px; flex-shrink: 0; } [data-rp="index"] #mod-admin-link { padding: 5px; } [data-rp="index"] #mod-admin-link > span:not(.btn-icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* switch de tema: solo el ícono (el texto queda para lector de pantalla vía title/aria-label) */ [data-rp="index"] .theme-toggle-btn, [data-rp="fallas"] .theme-toggle-btn { width: 40px; height: 40px; border-radius: 50%; justify-content: center; } [data-rp="index"] .theme-toggle-btn .theme-switch-thumb, [data-rp="fallas"] .theme-toggle-btn .theme-switch-thumb { left: 2px !important; width: 34px; height: 34px; margin-top: -17px; box-shadow: none; } [data-rp="index"] .theme-toggle-btn .theme-switch-label, [data-rp="fallas"] .theme-toggle-btn .theme-switch-label { display: none; } /* ---- index: pestañas en una sola tira deslizable (antes 2–4 filas) ---- */ [data-rp="index"] .tabs-container { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 8px; align-items: center; scroll-snap-type: x proximity; padding-bottom: 2px; scrollbar-width: none; } [data-rp="index"] .tabs-container::-webkit-scrollbar { display: none; } [data-rp="index"] .tab-group, [data-rp="index"] .tab-group-tabs { display: contents; } [data-rp="index"] .tab-group-label { display: none; } [data-rp="index"] .tab-group + .tab-group .tab-group-tabs > .tab-button:first-child { margin-left: 10px; } [data-rp="index"] .tab-group + .tab-group .tab-group-tabs > .tab-button:first-child::before { content: ''; position: absolute; left: -10px; top: 20%; bottom: 20%; width: 1px; background: var(--border-medium); } [data-rp="index"] .tab-button { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: center; } /* ---- admin: pestañas en una tira ---- */ [data-rp="admin"] .admin-tabs-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 8px 0; scrollbar-width: none; } [data-rp="admin"] .admin-tabs-nav::-webkit-scrollbar { display: none; } [data-rp="admin"] .admin-tabs-nav .admin-tab { flex: 0 0 auto; } } /* ========================================================================== 3. TELÉFONO (< 768 px) ========================================================================== */ @media (max-width: 767.98px) { /* Evita el zoom automático de iOS al tocar un campo (se dispara con letra < 16 px) */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; } /* -------------------------------------------------------------------- 3.1 index — barra superior en UNA fila (antes 2 filas y se salía) -------------------------------------------------------------------- */ [data-rp="index"] .topbar { flex-direction: row !important; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px !important; min-height: 56px; } [data-rp="index"] .topbar-left, [data-rp="index"] .topbar-right { width: auto !important; justify-content: flex-start !important; } [data-rp="index"] .topbar-left { gap: 10px; min-width: 0; flex: 1 1 auto; } [data-rp="index"] .topbar-right { gap: 6px; flex: 0 0 auto; } [data-rp="index"] .topbar .topbar-sep { display: none; } [data-rp="index"] .topbar-brand-txt { font-size: 14px; } [data-rp="index"] .topbar-clock .date { display: none; } [data-rp="index"] .topbar-clock .time { font-size: 13px; } [data-rp="index"] .topbar-right .btn { padding: 0; width: 40px; height: 40px; justify-content: center; } [data-rp="index"] .topbar-right .btn .btn-icon { width: 30px; height: 30px; } [data-rp="index"] .btn-logout-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Badge de alertas: sin alertas = solo el ícono; con alertas = ícono + "N Alertas" (lo importante no se esconde) */ [data-rp="index"] .alert-badge { height: 40px; padding: 0 12px; } [data-rp="index"] .alert-badge.ok, [data-rp="index"] .alert-badge.na { width: 40px; padding: 0; justify-content: center; } [data-rp="index"] .alert-badge.ok .alert-badge-txt, [data-rp="index"] .alert-badge.na .alert-badge-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } [data-rp="index"] .alert-badge-txt { max-width: none !important; } [data-rp="index"] .alert-badge-new { display: none; } /* -------------------------------------------------------------------- 3.2 index — contenido: menos margen, tiras fijas arriba -------------------------------------------------------------------- */ [data-rp="index"] .main-content { padding: 0 12px 16px !important; overscroll-behavior-y: contain; } [data-rp="index"] #content { padding-top: 10px; } /* Selector de servidor: una fila deslizable */ [data-rp="index"] .gs-bar { flex-wrap: nowrap; gap: 10px; padding: 6px 10px; margin-bottom: 8px; overflow: hidden; } [data-rp="index"] .gs-label { flex: 0 0 auto; } [data-rp="index"] .gs-chips { flex-wrap: nowrap; overflow-x: auto; gap: 8px; min-width: 0; flex: 1 1 auto; padding: 2px 0; scrollbar-width: none; scroll-snap-type: x proximity; } [data-rp="index"] .gs-chips::-webkit-scrollbar { display: none; } [data-rp="index"] .gs-chip { flex: 0 0 auto; padding: 4px 16px 4px 4px; gap: 8px; scroll-snap-align: center; } [data-rp="index"] .gs-chip-dot { top: 5px; right: 6px; } /* Pestañas: tira fija arriba mientras se hace scroll del contenido */ [data-rp="index"] .tabs-container { position: sticky; top: 0; z-index: 30; margin: 0 -12px 12px; padding: 8px 12px; background: var(--bg-canvas); border-bottom: 1px solid var(--border-weak); } [data-rp="index"] .tab-button { padding: 4px 16px 4px 4px; gap: 8px; font-size: 13px; } [data-rp="index"] .tab-button-icon { width: 30px; height: 30px; } [data-rp="index"] .tab-dot.crit, [data-rp="index"] .tab-dot.warn { top: 5px; right: 6px; } /* Encabezados de sección y barras de herramientas: que envuelvan en vez de salirse */ [data-rp="index"] .section-header, [data-rp="index"] .res-head, [data-rp="index"] .inc-toolbar, [data-rp="index"] .sd-bar, [data-rp="index"] .salud-head-right, [data-rp="index"] .cam-periodo { flex-wrap: wrap; } [data-rp="index"] .section-title { font-size: 13px; } /* -------------------------------------------------------------------- 3.3 KPIs: 2 columnas (antes 1 → 6 tarjetas ocupaban ~700 px) -------------------------------------------------------------------- */ [data-rp="index"] .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; } [data-rp="index"] .kpi-card { padding: 10px 12px; min-width: 0; } [data-rp="index"] .kpi-label { font-size: 11.5px; margin-bottom: 4px; } [data-rp="index"] .kpi-value, [data-rp="index"] .kpi-value-badge { font-size: 22px !important; } [data-rp="index"] .kpi-subtext { font-size: 11px; } [data-rp="index"] .kpi-icon { top: 10px; right: 10px; } [data-rp="index"] .noc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; } [data-rp="index"] .noc-kpi-l, [data-rp="index"] .tab-group-label { font-size: 11px; } [data-rp="index"] .res-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Rótulos en mayúscula de 10 px: a 11 px en celular para que se lean */ [data-rp="index"] #content label, [data-rp="index"] .inc-est, [data-rp="index"] .server-stat-label, [data-rp="index"] .inc-group-label, [data-rp="fallas"] label { font-size: 11px; } [data-rp="index"] .frn-area { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 6px; } /* -------------------------------------------------------------------- 3.4 Gráficos: alto adaptable, donas más compactas -------------------------------------------------------------------- */ [data-rp="index"] .server-body { padding: 12px; gap: 12px; grid-template-columns: minmax(0, 1fr) !important; } [data-rp="index"] .server-chart { max-width: 220px; margin: 0 auto; width: 100%; } [data-rp="index"] .chart-container { height: 240px; padding: 8px 6px 2px; } [data-rp="index"] .cx-charts, [data-rp="index"] .charts-grid, [data-rp="index"] .pat-det-grid { grid-template-columns: minmax(0, 1fr) !important; } [data-rp="index"] canvas { max-width: 100%; } [data-rp="index"] .server-card, [data-rp="index"] .chart-card, [data-rp="index"] .res-card { min-width: 0; } /* Mapa dentro de la pestaña: ocupa el alto visible que queda */ /* Al bajar un poco, el mapa llena la pantalla debajo de la tira de pestañas (que queda fija) */ [data-rp="index"] .mapa-marco iframe { height: calc(100dvh - 130px); min-height: 460px; } /* Paneles laterales (alertas, detalle de cámara) y ventanas: pantalla completa */ [data-rp="index"] .alert-panel { width: 100vw; border-left: 0; } [data-rp="index"] .alert-panel-head { padding: 10px 12px; } [data-rp="index"] .alert-panel-body { padding: 12px; } [data-rp="index"] .alert-panel-foot { padding: 10px 12px; } [data-rp="index"] .sto-sg-overlay { padding: 0; align-items: stretch; } [data-rp="index"] .sto-sg-box { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; } [data-rp="index"] .noc-kpis.frn-d-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Formularios (SLA, filtros): una columna */ [data-rp="index"] .sla-form-grid { grid-template-columns: minmax(0, 1fr); } [data-rp="index"] .sla-form-grid .wide { grid-column: auto; } /* Mapa de calor de Patrones: sigue como tabla (así se lee), con la columna de días fija */ [data-rp="index"] table.pat-heat th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--bg-panel); } /* -------------------------------------------------------------------- 3.5 TABLAS → TARJETAS (todas las páginas; js/responsive.js pone data-label) -------------------------------------------------------------------- */ table.rt-cards, table.rt-cards > tbody { display: block; width: 100% !important; min-width: 0 !important; } table.rt-cards { border-collapse: separate; font-size: 13px; } table.rt-cards > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } table.rt-cards > tfoot { display: block; } table.rt-cards > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 10px 12px; margin: 0 0 8px; background: var(--bg-panel, #fff); border: 1px solid var(--border-weak, #e2e8f0); border-radius: 4px; } table.rt-cards > tbody > tr:last-child { margin-bottom: 0; } table.rt-cards > tbody > tr > td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; width: auto !important; white-space: normal !important; overflow-wrap: anywhere; text-align: left !important; font-size: 13px; } table.rt-cards > tbody > tr > td::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--text-secondary, #64748b); } table.rt-cards > tbody > tr > td.rt-nolabel::before, table.rt-cards > tbody > tr > td.rt-title::before { display: none; } table.rt-cards > tbody > tr > td.rt-title { grid-column: 1 / -1; font-size: 14px; font-weight: 600; } table.rt-cards > tbody > tr > td.rt-nolabel:empty { display: none; } /* Columnas sin título (flecha de desplegar, acciones): ocupan todo el ancho de la tarjeta */ table.rt-cards > tbody > tr > td.rt-nolabel { grid-column: 1 / -1; } table.rt-cards > tbody > tr > td.rt-nolabel:first-child { grid-column: auto; position: absolute; right: 10px; top: 10px; width: auto !important; } table.rt-cards > tbody > tr { position: relative; } table.rt-cards > tbody > tr:has(> td.rt-nolabel:first-child) > td.rt-title { padding-right: 28px !important; } /* Filas de detalle / agrupadoras (una sola celda que abarca toda la fila) */ table.rt-cards > tbody > tr.rt-full { display: block; padding: 0; border: 0; background: none; } table.rt-cards > tbody > tr.rt-full > td { display: block; padding: 0 !important; } table.rt-cards > tbody > tr.rt-full > td::before { display: none; } table.rt-cards > tbody > tr.rt-full table.rt-cards > tbody > tr { background: var(--bg-surface, #f8fafc); } /* Campos dentro de una tarjeta: nunca más anchos que la tarjeta */ table.rt-cards td select, table.rt-cards td input:not([type="checkbox"]):not([type="radio"]), table.rt-cards td textarea { max-width: 100%; } table.rt-cards td select { width: 100%; } /* Barras / medidores dentro de celdas: ancho completo */ table.rt-cards td .area-bar, table.rt-cards td [class*="bar"] { max-width: 100%; } /* Contenedores que antes scrolleaban la tabla: ya no hace falta */ .inc-panel:has(> table.rt-cards), .cx-scroll:has(> table.rt-cards), .salud-table-wrap:has(> table.rt-cards), .table-scroll:has(> table.rt-cards), .mod-scroll:has(> table.rt-cards), .overflow-x-auto:has(> table.rt-cards) { overflow-x: visible; } .inc-panel:has(> table.rt-cards) { background: none; border: 0; } /* Tablas que se podían ordenar tocando el encabezado: el encabezado pasa a ser una barra «Ordenar por» */ table.rt-cards:has(> thead .th-sort, > thead [data-frn-sort], > thead [data-sort]) > thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; margin: 0 0 8px; background: none; border: 0; } table.rt-cards:has(> thead .th-sort, > thead [data-frn-sort], > thead [data-sort]) > thead > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } table.rt-cards:has(> thead .th-sort, > thead [data-frn-sort], > thead [data-sort]) > thead > tr::before { content: 'Ordenar por'; font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--text-secondary, #64748b); margin-right: 2px; } table.rt-cards > thead th { border: 0 !important; } table.rt-cards > thead th:not(:has(.th-sort)):not([data-frn-sort]):not([data-sort]) { display: none; } table.rt-cards > thead th[data-frn-sort], table.rt-cards > thead th[data-sort], table.rt-cards > thead .th-sort { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 6px 12px !important; margin: 0 !important; border: 1px solid var(--border-weak, #e2e8f0) !important; border-radius: 999px; background: var(--bg-panel, #fff); font-size: 12px; text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; } table.rt-cards > thead th:has(.th-sort) { padding: 0 !important; background: none; } /* Marca roja de área crítica: pasa de la primera celda al borde de la tarjeta */ table.rt-cards > tbody > tr.area-crit { box-shadow: inset 3px 0 0 var(--color-critical-solid); } table.rt-cards > tbody > tr.area-crit > td:first-child { box-shadow: none; } /* Fila seleccionable: se nota que se toca */ table.rt-cards > tbody > tr.inc-row:active, table.rt-cards > tbody > tr[onclick]:active { background: var(--bg-surface, #f1f5f9); } [data-theme="dark"] table.rt-cards > tbody > tr { background: var(--bg-panel, #181b1f); } /* -------------------------------------------------------------------- 3.6 map.html — encabezado en 2 filas: arriba servidor + sesión, abajo los filtros Cámaras/Online/Offline (antes ocultos en celular) -------------------------------------------------------------------- */ [data-rp="map"] #app > header { flex-wrap: wrap; height: auto; min-height: 56px; gap: 6px 8px; padding: 8px 10px; } [data-rp="map"] #app > header > * { order: 1; } [data-rp="map"] #app > header::after { content: ''; order: 2; flex-basis: 100%; height: 0; } [data-rp="map"] #app > header > #camera-stats { order: 3; display: flex !important; flex: 1 1 auto; min-width: 0; gap: 6px; } [data-rp="map"] #app > header > #camera-stats > .kpi-filtro { flex: 1 1 0; min-width: 0; justify-content: center; padding: 6px 8px; min-height: 40px; } [data-rp="map"] #app > header > div:has(> #monitor-btn), [data-rp="map"] #app > header > #fullscreen-btn, [data-rp="map"] #app > header > #refresh { order: 3; } [data-rp="map"] #app > header > .flex-1 { display: none; } [data-rp="map"] #app > header > span.w-px { display: none; } [data-rp="map"] #site-select { min-width: 0 !important; flex: 1 1 0; width: 0; max-width: none; } [data-rp="map"] #app > header > #system-dot { margin: 0 2px; } [data-rp="map"] #app > header > div:last-child { gap: 6px; } [data-rp="map"] .theme-switch { width: 40px !important; min-width: 40px; padding: 0 !important; justify-content: center; } [data-rp="map"] .theme-switch .theme-switch-label { display: none; } [data-rp="map"] .theme-switch .theme-switch-thumb { left: 2px !important; } [data-rp="map"] .rb-btn { padding: 6px; } [data-rp="map"] #sidebar { width: min(19rem, 88vw); } /* Panel de detalle de la cámara: en celular se apoya abajo y nunca pasa del alto del mapa. El contenido scrollea por dentro y los botones (▶ Ver Vivo, etc.) quedan siempre visibles. */ [data-rp="map"] #detail-panel { top: auto !important; bottom: 8px; left: 8px; right: 8px; width: auto !important; max-height: calc(100% - 16px); display: flex; flex-direction: column; } [data-rp="map"] #detail-panel > * { flex-shrink: 0; } [data-rp="map"] #detail-panel > #detail-scroll { flex: 1 1 auto; min-height: 0; max-height: none; } [data-rp="map"] #detail-actions { flex-wrap: wrap; } [data-rp="map"] #detail-actions button { min-height: 40px; } [data-rp="map"] .map-ctl { max-width: calc(100% - 70px); } /* Modales de video / historial: casi pantalla completa */ [data-rp="map"] #video-modal, [data-rp="map"] #grid-modal, [data-rp="map"] #history-modal, [data-rp="map"] #monitor-modal { padding: 8px; } [data-rp="map"] #video-modal > div, [data-rp="map"] #grid-modal > div, [data-rp="map"] #history-modal > div, [data-rp="map"] #monitor-modal > div { max-height: calc(100dvh - 16px); overflow: auto; } [data-rp="map"] #video-modal .text-\[10px\] { display: none; } [data-rp="map"] .multicam-grid:not(.solo) { grid-template-columns: minmax(0, 1fr); } /* Mapa embebido en el dashboard: esa versión no tiene sesión en el encabezado */ html.mapa-embed[data-rp="map"] #app > header { padding: 6px 8px; } /* -------------------------------------------------------------------- 3.7 admin.html -------------------------------------------------------------------- */ [data-rp="admin"] body > div > header { gap: 8px; padding: 0 10px; } [data-rp="admin"] body > div > header > a[href="/"] { font-size: 0; gap: 0; min-width: 40px; min-height: 40px; justify-content: center; } [data-rp="admin"] body > div > header > span.w-px { display: none; } [data-rp="admin"] #whoami { display: none; } [data-rp="admin"] #theme-btn-txt { display: none; } [data-rp="admin"] #theme-btn, [data-rp="admin"] #logout-btn { padding: 6px; font-size: 0; gap: 0; } [data-rp="admin"] body > div > div.px-6 { padding-left: 10px; padding-right: 10px; } [data-rp="admin"] main, [data-rp="admin"] .max-w-5xl, [data-rp="admin"] .max-w-6xl { min-width: 0; } [data-rp="admin"] main.px-6, [data-rp="admin"] .px-6 { padding-left: 12px; padding-right: 12px; } [data-rp="admin"] .modal-backdrop { padding: 8px; align-items: flex-start; overflow-y: auto; } [data-rp="admin"] .modal-backdrop > div { max-width: 100%; } [data-rp="admin"] table.rt-cards td .flex { flex-wrap: wrap; } /* -------------------------------------------------------------------- 3.8 fallas-recurrentes.html (página suelta, enlaces viejos) -------------------------------------------------------------------- */ [data-rp="fallas"] .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; } [data-rp="fallas"] .topbar-right { flex-wrap: wrap; gap: 8px; width: 100%; } [data-rp="fallas"] .topbar-title { display: none; } [data-rp="fallas"] .main-content { padding: 12px !important; overflow-x: hidden; } [data-rp="fallas"] .btn { padding: 5px 12px 5px 5px; } [data-rp="fallas"] #status-badge { white-space: normal; } /* Textos cortos dentro de las tarjetas (fechas, "desde hace…", chips) pueden bajar de línea */ table.rt-cards td span, table.rt-cards td small, table.rt-cards td .area-since { white-space: normal !important; } } /* ========================================================================== 4. TELÉFONO CHICO (< 400 px: 320 / 360 / 375) ========================================================================== */ @media (max-width: 399.98px) { [data-rp="index"] .topbar-clock { display: none; } [data-rp="index"] .topbar-brand-txt { font-size: 13px; } [data-rp="index"] .gs-label { display: none; } [data-rp="index"] .kpi-value, [data-rp="index"] .kpi-value-badge { font-size: 20px !important; } [data-rp="index"] .kpi-card { padding: 9px 10px; } table.rt-cards > tbody > tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 9px 10px; } [data-rp="map"] #app > header > #camera-stats > .kpi-filtro { padding: 6px 4px; gap: 4px; } [data-rp="map"] #app > header > #camera-stats > .kpi-filtro > svg { display: none; } } /* ========================================================================== 5. PANTALLAS GRANDES (≥ 1920 px): validado a 1920 y 2560 px sin desbordes; las grillas (auto-fit) ya reparten el ancho. No se cambia nada para no alterar la vista NOC actual. ========================================================================== */ /* ---------- Tablet: sombra que avisa que una tabla ancha sigue hacia el costado ---------- */ @media (min-width: 768px) and (max-width: 1023.98px) { [data-rp="index"] .inc-panel, [data-rp="index"] .cx-scroll, [data-rp="index"] .salud-table-wrap { background: linear-gradient(to right, var(--bg-panel) 30%, transparent) left / 32px 100% no-repeat local, linear-gradient(to left, var(--bg-panel) 30%, transparent) right / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), transparent) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), transparent) right / 12px 100% no-repeat scroll, var(--bg-panel); } } /* ---------- Movimiento reducido ---------- */ @media (prefers-reduced-motion: reduce) { .tabs-container, .gs-chips, .admin-tabs-nav { scroll-behavior: auto; } }