/* ------------------------------------------------------------------
   Activos · Rastreo de Vehículos
   Paleta: tinta nocturna + acento teal de señal + ámbar de alerta
   Tipografía: Inter (interfaz) + JetBrains Mono (datos/placas/equipos)
-------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --ink-900:#131826;
  --ink-800:#1c2333;
  --ink-700:#2a3247;
  --paper:#f4f6f9;
  --paper-card:#ffffff;
  --line:#e2e6ee;
  --text-main:#1c2333;
  --text-muted:#6b7386;
  --teal:#0e8f88;
  --teal-dark:#0b6f6a;
  --amber:#e2792f;
  --red:#d1483f;
  --blue-on:#2f6fe2;

  --radius:8px;
  --shadow-card: 0 1px 2px rgba(19,24,38,.06), 0 8px 24px -12px rgba(19,24,38,.12);
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--text-main);
  font-family:'Inter', -apple-system, Segoe UI, sans-serif;
  -webkit-font-smoothing:antialiased;
}

.page{
  max-width:1400px;
  margin:0 auto;
  padding:28px 32px 64px;
}

.page__header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:20px;
}

.page__header h1{
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--ink-900);
  margin:0;
}

/* ---------------- Toolbar ---------------- */
.toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:20px;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:16px 20px;
  margin-bottom:14px;
}

.toolbar__filters{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-left:auto;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:170px;
}

.field label{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.field__control{
  appearance:none;
  border:1px solid var(--line);
  background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%236b7386'/></svg>") no-repeat right 12px center;
  border-radius:6px;
  padding:8px 30px 8px 10px;
  font-size:.88rem;
  color:var(--text-main);
  cursor:pointer;
}
.field__control:focus{
  outline:2px solid var(--teal);
  outline-offset:1px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  border-radius:6px;
  padding:10px 16px;
  font-size:.88rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, transform .05s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--primary{
  background:var(--teal);
  color:#fff;
}
.btn--primary:hover{ background:var(--teal-dark); }

.btn__icon{
  display:inline-block;
  font-size:1rem;
  line-height:1;
}
.btn--spin .btn__icon{
  animation:spin .6s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------------- Status bar (telemetry readout) ---------------- */
.status-bar{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.8rem;
  color:var(--text-muted);
  padding:2px 4px 12px;
}
.search-box{
  margin-left:auto;
}
.search-box input{
  border:1px solid var(--line);
  border-radius:6px;
  padding:7px 12px;
  font-size:.84rem;
  width:220px;
  background:var(--paper-card);
}
.search-box input:focus{
  outline:2px solid var(--teal);
  outline-offset:1px;
}
.status-bar .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 0 rgba(14,143,136,.5);
  animation:pulse 2s infinite;
  flex-shrink:0;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(14,143,136,.45); }
  70%{ box-shadow:0 0 0 7px rgba(14,143,136,0); }
  100%{ box-shadow:0 0 0 0 rgba(14,143,136,0); }
}
.status-bar.status-bar--error .dot{
  background:var(--red);
  animation:none;
}

/* ---------------- Table card ---------------- */
.table-wrap{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:8px 20px 20px;
}

table.tabla-activos{
  width:100%;
  border-collapse:collapse;
}

table.tabla-activos thead th{
  text-align:left;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
  border-bottom:2px solid var(--line);
  padding:12px 10px;
  white-space:nowrap;
}

table.tabla-activos tbody td{
  padding:11px 10px;
  font-size:.86rem;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  vertical-align:middle;
}

table.tabla-activos tbody tr:hover{
  background:#f0f7f6;
}

/* placa / equipo con tipografía monoespaciada, como un lector de telemetría */
td.col-mono{
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
  color:var(--ink-800);
}

.badge-cliente{
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  background:#eaf3f2;
  color:var(--teal-dark);
  font-size:.76rem;
  font-weight:600;
}

.speed{
  font-family:'JetBrains Mono', monospace;
  font-weight:600;
}
.speed--moving{ color:var(--teal-dark); }
.speed--idle{ color:var(--text-muted); }

/* Iconos de estado (GPS / Ignición), estilo señal de radar */
.status-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
}
.status-icon svg{ width:16px; height:16px; }

.icon-ok{ color:var(--teal); }
.icon-off{ color:var(--red); }
.icon-on-blue{ color:var(--blue-on); }

/* DataTables overrides para casar con la identidad */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
  font-size:.82rem;
  color:var(--text-muted);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--teal) !important;
  border-color:var(--teal) !important;
  color:#fff !important;
  border-radius:6px;
}
.dataTables_wrapper .dt-buttons{
  display:none; /* usamos nuestro propio selector "Exportar" */
}

/* ---------------- Columna de expandir "+" ---------------- */
td.dt-control{
  cursor:pointer;
  text-align:center;
}
.expand-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:5px;
  background:var(--teal);
  color:#fff;
}
.expand-toggle svg{
  width:12px;
  height:12px;
}
.expand-toggle .icon-minus{ display:none; }
tr.fila-expandida .expand-toggle{ background:var(--ink-800); }
tr.fila-expandida .expand-toggle .icon-plus{ display:none; }
tr.fila-expandida .expand-toggle .icon-minus{ display:inline-flex; }
tr.fila-expandida{
  background:#f0f7f6;
}

/* Punto de estado (bloqueado / activo) junto al cliente */
.estado-dot{
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  margin-right:7px;
  vertical-align:middle;
}
.estado-dot--ok{ background:var(--teal); }
.estado-dot--bloqueado{ background:var(--red); }

/* ---------------- Panel de detalle (fila hija) ---------------- */
.detalle{
  padding:16px 20px 18px 44px;
  background:#fbfcfd;
  border-top:1px dashed var(--line);
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:8px 28px;
  font-size:.85rem;
}

.detalle__ubicacion{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding-bottom:6px;
  margin-bottom:4px;
  border-bottom:1px solid var(--line);
}

.detalle__fila{
  white-space:normal;
}

.detalle__label{
  font-weight:600;
  color:var(--text-muted);
  margin-right:4px;
}

.detalle__valor{
  color:var(--text-main);
}

.badge-aviso{
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  background:#fdf1e7;
  color:var(--amber);
  font-size:.74rem;
  font-weight:600;
  white-space:nowrap;
}

.auto-refresh-text{
  color:var(--text-muted);
  font-size:.78rem;
}

.btn--ghost{
  background:transparent;
  color:var(--text-main);
  border:1px solid var(--line);
}
.btn--ghost:hover{ background:var(--paper); }

.btn--export{
  padding:8px 16px;
}

/* ---------------- Indicador persistente de exportación ---------------- */
.export-pill{
  display:none;
  align-items:center;
  gap:10px;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 14px;
  margin-bottom:12px;
  font-size:.82rem;
  color:var(--text-main);
  box-shadow:var(--shadow-card);
  max-width:520px;
}
.export-pill.is-open{
  display:flex;
}

.export-pill__spinner{
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid var(--line);
  border-top-color:var(--teal);
  animation:spin .7s linear infinite;
  flex-shrink:0;
}
.export-pill--listo .export-pill__spinner{
  border-top-color:var(--teal);
  animation:none;
  border-color:var(--teal);
}
.export-pill--error .export-pill__spinner{
  border-color:var(--red);
  border-top-color:var(--red);
  animation:none;
}

.export-pill__texto{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.export-pill__barra{
  flex:1;
  height:6px;
  min-width:60px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}
.export-pill__barra-fill{
  height:100%;
  width:0%;
  background:var(--teal);
  transition:width .3s ease;
}

.export-pill__descargar{
  color:var(--teal-dark);
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.export-pill__descargar:hover{ text-decoration:underline; }

.export-pill__cerrar{
  border:none;
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  font-size:.85rem;
  padding:2px 4px;
  flex-shrink:0;
}
.export-pill__cerrar:hover{ color:var(--text-main); }

/* ---------------- Modal de exportación ---------------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(19,24,38,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:20px;
}
.modal-overlay.is-open{
  display:flex;
}

.modal{
  background:#fff;
  border-radius:12px;
  padding:26px 28px;
  width:100%;
  max-width:440px;
  box-shadow:0 20px 60px -12px rgba(19,24,38,.35);
}

.modal h2{
  margin:0 0 8px;
  font-size:1.15rem;
  color:var(--ink-900);
}

.modal__hint{
  font-size:.85rem;
  color:var(--text-muted);
  margin:0 0 14px;
  line-height:1.5;
}
.modal__hint--small{ font-size:.78rem; }

.checkbox-line{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.88rem;
  color:var(--text-main);
  margin-bottom:6px;
  cursor:pointer;
}
.checkbox-line input{ width:16px; height:16px; accent-color:var(--teal); }

.modal__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
}

.progress-bar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
  margin:6px 0 4px;
}
.progress-bar__fill{
  height:100%;
  width:0%;
  background:var(--teal);
  transition:width .3s ease;
}

@media (max-width: 720px){
  .page{ padding:20px 14px 48px; }
  .toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar__filters{ margin-left:0; }
}