/* ============================================================
   HAULER · PROVEEDORES v2 (2026) — Design System del módulo
   Tokens + componentes. Sobrio, denso, empresarial.
   Inspiración: Linear (densidad), Stripe (forms), Ramp (tablas).
   Reglas: animaciones <= 220ms, sin glass pesado, sin gradientes.
============================================================ */

:root {
  /* SUPERFICIES */
  --pv-surface-0: #f6f8fb;
  --pv-surface-1: #ffffff;
  --pv-surface-2: #eef2f7;
  --pv-border: rgba(13, 34, 54, 0.10);
  --pv-border-strong: rgba(13, 34, 54, 0.20);

  /* TEXTO */
  --pv-text-primary: #0d2236;
  --pv-text-secondary: #56687a;
  --pv-text-disabled: #9aa8b6;

  /* ACCIONES Y ESTADOS */
  --pv-accent: #002a4e;          /* azul Hauler = acción primaria */
  --pv-accent-hover: #0a3a66;
  --pv-accent-subtle: #eaf1f8;
  --pv-brand: #ff7a00;           /* naranja Hauler = highlight de marca */
  --pv-success: #15803d;
  --pv-success-subtle: #ecfdf3;
  --pv-warning: #b45309;
  --pv-warning-subtle: #fffbeb;
  --pv-error: #b91c1c;
  --pv-error-subtle: #fef2f2;
  --pv-info: #1d4ed8;
  --pv-info-subtle: #eff6ff;

  /* TIPOGRAFÍA (coherente con plataforma: Sora display + Manrope body) */
  --pv-font: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --pv-font-display: 'Sora', sans-serif;
  --pv-font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  /* ESPACIADO base 4px */
  --pv-s1: 4px; --pv-s2: 8px; --pv-s3: 12px; --pv-s4: 16px;
  --pv-s5: 24px; --pv-s6: 32px; --pv-s7: 48px; --pv-s8: 64px;

  /* BORDES */
  --pv-radius-sm: 6px;
  --pv-radius-md: 10px;
  --pv-radius-lg: 16px;

  /* SOMBRAS */
  --pv-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --pv-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --pv-shadow-md: 0 4px 16px rgba(0,0,0,0.08);

  /* MOVIMIENTO */
  --pv-t: 180ms;
  --pv-ease: cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* ============================================================
   SHELL DEL MÓDULO
============================================================ */
.pv-module {
  background: var(--pv-surface-0);
  font-family: var(--pv-font);
  color: var(--pv-text-primary);
  padding: var(--pv-s7) 0;
}
.pv-panel {
  background: var(--pv-surface-1);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-lg);
  box-shadow: var(--pv-shadow-sm);
  max-width: 920px;
  margin: 0 auto;
  overflow: hidden;
}
.pv-panel-body { padding: var(--pv-s6); }
@media (max-width: 576px) { .pv-panel-body { padding: var(--pv-s4); } }

.pv-module h2, .pv-module h3, .pv-module h4 {
  font-family: var(--pv-font-display);
  color: var(--pv-text-primary);
  line-height: 1.2;
}
.pv-module p { line-height: 1.5; }
.pv-subtitle { color: var(--pv-text-secondary); font-size: 16px; }

/* ============================================================
   SELECCIÓN DE PERFIL — tarjetas
============================================================ */
.pv-profiles { display: grid; gap: var(--pv-s3); }
.pv-profile-card {
  display: flex;
  align-items: center;
  gap: var(--pv-s4);
  width: 100%;
  text-align: left;
  background: var(--pv-surface-1);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-md);
  padding: var(--pv-s4) var(--pv-s5);
  cursor: pointer;
  transition: border-color var(--pv-t) var(--pv-ease),
              box-shadow var(--pv-t) var(--pv-ease),
              transform var(--pv-t) var(--pv-ease);
}
.pv-profile-card:hover {
  border-color: var(--pv-accent);
  box-shadow: var(--pv-shadow-md);
  transform: translateY(-1px);
}
.pv-profile-card:focus-visible { outline: 2px solid var(--pv-brand); outline-offset: 2px; }
.pv-profile-card .pv-profile-icon {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pv-accent-subtle);
  color: var(--pv-accent);
  border-radius: var(--pv-radius-md);
  font-size: 20px;
}
.pv-profile-card strong { display: block; font-size: 16px; font-family: var(--pv-font-display); }
.pv-profile-card span { color: var(--pv-text-secondary); font-size: 14px; }
.pv-profile-card .fa-chevron-right { margin-left: auto; color: var(--pv-text-disabled); transition: transform var(--pv-t) var(--pv-ease), color var(--pv-t); }
.pv-profile-card:hover .fa-chevron-right { transform: translateX(3px); color: var(--pv-brand); }

/* ============================================================
   STEPPER
============================================================ */
.pv-stepper {
  display: flex;
  align-items: center;
  gap: var(--pv-s2);
  padding: var(--pv-s4) var(--pv-s6);
  border-bottom: 1px solid var(--pv-border);
  background: var(--pv-surface-1);
  flex-wrap: wrap;
}
.pv-step {
  display: inline-flex; align-items: center; gap: var(--pv-s2);
  font-size: 13px; font-weight: 600;
  color: var(--pv-text-disabled);
}
.pv-step .pv-step-dot {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--pv-border-strong);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: background var(--pv-t), border-color var(--pv-t), color var(--pv-t);
}
.pv-step.active { color: var(--pv-text-primary); }
.pv-step.active .pv-step-dot { background: var(--pv-accent); border-color: var(--pv-accent); color: #fff; }
.pv-step.done { color: var(--pv-success); }
.pv-step.done .pv-step-dot { background: var(--pv-success-subtle); border-color: var(--pv-success); color: var(--pv-success); }
.pv-step-sep { flex: 1; min-width: 12px; height: 1.5px; background: var(--pv-border); }
.pv-step-label { display: none; }
@media (min-width: 768px) { .pv-step-label { display: inline; } }

/* Barra de progreso fina bajo el stepper */
.pv-progress { height: 3px; background: var(--pv-surface-2); }
.pv-progress-bar { height: 100%; background: var(--pv-brand); transition: width 220ms var(--pv-ease); }

/* ============================================================
   FORMULARIOS
============================================================ */
.pv-field { margin-bottom: var(--pv-s4); }
.pv-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: var(--pv-s1);
  color: var(--pv-text-primary);
}
.pv-label .req { color: var(--pv-error); }
.pv-hint { font-size: 12.5px; color: var(--pv-text-secondary); margin-top: var(--pv-s1); }

.pv-input, .pv-select, .pv-textarea {
  width: 100%;
  font-family: var(--pv-font);
  font-size: 15px;
  color: var(--pv-text-primary);
  background: var(--pv-surface-1);
  border: 1px solid var(--pv-border-strong);
  border-radius: var(--pv-radius-sm);
  padding: 10px 12px;
  transition: border-color var(--pv-t), box-shadow var(--pv-t);
}
.pv-input::placeholder { color: var(--pv-text-disabled); }
.pv-input:focus, .pv-select:focus, .pv-textarea:focus {
  outline: none;
  border-color: var(--pv-accent);
  box-shadow: 0 0 0 3px var(--pv-accent-subtle);
}
.pv-input[data-mono], .pv-mono { font-family: var(--pv-font-mono); letter-spacing: 0.02em; }
.pv-input:disabled { background: var(--pv-surface-2); color: var(--pv-text-disabled); }

/* Estados de validación */
.pv-field.is-error .pv-input, .pv-field.is-error .pv-select, .pv-field.is-error .pv-textarea {
  border-color: var(--pv-error);
  box-shadow: 0 0 0 3px var(--pv-error-subtle);
}
.pv-field.is-valid .pv-input { border-color: var(--pv-success); }
.pv-error-msg {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--pv-error);
  margin-top: var(--pv-s1);
}
.pv-warn-msg {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--pv-warning);
  margin-top: var(--pv-s1);
}

/* Checkboxes / radios en tarjeta */
.pv-checkgroup { display: grid; gap: var(--pv-s2); }
@media (min-width: 768px) { .pv-checkgroup.cols-2 { grid-template-columns: 1fr 1fr; } }
.pv-check {
  display: flex; align-items: flex-start; gap: var(--pv-s3);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-sm);
  padding: var(--pv-s3);
  cursor: pointer;
  transition: border-color var(--pv-t), background var(--pv-t);
  font-size: 14px;
}
.pv-check:hover { border-color: var(--pv-accent); }
.pv-check input { margin-top: 2px; accent-color: var(--pv-accent); width: 16px; height: 16px; flex: 0 0 16px; }
.pv-check input:checked + span { font-weight: 700; }
.pv-check:has(input:checked) { border-color: var(--pv-accent); background: var(--pv-accent-subtle); }

/* ============================================================
   FILE UPLOAD EMPRESARIAL
============================================================ */
.pv-upload {
  border: 1.5px dashed var(--pv-border-strong);
  border-radius: var(--pv-radius-md);
  background: var(--pv-surface-1);
  padding: var(--pv-s5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--pv-t), background var(--pv-t);
}
.pv-upload:hover, .pv-upload.dragover {
  border-color: var(--pv-accent);
  background: var(--pv-accent-subtle);
}
.pv-upload i { font-size: 22px; color: var(--pv-accent); margin-bottom: var(--pv-s2); }
.pv-upload p { margin: 0; font-size: 14px; font-weight: 600; }
.pv-upload small { color: var(--pv-text-secondary); font-size: 12px; }
.pv-upload input[type=file] { display: none; }

.pv-filelist { display: grid; gap: var(--pv-s2); margin-top: var(--pv-s3); }
.pv-file {
  display: flex; align-items: center; gap: var(--pv-s3);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-sm);
  padding: var(--pv-s2) var(--pv-s3);
  background: var(--pv-surface-1);
  font-size: 13.5px;
}
.pv-file img.thumb {
  width: 40px; height: 40px; object-fit: cover;
  border-radius: var(--pv-radius-sm);
  flex: 0 0 40px;
}
.pv-file .icon-doc {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pv-surface-2); border-radius: var(--pv-radius-sm);
  color: var(--pv-accent);
}
.pv-file .meta { flex: 1; min-width: 0; }
.pv-file .meta .name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pv-file .meta .size { color: var(--pv-text-secondary); font-size: 12px; }
.pv-file button.rm {
  border: none; background: none; color: var(--pv-text-disabled);
  cursor: pointer; padding: 6px; border-radius: var(--pv-radius-sm);
  transition: color var(--pv-t), background var(--pv-t);
}
.pv-file button.rm:hover { color: var(--pv-error); background: var(--pv-error-subtle); }

/* ============================================================
   BADGES DE ESTADO
============================================================ */
.pv-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.pv-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pv-badge.b-pendiente   { background: var(--pv-warning-subtle); color: var(--pv-warning); }
.pv-badge.b-en_revision { background: var(--pv-info-subtle);    color: var(--pv-info); }
.pv-badge.b-aprobado    { background: var(--pv-success-subtle); color: var(--pv-success); }
.pv-badge.b-rechazado   { background: var(--pv-error-subtle);   color: var(--pv-error); }
.pv-badge.b-info_solicitada { background: var(--pv-surface-2);  color: var(--pv-text-secondary); }
.pv-badge.b-neutral     { background: var(--pv-surface-2);      color: var(--pv-text-secondary); }

/* ============================================================
   BOTONES
============================================================ */
.pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pv-s2);
  font-family: var(--pv-font);
  font-size: 14.5px; font-weight: 700;
  border-radius: var(--pv-radius-sm);
  padding: 10px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--pv-t), border-color var(--pv-t),
              color var(--pv-t), box-shadow var(--pv-t);
  text-decoration: none;
}
.pv-btn:focus-visible { outline: 2px solid var(--pv-brand); outline-offset: 2px; }
.pv-btn-primary { background: var(--pv-accent); color: #fff; }
.pv-btn-primary:hover { background: var(--pv-accent-hover); color: #fff; }
.pv-btn-secondary { background: var(--pv-surface-1); color: var(--pv-text-primary); border-color: var(--pv-border-strong); }
.pv-btn-secondary:hover { border-color: var(--pv-accent); color: var(--pv-accent); }
.pv-btn-ghost { background: transparent; color: var(--pv-text-secondary); }
.pv-btn-ghost:hover { color: var(--pv-text-primary); background: var(--pv-surface-2); }
.pv-btn-danger { background: var(--pv-error); color: #fff; }
.pv-btn-danger:hover { background: #991b1b; color: #fff; }
.pv-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pv-btn .spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pv-spin 0.7s linear infinite;
}
@keyframes pv-spin { to { transform: rotate(360deg); } }

/* ============================================================
   ALERTS
============================================================ */
.pv-alert {
  display: flex; gap: var(--pv-s3); align-items: flex-start;
  border-radius: var(--pv-radius-md);
  padding: var(--pv-s3) var(--pv-s4);
  font-size: 14px;
  border: 1px solid;
  margin-bottom: var(--pv-s4);
}
.pv-alert.a-info    { background: var(--pv-info-subtle);    color: var(--pv-info);    border-color: rgba(29,78,216,.2); }
.pv-alert.a-success { background: var(--pv-success-subtle); color: var(--pv-success); border-color: rgba(21,128,61,.2); }
.pv-alert.a-warning { background: var(--pv-warning-subtle); color: var(--pv-warning); border-color: rgba(180,83,9,.2); }
.pv-alert.a-error   { background: var(--pv-error-subtle);   color: var(--pv-error);   border-color: rgba(185,28,28,.2); }

/* ============================================================
   RESUMEN (paso final)
============================================================ */
.pv-summary { display: grid; gap: var(--pv-s4); }
.pv-summary-block {
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-md);
  overflow: hidden;
}
.pv-summary-block h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--pv-surface-2);
  margin: 0; padding: var(--pv-s2) var(--pv-s4);
  color: var(--pv-text-secondary);
}
.pv-summary-block dl {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: var(--pv-s1) var(--pv-s4);
  margin: 0; padding: var(--pv-s3) var(--pv-s4);
  font-size: 14px;
}
.pv-summary-block dt { color: var(--pv-text-secondary); font-weight: 600; }
.pv-summary-block dd { margin: 0; font-weight: 600; word-break: break-word; }

/* ============================================================
   WIZARD: navegación inferior + transición de pasos
============================================================ */
.pv-wizard-nav {
  display: flex; justify-content: space-between; gap: var(--pv-s3);
  padding-top: var(--pv-s5);
  border-top: 1px solid var(--pv-border);
  margin-top: var(--pv-s5);
}
.pv-step-pane { animation: pv-fade 180ms var(--pv-ease); }
@keyframes pv-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.pv-autosave {
  font-size: 12px; color: var(--pv-text-secondary);
  display: inline-flex; align-items: center; gap: 5px;
}

/* Grupo repetible (vehículos de flota) */
.pv-repeat-item {
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-md);
  margin-bottom: var(--pv-s4);
  overflow: hidden;
}
.pv-repeat-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--pv-surface-2);
  padding: var(--pv-s3) var(--pv-s4);
  font-weight: 700; font-size: 14px;
  cursor: pointer;
}
.pv-repeat-body { padding: var(--pv-s4); }

/* ============================================================
   ÉXITO
============================================================ */
.pv-success-pane { text-align: center; padding: var(--pv-s7) var(--pv-s5); }
.pv-success-pane .check-circle {
  width: 64px; height: 64px;
  margin: 0 auto var(--pv-s4);
  display: flex; align-items: center; justify-content: center;
  background: var(--pv-success-subtle);
  color: var(--pv-success);
  border-radius: 50%;
  font-size: 28px;
}
.pv-folio {
  font-family: var(--pv-font-mono);
  font-size: 18px; font-weight: 700;
  background: var(--pv-surface-2);
  border-radius: var(--pv-radius-sm);
  padding: var(--pv-s2) var(--pv-s4);
  display: inline-block;
  margin: var(--pv-s3) 0;
}

/* ============================================================
   ADMIN — tabla, filtros, drawer
============================================================ */
.pv-admin { font-family: var(--pv-font); background: var(--pv-surface-0); min-height: 100vh; color: var(--pv-text-primary); }
.pv-admin-header {
  background: var(--pv-surface-1);
  border-bottom: 1px solid var(--pv-border);
  padding: var(--pv-s3) var(--pv-s5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--pv-s4);
  position: sticky; top: 0; z-index: 50;
}
.pv-admin-main { padding: var(--pv-s5); max-width: 1400px; margin: 0 auto; }

.pv-filterbar {
  display: flex; flex-wrap: wrap; gap: var(--pv-s2);
  margin-bottom: var(--pv-s4);
  align-items: center;
}
.pv-filterbar .pv-input, .pv-filterbar .pv-select { width: auto; min-width: 160px; font-size: 13.5px; padding: 7px 10px; }
.pv-filterbar .pv-input[type=search] { min-width: 240px; flex: 1; }

.pv-table-wrap {
  background: var(--pv-surface-1);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-md);
  overflow: auto;
  box-shadow: var(--pv-shadow-xs);
}
.pv-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 900px; }
.pv-table th {
  text-align: left;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--pv-text-secondary);
  background: var(--pv-surface-2);
  padding: 10px 14px;
  position: sticky; top: 0;
  border-bottom: 1px solid var(--pv-border);
  white-space: nowrap;
}
.pv-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--pv-border);
  vertical-align: middle;
}
.pv-table tbody tr { transition: background var(--pv-t); cursor: pointer; }
.pv-table tbody tr:hover { background: var(--pv-accent-subtle); }
.pv-table .mono { font-family: var(--pv-font-mono); font-size: 12.5px; }
.pv-table .doccount { font-variant-numeric: tabular-nums; }

.pv-empty {
  text-align: center;
  padding: var(--pv-s8) var(--pv-s5);
  color: var(--pv-text-secondary);
}
.pv-empty i { font-size: 32px; color: var(--pv-text-disabled); margin-bottom: var(--pv-s3); }

/* Drawer lateral */
.pv-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(13,34,54,0.35);
  z-index: 90;
  animation: pv-fade 150ms ease;
}
.pv-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--pv-surface-1);
  border-left: 1px solid var(--pv-border);
  box-shadow: var(--pv-shadow-md);
  z-index: 100;
  display: flex; flex-direction: column;
  animation: pv-slide 200ms var(--pv-ease);
}
@keyframes pv-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.pv-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--pv-s4) var(--pv-s5);
  border-bottom: 1px solid var(--pv-border);
}
.pv-drawer-body { flex: 1; overflow-y: auto; padding: var(--pv-s5); }
.pv-drawer-foot {
  border-top: 1px solid var(--pv-border);
  padding: var(--pv-s4) var(--pv-s5);
  display: flex; gap: var(--pv-s2); flex-wrap: wrap;
}

/* Skeleton loading */
.pv-skeleton {
  background: linear-gradient(90deg, var(--pv-surface-2) 25%, #e4eaf1 50%, var(--pv-surface-2) 75%);
  background-size: 200% 100%;
  animation: pv-shimmer 1.1s infinite linear;
  border-radius: var(--pv-radius-sm);
  height: 14px;
}
@keyframes pv-shimmer { to { background-position: -200% 0; } }

/* Toast */
.pv-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--pv-text-primary); color: #fff;
  border-radius: var(--pv-radius-md);
  padding: var(--pv-s3) var(--pv-s5);
  font-size: 14px; font-weight: 600;
  box-shadow: var(--pv-shadow-md);
  z-index: 200;
  animation: pv-fade 150ms ease;
}

/* Paginación */
.pv-pagination { display: flex; gap: var(--pv-s2); align-items: center; justify-content: flex-end; padding: var(--pv-s3); font-size: 13px; color: var(--pv-text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .pv-module *, .pv-admin * { animation: none !important; transition: none !important; }
}