/* ============================================================================
   METRO VUELOS — Design System Tokens
   FIDS / NOC operational dashboard for Aeroparque Jorge Newbery (SABE)
   ============================================================================ */

/* ---------- Webfont imports ----------
   Inter slot is now served by the user-supplied SF Pro Display (Regular).
   JetBrains Mono + Roboto Condensed still come from Google Fonts — no
   brand-supplied files for those slots yet.

   Stack mirrors index.html: JetBrains Mono is the OPERATIONAL face (data,
   codes, timers, badges); SF Pro Display is body UI; Roboto Condensed is
   reserved for tight tabular display variants.
*/
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800;900&family=Roboto+Condensed:wght@400&display=swap');

@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SFPRODISPLAYREGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;

    /* ============================================================
       COLOR SYSTEM — Dark theme (default)
       Follows aeronautical FIDS convention: amber = departures,
       cyan = arrivals, red = cancelled, orange = delayed.
       ============================================================ */

    /* Surfaces */
    --mv-bg:            #0a0c14;   /* page background  */
    --mv-panel-bg:      #12151e;   /* card / panel     */
    --mv-header-bg:     #080a10;   /* header strip     */
    --mv-toolbar-bg:    #0d0f17;   /* secondary strip  */
    --mv-apron-bg:      #0b0d15;   /* stand grid bg    */
    --mv-thead-bg:      #181c28;   /* sticky thead     */
    --mv-row-hover:     #1e2230;
    --mv-input-bg:      #151825;
    --mv-border:        #252a36;

    /* Operational signals (FIDS) */
    --mv-dep:           #f5a623;   /* Departures — amber                       */
    --mv-arr:           #00d4ff;   /* Arrivals — cyan                          */
    --mv-ok:            #2dd4a8;   /* On time / scheduled (EST)                */
    --mv-pre:           #f5b731;   /* Pre-boarding (PRE)                       */
    --mv-ult:           #9b59b6;   /* Último Llamado (ULT — last call)         */
    --mv-delayed:       #ff8c00;   /* Demorado (DEM)                           */
    --mv-cancel:        #e53e4f;   /* Cancelado (CAN) + generic alert          */
    --mv-consult:       #e8a317;   /* Consultar (CON)                          */
    --mv-highlight:     #4a9eff;   /* Pinned / selected — operator blue         */

    /* Auto-rule decoration */
    --mv-rule-violet:   #7b68ee;   /* Auto-classified rows                     */
    --mv-rule-red:      #e53e4f;

    /* Translucent fills (use as backgrounds behind colored borders) */
    --mv-dep-fill:      rgba(245, 166,  35, 0.12);
    --mv-arr-fill:      rgba(  0, 212, 255, 0.12);
    --mv-ok-fill:       rgba( 45, 212, 168, 0.08);
    --mv-pre-fill:      rgba(245, 183,  49, 0.12);
    --mv-ult-fill:      rgba(155,  89, 182, 0.12);
    --mv-delayed-fill:  rgba(255, 140,   0, 0.08);
    --mv-cancel-fill:   rgba(229,  62,  79, 0.13);
    --mv-highlight-fill:rgba( 74, 158, 255, 0.12);
    --mv-violet-fill:   rgba(123, 104, 238, 0.12);

    /* Text */
    --mv-text:          #e8eaf0;   /* primary                                  */
    --mv-text-dim:      #6b7280;   /* dim / meta / labels                      */
    --mv-text-muted:    #aaa;      /* secondary line in history items          */

    /* ============================================================
       TYPOGRAPHY — base + semantic
       Three faces, no italics, no decorative weights below 400.
       ============================================================ */

    --mv-font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
    --mv-font-sans:     'SF Pro Display', 'Inter', system-ui, -apple-system, sans-serif;
    --mv-font-cond:     'Roboto Condensed', 'SF Pro Display', 'Inter', sans-serif;

    --mv-size-base:     14px;       /* body                                    */
    --mv-size-xxs:      8px;        /* stat-card labels, kpi labels            */
    --mv-size-xs:       9px;        /* bubble buttons, hints                   */
    --mv-size-sm:       10px;       /* footer, history, pills                  */
    --mv-size-md:       11px;       /* tool buttons, panel headers             */
    --mv-size-lg:       12px;       /* table body                              */
    --mv-size-xl:       14px;       /* default                                 */
    --mv-size-2xl:      18px;       /* brand                                   */
    --mv-size-3xl:      22px;       /* stat-card-value                         */
    --mv-size-4xl:      36px;       /* clock                                   */
    --mv-size-5xl:      46px;       /* clock — wallboard                       */

    --mv-track-tight:   -0.5px;
    --mv-track-base:    0;
    --mv-track-wide:    0.5px;
    --mv-track-wider:   1px;
    --mv-track-widest:  2px;

    /* ============================================================
       SHAPE & ELEVATION
       Tight radii (3–6 px); no large rounding. Borders carry the
       weight; shadows are reserved for hover glow + map dots.
       ============================================================ */

    --mv-radius-xs:     2px;
    --mv-radius-sm:     3px;
    --mv-radius-md:     4px;
    --mv-radius-lg:     6px;
    --mv-radius-pill:   14px;       /* bubble buttons only                     */

    --mv-shadow-glow:        0 0 10px currentColor;          /* numerics       */
    --mv-shadow-glow-strong: 0 0 15px rgba(74, 158, 255, 0.4); /* pinned stand */
    --mv-shadow-hover:       0 0 15px rgba(255, 255, 255, 0.4);
    --mv-shadow-text:        0 0 8px currentColor;

    /* ============================================================
       SPACING — 4 px grid (occasional 5/6 for legacy density)
       ============================================================ */

    --mv-space-1:       2px;
    --mv-space-2:       4px;
    --mv-space-3:       6px;
    --mv-space-4:       8px;
    --mv-space-5:       10px;
    --mv-space-6:       12px;
    --mv-space-8:       16px;
    --mv-space-10:      20px;       /* header/footer horizontal pad            */

    /* ============================================================
       MOTION
       Single duration for hover (0.2s). Pulse / flash on critical
       state pills. No bounces, no spring physics.
       ============================================================ */

    --mv-dur-fast:      0.12s;
    --mv-dur-base:      0.2s;
    --mv-dur-slow:      0.5s;
    --mv-ease:          ease;
    --mv-ease-out:      cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------------------------------------------
   LIGHT THEME — override under body.light-theme
   Adapted from the live override block. Used in daylight mode at
   operator desks; not the default.
---------------------------------------------------------------- */
body.light-theme,
.theme-light {
    --mv-bg:            #f0f2f5;
    --mv-panel-bg:      #ffffff;
    --mv-header-bg:     #ffffff;
    --mv-toolbar-bg:    #f8f9fa;
    --mv-apron-bg:      #f5f6f8;
    --mv-thead-bg:      #f8f9fa;
    --mv-row-hover:     #eef1f5;
    --mv-input-bg:      #ffffff;
    --mv-border:        #d1d5db;

    --mv-dep:           #c98200;
    --mv-arr:           #0097a7;
    --mv-ok:            #16a085;
    --mv-pre:           #c77a00;
    --mv-ult:           #6c5ce7;
    --mv-delayed:       #e07b00;
    --mv-cancel:        #c0392b;
    --mv-consult:       #b8860b;
    --mv-highlight:     #2980b9;

    --mv-text:          #1a1a2e;
    --mv-text-dim:      #7f8c8d;
    --mv-text-muted:    #555;
}

/* ----------------------------------------------------------------
   SEMANTIC TYPOGRAPHY ROLES
   Drop-in classes for common surfaces. Numerals always JetBrains
   Mono — never trust kerning on operational displays.
---------------------------------------------------------------- */

.mv-brand {
    font-family: var(--mv-font-mono);
    font-weight: 900;
    font-size: var(--mv-size-2xl);
    letter-spacing: var(--mv-track-wider);
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 10px rgba(156, 39, 176, 0.6);
}
.mv-brand-accent { color: var(--mv-dep); }

.mv-clock {
    font-family: var(--mv-font-mono);
    font-weight: 700;
    font-size: var(--mv-size-4xl);
    letter-spacing: var(--mv-track-widest);
    line-height: 1;
    color: #fff;
}

.mv-stat-label,
.mv-kpi-label,
.mv-panel-header {
    font-family: var(--mv-font-mono);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--mv-text-dim);
    letter-spacing: var(--mv-track-wide);
}
.mv-stat-label  { font-size: var(--mv-size-xxs); }
.mv-kpi-label   { font-size: var(--mv-size-xxs); }
.mv-panel-header{ font-size: var(--mv-size-md);  letter-spacing: var(--mv-track-wider); }

.mv-stat-value {
    font-family: var(--mv-font-mono);
    font-weight: 900;
    font-size: var(--mv-size-3xl);
    line-height: 1;
    text-shadow: var(--mv-shadow-text);
}

.mv-th {
    font-family: var(--mv-font-sans);
    text-transform: uppercase;
    font-weight: 700;
    font-size: var(--mv-size-sm);
    color: var(--mv-text-dim);
    letter-spacing: var(--mv-track-wide);
    white-space: nowrap;
}

.mv-td {
    font-family: var(--mv-font-sans);
    font-size: var(--mv-size-lg);
    color: var(--mv-text);
    white-space: nowrap;
}
.mv-td-mono { font-family: var(--mv-font-mono); }

.mv-body  { font-family: var(--mv-font-sans); font-size: var(--mv-size-base); color: var(--mv-text); }
.mv-mono  { font-family: var(--mv-font-mono); }
.mv-meta  { font-family: var(--mv-font-mono); font-size: var(--mv-size-sm); color: var(--mv-text-dim); }

.mv-bubble {
    font-family: var(--mv-font-mono);
    font-weight: 700;
    font-size: var(--mv-size-xs);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.mv-shortcut-hint {
    display: inline-block;
    font-family: var(--mv-font-mono);
    font-size: var(--mv-size-xs);
    padding: 0 4px;
    margin-left: 4px;
    border: 1px solid #555;
    border-radius: var(--mv-radius-sm);
    color: #888;
    line-height: 16px;
    vertical-align: middle;
}