/* ============================================================
   COMPONENTS — piezas reutilizables de UI
   Cada componente es autocontenido (estructura + variantes).
   ============================================================ */

/* ── Botones ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  line-height: 1;
  border: 1.5px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-primary-light); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-ghost:hover { background: var(--color-border); }

.btn-danger {
  background: var(--color-danger);
  color: var(--color-white);
  border-color: var(--color-danger);
}

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn-full { width: 100%; }
.w-full  { width: 100%; }

.btn-success {
  background: var(--color-success);
  color: var(--color-white);
  border-color: var(--color-success);
}
.btn-success:hover { filter: brightness(0.9); }

/* Ícono de acción inline (editar, eliminar, descargar) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  flex-shrink: 0;
  text-decoration: none;
}
.btn-icon:hover          { background: var(--color-bg-alt); color: var(--color-text); }
.btn-icon-danger         { border-color: transparent; }
.btn-icon-danger:hover   { background: #FEF2F2; color: var(--color-danger); }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.card:hover { box-shadow: var(--shadow-md); }

.card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

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

.card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semi);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.card-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

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

/* ── Forms ───────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

/* Contenedor de input con ícono o botón interno.
   Debe ser position:relative para anclar los elementos absolutos. */
.input-group {
  position: relative;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  /* Elimina estilos nativos del browser (especialmente iOS Safari) */
  -webkit-appearance: none;
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--color-danger);
}

.form-textarea { resize: vertical; min-height: 100px; }
.form-error { font-size: var(--text-xs); color: var(--color-danger); }
.form-hint  { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
}

.badge-primary { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-success { background: #D1FAE5; color: #065F46; }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-danger  { background: #FEE2E2; color: #991B1B; }
.badge-neutral { background: var(--color-border); color: var(--color-text-muted); }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.alert-info    { background: #EFF6FF; border-color: var(--color-info);    color: #1E40AF; }
.alert-success { background: #ECFDF5; border-color: var(--color-success); color: #065F46; }
.alert-warning { background: #FFFBEB; border-color: var(--color-warning); color: #92400E; }
.alert-danger  { background: #FEF2F2; border-color: var(--color-danger);  color: #991B1B; }
.alert-link    { color: inherit; font-weight: var(--font-semi); text-decoration: underline; }

/* ── Modal ───────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fadeIn var(--transition-fast);
}

.modal-backdrop.is-hidden { display: none; }

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp var(--transition-normal);
}

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

.modal-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semi);
}

.modal-body   { padding: var(--space-6); }
.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Toast / Notificaciones ──────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 360px;
  width: calc(100% - var(--space-8));
}

.toast {
  background: var(--color-text);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  animation: slideUp var(--transition-normal);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.toast-success { background: var(--color-success); }
.toast-danger  { background: var(--color-danger); }
.toast-warning { background: var(--color-accent-dark); }

/* ── Loading spinner ─────────────────────────────────────── */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  display: inline-block;
}

.spinner-lg { width: 48px; height: 48px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-4);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.empty-state-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semi);
  margin-bottom: var(--space-2);
}

.empty-state-text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* ── Divider ─────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-6);
}

/* ── Login / Autenticación ───────────────────────────────── */

/* Pantalla centrada con fondo degradado — cubre todo el área visible */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  background: linear-gradient(
    145deg,
    var(--color-primary-light) 0%,
    #F8FAFC 55%,
    #EEF2FF 100%
  );
}

/* Tarjeta principal del formulario */
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-10) var(--space-8);
  animation: slideUp var(--transition-normal);
}

/* Logo centrado arriba de la tarjeta */
.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.login-logo img {
  height: 48px;
  width: auto;
}

/* Títulos dentro de la tarjeta */
.login-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  text-align: center;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.login-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-6);
  line-height: var(--leading-normal);
}

/* Ícono decorativo a la izquierda del input.
   Usa top:0/bottom:0 en lugar de top:50%/transform para máxima
   compatibilidad con iOS Safari y otros browsers móviles. */
.input-icon {
  position: absolute;
  left: var(--space-3);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: var(--color-text-light);
  pointer-events: none;
}

/* Input con ícono a la izquierda */
.input-with-icon {
  padding-left: calc(var(--space-3) + 18px + var(--space-3));
}

/* Input con ícono a la izquierda Y botón a la derecha (contraseña) */
.input-with-action {
  padding-right: calc(var(--space-3) + 20px + var(--space-3));
}

/* Botón de mostrar/ocultar contraseña — mismo patrón que .input-icon */
.password-toggle {
  position: absolute;
  right: var(--space-3);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: var(--color-text-light);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
  line-height: 0;
}

.password-toggle:hover {
  color: var(--color-primary);
}

/* Enlace de "¿Olvidaste tu contraseña?" y "Volver" */
.login-footer-links {
  margin-top: var(--space-5);
  text-align: center;
}

.login-link {
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.login-link:hover {
  color: var(--color-primary-dark);
}

/* Adaptaciones para pantallas muy pequeñas (< 480px) */
@media (max-width: 480px) {
  .login-card {
    padding: var(--space-8) var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }

  .login-title {
    font-size: var(--text-xl);
  }
}

/* ── Dashboard Chofer ────────────────────────────────────── */

/* Contenedor principal — limita el ancho en desktop */
.dashboard-page {
  max-width: 640px;
  margin: 0 auto;
  /* Espacio inferior para que el FAB no tape el último elemento */
  padding-bottom: 96px;
}

/* Saludo superior */
.dashboard-saludo {
  margin-bottom: var(--space-6);
}

.dashboard-saludo h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.dashboard-camion {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.dashboard-camion-placa {
  font-weight: var(--font-semi);
  color: var(--color-text);
}

/* Card del viaje activo — fondo azul degradado */
.viaje-activo-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: 0 8px 24px -4px rgb(37 99 235 / 0.4);
}

.viaje-activo-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-bottom: var(--space-3);
}

.viaje-ruta {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
  line-height: var(--leading-tight);
  overflow-wrap: break-word;
}

/* La tarjeta de viaje activo tiene fondo azul (.viaje-activo-card) — el
   color azul de las paradas intermedias (.detalle-ruta-parada) quedaba
   casi invisible ahí. Solo en esta tarjeta se muestran en rojo para que
   contrasten con el fondo. */
.viaje-activo-card .detalle-ruta-parada {
  color: var(--color-danger);
}

.viaje-carga {
  font-size: var(--text-sm);
  opacity: 0.85;
  margin-bottom: var(--space-5);
  line-height: var(--leading-normal);
}

.viaje-activo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.viaje-fecha-small {
  font-size: var(--text-xs);
  opacity: 0.7;
}

/* Botón "Ver detalle" dentro del card azul */
.btn-ver-detalle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: rgb(255 255 255 / 0.2);
  color: var(--color-white);
  border: 1px solid rgb(255 255 255 / 0.3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  text-decoration: none;
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.btn-ver-detalle:hover {
  background: rgb(255 255 255 / 0.35);
}

/* Mensaje cuando no hay viaje activo */
.dashboard-sin-activo {
  background: var(--color-surface);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  text-align: center;
  margin-bottom: var(--space-6);
}

/* Header de sección de viajes recientes con link */
.viajes-seccion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

/* Título de sección de viajes recientes */
.viajes-seccion-titulo {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

/* Lista de viajes */
.viajes-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Fila individual de viaje */
.viaje-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.viaje-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

/* Punto de color que indica el estado */
.viaje-item-estado {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.viaje-item-estado.activo     { background: var(--color-primary); }
.viaje-item-estado.completado { background: var(--color-success); }
.viaje-item-estado.cancelado  { background: var(--color-danger); }

.viaje-item-info {
  flex: 1;
  min-width: 0;
}

.viaje-item-ruta {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-text);
  /* Sin nowrap/ellipsis: cuando el viaje tiene paradas intermedias deben
     verse completas, aunque la fila crezca a una segunda línea. Una ruta
     simple (sin paradas) sigue cabiendo en una sola línea igual que antes. */
  overflow-wrap: break-word;
  margin-bottom: var(--space-1);
}

.viaje-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.viaje-item-fecha {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.viaje-item-chevron {
  color: var(--color-text-light);
  flex-shrink: 0;
}

/* ── FAB — Botón flotante "Nuevo Viaje" ──────────────────── */
.fab {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--font-semi);
  text-decoration: none;
  box-shadow: 0 8px 20px -4px rgb(37 99 235 / 0.5);
  transition: background var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.fab:hover,
.fab:active {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgb(37 99 235 / 0.55);
}

/* En desktop el FAB tiene más margen */
@media (min-width: 1024px) {
  .fab {
    bottom: var(--space-8);
    right: var(--space-8);
  }
}

/* ── Skeleton loading ─────────────────────────────────────── */
/* Efecto de carga animado mientras llegan los datos */
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position:  400px 0; }
}

.skeleton-line,
.skeleton-card {
  background: linear-gradient(90deg,
    var(--color-border) 25%,
    #f0f4f8 50%,
    var(--color-border) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius-md);
}

.skeleton-line      { height: 20px; margin-bottom: var(--space-2); }
.skeleton-line.skeleton-lg { height: 32px; width: 60%; }
.skeleton-line.skeleton-sm { height: 14px; width: 40%; }
.skeleton-card      { height: 140px; border-radius: var(--radius-xl); }
.skeleton-card.skeleton-card-sm { height: 80px; }

/* ── Form Page (Nuevo Viaje / Detalle Viaje) ─────────────── */
.form-page {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-10);
}

.form-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-top: var(--space-2);
}

.form-page-titulo {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
}

/* Botón de volver con flecha */
.btn-volver {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-light);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}
.btn-volver:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Fieldset sin borde nativo, solo separación visual */
.form-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-6);
}

.form-legend {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

/* Indicador de campo requerido */
.form-required {
  color: var(--color-danger);
  margin-left: 2px;
}

/* Camión asignado (read-only para choferes con un solo camión) */
.form-camion-asignado {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* Botones del formulario */
.form-acciones {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 480px) {
  .form-acciones {
    flex-direction: column-reverse;
  }
  .form-acciones .btn {
    width: 100%;
    justify-content: center;
  }
}
.skeleton-card.skeleton-card-sm { height: 68px; border-radius: var(--radius-lg); }

/* ── Detalle de Viaje ────────────────────────────────────── */
.detalle-page {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-12);
}

.detalle-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-top: var(--space-2);
}

.detalle-titulo-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.detalle-ruta {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-tight);
  overflow-wrap: break-word;
}

/* Paradas intermedias dentro del título de ruta (Origen → Parada → Destino):
   color distinto y peso normal para que se note que no son el origen/destino */
.detalle-ruta-parada {
  color: var(--color-primary);
  font-weight: var(--font-medium);
}
.detalle-ruta-mas {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  vertical-align: middle;
}

/* Botones de gestión (editar/eliminar) en el header del detalle */
.detalle-header-acciones {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-2);
}

/* Card de información del viaje */
.detalle-info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}

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

.info-item        { display: flex; flex-direction: column; gap: 2px; }
.info-label       { font-size: var(--text-xs); color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.05em; }
.info-valor       { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text); }

.info-carga {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.info-valor-carga { font-size: var(--text-sm); color: var(--color-text); margin: 0; }

/* Secciones (gastos, documentos, financiero) */
.detalle-seccion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.seccion-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.seccion-titulo  { font-size: var(--text-base); font-weight: var(--font-semi); margin: 0; flex: 1; }
.seccion-total   { font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--color-text-muted); }

/* Gastos */
.gastos-lista { display: flex; flex-direction: column; gap: var(--space-3); }

/* La tabla de gastos se extiende al borde del padding de detalle-seccion */
.detalle-seccion .tabla-responsive {
  margin: 0 calc(-1 * var(--space-5));
}
.detalle-seccion .gastos-tabla th:first-child,
.detalle-seccion .gastos-tabla td:first-child { padding-left: var(--space-5); }
.detalle-seccion .gastos-tabla th:last-child,
.detalle-seccion .gastos-tabla td:last-child  { padding-right: var(--space-5); }

.gasto-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.gasto-item:last-child { border-bottom: none; padding-bottom: 0; }

.gasto-tipo-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}
.gasto-tipo-combustible  { background: #FEF3C7; color: #92400E; }
.gasto-tipo-peaje        { background: #DBEAFE; color: #1E40AF; }
.gasto-tipo-reparacion   { background: #FEE2E2; color: #991B1B; }
.gasto-tipo-alimentacion { background: #D1FAE5; color: #065F46; }
.gasto-tipo-otro         { background: var(--color-bg-alt); color: var(--color-text-muted); }

.gasto-info          { flex: 1; min-width: 0; }
.gasto-descripcion   { font-size: var(--text-sm); color: var(--color-text); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gasto-meta          { font-size: var(--text-xs); color: var(--color-text-light); margin: 0; }

.gasto-derecha  { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.gasto-monto    { font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--color-text); white-space: nowrap; }
.gasto-acciones { display: flex; gap: var(--space-1); }

/* Tabla de gastos / egresos */
.tabla-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
}

.gastos-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.gastos-tabla th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

.gastos-tabla td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.gastos-tabla tbody tr:last-child td { border-bottom: none; }

.gastos-tabla tbody tr:hover { background: var(--color-bg); }

.gasto-td-desc {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.gasto-td-acciones {
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 767px) {
  .gasto-td-desc { max-width: 120px; }
}

/* Ingresos — badges de categoría y monto */
.ingreso-cat-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}
.ingreso-cat-flete              { background: #D1FAE5; color: #065F46; }
.ingreso-cat-servicio_adicional { background: #DBEAFE; color: #1E40AF; }
.ingreso-cat-anticipo_recibido  { background: #EDE9FE; color: #5B21B6; }
.ingreso-cat-comision           { background: #FEF3C7; color: #92400E; }
.ingreso-cat-bonificacion       { background: #FEE2E2; color: #991B1B; }
.ingreso-cat-otro               { background: var(--color-bg-alt); color: var(--color-text-muted); }

.ingreso-monto { font-weight: var(--font-semi); color: var(--color-success); }
.ingreso-total { color: var(--color-success); }

/* Nómina: badges de tipo de pago */
.nomina-tipo-anticipo_sueldo { background: #FEF3C7; color: #92400E; }
.nomina-tipo-pago_sueldo     { background: #D1FAE5; color: #065F46; }
.nomina-tipo-bono            { background: #DBEAFE; color: #1E40AF; }
.nomina-tipo-otro            { background: var(--color-bg-alt); color: var(--color-text-muted); }
.nomina-monto                { font-weight: var(--font-semi); color: var(--color-success); }

/* Mis Pagos — tarjeta de resumen general del chofer */
.mispagos-resumen { margin: var(--space-4) 0; }
.mispagos-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-success);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Documentos */
.documentos-lista { display: flex; flex-direction: column; gap: var(--space-3); }

.documento-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.documento-item:last-child { border-bottom: none; padding-bottom: 0; }

.documento-tipo-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.documento-info    { flex: 1; min-width: 0; }
.documento-nombre  { font-size: var(--text-sm); color: var(--color-text); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.documento-meta    { font-size: var(--text-xs); color: var(--color-text-light); margin: 0; }
.documento-acciones { display: flex; gap: var(--space-1); flex-shrink: 0; }

/* Financiero */
.financiero-seccion { border-color: var(--color-primary-light); }

.financiero-card { display: flex; flex-direction: column; gap: var(--space-3); }

.financiero-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.financiero-row-total {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}
.financiero-valor-flete { font-weight: var(--font-semi); color: var(--color-text); }
.financiero-gasto       { color: var(--color-danger); font-weight: var(--font-medium); }
.utilidad-positiva      { color: var(--color-success) !important; }
.utilidad-negativa      { color: var(--color-danger)  !important; }

/* Estado vacío inline (dentro de sección) */
.empty-state-inline {
  padding: var(--space-4) 0;
  text-align: center;
}

/* Acciones del viaje (completar) */
.detalle-acciones {
  padding: var(--space-4) 0 var(--space-2);
}

/* Upload progress */
.upload-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}
.upload-progress-bar {
  height: 4px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  animation: shimmer 1.2s infinite linear;
  background-size: 400px 100%;
}

/* Modal tamaño pequeño para confirmar */
.modal-sm { max-width: 360px; }

/* Modal ancho para formularios complejos */
.modal-lg { max-width: 700px; }

/* Botón cerrar modal */
.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.modal-close:hover { background: var(--color-bg-alt); color: var(--color-text); }

@media (min-width: 768px) {
  .detalle-ruta { font-size: var(--text-2xl); }
}

/* Badges de tipo — nuevos tipos de gasto/egreso */
.gasto-tipo-lavado            { background: #E0E7FF; color: #3730A3; }
.gasto-tipo-mantenimiento     { background: #FFF7ED; color: #C2410C; }
.gasto-tipo-seguro            { background: #F0FDF4; color: #166534; }
.gasto-tipo-estibaje          { background: #ECFDF5; color: #065F46; }
.gasto-tipo-estacionamiento   { background: #F3F4F6; color: #374151; }
.gasto-tipo-rastreo_satelital { background: #EFF6FF; color: #1D4ED8; }

/* ── Egresos Generales ───────────────────────────────────── */
.egresos-page {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-12);
}

/* Filtros */
.egresos-filtros {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.form-select-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  flex: 1;
  min-width: 140px;
}

/* Resumen de totales */
.egresos-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.egresos-resumen-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 160px;
}

.egresos-resumen-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.egresos-resumen-total { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-danger); }
.egresos-resumen-total-excluido { color: var(--color-text-muted); }

/* Badge "solo registro" en filas que no cuentan para estadísticas */
.gasto-badge-no-stats {
  display: inline-block;
  margin-top: var(--space-1);
}

/* Lista de egresos */
.egresos-lista {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.egresos-lista .tabla-responsive { border-radius: 0; }
.egresos-lista .gastos-tabla th:first-child,
.egresos-lista .gastos-tabla td:first-child { padding-left: var(--space-4); }
.egresos-lista .gastos-tabla th:last-child,
.egresos-lista .gastos-tabla td:last-child  { padding-right: var(--space-4); }

/* Paginación */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.paginacion-info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.paginacion-controles {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.paginacion-pagina {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-text);
  min-width: 60px;
  text-align: center;
}

.paginacion-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Dashboard Propietario ───────────────────────────────── */
.propietario-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-12);
}

.propietario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-top: var(--space-2);
  flex-wrap: wrap;
}

.propietario-titulo    { font-size: var(--text-2xl); font-weight: var(--font-bold); margin: 0; }
.propietario-subtitulo { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; text-transform: capitalize; }

/* Cards de estadísticas */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-shadow: var(--shadow-sm);
}

.stat-card-accent { border-color: var(--color-primary-light); background: var(--color-primary-light); }

.stat-valor { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--color-text); line-height: 1; }
.stat-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.stat-card-accent .stat-valor { color: var(--color-primary); }
.stat-card-accent .stat-label { color: var(--color-primary); opacity: 0.8; }

/* Secciones del panel */
.prop-seccion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.prop-seccion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

/* Grid de camiones */
.camiones-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.camion-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-bg);
}

.camion-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.camion-placa {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.camion-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.camion-btn-viaje { flex-shrink: 0; }

/* Estado del camión */
.camion-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.camion-estado-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.camion-estado.en-ruta   { color: var(--color-primary); }
.camion-estado.en-ruta .camion-estado-dot { background: var(--color-primary); animation: pulso 1.5s infinite; }
.camion-estado.disponible { color: var(--color-text-muted); }
.camion-estado.disponible .camion-estado-dot { background: var(--color-text-light); }

@keyframes pulso {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@media (min-width: 600px) {
  .camiones-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .stats-grid    { gap: var(--space-4); }
  .stat-card     { padding: var(--space-5) var(--space-6); }
  .stat-valor    { font-size: var(--text-4xl); }
}

/* ── Tabs (Nómina y otros módulos con pestañas) ──────────── */
.tabs-container {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--color-text);
}

.tab-btn-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-semi);
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-2);
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  border-radius: var(--radius-full);
}

.tab-btn-active .tab-badge {
  background: var(--color-primary);
  color: #fff;
}

/* ── Nómina: preview del cálculo ─────────────────────────── */
.nomina-preview-tabla {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--text-sm);
}

.nomina-preview-seccion {
  background: var(--color-surface);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

.nomina-preview-seccion:first-child {
  border-top: none;
}

.nomina-preview-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  gap: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.nomina-preview-subtotal {
  font-weight: var(--font-semi);
  background: var(--color-bg);
}

.nomina-preview-neto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  border-top: 2px solid var(--color-border);
}

@media (max-width: 480px) {
  .stats-grid    { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .stat-card     { padding: var(--space-3); }
  .stat-valor    { font-size: var(--text-2xl); }
  .stat-label    { font-size: 10px; }
}

/* ── Gestión de Camiones ─────────────────────────────────── */
.camiones-page {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-12);
}

/* Tarjeta de camión en la lista */
.camion-lista-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
}
.camion-lista-card:hover { box-shadow: var(--shadow-md); }
.camion-inactivo { opacity: 0.6; }

/* Fila superior: placa + badge + botón editar */
.camion-lista-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.camion-lista-placa-grupo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.camion-lista-placa {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  letter-spacing: 0.05em;
  color: var(--color-text);
}

/* Tags de estado */
.camion-lista-tag {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}
.tag-activo   { background: #D1FAE5; color: #065F46; }
.tag-inactivo { background: var(--color-bg-alt); color: var(--color-text-muted); }

/* Descripción y detalles técnicos */
.camion-lista-desc     { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-1); }
.camion-lista-detalles { font-size: var(--text-xs); color: var(--color-text-light); margin: 0 0 var(--space-3); }

/* Fila media: chofer + viaje activo */
.camion-lista-info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.camion-lista-chofer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.camion-lista-en-ruta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.camion-ruta-link { color: var(--color-primary); font-size: var(--text-sm); }
.camion-ruta-link:hover { text-decoration: underline; }

/* Fila inferior: acciones */
.camion-lista-acciones-bottom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Helpers de grid de 2 columnas en el form */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 400px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* ── Gestión de Usuarios ─────────────────────────────────── */
.usuarios-page {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-12);
}

/* Tabs de filtro */
.usuarios-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.usuarios-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.usuarios-tab:hover     { border-color: var(--color-primary); color: var(--color-primary); }
.usuarios-tab.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.usuarios-tab.is-active .usuarios-tab-count { color: rgba(255,255,255,0.75); }

.usuarios-tab-count {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

/* Tarjeta de usuario */
.usuario-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
}
.usuario-card:hover { box-shadow: var(--shadow-md); }
.usuario-inactivo   { opacity: 0.6; }

/* Avatar circular con inicial */
.usuario-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  flex-shrink: 0;
}

/* Info del usuario */
.usuario-info         { flex: 1; min-width: 0; }
.usuario-nombre-row   { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: 2px; }
.usuario-nombre       { font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--color-text); }
.usuario-empresa      { font-size: var(--text-xs); color: var(--color-primary); font-weight: var(--font-semi); margin: 0 0 1px; }
.usuario-email        { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-meta         { font-size: var(--text-xs); color: var(--color-text-light); margin: 2px 0 0; }
.usuario-yo-badge     { font-size: var(--text-xs); background: #FEF3C7; color: #92400E; padding: 1px 6px; border-radius: var(--radius-full); font-weight: var(--font-semi); }

/* Acciones */
.usuario-acciones { display: flex; flex-direction: column; gap: var(--space-2); flex-shrink: 0; }

/* Badge admin */
.badge-admin { background: #EDE9FE; color: #5B21B6; }

/* Input con botón de ver contraseña */
.input-con-ojo {
  position: relative;
  display: flex;
  align-items: center;
}
.input-con-ojo .form-input { padding-right: 40px; flex: 1; }
.btn-ojo {
  position: absolute;
  right: var(--space-2);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  display: flex;
  align-items: center;
}
.btn-ojo:hover { color: var(--color-text); }

/* Checkboxes de camiones permitidos */
.camiones-check-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  max-height: 200px;
  overflow-y: auto;
}

.camion-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

/* Checkbox base */
.form-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}

/* Check de opciones */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.form-check-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1.4;
}

@media (min-width: 480px) {
  .usuario-acciones { flex-direction: row; align-items: center; }
}

/* ── Estadísticas ────────────────────────────────────────── */
.estadisticas-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-12);
}

/* Filtros */
.stats-filtros {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.stats-filtros .form-select-sm { flex: 1; min-width: 160px; }

/* Grid de KPIs */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.kpi-card {
  /* min-width:0 es necesario porque es un hijo de grid: sin esto, un
     contenido que no puede partirse (un monto largo) fuerza la tarjeta
     a ser más ancha que su columna y el texto se sale del contenedor */
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-shadow: var(--shadow-sm);
}

.kpi-card-destacado {
  border-color: var(--color-primary-light);
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-primary-light) 100%);
}

.kpi-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-valor {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  line-height: 1.1;
  overflow-wrap: break-word;
}
.kpi-sub   { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: break-word; }

.kpi-positivo { color: var(--color-success) !important; }
.kpi-negativo { color: var(--color-danger)  !important; }

/* Secciones */
.stats-seccion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  /* Red de seguridad: cualquier texto sin punto de quiebre (nombres largos,
     montos grandes) se envuelve en vez de salirse del borde de la tarjeta */
  overflow-wrap: break-word;
}

/* Desglose por camión */
.camion-stats-lista { display: flex; flex-direction: column; gap: var(--space-3); }

.camion-stats-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.camion-stats-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.camion-stats-placa {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  width: 80px;
  flex-shrink: 0;
  color: var(--color-text);
}

.camion-stats-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stats-bar {
  height: 6px;
  border-radius: var(--radius-full);
  min-width: 4px;
  transition: width var(--transition-normal);
}
.stats-bar-ingreso { background: var(--color-primary); opacity: 0.85; }
.stats-bar-egreso  { background: var(--color-danger);  opacity: 0.65; }

.camion-stats-numeros {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: var(--text-sm);
  flex-shrink: 0;
  min-width: 120px;
}

/* Lista de viajes en stats */
.viajes-stats-lista { display: flex; flex-direction: column; }

.viaje-stats-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
  border-radius: var(--radius-md);
}
.viaje-stats-item:last-child { border-bottom: none; }
.viaje-stats-item:hover { background: var(--color-bg-alt); padding-left: var(--space-2); padding-right: var(--space-2); }

.viaje-stats-ruta  { flex: 1; min-width: 0; }
.viaje-stats-tramo { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text); overflow-wrap: break-word; }
.viaje-stats-meta  { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

.viaje-stats-numeros {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.viaje-stats-flete    { font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--color-text); }
.viaje-stats-utilidad { font-size: var(--text-xs); font-weight: var(--font-semi); }

/* Título de sección de estadísticas */
.stats-titulo {
  font-size: var(--text-base);
  font-weight: var(--font-semi);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.stats-titulo-count {
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.stats-seccion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.stats-seccion-header .stats-titulo { margin-bottom: 0; }

/* Gráfico de barras: tendencia mensual */
.trend-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
}
.trend-month {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.trend-bars-wrap {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border-bottom: 1px solid var(--color-border);
}
.trend-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height var(--transition-normal);
}
.trend-bar-ingreso { background: var(--color-success); opacity: 0.8; }
.trend-bar-egreso  { background: var(--color-danger);  opacity: 0.65; }
.trend-util  { font-size: 10px; font-weight: var(--font-semi); line-height: 1; }
.trend-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.trend-leyenda {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.trend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.trend-dot-ingreso { background: var(--color-success); }
.trend-dot-egreso  { background: var(--color-danger); }

/* Barras horizontales de breakdown */
.breakdown-lista { display: flex; flex-direction: column; gap: var(--space-3); }
.breakdown-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.breakdown-label {
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: nowrap;
  width: 150px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breakdown-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.breakdown-bar {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
  min-width: 2px;
}
.breakdown-bar-ingreso { background: var(--color-success); }
.breakdown-bar-egreso  { background: var(--color-danger); opacity: 0.75; }
.breakdown-monto {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-text);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}
.breakdown-pct {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* Resumen por estado de viajes */
.viajes-estado-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.viaje-estado-item {
  min-width: 0; /* hijo de grid — ver nota en .kpi-card */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
  gap: var(--space-1);
}
.viaje-estado-count {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: 1;
}
.viaje-estado-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
}
.viaje-estado-pct { font-size: var(--text-xs); color: var(--color-text-light); }
.estado-completado { border-color: var(--color-success); }
.estado-completado .viaje-estado-count { color: var(--color-success); }
.estado-activo     { border-color: var(--color-primary); }
.estado-activo     .viaje-estado-count { color: var(--color-primary); }
.estado-cancelado  { border-color: var(--color-border); }
.estado-cancelado  .viaje-estado-count { color: var(--color-text-muted); }

/* Rutas frecuentes */
.rutas-lista { display: flex; flex-direction: column; gap: var(--space-4); }
.ruta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ruta-info { flex: 1; min-width: 0; }
.ruta-tramo {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.ruta-bar-wrap {
  height: 4px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.ruta-bar {
  height: 100%;
  background: var(--color-primary);
  opacity: 0.7;
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}
.ruta-numeros {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.ruta-count { font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--color-text); }
.ruta-avg   { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Link de viaje en tabla de ingresos */
.link-viaje { color: var(--color-primary); text-decoration: none; }
.link-viaje:hover { text-decoration: underline; }

@media (max-width: 500px) {
  .kpi-grid     { grid-template-columns: repeat(2, 1fr); }
  .kpi-valor    { font-size: var(--text-xl); }
  .camion-stats-numeros { min-width: 90px; font-size: var(--text-xs); }
  .camion-stats-placa   { width: 60px; }
  .breakdown-label { width: 100px; }
  .breakdown-pct   { display: none; }
  .viajes-estado-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .viaje-estado-count { font-size: var(--text-xl); }
  .trend-util { display: none; }
}

/* ── Auditoría ───────────────────────────────────────────── */
.auditoria-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-12);
}

/* Badge con el total de registros */
.audit-total-badge {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
}

/* Filtros */
.audit-filtros {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.audit-filtros .form-select-sm { flex: 1; min-width: 140px; }

/* Lista de entradas */
.audit-lista { display: flex; flex-direction: column; }

.audit-entrada {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.audit-entrada:first-child { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.audit-entrada:last-child  { border-bottom: none; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.audit-entrada:only-child  { border-radius: var(--radius-xl); }

/* Avatar */
.audit-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Cuerpo de la entrada */
.audit-cuerpo   { flex: 1; min-width: 0; }
.audit-fila-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: 3px; }
.audit-nombre   { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text); }
.audit-rol      { font-size: var(--text-xs); color: var(--color-text-muted); }
.audit-descripcion { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Fecha */
.audit-fecha {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}

/* Badges de acción */
.audit-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--font-semi);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.audit-sesion  { background: #DBEAFE; color: #1D4ED8; }
.audit-viaje   { background: #E0F2FE; color: #0369A1; }
.audit-success { background: #D1FAE5; color: #065F46; }
.audit-gasto   { background: #FEF3C7; color: #92400E; }
.audit-egreso  { background: #FFF7ED; color: #C2410C; }
.audit-doc     { background: #EDE9FE; color: #5B21B6; }
.audit-camion  { background: #DBEAFE; color: #1E40AF; }
.audit-usuario { background: #F0FDF4; color: #166534; }
.audit-flete   { background: #D1FAE5; color: #065F46; }
.audit-danger  { background: #FEE2E2; color: #991B1B; }
.audit-default { background: var(--color-bg-alt); color: var(--color-text-muted); }

@media (max-width: 480px) {
  .audit-filtros { gap: var(--space-2); }
  .audit-fecha   { display: none; }
  .audit-descripcion { white-space: normal; }
}

/* ── Tabla de auditoría (superadmin) ─────────────────────── */
.audit-tabla-controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

/* Wrapper con scroll horizontal en mobile */
.audit-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--color-surface);
}

/* Cabecera */
.audit-table thead tr {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.audit-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Filas */
.audit-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}
.audit-table tbody tr:last-child { border-bottom: none; }
.audit-table tbody tr:hover { background: var(--color-bg-alt); }

/* Fila de acciones destructivas */
.audit-tr-danger td:first-child {
  border-left: 3px solid var(--color-danger);
}

/* Celdas */
.audit-table td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  color: var(--color-text);
}

/* Anchos sugeridos por columna */
.audit-th-fecha,   .audit-td-fecha   { width: 110px; white-space: nowrap; color: var(--color-text-muted); font-size: var(--text-xs); }
.audit-th-empresa, .audit-td-empresa { width: 150px; }
.audit-th-usuario, .audit-td-usuario { width: 140px; }
.audit-th-accion,  .audit-td-accion  { width: 130px; }
.audit-th-detalle, .audit-td-detalle { color: var(--color-text-muted); font-size: var(--text-xs); }

/* Etiqueta de empresa */
.audit-empresa-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Columna usuario: nombre en negrita, rol en gris debajo */
.audit-td-usuario .audit-nombre { font-size: var(--text-xs); font-weight: var(--font-medium); }
.audit-td-usuario .audit-rol    { font-size: 11px; color: var(--color-text-muted); }

@media (max-width: 768px) {
  /* En tablet/mobile la tabla hace scroll horizontal */
  .audit-th-detalle, .audit-td-detalle { min-width: 180px; }
  .audit-table { min-width: 640px; }
}

/* ── Tab Datos (backup / restore / reset) ────────────────── */
.datos-page {
  padding: var(--space-4) 0 var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.datos-seccion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
}

.datos-seccion-peligro {
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
  background: color-mix(in srgb, var(--color-danger) 4%, var(--color-surface));
}

.datos-seccion-header {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.datos-seccion-icono {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}

.datos-seccion-titulo {
  font-size: var(--text-base);
  font-weight: var(--font-semi);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.datos-seccion-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.datos-progreso {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

/* ── Perfil de Usuario ───────────────────────────────────── */
.perfil-page {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-12);
}

/* Header: avatar + nombre + rol */
.perfil-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* Avatar circular clickeable */
.perfil-avatar-wrap  { position: relative; flex-shrink: 0; }

.perfil-avatar-btn {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-primary-light);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: transparent;
  display: block;
  transition: border-color var(--transition-fast);
}
.perfil-avatar-btn:hover { border-color: var(--color-primary); }

.perfil-avatar-img    { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-avatar-inicial {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
}

/* Overlay de cámara al hacer hover */
.perfil-avatar-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
  border-radius: var(--radius-full);
}
.perfil-avatar-btn:hover .perfil-avatar-overlay { opacity: 1; }

.perfil-foto-preview-badge {
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: var(--font-semi);
  background: var(--color-primary);
  color: #fff;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Info al lado del avatar */
.perfil-header-info  { min-width: 0; }
.perfil-nombre       { font-size: var(--text-xl); font-weight: var(--font-bold); margin: 0 0 var(--space-2); }
.perfil-email-header {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

/* Secciones del perfil */
.perfil-seccion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.perfil-seccion-titulo {
  font-size: var(--text-base);
  font-weight: var(--font-semi);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

/* Teléfono con prefijo */
.telefono-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.telefono-input-wrap:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }

.telefono-prefijo {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-text);
  white-space: nowrap;
  height: 44px;
  flex-shrink: 0;
}

.telefono-numero {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 1;
}

/* Email solo lectura */
.perfil-email-readonly {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.perfil-email-lock { color: var(--color-text-light); flex-shrink: 0; }

/* Hint de texto bajo inputs */
.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

/* Acciones */
.perfil-acciones {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

/* Toggle de contraseña */
.perfil-toggle-password {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) 0;
  background: transparent;
  border: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-primary);
  cursor: pointer;
  text-align: left;
}
.perfil-toggle-password:hover { color: var(--color-primary-dark, var(--color-primary)); }
.perfil-toggle-chevron { margin-left: auto; transition: transform var(--transition-fast); }

/* Indicador de fortaleza de contraseña */
.password-strength {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.strength-bars { display: flex; gap: 4px; flex: 1; }
.strength-bar  { height: 4px; flex: 1; border-radius: var(--radius-full); background: var(--color-border); transition: background var(--transition-fast); }
.strength-label { font-size: var(--text-xs); font-weight: var(--font-semi); white-space: nowrap; }

/* Avatar en el nav */
.nav-perfil-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-full);
  padding: 2px;
  transition: opacity var(--transition-fast);
}
.nav-perfil-link:hover { opacity: 0.8; }

.nav-avatar-foto {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-primary-light);
  flex-shrink: 0;
}

.nav-avatar-inicial {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  flex-shrink: 0;
  border: 2px solid var(--color-primary-light);
}

@media (min-width: 768px) {
  .perfil-avatar-btn { width: 100px; height: 100px; }
  .perfil-avatar-inicial { font-size: var(--text-4xl); }
}

/* ── Panel Superadmin ────────────────────────────────────── */
.admin-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-12);
}

.admin-header {
  margin-bottom: var(--space-5);
  padding-top: var(--space-2);
}
.admin-titulo    { font-size: var(--text-2xl); font-weight: var(--font-bold); margin: 0 0 var(--space-1); }
.admin-subtitulo { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* Tabs del panel admin */
.admin-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-5);
  border-bottom: 2px solid var(--color-border);
}

.admin-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
}
.admin-tab:hover     { color: var(--color-text); }
.admin-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Etiqueta de tenant en auditoría global */
.audit-tenant {
  font-size: var(--text-xs);
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
}

/* ── Campo de nombre de usuario (@alias) ─────────────────── */

/* Alias mostrado en tarjetas de usuario */
.usuario-alias {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono, monospace);
}

/* Contenedor input con prefijo @ */
.usuario-input-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  overflow: hidden;
}
.usuario-input-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Símbolo @ */
.usuario-prefijo {
  flex-shrink: 0;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-right: 1.5px solid var(--color-border);
  user-select: none;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Input dentro del wrapper — quita bordes propios */
.usuario-campo {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  flex: 1;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
}
.usuario-campo:focus {
  outline: none;
  box-shadow: none !important;
}
.usuario-campo.is-invalid {
  background: var(--color-danger-light, #FEF2F2);
}
.usuario-campo.is-invalid ~ .usuario-prefijo,
.usuario-input-wrap:has(.usuario-campo.is-invalid) {
  border-color: var(--color-danger);
}

/* ── Banner de solicitud de reapertura (viaje-detalle) ───── */

.solicitud-banner {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid transparent;
  margin-bottom: var(--space-4);
}
.solicitud-banner-info {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: #1E40AF;
}
.solicitud-banner-warning {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}
.solicitud-banner-danger {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #991B1B;
}
.solicitud-banner-icono {
  font-size: var(--text-xl);
  flex-shrink: 0;
  line-height: 1.2;
}
.solicitud-banner-body {
  flex: 1;
}
.solicitud-banner-titulo {
  font-weight: var(--font-semi);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}
.solicitud-banner-texto {
  font-size: var(--text-sm);
  opacity: 0.85;
}
.solicitud-banner-motivo {
  font-size: var(--text-sm);
  font-style: italic;
  margin-top: var(--space-1);
  opacity: 0.9;
}
.solicitud-banner-acciones {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

/* ── Solicitudes en dashboard propietario ────────────────── */

.prop-seccion-solicitudes {
  border: 1.5px solid #FDE68A;
  border-radius: var(--radius-lg);
  background: #FFFBEB;
  padding: var(--space-4);
}

.solicitudes-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.solicitud-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.solicitud-item-info {
  flex: 1;
  min-width: 0;
}
.solicitud-item-chofer {
  font-weight: var(--font-semi);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.solicitud-item-ruta {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-top: 2px;
}
.solicitud-item-motivo {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.solicitud-item-fecha {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.solicitud-item-acciones {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Botones extra-small */
.btn-xs {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
}

/* Variante danger outline */
.btn-danger-outline {
  background: transparent;
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.btn-danger-outline:hover {
  background: var(--color-danger);
  color: #fff;
}

/* ── Historial de viajes ──────────────────────────────────── */

.historial-page {}

.historial-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.historial-titulo {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.historial-subtitulo {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.historial-filtros {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.form-group-inline {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 140px;
}
.form-label-sm {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-select-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}
.form-select-sm:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.historial-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.historial-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.historial-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.historial-item-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.historial-dot-activo     { background: var(--color-primary); }
.historial-dot-completado { background: var(--color-success); }
.historial-dot-cancelado  { background: var(--color-danger); }

.historial-item-info { flex: 1; min-width: 0; }
.historial-item-ruta {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  /* Sin nowrap/ellipsis: las paradas intermedias deben verse completas */
  overflow-wrap: break-word;
}
.historial-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 3px;
  flex-wrap: wrap;
}
.historial-item-detalle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.historial-chevron {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.historial-paginacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.historial-fin-lista {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-2) 0;
}

/* ── Caja Chica / Adelantos ──────────────────────────────── */

.adelantos-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-12);
}

.adelantos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.adelantos-titulo    { font-size: var(--text-2xl); font-weight: var(--font-bold); margin: 0; }
.adelantos-subtitulo { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; }

/* Grilla de tarjetas por chofer */
.adelantos-choferes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.adelanto-chofer-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.adelanto-chofer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.adelanto-chofer-nombre {
  font-weight: var(--font-semi);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.adelanto-chofer-placa {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Filas de balance dentro de cada tarjeta de chofer */
.adelanto-balances {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.adelanto-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
}

.adelanto-balance-label { color: var(--color-text-muted); }
.adelanto-balance-val   { font-weight: var(--font-medium); }

.adelanto-balance-total {
  padding-top: var(--space-2);
  margin-top: var(--space-1);
  border-top: 1px dashed var(--color-border);
}

.saldo-positivo { color: var(--color-success); }
.saldo-negativo { color: var(--color-danger); }

/* Sección tabla de historial */
.adelantos-lista {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

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

.adelantos-lista .tabla-responsive { border-radius: 0; }
.adelantos-lista .gastos-tabla th:first-child,
.adelantos-lista .gastos-tabla td:first-child { padding-left: var(--space-5); }
.adelantos-lista .gastos-tabla th:last-child,
.adelantos-lista .gastos-tabla td:last-child  { padding-right: var(--space-5); }

/* Detalle expandible por chofer (caja chica) */
.chofer-detalle {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-1);
}

.chofer-detalle-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-primary);
  user-select: none;
  list-style: none;
}
.chofer-detalle-toggle::-webkit-details-marker { display: none; }
.chofer-detalle-toggle::marker { display: none; }
.chofer-detalle-toggle svg { transition: transform var(--transition-fast); }
details[open] .chofer-detalle-toggle svg { transform: rotate(180deg); }

.chofer-detalle-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.chofer-detalle-content { padding-bottom: var(--space-2); }

.chofer-detalle-subtitulo {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--space-3) 0 var(--space-1);
}

.chofer-detalle-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}

.chofer-detalle-item:last-child { border-bottom: none; }

.chofer-detalle-fecha {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.chofer-detalle-desc {
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chofer-detalle-monto {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  white-space: nowrap;
}

/* Fila de detalle expandida dentro de la tabla de cierres */
.cierre-detalle-row .cierre-detalle-td {
  padding: var(--space-3) var(--space-5) var(--space-4);
  background: var(--color-bg);
  border-top: 1px dashed var(--color-border);
}

.cierre-toggle-btn svg {
  transition: transform var(--transition-fast);
  display: block;
}

/* ── Tarjeta de saldo (dashboard chofer) ─────────────────── */

.balance-card {
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  border: 1.5px solid transparent;
}

.balance-positivo {
  background: #F0FDF4;
  border-color: #86EFAC;
}

.balance-negativo {
  background: #FFF1F2;
  border-color: #FECDD3;
}

.balance-etiqueta {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.balance-monto {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.balance-positivo .balance-monto { color: var(--color-success); }
.balance-negativo .balance-monto { color: var(--color-danger); }

.balance-detalle {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Acciones dentro de cada tarjeta de chofer */
.adelanto-card-acciones {
  display: flex;
  gap: var(--space-2);
}

.adelanto-card-acciones .btn { flex: 1; justify-content: center; }

/* Fila de saldo anterior (carry-forward) */
.cierre-carry {
  font-size: var(--text-xs);
  opacity: 0.85;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-1);
  border-bottom: 1px dashed var(--color-border);
}

/* Botón outline warning para Cerrar Caja */
.btn-outline { background: transparent; }
.btn-warning {
  border-color: #F59E0B;
  color: #92400E;
}
.btn-warning:hover { background: #FEF3C7; }

/* Tarjeta de saldo clickeable */
.balance-card-link {
  display: block;
  text-decoration: none;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.balance-card-link:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.balance-ver-mas {
  float: right;
  font-size: var(--text-xs);
  opacity: 0.7;
}

/* ── Mi Caja Chica (vista chofer) ────────────────────────── */

.mi-caja-page {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-12);
}

.mi-caja-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-top: var(--space-2);
}

.mi-caja-titulo {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin: 0;
}

.mi-caja-seccion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.mi-caja-seccion .tabla-responsive {
  margin: var(--space-3) calc(-1 * var(--space-5)) calc(-1 * var(--space-4));
}
.mi-caja-seccion .gastos-tabla th:first-child,
.mi-caja-seccion .gastos-tabla td:first-child { padding-left: var(--space-5); }
.mi-caja-seccion .gastos-tabla th:last-child,
.mi-caja-seccion .gastos-tabla td:last-child  { padding-right: var(--space-5); }

@media (max-width: 767px) {
  .adelantos-choferes-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   DESKTOP — aprovechamiento de pantalla grande
   A partir de 1024px las páginas de lista/tabla se expanden
   para usar el ancho disponible. El padding del app-main
   provee el respiro lateral.
   ============================================================ */

@media (min-width: 1024px) {
  /* Más respiro lateral en el contenedor principal de la SPA */
  .app-main { padding-inline: var(--space-10); }

  /* Páginas de lista / tabla: usan todo el ancho disponible */
  .egresos-page,
  .camiones-page,
  .usuarios-page,
  .auditoria-page,
  .adelantos-page { max-width: none; }

  /* Dashboards y estadísticas: crecen pero mantienen un tope legible */
  .propietario-page,
  .estadisticas-page,
  .admin-page { max-width: 1280px; }

  /* Vista del chofer (caja / pagos): amplía moderadamente */
  .mi-caja-page { max-width: 960px; }

  /* Detalle de viaje: más espacio para ver gastos sin scroll */
  .detalle-page { max-width: 1000px; }

  /* Formulario nuevo viaje: sube un escalón */
  .form-page { max-width: 680px; }

  /* Grid de camiones: 3 columnas en desktop */
  .camiones-grid { grid-template-columns: repeat(3, 1fr); }

  /* Filtros de egresos/ingresos no se apilan */
  .egresos-filtros { flex-wrap: nowrap; }
}

@media (min-width: 1280px) {
  /* Padding aún más generoso en pantallas anchas */
  .app-main { padding-inline: var(--space-12); }

  /* Páginas de lista: tope razonable para no estirar infinito en 4K */
  .egresos-page,
  .camiones-page,
  .usuarios-page,
  .auditoria-page,
  .adelantos-page { max-width: 1600px; }

  /* Dashboards crecen hasta 1400px en pantallas wide */
  .propietario-page,
  .estadisticas-page,
  .admin-page { max-width: 1400px; }

  /* Detalle: expande a 1100px para aprovechar la pantalla */
  .detalle-page { max-width: 1100px; }

  /* Formulario: sube otro escalón */
  .form-page { max-width: 760px; }

  /* Grid de camiones: hasta 4 columnas en pantallas muy anchas */
  .camiones-grid { grid-template-columns: repeat(4, 1fr); }
}