/* ============================================================
   AkiraSC Layout System
   Dark theme profesional - Smart City Vision Platform
   ============================================================ */

:root {
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 60px;
    --header-height: 52px;

    /* ============================================================
       THEME: "H" — slate (medio azulado) + turquesa, 2026-08.
       This entire :root color block IS the theme. Every dark surface in
       the app is one rung of the SAME slate ramp below (consistent hue,
       just varying lightness) — not independently-picked grays. To swap
       to a different theme later, replace this whole block (base palette
       + the Surfaces/Text/Borders/Accents sections right after it) as one
       unit, keep --success/--danger/--warning/--info (semantic, themes
       shouldn't touch those), and re-check contrast on --accent — see the
       --accent-ink note below, that pairing rule isn't theme-specific.

       The slate ramp (darkest to lightest — every --bg- and --ak-surface-
       token below is one of these six, reused rather than picking a new
       one-off shade per token):
         slate-50  #141519   slate-150 #1a1c22   slate-250 #1e2027
         slate-100 #17191e   slate-200 #1c1f27   slate-300 #292c35
       ============================================================ */
    --bg-primary: #17191e;    /* slate-100: page background */
    --bg-secondary: #1a1c22;  /* slate-150: sidebar / header / table head */
    --bg-card: #1e2027;       /* slate-250: cards, modals, toasts, stat tiles */
    --bg-hover: #292c35;      /* slate-300: hover state */
    --bg-elevated: #1a1c22;   /* slate-150: dropdown / popover menus */
    --accent: #17c3b2;
    --accent-hover: #12a89a;
    /* accent es claro (turquesa) — texto/icono blanco sobre fondo de acento sólido
       cae a ~2.2:1 (falla WCAG AA). accent-ink es el texto oscuro que va SIEMPRE
       que --accent se usa como background solido (botones, nav activo, avatares,
       badges). No aplica cuando --accent se usa como color de texto sobre fondo
       oscuro (eso ya contrasta bien). */
    --accent-ink: #04241f;
    --text-primary: #eceef0;
    --text-secondary: #aeb3ba;
    --text-muted: #7a8087;
    --border: #31353f;
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;
    --sidebar-transition: width 0.2s ease;

    /* ============================================================
       SEMANTIC TOKENS (--ak-*)
       Source of truth for color/spacing/radius/shadow. New/touched CSS
       should read these instead of raw hex. See UI_RULES.md.
       Existing --bg-, --text-, --accent (etc.) vars above are kept as-is
       for backward compatibility; the --ak- names alias or extend them.
       ============================================================ */

    /* Surfaces — darkest to lightest */
    --ak-surface-primary: var(--bg-primary);      /* page background */
    --ak-surface-secondary: var(--bg-secondary);  /* sidebar / header / table head */
    --ak-surface-elevated: var(--bg-card);        /* cards, modals, toasts, stat tiles */
    --ak-surface-hover: var(--bg-hover);          /* hover state: nav items, rows */
    --ak-surface-dropdown: var(--bg-elevated);    /* dropdown / popover menus */
    --ak-surface-dark: #141519;                   /* slate-50: deep panel bg — modal header, table-dark, section headers */
    --ak-surface-sunken: #1a1c22;                 /* slate-150: recessed content, table row bg */
    --ak-surface-sunken-alt: #17191e;             /* slate-100: alternating striped row */
    --ak-surface-active: #292c35;                 /* slate-300: selected/hovered table row */
    --ak-surface-input-dark: #141519;             /* slate-50: form inputs inside dark modals */

    /* Text */
    --ak-text-primary: var(--text-primary);
    --ak-text-secondary: var(--text-secondary);
    --ak-text-muted: var(--text-muted);
    --ak-text-on-dark: #f1f6ff;      /* headings on --ak-surface-dark */
    --ak-text-bright: #eaf1ff;       /* labels/values on dark cards & modals */
    --ak-text-on-active: #f3f7ff;    /* text on --ak-surface-active */
    --ak-text-muted-dark: #cbd8ec;   /* muted/secondary text inside dark modals */
    --ak-text-placeholder: #9aa9c2;
    --ak-text-dimmed: #b4c0d5;       /* secondary/neutral badges & rows */
    --ak-text-label-dark: #d9e4f7;   /* form labels inside dark modals */

    /* Borders */
    --ak-border-subtle: rgba(148, 163, 184, .2);
    --ak-border-default: var(--border);
    --ak-border-strong: #3a3f4c;
    --ak-border-input-dark: #3a3f4c;
    --ak-border-focus: var(--accent);

    /* Accents — semantic, not decorative */
    --ak-accent-primary: var(--accent);
    --ak-accent-ink: var(--accent-ink);   /* dark text/icon for solid-accent backgrounds */
    --ak-accent-success: var(--success);
    --ak-accent-warning: var(--warning);
    --ak-accent-danger: var(--danger);
    --ak-accent-info: var(--info);

    /* Spacing scale — matches the app's existing common paddings */
    --ak-space-xs: 4px;
    --ak-space-sm: 8px;
    --ak-space-md: 16px;
    --ak-space-lg: 24px;
    --ak-space-xl: 32px;

    /* Radius scale — matches existing usage: 6px controls, 8px cards/panels, 12px modals */
    --ak-radius-sm: 6px;
    --ak-radius-md: 8px;
    --ak-radius-lg: 12px;

    /* Shadow scale — matches existing usage: dropdown/toast, camera-filter card, modal */
    --ak-shadow-sm: 0 4px 16px rgba(0, 0, 0, .4);
    --ak-shadow-md: 0 10px 28px rgba(2, 8, 23, .42);
    --ak-shadow-lg: 0 28px 80px rgba(0, 0, 0, .62);

    /* Typography scale — matches existing usage, see UI_RULES.md */
    --ak-font-size-xs: 11px;
    --ak-font-size-sm: 12px;
    --ak-font-size-base: 13px;
    --ak-font-size-md: 14px;
    --ak-font-size-lg: 16px;
    --ak-font-size-xl: 20px;
    --ak-font-size-2xl: 22px;

    /* Z-index scale — documents current de facto stacking order.
       Not yet applied to existing rules (sidebar responsive stacking has
       base/desktop/mobile overrides that interact by cascade order; renaming
       those in place risked changing behavior, so this is reference-only
       for new work until that's audited separately). See UI_RULES.md. */
    --ak-z-content: 10;
    --ak-z-sidebar: 100;
    --ak-z-sidebar-mobile: 200;
    --ak-z-dropdown: 20;
    --ak-z-sticky: 2;
    --ak-z-overlay: 5000;
    --ak-z-toast: 9999;
}

/* ---- Breakpoints (documentation — CSS custom properties can't be used
   inside @media conditions without a preprocessor). Existing @media rules
   below intentionally keep their current 768/769px values unchanged.
   mobile: <768px · tablet: 768–1023px · desktop: 1024–1439px · wide: >=1440px
   See UI_RULES.md. */

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

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    /* Native browser controls (date/time picker, checkboxes, radios, range
       sliders) paint their built-in accent from this property — unset, they
       default to the OS/browser blue, independent of --accent entirely. */
    accent-color: var(--accent);
}

/* Chrome/Edge paint autofilled fields with their own light-blue background
   via a UA style that ignores --bg-primary; only this specific trick (huge
   inset box-shadow + -webkit-text-fill-color) overrides it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    box-shadow: 0 0 0 1000px var(--bg-primary) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Base link color — akira.css never set one, so any <a> without its own class
   (.nav-item, .btn, .user-menu-item, etc. all set their own and win by
   specificity) fell back to Bootstrap CDN's default blue regardless of theme. */
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* ============================================================
   MAIN LAYOUT (sidebar + content)
   ============================================================ */

.akira-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ---- Sidebar ---- */
.akira-sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: var(--sidebar-transition);
    overflow: hidden;
    z-index: 100;
}

.akira-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Brand */
.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    min-height: var(--header-height);
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
}

.brand-icon {
    color: var(--accent);
    font-size: 18px;
    flex-shrink: 0;
}

.brand-text {
    transition: opacity 0.2s;
    letter-spacing: .02em;
}

.brand-text-kana {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0;
    margin-left: 2px;
}

.collapsed .brand-text { opacity: 0; width: 0; }
.collapsed .nav-label { opacity: 0; width: 0; }
.collapsed .nav-section-title { opacity: 0; }
.collapsed .user-details { opacity: 0; width: 0; }

.sidebar-toggle {
    color: var(--text-secondary);
    padding: 4px 6px;
    flex-shrink: 0;
}

.sidebar-toggle:hover { color: var(--text-primary); }

/* Nav sections */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.nav-search-trigger {
    display: flex; align-items: center; gap: 10px; width: calc(100% - 16px);
    margin: 8px; padding: 7px 10px; border-radius: 8px;
    background: rgba(255,255,255,.05); border: 1px solid var(--border, rgba(255,255,255,.12));
    color: var(--text-muted, #9aa4b2); font-size: .85rem; cursor: pointer;
}
.nav-search-trigger:hover { background: rgba(255,255,255,.09); color: var(--text, #e8edf8); }
.nav-search-trigger kbd {
    margin-left: auto; font-size: .68rem; border: 1px solid rgba(255,255,255,.2);
    border-radius: 4px; padding: 1px 5px; opacity: .7;
}
.akira-sidebar.collapsed .nav-search-trigger { justify-content: center; }
.akira-sidebar.collapsed .nav-search-trigger .nav-label,
.akira-sidebar.collapsed .nav-search-trigger kbd { display: none; }

.nav-section {
    padding: 6px 0;
}

.nav-section + .nav-section {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 10px;
}

.nav-section-title {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    padding: 2px 16px 6px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 6px;
    margin: 1px 8px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}

.nav-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.nav-label {
    font-size: 13px;
    overflow: hidden;
    transition: opacity 0.2s, width 0.2s;
}

/* Sidebar Footer (user info) */
.sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px;
    border-top: 1px solid var(--border);
    min-height: 60px;
    overflow: hidden;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.user-avatar {
    font-size: 22px;
    color: var(--accent);
    flex-shrink: 0;
}

.user-details {
    overflow: hidden;
    transition: opacity 0.2s, width 0.2s;
}

.user-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 10px;
    font-weight: 700;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 1px 6px;
    border-radius: 10px;
}

.logout-btn {
    color: var(--text-muted);
    padding: 4px 6px;
    flex-shrink: 0;
}
.logout-btn:hover { color: var(--danger); }

.user-menu { position: relative; cursor: pointer; }

.user-menu .user-info { flex: 1; cursor: pointer; }

.user-menu-caret {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 4px;
}

.user-menu-dropdown {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 8px;
    right: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--ak-radius-md);
    box-shadow: var(--ak-shadow-sm);
    overflow: hidden;
    z-index: 20;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.user-menu-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }

.user-menu-item-danger:hover { color: var(--danger); }

.profile-avatar {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 24px;
    font-weight: 700;
}

/* ---- Content Area ---- */
.akira-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 769px) {
    .akira-sidebar {
        position: relative;
        z-index: 5;
    }

    .akira-content {
        position: relative;
        z-index: 10;
    }
}

/* Header */
.akira-header {
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    flex-shrink: 0;
}

.sidebar-toggle-mobile { display: none; color: var(--text-secondary); }

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Main */
.akira-main {
    flex: 1;
    overflow-y: auto;
    padding: var(--ak-space-lg);
}

/* Footer */
.akira-footer {
    padding: 8px 20px;
    border-top: 1px solid var(--border);
    text-align: center;
}

/* ============================================================
   AUTH LAYOUT
   ============================================================ */

.auth-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-primary);
    align-items: center;
    justify-content: center;
}

.auth-container {
    width: 100%;
    max-width: 420px;
    padding: var(--ak-space-md);
}

.auth-footer {
    margin-top: 24px;
    text-align: center;
}

/* ============================================================
   CARDS & PANELS
   ============================================================ */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--ak-radius-md);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 14px 18px;
    font-weight: 600;
    color: var(--text-primary) !important;
}

.card-body { padding: 18px; }

/* Keep group/container headings readable on dark theme */
.card-header,
.card-header strong,
.card-header small,
.card-header .text-muted,
.card .card-title,
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.akira-main h1,
.akira-main h2,
.akira-main h3,
.akira-main h4,
.akira-main h5,
.akira-main h6 {
    color: var(--text-primary) !important;
}

/* Services page table contrast */
.services-table,
.services-table th,
.services-table td,
.services-table strong,
.services-table small,
.services-table .text-muted {
    color: #fff !important;
}

/* Stat cards */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--ak-radius-md);
    padding: var(--ak-space-md);
    display: flex;
    align-items: center;
    gap: 14px;
}

.stat-icon {
    font-size: 24px;
    width: 44px;
    height: 44px;
    border-radius: var(--ak-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon.primary { background: rgba(23,195,178,.15); color: var(--accent); }
.stat-icon.success { background: rgba(34,197,94,.15); color: var(--success); }
.stat-icon.danger  { background: rgba(239,68,68,.15); color: var(--danger); }
.stat-icon.warning { background: rgba(245,158,11,.15); color: var(--warning); }

.stat-value { font-size: var(--ak-font-size-2xl); font-weight: 700; line-height: 1; }
.stat-label { font-size: var(--ak-font-size-sm); color: var(--text-muted); margin-top: 2px; }

/* ============================================================
   FORMS
   ============================================================ */

.form-control, .form-select {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--ak-radius-sm);
    padding: 8px 12px;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23aeb3ba' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 14px 14px;
}

.form-select:disabled {
    background-color: #171c27;
    color: var(--ak-text-muted);
    opacity: 1;
}

.form-control:focus, .form-select:focus {
    background: var(--bg-primary);
    border-color: var(--accent);
    color: var(--text-primary);
    box-shadow: 0 0 0 2px rgba(23,195,178,.2);
    outline: none;
}

.form-control::placeholder { color: var(--text-muted); opacity: .95; }
.form-label { font-size: var(--ak-font-size-base); font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn { border-radius: var(--ak-radius-sm); font-size: var(--ak-font-size-base); font-weight: 500; padding: 7px 14px; }

/* Bootstrap keeps :disabled styling on its OWN --bs-btn-disabled-* variables,
   separate from the color/background properties above — .btn-primary/
   .btn-outline-primary only ever touched the enabled state, so a disabled
   button fell through to Bootstrap's own blue disabled-state variables
   (visible via .btn:disabled { color: var(--bs-btn-disabled-color); ... }).
   Every accent button variant needs these set too. */
.btn-primary {
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600;
    --bs-btn-disabled-color: var(--accent-ink);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-add {
    background: linear-gradient(180deg, #1cd1bf 0%, #12a89a 100%);
    border-color: #12a89a;
    color: var(--accent-ink);
    font-weight: 600;
}

.btn-add:hover {
    background: linear-gradient(180deg, #22e0cc 0%, #17c3b2 100%);
    border-color: #17c3b2;
    color: var(--accent-ink);
}

.btn-outline-primary {
    border-color: var(--accent); color: var(--accent);
    --bs-btn-disabled-color: var(--accent);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--accent);
}
.btn-outline-primary:hover { background: var(--accent); color: var(--accent-ink); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-outline-secondary { border-color: var(--border); color: var(--text-secondary); }
.btn-outline-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn-link { color: var(--text-secondary); text-decoration: none; }
.btn-link:hover { color: var(--text-primary); }

/* ============================================================
   BOOTSTRAP "PRIMARY" UTILITY CLASSES
   .bg-primary / .border-primary / .text-primary / .text-bg-primary — raw
   Bootstrap CDN utilities, distinct from our --bg-primary/--text-primary
   CSS *variables* (same names, different namespaces: one is a class, one
   is a custom property). Bootstrap's own rules ship with !important, so
   these need it too to win. Several pages use these directly (card
   headers, borders, form-switch toggles) instead of our tokens/classes —
   global fix here covers all of them without touching page markup.
   ============================================================ */

.bg-primary { background-color: var(--accent) !important; }
.border-primary { border-color: var(--accent) !important; }
.text-primary { color: var(--accent) !important; }
.text-bg-primary { background-color: var(--accent) !important; color: var(--accent-ink) !important; }

/* .bg-primary is commonly paired with Bootstrap's .text-white (e.g. a
   card-header) — accent is light, so that combination needs dark ink,
   not white. Scoped to the pairing, not a blanket .text-white override,
   since plain .text-white is correct on plenty of other dark surfaces. */
.bg-primary.text-white,
.bg-primary .text-white { color: var(--accent-ink) !important; }

/* Bootstrap's "subtle" pastel variants (badge bg-primary-subtle +
   text-primary-emphasis + border-primary-subtle) also never touched
   --accent — rendered as Bootstrap's own light-blue tint ("celeste") with
   text that didn't reliably contrast against it. Same tinted-badge pattern
   as .badge-enabled/.badge-danger below: soft accent bg, solid accent text. */
.bg-primary-subtle { background-color: rgba(23, 195, 178, .16) !important; }
.text-primary-emphasis { color: var(--accent) !important; }
.border-primary-subtle { border-color: rgba(23, 195, 178, .4) !important; }

/* Bootstrap's checked form-switch/checkbox defaults to Bootstrap-blue */
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* ============================================================
   TABLES
   ============================================================ */

.table { color: var(--text-primary); }
.table > thead { border-bottom: 2px solid var(--border); }
.table > thead > tr > th {
    font-size: var(--ak-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    padding: 10px 12px;
    background: var(--bg-secondary);
}

.table > tbody > tr > td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    background: var(--ak-surface-sunken);
}

.table > tbody > tr:hover > td { background: var(--bg-hover); }
.table-responsive { border-radius: var(--ak-radius-md); overflow: hidden; border: 1px solid var(--border); }

.table.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: var(--ak-surface-sunken);
    color: var(--text-primary);
}

.table.table-striped > tbody > tr:nth-of-type(even) > * {
    background: var(--ak-surface-sunken-alt);
    color: var(--text-primary);
}

.table.table-hover > tbody > tr:hover > * {
    background: var(--ak-surface-active);
    color: var(--ak-text-on-active);
}

.table.table-dark {
    --bs-table-bg: var(--ak-surface-dark);
    --bs-table-striped-bg: var(--ak-surface-sunken-alt);
    --bs-table-striped-color: var(--ak-text-bright);
    --bs-table-active-bg: var(--ak-surface-active);
    --bs-table-active-color: var(--ak-text-on-active);
    --bs-table-hover-bg: var(--ak-surface-active);
    --bs-table-hover-color: var(--ak-text-on-active);
    --bs-table-border-color: var(--ak-border-strong);
    --bs-table-color: var(--ak-text-bright);
}

.table > :not(caption) > * > * {
    border-color: var(--border);
}

/* Bootstrap's contextual row classes (.table-secondary, .table-danger, etc.)
   drive their background through --bs-table-bg/--bs-table-accent-bg CSS vars,
   consumed by .table > :not(caption) > * > * — overriding the computed
   `background` downstream loses to that var() in some striped/hover
   combinations. Override the vars at the source instead, same technique as
   .table.table-dark below. */
.table-secondary {
    --bs-table-bg: #1e2027;
    --bs-table-striped-bg: #1e2027;
    --bs-table-active-bg: #292c35;
    --bs-table-hover-bg: #292c35;
    --bs-table-accent-bg: transparent;
    --bs-table-color: var(--ak-text-dimmed);
    --bs-table-striped-color: var(--ak-text-dimmed);
    --bs-table-hover-color: var(--ak-text-dimmed);
    color: var(--ak-text-dimmed) !important;
}

.table-danger {
    --bs-table-bg: #3a1f24;
    --bs-table-striped-bg: #3a1f24;
    --bs-table-active-bg: #47262c;
    --bs-table-hover-bg: #47262c;
    --bs-table-accent-bg: transparent;
    --bs-table-color: #fca5a5;
    --bs-table-striped-color: #fca5a5;
    --bs-table-hover-color: #fca5a5;
    color: #fca5a5 !important;
}

.table thead.table-dark th {
    background: var(--ak-surface-dark) !important;
    color: #d4dced;
    border-color: var(--ak-border-strong);
}

/* ============================================================
   BADGES
   ============================================================ */

.badge-enabled { background: rgba(34,197,94,.15); color: var(--success); border: 1px solid var(--success); border-radius: 12px; padding: 2px 8px; font-size: 11px; }
.badge-disabled { background: rgba(107,114,128,.15); color: var(--text-muted); border: 1px solid var(--border); border-radius: 12px; padding: 2px 8px; font-size: 11px; }
.badge-danger { background: rgba(239,68,68,.15); color: var(--danger); border: 1px solid var(--danger); border-radius: 12px; padding: 2px 8px; font-size: 11px; }
.badge-warning { background: rgba(245,158,11,.15); color: var(--warning); border: 1px solid var(--warning); border-radius: 12px; padding: 2px 8px; font-size: 11px; }

/* ============================================================
   ALERTS (inline)
   ============================================================ */

.alert { border-radius: var(--ak-radius-sm); font-size: var(--ak-font-size-base); }
.alert-danger { background: rgba(239,68,68,.1); border-color: var(--danger); color: #fca5a5; }
.alert-success { background: rgba(34,197,94,.1); border-color: var(--success); color: #86efac; }
.alert-warning { background: rgba(245,158,11,.1); border-color: var(--warning); color: #fcd34d; }
.alert-info { background: rgba(59,130,246,.1); border-color: var(--info); color: #93c5fd; }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.toast-container-fixed {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast-item {
    min-width: 300px;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--ak-radius-md);
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: var(--ak-shadow-sm);
    pointer-events: all;
    animation: toast-in .25s ease;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.toast-item.success { border-left: 3px solid var(--success); }
.toast-item.error   { border-left: 3px solid var(--danger); }
.toast-item.warning { border-left: 3px solid var(--warning); }
.toast-item.info    { border-left: 3px solid var(--info); }

.toast-icon.success { color: var(--success); }
.toast-icon.error   { color: var(--danger); }
.toast-icon.warning { color: var(--warning); }
.toast-icon.info    { color: var(--info); }

.toast-message { flex: 1; font-size: var(--ak-font-size-base); }
.toast-close { color: var(--text-muted); cursor: pointer; padding: 0 2px; }
.toast-close:hover { color: var(--text-primary); }

/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .74);
    backdrop-filter: blur(2px);
    z-index: 5000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem 1rem;
    animation: overlay-in .15s ease;
}

@keyframes overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-dialog-custom {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--ak-radius-lg);
    box-shadow: var(--ak-shadow-lg);
    animation: modal-in .2s ease;
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    width: 100%;
}

@keyframes modal-in {
    from { opacity: 0; transform: scale(.96) translateY(-10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .95rem 1.2rem;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    color: var(--ak-text-on-dark);
    background: var(--ak-surface-dark);
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Modal arrastrable (ModalDialog Draggable=true, ver ModalDrag.js): el header es el asa. */
.modal-draggable .modal-header-custom {
    cursor: move;
    user-select: none;
    touch-action: none;
}

.modal-body-custom { padding: 1.1rem 1.2rem 1.25rem; overflow-y: auto; flex: 1; }
.modal-footer-custom {
    padding: .9rem 1.2rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    position: sticky;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(31, 41, 55, .82), rgba(31, 41, 55, .98));
}

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.modal-header,
.modal-footer {
    border-color: var(--border);
}

.modal .form-control,
.modal .form-select,
.modal textarea {
    background: var(--ak-surface-input-dark);
    border-color: var(--ak-border-input-dark);
    color: var(--ak-text-bright);
}

.modal .form-control::placeholder,
.modal textarea::placeholder {
    color: var(--ak-text-placeholder);
}

.modal .form-label,
.modal .form-check-label,
.modal .text-dark {
    color: var(--ak-text-label-dark) !important;
}

/* ModalDialog custom shell (used across pages) */
.modal-overlay .form-check-label {
    color: var(--ak-text-bright) !important;
    font-weight: 600;
}

.modal-overlay .form-label {
    color: var(--ak-text-bright);
}

.modal-overlay .text-muted,
.modal-overlay small {
    color: var(--ak-text-muted-dark) !important;
}

.modal .text-muted {
    color: var(--ak-text-muted-dark) !important;
}

/* Camera Filters page - global fallback for contrast and modal look */
.cf-form-modal {
    background: linear-gradient(180deg, var(--ak-surface-dark) 0%, var(--ak-surface-sunken-alt) 100%);
    border: 1px solid #2b3a51;
    border-radius: var(--ak-radius-lg);
    padding: 1rem;
    box-shadow: var(--ak-shadow-md);
}

.cf-header-card {
    background: linear-gradient(135deg, #253043 0%, #1c2535 100%) !important;
    border: 1px solid #3a4c69 !important;
}

.cf-card-title {
    color: var(--ak-text-on-dark) !important;
    font-weight: 700;
}

.cf-card-sub {
    color: #c2d2ec !important;
    font-size: .82rem;
}

.cf-switch-label {
    color: #dce8fb !important;
    font-weight: 600;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title { font-size: var(--ak-font-size-xl); font-weight: 700; margin: 0; }
.page-subtitle { font-size: var(--ak-font-size-base); color: var(--text-muted); margin-top: 2px; }

/* Bootstrap text helpers tuned for dark theme readability */
.text-muted,
small.text-muted,
.card .text-muted,
.table .text-muted,
.form-text {
    color: var(--text-muted) !important;
}

.text-secondary,
.card .text-secondary,
.table .text-secondary,
.form-check-label,
.input-group-text {
    color: var(--text-secondary) !important;
}

/* ============================================================
   TOOLBAR / SEARCH
   ============================================================ */

.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: var(--ak-space-md);
}

.search-input {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}

/* ============================================================
   LOADING
   ============================================================ */

.loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: var(--text-muted);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state-icon { font-size: 48px; margin-bottom: var(--ak-space-md); opacity: .5; }
.empty-state-title { font-size: var(--ak-font-size-lg); font-weight: 600; color: var(--text-secondary); }
.empty-state-text { font-size: var(--ak-font-size-base); margin-top: 6px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .akira-sidebar {
        position: fixed;
        height: 100vh;
        transform: translateX(-100%);
        z-index: 200;
    }

    .akira-sidebar.collapsed {
        transform: translateX(0);
        width: var(--sidebar-width);
    }

    .sidebar-toggle-mobile { display: inline-flex; }
    .akira-main { padding: var(--ak-space-md); }

    .page-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   UTILITIES
   ============================================================ */

.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-muted { color: var(--text-muted) !important; }
.text-secondary-color { color: var(--text-secondary); }
.text-secondary { color: var(--text-secondary) !important; }
.border-color { border-color: var(--border) !important; }
.bg-card { background: var(--bg-card); }

/* ============================================================
   GRID TOOLBAR / PAGINATION / ROW ACTIONS
   Shared/Components/GridToolbar.razor, Shared/Components/Pager.razor.
   See GRID_STANDARD.md.
   ============================================================ */

.grid-toolbar {
    display: flex;
    align-items: center;
    gap: var(--ak-space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--ak-space-sm);
}

.grid-toolbar-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 200px;
    max-width: 360px;
    display: flex;
    align-items: center;
}

.grid-toolbar-search .form-control { padding-left: 2.1rem; }

.grid-toolbar-search-icon {
    position: absolute;
    left: .7rem;
    color: var(--text-muted);
    font-size: .8rem;
    pointer-events: none;
}

.grid-toolbar-search-clear {
    position: absolute;
    right: .5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
}

.grid-toolbar-search-clear:hover { color: var(--text-primary); }

.grid-toolbar-filters {
    display: flex;
    gap: var(--ak-space-sm);
    flex-wrap: wrap;
}

.grid-toolbar-filters .form-select { width: auto; min-width: 140px; }

/* Bootstrap .form-control trae width:100% propio — sin este reset, un input de texto/fecha
   dentro de un filtro hereda ese 100% como su flex-basis (flex-basis:auto usa el width
   especificado) y termina "ocupando toda la fila", empujando al siguiente filtro a una línea
   nueva aunque sobre espacio horizontal de sobra. Mismo problema que .form-select ya resuelve
   arriba, pero para inputs (ej. el filtro de día en /multas). */
.grid-toolbar-filters .form-control { width: auto; min-width: 140px; }

.grid-toolbar-clear { white-space: nowrap; }

.grid-toolbar-loading { color: var(--ak-accent-primary); font-size: .9rem; }

.grid-toolbar-meta {
    font-size: var(--ak-font-size-sm);
    color: var(--text-muted);
    margin: 4px 0 var(--ak-space-sm);
}

@media (max-width: 768px) {
    .grid-toolbar-search { max-width: none; flex-basis: 100%; }
}

.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable-th:hover { color: var(--text-primary); }

.sortable-th-icon {
    margin-left: 5px;
    font-size: 1em;
    color: var(--text-muted);
    opacity: .85;
}

.sortable-th:hover .sortable-th-icon { opacity: 1; }

.grid-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ak-space-md);
    flex-wrap: wrap;
    margin-top: var(--ak-space-sm);
    font-size: var(--ak-font-size-base);
    color: var(--text-secondary);
}

.grid-pager-size { display: flex; align-items: center; gap: 8px; }
.grid-pager-size select { width: auto; }
.grid-pager-range { font-variant-numeric: tabular-nums; }
.grid-pager-nav { display: flex; gap: 4px; }

@media (max-width: 576px) {
    .grid-pager { justify-content: center; }
}

.row-actions { display: inline-flex; align-items: center; gap: 4px; }
.row-actions-overflow { position: relative; display: inline-block; }

.row-actions-overflow-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 160px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--ak-radius-md);
    box-shadow: var(--ak-shadow-sm);
    z-index: var(--ak-z-dropdown);
    overflow: hidden;
}

.row-actions-overflow-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: var(--ak-font-size-base);
    text-align: left;
    cursor: pointer;
}

.row-actions-overflow-menu button:hover { background: rgba(255, 255, 255, .06); }
.row-actions-overflow-menu button.danger:hover { color: var(--danger); }

/* ============================================================
   HEADER USER MENU (top-right — Shared/Layout/MainLayout.razor)
   ============================================================ */

.header-user-menu { position: relative; }

.header-user-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px 4px 4px;
    color: var(--text-primary);
    cursor: pointer;
}

.header-user-trigger:hover { background: var(--bg-hover); }

.header-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.header-user-avatar-lg { width: 44px; height: 44px; font-size: 16px; }

.header-user-name { font-size: var(--ak-font-size-base); font-weight: 600; white-space: nowrap; }
.header-user-caret { font-size: 10px; color: var(--text-muted); }

.header-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--ak-radius-md);
    box-shadow: var(--ak-shadow-sm);
    z-index: var(--ak-z-dropdown);
    overflow: hidden;
}

.header-user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.header-user-dropdown-divider { border-top: 1px solid var(--border); }

.header-user-version {
    padding: 8px 16px 10px;
    font-size: var(--ak-font-size-xs);
    color: var(--text-muted);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Cameras.razor: editor de las 12 zonas de dirección (referencia para despacho, ver docs/Zonas.png) */
.zone-labels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    max-width: 480px;
}

.zone-labels-center {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    font-size: 1.1rem;
}

/* Cameras.razor: editor de zonas de dirección — grid de 12 zonas sobre el mapa (o fondo oscuro) */
.zone-visual-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.zone-grid-box {
    position: relative; width: 620px; max-width: 100%; aspect-ratio: 4 / 3;
    background: #0b0e14; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; overflow: hidden;
}
.zone-grid-map { position: absolute; inset: 0; filter: grayscale(1) brightness(0.9) contrast(1.05); }
.zone-grid-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    opacity: 0.35; font-size: 1.4rem; pointer-events: none;
}
/* La SVG deja pasar el mouse al mapa (pan/zoom) salvo en las celdas del borde, que son clickeables */
.zone-visual-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.zone-visual-svg .zone-cell { cursor: pointer; pointer-events: auto; }
.zone-visual-svg .zone-cell:hover polygon { stroke: #f5c542; stroke-width: 0.9; }
.zone-visual-svg text { font-family: system-ui, sans-serif; font-weight: 700; paint-order: stroke; stroke: rgba(0,0,0,.75); stroke-width: 0.6; }
.zone-visual-edit { width: 620px; max-width: 100%; }

/* Guardián de escena: marca sin texto sobre la miniatura de una cámara movida / tapada /
   desenfocada (SceneGuardClientService.Badge). El color lo pone el estado. */
.scene-guard-badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 3;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 22, .78);
    box-shadow: 0 0 0 2px currentColor;
    font-size: .9rem;
    pointer-events: auto;
}

/* ── HelpTip: ícono (?) con explicación al pasar el mouse o al hacer click (Shared/HelpTip.razor) ── */
.help-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: .3rem;
    color: var(--bs-secondary-color, #8a94a6);
    cursor: help;
    font-size: .85em;
    vertical-align: middle;
    outline: none;
}
.help-tip:hover,
.help-tip:focus { color: var(--bs-info, #3dd5f3); }
.help-tip-text {
    display: none;
    /* La posición la calcula js/helpTip.js (fixed, respecto de la pantalla). */
    position: fixed;
    z-index: 1080;
    width: max-content;
    max-width: 280px;
    padding: .5rem .65rem;
    border-radius: .4rem;
    background: #2b3648;
    border: 1px solid #5b6c87;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
    color: #f3f6fa;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    cursor: default;
}
.help-tip-text ul,
.help-tip-text ol { margin: .25rem 0 0; padding-left: 1rem; }
.help-tip:hover .help-tip-text,
.help-tip:focus .help-tip-text,
.help-tip:focus-within .help-tip-text { display: block; }
/* Mientras helpTip.js mide el tamaño, la ayuda está en el DOM pero invisible. */
.help-tip-text.help-tip-measuring { visibility: hidden; }
.help-tip-text strong { color: #ffffff; }