/* ==========================================================================
   Parqueo — base stylesheet (self-hosted fonts, design tokens, reset).
   Visible text is Spanish; identifiers/classes are English ASCII (Principle I).
   Design tokens taken from design_handoff_panel_admin/README.md with the
   owner overrides sealed in DECR-005 (accent #1e40af, light sidebar).
   ========================================================================== */

/* -------------------------------------------------------------------------
   Self-hosted fonts (NO CDN, DECR-005). Files live in wwwroot/fonts/.
   Manrope shipped as a variable font (weight axis 200..800). Material Symbols
   Rounded shipped as its variable icon font.
   ------------------------------------------------------------------------- */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('fonts/material-symbols-rounded.woff2') format('woff2');
}

/* -------------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------------- */
:root {
    /* Accent (owner override, DECR-005) */
    --accent: #1e40af;
    --accent-dark: #193490; /* accent x 0.82 */
    --accent-soft: #eff4ff; /* subtle accent surface for active sub-items */
    --accent-shadow: rgba(30, 64, 175, .30);
    --avatar-gradient: linear-gradient(135deg, #1e40af, #60a5fa);

    /* Surfaces */
    --app-bg: #eef2f7;
    --card-bg: #ffffff;
    --card-border: #e9eef5;

    /* Light sidebar (owner override, DECR-005) */
    --side-bg: #ffffff;
    --side-text: #0f172a;
    /* --side-muted is the chrome's METADATA INK, and in light it sits on #ffffff (both the
       sidebar and the topbar paint white). At #94a3b8 that measured 2.56:1 in the browser,
       well under the 4.5:1 AA floor, on every one of its consumers: .sidebar__brand-sub,
       .sidebar__section, .sidebar__search .msi, the search placeholder, .sidebar__no-results,
       .sidebar__user-role, .sidebar__user .msi, .topbar__crumb, .topbar__search .msi and
       .auth-brand__sub. All ten are TEXT OR ICONS meant to be read -- none is a decorative
       surface -- so the defect belonged to the token, not to three of its callers.
       #64748b is 4.76:1 on white. The DARK value below is deliberately untouched: it already
       measured 4.99:1 on the topbar and 5.13:1 on the sidebar and needed no help, which is
       why this is one line in the light block and NOT a dark-scoped override rule. */
    --side-muted: #64748b;
    --side-hover: #eef2f7;
    --side-border: #e2e8f0;

    /* Borders / dividers */
    --border: #e2e8f0;
    --border-soft: #eef2f7;
    --border-softer: #f1f5f9;

    /* Text */
    --text: #0f172a;
    --text-2: #64748b;
    --text-3: #94a3b8;

    /* Status */
    --ok-text: #16a34a;
    --ok-bg: #dcfce7;
    --off-text: #64748b;
    --off-bg: #f1f5f9;
    --warn-text: #d97706;
    --warn-bg: #fef3c7;
    --danger-text: #e11d48;
    --danger-bg: #ffe4e6;

    /* Radii */
    --r-card: 16px;
    --r-control: 10px;
    --r-menu: 11px;
    --r-sub: 9px;
    --r-kpi-icon: 12px;
    --r-pill: 20px;

    /* Shadows */
    --shadow-card: 0 1px 3px rgba(15, 23, 42, .05);
    --shadow-accent: 0 4px 12px var(--accent-shadow);

    /* Spacing / density ("equilibrada" 18px, README) */
    --card-pad: 18px;
    --content-pad: 24px;
    --grid-gap: 16px;
    --topbar-h: 66px;
    --side-w: 256px;
    --side-w-collapsed: 74px;

    --motion: .22s cubic-bezier(.4, 0, .2, 1);
}

/* -------------------------------------------------------------------------
   Dark theme tokens (DECR-011). Applied when the root carries
   data-theme="dark" (explicit user choice from the profile) and, as an initial
   signal, when the OS prefers dark and the user has not explicitly chosen light.
   Component surfaces that hardcode light colors are remapped in admin.css.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    /* Accent (lighter on dark for contrast) */
    --accent: #3b82f6;
    --accent-dark: #2563eb;
    --accent-soft: #1d2a44;
    --accent-shadow: rgba(59, 130, 246, .35);
    --avatar-gradient: linear-gradient(135deg, #2563eb, #60a5fa);

    /* Surfaces */
    --app-bg: #0b1220;
    --card-bg: #111a2b;
    --card-border: #24314a;

    /* Sidebar */
    --side-bg: #0f1728;
    --side-text: #e2e8f0;
    --side-muted: #7c8aa3;
    --side-hover: #1b2740;
    --side-border: #24314a;

    /* Borders / dividers */
    --border: #2a3852;
    --border-soft: #223049;
    --border-softer: #1a2740;

    /* Text */
    --text: #e8eef7;
    --text-2: #a3b0c4;
    --text-3: #74839c;

    /* Status */
    --ok-text: #4ade80;
    --ok-bg: #0c2c1e;
    --off-text: #a3b0c4;
    --off-bg: #1b2740;
    --warn-text: #fbbf24;
    --warn-bg: #3a2c0c;
    --danger-text: #fb7185;
    --danger-bg: #3a1620;

    /* Shadows */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-accent: 0 4px 12px var(--accent-shadow);
}

/* Initial signal: follow the OS when no explicit choice has been stamped yet. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --accent: #3b82f6;
        --accent-dark: #2563eb;
        --accent-soft: #1d2a44;
        --accent-shadow: rgba(59, 130, 246, .35);
        --avatar-gradient: linear-gradient(135deg, #2563eb, #60a5fa);
        --app-bg: #0b1220;
        --card-bg: #111a2b;
        --card-border: #24314a;
        --side-bg: #0f1728;
        --side-text: #e2e8f0;
        --side-muted: #7c8aa3;
        --side-hover: #1b2740;
        --side-border: #24314a;
        --border: #2a3852;
        --border-soft: #223049;
        --border-softer: #1a2740;
        --text: #e8eef7;
        --text-2: #a3b0c4;
        --text-3: #74839c;
        --ok-text: #4ade80;
        --ok-bg: #0c2c1e;
        --off-text: #a3b0c4;
        --off-bg: #1b2740;
        --warn-text: #fbbf24;
        --warn-bg: #3a2c0c;
        --danger-text: #fb7185;
        --danger-bg: #3a1620;
        --shadow-card: 0 1px 3px rgba(0, 0, 0, .45);
    }
}

/* -------------------------------------------------------------------------
   Reset / base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--app-bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-dark);
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Material Symbols Rounded icon glyph */
.msi {
    font-family: 'Material Symbols Rounded';
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    user-select: none;
    flex: none;
}

/* Custom scrollbars for scrollable regions */
.scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Respect users who prefer reduced motion.
   The universal !important reset below is right for decoration, but .spinner (admin.css)
   is NOT decoration: its rotation is the loading indicator itself, on ~40 pages. Caught by
   the reset it became a wheel frozen at .001ms with a single iteration -- a user with this
   preference lost the "something is happening" signal entirely, which is a worse outcome
   than the motion. So the spinner is excepted and merely SLOWED: still unmistakably
   animated, but a calm continuous rotation with no flicker, which is what the preference
   actually asks for. Both declarations carry !important, so the winner is decided by
   specificity, not by order: .spinner is (0,1,0) and the universal selector is (0,0,0). */
@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation-duration: 2s !important;
        animation-iteration-count: infinite !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------------------------------------------------------------
   Blazor framework UI (error boundary / form validation) — kept from template
   ------------------------------------------------------------------------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--danger-text);
}

.validation-message {
    color: var(--danger-text);
    font-size: 12.5px;
    font-weight: 600;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    border-radius: var(--r-control);
}

.blazor-error-boundary::after {
    content: "Ha ocurrido un error.";
}