/* =============================================================
   GestionFlota — Portal cliente · refinamiento visual
   Proviene del rediseño de Claude Design System (1).zip · ui_kits/portal/
   Override sutil sobre .vehiculo-card y secciones del portal.
   ============================================================= */

/* Cards de vehículo · border-left semántico fino (no fondo completo) */
.vehiculo-card {
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: 12px;
  box-shadow: var(--ck-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--ck-dur-micro) var(--ck-ease-out),
              border-color var(--ck-dur-micro) var(--ck-ease-out);
}
.vehiculo-card:hover { box-shadow: var(--ck-shadow-md); }
.vehiculo-card.vehiculo-card--vencido     { border-left: 4px solid var(--ck-danger-500);  }
.vehiculo-card.vehiculo-card--alerta      { border-left: 4px solid var(--ck-warning-500); }
.vehiculo-card.vehiculo-card--en-tramite  { border-left: 4px solid var(--ck-info-500);    }
.vehiculo-card.vehiculo-card--al-dia      { border-left: 4px solid var(--ck-success-500); }

/* Head de la card · clickable */
.vehiculo-card .vehiculo-card__head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border-bottom: none;
}
.vehiculo-card .vehiculo-card__head:hover { background: var(--ck-neutral-50); }
.vehiculo-card.vehiculo-card--collapsed .vehiculo-card__head { border-bottom: none; }
.vehiculo-card:not(.vehiculo-card--collapsed) .vehiculo-card__head { border-bottom: 1px solid var(--ck-border); }

/* Chevron animado · rota 180° al expandir */
.vehiculo-card .vehiculo-card__chevron {
  color: var(--ck-text-muted);
  transition: transform var(--ck-dur-soft) var(--ck-ease-out);
  font-size: 14px;
  margin-left: auto;
}
.vehiculo-card.vehiculo-card--collapsed .vehiculo-card__chevron { transform: rotate(-90deg); }

/* Patente · ck-plate más prominente */
.vehiculo-card .ck-plate,
.vehiculo-card .vehiculo-card__patente {
  font-family: var(--ck-font-mono);
  font-weight: 700;
  font-size: var(--ck-text-body);
  letter-spacing: 0.05em;
  background: var(--ck-neutral-100);
  padding: 2px 10px;
  border-radius: 6px;
  border: 1px solid var(--ck-border);
}

/* Body · padding consistente */
.vehiculo-card .vehiculo-card__body {
  padding: 16px 20px;
  background: transparent;
}

/* Chip "Próximo trámite" más sobrio · sin emoji, con icono Lucide */
.vehiculo-card .vehiculo-card__proximo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--ck-radius-full, 999px);
  font-size: var(--ck-text-sm);
  font-weight: var(--ck-fw-medium);
  background: var(--ck-neutral-100);
  color: var(--ck-neutral-700);
}
.vehiculo-card .vehiculo-card__proximo--vencido {
  background: var(--ck-danger-100);
  color: var(--ck-danger-900);
  font-weight: var(--ck-fw-semibold);
}
.vehiculo-card .vehiculo-card__proximo--urgente {
  background: var(--ck-warning-100);
  color: var(--ck-warning-900);
}

/* Filtros · chips horizontales con scroll en mobile */
@media (max-width: 720px) {
  .portal-section .filters,
  .portal-section .filtros-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    margin-bottom: 12px;
  }
  .portal-section .filters > *,
  .portal-section .filtros-bar > * { flex-shrink: 0; }
}