@charset "UTF-8";
/* ============================================================
   M&F Servicios — Design System v2
   Paleta: Ocean Obsidian (Híbrido - Contenido Claro y Sidebar Oscura)
   ============================================================ */

:root {
    /* Color tokens — Slate oscuro + Acentos neón */
    --ink-900: #0f172a;
    /* Texto principal */
    --ink-800: #1e293b;
    /* Texto secundario y títulos */
    --ink-700: #334155;
    --ink-600: #475569;
    --ink-500: #64748b;
    --ink-100: #f1f5f9;

    --accent: #0284c7;
    /* Azul celestial para modo claro */
    --accent-glow: rgba(2, 132, 199, 0.15);
    --mint: #0d9488;
    /* Verde azulado para modo claro */
    --mint-glow: rgba(13, 148, 136, 0.15);

    /* Alias histórico: la paleta migró de violeta a azul, pero varias reglas
       seguían usando var(--violet-500) sin que la variable estuviera definida
       (relleno de las barras de Cuentas Corrientes, focus rings, bordes de
       pestaña activa, accent-color). Sin la variable, el navegador descarta la
       declaración completa y el estilo no se aplica — por eso la barra de
       deuda aparecía vacía. */
    --violet-500: var(--accent);

    --bg: #f3f5f9;
    /* Fondo claro del dashboard */
    --surface: #ffffff;
    /* Tarjetas blancas */
    --text: #0f172a;
    /* Texto principal oscuro */
    --text-muted: #64748b;
    /* Texto secundario */
    --border: #e2e8f0;
    /* Bordes claros */

    --error-bg: #fee2e2;
    --error-text: #991b1b;
    --success-bg: #d1fae5;
    --success-text: #065f46;
    --warning-bg: #ffedd5;
    --warning-text: #9a3412;

    /* Profundidad */
    --elev-1: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
    --elev-2: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --inset-1: inset 0 2px 4px rgba(0, 0, 0, 0.05);

    /* Spacing (base 4px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Radios */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;

    --font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, sans-serif;
    --font-display: "Outfit", "Segoe UI Variable Display", "Segoe UI", -apple-system, sans-serif;

    --sidebar-width: 264px;
    --sidebar-rail: 76px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-family);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

/* ============================================================
   Componentes compartidos
   ============================================================ */

.btn {
    display: inline-block;
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:visited {
    color: inherit;
}

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

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--mint));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45);
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-ghost {
    background: #ffffff;
    color: var(--ink-700);
    border: 1px solid var(--border);
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--elev-1);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-ghost:hover {
    color: var(--ink-900);
    background: #f8fafc;
    border-color: var(--ink-500);
    transform: translateY(-1px);
    box-shadow: var(--elev-2);
}

.btn-ghost:active {
    transform: translateY(0);
    box-shadow: var(--inset-1);
}

/* ---------- Botones de exportación (Excel/PDF): insignia de color + texto ---------- */

.export-bar {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.export-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-700);
    text-decoration: none;
    box-shadow: var(--elev-1);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.export-btn:hover {
    color: var(--ink-900);
    border-color: var(--ink-500);
    box-shadow: var(--elev-2);
    transform: translateY(-1px);
}

.export-btn:active {
    transform: translateY(0);
    box-shadow: var(--inset-1);
}

.export-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.export-icon-xls {
    background: #1d6f42;
}

.export-icon-pdf {
    background: #b30b00;
}

.alert {
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: 0.9375rem;
    box-shadow: var(--inset-1);
    border: 1px solid transparent;
}

.alert-error {
    background: var(--error-bg);
    color: var(--error-text);
    border-color: rgba(239, 68, 68, 0.2);
}

.alert-success {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: rgba(16, 185, 129, 0.2);
    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease;
    max-height: 100px;
    overflow: hidden;
}

.alert-fade-out {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.badge {
    display: inline-block;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-role {
    background: var(--ink-100);
    color: var(--accent);
    border: 1px solid rgba(2, 132, 199, 0.2);
}

/* ============================================================
   Login (Modo Oscuro Glassmorphic Forzado)
   ============================================================ */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background:
        linear-gradient(rgba(5, 8, 17, 0.45), rgba(5, 8, 17, 0.65)),
        url("../images/login_bg.png") no-repeat center center;
    background-size: cover;
}

.login-card {
    width: 100%;
    max-width: 410px;
    background: rgba(10, 15, 29, 0.6);
    backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: var(--space-7) var(--space-6) var(--space-6);
}

.login-brand {
    text-align: center;
    margin-bottom: var(--space-6);
}

.login-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: contain;
    background: linear-gradient(135deg, #06b6d4, #10b981);
    border: 3px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(6, 182, 212, 0.3);
}

.login-brand h1 {
    font-size: 1.875rem;
    font-weight: 800;
    color: #ffffff;
    margin-top: var(--space-3);
    background: linear-gradient(135deg, #ffffff 60%, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-subtitle {
    color: #94a3b8;
    font-size: 0.875rem;
    margin-top: var(--space-1);
}

.login-footer {
    text-align: center;
    color: #94a3b8;
    font-size: 0.8125rem;
    margin-top: var(--space-5);
}

.login-card .form-group {
    margin-bottom: var(--space-4);
}

.login-card .form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: var(--space-2);
    color: #ffffff;
}

.login-card .form-group input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.03);
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
}

.login-card .form-group input::placeholder {
    color: #94a3b8;
    opacity: 0.5;
}

.login-card .form-group input:focus-visible {
    outline: none;
    border-color: #06b6d4;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.25);
}

/* ============================================================
   App shell
   ============================================================ */

.app {
    display: flex;
    min-height: 100vh;
}

/* ---------- Sidebar (Modo Oscuro Forzado) ---------- */

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #0a0f1d;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: width 0.22s ease;
    overflow: hidden;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: var(--space-5) var(--space-4);
    white-space: nowrap;
}

.sidebar-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    white-space: nowrap;
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ink-600);
    border: 2px solid #ffffff;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14), 0 4px 10px rgba(0, 0, 0, 0.25);
}

.sidebar-user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user-name {
    font-weight: 600;
    font-size: 0.9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3) var(--space-2);
}

.menu {
    list-style: none;
}

.menu-item {
    margin-bottom: 2px;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.9375rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.menu-link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

.menu-link.is-active {
    background: rgba(6, 182, 212, 0.12);
    color: #ffffff;
    border-left: 3px solid var(--accent);
    padding-left: calc(var(--space-3) - 3px);
    box-shadow: var(--highlight), 0 2px 10px rgba(6, 182, 212, 0.15);
    font-weight: 600;
}

.menu-link:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

.menu-icon {
    width: 28px;
    text-align: center;
    flex-shrink: 0;
    font-size: 1.0625rem;
}

.menu-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-group summary {
    list-style: none;
}

.menu-group summary::-webkit-details-marker {
    display: none;
}

.menu-group summary::after {
    content: "▾";
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform 0.15s ease;
}

.menu-group[open]>summary::after {
    transform: rotate(180deg);
}

.menu-group[open]>summary {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.submenu {
    list-style: none;
    margin: 2px 0 var(--space-2) calc(var(--space-3) + 13px);
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.submenu-link {
    display: block;
    padding: var(--space-2) var(--space-3);
    margin-left: var(--space-2);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
}

.submenu-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.submenu-link:focus-visible {
    outline: 3px solid var(--violet-500);
    outline-offset: -3px;
}

/* ---------- Sidebar colapsado (riel de iconos) ---------- */

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

body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .sidebar-user-meta,
body.sidebar-collapsed .menu-label,
body.sidebar-collapsed .submenu {
    display: none;
}

body.sidebar-collapsed .menu-group summary::after {
    content: none;
}

body.sidebar-collapsed .sidebar-brand,
body.sidebar-collapsed .sidebar-user {
    justify-content: center;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

body.sidebar-collapsed .menu-link {
    justify-content: center;
}

body.sidebar-collapsed .menu-icon {
    width: auto;
}

/* ---------- Main / Topbar ---------- */

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: var(--space-3) var(--space-5);
    position: relative;
    z-index: 5;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    box-shadow: var(--elev-1);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.icon-btn:hover {
    box-shadow: var(--elev-2);
    background: var(--bg);
    transform: translateY(-1px);
}

.icon-btn:active {
    transform: translateY(0);
    box-shadow: var(--inset-1);
}

.icon-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.icon-burger {
    position: relative;
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-800);
}

.icon-burger::before,
.icon-burger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-800);
}

.icon-burger::before {
    top: -6px;
}

.icon-burger::after {
    top: 6px;
}

.topbar-context {
    color: var(--text-muted);
    font-size: 0.9375rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-context strong {
    color: var(--text);
}

.topbar-separator {
    margin: 0 var(--space-2);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    flex-shrink: 0;
}

.logout-form {
    display: inline;
}

/* ---------- Contenido ---------- */

.content {
    padding: var(--space-6) var(--space-5);
}

.content h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink-900);
    margin-bottom: var(--space-1);
}

.content-subtitle {
    color: var(--text-muted);
    margin-bottom: var(--space-5);
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-1), var(--highlight);
    padding: var(--space-5);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--elev-2), var(--highlight);
}

.card-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.card-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-800);
}

.card-danger .card-value {
    color: var(--danger, #dc2626);
}

.card-value-secondary {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 2px;
}

.content-note {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* ---------- Scrim (móvil) ---------- */

.sidebar-scrim {
    display: none;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        width: var(--sidebar-width);
    }

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

    body.sidebar-open .sidebar-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 15;
        background: rgba(18, 17, 22, 0.5);
    }

    /* En móvil el colapso no aplica: siempre panel completo */
    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-width);
    }

    body.sidebar-collapsed .brand-text,
    body.sidebar-collapsed .sidebar-user-meta,
    body.sidebar-collapsed .menu-label,
    body.sidebar-collapsed .submenu {
        display: revert;
    }

    body.sidebar-collapsed .submenu {
        list-style: none;
    }

    body.sidebar-collapsed .menu-link {
        justify-content: flex-start;
    }

    .topbar {
        padding: var(--space-3) var(--space-4);
    }

    .content {
        padding: var(--space-5) var(--space-4);
    }
}

/* ============================================================
   Accesibilidad: movimiento reducido
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Ocultar input de avatar globalmente para evitar cacheo de HTML */
#avatar-input {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* ============================================================
   Módulo Parqueadero (y componentes de página reutilizables)
   ============================================================ */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.page-head .content-subtitle {
    margin-bottom: 0;
}

.page-head-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: var(--highlight), 0 1px 2px rgba(18, 17, 22, 0.10);
}

.chip-neutral {
    background: var(--ink-100);
    color: var(--ink-800);
}

.chip-info {
    background: #e3e9f5;
    color: #2b4a7c;
}

.chip-success {
    background: var(--success-bg);
    color: var(--success-text);
}

.chip-danger {
    background: var(--error-bg);
    color: var(--error-text);
}

.chip-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

/* ---------- Paneles ---------- */

.panels {
    display: grid;
    /* minmax(0, ...) en vez de solo "1.25fr 1fr": una columna de grid con fr
       no se achica más allá del ancho mínimo de su contenido (el 0 implícito
       es "auto"), así que una tabla ancha adentro empuja toda la página a
       tener scroll horizontal en vez de quedar contenida. Con minmax(0, ...)
       la columna sí puede achicarse y es la tabla la que hace scroll interno
       (.table-wrap ya tiene overflow-x: auto). */
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    align-items: start;
}

.panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-1), var(--highlight);
    padding: var(--space-5);
}

/* Paneles apilados uno tras otro en el flujo de la página (Tarifas de Servicios,
   Tarifas de Parqueadero): .panel no trae margen propio, así que las tarjetas
   quedaban pegadas y se leían como una sola. Va con el mismo gap que usa la
   grilla .panels, y por eso se limita a los hijos directos de .content: los
   paneles que van dentro de .panels ya reciben su separación del grid. */
.content>.panel+.panel {
    margin-top: var(--space-4);
}

.panel-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.panel-table {
    margin-bottom: var(--space-5);
}

.panel-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

/* Subtítulo dentro de un panel: separa bloques (ej. los tramos de custodia
   del precio por día) sin competir con el título de la sección. */
.panel-subtitle {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink-800);
    margin-bottom: var(--space-2);
}

.panel-title-flush {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

#parked-updated {
    margin-top: 0;
    white-space: nowrap;
}

/* ---------- Formulario ---------- */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.field-wide {
    grid-column: 1 / -1;
}

.field label,
.field .field-label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--ink-900);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: 0.9375rem;
    background: #fbfbfc;
    color: var(--text);
    box-shadow: var(--inset-1);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: none;
    border-color: var(--violet-500);
    box-shadow: var(--inset-1), 0 0 0 4px rgba(142, 111, 192, 0.22);
}

.field textarea {
    resize: vertical;
}

.input-plate {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.form-actions {
    margin-top: var(--space-4);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.hint-error {
    color: var(--error-text);
    font-weight: 700;
}

.field-error {
    border-color: var(--error-text) !important;
    box-shadow: 0 0 0 3px rgba(153, 27, 27, 0.18) !important;
}

.empty {
    color: var(--text-muted);
    font-size: 0.9375rem;
    padding: var(--space-3) 0;
}

/* ---------- Pills (radios) ---------- */

.pill-group {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pill {
    cursor: pointer;
    position: relative;
}

.pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill span {
    display: inline-block;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
    transition: all 0.12s ease;
}

.pill input:checked+span {
    background: var(--ink-800);
    border-color: var(--ink-800);
    color: #ffffff;
    box-shadow: var(--elev-1);
}

.pill input:focus-visible+span {
    outline: 3px solid var(--violet-500);
    outline-offset: 2px;
}

/* ---------- Búsqueda de salida ---------- */

.exit-search {
    display: flex;
    gap: var(--space-2);
}

.exit-search input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font-size: 1rem;
    background: #fbfbfc;
    box-shadow: var(--inset-1);
}

.exit-search input:focus-visible {
    outline: none;
    border-color: var(--violet-500);
    box-shadow: var(--inset-1), 0 0 0 4px rgba(142, 111, 192, 0.22);
}

/* Input de filtro en vivo dentro de un panel-title-row (ej. Pagos >
   Deudores): compacto junto al título, mismo estilo que .exit-search
   input pero sin necesitar el wrapper (no lleva botón). */
.panel-filter-input {
    flex: 1 1 420px;
    align-self: center;
    max-width: 420px;
    min-width: 220px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: 0.9rem;
    background: #fbfbfc;
    box-shadow: var(--inset-1);
}

.panel-filter-input:focus-visible {
    outline: none;
    border-color: var(--violet-500);
    box-shadow: var(--inset-1), 0 0 0 4px rgba(142, 111, 192, 0.22);
}

/* ---------- Tarjeta de resultado (salida) ---------- */

.result-card {
    margin-top: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-1), var(--highlight);
    padding: var(--space-4);
}

.rc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: 1.0625rem;
}

.rc-badges {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.rc-warning {
    margin-bottom: var(--space-3);
}

.rc-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
}

.rc-data dt {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.rc-data dd {
    font-size: 0.9375rem;
    margin: 0;
}

.rc-amount {
    text-align: center;
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--inset-1);
}

.amount-big {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink-900);
}

.amount-free {
    color: var(--success-text);
    font-size: 1.25rem;
}

.text-success {
    color: var(--success-text);
    font-weight: 600;
}

.pay-options {
    border: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: 0;
}

.pay-options legend {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: var(--space-2);
}

.pay-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    cursor: pointer;
    background: #fbfbfc;
}

.pay-option:has(input:checked) {
    border-color: var(--violet-500);
    background: rgba(142, 111, 192, 0.10);
    font-weight: 600;
}

.pay-option.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pay-cash-amount {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.pay-cash-amount label {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.pay-partial-amount {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: 0.9375rem;
    font-weight: 600;
    background: #fbfbfc;
    box-shadow: var(--inset-1);
}

.pay-partial-amount:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--inset-1), 0 0 0 4px var(--accent-glow);
}

.pay-currency {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pay-currency-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.pay-currency-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.currency-chip {
    border: 1px solid var(--border);
    border-radius: var(--radius-full, 999px);
    padding: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
    font-weight: 600;
    background: #fbfbfc;
    cursor: pointer;
}

.currency-chip.is-active {
    border-color: var(--violet-500);
    background: rgba(142, 111, 192, 0.10);
    color: var(--violet-500);
}

.currency-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.currency-chip img {
    display: block;
    border-radius: 2px;
}

.currency-chip.is-unavailable {
    opacity: 0.45;
}

.pay-currency-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.pay-currency-detail label {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.pay-foreign-amount {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: 0.9375rem;
    font-weight: 600;
    background: #fbfbfc;
    box-shadow: var(--inset-1);
}

.pay-foreign-amount:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--inset-1), 0 0 0 4px var(--accent-glow);
}

.pay-currency-hint.is-error {
    color: var(--danger, #dc2626);
}

.pay-rate-manual-toggle {
    align-self: flex-start;
    border: none;
    background: none;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--accent, var(--violet-500));
    text-decoration: underline;
    cursor: pointer;
}

.pay-rate-manual {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    background: #fbfbfc;
}

.pay-rate-manual label {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.pay-rate-manual-row {
    display: flex;
    gap: var(--space-2);
}

.pay-rate-manual-input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: 0.9375rem;
    font-weight: 600;
}

.pay-rate-manual-input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

/* ---------- Tabla ---------- */

.table-wrap {
    overflow-x: auto;
}

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

.table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: var(--space-2) var(--space-3);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table tbody tr:hover {
    background: var(--bg);
}

.td-plate {
    font-weight: 700;
    letter-spacing: 0.05em;
}

.account-movements-table {
    font-size: 0.8125rem;
}

.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
}

/* ---------- Acciones de fila en tablas (editar/eliminar) ---------- */

.row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

/* ---------- Anulación de ventas ---------- */

.sale-void-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sale-void-reason {
    width: 190px;
    font-size: 0.8125rem;
    padding: var(--space-2) var(--space-3);
}

/* La venta anulada sigue listada (el registro tiene que poder mostrarla),
   pero atenuada para que no se confunda con una venta vigente. */
.sale-row-voided td {
    opacity: 0.55;
    text-decoration: line-through;
}

.sale-row-voided td:first-child,
.sale-row-voided td:last-child {
    text-decoration: none;
}

.sale-void-reason-text {
    white-space: normal;
    max-width: 220px;
}

.row-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--elev-1);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.row-action-btn:hover {
    box-shadow: var(--elev-2);
    transform: translateY(-1px);
}

.row-action-btn:active {
    transform: translateY(0);
    box-shadow: var(--inset-1);
}

.row-action-btn:focus-visible {
    outline: 3px solid var(--violet-500);
    outline-offset: 2px;
}

.row-action-danger:hover {
    background: var(--error-bg);
    border-color: var(--error-text);
}

/* ---------- Filtros de informe (Parqueadero) ---------- */

.report-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.report-filters .field {
    min-width: 160px;
}

.report-filters select,
.report-filters input[type="date"] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
    font-size: 0.9375rem;
}

.report-filters select:focus-visible,
.report-filters input[type="date"]:focus-visible {
    outline: none;
    border-color: var(--violet-500);
    box-shadow: var(--inset-1), 0 0 0 4px rgba(142, 111, 192, 0.22);
}

.field-actions {
    min-width: auto;
}

.report-count-row {
    margin-bottom: var(--space-3);
}

/* ---------- Convenios mensuales ----------
   La fila se tiñe según lo que le queda al convenio, para que el vencimiento
   se vea de un vistazo sin tener que leer la columna de estado. */

.agreement-row.is-warning {
    background: #fff7ed;
}

.agreement-row.is-urgent,
.agreement-row.is-expired {
    background: #fef2f2;
}

/* La barra lateral va en la primera celda: con border-collapse el navegador
   no dibuja el box-shadow sobre el <tr>. */
.agreement-row.is-warning td:first-child {
    box-shadow: inset 3px 0 0 #f97316;
}

.agreement-row.is-urgent td:first-child,
.agreement-row.is-expired td:first-child {
    box-shadow: inset 3px 0 0 #dc2626;
}

/* El hover genérico de .table pisaría el tinte, así que se repite acá. */
.table tbody tr.agreement-row.is-warning:hover {
    background: #ffedd5;
}

.table tbody tr.agreement-row.is-urgent:hover,
.table tbody tr.agreement-row.is-expired:hover {
    background: #fee2e2;
}

/* ---------- Bloques de datos del informe (cierre de turno) ----------
   Cada tabla vive en su propia tarjeta con título y explicación, para que
   las cifras no se lean como un solo bloque apretado. */

.shift-summary-row {
    gap: var(--space-3);
    margin-top: var(--space-4);
    margin-bottom: 0;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border);
}

.report-section {
    margin-top: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--elev-1), var(--highlight);
}

.report-section-head {
    margin-bottom: var(--space-4);
}

.report-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-900);
}

.report-section-desc {
    margin-top: var(--space-2);
    max-width: 82ch;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.table-airy th {
    padding: var(--space-3) var(--space-4);
}

.table-airy td {
    padding: var(--space-4);
    vertical-align: top;
    line-height: 1.45;
}

.table-airy th:first-child,
.table-airy td:first-child {
    padding-left: var(--space-2);
}

.table-airy th:last-child,
.table-airy td:last-child {
    padding-right: var(--space-2);
}

.table-airy .cell-note {
    display: block;
    margin-top: var(--space-1);
}

.cell-note-voided {
    color: var(--danger, #dc2626);
}

.table-airy tbody tr:last-child td {
    border-bottom: none;
}

.table-airy tfoot td {
    padding-top: var(--space-4);
    border-top: 2px solid var(--border);
    border-bottom: none;
}

/* ============================================================
   Dashboard de Cuentas por Cobrar (barras + donut)
   ============================================================ */

.ar-dashboard {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-4);
    align-items: start;
}

.ar-bar-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ar-bar-row {
    display: grid;
    grid-template-columns: 180px 1fr 110px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.12s ease, transform 0.12s ease;
}

.ar-bar-row:hover {
    background: var(--bg);
    transform: translateX(2px);
}

.ar-bar-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-bar-badge {
    padding: 1px 8px;
    font-size: 0.6875rem;
    flex-shrink: 0;
}

.ar-bar-track {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background: var(--ink-100);
    box-shadow: var(--inset-1);
    overflow: hidden;
}

.ar-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--violet-500), var(--ink-600));
    min-width: 6px;
}

.ar-bar-amount {
    text-align: right;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink-800);
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ar-bar-amount-line {
    display: block;
}

.ar-donut-panel {
    text-align: center;
}

.ar-donut {
    width: 100%;
    max-width: 220px;
    margin: 0 auto var(--space-4);
}

.ar-donut-total-label {
    font-size: 6px;
    fill: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ar-donut-total-value {
    font-size: 8px;
    font-weight: 700;
    fill: var(--ink-900);
}

.ar-legend {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
}

.ar-legend li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
}

.ar-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ar-legend-label {
    flex: 1;
    color: var(--ink-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-legend-percent {
    font-weight: 700;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .ar-dashboard {
        grid-template-columns: 1fr;
    }

    .ar-bar-row {
        grid-template-columns: 120px 1fr 90px;
    }
}

/* ============================================================
   Árbol de permisos (Roles y Usuarios)
   ============================================================ */

.perm-tree {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.perm-tree-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    background: #fbfbfc;
}

.perm-tree-children {
    list-style: none;
    margin-top: var(--space-2);
    padding-left: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.perm-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink-900);
    cursor: pointer;
}

.perm-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--violet-500);
}

.perm-override {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: default;
}

.perm-override-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink-900);
}

.perm-override-select select {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
    font-size: 0.8125rem;
}

.perm-override-select select:focus-visible {
    outline: none;
    border-color: var(--violet-500);
    box-shadow: var(--inset-1), 0 0 0 4px rgba(142, 111, 192, 0.22);
}

/* ---------- Venta Directa: modal "Agregar producto" ---------- */

.table-products {
    font-size: 0.8125rem;
}

#product-picker-modal .exit-search {
    margin-bottom: var(--space-4);
}

/* Antes la tabla de productos vivía fija en la pantalla compitiendo por
   ancho con el carrito, así que llegar al botón "Agregar" (última columna)
   pedía scroll horizontal. Ahora vive en un modal con más ancho disponible,
   y además toda la fila es clickeable — no hace falta acertarle al botón. */
.table-products tbody tr.js-product-row {
    cursor: pointer;
}

.table-products tbody tr.js-product-row.is-out-of-stock {
    cursor: default;
    opacity: 0.6;
}

/* Repuestos no tienen precio en dólares — se oculta la columna entera en
   vez de mostrarla siempre con "—". */
.table-products.is-part-mode .col-usd {
    display: none;
}

/* Algunas marcas son larguísimas y empujaban la tabla a un scroll horizontal
   que había que arrastrar hasta el final para llegar al botón "Agregar".
   Se trunca con "…" y el title nativo muestra el nombre completo al hover. */
.table-products .col-brand {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Responsive del módulo ---------- */

@media (max-width: 1100px) {
    .panels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {

    .form-grid,
    .rc-data {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Módulo Clientes
   ============================================================ */

.panel-narrow {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    align-items: start;
}

.filter-bar {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.filter-input {
    flex: 1;
    min-width: 200px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
    font-size: 0.9375rem;
}

.filter-select {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
    font-size: 0.9375rem;
}

.filter-input:focus-visible,
.filter-select:focus-visible {
    outline: none;
    border-color: var(--violet-500);
    box-shadow: var(--inset-1), 0 0 0 4px rgba(142, 111, 192, 0.22);
}

.flag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.flag-row strong {
    font-size: 0.9375rem;
}

.flag-row .hint {
    margin-top: 2px;
}

.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-4) 0;
}

.inline-form {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
}

.inline-input {
    flex: 1;
    min-width: 120px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
    font-size: 0.875rem;
}

.inline-input:focus-visible {
    outline: none;
    border-color: var(--violet-500);
    box-shadow: var(--inset-1), 0 0 0 4px rgba(142, 111, 192, 0.22);
}

/* Alinea en columnas dos (o más) .inline-form apiladas: cada <form> se
   vuelve "invisible" para el layout (display:contents) y sus campos pasan
   a ser celdas de esta grilla común, en vez de que cada <form> reparta su
   ancho de forma independiente — con flex por separado, un botón más largo
   en una fila angostaba sus inputs y desalineaba todo respecto a la otra. */
.inline-form-grid {
    display: grid;
    grid-template-columns: 130px 1fr 1fr auto;
    gap: var(--space-2);
    align-items: center;
}

.inline-form-grid .inline-form {
    display: contents;
}

.inline-form-grid .inline-form .btn {
    width: 100%;
}

.inline-form-grid .inline-form select.inline-input {
    padding-right: var(--space-6);
}

.table-compact th,
.table-compact td {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
}

.plate-list {
    list-style: none;
    margin: var(--space-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.plate-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fbfbfc;
}

.plate-delete-form {
    margin-left: auto;
}

.btn-icon {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.9375rem;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    line-height: 1;
}

.btn-icon:hover {
    background: var(--bg);
    color: var(--error-text);
}

.bulk-plates {
    margin-top: var(--space-4);
    border-top: 1px solid var(--border);
    padding-top: var(--space-3);
}

.bulk-plates summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ink-900);
    margin-bottom: var(--space-2);
}

.bulk-plates textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: 0.875rem;
    background: #fbfbfc;
    box-shadow: var(--inset-1);
    resize: vertical;
}

/* ---------- Vínculo de empresa en tarjeta de salida ---------- */

.rc-empresa dd {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.rc-empresa-name {
    font-size: 0.9375rem;
}

.link-edit-form {
    display: none;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-1);
}

.link-edit-form.is-open {
    display: flex;
}

.link-edit-input {
    flex: 1;
    min-width: 140px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
    font-size: 0.8125rem;
}

.link-edit-input:focus-visible {
    outline: none;
    border-color: var(--violet-500);
    box-shadow: var(--inset-1), 0 0 0 4px rgba(142, 111, 192, 0.22);
}

.hint-linked {
    display: none;
    color: var(--violet-500);
    font-weight: 600;
}

.hint-linked.is-visible {
    display: block;
}

.hint-linked.is-warning {
    color: var(--error-text);
}

@media (max-width: 900px) {
    .panel-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Módulo Ventas (Venta Directa)
   ============================================================ */

.tire-result .rc-head {
    font-size: 0.9375rem;
}

.product-type-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.product-type-row label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ink-900);
    white-space: nowrap;
}

.product-type-row select {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
    font-size: 0.9375rem;
}

.product-type-row select:focus-visible {
    outline: none;
    border-color: var(--violet-500);
    box-shadow: var(--inset-1), 0 0 0 4px rgba(142, 111, 192, 0.22);
}

.cart-qty-input {
    width: 64px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
}

.cart-price-input {
    width: 110px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
}

.cart-deliver-input {
    width: 64px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
}

.cart-currency-select {
    width: 90px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
}

/* La celda "Entrega ahora" tiene una línea extra (el aviso de bodega),
   así que alineamos todas las celdas del carrito arriba para que los
   inputs queden en la misma línea sin importar esa línea de más. */
#cart-body td {
    vertical-align: top;
}

#cart-body .cart-deliver-input+.hint {
    margin-top: var(--space-1);
    white-space: nowrap;
}

.cart-qty-input:focus-visible,
.cart-price-input:focus-visible,
.cart-deliver-input:focus-visible,
.cart-currency-select:focus-visible {
    outline: none;
    border-color: var(--violet-500);
    box-shadow: var(--inset-1), 0 0 0 4px rgba(142, 111, 192, 0.22);
}

/* ---------- Bodega de Reserva ---------- */

.reserve-subrow td {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.history-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.receipt-reserve-row td {
    padding-top: 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px dashed var(--border);
}

.receipt-positions-label {
    margin-bottom: var(--space-1);
}

.receipt-positions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.receipt-positions-table th {
    text-align: left;
    font-weight: 700;
    color: var(--text-muted);
    padding: 2px var(--space-2) 2px 0;
}

.receipt-positions-table td {
    padding: 2px var(--space-2) 2px 0;
    border: none;
}

/* ---------- Comprobante (impresión) ---------- */

.receipt {
    max-width: 640px;
    margin: 0 auto;
}

.receipt-header {
    text-align: center;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px dashed var(--border);
}

.receipt-header h2 {
    font-size: 1.25rem;
    color: var(--ink-900);
}

.receipt-title {
    font-weight: 700;
    margin-top: var(--space-2);
}

.receipt-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.receipt-meta dt {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.receipt-meta dd {
    font-size: 0.9375rem;
}

.receipt-items {
    margin-bottom: var(--space-4);
}

.receipt-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1.25rem;
    padding: var(--space-3) 0;
    border-top: 2px solid var(--border);
    margin-bottom: var(--space-3);
}

.receipt-payment {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.receipt-diagram-details {
    margin-bottom: var(--space-4);
}

.receipt-diagram-details summary {
    cursor: pointer;
    width: fit-content;
    list-style: none;
}

.receipt-diagram-details summary::-webkit-details-marker {
    display: none;
}

.receipt-diagram-wrap {
    display: flex;
    justify-content: center;
    background: var(--bg);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-top: var(--space-3);
}

.receipt-diagram-wrap .tire-install-diagram {
    width: 100%;
    max-width: 220px;
    height: auto;
}

@media print {

    .sidebar,
    .topbar,
    .no-print {
        display: none !important;
    }

    .main {
        margin: 0;
    }

    .content {
        padding: 0;
    }

    .receipt {
        box-shadow: none;
        border: none;
    }

    body {
        background: #ffffff;
    }
}

/* ---------- Venta Directa: líneas de pago (multi-moneda/mixto) ---------- */

.payment-lines-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.payment-lines-table select,
.payment-lines-table input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    font-size: 0.875rem;
    background: #fbfbfc;
    box-shadow: var(--inset-1);
}

.payment-lines-table select:focus-visible,
.payment-lines-table input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--inset-1), 0 0 0 4px var(--accent-glow);
}

.payment-lines-table td {
    vertical-align: top;
    min-width: 110px;
}

.payment-lines-status {
    margin-top: var(--space-2);
    font-weight: 700;
    color: var(--text-muted);
}

.payment-lines-status.is-mismatch {
    color: var(--error-text);
}

.payment-lines-status.is-ok {
    color: var(--success-text);
}

.pl-rate-error {
    border-color: var(--danger, #dc2626) !important;
}

/* ---------- Cronograma de pago (cuenta corriente, dentro de una línea de pago) ---------- */

.pl-schedule-row td {
    background: var(--bg);
    padding-top: var(--space-4);
}

.pl-schedule {
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
}

.pl-schedule-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    border: none;
    background: transparent;
    padding: var(--space-2) 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.pl-schedule-arrow {
    color: var(--text-muted);
    width: 1em;
    flex: none;
}

.pl-schedule-toggle .field-label {
    margin-bottom: 0;
}

.pl-schedule-toggle .pl-schedule-status {
    margin-left: auto;
    margin-top: 0;
}

.pl-schedule-body {
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}

.pl-schedule-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: var(--space-2);
}

.pl-schedule-table {
    font-size: 0.8125rem;
}

.pl-schedule-table th,
.pl-schedule-table td {
    padding: var(--space-2);
}

.pl-schedule-status {
    margin-top: var(--space-2);
    font-weight: 700;
    color: var(--text-muted);
}

.pl-schedule-status.is-mismatch {
    color: var(--error-text);
}

.pl-schedule-status.is-ok {
    color: var(--success-text);
}

/* ---------- Modal genérico (dialog nativo) ---------- */

.modal {
    margin: auto;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-2);
    padding: 0;
    width: min(920px, 94vw);
    max-height: 90vh;
    background: var(--surface);
    color: var(--text);
}

.modal::backdrop {
    background: rgba(15, 23, 42, 0.55);
}

.modal-form {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    font-size: 1.125rem;
}

.modal-body {
    padding: var(--space-5);
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}

.modal-sm {
    width: min(440px, 94vw);
}

/* ---------- Modal: instalación de neumáticos ---------- */

.tire-install-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.tire-install-fields input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
}

.tire-install-fields input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--inset-1), 0 0 0 4px var(--accent-glow);
}

.tire-install-workspace {
    display: flex;
    gap: var(--space-5);
    position: relative;
}

.tire-install-lines {
    flex: 0 0 260px;
}

.tire-install-lines h3 {
    font-size: 0.9375rem;
    margin-bottom: var(--space-2);
}

.tire-install-line-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.tire-install-line-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    background: #fbfbfc;
    font-size: 0.875rem;
}

.tire-install-line-item.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.tire-install-line-item.is-done {
    border-color: var(--success-text);
    background: var(--success-bg);
}

.tire-install-line-item .count {
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.tire-install-diagram-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    background: var(--bg);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.tire-install-diagram {
    width: 100%;
    max-width: 260px;
    height: auto;
}

.tire-install-diagram .ti-chassis {
    stroke-width: 1.5;
}

.tire-install-diagram .ti-chassis-tracto {
    fill: #1e293b;
    stroke: #0f172a;
}

.tire-install-diagram .ti-chassis-semi {
    fill: #334155;
    stroke: #1e293b;
}

.tire-install-diagram .ti-cab {
    fill: #e11d48;
    stroke: #9f1239;
    stroke-width: 1.5;
}

.tire-install-diagram .ti-hood {
    fill: #e11d48;
    stroke: #9f1239;
    stroke-width: 1.5;
}

.tire-install-diagram .ti-bumper {
    fill: #1e293b;
    stroke: #0f172a;
    stroke-width: 1;
}

.tire-install-diagram .ti-windshield {
    fill: #1e293b;
    stroke: #0f172a;
    stroke-width: 1.5;
    opacity: 1;
}

.tire-install-diagram .ti-windshield-reflection {
    stroke: #ffffff;
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.35;
}

.tire-install-diagram .ti-mirror-bracket {
    stroke: #e11d48;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.tire-install-diagram .ti-mirror {
    fill: #e11d48;
    stroke: #9f1239;
    stroke-width: 1;
}

.tire-install-diagram .ti-headlight {
    fill: #fbbf24;
    stroke: #d97706;
    stroke-width: 0.5;
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.9));
}

.tire-install-diagram .ti-fuel-tank {
    fill: #cbd5e1;
    stroke: #94a3b8;
    stroke-width: 1;
}

.tire-install-diagram .ti-tank-strap {
    stroke: #475569;
    stroke-width: 1.5;
}

.tire-install-diagram .ti-catwalk {
    fill: #475569;
    stroke: #334155;
    stroke-width: 1;
}

.tire-install-diagram .ti-catwalk-line {
    stroke: #334155;
    stroke-width: 0.75;
    opacity: 0.5;
}

.tire-install-diagram .ti-hitch-beam {
    fill: #475569;
    stroke: #334155;
    stroke-width: 1;
}

.tire-install-diagram .ti-hitch {
    fill: #cbd5e1;
    stroke: #94a3b8;
    stroke-width: 1.5;
}

.tire-install-diagram .ti-hitch-pin {
    fill: #f8fafc;
    stroke: #475569;
    stroke-width: 1.5;
}

.tire-install-diagram .ti-semi-body {
    fill: #f8fafc;
    stroke: #cbd5e1;
    stroke-width: 1.5;
}

.tire-install-diagram .ti-taillight {
    stroke-width: 0.5;
    filter: drop-shadow(0 0 1px rgba(239, 68, 68, 0.8));
}

.tire-install-diagram .ti-taillight-left,
.tire-install-diagram .ti-taillight-right {
    fill: #ef4444;
    stroke: #b91c1c;
}

.tire-install-diagram .ti-axle {
    fill: #64748b;
    stroke: #475569;
    stroke-width: 1;
}

.tire-install-diagram .ti-section-label {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.08em;
    fill: #94a3b8;
}

.tire-install-diagram .ti-wheel {
    stroke-width: 3.5;
    rx: 6;
    transition: fill 0.12s ease, stroke 0.12s ease;
}

.tire-install-diagram .ti-wheel.tp-disabled {
    fill: #cbd5e1;
    stroke: #334155;
    cursor: not-allowed;
}

.tire-install-diagram .ti-wheel.tp-available {
    fill: #fde68a;
    stroke: #b45309;
    cursor: pointer;
}

.tire-install-diagram .ti-wheel.tp-available:hover {
    fill: #fcd34d;
    stroke: #78350f;
}

.tire-install-diagram .ti-wheel.tp-occupied {
    fill: #6ee7b7;
    stroke: #064e3b;
    cursor: pointer;
}

.tire-install-diagram .ti-label {
    font-size: 8px;
    fill: var(--text-muted);
    pointer-events: none;
}

.tire-position-popover {
    position: fixed;
    z-index: 2147483000;
    width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-2);
    padding: var(--space-3);
    /* El max-height lo calcula placePopover() según el espacio libre dentro del
       modal; acá solo se habilita el scroll para cuando no alcance. */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tire-position-popover .field {
    margin-bottom: var(--space-2);
}

.tire-position-popover input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    background: #fbfbfc;
}

.tire-position-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

@media (max-width: 720px) {
    .tire-install-fields {
        grid-template-columns: 1fr;
    }

    .tire-install-workspace {
        flex-direction: column;
    }

    .tire-install-lines {
        flex: none;
    }
}

/* ---------- Clientes: teléfono con selector de país ---------- */

.phone-input-group {
    display: flex;
    gap: var(--space-2);
}

.phone-country-picker {
    position: relative;
    flex: 0 0 108px;
}

.phone-country-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.phone-country-btn:hover {
    border-color: var(--ink-500);
}

.phone-country-btn:focus-visible,
.phone-country-btn[aria-expanded="true"] {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--inset-1), 0 0 0 4px var(--accent-glow);
}

.phone-caret {
    margin-left: auto;
    font-size: 0.7em;
    color: var(--text-muted);
}

.phone-flag {
    display: block;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    object-fit: cover;
    flex: none;
}

.phone-country-list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    width: 220px;
    max-height: 260px;
    overflow-y: auto;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-2);
    padding: var(--space-2);
}

.phone-country-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
}

.phone-country-list li:hover {
    background: var(--bg);
}

.phone-country-list li[aria-selected="true"] {
    background: var(--accent-glow);
    font-weight: 600;
}

.phone-country-dial-suffix {
    margin-left: auto;
    color: var(--text-muted);
    font-weight: 600;
}

.phone-number-input {
    flex: 1;
    min-width: 0;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.js-rut {
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* ============================================================
   Dashboard: unidades de negocio
   ============================================================ */

.dashboard-units {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    align-items: start;
}

.dashboard-unit-wide {
    grid-column: 1 / -1;
}

/* Encabezado de tarjeta (título + botón) siempre en una sola fila, incluso
   si el texto es un poco más largo (ej. "Ir a Neumáticos") — así todas las
   tarjetas de unidad de negocio quedan con el mismo alto. */
.dashboard-unit>.panel-title-row {
    flex-wrap: nowrap;
}

.dashboard-unit>.panel-title-row .panel-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.dashboard-unit>.panel-title-row .btn {
    flex-shrink: 0;
}

.unit-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
}

.unit-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.unit-stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.unit-stat-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-800);
}

.unit-stat-sub {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ---------- Gráfico de flujo (viz-*: genérico, reutilizable) ---------- */

.viz-root {
    color-scheme: light;
    --viz-surface: #fcfcfb;
    --viz-text-secondary: var(--text-muted);
    --viz-grid: #e1e0d9;
    --viz-baseline: var(--border);
    --viz-entries: #2a78d6;
    --viz-exits: #eb6834;
}

.viz-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
}

.viz-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.viz-stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.viz-stat-value {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ink-800);
}

.viz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
}

.viz-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 600;
}

.viz-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.viz-swatch-entries {
    background: var(--viz-entries);
}

.viz-swatch-exits {
    background: var(--viz-exits);
}

.viz-chart-wrap {
    position: relative;
}

.viz-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.viz-svg .viz-grid-line {
    stroke: var(--viz-grid);
    stroke-width: 1;
}

.viz-svg .viz-baseline {
    stroke: var(--viz-baseline);
    stroke-width: 1;
}

.viz-svg .viz-axis-label {
    fill: var(--text-muted);
    font-size: 9px;
}

.viz-svg .viz-bar {
    transition: opacity 0.1s ease;
}

.viz-svg .viz-bar:hover,
.viz-svg .viz-bar:focus-visible {
    opacity: 0.8;
    outline: none;
}

.viz-svg .viz-bar-entries {
    fill: var(--viz-entries);
}

.viz-svg .viz-bar-exits {
    fill: var(--viz-exits);
}

.viz-tooltip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    background: var(--ink-900);
    color: #ffffff;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    line-height: 1.5;
    box-shadow: var(--elev-2);
    white-space: nowrap;
    transform: translate(-50%, calc(-100% - 10px));
}

.viz-tooltip[hidden] {
    display: none;
}

.viz-tooltip-title {
    font-weight: 700;
    margin-bottom: 2px;
}

.viz-tooltip-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.viz-tooltip-key {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.viz-tooltip-total {
    font-weight: 700;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Línea "Hoy" del flujo de vencimientos — pointer-events:none para que
   nunca tape el hit-rect de la barra que tiene debajo. */
.viz-svg .viz-today-line {
    stroke: var(--danger, #dc2626);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    pointer-events: none;
}

.viz-svg .viz-today-label {
    fill: var(--danger, #dc2626);
    font-size: 9px;
    font-weight: 700;
    pointer-events: none;
}

/* ============================================================
   Reportes consolidados: pestañas
   ============================================================ */

.report-filter-panel {
    margin-bottom: var(--space-5);
}

.tabs {
    display: flex;
    gap: 4px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
    padding: var(--space-3) var(--space-5) 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: transparent;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.tab-btn:hover:not(.is-active) {
    color: var(--ink-800);
    background: rgba(255, 255, 255, 0.6);
}

.tab-btn.is-active {
    color: var(--accent);
    background: var(--surface);
    border-color: var(--border);
    border-bottom: 1px solid var(--surface);
}

.tab-panel[hidden] {
    display: none;
}

/* ============================================================
   Foto de perfil editable (panel de Usuarios)
   ============================================================ */

.avatar-edit-row {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-5);
}

.avatar-edit {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.avatar-96 {
    width: 96px;
    height: 96px;
    font-size: 2rem;
    border: 3px solid var(--surface);
    box-shadow: var(--elev-2);
}

.avatar-edit-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--mint));
    border: 3px solid var(--surface);
    box-shadow: var(--elev-1);
    font-size: 0.9375rem;
    pointer-events: none;
}

/* ---------- Documento de identidad con país (mismo patrón que el selector de teléfono) ---------- */

.doc-input-group {
    display: flex;
    gap: var(--space-2);
}

.doc-country-picker {
    position: relative;
    flex: 0 0 108px;
}

.doc-country-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.doc-country-btn:hover {
    border-color: var(--ink-500);
}

.doc-country-btn:focus-visible,
.doc-country-btn[aria-expanded="true"] {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--inset-1), 0 0 0 4px var(--accent-glow);
}

.doc-caret {
    margin-left: auto;
    font-size: 0.7em;
    color: var(--text-muted);
}

.doc-flag {
    display: block;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    object-fit: cover;
    flex: none;
}

/* "Otro país" no tiene bandera: va un globo en el mismo hueco. */
.doc-flag-other {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 14px;
    font-size: 0.75rem;
    line-height: 1;
    box-shadow: none;
    flex: none;
}

.doc-country-list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    width: 220px;
    max-height: 260px;
    overflow-y: auto;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-2);
    padding: var(--space-2);
}

.doc-country-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
}

.doc-country-list li:hover {
    background: var(--bg);
}

.doc-country-list li[aria-selected="true"] {
    background: var(--accent-glow);
    font-weight: 600;
}

.doc-country-type-suffix {
    margin-left: auto;
    color: var(--text-muted);
    font-weight: 600;
}

.doc-input-group .js-document {
    flex: 1;
    min-width: 0;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* ---------- Parqueadero: nacionalidad de la patente (mismo patrón que el selector de teléfono) ---------- */

.plate-input-group {
    display: flex;
    gap: var(--space-2);
}

.plate-country-picker {
    position: relative;
    flex: 0 0 56px;
}

.plate-country-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 100%;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    background: #fbfbfc;
    box-shadow: var(--inset-1);
    cursor: pointer;
}

.plate-country-btn:hover {
    border-color: var(--ink-500);
}

.plate-country-btn:focus-visible,
.plate-country-btn[aria-expanded="true"] {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--inset-1), 0 0 0 4px var(--accent-glow);
}

.plate-caret {
    font-size: 0.7em;
    color: var(--text-muted);
}

.plate-flag {
    display: block;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    object-fit: cover;
    flex: none;
}

.plate-country-list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    width: 200px;
    max-height: 260px;
    overflow-y: auto;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-2);
    padding: var(--space-2);
}

.plate-country-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
}

.plate-country-list li:hover {
    background: var(--bg);
}

.plate-country-list li[aria-selected="true"] {
    background: var(--accent-glow);
    font-weight: 600;
}

.plate-country-name {
    flex: 1;
}

.plate-country-format {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.plate-input-group .input-plate {
    flex: 1;
    min-width: 0;
}

/* ---------- Combobox de búsqueda (combobox.js) ---------- */

/* El wrapper lo inserta el JS alrededor del input, dentro del .field, así que
   el input conserva sus estilos y su width: 100%. */
.combobox {
    position: relative;
    width: 100%;
}

/* Espacio a la derecha para el ▾, para que no tape lo que se escribe. */
.combobox input {
    padding-right: calc(var(--space-3) + 20px);
}

.combobox-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
}

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

.combobox-list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: var(--space-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-2);
}

.combobox--up .combobox-list {
    top: auto;
    bottom: calc(100% + 4px);
}

.combobox-option {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
}

.combobox-option:hover {
    background: var(--bg);
}

/* aria-selected marca la opción activa del teclado, no una selección hecha:
   el valor solo se copia al input con Enter o con clic. */
.combobox-option[aria-selected="true"] {
    background: var(--accent-glow);
}

.combobox-option strong {
    font-weight: 700;
}

.combobox-empty {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    color: var(--text-muted);
}