/* Flota: Vehículos, ficha de vehículo, Mantenimiento, Gastos y formulario de vehículo. DUEÑO: agente FLOTA.
   Prefijo fl- en todas las clases. Usa los tokens de app.css (funciona en claro y oscuro). */

:root {
  /* Series de las gráficas (paleta validada para daltonismo sobre la superficie clara) */
  --fl-c1: #1f49b6;
  --fl-c2: #c2629b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --fl-c1: #5b7fe0; --fl-c2: #b85f90; }
}
:root[data-tema="oscuro"] { --fl-c1: #5b7fe0; --fl-c2: #b85f90; }

/* ───────── Foto del coche ───────── */
.fl-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-3); }
.fl-photo-empty { display: grid; place-items: center; color: var(--text-3); }
.fl-photo-empty .icon { width: 44px; height: 44px; stroke-width: 1.4; opacity: 0.75; }

/* ───────── Tonos por plazo (vencimientos, próximos) ───────── */
.fl-text-aviso, .fl-tono-aviso .fl-venc-dias, .fl-car-mant.fl-tono-aviso { color: var(--warn-soft-ink); font-weight: 600; }
.fl-text-naranja, .fl-tono-naranja .fl-venc-dias, .fl-car-mant.fl-tono-naranja { color: var(--orange-soft-ink); font-weight: 600; }
.fl-text-peligro, .fl-tono-peligro .fl-venc-dias, .fl-car-mant.fl-tono-peligro { color: var(--danger-soft-ink); font-weight: 650; }

/* ───────── Lista de vehículos ───────── */
.fl-cars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .fl-cars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .fl-cars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fl-cars > li { min-width: 0; }
a.fl-car { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
a.fl-car:hover .fl-car-name { color: var(--primary); }
.fl-car-media { position: relative; }
.fl-car-media .fl-photo { aspect-ratio: 2 / 1; }
.fl-car-media .fl-photo-empty { aspect-ratio: auto; height: 96px; }
@media (min-width: 640px) { .fl-car-media .fl-photo-empty { height: auto; aspect-ratio: 2 / 1; } }
.fl-car-media .fl-photo-empty .icon { width: 36px; height: 36px; }
.fl-car-badge { position: absolute; top: var(--sp-3); left: var(--sp-3); }
.fl-car-badge .badge { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); font-size: var(--fs-sm); min-height: 28px; padding: 3px 10px; }
.fl-car-body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.fl-car-top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.fl-car-name { font-weight: 650; font-size: 1.0625rem; min-width: 0; overflow-wrap: anywhere; }
.fl-car-ver { color: var(--text-3); font-size: var(--fs-sm); margin-top: -4px; }
.fl-car-line { color: var(--text-2); font-size: var(--fs-sm); }
.fl-line-alquilado { color: var(--primary-soft-ink); font-weight: 600; }
.fl-line-taller { color: var(--orange-soft-ink); font-weight: 600; }
.fl-car-metrics { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-family: var(--font-num); font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fl-metric { display: inline-flex; align-items: center; gap: 6px; }
.fl-metric .icon { color: var(--text-3); }
.fl-car-mant { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.fl-car-mant .icon { margin-top: 2px; }
a.fl-car.is-baja .fl-photo { filter: grayscale(1); opacity: 0.7; }
.fl-toggle-baja { align-self: flex-start; }

/* Rejilla de vencimientos: ITV, seguro, impuesto */
.fl-venc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: var(--sp-1) 0 0; }
.fl-venc-item { min-width: 0; padding: 6px var(--sp-2) 7px; border-radius: var(--r-sm); background: var(--surface-2); border-top: 3px solid var(--line-strong); }
.fl-venc-item dt { font-size: var(--fs-xs); font-weight: 650; color: var(--text-3); }
.fl-venc-item dd { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.fl-venc-fecha { font-family: var(--font-num); font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fl-venc-dias { font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
.fl-venc-item.fl-tono-aviso { border-top-color: var(--warn); }
.fl-venc-item.fl-tono-naranja { border-top-color: var(--orange); background: var(--orange-soft); }
.fl-venc-item.fl-tono-peligro { border-top-color: var(--danger); background: var(--danger-soft); }
.fl-venc-item.fl-tono-naranja dt, .fl-venc-item.fl-tono-peligro dt { color: inherit; }

/* ───────── Ficha: estado ahora ───────── */
.fl-hero { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .fl-hero { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); align-items: start; } }
.fl-hero-photo { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; border-radius: var(--r-md); overflow: hidden; }
button.fl-hero-photo { cursor: zoom-in; }
.fl-hero-photo .fl-photo { aspect-ratio: 16 / 10; }
button.fl-hero-photo.is-empty {
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 112px; border: 2px dashed var(--line-strong); color: var(--text-3); font-weight: 600; font-size: var(--fs-sm);
}
@media (min-width: 720px) { button.fl-hero-photo.is-empty { aspect-ratio: 16 / 10; } }
button.fl-hero-photo.is-empty:hover { border-color: var(--primary); color: var(--primary); }
.fl-hero-info { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.fl-hero-top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.fl-hero-line { font-size: 1.0625rem; }
.fl-hero-next { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--fs-sm); }
.fl-hero-next .icon { color: var(--text-3); }
.fl-hero-metrics { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.fl-metric-money { font-size: var(--fs-2xl); }
.fl-hero-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fl-hero-actions { display: flex; gap: var(--sp-2); }
@media (max-width: 719px) { .fl-hero-actions > .btn { flex: 1 1 auto; } }

.fl-cols { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .fl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

.fl-doc-icon { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.fl-doc-icon.fl-tono-aviso { background: var(--warn-soft); color: var(--warn-soft-ink); }
.fl-doc-icon.fl-tono-naranja { background: var(--orange-soft); color: var(--orange-soft-ink); }
.fl-doc-icon.fl-tono-peligro { background: var(--danger-soft); color: var(--danger-soft-ink); }

.fl-pick-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); }
.fl-pick-photo { padding: 0; border: 2px solid var(--line); border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-3); }
.fl-pick-photo img { width: 100%; height: 100%; object-fit: cover; }
.fl-pick-photo[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }

.fl-table-plain { border: 0; background: transparent; }
.fl-table-plain .table th { background: transparent; }
.fl-table-plain .table th:first-child, .fl-table-plain .table td:first-child { padding-left: 0; }
.fl-table-plain .table th:last-child, .fl-table-plain .table td:last-child { padding-right: 0; }

.fl-year { display: flex; align-items: center; gap: var(--sp-2); }
.fl-year-label { min-width: 4ch; text-align: center; font-family: var(--font-num); font-size: var(--fs-2xl); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ───────── Gráfica de columnas por mes ───────── */
.fl-chart { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); }
.fl-chart-canvas { width: 100%; min-height: 210px; }
.fl-chart-svg { display: block; max-width: none; overflow: visible; touch-action: pan-y; }
.fl-grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.fl-grid-zero { stroke: var(--line-strong); }
.fl-axis { fill: var(--text-3); font-family: var(--font-ui); font-size: 11px; font-variant-numeric: tabular-nums; }
.fl-bar-mark.fl-s1, .fl-swatch.fl-s1 { fill: var(--fl-c1); background: var(--fl-c1); }
.fl-bar-mark.fl-s2, .fl-swatch.fl-s2 { fill: var(--fl-c2); background: var(--fl-c2); }
.fl-hit { fill: var(--text); fill-opacity: 0; cursor: pointer; }
.fl-col.is-on .fl-hit { fill-opacity: 0.06; }
.fl-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); color: var(--text-2); }
.fl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.fl-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; }
.fl-chart-tip {
  position: absolute; top: 30px; left: var(--x, 0px); z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; min-width: 160px; padding: var(--sp-2) var(--sp-3);
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); font-size: var(--fs-sm);
}
.fl-tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.fl-tip-extra { color: var(--text-2); border-top: 1px solid var(--line); margin-top: 2px; padding-top: 4px; }

/* Barras horizontales de resumen (por categoría, por coche) */
.fl-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.fl-bars-row { display: grid; grid-template-columns: minmax(80px, 9.5rem) minmax(40px, 1fr) auto; align-items: center; gap: var(--sp-3); }
.fl-bars-label { min-width: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.fl-bar { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.fl-bar-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--pct, 0) * 1%); background: var(--primary); border-radius: inherit; }
.fl-bars-val { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ───────── Mantenimiento ───────── */
.fl-mt-top { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .fl-mt-top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.fl-mini-cars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
@media (min-width: 1100px) { .fl-mt-top .fl-mini-cars { grid-template-columns: minmax(0, 1fr); } }
a.fl-mini-car { display: flex; flex-direction: column; gap: var(--sp-2); height: 100%; }
.fl-mini-km { display: flex; align-items: baseline; gap: 2px; }
.fl-mini-km .metric-value { font-family: var(--font-num); font-size: var(--fs-2xl); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fl-mini-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--sp-3); margin: 0; font-size: var(--fs-sm); }
.fl-mini-kv dt { color: var(--text-3); }
.fl-mini-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Filtros (Mantenimiento y Gastos) */
.fl-filters { display: flex; flex-direction: column; gap: var(--sp-3); }
.fl-filters .chip { min-height: var(--tap); }
.fl-filters .chips { flex-wrap: wrap; overflow: visible; }
.fl-filters-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 960px) { .fl-filters-grid { max-width: 640px; } }

/* ───────── Gastos ───────── */
.fl-cell-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fl-cell-main .muted { font-weight: 500; }
.fl-row-btn { padding: 0; border: 0; background: none; color: var(--text); font-weight: 650; text-align: left; overflow-wrap: anywhere; min-height: 24px; }
.fl-row-btn:hover { color: var(--primary); text-decoration: underline; }
.fl-col-adj { width: 1%; }
.fl-gastos-table td { vertical-align: middle; }

/* ───────── Formularios (modales) ───────── */
.fl-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-quick .chip { min-height: var(--tap); }
.fl-next > .form-grid { gap: var(--sp-4); }

.fl-attach-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fl-attach-btns > .btn { flex: 1 1 140px; }
.fl-attach-file { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.fl-attach-thumb { flex: none; width: 56px; height: 56px; border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.fl-attach-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fl-attach-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fl-attach-info a { font-weight: 600; overflow-wrap: anywhere; }
.fl-attach-busy { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); color: var(--text-3); }

/* Formulario de vehículo */
.fl-vf-id { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .fl-vf-id { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }
.fl-vf-photo { display: flex; flex-direction: column; gap: var(--sp-2); }
.fl-vf-photo .fl-photo { aspect-ratio: 16 / 10; border-radius: var(--r-md); }
.fl-vf-photo-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-vf-photo-btns > .btn { flex: 1 1 auto; }
.fl-vf-matricula { text-transform: uppercase; font-family: var(--font-num); font-size: 1.25rem; letter-spacing: 0.06em; }
.fl-vf-plate { min-height: 40px; display: flex; align-items: center; }
.fl-vf-plate:empty { display: none; }
@media (max-width: 719px) { .fl-vf-photo .fl-photo-empty { aspect-ratio: auto; height: 112px; } }
.fl-vf-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }