/* =========================================================== PEL Digital — Partido Esperanza y Libertad Colores institucionales: navy CMYK(100,100,0,50)=#000080 amarillo CMYK(0,0,100,0)=#FFEE00 Light / Dark mode via [data-theme] en . =========================================================== */ :root { --side-w: 320px; --header-h: 56px; --footer-h: 26px; --radius: 10px; --gap: 14px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Colores institucionales PEL */ --brand-navy: #000080; --brand-yellow: #FFEE00; --brand-yellow-dark: #c9a800; /* amarillo oscurecido para texto sobre blanco */ } /* ---- Paleta: LIGHT ---- */ [data-theme="light"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f4f5; --surface-elevated: #ffffff; /* modales / dropdowns — overlay da el contraste */ --surface-elevated-2: #f0f0f2; /* inputs dentro de superficies elevadas */ --border-elevated: #d4d4d8; --text: #0a0a0a; --text-muted: #71717a; --border: #e4e4e7; --border-strong: #d4d4d8; --accent: #0a0a0a; /* todo el "color" es negro/blanco */ --on-accent: #ffffff; --map-bg: #e9e9ea; --stroke: #ffffff; /* borde entre regiones en el mapa */ --stroke-hover: #0a0a0a; --shadow: 0 4px 16px rgba(0,0,0,.08); } /* ---- Paleta: DARK ---- */ [data-theme="dark"] { --bg: #0b0b0c; --surface: #141416; --surface-2: #1c1c1f; --surface-elevated: #2c2c31; /* modales / dropdowns — claramente sobre el fondo */ --surface-elevated-2: #3a3a40; /* inputs dentro de superficies elevadas */ --border-elevated: #4a4a52; --text: #fafafa; --text-muted: #8a8a90; --border: #26262a; --border-strong: #34343a; --accent: #fafafa; --on-accent: #0b0b0c; --map-bg: #1a1a1c; --stroke: #0b0b0c; --stroke-hover: #fafafa; --shadow: 0 4px 18px rgba(0,0,0,.5); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; touch-action: manipulation; /* evita zoom por doble tap */ } .d-none { display: none !important; } .muted { color: var(--text-muted); } .small { font-size: .78rem; } .mb-0 { margin-bottom: 0; } .app-shell { display: flex; flex-direction: column; height: 100vh; } /* ---------- Header ---------- */ .app-header { height: var(--header-h); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; padding-top: env(safe-area-inset-top); height: calc(var(--header-h) + env(safe-area-inset-top)); background: var(--brand-navy); border-bottom: 1px solid var(--border); z-index: 1002; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; cursor: pointer; } .brand-logo { width: 34px; height: 34px; flex: 0 0 auto; display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-title { font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em; color: #ffffff; } .brand-sub { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); } .header-actions { display: flex; align-items: center; gap: 6px; } .header-user { color: #ffffff; opacity: .8; font-size: .8rem; font-weight: 600; margin: 0 4px 0 8px; text-transform: capitalize; } .header-actions a.icon-only { color: #ffffff; } /* Icono desnudo: solo el glifo, sin recuadro ni fondo */ .icon-only { background: none; border: 0; padding: 6px; margin: 0; color: #ffffff; font-size: 1.15rem; line-height: 1; cursor: pointer; opacity: .65; transition: opacity .15s; display: inline-flex; } .icon-only:hover { opacity: 1; } .icon-only:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; } /* ---------- Navegación (Análisis / Admin) ---------- */ .header-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .menu-toggle { display: none; } /* hamburguesa: solo móvil */ .main-nav { display: flex; align-items: center; margin-left: 10px; } .nav-drawer-head { display: none; } /* encabezado: solo en drawer móvil */ .nav-list { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; } .nav-item { position: relative; } .nav-link { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer; color: #ffffff; opacity: .82; font: inherit; font-size: .9rem; font-weight: 600; padding: 8px 12px; border-radius: 8px; white-space: nowrap; text-decoration: none; transition: background .15s, opacity .15s; } .nav-tools { display: none; } /* acciones del drawer: solo móvil */ .nav-link:hover { opacity: 1; background: rgba(255, 255, 255, .10); } .nav-link .nav-caret { font-size: .72rem; transition: transform .18s; } .nav-item.open > .nav-link { opacity: 1; background: rgba(255, 255, 255, .14); } .nav-item.open > .nav-link .nav-caret { transform: rotate(180deg); } .nav-link:focus-visible { outline: 1px solid #fff; outline-offset: 2px; } .dropdown { list-style: none; margin: 0; padding: 6px; position: absolute; top: calc(100% + 6px); left: 0; min-width: 300px; max-width: 360px; background: #000066; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, .38); display: none; z-index: 1200; } .nav-item.open > .dropdown { display: block; animation: navPop .14s ease; } @keyframes navPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .dropdown-submenu { position: relative; } .submenu-trigger { justify-content: flex-start; } .submenu-caret { margin-left: auto; font-size: .72rem; transition: transform .18s; } .dropdown-submenu.open > .submenu-trigger { background: rgba(255, 255, 255, .14); color: #fff; } .dropdown-submenu.open > .submenu-trigger .submenu-caret { transform: rotate(90deg); } .submenu-list { top: -6px; left: calc(100% + 8px); min-width: 340px; } .dropdown-submenu.open > .submenu-list { display: block; animation: navPop .14s ease; } .dropdown-link { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: #eef0ff; font: inherit; font-size: .86rem; padding: 9px 11px; border-radius: 8px; white-space: normal; line-height: 1.25; text-decoration: none; transition: background .12s, color .12s; } .dropdown-link i { font-size: 1rem; opacity: .85; width: 1.15em; text-align: center; } .dropdown-link:hover { background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; } .dropdown-link:focus-visible { outline: 1px solid #fff; outline-offset: -2px; } .dropdown-link.report-pending { opacity: .5; cursor: default; pointer-events: none; } .report-id-badge { margin-left: auto; font-size: .7rem; opacity: .5; font-weight: 600; letter-spacing: .03em; flex-shrink: 0; } .nav-backdrop { position: fixed; inset: 0; background: rgba(5, 3, 25, .5); z-index: 1100; } /* Con el drawer abierto, los controles del mapa no deben asomarse sobre el menú */ body.nav-open .leaflet-control-container { display: none; } /* Aviso flotante (módulos admin en construcción) */ .app-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--brand-navy); color: #fff; border: 1px solid rgba(255, 255, 255, .18); padding: 12px 18px; border-radius: 10px; font-size: .88rem; font-weight: 500; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; max-width: 90vw; transition: opacity .2s, transform .2s; z-index: 2000; } .app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- Body ---------- */ .app-body { flex: 1; display: flex; min-height: 0; } #map { flex: 1; height: 100%; background: var(--map-bg); } .leaflet-container { background: var(--map-bg); font-family: var(--font); } .app-side { width: var(--side-w); overflow-y: auto; background: var(--bg); border-left: 1px solid var(--border); padding: var(--gap); display: flex; flex-direction: column; gap: var(--gap); } /* ---------- Paneles ---------- */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .label { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); margin-bottom: 8px; } .panel-title-lg { font-size: 1rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; } .side-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .side-top-row .label { margin-bottom: 0; } .btn-reset-side { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: .3rem; font-size: .72rem; padding: .2rem .55rem; transition: color .15s, border-color .15s, background .15s; } .btn-reset-side:hover { border-color: var(--brand-navy); color: var(--brand-navy); background: var(--surface-2); } /* ---------- Campos ---------- */ .field { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: .82rem; font-family: inherit; outline: none; transition: border-color .15s; } .field:focus { border-color: var(--accent); } .field:disabled { opacity: .45; cursor: not-allowed; } select.field { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 26px; } /* ---------- Buscador ---------- */ .search-wrap { position: relative; margin-bottom: 8px; } .search-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .9rem; pointer-events: none; } .search-input { padding-left: 30px; } .selects { display: flex; flex-direction: column; gap: 6px; } .results { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; width: 100%; top: calc(100% + 2px); left: 0; z-index: 1500; max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow); } .results li { padding: 7px 9px; border-radius: 6px; font-size: .8rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .results li:hover, .results li.activo { background: var(--surface-2); } .res-ctx { color: var(--text-muted); font-size: .68rem; margin-left: 6px; } .nivel-badge { font-size: .56rem; text-transform: uppercase; letter-spacing: .08em; padding: 2px 6px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text-muted); flex: 0 0 auto; } /* ---------- Selector de metrica (segmented) ---------- */ .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; margin-bottom: 8px; } .seg-btn { background: none; border: 0; color: var(--text-muted); font-family: inherit; font-size: .76rem; font-weight: 600; padding: 6px 4px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; } .seg-btn:hover { color: var(--text); } .seg-btn.active { background: var(--accent); color: var(--on-accent); } /* ---------- Flujo (cruce padron/residencia) ---------- */ .flujo { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .flujo-line { display: flex; flex-direction: column; gap: 4px; } .flujo-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } .flujo-items { display: flex; flex-wrap: wrap; gap: 4px; } .flujo-it { font-size: .72rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; font-variant-numeric: tabular-nums; } /* ---------- Breadcrumb ---------- */ .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0 2px; font-size: .76rem; } .crumbs li { color: var(--text-muted); } .crumbs li.active { color: var(--text); font-weight: 600; } .crumbs li:not(:first-child)::before { content: "/"; margin-right: 6px; color: var(--border-strong); } .crumbs a { color: var(--text-muted); text-decoration: none; cursor: pointer; } .crumbs a:hover { color: var(--text); } /* ---------- Metric ---------- */ .metric { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 4px; } .metric-num { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; } .metric-unit { font-size: .72rem; color: var(--text-muted); } .detalle-pct { font-size: .82rem; color: var(--text-muted); margin: 0 0 6px; } .detalle-pct strong { color: var(--accent); font-weight: 700; } /* ---------- Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .stat { text-align: center; background: var(--surface-2); border-radius: 8px; padding: 8px 4px; } .stat-num { font-weight: 700; font-size: .92rem; } .stat-lbl { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-top: 2px; } /* ---------- Ranking ---------- */ .ranking { list-style: none; counter-reset: r; padding: 0; margin: 0; } .ranking li { counter-increment: r; display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .82rem; cursor: pointer; } .ranking li:last-child { border-bottom: 0; } .ranking li::before { content: counter(r); background: var(--accent); color: var(--on-accent); width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; flex: 0 0 auto; } .ranking li .rk-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ranking li .rk-meta { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; } .ranking li .rk-val { font-weight: 600; font-variant-numeric: tabular-nums; } .ranking li .rk-pct { font-size: .72rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; } .ranking li:hover .rk-name { text-decoration: underline; } /* ---------- Leyenda ---------- */ .legend { display: flex; flex-direction: column; gap: 3px; } .legend .row-leg { display: flex; align-items: center; font-size: .72rem; color: var(--text-muted); } .legend .swatch { width: 26px; height: 12px; margin-right: 8px; border-radius: 2px; border: 1px solid var(--border); flex: 0 0 auto; } /* ---------- Tooltip del mapa ---------- */ .cr-tooltip-wrap, .leaflet-tooltip.cr-tooltip-wrap { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 7px; padding: 6px 9px; font-size: .76rem; box-shadow: var(--shadow); font-family: var(--font); } .cr-tooltip strong { display: block; font-size: .82rem; font-weight: 700; } .leaflet-tooltip.cr-tooltip-wrap::before { display: none; } /* Controles Leaflet en monocromo */ .leaflet-bar a { background: var(--surface); color: var(--text); border-color: var(--border) !important; } .leaflet-bar a:hover { background: var(--surface-2); } .leaflet-control-attribution { background: var(--surface) !important; color: var(--text-muted) !important; } .leaflet-control-attribution a { color: var(--text-muted) !important; } .mini-map-control { width: 202px; min-height: 160px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; background: rgba(255, 255, 255, .94); color: #18181b; border: 1px solid rgba(20, 20, 24, .16); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: 7px; cursor: pointer; font-family: var(--font); text-align: left; } .mini-map-control:hover { border-color: rgba(20, 20, 24, .34); } .mini-map-control:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; } .mini-map-control svg { display: block; width: 100%; height: 136px; background: #f4f4f5; border-radius: 5px; } .mini-map-base { fill: #ffffff; stroke: #9ca3af; stroke-width: .8; } .mini-map-active { fill: rgba(21, 8, 87, .72); stroke: #ff3b30; stroke-width: 2.2; } .mini-map-control span { display: block; font-size: .68rem; font-weight: 700; line-height: 1.2; color: #3f3f46; } /* ---------- Footer ---------- */ .app-footer { height: var(--footer-h); display: flex; align-items: center; justify-content: center; font-size: .68rem; color: var(--text-muted); background: var(--surface); border-top: 1px solid var(--border); } /* ---------- Boton ancho (Mostrar resultados) ---------- */ .btn-wide { margin-top: 12px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 8px; padding: 9px 12px; font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: opacity .15s; } .btn-wide:hover { opacity: .88; } .btn-wide i { font-size: .95rem; } /* ---------- Modal padron (DataTable) ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 2500; } .modal-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); width: min(1100px, 96vw); height: min(840px, 92vh); display: flex; flex-direction: column; overflow: hidden; } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); } .modal-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 2px; } .modal-head .icon-only { color: var(--text); } .modal-tools { display: flex; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); } .modal-search { margin: 0; flex: 1; } .page-size { width: auto; flex: 0 0 auto; } .btn-export { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 8px; padding: 8px 14px; font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: opacity .15s; white-space: nowrap; } .btn-export:hover { opacity: .88; } .btn-export i { font-size: .95rem; } .table-wrap { flex: 1; overflow: auto; } .dt { width: 100%; border-collapse: collapse; font-size: .8rem; } .dt thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-muted); text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 9px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } .dt tbody td { padding: 8px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } .dt tbody tr:hover td { background: var(--surface-2); } .dt .mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* Bitácora: etiquetas de tipo de evento */ .bita-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .bita-login { background: rgba(34, 160, 90, .14); color: #1f8f54; border-color: rgba(34, 160, 90, .3); } .bita-logout { background: rgba(120, 120, 140, .14); color: var(--text-muted); } .bita-login_fallido { background: rgba(200, 50, 50, .14); color: #c0392b; border-color: rgba(200, 50, 50, .3); } .bita-padron_export { background: rgba(60, 110, 220, .14); color: #2f63c8; border-color: rgba(60, 110, 220, .3); } .bita-empty { text-align: center; padding: 18px; color: var(--text-muted); font-size: .85rem; } .modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); } .pager { display: flex; align-items: center; gap: 6px; } .pg-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; min-width: 30px; height: 30px; padding: 0 8px; cursor: pointer; font-size: .85rem; font-family: inherit; } .pg-btn:hover:not(:disabled) { border-color: var(--border-strong); } .pg-btn:disabled { opacity: .4; cursor: not-allowed; } /* Solo visible en mobile */ .btn-filters-mob { display: none; } .side-handle { display: none; } .filters-backdrop { display: none; } /* ---------- Login ---------- */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); } .login-card { width: min(380px, 100%); background: var(--brand-navy); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(21, 8, 87, .45); padding: 28px 26px; color: #ffffff; } .login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 4px; text-align: center; } .login-brand .brand-logo { width: 84px; height: 84px; } .login-brand .brand-title { color: #ffffff; font-size: 1.2rem; font-weight: 700; } .login-sub { margin: 0 0 20px; color: rgba(255, 255, 255, .65); text-align: center; } .login-form { display: flex; flex-direction: column; gap: 14px; } .login-label { display: flex; flex-direction: column; gap: 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .7); font-weight: 600; } .login-card .field { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #ffffff; } .login-card .field:focus { border-color: rgba(255, 255, 255, .55); } .login-card .btn-wide { margin-top: 4px; background: #ffffff; color: var(--brand-navy); } .login-error { display: flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; padding: 9px 11px; font-size: .8rem; color: #ffffff; margin-bottom: 16px; } /* ---------- Loader ---------- */ .loader-overlay { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 2000; transition: opacity .3s; } .loader-overlay.hidden { opacity: 0; pointer-events: none; } .spinner { width: 26px; height: 26px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } .loader-txt { font-size: .76rem; color: var(--text-muted); } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Responsive ---------- */ @media (max-width: 820px) { html, body { background: var(--brand-navy); } /* Safari iOS lee html para el status bar */ .app-body { flex-direction: column; } .app-side { width: 100%; height: 46%; border-left: 0; border-top: 1px solid var(--border); } #map { height: 54%; } /* Header móvil: hamburguesa grande a la izquierda, logo centrado */ /* z-index sobre el backdrop (1100) para que el drawer no quede tapado */ .app-header { position: relative; z-index: 1200; } .menu-toggle { display: inline-flex; opacity: .95; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; padding: 6px; z-index: 2; } .header-left { width: 100%; justify-content: center; } .brand { margin: 0; } .header-actions { display: none; } /* tema/reset/logout se mueven al drawer */ .main-nav { position: fixed; top: 0; left: 0; bottom: 0; width: min(82vw, 320px); margin: 0; background: var(--brand-navy); border-right: 1px solid rgba(255, 255, 255, .12); box-shadow: 6px 0 30px rgba(0, 0, 0, .42); flex-direction: column; align-items: stretch; transform: translateX(-100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1); z-index: 1300; overflow-y: auto; overscroll-behavior: contain; } .main-nav.open { transform: translateX(0); } .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); position: sticky; top: 0; background: var(--brand-navy); z-index: 1; } .nav-drawer-title { color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .02em; } .nav-list { flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; } .nav-item { position: static; } .nav-link { width: 100%; justify-content: flex-start; font-size: .98rem; padding: 13px 14px; } .nav-link .nav-caret { margin-left: auto; } .dropdown { position: static; min-width: 0; max-width: none; background: rgba(255, 255, 255, .05); border: 0; box-shadow: none; border-radius: 8px; margin: 2px 6px 6px; padding: 4px; animation: none; } .dropdown-link { font-size: .95rem; padding: 12px 12px; } .dropdown-submenu { position: static; } .submenu-list { position: static; min-width: 0; margin: 0 0 4px 26px; background: rgba(255, 255, 255, .05); } .dropdown-submenu.open > .submenu-list { animation: none; } /* Acciones movidas al drawer: tema, reiniciar, cerrar sesión */ .nav-tools { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding: 10px; border-top: 1px solid rgba(255, 255, 255, .12); } .nav-tools-lbl { color: rgba(255, 255, 255, .7); font-size: .8rem; padding: 6px 14px 8px; } .nav-tools-lbl strong { color: #fff; text-transform: capitalize; } .nav-tools .nav-link { width: 100%; justify-content: flex-start; font-size: .98rem; padding: 13px 14px; } .nav-link-logout { color: #ffd5d5; } .nav-link-logout:hover { background: rgba(255, 120, 120, .15); } /* Login responsive: fondo del card llena toda la pantalla */ .login-body { background: var(--brand-navy); height: 100dvh; min-height: unset; align-items: center; padding: 24px; overflow: hidden; } .login-card { width: 100%; background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; } /* Evita el zoom automático de iOS en inputs pequeños */ .login-card .field { font-size: 16px; } /* ---- Panel de filtros (bottom sheet) ---- */ .btn-filters-mob { display: inline-flex; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; } #map { flex: 1; height: 100%; } .app-side { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 76dvh; border-left: 0; border-top: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, .28); transform: translateY(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); z-index: 1050; padding-top: 0; } .app-side.open { transform: translateY(0); } .side-handle { display: flex; justify-content: center; align-items: center; padding: 12px 0 10px; cursor: pointer; position: sticky; top: 0; background: var(--bg); border-radius: 16px 16px 0 0; z-index: 1; flex-shrink: 0; } .side-handle-bar { width: 36px; height: 4px; background: var(--border-strong); border-radius: 2px; } .filters-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 1040; } } /* ================================================================ Reporte JRV — Inscritos por Junta Receptora de Votos ================================================================ */ .reporte-page { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; background: var(--bg); } .rp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .rp-titulo { font-size: 1.25rem; font-weight: 700; color: var(--text); margin: 0 0 .25rem; } .rp-sub { font-size: .8125rem; margin: 0; } /* Tarjetas de estadísticas */ .rp-stats { display: flex; gap: .75rem; flex-wrap: wrap; } .rp-stat-card { flex: 1 1 120px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .875rem 1rem; text-align: center; } .rp-stat-num { font-size: 1.4rem; font-weight: 700; color: var(--accent); line-height: 1.2; margin-bottom: .2rem; } .rp-stat-lbl { font-size: .75rem; color: var(--text-muted); } /* Filtros */ .rp-filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; } .rp-filtros .field { flex: 1 1 160px; } .rp-order-wrap { display: flex; gap: .25rem; } .rp-order-wrap .seg-btn { padding: .35rem .75rem; font-size: .8rem; } /* Tabla */ .rp-tabla-wrap { flex: 1; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); } .rp-tabla-wrap .dt { width: 100%; border-collapse: collapse; font-size: .875rem; } .rp-tabla-wrap .dt th, .rp-tabla-wrap .dt td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--border); } .rp-tabla-wrap .dt thead th { background: var(--panel-alt, var(--border)); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); position: sticky; top: 0; z-index: 1; } .rp-tabla-wrap .dt tbody tr:hover { background: var(--hover); } .col-num { text-align: right !important; } .col-bar { width: 120px; } .rk-pos { color: var(--text-muted); width: 2.5rem; } .jrv-bar { height: 8px; background: var(--accent); border-radius: 4px; min-width: 2px; opacity: .7; transition: width .2s; } .part-high { background: #22c55e; opacity: .8; } .part-mid { background: #f59e0b; opacity: .8; } .part-low { background: #ef4444; opacity: .8; } .sort-link { color: var(--text); text-decoration: none; } .sort-link.active { color: var(--accent); } .sort-link:hover { color: var(--accent); } /* Pie de paginación */ .rp-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .5rem 0; } @media (max-width: 640px) { .reporte-page { padding: 1rem .75rem; } .rp-stat-card { flex: 1 1 calc(50% - .75rem); } .rp-filtros .field { flex: 1 1 100%; } .col-bar { display: none; } } /* ---- Análisis Estratégico JRV ---- */ .rp-alerta { display: flex; gap: .75rem; align-items: flex-start; background: color-mix(in srgb, #f59e0b 12%, var(--bg)); border: 1px solid #f59e0b; border-radius: var(--radius); padding: .875rem 1rem; font-size: .875rem; color: var(--text); line-height: 1.5; } .rp-alerta .bi { color: #d97706; font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; } .rp-alerta strong { color: #92400e; } [data-theme="dark"] .rp-alerta strong { color: #fbbf24; } .rp-stat-nd { opacity: .55; } .rp-nd { color: var(--text-muted) !important; font-size: 1rem !important; } /* ---- Loading states for reports ---- */ @keyframes stat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .rp-stat-num.stat-loading { animation: stat-pulse 1.1s ease-in-out infinite; color: var(--text-muted) !important; min-width: 4rem; display: inline-block; } .tbl-spinner-row td { padding: 2rem !important; text-align: center !important; color: var(--text-muted); font-size: .85rem; } .tbl-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: .5rem; } .btn-export { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; font-size: .8125rem; font-weight: 500; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s; } .btn-export:hover { background: var(--hover); border-color: var(--accent); } /* Leyenda de clasificación */ .rp-leyenda { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: .8125rem; color: var(--text-muted); padding: .25rem 0; } .leyenda-item { display: flex; align-items: center; gap: .35rem; } .leyenda-nd { font-style: italic; } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .dot-alta { background: #16a34a; } .dot-media { background: #d97706; } .dot-baja { background: #dc2626; } /* Badge de clasificación */ .badge-clasif { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; } .badge-alta { background: #dcfce7; color: #15803d; } .badge-media { background: #fef3c7; color: #92400e; } .badge-baja { background: #fee2e2; color: #b91c1c; } [data-theme="dark"] .badge-alta { background: #14532d; color: #86efac; } [data-theme="dark"] .badge-media { background: #451a03; color: #fcd34d; } [data-theme="dark"] .badge-baja { background: #450a0a; color: #fca5a5; } /* Barra de participación con color semáforo */ .part-bar-wrap { display: flex; align-items: center; gap: .4rem; min-width: 80px; } .part-bar { height: 8px; border-radius: 4px; min-width: 2px; flex: 1; transition: width .2s; } .part-bar-alta { background: #16a34a; opacity: .8; } .part-bar-media { background: #d97706; opacity: .8; } .part-bar-baja { background: #dc2626; opacity: .8; } .part-bar-nd { background: var(--border); } /* Celdas N/D en tabla */ .td-nd { color: var(--text-muted); font-size: .8rem; text-align: right; } /* ── Reportes en menú: estado activo, pendiente y trigger con activo ────── */ .dropdown-link.report-active { background: rgba(255,238,0,.15); color: var(--brand-yellow); font-weight: 600; } .dropdown-link.report-active .report-id-badge { opacity: .9; } .submenu-trigger.submenu-trigger-active { background: rgba(255,255,255,.10); color: #fff; } /* ── Página "Próximamente" ───────────────────────────────────────────────── */ .coming-soon-wrap { position: fixed; inset: 0; top: 56px; /* debajo del app-header */ z-index: 1001; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--bg); } .coming-soon-card { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 520px; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 3rem 2.5rem; text-align: center; } .coming-soon-icon { font-size: 3.5rem; color: var(--primary); opacity: .5; line-height: 1; } .coming-soon-title { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 0; } .coming-soon-desc { font-size: .95rem; color: var(--text-muted); line-height: 1.6; margin: 0; } .coming-soon-requires { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; text-align: left; } .coming-soon-requires-lbl { font-size: .8rem; font-weight: 600; color: var(--text-muted); margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .04em; } .coming-soon-requires ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .3rem; } .coming-soon-requires li { font-size: .875rem; color: var(--text-secondary, var(--text)); line-height: 1.4; } .btn-back-report { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; padding: .55rem 1.25rem; background: var(--primary); color: #fff; border-radius: 8px; font-size: .9rem; font-weight: 600; text-decoration: none; transition: opacity .15s; } .btn-back-report:hover { opacity: .88; } .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 99px; font-size: .8rem; font-weight: 600; } .badge-warning { background: rgba(217,119,6,.15); color: #b45309; } .badge-muted { background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); } /* ── Segmentación: sección de gráficas ─────────────────────────────────────── */ .seg-charts-section { display: grid; grid-template-columns: 1fr 1.6fr; gap: .75rem; margin-top: .75rem; } .seg-chart-card { background: var(--panel, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; } .seg-chart-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .seg-chart-scope-badge { font-size: .75rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: .2rem .65rem; color: var(--text-muted); } .seg-chart-badge-pending { font-size: .72rem; font-weight: 600; background: rgba(217,119,6,.12); color: #b45309; border-radius: 99px; padding: .2rem .65rem; display: inline-flex; align-items: center; gap: .3rem; } /* Dona */ .seg-chart-body { display: flex; align-items: center; gap: 1.25rem; } .seg-donut-wrap { flex-shrink: 0; width: 140px; height: 140px; } .seg-donut-wrap canvas { width: 100% !important; height: 100% !important; } .seg-chart-legend { flex: 1; display: flex; flex-direction: column; gap: .45rem; } .seg-legend-row { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: .4rem; font-size: .82rem; } .seg-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .seg-legend-val { font-weight: 700; font-size: .85rem; text-align: right; } .seg-legend-pct { font-size: .78rem; min-width: 40px; text-align: right; } .seg-legend-row-nd { opacity: .7; } .seg-legend-note { font-size: .7rem; margin-top: .25rem; display: flex; align-items: center; gap: .3rem; line-height: 1.3; } /* Barras de edad */ .seg-edad-wrap { position: relative; flex: 1; } .seg-edad-bars { display: flex; flex-direction: column; gap: .3rem; } .seg-edad-row { display: grid; grid-template-columns: 120px 1fr 36px; align-items: center; gap: .5rem; font-size: .78rem; } .seg-edad-lbl { color: var(--text-muted); white-space: nowrap; } .seg-edad-bar-outer { background: var(--surface-2); border-radius: 3px; height: 14px; overflow: hidden; } .seg-edad-bar { height: 100%; border-radius: 3px; background: var(--border-strong); opacity: .45; } .seg-edad-nd { font-size: .72rem; color: var(--text-muted); text-align: right; } .seg-edad-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; font-size: .82rem; color: var(--text-muted); background: rgba(var(--bg-rgb, 255,255,255), .55); backdrop-filter: blur(2px); border-radius: 6px; } [data-theme="dark"] .seg-edad-overlay { background: rgba(11,11,12,.55); } .seg-edad-overlay i { font-size: 1.4rem; opacity: .5; } .seg-edad-overlay code { background: var(--surface-2); border-radius: 4px; padding: .1rem .35rem; font-size: .75rem; } .seg-edad-kpis { display: flex; gap: 1rem; padding-top: .5rem; border-top: 1px solid var(--border); } .seg-edad-kpi { flex: 1; text-align: center; } .seg-edad-kpi-lbl { font-size: .72rem; color: var(--text-muted); margin-bottom: .2rem; } .seg-edad-kpi-val { font-size: 1.3rem; font-weight: 700; color: var(--accent); } @media (max-width: 680px) { .seg-charts-section { grid-template-columns: 1fr; } .seg-edad-row { grid-template-columns: 90px 1fr 32px; } } /* ── Juntas: panel de rango ─────────────────────────────────────────────────── */ .juntas-range-panel { background: var(--panel, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); padding: .875rem 1.25rem; margin-top: .75rem; display: flex; flex-direction: column; gap: .6rem; } .juntas-range-row { display: flex; align-items: center; gap: .75rem; } .juntas-num-input { width: 72px !important; flex-shrink: 0; text-align: center; font-weight: 600; font-size: .9rem; } .juntas-track-wrap { position: relative; flex: 1; height: 36px; display: flex; align-items: center; } .juntas-track-wrap::before { content: ''; position: absolute; left: 0; right: 0; height: 4px; background: var(--border-strong); border-radius: 2px; pointer-events: none; } .juntas-track-fill { position: absolute; height: 4px; background: var(--brand-navy); border-radius: 2px; pointer-events: none; } [data-theme="dark"] .juntas-track-fill { background: #6366f1; } .juntas-slider { position: absolute; width: 100%; height: 4px; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; outline: none; } .juntas-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-navy); border: 2px solid var(--bg); cursor: pointer; pointer-events: all; box-shadow: 0 1px 4px rgba(0,0,0,.2); } [data-theme="dark"] .juntas-slider::-webkit-slider-thumb { background: #6366f1; } .juntas-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-navy); border: 2px solid var(--bg); cursor: pointer; pointer-events: all; } .juntas-slider-min { z-index: 3; } /* ═══════════════════════════════════════════════════════════════════════════ TSE-style two-panel report layout Usado por: Segmentación, Distritos Electorales, Juntas ═══════════════════════════════════════════════════════════════════════════ */ .tse-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; flex-shrink: 0; } .tse-report-title { font-size: .95rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .1rem; text-transform: uppercase; color: var(--text); } .tse-report-sub { font-size: .88rem; font-weight: 700; color: #1e40af; margin: 0; } [data-theme="dark"] .tse-report-sub { color: #60a5fa; } .tse-report-actions { display: flex; gap: .45rem; flex-shrink: 0; } .tse-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; font-size: .78rem; font-weight: 600; cursor: pointer; color: var(--text); transition: background .15s; white-space: nowrap; } .tse-btn:hover { background: var(--surface-3, var(--border)); } /* ── Two-panel wrapper ───────────────────────────────────────── */ .tse-bicolumn { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; flex: 1; min-height: 480px; } /* ── Left panel ───────────────────────────────────────────────── */ .tse-left-panel { display: flex; flex-direction: column; border-right: 1px solid var(--border); flex-shrink: 0; background: var(--surface); width: 380px; overflow: hidden; } .tse-filter-cols { display: flex; flex: 1; overflow: hidden; min-height: 0; } .tse-filter-col { display: flex; flex-direction: column; border-right: 1px solid var(--border); overflow: hidden; flex: 1; min-width: 90px; } .tse-filter-col:last-child { border-right: none; } .tse-filter-col-head { font-size: .67rem; font-weight: 700; background: var(--surface-2); border-bottom: 1px solid var(--border); padding: .35rem .55rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); flex-shrink: 0; } .tse-filter-list { flex: 1; overflow-y: auto; list-style: none; padding: 0; margin: 0; } .tse-filter-item { display: flex; align-items: center; gap: .28rem; padding: .3rem .5rem; font-size: .73rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); transition: background .1s; line-height: 1.3; } .tse-filter-item:hover { background: var(--surface-2); } .tse-filter-item.tse-sel { background: #1e293b; color: #fff; font-weight: 600; } [data-theme="dark"] .tse-filter-item.tse-sel { background: #1d4ed8; } .tse-chk { width: 10px; height: 10px; border: 1.5px solid var(--border-strong, #94a3b8); border-radius: 2px; flex-shrink: 0; background: transparent; position: relative; } .tse-filter-item.tse-sel .tse-chk { background: #fff; border-color: #fff; } .tse-filter-item.tse-sel .tse-chk::after { content: '✓'; position: absolute; top: -3px; left: 0; font-size: 9px; color: #1e293b; font-weight: 900; } .tse-filter-item-empty { display: block; color: var(--text-muted); font-style: italic; cursor: default; font-size: .71rem; padding: .5rem .55rem; } /* Left panel KPI grid (distEl, juntas) */ .tse-left-kpis { border-top: 1px solid var(--border); background: var(--surface-2); padding: .65rem .75rem; flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .75rem; } .tse-left-kpi { display: flex; flex-direction: column; gap: .05rem; } .tse-left-kpi-lbl { font-size: .65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .tse-left-kpi-val { font-size: 1.05rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; } /* Left panel slider (juntas) */ .tse-slider-section { padding: .6rem .7rem; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; } .tse-slider-label { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .4rem; line-height: 1.3; } .tse-slider-row { display: flex; align-items: center; gap: .35rem; } .tse-slider-num { width: 48px; font-size: .72rem; padding: .18rem .3rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); text-align: center; flex-shrink: 0; } .tse-slider-track { flex: 1; position: relative; height: 20px; display: flex; align-items: center; } .tse-slider-track-bg { position: absolute; left: 0; right: 0; height: 4px; background: var(--border); border-radius: 2px; pointer-events: none; } .tse-slider-track-fill { position: absolute; height: 4px; background: var(--accent); border-radius: 2px; pointer-events: none; } .tse-slider-input { position: absolute; left: 0; right: 0; width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: transparent; pointer-events: none; cursor: pointer; margin: 0; } .tse-slider-input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,.25); pointer-events: all; cursor: grab; } .tse-slider-input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,.25); pointer-events: all; cursor: grab; } /* ── Right panel ───────────────────────────────────────────────── */ .tse-right-panel { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0; } .tse-right-toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; flex-shrink: 0; } .tse-tab-row { display: flex; gap: .3rem; flex-wrap: wrap; } .tse-tab-btn { padding: .28rem .6rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); font-size: .76rem; font-weight: 600; cursor: pointer; color: var(--text-muted); transition: all .15s; } .tse-tab-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .tse-tab-btn:hover:not(.active) { background: var(--border); color: var(--text); } /* ── Segmentación: gráficas del panel derecho ──────────────────── */ .sf-section-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text); margin-bottom: .45rem; } .sf-age-wrap { position: relative; flex-shrink: 0; } .sf-age-bars { display: flex; flex-direction: column; gap: .32rem; } .sf-edad-row { display: grid; grid-template-columns: 110px 1fr 38px; align-items: center; gap: .5rem; } .sf-edad-lbl { font-size: .71rem; color: var(--text-muted); white-space: nowrap; } .sf-edad-bar-outer { background: var(--surface-2); border-radius: 2px; height: 13px; overflow: hidden; } .sf-edad-bar { height: 100%; background: #c7d2fe; border-radius: 2px; } [data-theme="dark"] .sf-edad-bar { background: #3730a3; opacity: .6; } .sf-edad-nd { font-size: .67rem; color: var(--text-muted); text-align: right; font-style: italic; } .sf-age-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; font-size: .78rem; color: var(--text-muted); background: rgba(255,255,255,.6); backdrop-filter: blur(2px); border-radius: 4px; } [data-theme="dark"] .sf-age-overlay { background: rgba(15,15,18,.65); } .sf-age-overlay i { font-size: 1.1rem; opacity: .5; } .sf-age-overlay code { background: var(--surface-2); border-radius: 3px; padding: .1rem .3rem; font-size: .71rem; } /* Stat boxes row */ .sf-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; flex-shrink: 0; } .sf-stat-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: .6rem .8rem; text-align: center; } .sf-stat-lbl { font-size: .68rem; color: var(--text-muted); margin-bottom: .15rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .sf-stat-val { font-size: 1.35rem; font-weight: 800; color: var(--accent); } .sf-stat-val.nd { color: var(--text-muted); font-size: .95rem; font-style: italic; } /* Bottom row: pie + sex table */ .sf-bottom { display: flex; gap: 1.25rem; align-items: flex-start; flex-shrink: 0; flex-wrap: wrap; } .sf-pie-wrap { display: flex; flex-direction: column; align-items: center; gap: .45rem; flex-shrink: 0; } .sf-pie-canvas-wrap { width: 120px; height: 120px; } .sf-pie-legend { display: flex; flex-direction: column; gap: .2rem; font-size: .73rem; text-align: center; font-weight: 600; } .sf-pie-leg-h { color: #3b82f6; } .sf-pie-leg-m { color: #ec4899; } .sf-sex-table-wrap { flex: 1; min-width: 200px; } .sf-sex-table { width: 100%; border-collapse: collapse; font-size: .83rem; } .sf-sex-table th { text-align: left; padding: .32rem .5rem; background: var(--surface-2); border-bottom: 2px solid var(--border); font-size: .7rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .sf-sex-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--border); font-weight: 600; } .sex-lbl { font-size: .75rem; } .sf-sex-h { color: #3b82f6; } .sf-sex-m { color: #ec4899; } @media (max-width: 740px) { .tse-bicolumn { flex-direction: column; min-height: 0; } .tse-left-panel { width: auto !important; border-right: none; border-bottom: 1px solid var(--border); } .tse-filter-cols { max-height: 180px; } .tse-filter-list { max-height: 140px; } .sf-edad-row { grid-template-columns: 90px 1fr 32px; } } .juntas-slider-max { z-index: 4; } /* ═══════════════════════════════════════════════════════════════════════════ PANEL DE ADMINISTRACIÓN Estilos de la sección /admin — misma hoja, mismo header, mismo footer. ═══════════════════════════════════════════════════════════════════════════ */ /* Reiniciar vista solo aplica al mapa — ocultarlo en páginas admin */ body.page-admin #btnResetM { display: none; } .admin-main { max-width: 1100px; margin: 0 auto; padding: 2rem 2rem; width: 100%; box-sizing: border-box; } .admin-section { display: none; } .admin-section.active { display: block; } /* ── Page header ──────────────────────────────────────────────────────────── */ .admin-page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; } .admin-page-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 .2rem; display: flex; align-items: center; gap: .5rem; } .admin-page-sub { font-size: .78rem; color: var(--text-muted); margin: 0; } /* ── Stat cards ───────────────────────────────────────────────────────────── */ .admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .admin-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; } .admin-stat-lbl { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .4rem; } .admin-stat-val { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1; } .admin-stat-val.blue { color: #3b82f6; } .admin-stat-val.green { color: #22c55e; } .admin-stat-val.amber { color: #f59e0b; } .admin-stat-val.red { color: #ef4444; } /* ── Card ─────────────────────────────────────────────────────────────────── */ .admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .admin-card + .admin-card { margin-top: 1.25rem; } /* ── Toolbar ──────────────────────────────────────────────────────────────── */ .admin-toolbar { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; background: var(--surface); } .admin-search { padding: .45rem .75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: .85rem; outline: none; min-width: 200px; transition: border-color .15s; } .admin-search:focus { border-color: #3b82f6; } .admin-select { padding: .45rem .7rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: .85rem; outline: none; cursor: pointer; } /* ── Table ────────────────────────────────────────────────────────────────── */ .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: .855rem; } .admin-table th { background: color-mix(in srgb, var(--bg) 80%, transparent); padding: .6rem 1rem; text-align: left; font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; } .admin-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-table tbody tr:hover td { background: color-mix(in srgb, var(--border) 25%, transparent); } .admin-table .col-num { width: 48px; text-align: center; } .admin-table .col-actions { width: 1%; white-space: nowrap; } .admin-empty { text-align: center; color: var(--text-muted); padding: 2.5rem 1rem; font-size: .9rem; } /* ── Badges ───────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .6rem; border-radius: 20px; font-size: .72rem; font-weight: 600; white-space: nowrap; } .badge-green { background: color-mix(in srgb, #22c55e 12%, transparent); color: #16a34a; } [data-theme="dark"] .badge-green { background: color-mix(in srgb, #22c55e 18%, transparent); color: #4ade80; } .badge-gray { background: color-mix(in srgb, #94a3b8 12%, transparent); color: #64748b; } .badge-blue { background: color-mix(in srgb, #3b82f6 12%, transparent); color: #2563eb; } [data-theme="dark"] .badge-blue { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #60a5fa; } .badge-amber { background: color-mix(in srgb, #f59e0b 12%, transparent); color: #b45309; } [data-theme="dark"] .badge-amber { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #fbbf24; } .badge-red { background: color-mix(in srgb, #ef4444 12%, transparent); color: #dc2626; } [data-theme="dark"] .badge-red { background: color-mix(in srgb, #ef4444 18%, transparent); color: #f87171; } .badge-muted { background: color-mix(in srgb, #94a3b8 12%, transparent); color: #64748b; } [data-theme="dark"] .badge-muted { background: color-mix(in srgb, #94a3b8 15%, transparent); color: #94a3b8; } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; background: #1e293b; color: #fff; border: none; border-radius: 6px; font-size: .85rem; font-weight: 500; cursor: pointer; transition: background .15s; white-space: nowrap; } .btn-primary:hover { background: #334155; } [data-theme="dark"] .btn-primary { background: #3b82f6; } [data-theme="dark"] .btn-primary:hover { background: #2563eb; } .btn-secondary { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: .85rem; font-weight: 500; cursor: pointer; transition: background .15s; white-space: nowrap; } .btn-secondary:hover { background: color-mix(in srgb, var(--border) 40%, transparent); } /* ── Menú de tres puntos para acciones CRUD ─────────────────────────────── */ .crud-actions { position: relative; display: inline-block; } .crud-dots { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: .3rem .4rem; border-radius: 6px; font-size: 1rem; line-height: 1; transition: background .15s, color .15s; } .crud-dots:hover { background: var(--surface-2); color: var(--text); } .crud-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 148px; z-index: 200; padding: .3rem 0; list-style: none; margin: 0; } .crud-actions.open .crud-menu { display: block; } .crud-item { display: flex; align-items: center; gap: .5rem; width: 100%; background: none; border: none; color: var(--text); cursor: pointer; font-size: .82rem; padding: .45rem .9rem; text-align: left; transition: background .12s; } .crud-item:hover:not(:disabled) { background: var(--surface-2); } .crud-item:disabled { opacity: .4; cursor: not-allowed; } .crud-item--danger { color: #ef4444; } .crud-item--danger:hover:not(:disabled) { background: #fef2f2; } [data-theme="dark"] .crud-item--danger:hover:not(:disabled) { background: rgba(239,68,68,.12); } .crud-sep { height: 1px; background: var(--border); margin: .25rem 0; } /* ── Pagination ───────────────────────────────────────────────────────────── */ .admin-pag { display: flex; align-items: center; gap: .4rem; padding: .75rem 1rem; border-top: 1px solid var(--border); flex-wrap: wrap; } .admin-pag-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text-muted); font-size: .85rem; cursor: pointer; transition: all .15s; } .admin-pag-btn:hover:not(:disabled) { border-color: #3b82f6; color: #3b82f6; } .admin-pag-btn:disabled { opacity: .35; cursor: default; } .admin-pag-info { font-size: .8rem; color: var(--text-muted); padding: 0 .4rem; } .admin-pag-total { font-size: .78rem; color: var(--text-muted); margin-left: auto; } /* ── Modal ────────────────────────────────────────────────────────────────── */ .admin-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.48); z-index: 1010; display: flex; align-items: center; justify-content: center; padding: 1rem; } .admin-overlay.d-none { display: none; } .admin-modal { background: var(--surface-elevated); border: 1px solid var(--border-elevated); border-radius: 10px; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.45); } .admin-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-elevated); position: sticky; top: 0; background: var(--surface-elevated); z-index: 1; } .admin-modal-title { font-weight: 700; font-size: .95rem; color: var(--text); margin: 0; display: flex; align-items: center; gap: .45rem; } .admin-modal-close { background: none; border: none; font-size: 1rem; color: var(--text-muted); cursor: pointer; padding: .3rem; border-radius: 4px; display: flex; align-items: center; line-height: 1; } .admin-modal-close:hover { color: var(--text); background: color-mix(in srgb, var(--border) 50%, transparent); } .admin-modal-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .admin-modal-foot { padding: 1rem 1.25rem; border-top: 1px solid var(--border-elevated); display: flex; gap: .5rem; justify-content: flex-end; } /* ── Form fields ──────────────────────────────────────────────────────────── */ .form-group, .admin-field { display: flex; flex-direction: column; gap: .3rem; } .admin-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .form-label, .admin-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } .form-input, .admin-input, .admin-textarea, .admin-select-field { padding: .55rem .75rem; border: 1px solid var(--border-elevated); border-radius: 6px; background: var(--surface-elevated-2); color: var(--text); font-size: .875rem; outline: none; width: 100%; box-sizing: border-box; transition: border-color .15s; font-family: inherit; appearance: auto; } .form-input:focus, .admin-input:focus, .admin-textarea:focus, .admin-select-field:focus { border-color: var(--brand-navy); outline: 2px solid color-mix(in srgb, var(--brand-navy) 20%, transparent); outline-offset: 0; } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .admin-input:focus, [data-theme="dark"] .admin-textarea:focus, [data-theme="dark"] .admin-select-field:focus { border-color: #60a5fa; outline-color: rgba(96,165,250,.2); } .admin-input.is-error { border-color: #ef4444; } .admin-textarea { resize: vertical; min-height: 80px; } .admin-field-hint { font-size: .73rem; color: var(--text-muted); } .admin-field-error { font-size: .73rem; color: #ef4444; } /* ── Confirm dialog ───────────────────────────────────────────────────────── */ .admin-confirm { max-width: 380px; } .admin-confirm-body { padding: 1.25rem; font-size: .9rem; color: var(--text); line-height: 1.55; } /* ── Config section ───────────────────────────────────────────────────────── */ .admin-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .admin-info-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .admin-info-card-head { padding: .7rem 1rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 60%, transparent); display: flex; align-items: center; gap: .4rem; } .admin-info-rows { list-style: none; margin: 0; padding: 0; } .admin-info-row { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid var(--border); font-size: .84rem; gap: .75rem; } .admin-info-row:last-child { border-bottom: none; } .admin-info-key { color: var(--text-muted); flex-shrink: 0; } .admin-info-val { color: var(--text); font-weight: 500; text-align: right; word-break: break-all; } /* ── Pipeline list ────────────────────────────────────────────────────────── */ .pipe-list { list-style: none; margin: 0; padding: 0; } .pipe-item { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; border-bottom: 1px solid var(--border); font-size: .84rem; } .pipe-item:last-child { border-bottom: none; } .pipe-icon { font-size: 1rem; width: 1.1rem; text-align: center; flex-shrink: 0; } .pipe-name { flex: 1; color: var(--text); font-family: 'Courier New', monospace; font-size: .78rem; word-break: break-all; } .pipe-date { font-size: .72rem; color: var(--text-muted); white-space: nowrap; } /* ── Data source cards ────────────────────────────────────────────────────── */ .datasource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .datasource-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .6rem; } .datasource-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .datasource-name { font-weight: 600; font-size: .9rem; color: var(--text); } .datasource-table { font-size: .72rem; color: var(--text-muted); font-family: monospace; } .datasource-count { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1; } .datasource-note { font-size: .73rem; color: var(--text-muted); } /* ── Alert / feedback bar ─────────────────────────────────────────────────── */ .admin-alert { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 7px; font-size: .84rem; font-weight: 500; margin-bottom: 1rem; } .admin-alert-success { background: color-mix(in srgb, #22c55e 12%, transparent); color: #16a34a; border: 1px solid color-mix(in srgb, #22c55e 30%, transparent); } [data-theme="dark"] .admin-alert-success { color: #4ade80; border-color: color-mix(in srgb, #22c55e 25%, transparent); } .admin-alert-error { background: color-mix(in srgb, #ef4444 10%, transparent); color: #dc2626; border: 1px solid color-mix(in srgb, #ef4444 25%, transparent); } [data-theme="dark"] .admin-alert-error { color: #f87171; border-color: color-mix(in srgb, #ef4444 20%, transparent); } /* ── Reportes: sub-tabs ───────────────────────────────────────────────────── */ .rep-tabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; } .rep-tab { background: none; border: 1px solid transparent; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 500; padding: .35rem .85rem; transition: color .15s, background .15s, border-color .15s; } .rep-tab:hover { background: var(--surface); color: var(--text); } .rep-tab.active { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; } /* ── Admin responsive ─────────────────────────────────────────────────────── */ @media (max-width: 700px) { .admin-main { padding: 1rem; } .admin-field-row { grid-template-columns: 1fr; } .admin-stats { grid-template-columns: 1fr 1fr; } .admin-info-grid { grid-template-columns: 1fr; } .admin-page-head { flex-direction: column; align-items: flex-start; } .datasource-grid { grid-template-columns: 1fr; } .admin-modal { max-width: 100%; max-height: 85vh; margin: 0; border-radius: 12px 12px 0 0; } .admin-overlay { align-items: flex-end; padding: 0; } .admin-pag { justify-content: center; } .admin-pag-total { width: 100%; text-align: center; margin-left: 0; } .admin-toolbar { gap: .5rem; } .admin-toolbar .admin-search { flex: 1 1 100%; } .admin-toolbar .admin-select { flex: 1 1 calc(50% - .25rem); } .admin-toolbar .btn-primary, .admin-toolbar .btn-secondary { padding: .4rem .65rem; font-size: .8rem; } .admin-table .hide-mobile { display: none; } }