/* ---------------------------------------------------------------------------
 * Locali Design System tokens + app styles.
 * Ported from the Next.js app's globals.css, with Tailwind replaced by the
 * handful of semantic classes the SSR views actually use. Light is the
 * default theme; dark is opt-in via [data-theme="dark"] on <html>.
 * ------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand */
  --blue-50: #eef2ff;
  --blue-100: #dde6fe;
  --blue-200: #b9cbfd;
  --blue-300: #8aa6fa;
  --blue-400: #5c7ff3;
  --blue-500: #3b63ee;
  --blue-600: #2b53e8;
  --blue-700: #2141c4;
  --blue-800: #1d369b;
  --blue-900: #1a2e7a;
  --ink-900: #14181f;

  /* Neutrals */
  --gray-25: #fbfcfd;
  --gray-50: #f6f8fa;
  --gray-100: #eef1f5;
  --gray-200: #e3e7ed;
  --gray-300: #d0d6df;
  --gray-400: #a9b2c0;
  --gray-500: #7e8898;
  --gray-600: #5c6675;
  --gray-700: #434c5b;
  --gray-800: #2b3340;
  --gray-900: #1b212b;

  /* Semantic scales */
  --green-100: #dcf5e7;
  --green-500: #1f9d5b;
  --green-700: #157347;
  --amber-100: #fdf0d7;
  --amber-500: #e8960c;
  --amber-700: #b26f04;
  --red-100: #fde3e3;
  --red-500: #de3b3b;
  --red-700: #b32626;
  --violet-500: #7c5ce8;
  --teal-500: #0e9ba4;

  /* Semantic aliases (light) */
  --brand: var(--blue-600);
  --brand-hover: var(--blue-700);
  --brand-soft: var(--blue-50);
  --brand-soft-border: var(--blue-200);
  --bg-app: var(--gray-50);
  --bg-page: #ffffff;
  --surface-card: #ffffff;
  --surface-sunken: var(--gray-50);
  --surface-raised: #ffffff;
  --text-heading: var(--ink-900);
  --text-body: var(--gray-800);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-on-brand: #ffffff;
  --text-link: var(--blue-600);
  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus: var(--blue-500);
  --ok: var(--green-500);
  --ok-soft: var(--green-100);
  --ok-text: var(--green-700);
  --warn: var(--amber-500);
  --warn-soft: var(--amber-100);
  --warn-text: var(--amber-700);
  --danger: var(--red-500);
  --danger-soft: var(--red-100);
  --danger-text: var(--red-700);

  /* Fleet / map */
  --map-base: #edeff2;
  --map-road: #dde1e7;
  --map-water: #dce6ee;
  --map-label: var(--gray-500);
  --route-1: var(--blue-600);
  --route-2: var(--teal-500);
  --route-3: var(--violet-500);
  --route-4: var(--amber-500);
  --vehicle-moving: var(--green-500);
  --vehicle-idle: var(--amber-500);
  --vehicle-stopped: var(--gray-400);
  --vehicle-alert: var(--red-500);
  --geofence-fill: rgba(43, 83, 232, 0.08);
  --geofence-stroke: var(--blue-400);
  --neutral-soft: var(--gray-100);
  --neutral-text: var(--gray-600);
  --logo-light: block;
  --logo-dark: none;

  /* Type */
  --font-display: 'Jost', sans-serif;
  --font-ui: 'Hanken Grotesk', sans-serif;
  --font-data: 'IBM Plex Mono', monospace;
  --track-wordmark: 0.32em;
  --track-label: 0.08em;

  /* Elevation + motion */
  --shadow-token-xs: 0 1px 2px rgba(20, 24, 31, 0.06);
  --shadow-token-sm: 0 1px 2px rgba(20, 24, 31, 0.05), 0 2px 8px rgba(20, 24, 31, 0.06);
  --shadow-token-md: 0 2px 4px rgba(20, 24, 31, 0.05), 0 8px 24px rgba(20, 24, 31, 0.1);
  --shadow-token-lg: 0 4px 8px rgba(20, 24, 31, 0.06), 0 16px 48px rgba(20, 24, 31, 0.16);
  --focus-ring: 0 0 0 3px rgba(43, 83, 232, 0.22);
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
}

[data-theme='dark'] {
  --brand: var(--blue-500);
  --brand-hover: var(--blue-400);
  --brand-soft: rgba(59, 99, 238, 0.14);
  --brand-soft-border: rgba(92, 127, 243, 0.35);
  --bg-app: #10141b;
  --bg-page: #14181f;
  --surface-card: #1b212b;
  --surface-sunken: #10141b;
  --surface-raised: #222937;
  --text-heading: #f2f5f9;
  --text-body: #d4dae3;
  --text-secondary: #96a0af;
  --text-muted: #6e7887;
  --text-link: var(--blue-300);
  --border-default: #2a3140;
  --border-strong: #3d4657;
  --border-focus: var(--blue-400);
  --ok-soft: rgba(31, 157, 91, 0.16);
  --ok-text: #4cc98a;
  --warn-soft: rgba(232, 150, 12, 0.16);
  --warn-text: #f0b04f;
  --danger-soft: rgba(222, 59, 59, 0.16);
  --danger-text: #f07575;
  --map-base: #1a1f28;
  --map-road: #242b37;
  --map-water: #1c2530;
  --map-label: #6e7887;
  --geofence-fill: rgba(92, 127, 243, 0.12);
  --neutral-soft: rgba(169, 178, 192, 0.14);
  --neutral-text: #96a0af;
  --logo-light: none;
  --logo-dark: block;
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg-app);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  color: var(--text-heading);
  line-height: 1.2;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

::selection {
  background: var(--blue-100);
}
[data-theme='dark'] ::selection {
  background: var(--blue-800);
}

.mono {
  font-family: var(--font-data);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* --------------------------------------------------------------------------
 * Components — the recurring DS pieces
 * ------------------------------------------------------------------------ */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: var(--shadow-token-xs);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
}
.btn-primary {
  background: var(--brand);
  color: var(--text-on-brand);
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand-hover);
}
.btn-secondary {
  background: var(--surface-card);
  color: var(--text-heading);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--surface-sunken);
}
.btn-block {
  width: 100%;
}
.btn-danger {
  background: var(--danger-soft);
  color: var(--danger-text);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}
.field-hint {
  font-size: 12px;
  color: var(--text-muted);
}
.field-input,
.field select {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: var(--surface-card);
  color: var(--text-body);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  outline: none;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.field-input:focus,
.field select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.alert {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid transparent;
  margin: 0;
}
.alert-ok {
  background: var(--ok-soft);
  color: var(--ok-text);
}
.alert-warn {
  background: var(--warn-soft);
  color: var(--warn-text);
}
.alert-danger {
  background: var(--danger-soft);
  color: var(--danger-text);
}

.link-quiet {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-quiet:hover {
  color: var(--text-heading);
}
.link {
  color: var(--text-link);
  font-weight: 500;
  text-decoration: none;
}
.link:hover {
  text-decoration: underline;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  color: var(--text-heading);
  text-decoration: none;
}

/* Vehicle-state pill: 8px color dot + text, full-pill radius, soft tint. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.pill.moving { background: var(--ok-soft); color: var(--ok-text); }
.pill.moving i { background: var(--vehicle-moving); }
.pill.idle { background: var(--warn-soft); color: var(--warn-text); }
.pill.idle i { background: var(--vehicle-idle); }
.pill.stopped { background: var(--neutral-soft); color: var(--neutral-text); }
.pill.stopped i { background: var(--vehicle-stopped); }
.pill.alert { background: var(--danger-soft); color: var(--danger-text); }
.pill.alert i { background: var(--vehicle-alert); }
.pill.offline { background: var(--neutral-soft); color: var(--text-muted); }
.pill.offline i { background: var(--gray-400); }

/* --------------------------------------------------------------------------
 * Auth screens (login, new password, reset, signup)
 * ------------------------------------------------------------------------ */

.auth-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
}

.auth-card {
  width: 100%;
  max-width: 24rem;
  padding: 32px;
  display: grid;
  gap: 24px;
}
.auth-card header {
  display: grid;
  gap: 8px;
}
.auth-card h1 {
  font-size: 24px;
  font-weight: 600;
}
.auth-card header p {
  font-size: 14px;
  color: var(--text-secondary);
}
.auth-card form {
  display: grid;
  gap: 16px;
}
.auth-card .wordmark {
  font-size: 12px;
}
.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.auth-foot {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--border-default);
}
.auth-box {
  display: grid;
  gap: 12px;
  border-radius: 8px;
  background: var(--surface-sunken);
  padding: 16px;
  font-size: 14px;
}
.auth-box .t {
  font-weight: 500;
  color: var(--text-heading);
}
.auth-box p {
  color: var(--text-secondary);
}
.muted-note {
  font-size: 12px;
  color: var(--text-muted);
}
.strong {
  font-weight: 500;
  color: var(--text-heading);
}

/* --------------------------------------------------------------------------
 * Product: devices dashboard
 * ------------------------------------------------------------------------ */

.app-main {
  max-width: 48rem;
  margin: 0 auto;
  padding: 32px 24px;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  font-size: 14px;
}
.app-topbar .who {
  display: flex;
  align-items: center;
  gap: 16px;
}
.app-topbar .who .id {
  color: var(--text-secondary);
}
.app-topbar .sep {
  margin: 0 8px;
  color: var(--border-strong);
}

.stack {
  display: grid;
  gap: 24px;
}
.stack-sm {
  display: grid;
  gap: 12px;
}

.track-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.track-head .lead {
  font-size: 14px;
  color: var(--text-secondary);
}
.range-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.range-btn {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.range-btn:hover:not(:disabled) {
  background: var(--surface-sunken);
}
.range-btn[aria-pressed='true'] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--text-on-brand);
}
.range-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

#map {
  height: 420px;
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-sunken);
}
.map-muted .leaflet-tile-pane {
  filter: grayscale(1) contrast(0.92) brightness(1.02);
}
[data-theme='dark'] .map-muted .leaflet-tile-pane {
  filter: grayscale(1) invert(1) hue-rotate(180deg) contrast(0.85) brightness(0.9);
}

.timeline {
  display: grid;
  gap: 12px;
  padding: 12px 16px;
}
.timeline .head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  font-size: 14px;
}
.timeline .clock {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
}
.timeline .coords {
  margin-left: 8px;
  font-family: var(--font-data);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.timeline .speed {
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.timeline .count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.timeline input[type='range'] {
  width: 100%;
  accent-color: var(--brand);
}
.timeline .foot {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.placeholder {
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

.devlist header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.devlist h1 {
  font-size: 18px;
  font-weight: 600;
}
.devlist .meta {
  font-size: 12px;
  color: var(--text-muted);
}
.devlist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.devlist li + li {
  border-top: 1px solid var(--border-default);
}
.devrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.devrow:hover {
  background: var(--surface-sunken);
}
.devrow[aria-pressed='true'] {
  background: var(--brand-soft);
}
.devrow .main {
  min-width: 0;
}
.devrow .name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.devrow .name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.devrow .id {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.devrow .fix {
  flex: none;
  text-align: right;
  font-size: 12px;
}
.devrow .fix .coords {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.devrow .fix .sub {
  color: var(--text-muted);
}

.skeleton {
  border-radius: 12px;
  border: 1px solid var(--border-default);
  background: var(--surface-sunken);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.55;
  }
}

/* --------------------------------------------------------------------------
 * Admin portal
 * ------------------------------------------------------------------------ */

.admin-main {
  max-width: 68rem;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  gap: 24px;
}

.admin-note {
  font-size: 12px;
  color: var(--text-muted);
}

.admin-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.admin-form {
  padding: 20px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.admin-form h2 {
  font-size: 15px;
  font-weight: 600;
}

.registry {
  overflow-x: auto;
}
.registry table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.registry th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.registry td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
}
.registry tr:last-child td {
  border-bottom: 0;
}
.registry .imei {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
}
.registry .actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.registry .actions form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.registry .actions .field-input {
  height: 28px;
  font-size: 12px;
  width: 20rem;
  max-width: 100%;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn-text);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .app-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Week navigation + day strip (Historial) */

.week-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.week-label {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}

.day-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.day-chip {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: var(--text-secondary);
}
.day-chip:hover:not(:disabled) {
  border-color: var(--border-strong);
}
.day-chip[aria-pressed='true'] {
  border-color: var(--brand);
  color: var(--text-heading);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.day-chip:disabled {
  opacity: 0.45;
  cursor: default;
}
.day-chip .dow {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.day-chip .num {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
}
.day-chip .km {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-height: 14px;
}
.day-chip.today .dow {
  color: var(--brand);
}