/* ============================================================================
   historico-viajes - estructura de la replica original (replicador-web-integral/historico-viajes/replica-test)
   re-pintada con la paleta de Vector GPS
   ============================================================================ */
:root {
  --wire-paper: #ffffff;
  --wire-ink: #26313d;
  --wire-line: #bfcbd6;
  --wire-soft-line: #cfd9e2;
  --wire-muted: #f4f7f9;
  --wire-soft: #f4f7f9;
  --wire-selected: #cfd9e2;
  --wire-header: #26313d;
  --wire-error: #26313d;
  --wire-ecm: #607080;
  --wire-label: #26313d;
  --wire-metric: #607080;
  --wire-origin: #607080;
  --wire-destination: #26313d;
  --wire-drive: #26313d;
  --wire-idle: #bfcbd6;
  --wire-off: #26313d;
  --wire-chart-fill: #f4f7f9;
}

* {
  box-sizing: border-box;
  border-radius: 0;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 320px;
  margin: 0;
  overflow: hidden;
  color: var(--wire-ink);
  background: var(--wire-paper);
}

html {
  font-size: 16px;
}

body {
  font: 14px/1.35 Roboto,Arial,sans-serif;
}

button {
  color: inherit;
  background: var(--wire-paper);
  border:1px solid var(--wire-line);
  font: inherit;
  cursor: pointer;
}

button:hover {
  background: var(--wire-muted);
}

button:focus-visible,
[tabindex]:focus-visible {
  outline:2px solid #bfcbd6;
  outline-offset: -2px;
}

button:disabled {
  color: var(--wire-line);
  cursor: not-allowed;
}

#tripHistoryApp {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}

#historyLayout {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 5fr);
  width: 100%;
  height: 100%;
  min-height: 0;
}

#contentColumn {
  display: grid;
  grid-template-rows: 65fr 35fr;
  min-width: 0;
  min-height: 0;
}

#bottomRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  min-width: 0;
  min-height: 0;
}

.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border:1px solid var(--wire-line);
  background: var(--wire-soft);
}

#unitsPanel {
  border-left:0;
  border-top:0;
  border-bottom:0;
}

#reportPanel {
  border-top:0;
  border-right:0;
}

#tripsPanel {
  border-left:0;
  border-bottom:0;
}

#drivePanel {
  border-right:0;
  border-bottom:0;
}

.panel-title {
  flex: 0 0 auto;
  min-height: 30px;
  margin: 0;
  padding: 3px 10px;
  color: var(--wire-paper);
  background: var(--wire-header);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.panel-title.centered {
  text-align: center;
}

.panel-title span {
  display: inline-block;
  width: 22px;
  text-align: center;
}

.panel-scroll {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.unit-list {
  flex: 1 1 auto;
}

.unit-button {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  overflow-wrap: anywhere;
  text-align: left;
  border-width: 0 0 1px;
  border-color:var(--wire-soft-line);
}

.unit-button[aria-current="true"] {
  background: var(--wire-selected);
  border-left:4px solid #bfcbd6;
  padding-left: 8px;
}

.empty-message {
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  min-height: 80px;
  margin: 0;
  padding: 16px;
  text-align: center;
}

.report-scroll {
  flex: 1 1 auto;
  background: var(--wire-paper);
}

#reportTable {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}

#reportTable th,
#reportTable td {
  min-height: 34px;
  padding: 7px 8px;
  overflow-wrap: anywhere;
  vertical-align: top;
  text-align: left;
  border:1px solid var(--wire-soft-line);
}

#reportTable tr:nth-child(odd):not(.section-row) {
  background: var(--wire-muted);
}

.metric-label {
  display: inline-block;
  margin-right: 5px;
  color: var(--wire-metric);
  font-weight: 700;
}

.identity-label {
  display: inline-block;
  margin-right: 5px;
  color: var(--wire-label);
  font-weight: 700;
}

.section-row th {
  color: var(--wire-paper);
  background: var(--wire-ecm);
  text-align: center !important;
}

.section-row.alerts th {
  background: var(--wire-error);
}

.alert-empty {
  text-align: center !important;
}

.trip-list {
  flex: 1 1 auto;
  padding: 8px;
}

.trip-card {
  display: block;
  width: 100%;
  min-height: 96px;
  margin: 0 0 8px;
  padding: 8px;
  text-align: left;
  border:1px solid var(--wire-soft-line);
  background: var(--wire-paper);
}

.trip-card[aria-selected="true"] {
  outline:3px solid #bfcbd6;
  outline-offset: -3px;
}

.trip-time,
.trip-place {
  display: block;
  margin-bottom: 4px;
}

.trip-time .separator {
  padding: 0 4px;
  color: var(--wire-line);
}

.trip-place.origin::before {
  content: "\25B6";
  margin-right: 6px;
  color: var(--wire-origin);
}

.trip-place.destination::before {
  content: "\25A0";
  margin-right: 6px;
  color: var(--wire-destination);
}

.chart-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--wire-paper);
}

#driveChart {
  display: block;
  width: 100%;
  height: 100%;
}

.chart-tooltip {
  position: absolute;
  z-index: 2;
  max-width: 230px;
  padding: 5px 7px;
  pointer-events: none;
  color: var(--wire-paper);
  background: var(--wire-ink);
  border:1px solid var(--wire-paper);
  font-size: 12px;
}

.full-state {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  background: var(--wire-paper);
  text-align: center;
}

.full-state p {
  margin: 0;
}

.full-state button {
  min-width: 100px;
  min-height: 32px;
  padding: 5px 12px;
}

.spinner {
  width: 7rem;
  height: 7rem;
  border:0.4rem solid var(--wire-muted);
  border-top-color:#bfcbd6;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border:0;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

@media (max-width: 700px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #tripHistoryApp {
    min-height: 100vh;
  }

  #historyLayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 190px auto;
    height: auto;
  }

  #contentColumn {
    display: grid;
    grid-template-rows: 560px auto;
  }

  #bottomRow {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 330px 330px;
  }

  #unitsPanel,
  #reportPanel,
  #tripsPanel,
  #drivePanel {
    border:1px solid var(--wire-line);
  }

  #reportTable {
    min-width: 820px;
  }
}

/* ============================================================================
   Capa Vector GPS (colores, bordes y estados) - no altera el layout original
   Referencia: GUIA_ESTILOS_UI.md
   ============================================================================ */
:root {
  --v-primary: #0f8995; --v-primary-border: #0d7d88; --v-primary-dark: #0a6670;
  --v-primary-tint: #e6f4f5; --v-primary-ring: rgba(15, 137, 149, .18);
  --v-danger: #dc3545; --v-danger-dark: #bd2130; --v-success: #28a745; --v-success-dark: #1e8a37;
  --v-text: #26313d; --v-title: #1f2a35; --v-muted: #607080; --v-label: #485664;
  --v-border: #cfd9e2; --v-input-border: #bfcbd6; --v-th-bg: #f4f7f9; --v-input-bg: #f9fbfc;
  --v-shadow-pop: 0 12px 24px rgba(26, 36, 44, .22);
}

html, body { font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif; color: var(--v-text); }
a { color: var(--v-primary); }
h1, h2, h3 { color: var(--v-title); }

button {
  border-color: var(--v-input-border);
  border-radius: 6px;
  background-color: #fff;
  color: var(--v-label);
  font-weight: 600;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
button:hover:not(:disabled) { color: var(--v-primary); border-color: var(--v-primary); background-color: var(--v-primary-tint); }
button:disabled { opacity: .5; color: #9aa6b2; background-color: #f4f7f9; border-color: #d8e0e6; cursor: not-allowed; }

button:is([id*="save" i],[id*="create" i],[id*="crear" i],[id*="guardar" i],[id*="accept" i],[id*="aceptar" i],[id*="apply" i],[id*="send" i],[id*="enviar" i],[id*="agregar" i],[id*="add" i],[id*="submit" i],[id*="filter" i]):not(:disabled) { color: #fff; background-color: var(--v-primary); border-color: var(--v-primary-border); }
button:is([id*="save" i],[id*="create" i],[id*="crear" i],[id*="guardar" i],[id*="accept" i],[id*="aceptar" i],[id*="apply" i],[id*="send" i],[id*="enviar" i],[id*="agregar" i],[id*="add" i],[id*="submit" i],[id*="filter" i]):hover:not(:disabled) { color: #fff; background-color: var(--v-primary-dark); border-color: var(--v-primary-dark); }

button:is([id*="edit" i],[id*="editar" i]):not(:disabled) { color: var(--v-primary); border-color: var(--v-primary); }

button:is([id*="delete" i],[id*="remove" i],[id*="borrar" i],[id*="eliminar" i]):not(:disabled) { color: var(--v-danger); border-color: #e3a0a8; background-color: #fff5f6; }
button:is([id*="delete" i],[id*="remove" i],[id*="borrar" i],[id*="eliminar" i]):hover:not(:disabled) { color: #fff; border-color: var(--v-danger); background-color: var(--v-danger); }

button:is([id*="excel" i],[id*="download" i],[id*="export" i],[id*="csv" i],[id*="descargar" i]):not(:disabled) { color: #fff; background-color: var(--v-success); border-color: var(--v-success); }
button:is([id*="excel" i],[id*="download" i],[id*="export" i],[id*="csv" i],[id*="descargar" i]):hover:not(:disabled) { color: #fff; background-color: var(--v-success-dark); border-color: var(--v-success-dark); }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="row"]:focus-visible {
  outline: 2px solid var(--v-primary);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea {
  border-color: var(--v-input-border);
  border-radius: 6px;
  background-color: var(--v-input-bg);
  color: var(--v-text);
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: var(--v-primary); box-shadow: 0 0 0 3px var(--v-primary-ring); }
input:disabled, select:disabled, textarea:disabled { color: #8a97a4; background-color: #f1f4f6; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--v-primary); }

fieldset { border-color: var(--v-border); border-radius: 8px; }
legend { color: var(--v-primary); font-weight: 700; }

th, [role="columnheader"] { background-color: var(--v-th-bg); color: #536171; font-weight: 700; }

tr[aria-selected="true"], [role="row"][aria-selected="true"], [role="option"][aria-selected="true"], tr.selected, [role="row"].selected,
[class*="row"].selected, [class*="item"].selected, [class*="row"][aria-selected="true"], [class*="item"][aria-selected="true"] {
  background-color: var(--v-primary-tint);
  box-shadow: inset 4px 0 0 var(--v-primary);
  outline: none;
}
tbody tr:hover, [role="grid"] [role="row"]:hover { background-color: rgba(15, 137, 149, .07); }
tr[aria-selected="true"]:hover, tr.selected:hover, [role="row"][aria-selected="true"]:hover { background-color: var(--v-primary-tint); }

dialog {
  border: 1px solid var(--v-border);
  border-top: 4px solid var(--v-primary);
  border-radius: 8px;
  background: #fff;
  color: var(--v-text);
  box-shadow: var(--v-shadow-pop);
}
dialog:not([open]) { display: none !important; }
dialog::backdrop { background: rgba(26, 36, 44, .5); }

/* Botones dentro de encabezados de tabla: sin caja */
th button, [role="columnheader"] button { background-color: transparent; border-color: transparent; box-shadow: none; color: inherit; }
th button:hover:not(:disabled), [role="columnheader"] button:hover:not(:disabled) { background-color: rgba(15, 137, 149, .10); border-color: transparent; color: var(--v-primary); }
/* Estado activo / seleccionado en botones (pestañas, filtros, categorías) */
button[aria-pressed="true"]:not(:disabled), button[aria-selected="true"]:not(:disabled), button.active:not(:disabled), button.selected:not(:disabled) {
  color: var(--v-primary-dark); background-color: var(--v-primary-tint); border-color: var(--v-primary); box-shadow: none;
}

/* v2: dialogos al nivel de Alertas */
html, body { background: #eef2f5; }
/* Diálogos con encabezado */
dialog { padding: 0 0 14px !important; overflow: auto; }
dialog > :not(header):not(h1:first-child):not(h2:first-child) { margin-left: 16px; margin-right: 16px; }
dialog > header, dialog > h1:first-child, dialog > h2:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px !important;
  padding: 9px 14px !important;
  font: 700 13px/1.45 Roboto, Arial, sans-serif !important;
  color: #fff !important;
  background: #343a40 !important;
  border: 0 !important;
  border-bottom: 3px solid var(--v-primary) !important;
}
dialog > header h2, dialog > header h1 { margin: 0 !important; padding: 0 !important; font: 700 13px/1.45 Roboto, Arial, sans-serif !important; color: #fff !important; background: transparent !important; border: 0 !important; }
dialog > header button { min-height: 26px; padding: 0 9px; color: #fff; background: transparent; border-color: rgba(255, 255, 255, .4); }
dialog > header button:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .16); border-color: #fff; }
dialog[id*="confirm" i] { border-top-color: var(--v-danger); }
dialog[id*="confirm" i] > h1:first-child, dialog[id*="confirm" i] > h2:first-child, dialog[id*="confirm" i] > header { border-bottom-color: var(--v-danger); }

/* v2: bandas de panel */
.panel-title, .panel-title h1, .panel-title h2, .panel-title span {
  color: #fff !important;
}
.panel-title {
  background: #343a40 !important;
  border-bottom: 3px solid var(--v-primary) !important;
  border-top: 0 !important;
}

/* v3: tablas a ancho completo del contenedor */
table { width: 100%; }