/* SmartTracker — design tokens (identidad de marca v1.0, octubre 2026: Azul Smart #2563EB, Azul noche #0A1226, Azul pizarra #1A2540, tipografía Inter)
   Estilo heredado de FixPass: sidebar navy oscuro, contenido claro,
   etiquetas en mono mayúsculas, tarjetas blancas con borde fino. */

:root {
  /* Tipografía */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Marca (manual de identidad) */
  --brand-blue: #2563eb;   /* Azul Smart: acento y acción */
  --brand-night: #0a1226;  /* Azul noche: base corporativa */
  --brand-slate: #1a2540;  /* Azul pizarra: superficie secundaria */
  --brand-steel: #8da6cc;  /* Gris azulado: texto secundario sobre fondo oscuro */

  /* Navy (sidebar, banner) */
  --navy-950: #0a1226;   /* sidebar / banner */
  --navy-900: #0e172e;   /* bloques dentro del sidebar */
  --navy-800: #1a2540;   /* item activo / botón secundario */
  --navy-700: #26324f;   /* bordes sobre navy */
  --navy-text: #cbd5e6;  /* texto en sidebar */
  --navy-muted: #8da6cc; /* etiquetas de sección (mono): gris azulado de la marca */

  /* Superficies claras */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-muted: #f8fafc;  /* cabecera de tabla, inputs */
  --border: #e5e7eb;
  --border-strong: #d4d8de;

  /* Texto */
  --text: #0f172a;
  --text-muted: #64748b;
  --text-faint: #94a3b8;

  /* Acento (marca, foco, selección) */
  --accent: #2563eb;
  --accent-soft: #dbeafe;

  /* Estados */
  --ok: #16a34a;
  --ok-soft: #dcfce7;
  --warn: #d97706;
  --warn-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --danger-strong: #b91c1c;
  --neutral: #9ca3af;       /* "sin registro" */
  --neutral-soft: #f1f5f9;
  --banner-dot: #f59e0b;

  /* Forma */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04);

  /* Espaciado / layout */
  --sidebar-w: 306px;
  --banner-h: 38px;
  --header-h: 80px;
  --gap: 20px;

  /* Etiqueta mono en mayúsculas ("PRESENTES", "HORA", "COMUNIDAD") */
  --label-size: 11px;
  --label-tracking: 0.14em;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---- Utilidades de texto ---- */
.label {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}
.mono { font-family: var(--font-mono); }
.kpi { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.kpi small { font-family: var(--font-mono); font-size: 14px; font-weight: 400; color: var(--text-faint); }

/* ---- Banner superior ---- */
.banner {
  height: var(--banner-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px 0 40px;
  background: var(--navy-950);
  color: #fff;
  font-size: 14px;
}
.banner .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--banner-dot); margin-right: 12px; display: inline-block; }
.banner a { color: #fff; text-decoration: underline; }

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-w);
  background: var(--navy-950);
  color: var(--navy-text);
  display: flex; flex-direction: column;
  padding: 24px 12px;
}
.sidebar .section { margin: 24px 14px 8px; }
.sidebar .section.label { color: var(--navy-muted); }
.nav-item {
  display: flex; align-items: center; gap: 14px;
  height: 42px; padding: 0 14px;
  border-radius: var(--radius);
  color: var(--navy-text); font-weight: 500; text-decoration: none;
  border: 1px solid transparent;
}
.nav-item:hover { background: var(--navy-900); }
.nav-item.active {
  background: var(--navy-800);
  color: #fff;
  border-left: 3px solid var(--accent);
}
.nav-item svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.sidebar-card {
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: #fff; font-weight: 600;
}
.sidebar-card .label { color: var(--navy-muted); display: block; margin-bottom: 6px; }
.btn-ghost-dark {
  display: block; width: 100%; text-align: center;
  height: 40px; line-height: 40px;
  background: var(--navy-800); color: #fff; font-weight: 600;
  border-radius: var(--radius); border: 0;
}
.btn-danger-outline {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 0 16px;
  border: 1px solid #7f1d1d; border-radius: var(--radius);
  color: #f87171; font-weight: 600; background: rgba(220, 38, 38, 0.06);
}
.btn-danger-outline .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #c2410c; color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.chip-dark {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--navy-800); color: var(--navy-text);
}

/* ---- Cabecera de página ---- */
.page-header {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.page-header h1 { margin: 2px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.search {
  width: 360px; height: 42px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-muted); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-faint);
}
.kbd {
  font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--border-strong); border-radius: 4px; padding: 1px 6px;
}
.clock { text-align: right; padding-left: 30px; border-left: 1px solid var(--border); }
.clock strong { font-family: var(--font-mono); font-size: 20px; font-weight: 600; display: block; }
.clock span { font-size: 12px; color: var(--text-muted); }

/* ---- Tarjetas ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.stat { padding: 22px 20px 20px; }
.stat .label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.progress { height: 6px; border-radius: 99px; background: var(--neutral-soft); margin-top: 16px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--ok); }

/* Punto de estado */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.dot.neutral { background: var(--neutral); box-shadow: 0 0 0 3px var(--neutral-soft); }
.dot.danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

/* ---- Tabla ---- */
.table-head, .table-row {
  display: grid; align-items: center; padding: 0 24px;
}
.table-head {
  height: 40px; background: var(--surface-muted);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.table-head > * { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-muted); }
.table-row { height: 52px; border-bottom: 1px solid var(--border); }
.empty { text-align: center; padding: 56px 24px; color: var(--text-muted); }
.empty strong { display: block; color: var(--text); font-weight: 600; margin: 14px 0 8px; }

/* ---- Controles ---- */
.input {
  height: 40px; padding: 0 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit;
}
.input::placeholder { color: var(--text-faint); }
.input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--neutral-soft); border: 1px solid var(--border); border-radius: var(--radius);
}
.segmented button {
  height: 34px; padding: 0 16px; border: 0; background: transparent;
  border-radius: 8px; font: inherit; font-weight: 500; color: var(--text-muted); cursor: pointer;
}
.segmented button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }

/* ---- Fila con icono (alertas / avisos) ---- */
.icon-row { display: flex; align-items: center; gap: 16px; padding: 18px 24px; }
.icon-row + .icon-row { border-top: 1px solid var(--border); }
.icon-box { width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center; }
.icon-box.danger { background: var(--danger-soft); color: var(--danger-strong); }
.icon-box.info { background: var(--accent-soft); color: var(--accent); }
.icon-row .grow { flex: 1; }
.icon-row .grow b { display: block; font-weight: 600; }
.icon-row .grow span { font-size: 13px; color: var(--text-muted); }
.icon-row .count { font-size: 26px; font-weight: 600; }