/* ══════════════════════════════════════════════════ wiopsim.css — Shared Styles Dark mode: data-theme="dark" on Light mode: data-theme="light" on ══════════════════════════════════════════════════ */ /* ── Color Scheme hint (native browser elements) ── */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* ── Light tokens (default) ── */ :root, [data-theme="light"] { --bg:#f3f3f1; --surface:rgba(255,255,255,.8); --glass-top:rgba(255,255,255,.85); --glass-blur:blur(14px); --sidebar:#0d0d0d; --sidebar-hover:rgba(255,255,255,.07); --sidebar-active:rgba(255,255,255,.13); --t1:#111110; --t2:#57574f; --t3:#9f9f97; --border:#e5e5e2; --border2:#cdcdc8; --shadow:0 1px 2px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.04); --shadow-md:0 4px 16px rgba(0,0,0,.08); --green:#15803d; --red:#b91c1c; --amber:#b45309; --blue:#1d4ed8; --r:12px; --rs:8px; --sb:224px; --rp:296px; --hh:60px; --f:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; --fm:'DM Mono',monospace; } /* ── Dark tokens ── */ [data-theme="dark"] { --bg:#0a0a09; --surface:rgba(20,20,19,.82); --glass-top:rgba(255,255,255,.06); --glass-blur:blur(14px); --sidebar:#000000; --sidebar-hover:rgba(255,255,255,.07); --sidebar-active:rgba(255,255,255,.14); --t1:#edede8; --t2:#7a7a72; --t3:#4a4a44; --border:#212120; --border2:#2e2e2c; --shadow:0 1px 2px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.25); --shadow-md:0 4px 16px rgba(0,0,0,.5); --green:#16a34a; --red:#dc2626; --amber:#d97706; --blue:#3b82f6; } /* ── Smooth theme transitions on ALL elements ── Applied AFTER initial load (via .theme-ready on ) This prevents the flash on page load while still animating toggles ── */ html.theme-ready *, html.theme-ready *::before, html.theme-ready *::after { transition: background-color .28s cubic-bezier(.4,0,.2,1), color .28s cubic-bezier(.4,0,.2,1), border-color .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1) !important; } /* ── View Transition: smooth crossfade on theme toggle ── */ @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation: 180ms ease-out wps-fade-out; } ::view-transition-new(root) { animation: 260ms ease-in wps-fade-in; } @keyframes wps-fade-out { to { opacity:0; } } @keyframes wps-fade-in { from { opacity:0; } } } /* ══════════════════════════════════════════════════ RESET ══════════════════════════════════════════════════ */ *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { height:100%; } body { font-family:var(--f); background:var(--bg); color:var(--t1); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; height:100%; overflow:hidden; } button { font-family:var(--f); cursor:pointer; border:none; background:none; color:inherit; } input,select,textarea { font-family:var(--f); } a { color:inherit; } /* ══════════════════════════════════════════════════ TSUNAMI BANNER ══════════════════════════════════════════════════ */ .tsn-bar { display:none; align-items:center; gap:12px; padding:10px 20px; background:#7f1d1d; color:#fff; flex-shrink:0; border-bottom:2px solid #dc2626; z-index:9999; animation:tsnIn .3s ease; } .tsn-bar.show { display:flex; } @keyframes tsnIn { from{transform:translateY(-40px);opacity:0} to{transform:translateY(0);opacity:1} } .tsn-icon { font-size:20px; flex-shrink:0; } .tsn-title { font-size:11.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; } .tsn-sub { font-size:10.5px; color:rgba(255,255,255,.75); margin-top:1px; } .tsn-src-tag { font-size:9.5px;font-weight:700;letter-spacing:.8px;background:rgba(255,255,255,.2);padding:2px 8px;border-radius:4px;font-family:var(--fm);white-space:nowrap;margin-left:auto; } .tsn-close { width:26px;height:26px;background:rgba(255,255,255,.2);border-radius:6px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:background .15s; } .tsn-close:hover { background:rgba(255,255,255,.3); } /* ══════════════════════════════════════════════════ SHELL ══════════════════════════════════════════════════ */ .app { display:flex; flex:1; overflow:hidden; min-height:0; } /* ══════════════════════════════════════════════════ SIDEBAR — z-index keeps it above Leaflet ══════════════════════════════════════════════════ */ .sb { width:var(--sb); flex-shrink:0; background:var(--sidebar); display:flex; flex-direction:column; height:100%; overflow:hidden; transition:width .22s cubic-bezier(.4,0,.2,1); will-change:width; position:relative; z-index:900; } .sb.col { width:60px; } .sb-logo { height:var(--hh); display:flex; align-items:center; gap:10px; padding:0 16px; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,.06); } .sb-logo-ico { width:28px; height:28px; flex-shrink:0; } .sb-logo-ico svg { stroke:#fff; fill:none; display:block; } .sb-logo-txt { overflow:hidden; white-space:nowrap; } .sb-name { font-size:16.5px; font-weight:800; letter-spacing:-.3px; color:#fff; line-height:1.15; } .sb-sub { font-size:7.5px; font-weight:500; color:rgba(255,255,255,.32); letter-spacing:2px; text-transform:uppercase; } .sb.col .sb-logo-txt { display:none; } .sb-nav { flex:1; padding:10px 8px; overflow-y:auto; overflow-x:hidden; } .sb-nav::-webkit-scrollbar { width:3px; } .sb-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; } .ni { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--rs); color:rgba(255,255,255,.46); font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap; overflow:hidden; transition:background .13s,color .13s; margin-bottom:1px; user-select:none; text-decoration:none; } .ni:hover { background:var(--sidebar-hover); color:rgba(255,255,255,.85); } .ni.on { background:var(--sidebar-active); color:#fff; } .ni svg { width:16.5px; height:16.5px; stroke:currentColor; fill:none; flex-shrink:0; stroke-width:1.75; } .ni-lbl { overflow:hidden; text-overflow:ellipsis; flex:1; } .ni-badge { background:#dc2626; color:#fff; font-size:8.5px; font-weight:800; padding:1px 5px; border-radius:10px; font-family:var(--fm); letter-spacing:.3px; } .sb.col .ni-lbl, .sb.col .ni-badge { display:none; } .sb-bot { padding:12px 8px; flex-shrink:0; border-top:1px solid rgba(255,255,255,.06); } .sb-rpt { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:var(--rs); padding:13px 11px; margin-bottom:12px; } .sb-rpt-t { font-size:11px; font-weight:800; color:#fff; letter-spacing:.3px; } .sb-rpt-s { font-size:10px; color:rgba(255,255,255,.32); margin:1px 0 9px; } .btn-rpt { width:100%; padding:8px; border-radius:6px; background:#fff; color:#111; font-size:12px; font-weight:700; letter-spacing:.3px; transition:background .13s; } .btn-rpt:hover { background:#eee; } .sb.col .sb-rpt,.sb.col .sb-spark,.sb.col .sb-soc { display:none; } .sb-spark { height:26px; margin-bottom:10px; opacity:.22; } .sb-soc { display:flex; gap:14px; padding-left:2px; } .sb-soc a { color:rgba(255,255,255,.28); font-size:10.5px; font-weight:700; transition:color .13s; text-decoration:none; } .sb-soc a:hover { color:#fff; } /* ══════════════════════════════════════════════════ MAIN + HEADER ══════════════════════════════════════════════════ */ .mw { flex:1; display:flex; flex-direction:column; min-width:0; height:100%; overflow:hidden; } .hdr { height:var(--hh); flex-shrink:0; display:flex; align-items:center; gap:14px; padding:0 18px 0 20px; background:var(--surface); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--border); box-shadow:inset 0 1px 0 var(--glass-top), 0 1px 0 var(--border); z-index:50; } .hdr-tog { width:34px;height:34px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0; } .hdr-tog:hover { background:var(--border); } .hdr-tog svg { width:15px;height:15px;stroke:var(--t1);fill:none;stroke-width:2; } .hdr-titles { flex:1; min-width:0; } .hdr-t { font-size:18px;font-weight:800;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2; } .hdr-s { font-size:12px; color:var(--t2); } .hdr-right { display:flex; align-items:center; gap:9px; flex-shrink:0; } .live-pill { display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:5px 11px;font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--t2);white-space:nowrap; } .pulse { width:6.5px;height:6.5px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pulse 2s infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(21,128,61,.4)}70%{box-shadow:0 0 0 7px rgba(21,128,61,0)}100%{box-shadow:0 0 0 0 rgba(21,128,61,0)} } .up-dot { width:6px;height:6px;border-radius:50%;background:var(--amber);animation:blink 1.2s ease-in-out infinite; } @keyframes blink { 0%,100%{opacity:1}50%{opacity:.2} } .upd-pill { display:none; } .upd-pill.show { display:flex; } .ts-txt { font-size:10.5px; color:var(--t3); font-family:var(--fm); white-space:nowrap; } .srch { display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:6px 11px; } .srch:focus-within { border-color:var(--border2); } .srch svg { width:13px;height:13px;stroke:var(--t3);fill:none;stroke-width:2;flex-shrink:0; } .srch input { border:none;background:transparent;outline:none;font-size:13px;color:var(--t1);width:170px;font-family:var(--f); } .srch input::placeholder { color:var(--t3); } .ico-btn { width:34px;height:34px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; } .ico-btn:hover { background:var(--border); } .ico-btn svg { width:15px;height:15px;stroke:var(--t1);fill:none;stroke-width:2; } /* Dark-btn active state */ .ico-btn.active { background:var(--t1); border-color:var(--t1); } .ico-btn.active svg { stroke:var(--bg); } /* ══════════════════════════════════════════════════ BODY / PAGE AREA ══════════════════════════════════════════════════ */ .body { flex:1; display:flex; overflow:hidden; min-height:0; } .pa { flex:1; overflow-y:auto; overflow-x:hidden; min-width:0; padding:18px; display:flex; flex-direction:column; gap:14px; } .pa::-webkit-scrollbar { width:5px; } .pa::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; } .pa.map-mode { padding:0; overflow:hidden; gap:0; } /* ══════════════════════════════════════════════════ MAP ══════════════════════════════════════════════════ */ .map-wrap { position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); background:var(--surface); flex:1; min-height:340px; max-height:calc(100vh - 330px); box-shadow:var(--shadow); } #map { width:100%; height:100%; min-height:340px; } #map2 { width:100%; height:100%; min-height:380px; } .mf-c { flex:1;position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);min-height:380px;box-shadow:var(--shadow); } .pa.map-mode .mf-c { border-radius:0;border-left:none;border-right:none;border-bottom:none;min-height:0; } .mo-tl { position:absolute;top:11px;left:11px;z-index:800;display:flex;flex-direction:column;gap:7px; } .mo-tr { position:absolute;top:11px;right:11px;z-index:800;display:flex;gap:7px; } .map-bdg { display:inline-flex;align-items:center;gap:6px;background:rgba(12,12,12,.82);color:#fff;border-radius:var(--rs);padding:5px 11px;font-size:11px;font-weight:700;letter-spacing:.5px;backdrop-filter:blur(8px); } .map-btn { background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.1);border-radius:var(--rs);padding:6px 13px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;color:#111;font-family:var(--f);backdrop-filter:blur(8px);box-shadow:0 1px 4px rgba(0,0,0,.1); } .map-btn:hover { background:#fff; } .map-btn svg { width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2; } [data-theme="dark"] .map-btn { background:rgba(28,28,26,.92);color:#eee;border-color:rgba(255,255,255,.1); } [data-theme="dark"] .map-btn:hover { background:rgba(45,45,43,.95); } .map-zc { position:absolute;bottom:18px;left:11px;z-index:800;display:flex;flex-direction:column;border-radius:var(--rs);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid rgba(0,0,0,.1); } .mz-btn { width:30px;height:30px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;font-weight:300;color:#333;border:none;backdrop-filter:blur(8px); } .mz-btn:hover { background:#fff; } .mz-btn:first-child { border-bottom:1px solid rgba(0,0,0,.1); } [data-theme="dark"] .mz-btn { background:rgba(28,28,26,.92);color:#eee; } .map-loc { position:absolute;bottom:56px;left:11px;z-index:800;width:30px;height:30px;border-radius:var(--rs);background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);backdrop-filter:blur(8px); } .map-loc svg { width:14px;height:14px;stroke:#333;fill:none;stroke-width:2; } [data-theme="dark"] .map-loc { background:rgba(28,28,26,.92); } [data-theme="dark"] .map-loc svg { stroke:#eee; } .map-ldr { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.85);z-index:900;backdrop-filter:blur(4px);flex-direction:column;gap:9px;font-size:12.5px;color:var(--t2);font-weight:500; } [data-theme="dark"] .map-ldr { background:rgba(10,10,9,.85); } .map-ldr.gone { display:none; } .spin { width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--t2);border-radius:50%;animation:sp .8s linear infinite; } @keyframes sp { to { transform:rotate(360deg) } } /* Leaflet overrides */ .leaflet-control-zoom { display:none!important; } .leaflet-container { isolation:isolate; } .leaflet-popup-content-wrapper { border-radius:var(--r)!important;box-shadow:var(--shadow-md)!important;border:1px solid var(--border)!important;font-family:var(--f)!important;padding:0!important; } [data-theme="dark"] .leaflet-popup-content-wrapper { background:var(--surface)!important;border-color:var(--border2)!important; } .leaflet-popup-content { margin:0!important; } .leaflet-popup-tip-container { display:none!important; } /* Popup */ .qpop { padding:14px 16px; min-width:195px; } .qpop-mag { font-size:34px;font-weight:900;letter-spacing:-1.5px;line-height:1;margin-bottom:1px; } .qpop-magtype { font-size:9.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px;font-family:var(--fm); } .qpop-pl { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);margin-bottom:8px; } .qpop-r { display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--t2);margin-bottom:3px; } .qpop-r svg { width:11px;height:11px;stroke:var(--t3);fill:none;stroke-width:2;flex-shrink:0; } .qpop-tags { display:flex;flex-wrap:wrap;gap:4px;margin-top:9px; } .qpop-tag { display:inline-flex;font-size:9.5px;font-weight:700;letter-spacing:.8px;background:var(--t1);color:var(--surface);padding:2px 7px;border-radius:4px;font-family:var(--fm); } .qpop-link { display:block;margin-top:8px;font-size:11px;font-weight:700;color:var(--blue);text-decoration:none; } .qpop-link:hover { text-decoration:underline; } /* Alert levels */ .alert-lv { display:inline-flex;align-items:center;padding:2px 7px;border-radius:5px;font-size:9.5px;font-weight:800;letter-spacing:.5px;font-family:var(--fm); } .alert-lv.green { background:#dcfce7;color:#15803d; } .alert-lv.yellow { background:#fef9c3;color:#b45309; } .alert-lv.orange { background:#ffedd5;color:#c2410c; } .alert-lv.red { background:#fee2e2;color:#b91c1c; } [data-theme="dark"] .alert-lv.green { background:rgba(21,128,61,.2);color:#4ade80; } [data-theme="dark"] .alert-lv.yellow { background:rgba(180,83,9,.2);color:#fbbf24; } [data-theme="dark"] .alert-lv.orange { background:rgba(194,65,12,.2);color:#fb923c; } [data-theme="dark"] .alert-lv.red { background:rgba(185,28,28,.2);color:#f87171; } .tsn-badge { display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:5px;font-size:9.5px;font-weight:800;letter-spacing:.5px;background:#fee2e2;color:#b91c1c;font-family:var(--fm); } [data-theme="dark"] .tsn-badge { background:rgba(185,28,28,.25);color:#f87171; } /* ══════════════════════════════════════════════════ DASHBOARD CARDS ══════════════════════════════════════════════════ */ .bc { display:grid;grid-template-columns:1fr 1fr 2fr;gap:12px;flex-shrink:0; } .card { background:var(--surface);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border);border-radius:var(--r);padding:17px;box-shadow:inset 0 1px 0 var(--glass-top),var(--shadow);min-width:0;overflow:hidden; } .c-ico { width:38px;height:38px;border-radius:9px;background:var(--t1);display:flex;align-items:center;justify-content:center;margin-bottom:11px;flex-shrink:0; } .c-ico svg { width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8; } [data-theme="dark"] .c-ico { background:#fff; } [data-theme="dark"] .c-ico svg { stroke:#000; } .c-lbl { font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px; } .c-val { font-size:34px;font-weight:900;letter-spacing:-1.5px;line-height:1;margin-bottom:2px; } .c-sub { font-size:11.5px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .c-trend { font-size:11px;font-weight:600;margin-top:3px; } .trend-up { color:var(--green); } .trend-dn { color:var(--red); } .spark-cv { height:26px;margin-top:9px;width:100%; } .ch-wrap { height:116px;margin-top:7px;position:relative; } .ch-lbl { font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.9px;margin-bottom:6px; } /* ══════════════════════════════════════════════════ RIGHT PANEL ══════════════════════════════════════════════════ */ .rp { width:var(--rp);flex-shrink:0;background:var(--bg);border-left:1px solid var(--border);overflow-y:auto;overflow-x:hidden;padding:14px;display:flex;flex-direction:column;gap:12px; } .rp::-webkit-scrollbar { width:4px; } .rp::-webkit-scrollbar-thumb { background:var(--border);border-radius:2px; } .rpc { background:var(--surface);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border);border-radius:var(--r);padding:15px;box-shadow:inset 0 1px 0 var(--glass-top),var(--shadow);overflow:hidden; } .rpc-hd { display:flex;align-items:center;justify-content:space-between;margin-bottom:13px; } .rpc-t { font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--t3); } .rpc-ico svg { width:15px;height:15px;stroke:var(--t3);fill:none;stroke-width:1.8; } .lq-mag { font-size:52px;font-weight:900;letter-spacing:-3px;line-height:1;margin-bottom:5px; } .lq-pl { font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:1px; } .lq-tm { font-size:10.5px;color:var(--t3);font-family:var(--fm); } .lq-det { margin:11px 0;display:flex;flex-direction:column;gap:6px; } .ld-r { display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2); } .ld-r svg { width:13px;height:13px;stroke:var(--t3);fill:none;stroke-width:1.8;flex-shrink:0; } .lq-extra { display:flex;flex-direction:column;gap:5px;margin:8px 0; } .btn-det { width:100%;padding:10px 14px;border-radius:var(--rs);background:var(--t1);color:var(--bg);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--f);letter-spacing:.3px;display:flex;align-items:center;justify-content:space-between;border:none; } .btn-det:hover { opacity:.85; } .rp-link { display:block;font-size:11px;font-weight:700;color:var(--blue);text-decoration:none;margin-top:3px; } .rp-link:hover { text-decoration:underline; } .ri { display:flex;align-items:center;gap:9px;padding:8.5px 0;border-bottom:1px solid var(--border);cursor:pointer; } .ri:last-child { border-bottom:none; } .ri:hover { opacity:.65; } .ri-mag { font-size:14.5px;font-weight:800;letter-spacing:-.3px;min-width:28px;font-family:var(--fm); } .ri-inf { flex:1;min-width:0; } .ri-pl { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .ri-tm { font-size:10px;color:var(--t3);font-family:var(--fm);margin-top:1px; } .ri-dp { font-size:10.5px;color:var(--t3);white-space:nowrap;text-align:right; } .see-all { font-size:11px;font-weight:600;color:var(--t3);cursor:pointer;border:none;background:none;font-family:var(--f); } .see-all:hover { color:var(--t1); } /* ══════════════════════════════════════════════════ TABLE / RECIENTES ══════════════════════════════════════════════════ */ .fbar { background:var(--surface);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;box-shadow:inset 0 1px 0 var(--glass-top),var(--shadow);flex-shrink:0; } .fb-lbl { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t3); } .chip { padding:5px 11px;border-radius:6px;border:1px solid var(--border);background:var(--bg);font-size:11.5px;font-weight:600;cursor:pointer;color:var(--t2);font-family:var(--f); } .chip:hover { border-color:var(--border2);color:var(--t1); } .chip.on { background:var(--t1);color:var(--bg);border-color:var(--t1); } .tbl-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);flex:1;display:flex;flex-direction:column; } .tbl-scr { overflow-y:auto;flex:1; } .tbl-scr::-webkit-scrollbar { width:5px; } .tbl-scr::-webkit-scrollbar-thumb { background:var(--border);border-radius:3px; } table { width:100%;border-collapse:collapse; } thead { position:sticky;top:0;z-index:10; } thead tr { background:var(--bg); } th { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap; } td { padding:9px 12px;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--t1); } tbody tr:last-child td { border-bottom:none; } tbody tr:hover td { background:var(--bg); } .mp { display:inline-flex;align-items:center;justify-content:center;width:38px;height:30px;border-radius:6px;font-size:12.5px;font-weight:800;font-family:var(--fm); } .mp-sm { background:#f0f0ee;color:#666; } .mp-md { background:#e2e2de;color:#333; } .mp-hi { background:#222;color:#fff; } .mp-vh { background:#000;color:#fff; } [data-theme="dark"] .mp-sm { background:#252522;color:#999; } [data-theme="dark"] .mp-md { background:#2e2e2b;color:#ccc; } .src-t { font-size:9.5px;font-weight:700;font-family:var(--fm);opacity:.5;letter-spacing:.6px; } .td-depth-lbl { font-size:9px;color:var(--t3); } /* ══════════════════════════════════════════════════ ALERTS ══════════════════════════════════════════════════ */ .alc { background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);flex:1;overflow:hidden;display:flex;flex-direction:column; } .al-hd { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-shrink:0; } .al-body { overflow-y:auto;flex:1; } .al-body::-webkit-scrollbar { width:4px; } .al-body::-webkit-scrollbar-thumb { background:var(--border);border-radius:2px; } .al-sec-hd { padding:8px 0 4px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--t3);border-bottom:1px solid var(--border);margin-bottom:4px; } .al-sec-hd.tsn-sec { color:#b91c1c; } [data-theme="dark"] .al-sec-hd.tsn-sec { color:#f87171; } .al-i { display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer; } .al-i:last-child { border-bottom:none; } .al-i:hover { opacity:.65; } .al-i.al-tsn-item { background:rgba(185,28,28,.04);border-radius:8px;padding:10px 8px;margin:2px 0;border:1px solid rgba(185,28,28,.15); } [data-theme="dark"] .al-i.al-tsn-item { background:rgba(185,28,28,.1);border-color:rgba(185,28,28,.3); } .al-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px; } .al-dot.hi { background:var(--red); } .al-dot.md { background:var(--amber); } .al-dot.lo { background:var(--green); } .al-mag { font-size:18px;font-weight:900;min-width:38px;letter-spacing:-.5px;font-family:var(--fm); } .al-inf { flex:1;min-width:0; } .al-pl { font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .al-tm { font-size:10.5px;color:var(--t3);font-family:var(--fm);margin-top:2px; } .al-badges { display:flex;gap:4px;flex-wrap:wrap;margin-top:4px; } .al-dp { font-size:10.5px;color:var(--t3);white-space:nowrap;text-align:right; } .al-dp-src { font-size:9px;color:var(--t3);margin-top:2px; } /* ══════════════════════════════════════════════════ STATS ══════════════════════════════════════════════════ */ .kpi-g { display:grid;grid-template-columns:repeat(3,1fr);gap:11px;flex-shrink:0; } .kpi { background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px;box-shadow:var(--shadow); } .kpi-n { font-size:28px;font-weight:900;letter-spacing:-.8px;line-height:1;margin-bottom:2px; } .kpi-l { font-size:10px;color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.7px; } .chc { background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--shadow); } .chc-t { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--t3);margin-bottom:13px; } .chc-h { height:155px;position:relative; } /* ══════════════════════════════════════════════════ INFO ══════════════════════════════════════════════════ */ .inf-c { background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--shadow); } .inf-c h2 { font-size:17px;font-weight:800;letter-spacing:-.3px;margin-bottom:9px; } .inf-c h3 { font-size:13.5px;font-weight:800;margin-bottom:6px;margin-top:14px; } .inf-c h3:first-of-type { margin-top:0; } .inf-c p { font-size:13.5px;line-height:1.72;color:var(--t2);margin-bottom:8px; } .api-ls { display:flex;gap:7px;flex-wrap:wrap;margin-top:13px; } .api-t { padding:4px 13px;border-radius:5px;background:var(--t1);color:var(--bg);font-size:10.5px;font-weight:700;letter-spacing:.5px;font-family:var(--fm); } .api-endpoint { background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:10px 14px;font-size:11.5px;font-family:var(--fm);color:var(--t2);overflow-x:auto;white-space:nowrap;margin:6px 0; } .lib-row { display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border); } .lib-row:last-child { border-bottom:none; } .lib-name { font-size:13px;font-weight:700;min-width:100px; } .lib-ver { font-size:10px;font-family:var(--fm);color:var(--t3);min-width:55px; } .lib-desc { font-size:12px;color:var(--t2);flex:1; } .scale-grid { display:grid;grid-template-columns:auto 1fr 1fr;gap:6px 14px;margin-top:10px; } .scale-mag { font-size:13.5px;font-weight:900;font-family:var(--fm); } .scale-lbl { font-size:12px;font-weight:600; } .scale-desc { font-size:11.5px;color:var(--t2); } .alert-lv { display:inline-flex;align-items:center;padding:2px 7px;border-radius:5px;font-size:9.5px;font-weight:800;letter-spacing:.5px;font-family:var(--fm); } /* ══════════════════════════════════════════════════ SETTINGS ══════════════════════════════════════════════════ */ .set-s { background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;box-shadow:var(--shadow); } .set-s h3 { font-size:13.5px;font-weight:800;margin-bottom:13px; } .set-r { display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border); } .set-r:last-child { border-bottom:none; } .sr-lbl { font-size:13px;font-weight:500; } .sr-sub { font-size:11px;color:var(--t3);margin-top:2px; } .tog { position:relative;width:40px;height:21px;border-radius:11px;background:var(--border);cursor:pointer;border:none;flex-shrink:0; } .tog.on { background:var(--t1); } [data-theme="dark"] .tog.on { background:#fff; } .tog::after { content:'';position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s; } [data-theme="dark"] .tog.on::after { background:#000; } .tog.on::after { transform:translateX(19px); } /* ══════════════════════════════════════════════════ MODAL ══════════════════════════════════════════════════ */ .modal-bg { position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:9000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:14px; } .modal-bg.open { display:flex; } .modal { background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;width:100%;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.22);max-height:88vh;overflow-y:auto; } .mhd { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px; } .mhd h3 { font-size:16px;font-weight:800;letter-spacing:-.2px; } .mcl { width:26px;height:26px;border-radius:6px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--t2); } .fg { margin-bottom:13px; } .fg label { display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--t3);margin-bottom:5px; } .fg input,.fg select,.fg textarea { width:100%;padding:8px 11px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);font-size:13px;color:var(--t1);font-family:var(--f);outline:none; } .fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--border2); } .fg textarea { height:68px;resize:none; } .fg-grp { margin-bottom:14px; } .fg-grp .fgl { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--t3);margin-bottom:7px; } .fg-grp .chips-row { display:flex;gap:6px;flex-wrap:wrap; } .btn-pri { width:100%;padding:10px;border-radius:var(--rs);background:var(--t1);color:var(--bg);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--f);letter-spacing:.3px;border:none;margin-top:4px; } .btn-pri:hover { opacity:.85; } /* Detail modal */ .det-header { display:flex;align-items:flex-end;gap:14px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border); } .det-mag { font-size:62px;font-weight:900;letter-spacing:-4px;line-height:1; } .det-place { font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px; } .det-time { font-size:11.5px;color:var(--t3);font-family:var(--fm); } .det-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px; } .det-field { background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:10px 13px; } .det-field-lbl { font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--t3);margin-bottom:3px; } .det-field-val { font-size:15px;font-weight:800;font-family:var(--fm); } .det-field-sub { font-size:10px;color:var(--t3);margin-top:1px; } /* ══════════════════════════════════════════════════ TOAST ══════════════════════════════════════════════════ */ .toast { position:fixed;bottom:22px;right:22px;z-index:99999;background:var(--t1);color:var(--bg);padding:11px 18px;border-radius:9px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-md);transform:translateY(80px);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none; } .toast.show { transform:translateY(0);opacity:1; } /* ══════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════ */ @media(max-width:1200px){ :root{--rp:265px} .bc{grid-template-columns:1fr 1fr 1fr} } @media(max-width:1024px){ :root{--rp:240px} .srch input{width:130px} } @media(max-width:900px) { .rp{display:none} :root{--sb:190px} .bc{grid-template-columns:1fr 1fr} } @media(max-width:720px) { :root{--sb:56px} .sb .ni-lbl,.sb .sb-rpt,.sb .sb-spark,.sb .sb-soc{display:none} .bc{grid-template-columns:1fr 1fr} .kpi-g{grid-template-columns:1fr 1fr} .hdr-s,.ts-txt,.live-pill{display:none} } @media(max-width:560px) { .bc{grid-template-columns:1fr} .map-wrap{min-height:260px;max-height:50vh} #map{min-height:260px} .pa{padding:11px} .srch{display:none} } @media(max-width:420px) { .kpi-g{grid-template-columns:1fr} :root{--hh:52px} } /* ── Tabs (informacion.html) ── */ .tab-bar{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:5px;flex-shrink:0;box-shadow:inset 0 1px 0 var(--glass-top),var(--shadow);} .tab-btn{flex:1;padding:8px 14px;border-radius:var(--rs);font-size:12.5px;font-weight:600;cursor:pointer;color:var(--t2);font-family:var(--f);border:none;background:transparent;text-align:center;transition:background .15s,color .15s;} .tab-btn.on{background:var(--t1);color:var(--bg);} .tab-pane{display:none;flex-direction:column;gap:14px;} .tab-pane.on{display:flex;} code{font-family:var(--fm);font-size:11.5px;background:var(--bg);border:1px solid var(--border);padding:1px 5px;border-radius:4px;color:var(--t2);} /* ── Config grid (configuracion.html) ── */ .cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;} @media(max-width:720px){.cfg-grid{grid-template-columns:1fr;}}