/*
 * ══════════════════════════════════════════════════════════════════════
 *  AutoZyra Design System — autozyra-base.css
 *  Copyright © 2026 AutoZyra. Todos los derechos reservados.
 *
 *  Este archivo es la fuente única de verdad del sistema de diseño de
 *  AutoZyra. Define los tokens de diseño (variables CSS), los estilos
 *  del shell de la aplicación y los componentes de UI reutilizables en
 *  toda la plataforma web y panel de administración.
 *
 *  ⚠  Norma de uso: No hardcodear colores, espaciados ni tipografías en
 *     los componentes. Usa siempre las variables CSS definidas en :root
 *     para garantizar consistencia visual y facilitar cambios de tema.
 *
 *  Secciones
 *  ─────────
 *   §1  Design Tokens (custom properties)
 *   §2  Reset y base global
 *   §3  Shell del layout autenticado
 *   §4  Sidebar de navegación
 *   §5  Topbar
 *   §6  Contenido principal y footer
 *   §7  Layout público (landing, login, registro)
 *   §8  Componentes › Botones
 *   §9  Componentes › Cards y paneles
 *   §10 Componentes › Badges y estados
 *   §11 Componentes › Formularios
 *   §12 Componentes › Tablas
 *   §13 Componentes › Empty state
 *   §14 Componentes › Drawer — panel lateral deslizante
 *   §15 Loading screen y error UI
 *   §16 Animaciones y transiciones
 *   §17 Media queries / responsive
 *
 *  Versión: 2.0.0
 * ══════════════════════════════════════════════════════════════════════
 */


/* ══════════════════════════════════════════════════════════════════════
   §1  Design Tokens
   ══════════════════════════════════════════════════════════════════════ */
:root {

    /* ── Brand ──────────────────────────────────────────────────────── */
    --az-primary:           #3b82f6;
    --az-primary-dark:      #1d4ed8;
    --az-primary-hover:     #2563eb;
    --az-primary-light:     #eff6ff;
    --az-primary-border:    #bfdbfe;

    /* ── Semantic ───────────────────────────────────────────────────── */
    --az-green:             #10b981;
    --az-green-dark:        #059669;
    --az-green-light:       #ecfdf5;
    --az-green-border:      #a7f3d0;

    --az-yellow:            #f59e0b;
    --az-yellow-dark:       #d97706;
    --az-yellow-light:      #fffbeb;
    --az-yellow-border:     #fde68a;

    --az-red:               #ef4444;
    --az-red-dark:          #dc2626;
    --az-red-light:         #fef2f2;
    --az-red-border:        #fecaca;

    --az-purple:            #8b5cf6;
    --az-purple-dark:       #7c3aed;
    --az-purple-light:      #f5f3ff;
    --az-purple-border:     #ddd6fe;

    --az-cyan:              #06b6d4;
    --az-cyan-light:        #ecfeff;
    --az-cyan-border:       #a5f3fc;

    /* ── Surface & backgrounds ──────────────────────────────────────── */
    --az-bg:                #f1f5f9;
    --az-bg-subtle:         #f8fafc;
    --az-surface:           #ffffff;
    --az-surface-raised:    #ffffff;
    --az-bg-card:           #ffffff;
    --az-border:            #e2e8f0;
    --az-border-light:      #f1f5f9;

    /* ── Text ───────────────────────────────────────────────────────── */
    --az-text:              #1e293b;
    --az-text-secondary:    #334155;
    --az-text-muted:        #64748b;
    --az-text-subtle:       #94a3b8;
    --az-text-disabled:     #cbd5e1;

    /* ── Sidebar ────────────────────────────────────────────────────── */
    --az-sidebar-bg:        #0f172a;
    --az-sidebar-hover:     #1e293b;
    --az-sidebar-active:    rgba(59, 130, 246, 0.15);
    --az-sidebar-border:    #1e293b;
    --az-sidebar-text:      #94a3b8;
    --az-sidebar-text-hover:#e2e8f0;
    --az-sidebar-text-active:#93c5fd;
    --az-sidebar-width:     240px;
    --az-sidebar-icon-active:#3b82f6;

    /* ── Layout ─────────────────────────────────────────────────────── */
    --az-topbar-height:     60px;
    --az-content-padding:   28px;

    /* ── Radius ─────────────────────────────────────────────────────── */
    --az-radius-xs:         4px;
    --az-radius-sm:         6px;
    --az-radius:            10px;
    --az-radius-lg:         14px;
    --az-radius-xl:         20px;
    --az-radius-full:       9999px;

    /* ── Shadows ────────────────────────────────────────────────────── */
    --az-shadow-xs:   0 1px 2px rgba(0, 0, 0, .05);
    --az-shadow-sm:   0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --az-shadow:      0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -2px rgba(0, 0, 0, .05);
    --az-shadow-md:   0 6px 10px -2px rgba(0, 0, 0, .08), 0 3px 6px -3px rgba(0, 0, 0, .05);
    --az-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .05);
    --az-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, .10), 0 8px 10px -6px rgba(0, 0, 0, .05);
    --az-shadow-sidebar: -8px 0 24px rgba(0, 0, 0, .15);

    /* ── Typography ─────────────────────────────────────────────────── */
    --az-font:        'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
    --az-font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* ── Transitions ────────────────────────────────────────────────── */
    --az-transition:      all 0.15s ease;
    --az-transition-slow: all 0.25s ease;
    --az-transition-drawer: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index scale ──────────────────────────────────────────────── */
    --az-z-base:      1;
    --az-z-dropdown:  100;
    --az-z-sticky:    110;
    --az-z-topbar:    120;
    --az-z-sidebar:   130;
    --az-z-overlay:   140;
    --az-z-drawer:    150;
    --az-z-modal:     160;
    --az-z-toast:     170;
}


/* ══════════════════════════════════════════════════════════════════════
   §1b  Modo oscuro — overrides via [data-theme="dark"]
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
    /* Surface & backgrounds */
    --az-bg:                #0b1220;
    --az-bg-subtle:         #111827;
    --az-surface:           #1e293b;
    --az-surface-raised:    #1e293b;
    --az-bg-card:           #1e293b;
    --az-border:            #334155;
    --az-border-light:      #1e293b;

    /* Text */
    --az-text:              #e2e8f0;
    --az-text-secondary:    #cbd5e1;
    --az-text-muted:        #94a3b8;
    --az-text-subtle:       #64748b;
    --az-text-disabled:     #475569;

    /* Brand semantic backgrounds: bajamos saturación + texto más claro */
    --az-primary-light:     rgba(59, 130, 246, .15);
    --az-primary-border:    rgba(59, 130, 246, .35);
    --az-green-light:       rgba(16, 185, 129, .15);
    --az-green-border:      rgba(16, 185, 129, .35);
    --az-yellow-light:      rgba(245, 158, 11, .15);
    --az-yellow-border:     rgba(245, 158, 11, .35);
    --az-red-light:         rgba(239, 68, 68, .15);
    --az-red-border:        rgba(239, 68, 68, .35);
    --az-purple-light:      rgba(139, 92, 246, .15);
    --az-purple-border:     rgba(139, 92, 246, .35);
    --az-cyan-light:        rgba(6, 182, 212, .15);
    --az-cyan-border:       rgba(6, 182, 212, .35);

    /* Sidebar mantiene el oscuro pero bordes mas sutiles */
    --az-sidebar-bg:        #050a13;
    --az-sidebar-hover:     #1e293b;
    --az-sidebar-border:    #1e293b;

    /* Shadows mas suaves en dark */
    --az-shadow-sm:   0 1px 3px rgba(0, 0, 0, .4);
    --az-shadow:      0 4px 6px -1px rgba(0, 0, 0, .35);
    --az-shadow-md:   0 6px 10px -2px rgba(0, 0, 0, .4);
    --az-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, .45);
    --az-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, .5);
}

/* En dark, los inputs y boton outline necesitan un fondo distinto */
:root[data-theme="dark"] .az-btn-secondary,
:root[data-theme="dark"] .az-btn-ghost,
:root[data-theme="dark"] .az-btn-muted {
    background: var(--az-surface);
}
:root[data-theme="dark"] .az-input,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: var(--az-bg-subtle);
    color: var(--az-text);
    border-color: var(--az-border);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--az-text-subtle); }

/* Imagenes se ven mejor con un poco menos de brillo en dark */
:root[data-theme="dark"] img:not([src*=".svg"]) {
    filter: brightness(.92);
}


/* ══════════════════════════════════════════════════════════════════════
   §2  Reset y base global
   ══════════════════════════════════════════════════════════════════════ */

html {
    font-size: 13.2px; /* ~82.5% of 16px for a compact UI */
}

html,
body {
    font-family: var(--az-font);
    line-height: 1.5;
    color: var(--az-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--az-font);
    font-weight: 700;
    color: var(--az-text);
    line-height: 1.25;
}

/* Scrollbar global — delgada y sutil */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--az-bg); }
::-webkit-scrollbar-thumb        { background: var(--az-border); border-radius: var(--az-radius-full); }
::-webkit-scrollbar-thumb:hover  { background: var(--az-text-subtle); }


/* ══════════════════════════════════════════════════════════════════════
   §3  Shell del layout autenticado
   ══════════════════════════════════════════════════════════════════════ */

.az-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--az-bg);
}

.az-main {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--az-bg);
}


/* ══════════════════════════════════════════════════════════════════════
   §4  Sidebar de navegación
   ══════════════════════════════════════════════════════════════════════ */

.az-sidebar {
    width: var(--az-sidebar-width);
    height: 100vh;
    background: var(--az-sidebar-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--az-sidebar-border);
    /* Scrollbar oscura para el sidebar */
    scrollbar-color: #334155 transparent;
    scrollbar-width: thin;
}

.az-sidebar::-webkit-scrollbar-track { background: transparent; }
.az-sidebar::-webkit-scrollbar-thumb { background: #334155; }

/* Marca / Logo */
.az-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 20px;
    border-bottom: 1px solid var(--az-sidebar-border);
    flex-shrink: 0;
    text-decoration: none;
}

.az-brand-icon {
    width: 34px;
    height: 34px;
    background: var(--az-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .95rem;
    flex-shrink: 0;
}

.az-brand-icon--sm {
    width: 28px;
    height: 28px;
    font-size: .8rem;
}

.az-brand-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
}

/* ── Switcher de organizacion ─────────────────────────────────── */
.az-org-switch {
    margin: 8px 10px 4px;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    border: 1px solid #1e293b;
    flex-shrink: 0;
}
.az-org-switch[open] { background: rgba(255,255,255,.06); }
.az-org-current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    list-style: none;
    color: #cbd5e1;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 8px;
    transition: background .15s;
}
.az-org-current::-webkit-details-marker { display: none; }
.az-org-current::marker { content: ''; }
.az-org-current:hover { background: rgba(255,255,255,.04); }
.az-org-current > i:first-child {
    color: #93c5fd;
    font-size: .9rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.az-org-current-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.az-org-chev {
    color: #64748b;
    font-size: .7rem;
    transition: transform .2s;
    flex-shrink: 0;
}
.az-org-switch[open] .az-org-chev { transform: rotate(180deg); }
.az-org-list {
    display: flex;
    flex-direction: column;
    padding: 4px;
    border-top: 1px solid #1e293b;
    margin-top: 2px;
}
.az-org-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    color: var(--az-sidebar-text);
    font-size: .78rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s;
}
.az-org-item:hover { background: var(--az-sidebar-hover); color: #e2e8f0; }
.az-org-item i {
    font-size: .85rem;
    color: #475569;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.az-org-item:hover i { color: #94a3b8; }
.az-org-item--active {
    background: var(--az-sidebar-active);
    color: var(--az-sidebar-text-active);
}
.az-org-item--active i { color: var(--az-sidebar-icon-active); }
.az-org-item--add {
    border-top: 1px dashed #1e293b;
    margin-top: 4px;
    padding-top: 9px;
    color: #64748b;
}
.az-org-item--add i { color: #64748b; }

/* ── Tema sol/luna toggle (en menu perfil del sidebar) ────────── */
.az-theme-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    color: var(--az-sidebar-text);
    font-size: .855rem;
    font-weight: 500;
}
.az-theme-row > i:first-child {
    color: #475569;
    font-size: .95rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.az-theme-row > span {
    flex: 1;
}
.az-theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 56px;
    height: 26px;
    padding: 0 6px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9999px;
    cursor: pointer;
    flex-shrink: 0;
}
.az-theme-toggle:hover { background: rgba(255,255,255,.08); }
.az-theme-icon {
    font-size: .72rem;
    color: #64748b;
    z-index: 1;
    transition: color .2s;
    pointer-events: none;
}
.az-theme-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #fcd34d, #f59e0b);
    border-radius: 50%;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), background .25s;
    box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
:root[data-theme="dark"] .az-theme-thumb {
    transform: translateX(30px);
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
}
:root:not([data-theme="dark"]) .az-theme-icon--sun { color: #fff; }
:root[data-theme="dark"] .az-theme-icon--moon { color: #fff; }

/* Secciones de navegación */
.az-sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.az-nav-section {
    margin-bottom: 8px;
}

.az-nav-label {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #475569;
    padding: 6px 8px 4px;
    user-select: none;
}

/* Ítem de navegación */
.az-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: .855rem;
    font-weight: 500;
    color: var(--az-sidebar-text);
    text-decoration: none;
    cursor: pointer;
    transition: var(--az-transition);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    line-height: 1.4;
    margin-bottom: 1px;
}

.az-nav-item i {
    font-size: .95rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: #475569;
    transition: color 0.15s;
}

.az-nav-item:hover,
.az-nav-item:focus {
    background: var(--az-sidebar-hover);
    color: var(--az-sidebar-text-hover);
    outline: none;
}

.az-nav-item:hover i {
    color: var(--az-sidebar-text-hover);
}

/* Estado activo — Blazor añade .active a NavLink */
.az-nav-item.active,
.az-nav-item[aria-current="page"] {
    background: var(--az-sidebar-active);
    color: var(--az-sidebar-text-active);
}

.az-nav-item.active i,
.az-nav-item[aria-current="page"] i {
    color: var(--az-sidebar-icon-active);
}

/* Icono de enlace externo */
.az-nav-ext {
    margin-left: auto;
    font-size: .7rem !important;
    width: auto !important;
    opacity: .5;
}

/* Badge numérico en el sidebar (ej. alertas) */
.az-nav-badge {
    margin-left: auto;
    background: var(--az-red);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--az-radius-full);
    line-height: 1.4;
}

/* Pie del sidebar — usuario + logout */
.az-sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--az-sidebar-border);
    padding: 10px 10px 12px;
}

.az-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    cursor: default;
    margin-bottom: 4px;
}

.az-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--az-primary), var(--az-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: .02em;
}

.az-user-info {
    min-width: 0;
    flex: 1;
}

.az-user-name {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.az-user-sub {
    display: block;
    font-size: .7rem;
    color: #475569;
}

/* Profile collapsible menu */
.az-profile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease;
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 0;
}

.az-profile-menu--open {
    max-height: 360px;
    opacity: 1;
    padding: 0 0 4px;
    overflow-y: auto;
}

.az-sidebar-user {
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}

.az-sidebar-user:hover {
    background: rgba(255, 255, 255, .04);
}

.az-profile-chevron {
    font-size: .7rem;
    color: #64748b;
    margin-left: auto;
    transition: transform .2s;
}

.az-sidebar-logout {
    margin-top: 2px;
}

.az-nav-btn {
    font-family: var(--az-font);
}

/* Overlay para cierre en móvil */
.az-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: calc(var(--az-z-sidebar) - 1);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.az-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}


/* ══════════════════════════════════════════════════════════════════════
   §5  Sidebar top (brand + notifications) & Mobile toggle
   ══════════════════════════════════════════════════════════════════════ */

.az-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 0;
    flex-shrink: 0;
}

/* Botón hamburguesa — visible solo en móvil, posición fija */
.az-mobile-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    border-radius: var(--az-radius-sm);
    border: 1px solid var(--az-border);
    background: var(--az-surface);
    align-items: center;
    justify-content: center;
    color: var(--az-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--az-transition);
    z-index: calc(var(--az-z-sidebar) - 2);
    box-shadow: var(--az-shadow-sm);
}

.az-mobile-toggle:hover {
    background: var(--az-bg-hover);
    color: var(--az-text);
}

/* Chevron rotation for profile menu */
.az-chevron--open {
    transform: rotate(180deg);
}


/* ══════════════════════════════════════════════════════════════════════
   §6  Contenido principal y footer de app
   ══════════════════════════════════════════════════════════════════════ */

.az-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--az-content-padding);
}

/* Wrapper que centra y limita el ancho del contenido en monitores grandes */
.az-content-inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

.az-footer {
    flex-shrink: 0;
    background: var(--az-sidebar-bg);
    color: #64748b;
    font-size: .8rem;
    padding: 14px var(--az-content-padding);
}

.az-footer--dark {
    background: var(--az-sidebar-bg);
}

.az-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

.az-footer-links {
    display: flex;
    gap: 16px;
}

.az-footer-links a {
    color: #64748b;
    text-decoration: none;
    transition: color .15s;
}

.az-footer-links a:hover {
    color: #94a3b8;
}


/* ══════════════════════════════════════════════════════════════════════
   §7  Layout público (landing, login, registro)
   ══════════════════════════════════════════════════════════════════════ */

.az-public-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* Navbar pública */
.az-public-nav {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--az-border);
    position: sticky;
    top: 0;
    z-index: var(--az-z-topbar);
}

.az-public-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    height: 64px;
    max-width: 1280px;
    margin: 0 auto;
}

.az-public-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--az-text);
    text-decoration: none;
    letter-spacing: -.02em;
}

.az-public-brand:hover { color: var(--az-text); }

.az-public-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.az-public-nav-links a {
    font-size: .875rem;
    font-weight: 500;
    color: var(--az-text-muted);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--az-radius-sm);
    transition: var(--az-transition);
}

.az-public-nav-links a:hover {
    color: var(--az-text);
    background: var(--az-bg-hover);
}

/* Link destacado "Demo en vivo" en el navbar publico */
.az-public-link-demo {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--az-primary) !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(139,92,246,.08)) !important;
    border: 1px solid var(--az-primary-border) !important;
    position: relative;
}
.az-public-link-demo:hover {
    background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(139,92,246,.14)) !important;
}
.az-public-link-demo-pulse {
    width: 7px; height: 7px;
    background: #10b981;
    border-radius: 50%;
    animation: az-demo-pulse 1.6s infinite;
    flex-shrink: 0;
}
@keyframes az-demo-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.7); }
    70%  { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.az-public-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.az-link-muted {
    font-size: .875rem;
    font-weight: 500;
    color: var(--az-text-muted);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--az-radius-sm);
    transition: var(--az-transition);
}

.az-link-muted:hover {
    color: var(--az-text);
    background: var(--az-bg);
}

.az-public-main {
    flex: 1;
}


/* ══════════════════════════════════════════════════════════════════════
   §8  Componentes › Botones
   ══════════════════════════════════════════════════════════════════════ */

/* Base */
.az-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--az-radius-sm);
    font-family: var(--az-font);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--az-transition);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
    vertical-align: middle;
    user-select: none;
}

.az-btn:focus-visible {
    outline: 2px solid var(--az-primary);
    outline-offset: 2px;
}

/* Variantes */
.az-btn-primary {
    background: var(--az-primary);
    color: #fff;
    border-color: var(--az-primary);
}

.az-btn-primary:hover {
    background: var(--az-primary-hover);
    border-color: var(--az-primary-hover);
    color: #fff;
}

.az-btn-secondary {
    background: var(--az-surface);
    color: var(--az-text-secondary);
    border-color: var(--az-border);
}

.az-btn-secondary:hover {
    background: var(--az-bg);
    border-color: #cbd5e1;
    color: var(--az-text);
}

.az-btn-ghost {
    background: transparent;
    color: var(--az-text-muted);
    border-color: var(--az-border);
}

.az-btn-ghost:hover {
    background: var(--az-bg);
    color: var(--az-text);
}

.az-btn-danger {
    background: var(--az-red-light);
    color: var(--az-red);
    border-color: var(--az-red-border);
}

.az-btn-danger:hover {
    background: var(--az-red);
    color: #fff;
    border-color: var(--az-red);
}

.az-btn-success {
    background: var(--az-green);
    color: #fff;
    border-color: var(--az-green);
}

.az-btn-success:hover {
    background: var(--az-green-dark);
    border-color: var(--az-green-dark);
    color: #fff;
}

.az-btn-muted {
    background: var(--az-surface);
    color: var(--az-text-muted);
    border-color: var(--az-border);
}

.az-btn-muted:hover {
    background: var(--az-bg);
    color: var(--az-text);
}

/* Tamaños */
.az-btn-sm {
    padding: 6px 14px;
    font-size: .8rem;
}

.az-btn-lg {
    padding: 12px 24px;
    font-size: 1rem;
}

.az-btn-xs {
    padding: 4px 10px;
    font-size: .75rem;
}

/* Botón icono cuadrado */
.az-btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--az-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.az-btn-icon.az-btn-sm {
    width: 30px;
    height: 30px;
}


/* ══════════════════════════════════════════════════════════════════════
   §9  Componentes › Cards y paneles
   ══════════════════════════════════════════════════════════════════════ */

.az-card {
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    border-radius: var(--az-radius);
    box-shadow: var(--az-shadow-sm);
    overflow: hidden;
}

.az-card--hover {
    transition: var(--az-transition-slow);
}

.az-card--hover:hover {
    box-shadow: var(--az-shadow-md);
    transform: translateY(-2px);
    border-color: var(--az-primary-border);
}

.az-card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--az-border-light);
    background: var(--az-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.az-card-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--az-text-secondary);
    margin: 0;
}

.az-card-body {
    padding: 18px;
}

.az-card-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--az-border-light);
    background: var(--az-bg-subtle);
}

/* Panel KPI */
.az-kpi-card {
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    border-radius: var(--az-radius);
    padding: 18px;
    box-shadow: var(--az-shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: var(--az-transition-slow);
}

.az-kpi-card:hover {
    box-shadow: var(--az-shadow-md);
    transform: translateY(-1px);
}

.az-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.az-kpi-body { flex: 1; min-width: 0; }
.az-kpi-label { font-size: .78rem; font-weight: 500; color: var(--az-text-muted); margin-bottom: 3px; }
.az-kpi-value { font-size: 1.6rem; font-weight: 800; color: var(--az-text); line-height: 1.1; }
.az-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--az-radius-full);
    margin-top: 5px;
}
.az-kpi-trend--up     { background: var(--az-green-light);  color: var(--az-green); }
.az-kpi-trend--warn   { background: var(--az-yellow-light); color: var(--az-yellow); }
.az-kpi-trend--down   { background: var(--az-red-light);    color: var(--az-red); }
.az-kpi-trend--neutral{ background: var(--az-bg);           color: var(--az-text-muted); }


/* ══════════════════════════════════════════════════════════════════════
   §10 Componentes › Badges y estados
   ══════════════════════════════════════════════════════════════════════ */

/* Badge genérico */
.az-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--az-radius-full);
    white-space: nowrap;
    vertical-align: middle;
}

.az-badge-primary  { background: var(--az-primary-light);  color: var(--az-primary);      border: 1px solid var(--az-primary-border); }
.az-badge-success  { background: var(--az-green-light);    color: var(--az-green);        border: 1px solid var(--az-green-border); }
.az-badge-warning  { background: var(--az-yellow-light);   color: var(--az-yellow-dark);  border: 1px solid var(--az-yellow-border); }
.az-badge-danger   { background: var(--az-red-light);      color: var(--az-red);          border: 1px solid var(--az-red-border); }
.az-badge-purple   { background: var(--az-purple-light);   color: var(--az-purple);       border: 1px solid var(--az-purple-border); }
.az-badge-gray     { background: var(--az-bg);             color: var(--az-text-muted);   border: 1px solid var(--az-border); }

/* Estado de vehículo (con punto indicador) */
.az-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--az-radius-full);
}

.az-status::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.az-status--ok      { background: var(--az-green-light);  color: var(--az-green);       }
.az-status--ok::before    { background: var(--az-green); }

.az-status--warn    { background: var(--az-yellow-light); color: var(--az-yellow-dark); }
.az-status--warn::before  { background: var(--az-yellow); }

.az-status--alert   { background: var(--az-red-light);    color: var(--az-red);         }
.az-status--alert::before { background: var(--az-red); }

.az-status--info    { background: var(--az-primary-light); color: var(--az-primary);    }
.az-status--info::before  { background: var(--az-primary); }


/* ══════════════════════════════════════════════════════════════════════
   §11 Componentes › Formularios
   ══════════════════════════════════════════════════════════════════════ */

.az-form-group {
    margin-bottom: 16px;
}

.az-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--az-text-secondary);
    margin-bottom: 5px;
}

.az-input {
    width: 100%;
    padding: 8px 12px;
    font-family: var(--az-font);
    font-size: .875rem;
    color: var(--az-text);
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    border-radius: var(--az-radius-sm);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}

.az-input:focus {
    border-color: var(--az-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.az-input::placeholder { color: var(--az-text-subtle); }
.az-input:disabled { background: var(--az-bg); color: var(--az-text-muted); cursor: not-allowed; }

.az-input-error { border-color: var(--az-red); }
.az-input-error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }

.az-field-error {
    font-size: .75rem;
    color: var(--az-red);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Barra de progreso de mantenimiento */
.az-progress {
    height: 6px;
    background: var(--az-bg);
    border-radius: var(--az-radius-full);
    overflow: hidden;
}

.az-progress-bar {
    height: 100%;
    border-radius: var(--az-radius-full);
    transition: width .4s ease;
}

.az-progress-bar--ok    { background: var(--az-green); }
.az-progress-bar--warn  { background: var(--az-yellow); }
.az-progress-bar--alert { background: var(--az-red); }
.az-progress-bar--info  { background: var(--az-primary); }


/* ══════════════════════════════════════════════════════════════════════
   §12 Componentes › Tablas
   ══════════════════════════════════════════════════════════════════════ */

.az-table-wrap {
    overflow-x: auto;
    border-radius: var(--az-radius);
    border: 1px solid var(--az-border);
}

.az-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .855rem;
}

.az-table thead th {
    background: var(--az-bg-subtle);
    padding: 10px 14px;
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--az-text-muted);
    border-bottom: 1px solid var(--az-border);
    white-space: nowrap;
    /* Sticky header */
    position: sticky;
    top: 0;
    z-index: 1;
}

.az-table tbody td {
    padding: 10px 14px;
    color: var(--az-text-secondary);
    border-bottom: 1px solid var(--az-border-light);
    vertical-align: middle;
}

.az-table tbody tr:last-child td { border-bottom: none; }
.az-table tbody tr:hover { background: var(--az-bg-subtle); }

/* Tabla compacta (dentro del card de vehículo) */
.az-table--compact { font-size: .82rem; }
.az-table--compact thead th { padding: 8px 12px; }
.az-table--compact tbody td { padding: 8px 12px; }

/* Contenedor scrollable para histórico */
.az-table-scroll {
    max-height: 340px;
    overflow-y: auto;
}


/* ══════════════════════════════════════════════════════════════════════
   §13 Componentes › Empty state
   ══════════════════════════════════════════════════════════════════════ */

.az-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
    color: var(--az-text-muted);
}

.az-empty-icon {
    font-size: 2.75rem;
    color: var(--az-text-disabled);
    margin-bottom: 16px;
    line-height: 1;
}

.az-empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--az-text-secondary);
    margin-bottom: 8px;
}

.az-empty-desc {
    font-size: .875rem;
    color: var(--az-text-muted);
    max-width: 340px;
    margin: 0 auto 24px;
    line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════════════
   §14 Componentes › Drawer — panel lateral deslizante
   ══════════════════════════════════════════════════════════════════════ */

/* Overlay del drawer */
.az-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(3px);
    z-index: var(--az-z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.az-drawer-overlay.az-drawer-overlay--visible {
    opacity: 1;
    pointer-events: all;
}

/* Panel del drawer */
.az-drawer {
    position: fixed;
    top: 0;
    right: -920px;
    width: 900px;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh; /* dvh en movil: excluye barra del navegador dinamica */
    background: var(--az-surface);
    z-index: var(--az-z-drawer);
    display: flex;
    flex-direction: column;
    box-shadow: var(--az-shadow-sidebar);
    transition: var(--az-transition-drawer);
    border-left: 1px solid var(--az-border);
}

.az-drawer.az-drawer--open {
    right: 0;
}

/* Header del drawer */
.az-drawer-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--az-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--az-surface);
}

.az-drawer-vehicle {
    display: flex;
    align-items: center;
    gap: 14px;
}

.az-drawer-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: var(--az-bg);
    border: 1px solid var(--az-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.az-drawer-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--az-text);
    margin-bottom: 5px;
    line-height: 1.2;
}

.az-drawer-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.az-drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid var(--az-border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--az-text-muted);
    font-size: .9rem;
    transition: var(--az-transition);
    flex-shrink: 0;
}

.az-drawer-close:hover {
    background: var(--az-bg);
    color: var(--az-text);
}

/* Tabs del drawer */
.az-drawer-tabs {
    display: flex;
    padding: 0 22px;
    border-bottom: 1px solid var(--az-border);
    flex-shrink: 0;
    gap: 2px;
    overflow-x: auto;
}

.az-drawer-tab {
    padding: 10px 14px;
    font-family: var(--az-font);
    font-size: .82rem;
    font-weight: 600;
    color: var(--az-text-muted);
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s;
    white-space: nowrap;
}

.az-drawer-tab:hover { color: var(--az-text); }

.az-drawer-tab.az-drawer-tab--active {
    color: var(--az-primary);
    border-bottom-color: var(--az-primary);
}

/* Cuerpo del drawer */
.az-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Footer del drawer */
.az-drawer-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--az-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--az-bg-subtle);
}

/* Grid de info dentro del drawer */
.az-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.az-info-tile {
    background: var(--az-bg);
    border: 1px solid var(--az-border);
    border-radius: var(--az-radius-sm);
    padding: 12px 14px;
}

.az-info-tile-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--az-text-muted);
    margin-bottom: 5px;
}

.az-info-tile-value {
    font-size: .95rem;
    font-weight: 700;
    color: var(--az-text);
}

/* Tarjeta de mantenimiento dentro del drawer */
.az-maint-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    border-radius: var(--az-radius-sm);
    padding: 14px;
}

.az-maint-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}

.az-maint-title { font-size: .85rem; font-weight: 700; color: var(--az-text); margin-bottom: 1px; }
.az-maint-next  { font-size: .75rem; color: var(--az-text-muted); margin-bottom: 7px; }


/* ══════════════════════════════════════════════════════════════════════
   §15 Loading screen y error UI
   ══════════════════════════════════════════════════════════════════════ */

.az-loading-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--az-surface);
    z-index: 9999;
    gap: 16px;
    color: var(--az-text-muted);
    font-size: .9rem;
}

.az-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--az-border);
    border-top-color: var(--az-primary);
    border-radius: 50%;
    animation: azSpin .7s linear infinite;
}

/* Blazor error UI */
#blazor-error-ui {
    background: #fffbeb;
    border-top: 1px solid var(--az-yellow-border);
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 20px;
    position: fixed;
    width: 100%;
    z-index: var(--az-z-toast);
    display: none;
    font-size: .875rem;
    color: var(--az-text);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 16px;
    top: 10px;
    color: var(--az-text-muted);
}

#blazor-error-ui.show { display: block; }


/* ══════════════════════════════════════════════════════════════════════
   §15b Componentes › Modal — diálogos centrados
   ══════════════════════════════════════════════════════════════════════ */

.az-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(15, 23, 42, .45);
    z-index: calc(var(--az-z-drawer) + 20);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: azFadeIn .15s ease;
}

.az-modal {
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    border-radius: var(--az-radius-lg, 14px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: azScaleIn .2s ease both;
}

.az-modal--lg { max-width: 640px; }
.az-modal--xl { max-width: 800px; }

.az-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--az-border);
    flex-shrink: 0;
}

.az-modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--az-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.az-modal-title i { color: var(--az-primary); }

.az-modal-close {
    width: 32px;
    height: 32px;
    border-radius: var(--az-radius-sm);
    border: 1px solid var(--az-border);
    background: var(--az-bg-subtle);
    color: var(--az-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .9rem;
    transition: var(--az-transition);
    flex-shrink: 0;
}

.az-modal-close:hover {
    background: var(--az-red-light);
    color: var(--az-red);
    border-color: var(--az-red-border);
}

.az-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--az-border) transparent;
}

/* Cuando un <form> (EditForm) envuelve body + foot, tiene que propagar
   el flex para que el body pueda hacer scroll y el foot quede sticky */
.az-modal > form,
.az-modal > .az-modal-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.az-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--az-border);
    background: var(--az-bg-subtle);
    flex-shrink: 0;
}

/* ── Form fields dentro de modales ────────────────────────────────── */

.az-field {
    margin-bottom: 16px;
}

.az-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--az-text-secondary);
    margin-bottom: 6px;
}

.az-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    background: var(--az-bg);
    border: 1px solid var(--az-border);
    border-radius: var(--az-radius-sm);
    font-size: .85rem;
    color: var(--az-text);
    outline: none;
    font-family: var(--az-font);
    transition: var(--az-transition);
    box-sizing: border-box;
}

.az-input:focus {
    border-color: var(--az-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}

.az-input:disabled {
    background: var(--az-bg-subtle);
    color: var(--az-text-muted);
    cursor: not-allowed;
}

.az-input--textarea {
    height: auto;
    min-height: 80px;
    padding: 10px 12px;
    resize: vertical;
}

.az-input-group {
    display: flex;
    align-items: stretch;
}

.az-input-group .az-input {
    border-radius: var(--az-radius-sm) 0 0 var(--az-radius-sm);
}

.az-input-addon {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--az-bg-subtle);
    border: 1px solid var(--az-border);
    border-left: none;
    border-radius: 0 var(--az-radius-sm) var(--az-radius-sm) 0;
    font-size: .8rem;
    color: var(--az-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.az-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.az-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.az-row--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.az-hint {
    font-size: .72rem;
    color: var(--az-text-muted);
    margin-top: 4px;
}

.az-error {
    font-size: .72rem;
    color: var(--az-red);
    margin-top: 4px;
}

.az-separator {
    border: none;
    border-top: 1px solid var(--az-border-light);
    margin: 16px 0;
}

.az-check-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--az-border);
    border-radius: var(--az-radius-sm);
    padding: 8px;
    background: var(--az-bg);
    scrollbar-width: thin;
}

.az-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--az-radius-xs);
    transition: background .1s;
    cursor: pointer;
}

.az-check-item:hover { background: var(--az-bg-subtle); }

.az-check-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--az-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.az-check-item label {
    font-size: .84rem;
    color: var(--az-text);
    cursor: pointer;
    flex: 1;
}

/* ── Alert list in modals ─────────────────────────────────────────── */

.az-alert-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.az-alert-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--az-bg-subtle);
    border: 1px solid var(--az-border-light);
    border-radius: var(--az-radius-sm);
}

.az-alert-item-title {
    font-size: .85rem;
    font-weight: 600;
    color: var(--az-text);
}

.az-alert-item-sub {
    font-size: .72rem;
    color: var(--az-text-muted);
    margin-top: 2px;
}

/* ── Interval row ─────────────────────────────────────────────────── */

.az-interval-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--az-border-light);
    border-radius: var(--az-radius-sm);
    margin-bottom: 6px;
    background: var(--az-bg-subtle);
}

.az-interval-name {
    font-size: .84rem;
    font-weight: 600;
    color: var(--az-text);
}

/* ── Fuel calculator ──────────────────────────────────────────────── */

.az-calc-box {
    background: var(--az-bg-subtle);
    border: 1px solid var(--az-border-light);
    border-radius: var(--az-radius-sm);
    padding: 16px;
}

.az-calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.az-calc-actions {
    display: flex;
    gap: 4px;
}

.az-calc-btn {
    width: 36px;
    height: 40px;
    border-radius: var(--az-radius-sm);
    border: 1px solid var(--az-border);
    background: var(--az-surface);
    color: var(--az-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .9rem;
    transition: var(--az-transition);
}

.az-calc-btn--primary { background: var(--az-primary); color: #fff; border-color: var(--az-primary); }
.az-calc-btn--primary:hover { background: var(--az-primary-dark); }
.az-calc-btn:hover { background: var(--az-bg); }

/* ── Danger confirmation ──────────────────────────────────────────── */

.az-modal-head--danger {
    background: var(--az-red-light);
    border-bottom-color: var(--az-red-border);
}

.az-modal-head--danger .az-modal-title { color: var(--az-red); }
.az-modal-head--danger .az-modal-title i { color: var(--az-red); }

.az-danger-text {
    font-size: .84rem;
    color: var(--az-red);
    font-weight: 500;
}

@media (max-width: 640px) {
    .az-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .az-modal {
        max-width: 100%;
        /* svh (small viewport) garantiza que el modal nunca quede oculto por
           la barra del navegador movil aunque se expanda */
        max-height: 100vh;
        max-height: 100svh;
        border-radius: 16px 16px 0 0;
        animation: azSlideUp .25s ease both;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .az-modal-body {
        padding: 16px;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        min-height: 0;
    }
    .az-modal-head {
        padding: 14px 16px;
        flex-shrink: 0;
        background: var(--az-surface);
        border-bottom: 1px solid var(--az-border);
    }
    .az-modal-foot {
        padding: 12px 16px;
        /* safe-area-inset-bottom: respeta el home indicator en iPhone
           y deja espacio sobre la barra del navegador */
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        flex-shrink: 0;
        background: var(--az-bg-subtle);
        border-top: 1px solid var(--az-border);
        position: sticky;
        bottom: 0;
    }
    .az-row { grid-template-columns: 1fr; }
    .az-calc-grid { grid-template-columns: 1fr 1fr; }
    .az-interval-row { grid-template-columns: 1fr; gap: 6px; }
}

@keyframes azSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}


/* ══════════════════════════════════════════════════════════════════════
   §16 Animaciones y transiciones
   ══════════════════════════════════════════════════════════════════════ */

@keyframes azSpin {
    to { transform: rotate(360deg); }
}

@keyframes azFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes azSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes azSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes azScaleIn {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}

.az-animate-fade   { animation: azFadeIn   .2s ease both; }
.az-animate-slide  { animation: azSlideDown .25s ease both; }
.az-animate-scale  { animation: azScaleIn   .2s ease both; }


/* ══════════════════════════════════════════════════════════════════════
   §17 Media queries / responsive
   ══════════════════════════════════════════════════════════════════════ */

/* Tablet y móvil — sidebar se convierte en drawer */
@media (max-width: 991px) {

    .az-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: var(--az-z-sidebar);
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--az-shadow-xl);
    }

    .az-sidebar.az-sidebar--open {
        transform: translateX(0);
    }

    .az-sidebar-overlay {
        display: block;
    }

    .az-mobile-toggle {
        display: inline-flex;
    }

    :root {
        --az-content-padding: 16px;
    }

    .az-content {
        padding: var(--az-content-padding);
        padding-top: calc(var(--az-content-padding) + 52px);
    }

    .az-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .az-public-nav-inner {
        padding: 0 20px;
    }

    .az-public-nav-links {
        display: none;
    }

    .az-drawer {
        width: 100%;
        max-width: 100vw;
    }

    .az-drawer-body {
        padding: 14px;
    }

    .az-drawer-tabs {
        padding: 0 14px;
        gap: 0;
    }

    .az-drawer-tab {
        padding: 10px 10px;
        font-size: .75rem;
    }

    .az-drawer-header {
        padding: 14px;
    }
}

@media (max-width: 640px) {
    .az-info-grid {
        grid-template-columns: 1fr;
    }

    .az-kpi-value {
        font-size: 1.3rem;
    }

    .az-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}