/* ============================================================================
   TRENIFY — DESIGN SYSTEM · GLASSMORPHISM DARK
   ============================================================================ */

@font-face {
    font-family: 'Alliance No.1';
    src: url('assets/fonts/alliance-no-1-regular.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Alliance No.1';
    src: url('assets/fonts/alliance-no-1-bold.woff') format('woff');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Tokens ── */
:root {
    --bg:            #07030f;
    --bg2:           #0e0720;
    --bg3:           #160b2e;
    --glass:         rgba(255,255,255,0.04);
    --glass-border:  rgba(255,255,255,0.08);
    --glass-hover:   rgba(255,255,255,0.07);
    --blur:          blur(20px);
    --text-primary:  #f0eaff;
    --text-secondary:#9580c0;
    --text-muted:    #5c4a80;
    --purple:        #7c3aed;
    --purple-light:  #a855f7;
    --pink:          #c026d3;
    --accent-green:  #10b981;
    --accent-yellow: #f59e0b;
    --accent-orange: #f97316;
    --accent-red:    #ef4444;
    --accent-blue:   #3b82f6;
    --grad-brand:    linear-gradient(135deg, #7c3aed 0%, #c026d3 60%, #ec4899 100%);
    --grad-subtle:   linear-gradient(135deg, rgba(124,58,237,0.2), rgba(192,38,211,0.15));
    --radius:        16px;
    --radius-sm:     10px;
    --radius-xs:     6px;
    --sidebar-w:     220px;
    --bnav-h:        68px;
    --shadow-card:   0 8px 32px rgba(0,0,0,0.4);
    --shadow-glow:   0 0 24px rgba(124,58,237,0.25);
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; scroll-behavior:smooth; }
body {
    font-family: 'Inter','Alliance No.1',-apple-system,sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    min-height: 100vh;
    overflow: hidden;
    line-height: 1.6;
    /* Fondo animado con orbes */
    position: relative;
}
body::before {
    content:'';
    position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
        radial-gradient(ellipse 800px 600px at 20% 10%, rgba(124,58,237,0.12) 0%, transparent 70%),
        radial-gradient(ellipse 600px 400px at 80% 80%, rgba(192,38,211,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 400px 300px at 60% 30%, rgba(59,130,246,0.06) 0%, transparent 70%);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
input, select, textarea { font-family: inherit; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(124,58,237,0.3); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:rgba(124,58,237,0.5); }

/* ── Material Icons ── */
.material-symbols-outlined {
    font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
    vertical-align:middle; font-size:inherit;
}

/* ============================================================================
   GLASS CARD — base component
   ============================================================================ */
.glass-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.glass-card:hover {
    border-color: rgba(124,58,237,0.2);
    box-shadow: var(--shadow-card), var(--shadow-glow);
}

/* ── Card header ── */
.card-header {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.88rem; font-weight: 600; color: var(--text-secondary);
}
.card-header h3 { font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); margin:0; flex:1; }
.card-header .material-symbols-outlined { font-size:1.1rem; }

/* ============================================================================
   LOADING OVERLAY
   ============================================================================ */
.loading-overlay {
    position:fixed; inset:0;
    background:#07030f;
    display:flex; align-items:center; justify-content:center;
    z-index:9999;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.loading-overlay.hidden { opacity:0; visibility:hidden; pointer-events:none; }

.tlo-root {
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    position:relative; width:100%; max-width:600px;
    padding:40px 20px;
}
.tlo-stars {
    position:absolute; inset:-100px; pointer-events:none;
    background-image:
        radial-gradient(1px 1px at 8%  18%, rgba(255,255,255,0.28) 0%,transparent 100%),
        radial-gradient(1px 1px at 22% 6%,  rgba(255,255,255,0.18) 0%,transparent 100%),
        radial-gradient(1px 1px at 41% 12%, rgba(255,255,255,0.22) 0%,transparent 100%),
        radial-gradient(1px 1px at 58% 4%,  rgba(255,255,255,0.18) 0%,transparent 100%),
        radial-gradient(1px 1px at 76% 9%,  rgba(255,255,255,0.25) 0%,transparent 100%),
        radial-gradient(1px 1px at 91% 20%, rgba(255,255,255,0.20) 0%,transparent 100%),
        radial-gradient(1px 1px at 15% 88%, rgba(255,255,255,0.12) 0%,transparent 100%),
        radial-gradient(1px 1px at 50% 92%, rgba(255,255,255,0.10) 0%,transparent 100%),
        radial-gradient(1px 1px at 83% 85%, rgba(255,255,255,0.12) 0%,transparent 100%);
}
.tlo-glow {
    position:absolute; width:580px; height:340px; border-radius:50%;
    background:radial-gradient(ellipse,rgba(124,58,237,0.12) 0%,transparent 70%);
    top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none;
}
.tlo-glow2 {
    position:absolute; width:300px; height:200px; border-radius:50%;
    background:radial-gradient(ellipse,rgba(192,38,211,0.08) 0%,transparent 70%);
    top:60%; left:30%; pointer-events:none;
}
.tlo-logo {
    position:relative; z-index:3;
    font-family:'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;
    font-size:54px; font-weight:900; letter-spacing:-1.5px;
    background:var(--grad-brand);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    line-height:1; margin-bottom:4px;
}
.tlo-tagline {
    position:relative; z-index:3;
    font-size:11.5px; color:rgba(210,190,255,0.42);
    letter-spacing:0.22em; text-transform:uppercase; margin-bottom:52px;
}
.tlo-scene {
    position:relative; width:440px; height:100px;
    z-index:3; margin-bottom:28px; overflow:hidden;
}
.tlo-ground {
    position:absolute; bottom:0; left:0; right:0; height:6px;
    background:linear-gradient(180deg,rgba(60,20,100,0.0),rgba(60,20,100,0.18));
    border-radius:3px;
}
.tlo-ties {
    position:absolute; bottom:14px; left:0; right:0;
    display:flex; justify-content:space-between; padding:0 2px;
}
.tlo-tie { width:3px; height:16px; background:rgba(100,60,180,0.22); border-radius:1px; }
.tlo-rail {
    position:absolute; left:0; right:0; height:2.5px;
    border-radius:99px; background:rgba(124,58,237,0.13);
}
.tlo-rail-top { bottom:24px; }
.tlo-rail-bot { bottom:14px; }
.tlo-rail-fill {
    height:100%; border-radius:99px;
    background:linear-gradient(90deg,#7c3aed,#c026d3,#ec4899);
    width:0%; animation:tlo-rfill 3.4s cubic-bezier(0.4,0,0.2,1) infinite;
}
.tlo-rail-bot .tlo-rail-fill { animation-delay:0.04s; }
@keyframes tlo-rfill {
    0%   { width:0%;   opacity:1; }
    78%  { width:100%; opacity:1; }
    90%  { width:100%; opacity:0; }
    100% { width:0%;   opacity:0; }
}
.tlo-streak {
    position:absolute; bottom:28px; height:30px; width:0;
    background:linear-gradient(90deg,rgba(124,58,237,0.0),rgba(124,58,237,0.22));
    border-radius:0 4px 4px 0; pointer-events:none;
    animation:tlo-streak 3.4s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes tlo-streak {
    0%,8%  { left:-290px; width:0;    opacity:0; }
    20%    { left:-60px;  width:90px; opacity:1; }
    78%    { left:340px;  width:130px;opacity:1; }
    86%    { left:460px;  width:0;    opacity:0; }
    100%   { left:460px;  width:0;    opacity:0; }
}
.tlo-train-wrap {
    position:absolute; bottom:26px; left:-290px;
    animation:tlo-ride 3.4s cubic-bezier(0.4,0,0.2,1) infinite;
    filter:drop-shadow(0 2px 14px rgba(160,50,210,0.5));
}
@keyframes tlo-ride {
    0%   { left:-290px; }
    10%  { left:-290px; }
    80%  { left:450px;  }
    100% { left:450px;  }
}
.tlo-status { position:relative; z-index:3; font-size:12.5px; color:rgba(210,185,255,0.48); letter-spacing:0.08em; min-height:18px; }
.tlo-msg { animation:tlo-mfade 3.4s ease infinite; }
@keyframes tlo-mfade {
    0%,8%    { opacity:0; transform:translateY(5px);  }
    18%,76%  { opacity:1; transform:translateY(0);    }
    88%,100% { opacity:0; transform:translateY(-5px); }
}
.tlo-dots { display:flex; gap:7px; margin-top:18px; position:relative; z-index:3; }
.tlo-dot {
    width:5px; height:5px; border-radius:50%;
    background:rgba(124,58,237,0.35);
    animation:tlo-dp 1.5s ease infinite;
}
.tlo-dot:nth-child(2){ animation-delay:0.25s; }
.tlo-dot:nth-child(3){ animation-delay:0.50s; }
@keyframes tlo-dp {
    0%,100%{ background:rgba(124,58,237,0.3); transform:scale(1); }
    50%    { background:#c026d3; transform:scale(1.55); }
}

/* ============================================================================
   APP SHELL
   ============================================================================ */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    z-index: 1;
    padding-top: var(--topbar-h);
}

/* ============================================================================
   TOPBAR — navegación superior (escritorio)
   ============================================================================ */
:root { --topbar-h: 62px; }

.topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: rgba(8,2,20,0.88);
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 200;
    display: flex; align-items: center;
    padding: 0 1.5rem; gap: 1.5rem;
}
.topbar::after {
    content:'';
    position:absolute; bottom:0; left:0; right:0; height:2px;
    background: var(--grad-brand); opacity: 0.7;
}

/* Logo */
.topbar-logo {
    display: flex; align-items: center; flex-shrink: 0;
    text-decoration: none;
}
.topbar-logo-text {
    font-family: 'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;
    font-size: 1.45rem; font-weight: 900; letter-spacing: -0.5px;
    background: var(--grad-brand);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Nav links */
.topbar-nav {
    display: flex; align-items: center; gap: 0.15rem;
    flex: 1; overflow-x: auto; scrollbar-width: none;
}
.topbar-nav::-webkit-scrollbar { display: none; }

.tnav-link {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.82rem; font-weight: 500;
    white-space: nowrap; flex-shrink: 0;
    transition: all 0.18s ease;
    text-decoration: none;
}
.tnav-icon { font-size: 1.05rem; line-height: 1; }
.tnav-label { font-size: 0.8rem; }
.tnav-link:hover {
    color: var(--text-primary);
    background: var(--glass-hover);
}
.tnav-link.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(192,38,211,0.2));
    border: 1px solid rgba(124,58,237,0.35);
    box-shadow: 0 2px 12px rgba(124,58,237,0.2);
}

/* Status right side */
.topbar-status {
    display: flex; align-items: center; gap: 0.5rem;
    flex-shrink: 0; margin-left: auto;
}
.status-text {
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted);
}
.topbar-update {
    font-size: 0.67rem; color: var(--text-muted);
    display: none;
}
@media (min-width: 1100px) { .topbar-update { display: block; } }

.last-update { font-size: 0.67rem; color: var(--text-muted); line-height: 1.4; }

/* Sidebar compat classes (kept for any JS references) */
.snav-link { display:none; }
.sidebar { display:none; }

/* ============================================================================
   MAIN CONTENT
   ============================================================================ */
.main-content {
    flex: 1;
    margin-left: 0;
    padding: 2rem 2.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - var(--topbar-h));
    min-width: 0;
    padding-bottom: calc(2rem + var(--bnav-h));
}

/* ============================================================================
   SECTIONS
   ============================================================================ */
.section { display:none; }
.section.active {
    display:block;
    animation: secIn 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes secIn {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}
#map.section.active { animation: secFade 0.25s ease; }
@keyframes secFade { from{opacity:0;} to{opacity:1;} }

/* Section header */
.section-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--glass-border);
}
.section-title {
    font-size: 1.6rem; font-weight: 800; letter-spacing: -0.04em;
    color: var(--text-primary); margin-bottom: 0.25rem;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.section-subtitle {
    font-size: 0.82rem; color: var(--text-secondary);
}
.header-actions {
    display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
}

/* Badges */
.mode-badge {
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 99px;
    vertical-align: middle;
}
.live-badge { background: rgba(16,185,129,0.15); color: var(--accent-green); border: 1px solid rgba(16,185,129,0.3); }
.hist-badge { background: rgba(245,158,11,0.15); color: var(--accent-yellow); border: 1px solid rgba(245,158,11,0.3); }

/* ── Status dot ── */
.status-dot {
    width:7px; height:7px; border-radius:50%;
    background: var(--text-muted); flex-shrink:0;
}
.status-dot.live {
    background: var(--accent-green);
    animation: pulse 2s infinite;
    box-shadow: 0 0 6px var(--accent-green);
}
.status-dot.offline { background: var(--accent-red); }
.status-dot.historical { background: var(--accent-yellow); animation: pulse 2s infinite; }
@keyframes pulse {
    0%,100% { transform:scale(1); opacity:1; }
    50%      { transform:scale(1.4); opacity:0.6; }
}

/* ── Buttons ── */
.btn-primary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    background: var(--grad-brand);
    color: #fff; border-radius: var(--radius-sm);
    font-size: 0.9rem; font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(124,58,237,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,0.5); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    background: var(--glass); color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem; font-weight: 600;
    transition: all 0.2s ease;
}
.btn-ghost:hover { background: var(--glass-hover); border-color: rgba(124,58,237,0.3); }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs); color: var(--text-secondary);
    transition: all 0.18s ease;
}
.icon-btn:hover { background: var(--glass-hover); color: var(--text-primary); border-color: rgba(124,58,237,0.3); }
.icon-btn .material-symbols-outlined { font-size: 1rem; }

.pill-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: 99px; color: var(--text-secondary);
    font-size: 0.8rem; font-weight: 600;
    transition: all 0.18s ease;
}
.pill-btn:hover { background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.4); color: var(--text-primary); }
.pill-btn .material-symbols-outlined { font-size: 0.95rem; }

/* ── Date controls ── */
.date-picker-row {
    display: flex; align-items: center; gap: 0.4rem;
}
.date-input {
    padding: 0.4rem 0.65rem;
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs); color: var(--text-primary);
    font-size: 0.82rem; transition: border-color 0.2s;
}
.date-input:focus { outline:none; border-color: var(--purple); }

/* ── Filters ── */
.filter-input, .filter-select {
    padding: 0.5rem 0.875rem;
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs); color: var(--text-primary);
    font-size: 0.83rem; transition: border-color 0.2s;
    appearance: none;
}
.filter-input:focus, .filter-select:focus { outline:none; border-color: var(--purple); }
.filter-input::placeholder { color: var(--text-muted); }
.filter-select option { background: #1a0b35; }
.inline-filter { margin-left:auto; width:200px; }

.filters-card { padding: 1rem 1.25rem; margin-bottom: 1rem; }
.filters-row { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }
.filter-input, .filter-select { flex: 1; min-width: 160px; }
.slider-wrap { display:flex; align-items:center; gap:0.5rem; flex:1; min-width:200px; }
.slider-label { font-size:0.8rem; color:var(--text-secondary); white-space:nowrap; }
.filter-slider { flex:1; accent-color: var(--purple); }

/* ── Tables ── */
.table-card { overflow:hidden; }
.data-table {
    width:100%; border-collapse:collapse;
    font-size: 0.82rem;
}
.data-table th {
    padding: 0.75rem 1rem;
    text-align:left; font-size:0.72rem; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--glass-border);
}
.data-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text-primary);
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background: rgba(124,58,237,0.06); }
.data-table .badge {
    display:inline-flex; padding:0.2rem 0.5rem;
    border-radius:99px; font-size:0.7rem; font-weight:700;
}
.badge-green  { background:rgba(16,185,129,0.15); color:var(--accent-green); }
.badge-yellow { background:rgba(245,158,11,0.15);  color:var(--accent-yellow); }
.badge-orange { background:rgba(249,115,22,0.15);  color:var(--accent-orange); }
.badge-red    { background:rgba(239,68,68,0.15);   color:var(--accent-red); }
.badge-purple { background:rgba(124,58,237,0.15);  color:var(--purple-light); }

/* ── Dot colours ── */
.dot {
    display:inline-block; width:8px; height:8px; border-radius:50%;
}
.dot.green  { background: var(--accent-green); }
.dot.yellow { background: var(--accent-yellow); }
.dot.orange { background: var(--accent-orange); }
.dot.red    { background: var(--accent-red); }

/* ── Chart containers ── */
.charts-row {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
    margin-bottom: 1rem;
}
.chart-card { padding: 0; }
.chart-card canvas { padding: 1rem 1.25rem 1.25rem; display:block; }
.chart-card.wide canvas { max-height:240px; }
.chart-card canvas { max-height:240px; }
.chart-card.full canvas { max-height:300px; }

/* ── Results count ── */
.results-count {
    font-size: 0.8rem; color: var(--text-secondary);
    margin-bottom: 0.75rem; padding-left: 0.25rem;
}

/* ── No data ── */
.no-data {
    text-align:center; padding: 2.5rem;
    color: var(--text-muted); font-size: 0.85rem;
}

/* ── Loading spinner ── */
.loading {
    display:flex; justify-content:center; align-items:center;
    min-height:160px; color:var(--text-muted); font-size:0.82rem;
}
@keyframes spin { to { transform:rotate(360deg); } }
.spinning { display:inline-block; animation:spin 1s linear infinite; }

/* ============================================================================
   § HERO
   ============================================================================ */
#hero { position:relative; min-height: calc(100vh - var(--topbar-h) - var(--bnav-h)); }

.hero-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius: var(--radius); }
.hero-orb {
    position:absolute; border-radius:50%;
    animation: heroOrb 8s ease-in-out infinite alternate;
}
.hero-orb-1 {
    width:600px; height:600px; top:-100px; right:-100px;
    background:radial-gradient(circle,rgba(124,58,237,0.18) 0%,transparent 70%);
    animation-delay:0s;
}
.hero-orb-2 {
    width:400px; height:400px; bottom:-80px; left:-60px;
    background:radial-gradient(circle,rgba(192,38,211,0.12) 0%,transparent 70%);
    animation-delay:2s;
}
.hero-orb-3 {
    width:300px; height:300px; top:40%; left:40%;
    background:radial-gradient(circle,rgba(59,130,246,0.08) 0%,transparent 70%);
    animation-delay:4s;
}
@keyframes heroOrb {
    from { transform:scale(1) translateY(0); }
    to   { transform:scale(1.1) translateY(-20px); }
}

.hero-content {
    position:relative; z-index:2;
    max-width: 720px;
    padding: 4rem 0 2rem;
}
.hero-badge {
    display:inline-flex; align-items:center; gap:0.5rem;
    padding: 0.35rem 0.85rem;
    background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25);
    border-radius:99px; font-size:0.72rem; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-green);
    margin-bottom: 1.5rem;
}
.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900; letter-spacing: -0.04em;
    line-height: 1.05; margin-bottom: 1rem;
}
.hero-title-brand {
    display:block;
    background: var(--grad-brand);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-title-sub {
    display:block; font-size:0.45em;
    color: var(--text-secondary); font-weight: 500; letter-spacing: 0;
    margin-top:0.25rem;
}
.hero-desc {
    font-size: 1rem; color: var(--text-secondary); line-height:1.7;
    max-width: 560px; margin-bottom: 2rem;
}
.hero-kpis {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 0.75rem; margin-bottom: 2rem;
}
.hero-kpi {
    padding: 1rem 1.25rem; text-align:center;
}
.hero-kpi-value {
    font-size: 1.8rem; font-weight: 800; letter-spacing:-0.04em;
    background: var(--grad-brand);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    margin-bottom: 0.2rem;
}
.hero-kpi-label {
    font-size: 0.72rem; color: var(--text-muted); text-transform:uppercase; letter-spacing:0.06em;
}
.hero-actions { display:flex; gap:0.75rem; flex-wrap:wrap; }

/* ============================================================================
   § DASHBOARD — KPIs
   ============================================================================ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem; margin-bottom: 1rem;
}
.kpi-grid.two-col { grid-template-columns: repeat(2,1fr); max-width:500px; }

.kpi-card {
    padding: 1.4rem 1.25rem;
    display:flex; flex-direction:column; gap:0.3rem;
    position:relative; overflow:hidden;
}
.kpi-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background: var(--grad-brand); opacity:0.6;
}
.kpi-icon {
    width: 36px; height: 36px; border-radius: var(--radius-xs);
    display:flex; align-items:center; justify-content:center;
    font-size: 1.1rem; margin-bottom: 0.5rem;
}
.kpi-icon.purple  { background:rgba(124,58,237,0.15); color:var(--purple-light); }
.kpi-icon.green   { background:rgba(16,185,129,0.15); color:var(--accent-green); }
.kpi-icon.orange  { background:rgba(249,115,22,0.15); color:var(--accent-orange); }
.kpi-icon.red     { background:rgba(239,68,68,0.15);  color:var(--accent-red); }
.kpi-icon.blue    { background:rgba(59,130,246,0.15); color:var(--accent-blue); }

.kpi-value {
    font-size: 2.2rem; font-weight: 800; letter-spacing:-0.04em;
    color: var(--text-primary); line-height:1;
}
.kpi-label {
    font-size: 0.76rem; color: var(--text-secondary);
    text-transform:uppercase; letter-spacing:0.05em;
}
.kpi-sub {
    font-size: 0.72rem; color: var(--text-muted);
}
.kpi-trend {
    font-size: 0.75rem; margin-top:0.2rem;
}

/* Corridors list */
.corridors-list { padding: 0.5rem 0; }
.corridor-row {
    display:grid; grid-template-columns: 1fr auto auto;
    align-items:center; gap:1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.83rem; transition: background 0.15s;
}
.corridor-row:last-child { border-bottom:none; }
.corridor-row:hover { background: rgba(124,58,237,0.06); }
.corridor-name { color:var(--text-primary); font-weight:500; }
.corridor-bar-wrap { width:100px; height:4px; background:rgba(255,255,255,0.07); border-radius:99px; overflow:hidden; }
.corridor-bar { height:100%; border-radius:99px; background: var(--grad-brand); transition: width 0.5s ease; }
.corridor-delay { font-weight:700; min-width:50px; text-align:right; }

/* ============================================================================
   § SEARCH — Busca tu tren
   ============================================================================ */
.search-hero {
    padding: 1.5rem; margin-bottom: 1.5rem; position:relative;
}
.search-bar-wrap {
    display:flex; align-items:center; gap:0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 0.75rem 1rem;
    transition: border-color 0.2s;
}
.search-bar-wrap:focus-within { border-color: var(--purple); }
.search-ico { font-size:1.3rem; color:var(--text-muted); flex-shrink:0; }
.search-bar-input {
    flex:1; background:transparent; border:none; outline:none;
    color:var(--text-primary); font-size:1rem;
}
.search-bar-input::placeholder { color:var(--text-muted); }

.search-dropdown {
    position:absolute; top:calc(100% + 0.5rem); left:1.5rem; right:1.5rem;
    background: #130825; border:1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    z-index:100; overflow:hidden;
}
.search-result-item {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor:pointer; transition: background 0.15s;
    font-size:0.88rem;
}
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover { background: rgba(124,58,237,0.1); }
.search-result-id { font-weight:700; color:var(--text-primary); }
.search-result-info { color:var(--text-secondary); font-size:0.78rem; margin-top:0.1rem; }
.search-result-actions { padding:0.5rem 0 0; }

.train-detail-panel { margin-bottom:1.5rem; }
.train-detail-panel .glass-card { padding:1.5rem; }

.search-hints { }
.hint-title { font-size:0.8rem; color:var(--text-muted); margin-bottom:0.75rem; }
.hint-chips { display:flex; flex-wrap:wrap; gap:0.5rem; }
.hint-chip {
    padding: 0.35rem 0.875rem;
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: 99px; font-size:0.78rem; color:var(--text-secondary);
    cursor:pointer; transition: all 0.15s;
}
.hint-chip:hover { background:rgba(124,58,237,0.15); border-color:rgba(124,58,237,0.4); color:var(--text-primary); }
.hint-chip.delayed { border-color:rgba(239,68,68,0.3); color:var(--accent-red); background:rgba(239,68,68,0.06); }

/* ── Probability card inside search ── */
.prob-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; margin:1rem 0; }
.prob-stat { text-align:center; padding:0.875rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-sm); }
.prob-stat-value { font-size:1.5rem; font-weight:800; letter-spacing:-0.03em; }
.prob-stat-label { font-size:0.72rem; color:var(--text-muted); margin-top:0.2rem; }
.prob-bar-label { font-size:0.78rem; color:var(--text-secondary); margin-bottom:0.3rem; }
.prob-bar-outer { height:6px; background:rgba(255,255,255,0.07); border-radius:99px; overflow:hidden; margin-bottom:0.75rem; }
.prob-bar-inner { height:100%; border-radius:99px; transition:width 0.6s ease; }
.dow-row { display:flex; gap:0.3rem; }
.dow-item { flex:1; text-align:center; }
.dow-bar-wrap { height:40px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:0.25rem; }
.dow-bar { width:18px; border-radius:3px 3px 0 0; min-height:4px; transition:height 0.4s ease; }
.dow-label { font-size:0.65rem; color:var(--text-muted); }
.dow-pct { font-size:0.7rem; color:var(--text-secondary); margin-top:0.15rem; }

/* ============================================================================
   § DELAYED — Watchlist
   ============================================================================ */
.watchlist-card { margin-bottom:1rem; padding:1rem 1.25rem; }
#watchedTrains {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:0.5rem; margin-top:0.75rem;
}
.watched-chip {
    display:flex; align-items:center; justify-content:space-between;
    padding:0.5rem 0.75rem;
    background:rgba(255,255,255,0.04); border:1px solid var(--glass-border);
    border-radius:var(--radius-xs); font-size:0.8rem; gap:0.4rem;
}
.watched-chip .watch-id { font-weight:700; color:var(--text-primary); }
.watched-chip .watch-delay { color:var(--accent-orange); font-weight:700; }
.btn-unwatch {
    background:transparent; border:none; color:var(--text-muted);
    cursor:pointer; font-size:0.8rem; padding:0.1rem;
    transition:color 0.15s;
}
.btn-unwatch:hover { color:var(--accent-red); }

/* Action column buttons */
.action-cell { display:flex; gap:0.4rem; align-items:center; }
.btn-watch, .btn-prob {
    display:inline-flex; align-items:center; justify-content:center;
    padding:0.28rem 0.4rem;
    background:transparent; border-radius:var(--radius-xs);
    cursor:pointer; font-size:0.75rem; transition:all 0.15s;
}
.btn-watch {
    color: var(--accent-yellow);
    border: 1px solid rgba(245,158,11,0.3);
}
.btn-watch:hover { background:rgba(245,158,11,0.1); }
.btn-watch.watching { color:var(--accent-orange); border-color:rgba(249,115,22,0.4); }
.btn-prob {
    color: var(--purple-light);
    border: 1px solid rgba(124,58,237,0.3);
}
.btn-prob:hover { background:rgba(124,58,237,0.1); }
.btn-prob .material-symbols-outlined,
.btn-watch .material-symbols-outlined { font-size:1rem; }

/* ============================================================================
   § MAP
   ============================================================================ */
.map-legend {
    display:flex; align-items:center; gap:1.5rem;
    padding:0.65rem 1.25rem; margin-bottom:0.75rem;
    font-size:0.8rem; color:var(--text-secondary);
}
.legend-item { display:flex; align-items:center; gap:0.4rem; }
.map-container {
    height: calc(100vh - var(--topbar-h) - 220px);
    min-height: 360px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

/* MapLibre popups */
.maplibregl-popup-content {
    background: rgba(13,6,30,0.95) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-primary) !important;
    padding: 0.75rem 1rem !important;
    font-family: 'Inter',sans-serif !important;
    font-size: 0.82rem !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.maplibregl-popup-tip { border-top-color: rgba(13,6,30,0.95) !important; }
.maplibregl-popup-close-button { color: var(--text-secondary) !important; font-size: 1.1rem !important; }

/* ============================================================================
   § RANKING
   ============================================================================ */
.ranking-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.ranking-card { }
.ranking-list { padding: 0.5rem 0; }
.ranking-item {
    display:grid; grid-template-columns:32px 1fr auto;
    align-items:center; gap:0.75rem;
    padding: 0.8rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size:0.83rem; transition: background 0.15s;
}
.ranking-item:last-child { border-bottom:none; }
.ranking-item:hover { background:rgba(124,58,237,0.06); }
.rank-num {
    width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:0.75rem; font-weight:800;
}
.rank-1 { background:rgba(245,158,11,0.2); color:var(--accent-yellow); }
.rank-2 { background:rgba(156,163,175,0.2); color:#9ca3af; }
.rank-3 { background:rgba(180,120,60,0.2);  color:#b47c3c; }
.rank-n { background:rgba(255,255,255,0.05); color:var(--text-muted); }
.rank-name { color:var(--text-primary); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-pct { font-weight:800; font-size:0.95rem; }
.rank-pct.good { color:var(--accent-green); }
.rank-pct.bad  { color:var(--accent-red); }

/* Ranking full table */
.ranking-table-body { }
.ranking-table-row {
    display:grid; grid-template-columns:1fr 80px 80px 80px 100px;
    align-items:center; gap:1rem;
    padding:0.7rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size:0.82rem; transition:background 0.15s;
}
.ranking-table-row:hover { background:rgba(124,58,237,0.06); }
.ranking-table-row.header {
    font-size:0.7rem; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--text-muted);
    position:sticky; top:0; background:var(--bg2); z-index:1;
}
.rtr-bar-wrap { height:4px; background:rgba(255,255,255,0.07); border-radius:99px; overflow:hidden; margin-top:4px; }
.rtr-bar { height:100%; border-radius:99px; }

/* ============================================================================
   § ROLLING STOCK
   ============================================================================ */

/* ============================================================================
   § HISTORICAL / PREDICCIÓN
   ============================================================================ */
.hist-today {
    padding: 1.25rem 1.5rem; margin-bottom: 1rem;
}
.hist-today-title {
    font-size:0.9rem; font-weight:700; color:var(--text-primary);
    margin-bottom:0.75rem; display:flex; align-items:center; gap:0.5rem;
}
.hist-today-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:0.75rem; }
.hist-today-item {
    padding:0.875rem; background:rgba(255,255,255,0.03);
    border-radius:var(--radius-sm); border:1px solid var(--glass-border);
}
.hist-today-corridor { font-size:0.78rem; font-weight:600; color:var(--text-primary); margin-bottom:0.35rem; }
.hist-today-prob { font-size:1.4rem; font-weight:800; letter-spacing:-0.03em; }
.hist-today-sub { font-size:0.7rem; color:var(--text-muted); }

.hist-table-body { }
.hist-row {
    display:grid;
    grid-template-columns:1fr 70px 70px 70px 80px 90px;
    align-items:center; gap:0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom:1px solid rgba(255,255,255,0.04);
    font-size:0.82rem; cursor:pointer; transition:background 0.15s;
}
.hist-row:hover { background:rgba(124,58,237,0.06); }
.hist-row.header {
    font-size:0.7rem; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--text-muted);
    cursor:default; position:sticky; top:0; background:var(--bg2); z-index:1;
}
.prob-pill {
    display:inline-flex; align-items:center; justify-content:center;
    padding:0.25rem 0.6rem; border-radius:99px;
    font-size:0.75rem; font-weight:700;
}
.prob-low  { background:rgba(16,185,129,0.15); color:var(--accent-green); }
.prob-med  { background:rgba(245,158,11,0.15);  color:var(--accent-yellow); }
.prob-high { background:rgba(249,115,22,0.15);  color:var(--accent-orange); }
.prob-vhigh{ background:rgba(239,68,68,0.15);   color:var(--accent-red); }

.corridor-type-tag {
    display:inline-block; padding:0.15rem 0.45rem;
    background:rgba(124,58,237,0.12); border-radius:4px;
    font-size:0.68rem; color:var(--purple-light);
}
.sample-size { color:var(--text-muted); font-size:0.75rem; }
.delay-avg { color:var(--text-secondary); }
.today-cell { }

/* Day-of-week mini bars */
.dow-mini { display:flex; gap:2px; align-items:flex-end; height:20px; }
.dow-mini-bar { width:8px; border-radius:1px 1px 0 0; min-height:2px; }

/* Modal probabilidad */
.prob-modal-overlay {
    display:none; position:fixed; inset:0; z-index:9000;
    background:rgba(0,0,0,0.7); backdrop-filter:blur(6px);
    align-items:center; justify-content:center; padding:1rem;
}
.prob-modal-overlay.active { display:flex; }
.prob-modal {
    background: #100520; border:1px solid var(--glass-border);
    border-radius: var(--radius); width:100%; max-width:680px;
    max-height:88vh; display:flex; flex-direction:column; overflow:hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
.prob-modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:1.1rem 1.4rem; border-bottom:1px solid var(--glass-border);
    flex-shrink:0;
}
.prob-modal-header h3 {
    display:flex; align-items:center; gap:0.5rem;
    font-size:1rem; font-weight:700; margin:0; color:var(--text-primary);
}
.prob-modal-close {
    background:transparent; border:none; color:var(--text-secondary);
    cursor:pointer; padding:0.3rem; border-radius:var(--radius-xs);
    display:flex; align-items:center; transition:color 0.15s;
}
.prob-modal-close:hover { color:var(--text-primary); }
.prob-modal-body { padding:1.25rem 1.4rem; overflow-y:auto; flex:1; }
.prob-subtitle { display:flex; align-items:center; gap:0.4rem; font-size:0.9rem; color:var(--text-secondary); margin-bottom:1rem; }
.prob-loading { display:flex; align-items:center; justify-content:center; gap:0.6rem; color:var(--text-secondary); padding:2rem; }

/* ============================================================================
   BOTTOM NAV — móvil
   ============================================================================ */
.bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--bnav-h);
    background: rgba(10,3,24,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    z-index: 200;
    overflow-x: auto;
    padding: 0 0.25rem;
}
.bottom-nav::-webkit-scrollbar { display:none; }
.bottom-nav {
    display: none;
    align-items: stretch;
    justify-content: space-around;
}
.bnav-item {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:0.2rem; padding:0.5rem 0.6rem; flex:1; min-width:56px;
    color:var(--text-muted); font-size:0.6rem; font-weight:600;
    letter-spacing:0.02em; text-transform:uppercase;
    transition: all 0.18s ease; cursor:pointer; border-radius:var(--radius-xs);
    white-space:nowrap;
}
.bnav-item .material-symbols-outlined { font-size:1.35rem; transition:transform 0.2s; }
.bnav-item:hover { color:var(--text-secondary); }
.bnav-item.active {
    color: var(--purple-light);
}
.bnav-item.active .material-symbols-outlined { transform:scale(1.15); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1200px) {
    :root { --sidebar-w: 200px; }
    .main-content { padding: 1.75rem 2rem; }
    .charts-row { grid-template-columns: 1fr; }
    .charts-row .chart-card:last-child canvas { max-height:200px; }
}

@media (max-width: 900px) {
    .kpi-grid { grid-template-columns: repeat(2,1fr); }
    .hero-kpis { grid-template-columns: repeat(2,1fr); }
    .ranking-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    /* Ocultar topbar nav, mostrar bottom nav */
    .topbar-nav { display: none; }
    .topbar { justify-content: space-between; padding: 0 1rem; }
    .topbar-status { margin-left: 0; }
    .bottom-nav { display:flex; }
    .app-shell { padding-top: var(--topbar-h); }
    .main-content {
        margin-left: 0;
        padding: 1.25rem 1rem calc(1rem + var(--bnav-h));
        height: calc(100vh - var(--topbar-h));
    }
    .kpi-grid { grid-template-columns: repeat(2,1fr); }
    .hero-kpis { grid-template-columns: repeat(2,1fr); }
    .hero-content { padding-top:2rem; }
    .hero-title { font-size: 2.4rem; }
    .charts-row { grid-template-columns:1fr; }
    .section-title { font-size:1.3rem; }
    .section-header { flex-direction:column; gap:0.75rem; }
    .hist-row { grid-template-columns:1fr 70px 70px; }
    .hist-row .prob-cell { display:none; }
    .hist-row .corridor-type-tag,
    .hist-row .sample-size,
    .hist-row .delay-avg,
    .hist-row .today-cell { display:none; }
    .ranking-table-row { grid-template-columns:1fr 70px 70px; }
    .ranking-table-row > *:nth-child(n+4) { display:none; }
    .map-container { height:calc(100vh - 250px); }
    .inline-filter { width:140px; }
}

@media (max-width: 480px) {
    .kpi-grid { grid-template-columns:1fr 1fr; }
    .kpi-value { font-size:1.7rem; }
    .hero-kpis { grid-template-columns:1fr 1fr; }
    .hero-kpi-value { font-size:1.4rem; }
    .prob-grid { grid-template-columns:1fr; }
    .filters-row { flex-direction:column; }
    .filter-input, .filter-select { width:100%; }
    .search-bar-input { font-size:16px; }
    #mapContainer { min-height:300px; }
    .ranking-grid { grid-template-columns:1fr; }
}

/* ============================================================================
   LEGACY COMPAT — elementos que app.js genera con las clases antiguas
   ============================================================================ */
.summary-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; margin-bottom:1rem; }
.card {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:var(--radius); padding:1.25rem;
    backdrop-filter:var(--blur); box-shadow:var(--shadow-card);
}
.card-icon { width:36px; height:36px; border-radius:var(--radius-xs); display:flex; align-items:center; justify-content:center; margin-bottom:0.75rem; background:rgba(124,58,237,0.12); color:var(--purple-light); }
.card-value { font-size:2rem; font-weight:800; letter-spacing:-0.04em; color:var(--text-primary); }
.card-label { font-size:0.74rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em; }
.controls { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; margin-bottom:1rem; }
.controls input[type="text"], .controls select {
    padding:0.5rem 0.875rem; background:var(--glass); border:1px solid var(--glass-border);
    border-radius:var(--radius-xs); color:var(--text-primary); font-size:0.83rem;
}
.controls label { font-size:0.82rem; color:var(--text-secondary); display:flex; align-items:center; gap:0.5rem; }
.table-container { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); overflow:hidden; }
table { width:100%; border-collapse:collapse; font-size:0.82rem; }
th { padding:0.75rem 1rem; text-align:left; font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); border-bottom:1px solid var(--glass-border); }
td { padding:0.75rem 1rem; border-bottom:1px solid rgba(255,255,255,0.04); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(124,58,237,0.05); }
.chart-container { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:1.25rem; margin-bottom:1rem; }
.chart-container h3 { font-size:0.88rem; font-weight:600; color:var(--text-secondary); margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem; }
.chart-container.full-width { }
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.watchlist { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:1.1rem 1.25rem; margin-bottom:1rem; }
.watchlist h3 { font-size:0.88rem; font-weight:600; color:var(--text-secondary); display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; }
#watchedTrains.empty { color:var(--text-muted); font-size:0.82rem; }
.btn-icon, .action-btn {
    display:inline-flex; align-items:center; justify-content:center;
    padding:0.28rem 0.45rem; background:transparent;
    border:1px solid var(--glass-border); border-radius:var(--radius-xs);
    color:var(--text-secondary); cursor:pointer; font-size:0.75rem;
    transition:all 0.15s; font-family:inherit;
}
.btn-icon:hover, .action-btn:hover { background:var(--glass-hover); color:var(--text-primary); }
.btn-icon .material-symbols-outlined, .action-btn .material-symbols-outlined { font-size:1rem; }
.search-results { position:absolute; z-index:100; width:100%; background:#100520; border:1px solid var(--glass-border); border-radius:var(--radius-sm); box-shadow:0 16px 48px rgba(0,0,0,0.6); overflow:hidden; }
.search-result-item { padding:0.85rem 1.1rem; border-bottom:1px solid rgba(255,255,255,0.05); cursor:pointer; transition:background 0.15s; font-size:0.88rem; }
.search-result-item:hover { background:rgba(124,58,237,0.1); }
.btn-prob-search {
    display:inline-flex; align-items:center; gap:0.35rem;
    padding:0.35rem 0.75rem; background:transparent;
    color:var(--purple-light); border:1px solid rgba(124,58,237,0.4);
    border-radius:var(--radius-xs); cursor:pointer; font-size:0.8rem;
    font-family:inherit; font-weight:600; transition:all 0.18s;
}
.btn-prob-search:hover { background:rgba(124,58,237,0.12); }
/* Hist table compat */
.hist-table-wrap { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); overflow:hidden; }
.hist-table-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--glass-border); }
.hist-table-header h3 { font-size:0.88rem; font-weight:600; color:var(--text-secondary); display:flex; align-items:center; gap:0.5rem; margin:0; }
.hist-search { padding:0.45rem 0.75rem; background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-radius:var(--radius-xs); color:var(--text-primary); font-size:0.82rem; }
.hist-search:focus { outline:none; border-color:var(--purple); }
/* top delayed items compat */
.top-delayed-list { display:flex; flex-direction:column; gap:0.5rem; margin-top:0.75rem; }
.top-delayed-item {
    display:grid; grid-template-columns:36px 1fr auto auto;
    align-items:center; gap:0.75rem;
    padding:0.75rem 1.1rem; background:rgba(255,255,255,0.03);
    border:1px solid var(--glass-border); border-radius:var(--radius-sm);
    transition:background 0.15s;
}
.top-delayed-item:hover { background:rgba(124,58,237,0.07); }
.delayed-rank { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.8rem; background:rgba(239,68,68,0.12); color:var(--accent-red); }
.delayed-info { overflow:hidden; }
.delayed-id { font-weight:700; color:var(--text-primary); font-size:0.9rem; }
.delayed-corridor { font-size:0.75rem; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.delayed-type { display:inline-flex; }
.delayed-time { font-size:1.2rem; font-weight:800; color:var(--accent-red); text-align:right; letter-spacing:-0.04em; }
.punctuality-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:0.75rem; margin-top:0.75rem; }
.punctuality-item { padding:0.875rem; background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:var(--radius-sm); }
.punct-type { font-size:0.75rem; font-weight:600; color:var(--text-secondary); margin-bottom:0.35rem; }
.punct-pct  { font-size:1.5rem; font-weight:800; }
.punct-count { font-size:0.7rem; color:var(--text-muted); margin-top:0.15rem; }
/* timeseries compat */
#timeseries .section-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.compact-date-selector { display:flex; align-items:center; gap:0.5rem; }
.compact-date-toggle { display:flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-xs); color:var(--text-secondary); cursor:pointer; transition:all 0.18s; }
.compact-date-toggle:hover { background:var(--glass-hover); color:var(--text-primary); }
.compact-date-picker { display:flex; align-items:center; gap:0.4rem; }
.compact-date-input { padding:0.4rem 0.65rem; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-xs); color:var(--text-primary); font-size:0.82rem; }
.compact-date-btn { display:flex; align-items:center; justify-content:center; width:32px; height:32px; background:var(--purple); border:none; border-radius:var(--radius-xs); cursor:pointer; color:white; }
.compact-date-btn:last-child { background:var(--accent-red); }
.compact-live-btn { display:inline-flex; align-items:center; gap:0.4rem; padding:0.45rem 0.875rem; background:rgba(16,185,129,0.15); border:1px solid rgba(16,185,129,0.3); border-radius:99px; color:var(--accent-green); font-size:0.8rem; font-weight:600; cursor:pointer; transition:all 0.18s; }
.compact-live-btn:hover { background:rgba(16,185,129,0.25); }
.live-label { font-family:inherit; }
.header-left { flex:1; }
.header-right { display:flex; align-items:center; }
/* map container compat (used by app.js as #mapContainer) */
#mapContainer { height:calc(100vh - var(--topbar-h) - 220px); min-height:360px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--glass-border); }
/* timeseries chart compat */
#timeSeriesChart { max-height:320px; }
/* daily date selector */
.daily-date-selector { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:1.25rem; margin-bottom:1.25rem; }
.date-selector-wrapper { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.date-input-group { display:flex; align-items:center; gap:0.75rem; }
.date-input-group label { display:flex; align-items:center; gap:0.4rem; font-weight:600; color:var(--text-primary); }
.daily-date-input { padding:0.55rem 0.875rem; background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-radius:var(--radius-xs); color:var(--text-primary); font-size:0.88rem; }
.daily-date-input:focus { outline:none; border-color:var(--purple); }
.daily-date-info { display:flex; align-items:center; gap:0.5rem; margin-top:0.75rem; padding:0.6rem 1rem; background:rgba(124,58,237,0.12); border-radius:var(--radius-xs); color:var(--purple-light); font-weight:600; font-size:0.88rem; }
/* action-btn-secondary */
.btn-secondary { display:inline-flex; align-items:center; gap:0.4rem; padding:0.4rem 0.875rem; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-xs); color:var(--text-secondary); font-size:0.8rem; font-weight:600; cursor:pointer; transition:all 0.18s; }
.btn-secondary:hover { background:var(--glass-hover); color:var(--text-primary); }