/* ============================================================================
   Seguimiento de Conduces -- dos espacios (copper). Scopeado a
   #sec-seguimiento-conduces. Usa tokens --cw-* (copper-direccion-visual.css)
   con fallback a hex por si el token no esta en scope. Reversible: quitar el
   <link> de este archivo. Ver spec 2026-08-09-seguimiento-conduces-dos-espacios.
   ============================================================================ */

#sec-seguimiento-conduces {
  --sc2-bad: var(--cw-bad, #e0603e);
  --sc2-ok: var(--cw-ok, #3fae6b);
  --sc2-warn: var(--cw-warn, #e0a13a);
  --sc2-info: var(--cw-info, #7c8cf0);
  --sc2-accent: var(--cw-accent, #c97c2e);
  --sc2-accent-2: var(--cw-accent-2, #e0952e);
  --sc2-panel: var(--cw-panel, #0f0e0c);
  --sc2-raised: var(--cw-panel-raised, #141310);
  --sc2-border: var(--cw-border, #211f19);
  --sc2-border-soft: var(--cw-border-soft, #191710);
  --sc2-hair: #26231b;
  --sc2-text: var(--cw-text, #f2efe8);
  --sc2-dim: var(--cw-text-dim, #b8b3a8);
  --sc2-mute: var(--cw-text-mute, #7a746a);
  --sc2-faint: var(--cw-text-faint, #4a4840);
  --sc2-disp: var(--cw-font-display, 'Fraunces', Georgia, serif);
  --sc2-mono: var(--cw-font-mono, 'JetBrains Mono', ui-monospace, monospace);
}

/* ---------- header ---------- */
#sec-seguimiento-conduces .sc2-top { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; padding:6px 2px 0; }
#sec-seguimiento-conduces .sc2-kicker { font-family:var(--sc2-mono); font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--sc2-accent-2); display:flex; align-items:center; gap:10px; }
#sec-seguimiento-conduces .sc2-kicker::before { content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--sc2-accent),transparent); }
#sec-seguimiento-conduces .sc2-title { font-family:var(--sc2-disp); font-optical-sizing:auto; font-weight:500; font-size:36px; line-height:1.03; letter-spacing:-.02em; margin:12px 0 6px; color:var(--sc2-text); }
#sec-seguimiento-conduces .sc2-sub { color:var(--sc2-mute); font-size:13px; max-width:46ch; line-height:1.5; font-family:var(--sc2-mono); }
#sec-seguimiento-conduces .sc2-metrics { display:flex; gap:10px; }
#sec-seguimiento-conduces .sc2-metric { background:linear-gradient(180deg,var(--sc2-raised),var(--sc2-panel)); border:1px solid var(--sc2-border); border-radius:12px; padding:12px 18px; min-width:100px; position:relative; overflow:hidden; }
#sec-seguimiento-conduces .sc2-metric::after { content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); }
#sec-seguimiento-conduces .sc2-metric .n { font-family:var(--sc2-disp); font-size:28px; font-weight:500; line-height:1; color:var(--sc2-text); }
#sec-seguimiento-conduces .sc2-metric .n.alert { color:var(--sc2-bad); }
#sec-seguimiento-conduces .sc2-metric .l { font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sc2-mute); margin-top:7px; font-family:var(--sc2-mono); }

#sec-seguimiento-conduces .sc2-rule { height:1px; background:linear-gradient(90deg,var(--sc2-hair),transparent); margin:24px 0 22px; }

/* ---------- dos espacios ---------- */
#sec-seguimiento-conduces .sc2-stage { display:grid; grid-template-columns:1.65fr 1fr; gap:22px; align-items:start; }
@media (max-width:920px) { #sec-seguimiento-conduces .sc2-stage { grid-template-columns:1fr; } }

#sec-seguimiento-conduces .sc2-space { background:linear-gradient(180deg,rgba(255,255,255,.012),transparent),var(--sc2-panel); border:1px solid var(--sc2-border); border-radius:18px; overflow:hidden; }
#sec-seguimiento-conduces .sc2-space-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid var(--sc2-border-soft); }
#sec-seguimiento-conduces .sc2-space-title { display:flex; align-items:baseline; gap:10px; }
#sec-seguimiento-conduces .sc2-space-title .t { font-family:var(--sc2-disp); font-weight:500; font-size:19px; color:var(--sc2-text); letter-spacing:-.01em; }
#sec-seguimiento-conduces .sc2-eyebrow { font-family:var(--sc2-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--sc2-accent-2); }
#sec-seguimiento-conduces .sc2-count { font-family:var(--sc2-mono); font-size:12px; font-weight:700; color:var(--sc2-accent-2); background:rgba(201,124,46,.12); border:1px solid rgba(201,124,46,.28); border-radius:999px; padding:3px 11px; }
#sec-seguimiento-conduces .sc2-count.muted { color:var(--sc2-dim); background:rgba(255,255,255,.04); border-color:var(--sc2-border); }

/* ---------- tarjetas de consignación ---------- */
#sec-seguimiento-conduces .sc2-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px; padding:18px; }
#sec-seguimiento-conduces .sc2-empty { padding:34px 18px; text-align:center; color:var(--sc2-mute); font-family:var(--sc2-mono); font-size:12px; }
#sec-seguimiento-conduces .sc2-card { position:relative; background:linear-gradient(180deg,var(--sc2-raised),var(--sc2-panel)); border:1px solid var(--sc2-border); border-left:3px solid var(--st,var(--sc2-accent)); border-radius:14px; padding:16px 16px 14px; transition:transform .18s ease, border-color .18s ease; }
#sec-seguimiento-conduces .sc2-card:hover { transform:translateY(-2px); border-color:var(--sc2-hair); }
#sec-seguimiento-conduces .sc2-card .r1 { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
#sec-seguimiento-conduces .sc2-badge { font-family:var(--sc2-mono); font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:4px 9px; border-radius:6px; border:1px solid transparent; }
#sec-seguimiento-conduces .sc2-badge.plazo { color:var(--sc2-ok); background:rgba(63,174,107,.10); border-color:rgba(63,174,107,.28); }
#sec-seguimiento-conduces .sc2-badge.vencida { color:var(--sc2-bad); background:rgba(224,96,62,.12); border-color:rgba(224,96,62,.34); }
#sec-seguimiento-conduces .sc2-badge.espera { color:var(--sc2-warn); background:rgba(224,161,58,.10); border-color:rgba(224,161,58,.30); }
#sec-seguimiento-conduces .sc2-tagid { font-family:var(--sc2-mono); font-size:10px; color:var(--sc2-faint); font-weight:500; letter-spacing:.06em; }
#sec-seguimiento-conduces .sc2-veh { font-family:var(--sc2-disp); font-size:18px; font-weight:500; color:var(--sc2-text); letter-spacing:-.01em; line-height:1.1; }
#sec-seguimiento-conduces .sc2-chasis { font-family:var(--sc2-mono); font-size:11px; color:var(--sc2-mute); letter-spacing:.04em; margin-top:3px; }
#sec-seguimiento-conduces .sc2-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:13px 0 12px; padding-top:12px; border-top:1px solid var(--sc2-border-soft); }
#sec-seguimiento-conduces .sc2-fact .k { font-family:var(--sc2-mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--sc2-faint); margin-bottom:3px; }
#sec-seguimiento-conduces .sc2-fact .v { font-size:12px; color:var(--sc2-dim); line-height:1.25; }
#sec-seguimiento-conduces .sc2-clock { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#sec-seguimiento-conduces .sc2-clock .big { font-family:var(--sc2-disp); font-size:22px; font-weight:500; line-height:1; color:var(--sc2-text); }
#sec-seguimiento-conduces .sc2-clock .big small { font-family:var(--sc2-mono); font-size:10px; font-weight:500; color:var(--sc2-mute); letter-spacing:.04em; margin-left:4px; }
#sec-seguimiento-conduces .sc2-clock .who { font-family:var(--sc2-mono); font-size:9.5px; color:var(--sc2-faint); text-align:right; line-height:1.3; max-width:12ch; }
#sec-seguimiento-conduces .sc2-meter { height:5px; border-radius:3px; background:#17150f; border:1px solid var(--sc2-border); overflow:hidden; margin-top:11px; }
#sec-seguimiento-conduces .sc2-meter i { display:block; height:100%; border-radius:3px; }
#sec-seguimiento-conduces .sc2-fill-ok { background:linear-gradient(90deg,#8f5720,var(--sc2-accent-2)); }
#sec-seguimiento-conduces .sc2-fill-bad { background:linear-gradient(90deg,#7a2f1c,var(--sc2-bad)); }
#sec-seguimiento-conduces .sc2-fill-wait { background:repeating-linear-gradient(90deg,var(--sc2-faint) 0 6px,transparent 6px 12px); }
#sec-seguimiento-conduces .sc2-card.is-vencida { border-color:rgba(224,96,62,.3); background:linear-gradient(180deg,rgba(224,96,62,.06),var(--sc2-panel)); }
#sec-seguimiento-conduces .sc2-card.is-vencida::before { content:""; position:absolute; inset:-1px; border-radius:14px; box-shadow:0 0 22px -8px rgba(224,96,62,.5); animation:sc2-ember 2.6s ease-in-out infinite; pointer-events:none; }
@keyframes sc2-ember { 0%,100% { box-shadow:0 0 22px -8px rgba(224,96,62,.5); } 50% { box-shadow:0 0 30px -4px rgba(224,96,62,.22); } }
#sec-seguimiento-conduces .sc2-manual { margin-top:13px; width:100%; padding:8px; font-family:var(--sc2-mono); font-size:10.5px; letter-spacing:.04em; color:var(--sc2-mute); background:transparent; border:1px solid var(--sc2-border); border-radius:8px; cursor:pointer; transition:.15s; }
#sec-seguimiento-conduces .sc2-manual:hover { color:var(--sc2-accent-2); border-color:rgba(201,124,46,.35); }

/* ---------- historial (ledger) ---------- */
#sec-seguimiento-conduces .sc2-ledger { padding:8px 8px 6px; }
#sec-seguimiento-conduces .sc2-lrow { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:13px 12px; border-radius:10px; }
#sec-seguimiento-conduces .sc2-lrow + .sc2-lrow { border-top:1px solid var(--sc2-border-soft); }
#sec-seguimiento-conduces .sc2-lrow:hover { background:var(--sc2-raised); }
#sec-seguimiento-conduces .sc2-ldate { text-align:center; min-width:38px; }
#sec-seguimiento-conduces .sc2-ldate .d { font-family:var(--sc2-disp); font-size:17px; font-weight:500; line-height:1; color:var(--sc2-text); }
#sec-seguimiento-conduces .sc2-ldate .m { font-family:var(--sc2-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sc2-mute); margin-top:3px; }
#sec-seguimiento-conduces .sc2-lmain .lv { font-family:var(--sc2-disp); font-size:14px; color:var(--sc2-text); font-weight:500; }
#sec-seguimiento-conduces .sc2-lmain .lmeta { font-family:var(--sc2-mono); font-size:10.5px; color:var(--sc2-mute); margin-top:2px; letter-spacing:.02em; }
#sec-seguimiento-conduces .sc2-ltype { font-family:var(--sc2-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sc2-accent-2); border:1px solid var(--sc2-border); border-radius:5px; padding:2px 6px; margin-left:8px; }
#sec-seguimiento-conduces .sc2-lstate { display:flex; align-items:center; gap:6px; font-family:var(--sc2-mono); font-size:10px; color:var(--sc2-dim); white-space:nowrap; }
#sec-seguimiento-conduces .sc2-dot { width:7px; height:7px; border-radius:50%; background:var(--sc2-faint); }
#sec-seguimiento-conduces .sc2-dot.ok { background:var(--sc2-ok); }
#sec-seguimiento-conduces .sc2-dot.info { background:var(--sc2-info); }
#sec-seguimiento-conduces .sc2-lfoot { padding:12px 16px 8px; text-align:center; }
#sec-seguimiento-conduces .sc2-lfoot button { font-family:var(--sc2-mono); font-size:11px; color:var(--sc2-mute); letter-spacing:.04em; background:transparent; border:none; border-bottom:1px solid var(--sc2-border); cursor:pointer; padding:0 0 2px; }
#sec-seguimiento-conduces .sc2-lfoot button:hover { color:var(--sc2-accent-2); }

@media (prefers-reduced-motion:reduce) { #sec-seguimiento-conduces * { animation:none !important; } }