/* ═══════════════════════════════════════════════════════
   COMPONENTES — tarjetas, KPIs, tabs, tablas, modales
   Fleet Dashboard v5
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   TARJETA BASE
   ───────────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.card-head {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-4) var(--s-4) 0;
}
.card-head.with-tabs { flex-wrap: wrap; align-items: center; }
.card-titles { min-width: 0; flex: 1; }
.card-title {
    font-size: var(--t-md); font-weight: 600; color: var(--ink);
    letter-spacing: -0.01em; line-height: 1.35;
}
.card-subtitle {
    font-size: var(--t-xs); color: var(--ink-muted);
    margin-top: 2px; line-height: 1.4;
}
.card-actions { display: flex; gap: var(--s-1); flex-shrink: 0; }
.card-body { padding: var(--s-3) var(--s-4) var(--s-4); flex: 1; min-width: 0; }
.card-body.flush { padding: 0; }

/* Botones de acción de tarjeta: aparecen al pasar el mouse, siempre accesibles por teclado */
.card-btn {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--r-sm); cursor: pointer;
    color: var(--ink-muted);
    opacity: 0; transition: opacity 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.card:hover .card-btn, .card-btn:focus-visible { opacity: 1; }
.card-btn:hover { color: var(--accent); border-color: var(--border); background: var(--surface-hover); }
.card-btn.pdf:hover { color: var(--status-critical); }
.card-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ─────────────────────────────────────────────
   TARJETAS KPI
   Etiqueta arriba, número protagonista, delta con flecha, sparkline al pie.
   Sin barra de gradiente: el color aparece sólo cuando comunica estado.
   ───────────────────────────────────────────── */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.kpi-grid.fixed-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid.fixed-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-grid.fixed-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-4) var(--s-4) 0;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    min-width: 0; overflow: hidden;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.kpi:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.kpi-label {
    font-size: var(--t-2xs); font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase; letter-spacing: 0.08em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-value {
    font-size: var(--t-2xl); font-weight: 600;
    letter-spacing: -0.02em; line-height: 1.15;
    margin-top: var(--s-2); color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-sub {
    font-size: var(--t-xs); color: var(--ink-secondary);
    margin-top: 3px; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpi-delta {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--t-xs); font-weight: 600;
    margin-top: var(--s-2);
}
.kpi-delta .arrow { font-size: 10px; line-height: 1; }
.kpi-delta.up   { color: var(--delta-up); }
.kpi-delta.down { color: var(--delta-down); }
.kpi-delta.flat { color: var(--ink-muted); }
.kpi-delta .ref { color: var(--ink-muted); font-weight: 400; }

.kpi-spark { height: 34px; margin: var(--s-2) calc(var(--s-4) * -1) 0; }
.kpi:not(:has(.kpi-spark)) { padding-bottom: var(--s-4); }

/* El filo de color significa "requiere atención": sólo ámbar y rojo.
   No existe un estado verde a propósito — ausencia de filo ya significa normal,
   y pintar de verde lo que está bien apaga la señal de lo que no lo está. */
.kpi.state-warning  { border-left: 2px solid var(--status-warning); }
.kpi.state-critical { border-left: 2px solid var(--status-critical); }

/* ─────────────────────────────────────────────
   ESTADÍSTICAS COMPACTAS (dentro de tarjetas)
   ───────────────────────────────────────────── */

.stat-row {
    display: grid; gap: var(--s-3);
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    margin-bottom: var(--s-4);
}
.stat {
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    padding: var(--s-3);
    min-width: 0;
}
.stat-label {
    font-size: var(--t-2xs); font-weight: 600; color: var(--ink-muted);
    text-transform: uppercase; letter-spacing: 0.07em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-value {
    font-size: var(--t-xl); font-weight: 600; color: var(--ink);
    margin-top: 3px; letter-spacing: -0.015em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-sub { font-size: var(--t-2xs); color: var(--ink-secondary); margin-top: 1px; }
.stat.clickable { cursor: pointer; transition: background 0.15s var(--ease); }
.stat.clickable:hover { background: var(--accent-soft); }
.stat.clickable.active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.stat.good .stat-value     { color: var(--status-good); }
.stat.warning .stat-value  { color: var(--status-warning); }
.stat.serious .stat-value  { color: var(--status-serious); }
.stat.critical .stat-value { color: var(--status-critical); }

/* ─────────────────────────────────────────────
   TABS
   ───────────────────────────────────────────── */

.tabs {
    display: flex; gap: 2px;
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    padding: 3px;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: 5px var(--s-3);
    border: none; background: transparent;
    color: var(--ink-muted);
    font-size: var(--t-xs); font-weight: 600;
    border-radius: var(--r-sm); cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.active {
    background: var(--surface); color: var(--accent);
    box-shadow: var(--shadow-sm);
}

/* Tabs de sección, sobre el contenido */
.section-tabs {
    display: flex; align-items: center; gap: var(--s-2);
    margin-bottom: var(--s-4);
    border-bottom: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none;
}
.section-tabs::-webkit-scrollbar { display: none; }
.section-tab {
    padding: var(--s-2) var(--s-3) var(--s-3);
    border: none; background: none; cursor: pointer;
    color: var(--ink-muted);
    font-size: var(--t-md); font-weight: 500;
    white-space: nowrap; position: relative;
    transition: color 0.15s var(--ease);
}
.section-tab:hover { color: var(--ink); }
.section-tab.active { color: var(--accent); font-weight: 600; }
.section-tab.active::after {
    content: ''; position: absolute;
    left: var(--s-2); right: var(--s-2); bottom: -1px; height: 2px;
    background: var(--accent); border-radius: var(--r-pill) var(--r-pill) 0 0;
}

/* ─────────────────────────────────────────────
   ÁREA DE GRÁFICO
   ───────────────────────────────────────────── */

.chart-area { width: 100%; min-height: 260px; }

.chart-note {
    font-size: var(--t-2xs); color: var(--ink-muted);
    padding: var(--s-2) var(--s-4) var(--s-3);
    border-top: 1px solid var(--border);
    line-height: 1.45;
}

/* ─────────────────────────────────────────────
   TABLAS
   ───────────────────────────────────────────── */

.table-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4);
    border-bottom: 1px solid var(--border);
}
.table-meta {
    display: flex; align-items: center; gap: var(--s-3);
    font-size: var(--t-xs); color: var(--ink-muted);
    flex-shrink: 0;
}
.table-scroll { overflow-x: auto; max-height: 620px; overflow-y: auto; }

table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }

thead th {
    background: var(--surface);
    color: var(--ink-muted);
    font-weight: 600; font-size: var(--t-2xs);
    text-transform: uppercase; letter-spacing: 0.07em;
    padding: var(--s-3) var(--s-4);
    text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 2;
    cursor: pointer; user-select: none;
}
thead th:hover { color: var(--ink); }
thead th.sorted { color: var(--accent); }
thead th .sort-caret { opacity: 0.55; margin-left: 3px; font-size: 9px; }

tbody td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--grid-line);
    white-space: nowrap; color: var(--ink);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-hover); }
tbody tr.clickable { cursor: pointer; }
.text-right { text-align: right; }
.text-center { text-align: center; }
td.dim { color: var(--ink-muted); }

/* ─────────────────────────────────────────────
   BADGES Y PASTILLAS
   ───────────────────────────────────────────── */

.badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 7px; border-radius: var(--r-pill);
    font-size: var(--t-2xs); font-weight: 600;
    line-height: 1.6; white-space: nowrap;
    border: 1px solid transparent;
}
.badge-neutral  { background: var(--surface-sunken); color: var(--ink-secondary); border-color: var(--border); }
.badge-accent   { background: var(--accent-soft); color: var(--accent); }
.badge-good     { background: rgba(12,163,12,0.12);  color: var(--status-good); }
.badge-warning  { background: rgba(250,178,25,0.16); color: #8a6100; }
.badge-serious  { background: rgba(236,131,90,0.16); color: #a44a1e; }
.badge-critical { background: rgba(208,59,59,0.12);  color: var(--status-critical); }
:root[data-theme="dark"] .badge-warning { color: var(--status-warning); }
:root[data-theme="dark"] .badge-serious { color: var(--status-serious); }
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .badge-warning { color: var(--status-warning); }
    :root:where(:not([data-theme="light"])) .badge-serious { color: var(--status-serious); }
}

/* Punto de color para leyendas inline: la identidad nunca va sólo en el texto */
.dot {
    width: 8px; height: 8px; border-radius: 2px;
    display: inline-block; flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   PANEL DE ALERTAS
   ───────────────────────────────────────────── */

.alert-list { display: flex; flex-direction: column; gap: var(--s-1); }
.alert-item {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--r-md);
    background: var(--surface-sunken);
    cursor: pointer; border: none; width: 100%; text-align: left;
    transition: background 0.15s var(--ease);
}
.alert-item:hover { background: var(--accent-soft); }
.alert-icon {
    width: 26px; height: 26px; border-radius: var(--r-sm);
    display: grid; place-items: center; flex-shrink: 0;
}
.alert-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alert-icon.good     { background: rgba(12,163,12,0.14);  color: var(--status-good); }
.alert-icon.warning  { background: rgba(250,178,25,0.18); color: #8a6100; }
.alert-icon.serious  { background: rgba(236,131,90,0.18); color: #a44a1e; }
.alert-icon.critical { background: rgba(208,59,59,0.14);  color: var(--status-critical); }
:root[data-theme="dark"] .alert-icon.warning { color: var(--status-warning); }
:root[data-theme="dark"] .alert-icon.serious { color: var(--status-serious); }
.alert-body { min-width: 0; flex: 1; }
.alert-title { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.alert-desc { display: block; font-size: var(--t-2xs); color: var(--ink-muted); line-height: 1.4; }
.alert-count { font-size: var(--t-lg); font-weight: 600; color: var(--ink); flex-shrink: 0; }

/* ─────────────────────────────────────────────
   ESTADOS VACÍOS
   ───────────────────────────────────────────── */

.empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: var(--s-10) var(--s-6);
    color: var(--ink-muted); gap: var(--s-2); min-height: 220px;
}
.empty svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.4; opacity: 0.45; }
.empty h4 { font-size: var(--t-md); font-weight: 600; color: var(--ink-secondary); }
.empty p { font-size: var(--t-xs); max-width: 340px; }

/* ─────────────────────────────────────────────
   MODALES
   ───────────────────────────────────────────── */

.overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(8,11,17,0.6);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-6);
    opacity: 0; transition: opacity 0.18s var(--ease);
}
.overlay.active { opacity: 1; }
.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    width: 100%; max-width: 1180px;
    max-height: calc(100vh - var(--s-10));
    display: flex; flex-direction: column; overflow: hidden;
    transform: scale(0.97); transition: transform 0.18s var(--ease);
}
.overlay.active .modal { transform: none; }
.modal.narrow { max-width: 680px; }
.modal-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-5) var(--s-4);
    border-bottom: 1px solid var(--border);
}
.modal-title { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.015em; }
.modal-subtitle { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 2px; }
.modal-body { flex: 1; padding: var(--s-5); overflow: auto; }
.modal-body.flush { padding: 0; }

@media (max-width: 900px) {
    .overlay { padding: var(--s-2); }
    .modal-head { padding: var(--s-4); }
    .modal-body { padding: var(--s-4); }
}

/* ─────────────────────────────────────────────
   TOASTS
   ───────────────────────────────────────────── */

.toast {
    position: fixed; bottom: var(--s-6); right: var(--s-6); z-index: 9500;
    background: var(--ink); color: var(--page);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-md);
    font-size: var(--t-sm); font-weight: 500;
    box-shadow: var(--shadow-lg);
    animation: riseIn 0.24s var(--ease) both;
}