/* ==========================================================================
   Control de Viajes · sistema de diseño
   Bootstrap 5.3 personalizado con variables CSS. Cada variable del tema
   claro tiene su par en el tema oscuro: el bloque claro también aplica
   sobre <html> en modo oscuro, así que lo que no se redefine se filtra.
   ========================================================================== */

:root,
[data-bs-theme=light] {
  --app-bg: #f5f6fa;
  --app-surface: #ffffff;
  --app-border: #e6e8ef;
  --app-primary: #4f46e5;
  --app-primary-hover: #4338ca;
  --app-primary-active: #3730a3;
  --app-primary-text: #4f46e5;
  --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --app-shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
  --app-topbar-bg: rgba(245, 246, 250, .82);

  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #1f2937;
  --bs-body-color-rgb: 31, 41, 55;
  --bs-emphasis-color: #0b1220;
  --bs-secondary-color: #6b7280;
  --bs-secondary-bg: #eef0f5;
  --bs-tertiary-bg: #f8f9fc;
  --bs-tertiary-bg-rgb: 248, 249, 252;
  --bs-border-color: #e6e8ef;
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-primary-bg-subtle: #eef0ff;
  --bs-primary-border-subtle: #c7d2fe;
  --bs-primary-text-emphasis: #3730a3;
  --bs-link-color: #4f46e5;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #3730a3;
  --bs-link-hover-color-rgb: 55, 48, 163;
  --bs-focus-ring-color: rgba(79, 70, 229, .25);

  /* Estados de viajes y recorridos: sólido, fondo suave y texto. */
  --e-prog: #2563eb;  --e-prog-bg: #e0ebff;  --e-prog-fg: #1d4ed8;
  --e-curso: #ea580c; --e-curso-bg: #ffedd5; --e-curso-fg: #c2410c;
  --e-fin: #16a34a;   --e-fin-bg: #dcfce7;   --e-fin-fg: #15803d;
  --e-canc: #64748b;  --e-canc-bg: #eef1f5;  --e-canc-fg: #475569;
}

[data-bs-theme=dark] {
  --app-bg: #0b1020;
  --app-surface: #131a2c;
  --app-border: #232c42;
  --app-primary: #6366f1;
  --app-primary-hover: #5558e6;
  --app-primary-active: #4a4ddb;
  --app-primary-text: #a5b4fc;
  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --app-shadow-md: 0 6px 16px rgba(0, 0, 0, .4);
  --app-topbar-bg: rgba(11, 16, 32, .8);

  --bs-body-bg: #131a2c;
  --bs-body-bg-rgb: 19, 26, 44;
  --bs-body-color: #e2e8f0;
  --bs-body-color-rgb: 226, 232, 240;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: #94a3b8;
  --bs-secondary-bg: #1b2338;
  --bs-tertiary-bg: #172036;
  --bs-tertiary-bg-rgb: 23, 32, 54;
  --bs-border-color: #232c42;
  --bs-primary: #6366f1;
  --bs-primary-rgb: 99, 102, 241;
  --bs-primary-bg-subtle: rgba(99, 102, 241, .16);
  --bs-primary-border-subtle: #3730a3;
  --bs-primary-text-emphasis: #c7d2fe;
  --bs-link-color: #a5b4fc;
  --bs-link-color-rgb: 165, 180, 252;
  --bs-link-hover-color: #c7d2fe;
  --bs-link-hover-color-rgb: 199, 210, 254;
  --bs-focus-ring-color: rgba(129, 140, 248, .35);

  --e-prog: #3b82f6;  --e-prog-bg: rgba(59, 130, 246, .18);  --e-prog-fg: #93c5fd;
  --e-curso: #f97316; --e-curso-bg: rgba(249, 115, 22, .18); --e-curso-fg: #fdba74;
  --e-fin: #22c55e;   --e-fin-bg: rgba(34, 197, 94, .16);    --e-fin-fg: #86efac;
  --e-canc: #94a3b8;  --e-canc-bg: rgba(148, 163, 184, .16); --e-canc-fg: #cbd5e1;
}

:root {
  --app-radius: .75rem;
  --app-radius-sm: .5rem;
  --app-sidebar-w: 264px;
  --app-topbar-h: 60px;
  --app-bottom-nav-h: 64px;
  --app-sidebar-bg: #0f172a;
  --app-sidebar-color: #cbd5e1;
  --app-sidebar-muted: #64748b;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .75rem;
}

/* --- Base ---------------------------------------------------------------- */
body {
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 650; letter-spacing: -.015em; color: var(--bs-emphasis-color); }
a { text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.text-muted { color: var(--bs-secondary-color) !important; }
.min-w-0 { min-width: 0; }
.text-capitalize-first { display: inline-block; }
.text-capitalize-first::first-letter { text-transform: uppercase; }
p.text-capitalize-first { display: block; }

/* --- Layout -------------------------------------------------------------- */
.app-sidebar .offcanvas-lg {
  --bs-offcanvas-width: 280px;
  --bs-offcanvas-bg: var(--app-sidebar-bg);
  --bs-offcanvas-color: var(--app-sidebar-color);
  --bs-offcanvas-border-color: transparent;
}
.app-sidebar .offcanvas-body { display: flex; flex-direction: column; gap: 1rem; padding: 1rem .75rem; }
.app-sidebar .offcanvas-header { padding: 1rem 1.25rem .25rem; }

@media (min-width: 992px) {
  .app-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 1030;
    width: var(--app-sidebar-w);
    background: var(--app-sidebar-bg);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .app-sidebar .offcanvas-lg { height: 100%; }
  .app-sidebar .offcanvas-body { height: 100%; padding: 1.25rem .875rem; }
  .app-main { margin-left: var(--app-sidebar-w); }
}

.app-main { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; min-width: 0; }

.app-topbar {
  position: sticky; top: 0; z-index: 1020;
  height: var(--app-topbar-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem;
  background: var(--app-topbar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--app-border);
}
.app-topbar .topbar-fecha { display: inline-block; font-size: .875rem; color: var(--bs-secondary-color); }
.app-topbar .topbar-fecha::first-letter { text-transform: uppercase; }
.btn-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0;
  border-radius: var(--app-radius-sm);
  border: 1px solid transparent;
  color: var(--bs-body-color);
  background: transparent;
  font-size: 1.15rem;
}
.btn-icono:hover, .btn-icono[aria-expanded=true] { background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); }

.app-content {
  flex: 1;
  width: 100%;
  max-width: 1600px;
  padding: 1.25rem 1rem 2.5rem;
}
@media (min-width: 768px) { .app-content { padding: 1.5rem 1.5rem 3rem; } .app-topbar { padding: 0 1.5rem; } }
@media (min-width: 1200px) { .app-content { padding: 2rem 2rem 3rem; } .app-topbar { padding: 0 2rem; } }

.con-bottom-nav .app-content { padding-bottom: calc(var(--app-bottom-nav-h) + 2rem + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { .con-bottom-nav .app-content { padding-bottom: 3rem; } }

/* --- Marca y sidebar ----------------------------------------------------- */
.marca { display: flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; font-weight: 700; letter-spacing: -.01em; }
.marca-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  border-radius: .65rem;
  background: linear-gradient(135deg, #6366f1, #4f46e5 55%, #7c3aed);
  color: #fff; font-size: 1.15rem;
  box-shadow: 0 4px 12px rgba(79, 70, 229, .35);
}
.marca-texto small { display: block; font-weight: 500; font-size: .72rem; opacity: .65; letter-spacing: 0; }
.app-sidebar .marca { color: #fff; padding: .25rem .5rem .75rem; }

.sidebar-nav { display: flex; flex-direction: column; gap: .125rem; flex: 1; }
.sidebar-seccion {
  margin: 1rem .75rem .35rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--app-sidebar-muted);
}
.sidebar-seccion:first-child { margin-top: 0; }
.sidebar-link {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .75rem;
  min-height: 2.5rem;
  border-radius: var(--app-radius-sm);
  color: var(--app-sidebar-color);
  text-decoration: none;
  font-size: .9rem; font-weight: 500;
  transition: background-color .15s, color .15s;
}
.sidebar-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; opacity: .85; }
.sidebar-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar-link.active { background: rgba(99, 102, 241, .18); color: #fff; }
.sidebar-link.active i { color: #a5b4fc; opacity: 1; }
.sidebar-link.active::before {
  content: ""; position: absolute; left: -.875rem; top: .5rem; bottom: .5rem;
  width: 3px; border-radius: 0 3px 3px 0; background: #818cf8;
}
.sidebar-usuario {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem; border-radius: var(--app-radius);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
}
.sidebar-usuario .nombre { color: #fff; font-weight: 600; font-size: .875rem; line-height: 1.2; }
.sidebar-usuario .rol { font-size: .75rem; color: var(--app-sidebar-muted); }

.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
  font-weight: 600; font-size: .8rem; text-transform: uppercase;
}
.avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }

/* --- Barra inferior (conductor y solicitante en celular) ----------------- */
.bottom-nav {
  position: fixed; inset: auto 0 0 0; z-index: 1030;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--app-topbar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--app-border);
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  color: var(--bs-secondary-color); text-decoration: none;
  font-size: .68rem; font-weight: 500;
}
.bottom-nav a i { font-size: 1.3rem; line-height: 1; }
.bottom-nav a.active { color: var(--app-primary-text); }
.bottom-nav a.active i { transform: translateY(-1px); }

/* --- Encabezado de página ------------------------------------------------ */
.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: .75rem 1rem; margin-bottom: 1.25rem;
}
.page-title { font-size: 1.4rem; margin: 0; }
.page-subtitle { margin: .25rem 0 0; color: var(--bs-secondary-color); font-size: .9rem; max-width: 70ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (min-width: 768px) { .page-title { font-size: 1.65rem; } }
@media (max-width: 575.98px) {
  .page-actions { width: 100%; }
  .page-actions > .btn, .page-actions > form { flex: 1 1 auto; }
  .page-actions > form .form-control { width: 100%; }
}
.volver { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--bs-secondary-color); text-decoration: none; margin-bottom: .5rem; }
.volver:hover { color: var(--app-primary-text); }

/* --- Tarjetas ------------------------------------------------------------ */
.card {
  --bs-card-border-color: var(--app-border);
  --bs-card-border-radius: var(--app-radius);
  --bs-card-inner-border-radius: calc(var(--app-radius) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: .9rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
  box-shadow: var(--app-shadow-sm);
}
.card:has(> .table-responsive), .card:has(> .list-group) { overflow: hidden; }
.card-header {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--bs-emphasis-color);
}
.card-header .card-header-icono { color: var(--app-primary-text); }
.card-header .ms-auto { font-weight: 400; }
.card-titulo { font-size: 1rem; font-weight: 600; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }

.kpi .card-body { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; }
.kpi-icono {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.75rem; height: 2.75rem; border-radius: .7rem; font-size: 1.25rem;
}
.kpi .card-body > div { min-width: 0; }
.kpi .valor { font-size: clamp(1.15rem, 1.4vw, 1.5rem); overflow-wrap: anywhere; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--bs-emphasis-color); font-variant-numeric: tabular-nums; }
.kpi .etiqueta { color: var(--bs-secondary-color); font-size: .8rem; margin-top: .15rem; }
@media (max-width: 575.98px) {
  .kpi .card-body { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .9rem; }
  .kpi .valor { font-size: 1.25rem; }
  .kpi-icono { width: 2.25rem; height: 2.25rem; font-size: 1.05rem; }
}

.vacio { text-align: center; color: var(--bs-secondary-color); padding: 2rem 1rem; }
.vacio i { display: block; font-size: 1.75rem; margin-bottom: .4rem; opacity: .6; }

/* --- Botones y formularios ----------------------------------------------- */
.btn { --bs-btn-font-weight: 500; --bs-btn-padding-x: .9rem; }
.btn-sm { --bs-btn-padding-x: .65rem; }
.btn-primary {
  --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-bg: var(--app-primary-active); --bs-btn-active-border-color: var(--app-primary-active);
  --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  box-shadow: 0 1px 2px rgba(79, 70, 229, .25);
}
.btn-outline-primary {
  --bs-btn-color: var(--app-primary-text); --bs-btn-border-color: var(--bs-primary-border-subtle);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--app-primary-active); --bs-btn-active-border-color: var(--app-primary-active);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: var(--bs-emphasis-color); --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-border-color: var(--bs-border-color);
  background: var(--bs-body-bg);
}
.btn-link { --bs-btn-color: var(--bs-link-color); --bs-btn-hover-color: var(--bs-link-hover-color); text-decoration: none; }
.btn-xl { padding: .95rem 1.25rem; font-size: 1.05rem; font-weight: 600; border-radius: var(--app-radius); }
.btn-xl i { margin-right: .35rem; }

.form-control, .form-select { border-color: var(--bs-border-color); }
.form-control:focus, .form-select:focus {
  border-color: rgba(var(--bs-primary-rgb), .55);
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-check-input:focus { border-color: rgba(var(--bs-primary-rgb), .55); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-label { font-weight: 500; font-size: .875rem; margin-bottom: .35rem; }
.form-text { font-size: .8rem; }
.asteriskField { color: var(--bs-danger); margin-left: .15rem; }
@media (max-width: 767.98px) {
  /* 16px evita el zoom automático de iOS al enfocar un campo. */
  .form-control, .form-select { font-size: 1rem; }
  .form-control-sm, .form-select-sm { font-size: .95rem; }
}
.input-icono { position: relative; }
.input-icono > i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; }
.input-icono > .form-control { padding-left: 2.1rem; }

.form-acciones { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .5rem; }
@media (max-width: 575.98px) {
  .form-acciones { flex-direction: column-reverse; }
  .form-acciones > .btn { width: 100%; }
}

.pagination {
  --bs-pagination-color: var(--bs-body-color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-hover-color: var(--app-primary-text);
  --bs-pagination-hover-bg: var(--bs-secondary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
  --bs-pagination-active-bg: var(--app-primary);
  --bs-pagination-active-border-color: var(--app-primary);
  --bs-pagination-disabled-bg: var(--bs-body-bg);
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
}
.dropdown-menu {
  --bs-dropdown-border-color: var(--app-border);
  --bs-dropdown-border-radius: var(--app-radius);
  --bs-dropdown-link-active-bg: var(--app-primary);
  --bs-dropdown-item-padding-y: .45rem;
  --bs-dropdown-padding-x: .35rem;
  --bs-dropdown-padding-y: .35rem;
  box-shadow: var(--app-shadow-md);
}
.dropdown-item { border-radius: .4rem; display: flex; align-items: center; gap: .6rem; }
.dropdown-item i { width: 1.1rem; text-align: center; }

.alert { border-radius: var(--app-radius); display: flex; align-items: flex-start; gap: .65rem; }
.alert > .bi { font-size: 1.1rem; line-height: 1.35; }
.alert-dismissible { padding-right: 3rem; }

.modal { --bs-modal-border-radius: var(--app-radius); --bs-modal-border-color: var(--app-border); }
.modal-header, .modal-footer { border-color: var(--app-border); }
/* Formularios que envuelven header/body/footer del modal (tanqueo por HTMX). */
.modal-content > form { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.modal-dialog-scrollable .modal-content > form { overflow: hidden; }
.modal-dialog-scrollable .modal-content > form > .modal-body { overflow-y: auto; }

/* --- Tablas -------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .04);
  --bs-table-border-color: var(--app-border);
  margin-bottom: 0;
}
.table td, .table th { vertical-align: middle; }
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table-sm > :not(caption) > * > * { padding: .5rem .6rem; }
.table > thead th {
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
  border-bottom-width: 1px;
}
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
.table > tfoot > tr > * { background: var(--bs-tertiary-bg); font-weight: 600; border-top: 1px solid var(--app-border); border-bottom-width: 0; }
.card .table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
.card .table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }
.table a { font-weight: 500; text-decoration: none; }
.table a:hover { text-decoration: underline; }
.table-danger {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: rgba(var(--bs-danger-rgb), .08);
  --bs-table-border-color: var(--app-border);
  --bs-table-hover-bg: rgba(var(--bs-danger-rgb), .12);
  --bs-table-hover-color: var(--bs-body-color);
}
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* En celular las filas de .table-stack se vuelven tarjetas; app.js copia
   el encabezado de cada columna en data-label. */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tfoot, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack > tbody > tr, .table-stack > tfoot > tr { padding: .75rem 1rem; border-bottom: 1px solid var(--app-border); }
  .table-stack > tbody > tr:last-child { border-bottom: 0; }
  .table.table-stack > :not(caption) > * > * {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .3rem 0 !important; border: 0; text-align: right !important;
    box-shadow: none; background: transparent;
  }
  .table-stack td::before {
    content: attr(data-label);
    flex-shrink: 0; text-align: left;
    font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    color: var(--bs-secondary-color);
  }
  .table-stack td:not([data-label])::before, .table-stack td[data-label=""]::before { display: none; }
  .table-stack td:not([data-label]), .table-stack td[data-label=""] { justify-content: flex-end; }
  .table.table-stack td.td-completa { display: block; text-align: center !important; }
  .table.table-stack > tbody > tr > td:first-child { font-weight: 600; }
  .table-stack > tbody > tr:hover > * { --bs-table-bg-state: transparent; }
  .table-stack form.d-flex { justify-content: flex-end; }
}

/* --- Estados ------------------------------------------------------------- */
.estado-PROGRAMADO, .evento-estado-PROGRAMADO { --e: var(--e-prog); --e-bg: var(--e-prog-bg); --e-fg: var(--e-prog-fg); }
.estado-EN_CURSO, .evento-estado-EN_CURSO { --e: var(--e-curso); --e-bg: var(--e-curso-bg); --e-fg: var(--e-curso-fg); }
.estado-FINALIZADO, .evento-estado-FINALIZADO { --e: var(--e-fin); --e-bg: var(--e-fin-bg); --e-fg: var(--e-fin-fg); }
.estado-CANCELADO, .evento-estado-CANCELADO { --e: var(--e-canc); --e-bg: var(--e-canc-bg); --e-fg: var(--e-canc-fg); }

.badge-estado {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3em .65em; border-radius: 999px;
  background: var(--e-bg); color: var(--e-fg);
  font-weight: 600; font-size: .75rem; letter-spacing: .01em;
  white-space: nowrap; vertical-align: middle;
}
.badge-estado::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--e); }
.estado-EN_CURSO.badge-estado::before { animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .35; } }
.badge { font-weight: 600; }

/* Pasos del ciclo de un viaje en el detalle. */
.pasos { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.pasos li { flex: 1; display: flex; flex-direction: column; gap: .4rem; font-size: .78rem; color: var(--bs-secondary-color); font-weight: 500; }
.pasos li::before { content: ""; height: 4px; border-radius: 4px; background: var(--bs-secondary-bg); }
.pasos li.hecho { color: var(--bs-body-color); }
.pasos li.hecho::before { background: var(--app-primary); }
.pasos li.cancelado::before { background: var(--e-canc); }

.detalle-lista { display: grid; grid-template-columns: 1fr; gap: 1rem 1.5rem; margin: 0; }
@media (min-width: 576px) { .detalle-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.detalle-lista dt { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .2rem; }
.detalle-lista dd { margin: 0; word-break: break-word; }
.detalle-lista .completo { grid-column: 1 / -1; }

/* Fecha tipo chip para listas de viajes. */
.chip-fecha {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
  width: 3.25rem; height: 3.25rem; border-radius: .75rem;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
  line-height: 1;
}
.chip-fecha .dia { font-size: 1.2rem; font-weight: 700; }
.chip-fecha .mes { font-size: .68rem; text-transform: uppercase; font-weight: 600; margin-top: .2rem; }

.tarjeta-actividad { border: 1px solid rgba(var(--bs-warning-rgb), .45); box-shadow: 0 0 0 4px rgba(var(--bs-warning-rgb), .08), var(--app-shadow-sm); }
.tarjeta-actividad > .card-header { background: rgba(var(--bs-warning-rgb), .12); }

.saludo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.pastilla {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem; border-radius: 999px;
  background: var(--bs-secondary-bg); font-size: .8rem; font-weight: 500;
}

/* --- Filtros ------------------------------------------------------------- */
.filtro-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: .85rem 1.25rem; border: 0; background: transparent;
  color: var(--bs-emphasis-color); font-weight: 600;
}
.filtro-toggle .bi-chevron-down { transition: transform .2s; }
.filtro-toggle[aria-expanded=true] .bi-chevron-down { transform: rotate(180deg); }
.filtro .form-label { font-size: .78rem; color: var(--bs-secondary-color); }
/* Los filtros llegan como -sm desde el servidor; se igualan a los botones. */
.filtro .form-control-sm, .filtro .form-select-sm { padding-top: .375rem; padding-bottom: .375rem; font-size: inherit; border-radius: var(--bs-border-radius); }
.filtro .form-select-sm { padding-left: .75rem; }

/* --- Calendario (FullCalendar) ------------------------------------------- */
.fc {
  --fc-border-color: var(--app-border);
  --fc-page-bg-color: var(--bs-body-bg);
  --fc-neutral-bg-color: var(--bs-tertiary-bg);
  --fc-neutral-text-color: var(--bs-secondary-color);
  --fc-list-event-hover-bg-color: var(--bs-tertiary-bg);
  --fc-today-bg-color: rgba(var(--bs-primary-rgb), .07);
  --fc-highlight-color: rgba(var(--bs-primary-rgb), .14);
  --fc-button-text-color: var(--bs-body-color);
  --fc-button-bg-color: var(--bs-body-bg);
  --fc-button-border-color: var(--bs-border-color);
  --fc-button-hover-bg-color: var(--bs-secondary-bg);
  --fc-button-hover-border-color: var(--bs-border-color);
  --fc-button-active-bg-color: var(--bs-primary-bg-subtle);
  --fc-button-active-border-color: var(--bs-primary-border-subtle);
  --fc-event-text-color: #fff;
  --fc-more-link-bg-color: transparent;
  --fc-more-link-text-color: var(--app-primary-text);
  font-size: .875rem;
}
.calendario-caja {
  background: var(--bs-body-bg);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-sm);
  padding: 1rem;
}
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 1rem; gap: .5rem; flex-wrap: wrap; }
.fc .fc-toolbar-title { font-size: 1.2rem; font-weight: 650; color: var(--bs-emphasis-color); }
.fc .fc-toolbar-title::first-letter, .fc .fc-list-day-text::first-letter { text-transform: uppercase; }
.fc .fc-button { font-size: .82rem; font-weight: 500; padding: .4rem .7rem; border-radius: var(--app-radius-sm); text-transform: capitalize; box-shadow: none !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { color: var(--bs-primary-text-emphasis); }
.fc .fc-button-group > .fc-button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.fc .fc-button-group > .fc-button:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.fc .fc-button:focus-visible { outline: 2px solid var(--app-primary); }
.fc .fc-col-header-cell-cushion { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-secondary-color); padding: .5rem .25rem; text-decoration: none; }
.fc .fc-daygrid-day-number { font-size: .8rem; font-weight: 500; color: var(--bs-body-color); text-decoration: none; padding: .35rem .5rem; }
.fc .fc-day-today .fc-daygrid-day-number {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem;
  margin: .2rem; padding: 0 .3rem; border-radius: 999px; background: var(--app-primary); color: #fff;
}
.fc .fc-daygrid-day.fc-day-past { background: var(--bs-tertiary-bg); }
.fc .fc-daygrid-day.fc-day-past .fc-daygrid-day-number { color: var(--bs-secondary-color); }
.fc .fc-scrollgrid { border-radius: var(--app-radius-sm); overflow: hidden; }
.fc .fc-list { border-radius: var(--app-radius-sm); overflow: hidden; }
.fc .fc-list-day-cushion { background: var(--bs-tertiary-bg); }
.fc .fc-list-day-text { display: inline-block; }
.fc .fc-list-day-text, .fc .fc-list-day-side-text { color: var(--bs-emphasis-color); text-decoration: none; font-weight: 600; }
.fc .fc-more-link { font-weight: 600; font-size: .75rem; }
.fc-event { cursor: pointer; }
.fc .fc-daygrid-event { border-radius: .375rem; margin-top: 2px; }
.fc .evento-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .05rem .35rem; font-size: .8rem; }
/* Colores de estado desde el tema; FullCalendar los pone en línea. */
.fc .fc-daygrid-event.evento-viaje, .fc .fc-timegrid-event.evento-viaje {
  background-color: var(--e) !important; border-color: var(--e) !important;
}
.fc .fc-daygrid-event.evento-recorrido, .fc .fc-timegrid-event.evento-recorrido {
  background-color: var(--e-bg) !important; border-color: var(--e) !important; border-left-width: 4px;
}
.fc .evento-recorrido .fc-event-main { color: var(--e-fg) !important; }
.fc .fc-list-event-dot { border-color: var(--e, var(--app-primary)) !important; }
.fc .evento-estado-FINALIZADO { opacity: .75; }
.fc .evento-estado-CANCELADO .evento-titulo { text-decoration: line-through; }
.fc .fc-list-event:hover td { background: var(--fc-list-event-hover-bg-color); }
@media (max-width: 575.98px) {
  .calendario-caja { padding: .65rem; margin-inline: -.25rem; }
  .fc .fc-toolbar.fc-header-toolbar { display: grid; grid-template-columns: 1fr auto; }
  .fc .fc-toolbar-chunk:nth-child(2) { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .fc .fc-toolbar-title { font-size: 1.05rem; }
  .fc .fc-button { padding: .45rem .6rem; }
  .fc .evento-titulo { font-size: .7rem; padding: 0 .2rem; }
  .fc .evento-titulo .bi { display: none; }
}

.leyenda-estados .muestra { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.1rem; border-radius: .3rem; margin-right: .35rem; font-size: .7rem; vertical-align: middle; }
.leyenda-estados .muestra-viaje { background: var(--e-prog); color: #fff; }
.leyenda-estados .muestra-recorrido { background: var(--e-curso-bg); color: var(--e-curso-fg); border: 1px solid var(--e-curso); border-left-width: 4px; }
.leyenda-estados .separador { width: 1px; height: 1rem; background: var(--app-border); }
.leyenda-estados .punto { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; background: var(--e); }

.filtros-calendario { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtros-calendario .btn-check + .btn { border-radius: 999px; font-size: .8rem; }
.filtros-calendario .btn-check:checked + .btn {
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border-color: var(--bs-primary-border-subtle);
}

.panel-sticky { position: sticky; top: calc(var(--app-topbar-h) + 1rem); }

.popover { --bs-popover-border-color: var(--app-border); --bs-popover-border-radius: var(--app-radius); --bs-popover-header-bg: var(--bs-tertiary-bg); box-shadow: var(--app-shadow-md); }
.popover-viaje { max-width: 300px; font-size: .85rem; }
.popover-viaje dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; }
.popover-viaje dt { color: var(--bs-secondary-color); font-weight: 500; }
.popover-viaje dd { margin: 0; word-break: break-word; }

/* Conductores disponibles. */
.conductor-card { transition: background-color .15s; }
.conductor-card:hover { background: var(--bs-tertiary-bg); }

/* --- Gráficos ------------------------------------------------------------ */
.grafico-caja { position: relative; height: 260px; }
@media (min-width: 768px) { .grafico-caja { height: 320px; } }

/* --- Ingreso ------------------------------------------------------------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .auth { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.auth-marca {
  position: relative; overflow: hidden;
  flex-direction: column; justify-content: space-between;
  padding: 3rem;
  color: #e0e7ff;
  background:
    radial-gradient(circle at 15% 20%, rgba(129, 140, 248, .45), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(124, 58, 237, .45), transparent 40%),
    linear-gradient(160deg, #1e1b4b, #0f172a 70%);
}
.auth-marca .marca { color: #fff; font-size: 1.1rem; }
.auth-marca h2 { color: #fff; font-size: 2.25rem; font-weight: 700; line-height: 1.15; max-width: 16ch; }
.auth-marca ul { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .85rem; }
.auth-marca li { display: flex; align-items: center; gap: .75rem; }
.auth-marca li i { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .6rem; background: rgba(255, 255, 255, .1); }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.auth-form .contenido { width: 100%; max-width: 380px; }
.auth-form .btn-primary { padding: .7rem 1rem; }

.app-mensajes { padding: 1rem 1rem 0; }

/* --- TomSelect en ambos temas -------------------------------------------- */
.ts-wrapper .ts-control, .ts-wrapper.single.input-active .ts-control, .ts-dropdown {
  background: var(--bs-body-bg) !important; color: var(--bs-body-color); border-color: var(--bs-border-color);
}
.ts-wrapper .ts-control input { color: var(--bs-body-color); }
.ts-wrapper.focus .ts-control { border-color: rgba(var(--bs-primary-rgb), .55); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.ts-dropdown { border-radius: var(--app-radius-sm); box-shadow: var(--app-shadow-md); }
.ts-dropdown .active { background: var(--bs-primary-bg-subtle) !important; color: var(--bs-primary-text-emphasis) !important; }

/* --- Accesibilidad e impresión ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .app-sidebar, .app-topbar, .bottom-nav, .page-actions, .filtro, .btn { display: none !important; }
  .app-main { margin: 0 !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}