/* ============================================================
   ATLAS-COMPONENTES.CSS — vocabulario compartido del rediseño.
   Componentes de la maqueta Atlas que aún no existían en el repo y que
   usan Recambios y los próximos portes. Implementados SOBRE los tokens de
   atlas-tokens.css (valores del repo); el comportamiento (hover/estados/
   responsive) es la espec del paquete de diseño.
   Cargar DESPUÉS de shell.css. Reglas de nombre ÚNICO (0 colisiones con el
   repo, verificado) → NO override de ninguna clase existente. Cada módulo
   sigue pudiendo re-scopear bajo #page-<mod> con mayor especificidad.
   Origen espec: recambios_design_work/.../fuente/css/taller.css (SP-RECAMBIOS-F3).
   ============================================================ */

/* ---- barra de control transversal (período + filtros de primer nivel) ---- */
.tk-ctrl { display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:var(--s-3) var(--s-4); margin-bottom:var(--s-5); }
.tk-ctrl__lbl { font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.tk-ctrl__sep { width:1px; align-self:stretch; background:var(--border); margin:0 2px; }
.tk-ctrl .seg { margin:0; }            /* .seg es global del repo; aquí solo se resetea el margen */
.tk-spacer { margin-left:auto; }

/* ---- insight / banner accionable de dirección ---- */
.insight { display:flex; gap:12px; align-items:flex-start; background:var(--accent-weak); border-radius:var(--radius); padding:var(--s-4); margin-bottom:var(--s-5); }
.insight__ico { width:30px; height:30px; border-radius:9px; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:15px; flex-shrink:0; }
.insight__txt { font-size:13px; color:var(--text); line-height:1.5; }
.insight__txt b { color:var(--accent-strong); }

/* ---- barra + tabla de detalle de MODAL (ordet) + export CSV ---- */
.ordet-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border); background:var(--surface-2); }
.ordet-bar__stat { font-size:12px; color:var(--text-3); }
.ordet-bar__stat b { font-family:var(--font-num); color:var(--text); font-weight:600; }
.ordet-bar__sp { flex:1; }
.btn-csv { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--accent); background:var(--accent-weak); color:var(--accent-strong); font-weight:600; font-size:12.5px; padding:8px 14px; border-radius:var(--radius-sm); transition:all .14s; }
.btn-csv:hover { background:var(--accent); color:#fff; }
.ordet { width:100%; border-collapse:collapse; font-size:12.5px; }
.ordet thead th { position:sticky; top:0; background:var(--surface); text-align:right; font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); padding:11px var(--s-4); border-bottom:1px solid var(--border-strong); white-space:nowrap; z-index:1; cursor:pointer; user-select:none; }
.ordet thead th:first-child, .ordet thead th.l { text-align:left; }
.ordet thead th .sortarrow { color:var(--accent); margin-left:3px; font-size:9px; }
.ordet tbody td { text-align:right; padding:10px var(--s-4); border-bottom:1px solid var(--row-border); color:var(--text-2); white-space:nowrap; }
.ordet tbody td:first-child, .ordet tbody td.l { text-align:left; }
.ordet tbody td.num { font-family:var(--font-num); font-variant-numeric:tabular-nums; color:var(--text); }
.ordet tbody tr:hover td { background:var(--row-hover); }
.ordet__id { font-family:var(--font-num); font-weight:600; color:var(--text); }
.ordet__tipo { display:inline-flex; align-items:center; gap:7px; }
.ordet__tipo .d { width:8px; height:8px; border-radius:2px; }
.ordet__plate { font-family:var(--font-num); font-size:11px; background:var(--surface-2); border:1px solid var(--border); padding:2px 6px; border-radius:5px; letter-spacing:.03em; }