/* ═══════════════════════════════════════════════════════════════════
   RECAMBIOS.CSS — módulo Posventa › Recambios (porte F3a-v2).
   Chrome Atlas scopeado a #page-recambios (patrón del repo: cada módulo
   scopea kpi/panel/search/ghostbtn) sobre tokens de atlas-tokens.css.
   Los componentes compartidos .insight/.tk-ctrl/.ordet/.btn-csv viven en
   atlas-componentes.css. .modal/.seg/.field/.select/.badge son globales del repo.
   ═══════════════════════════════════════════════════════════════════ */

/* ---- cabecera del módulo (apartados rc-tabs + buscador de ficha) ---- */
#page-recambios .rc-modhdr { display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-5); }
#page-recambios .rc-modhdr__title { display:flex; flex-direction:column; }
#page-recambios .rc-modhdr__title h1 { font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--text); }
#page-recambios .rc-modhdr__crumb { font-size:11.5px; color:var(--text-3); font-family:var(--font-num); }
#page-recambios .rc-modhdr .rc-refsearch { margin-left:auto; }

/* ---- KPI: card/label/val/sub → canónicos (.kc-card/.kc-label/.kc-val/.kc-sub, P6). El módulo
   conserva su chip (icono) y la fila .kpi__top como presentación propia, re-scopeada. ---- */
#page-recambios .kpi__top { display:flex; align-items:center; gap:8px; }
#page-recambios .kpi__chip { width:24px; height:24px; border-radius:var(--radius-sm); display:grid; place-items:center; font-size:12px; flex-shrink:0; background:var(--accent-weak); color:var(--accent-strong); }

/* ---- panel (taller.css del paquete, scopeado) ---- */
#page-recambios .panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; }
#page-recambios .panel__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border); }
#page-recambios .panel__head h2 { font-size:14.5px; font-weight:700; letter-spacing:-.01em; color:var(--text); }
#page-recambios .panel__head .sub { font-size:11.5px; color:var(--text-3); font-family:var(--font-num); }
#page-recambios .panel__body { padding:var(--s-5); }
#page-recambios .panel__body--flush { padding:0; }

/* ---- search + ghostbtn (matriculas/base del paquete, scopeado) ---- */
#page-recambios .search { position:relative; }
#page-recambios .search input { font-family:var(--font-sans); font-size:13px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:8px 14px 8px 32px; width:230px; transition:all .14s; }
#page-recambios .search input:focus { outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-weak); }
#page-recambios .search__ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:13px; pointer-events:none; }
#page-recambios .ghostbtn { border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:var(--radius-sm); transition:all .14s; cursor:pointer; }
#page-recambios .ghostbtn:hover { background:var(--hover); color:var(--text); border-color:var(--border-strong); }

/* ══════════ clases propias del módulo (scopeadas) ══════════ */

/* KPI grid → canónico .kgrid--3 (6 tarjetas = 3+3; el valor de 30px cabe en 1 línea a 1366, sin
   encoger fuente — se retira el .kpi__val--fit clamp). Modificadores del módulo re-scopeados: */
#page-recambios .kc-val small { font-size:13px; font-weight:600; color:var(--text-3); }
#page-recambios .kc-card.is-alert { position:relative; overflow:hidden; border-color:color-mix(in srgb, var(--neg) 35%, var(--border)); background:linear-gradient(180deg, var(--neg-bg), var(--surface) 55%); }
#page-recambios .kc-card.is-alert .kc-val { color:var(--neg); }
#page-recambios .kpi__badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }

/* badge de cobertura parcial */
#page-recambios .covbadge { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.03em;
  color:var(--warn); background:var(--warn-bg); padding:3px 8px; border-radius:var(--radius-pill); white-space:nowrap; }
#page-recambios .covbadge::before { content:"◔"; font-size:11px; }

/* nota de dato / costura */
#page-recambios .rc-note { display:flex; gap:8px; align-items:flex-start; font-size:11.5px; line-height:1.5; color:var(--text-2);
  background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:var(--radius-sm);
  padding:9px 12px; }
#page-recambios .rc-note b { color:var(--text); }
#page-recambios .rc-note--warn { color:var(--text); background:var(--warn-bg); border-color:color-mix(in srgb, var(--warn) 40%, transparent); }

/* ---- envejecimiento: barra apilada + filas ---- */
#page-recambios .age { padding:var(--s-4) var(--s-5); display:flex; flex-direction:column; gap:var(--s-4); }
#page-recambios .age__bar { display:flex; height:26px; border-radius:8px; overflow:hidden; }
#page-recambios .age__seg { display:grid; place-items:center; font-family:var(--font-num); font-size:10.5px; font-weight:600; color:#fff; min-width:0; }
#page-recambios .age__seg span { text-shadow:0 1px 2px rgba(0,0,0,.25); }
#page-recambios .age__rows { display:flex; flex-direction:column; }
#page-recambios .age__row { display:grid; grid-template-columns:16px 1.3fr 1fr 1fr 1fr auto; gap:12px; align-items:center;
  padding:9px 4px; border-bottom:1px solid var(--border); font-size:12.5px; }
#page-recambios .age__row:last-child { border-bottom:0; }
#page-recambios .age__dot { width:10px; height:10px; border-radius:3px; }
#page-recambios .age__t { font-weight:600; color:var(--text); }
#page-recambios .age__n { font-family:var(--font-num); text-align:right; color:var(--text); }
#page-recambios .age__n small { color:var(--text-3); font-size:11px; }
#page-recambios .age__drill { border:0; background:none; color:var(--accent-strong); font-size:11.5px; font-weight:600; cursor:pointer; padding:4px 6px; border-radius:6px; }
#page-recambios .age__drill:hover { background:var(--accent-weak); }

/* colores de tramo */
#page-recambios .tone-ok { background:var(--pos); }
#page-recambios .tone-warn { background:var(--warn); }
#page-recambios .tone-bad { background:var(--neg); }
#page-recambios .tone-mute { background:#9aa3b2; }

/* ---- ABC ---- */
#page-recambios .abc { padding:var(--s-4) var(--s-5); display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:900px){ #page-recambios .abc { grid-template-columns:repeat(2,1fr); } }
#page-recambios .abc__cell { border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; }
#page-recambios .abc__cl { display:inline-flex; font-family:var(--font-num); font-size:11px; font-weight:700; padding:2px 8px; border-radius:var(--radius-pill); }
#page-recambios .abc__cl--ok { color:var(--pos); background:var(--pos-bg); }
#page-recambios .abc__cl--warn { color:var(--warn); background:var(--warn-bg); }
#page-recambios .abc__cl--bad { color:var(--neg); background:var(--neg-bg); }
#page-recambios .abc__eur { font-family:var(--font-num); font-size:16px; font-weight:700; color:var(--text); margin-top:7px; }
#page-recambios .abc__meta { font-size:11px; color:var(--text-3); margin-top:3px; }

/* ---- serie mensual / anual (barras CSS) ---- */
#page-recambios .rc-chart { padding:var(--s-4) var(--s-5); }
#page-recambios .rc-bars { display:flex; align-items:flex-end; gap:10px; height:150px; }
#page-recambios .rc-bar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; min-width:0; height:100%; }
#page-recambios .rc-bar__v { font-family:var(--font-num); font-size:10.5px; font-weight:600; color:var(--text-2); white-space:nowrap; }
#page-recambios .rc-bar__col { width:100%; max-width:54px; border-radius:6px 6px 2px 2px; background:var(--accent); min-height:4px; }
#page-recambios .rc-bar__col--dim { background:color-mix(in srgb, var(--accent) 38%, var(--surface-2)); }
#page-recambios .rc-bar__col--out { background:var(--warn); }
#page-recambios .rc-bar__lbl { font-size:10.5px; color:var(--text-3); font-weight:600; }
#page-recambios .rc-bar__lbl b { color:var(--text); }
#page-recambios .rc-chart__foot { display:flex; gap:14px; margin-top:12px; font-size:11px; color:var(--text-3); flex-wrap:wrap; }

/* ---- tablas ordenables ligeras (patrón taller) ---- */
#page-recambios .rc-tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
#page-recambios .rc-tbl th { text-align:left; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-3); padding:9px 14px; border-bottom:1px solid var(--border); cursor:pointer; user-select:none; white-space:nowrap; }
#page-recambios .rc-tbl th.num, #page-recambios .rc-tbl td.num { text-align:right; font-family:var(--font-num); }
#page-recambios .rc-tbl td { padding:9px 14px; border-bottom:1px solid var(--border); color:var(--text); }
#page-recambios .rc-tbl tbody tr:last-child td { border-bottom:0; }
#page-recambios .rc-tbl tbody tr:hover td { background:var(--hover); }
#page-recambios .rc-tbl .code { font-family:var(--font-num); font-size:11.5px; color:var(--text-2); }
#page-recambios .rc-tbl .sortarrow { margin-left:5px; color:var(--accent-strong); }
#page-recambios .rc-minibar { display:inline-block; width:64px; height:5px; border-radius:3px; background:var(--surface-2); margin-left:9px; vertical-align:2px; overflow:hidden; }
#page-recambios .rc-minibar i { display:block; height:100%; background:var(--accent); border-radius:3px; }

/* tabs de desglose */
#page-recambios .rc-tabs { display:flex; gap:2px; padding:3px; background:var(--emp-track); border:var(--emp-track-border); border-radius:var(--emp-radius); }
#page-recambios .rc-tabs button { border:0; background:transparent; color:var(--text-2); font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:var(--emp-btn-radius); cursor:pointer; transition:all .15s; }
#page-recambios .rc-tabs button.is-active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-card); }

/* ---- bloque PENDIENTE (honestidad de dato) ---- */
#page-recambios .rc-pending { margin:var(--s-4) var(--s-5) var(--s-5); border:1.5px dashed var(--border-strong); border-radius:var(--radius);
  padding:34px 20px; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
#page-recambios .rc-pending__tag { font-family:var(--font-num); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--warn); background:var(--warn-bg); padding:3px 10px; border-radius:var(--radius-pill); }
#page-recambios .rc-pending__t { font-size:13.5px; font-weight:700; color:var(--text); }
#page-recambios .rc-pending__s { font-size:12px; color:var(--text-3); max-width:520px; line-height:1.5; }

/* ---- regla de tipos de compra ---- */
#page-recambios .rc-regla { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:var(--radius-pill); }
#page-recambios .rc-regla--computa { color:var(--pos); background:var(--pos-bg); }
#page-recambios .rc-regla--fuera { color:var(--text-3); background:var(--surface-2); }
#page-recambios .rc-regla--flag { color:#2563c9; background:#e8eefb; }

/* ---- cobertura del canal (salidas) ---- */
#page-recambios .rc-cover { padding:var(--s-4) var(--s-5); display:flex; flex-direction:column; gap:12px; }
#page-recambios .rc-cover__bar { display:flex; height:22px; border-radius:7px; overflow:hidden; }
#page-recambios .rc-cover__bar i { display:grid; place-items:center; font-family:var(--font-num); font-size:10.5px; font-weight:700; color:#fff; }
#page-recambios .rc-cover__kv { display:flex; gap:22px; flex-wrap:wrap; }
#page-recambios .rc-cover__kv div { font-size:11px; color:var(--text-3); }
#page-recambios .rc-cover__kv b { display:block; font-family:var(--font-num); font-size:15px; font-weight:700; color:var(--text); margin-top:2px; }

/* ---- calculadora de rappeles ---- */
#page-recambios .rap-tbl td { vertical-align:middle; }
#page-recambios .rap-prog b { display:block; font-weight:700; color:var(--text); }
#page-recambios .rap-prog small { font-size:11px; color:var(--text-3); }
#page-recambios .rap-base { font-size:11px; color:var(--text-3); max-width:230px; line-height:1.4; display:block; }
#page-recambios .rap-cumpl { display:flex; align-items:center; gap:9px; justify-content:flex-end; }
#page-recambios .rap-cumpl__track { width:74px; height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; flex-shrink:0; }
#page-recambios .rap-cumpl__track i { display:block; height:100%; border-radius:3px; background:var(--accent); }
#page-recambios .rap-cumpl__track i.is-full { background:var(--pos); }
#page-recambios .rap-tramo { display:inline-flex; font-family:var(--font-num); font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill); color:var(--accent-strong); background:var(--accent-weak); white-space:nowrap; }
#page-recambios .rap-falta { font-size:11px; color:var(--text-2); line-height:1.4; }
#page-recambios .rap-falta b { color:var(--text); font-family:var(--font-num); }
#page-recambios .rap-falta .up { color:var(--pos); font-weight:700; }
#page-recambios .rap-nd { color:var(--text-3); font-style:normal; }
#page-recambios .rap-obj-pend { display:inline-flex; font-size:10px; font-weight:700; letter-spacing:.03em; color:var(--warn); background:var(--warn-bg); padding:3px 9px; border-radius:var(--radius-pill); white-space:nowrap; }
#page-recambios .rap-demo { display:inline-flex; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); background:var(--surface-2); padding:2px 6px; border-radius:var(--radius-pill); margin-left:6px; vertical-align:1px; }

/* simulador what-if */
#page-recambios .rap-sim { padding:var(--s-4) var(--s-5); display:flex; flex-direction:column; gap:14px; }
#page-recambios .rap-sim__row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
#page-recambios .rap-sim__row label { font-size:11.5px; font-weight:600; color:var(--text-2); }
#page-recambios .rap-sim__row input[type="range"] { flex:1; min-width:180px; accent-color:var(--accent); }
#page-recambios .rap-sim__val { font-family:var(--font-num); font-size:13px; font-weight:700; color:var(--text); min-width:110px; }
#page-recambios .rap-sim__out { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:900px){ #page-recambios .rap-sim__out { grid-template-columns:repeat(2,1fr); } }
#page-recambios .rap-sim__cell { border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; }
#page-recambios .rap-sim__cell small { display:block; font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); }
#page-recambios .rap-sim__cell b { display:block; font-family:var(--font-num); font-size:16px; font-weight:700; color:var(--text); margin-top:4px; }
#page-recambios .rap-sim__cell b.up { color:var(--pos); }

/* buscador ficha de referencia (hueco v1.1) */
#page-recambios .rc-refsearch { position:relative; }
#page-recambios .rc-refsearch input { font-family:var(--font-sans); font-size:12.5px; color:var(--text); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-pill); padding:7px 13px 7px 30px; width:230px; transition:all .15s; }
#page-recambios .rc-refsearch input:focus { outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-weak); }
#page-recambios .rc-refsearch .ico { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:13px; }
#page-recambios .rc-refsearch .soon { position:absolute; right:9px; top:50%; transform:translateY(-50%); font-size:9px; font-weight:700; letter-spacing:.06em;
  color:var(--accent-strong); background:var(--accent-weak); padding:2px 7px; border-radius:var(--radius-pill); pointer-events:none; }

/* enlaces internos: OR y artículo → ficha */
#page-recambios .rc-orlink { font-family:var(--font-num); font-size:12px; font-weight:600; color:var(--accent-strong); text-decoration:none; white-space:nowrap; }
#page-recambios .rc-orlink:hover { text-decoration:underline; }
#page-recambios .rc-artlink { text-decoration:none; }
#page-recambios .rc-artlink .code { color:var(--accent-strong); border-bottom:1px dashed color-mix(in srgb, var(--accent-strong) 45%, transparent); }
#page-recambios .rc-artlink:hover .code { border-bottom-style:solid; }
#page-recambios .rc-tbl tr.is-h td { color:var(--text-3); }

/* detalle de albaranes (F3e): chip de filtro de llegada + botón «Documento ›» + buscador-campo */
#page-recambios .adchip { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600;
  color:var(--accent-strong); background:var(--accent-weak); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding:5px 7px 5px 12px; border-radius:var(--radius-pill); white-space:nowrap; }
#page-recambios .adchip .code { font-family:var(--font-num); }
#page-recambios .adchip button { border:0; background:none; color:var(--accent-strong); font-size:12px; font-weight:700;
  cursor:pointer; padding:2px 6px; border-radius:50%; line-height:1; }
#page-recambios .adchip button:hover { background:color-mix(in srgb, var(--accent) 18%, transparent); }
#page-recambios .addoc { border:0; background:none; color:var(--accent-strong); font-size:11.5px; font-weight:600; cursor:pointer;
  padding:4px 8px; border-radius:6px; white-space:nowrap; }
#page-recambios .addoc:hover { background:var(--accent-weak); }
/* buscador embebido como campo de filtro (misma altura que .select) */
#page-recambios .search--field input { width:170px; }
/* barra de filtros de albdet: los .field llevan rótulo encima (más altos que .seg/.search/.adchip
   sueltos) → con align-items:center quedaban descuadrados unos px; se alinean todos por la BASE */
#page-recambios #adBar { align-items:flex-end; }

/* cabecera de la ficha de referencia */
#page-recambios .refhead { display:flex; gap:var(--s-6); padding:var(--s-5); flex-wrap:wrap; align-items:flex-start; }
#page-recambios .refhead__id { min-width:230px; }
#page-recambios .refhead__ey { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
#page-recambios .refhead__art { font-family:var(--font-num); font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--text); margin-top:6px; }
#page-recambios .refhead__des { font-size:13.5px; color:var(--text-2); margin-top:4px; }
#page-recambios .refhead__tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:11px; align-items:center; }
#page-recambios .refhead__kv { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; min-width:340px; }
@media (max-width:760px){ #page-recambios .refhead__kv { grid-template-columns:repeat(2,1fr); } }
#page-recambios .refhead__kv > div { background:var(--surface); padding:11px 14px; }
#page-recambios .refhead__kv small { display:block; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
#page-recambios .refhead__kv b { display:block; font-family:var(--font-num); font-size:14.5px; font-weight:700; color:var(--text); margin-top:4px; }

/* ---- F5 · ubicación física + índice de rotación (maqueta aprobada 13/07) ----
   El KV de rotación ocupa la fila entera: la rejilla de la ficha pinta sus huecos con el color del
   borde, y una celda a medias dejaría un bloque gris. */
#page-recambios .rc-kv-rot { grid-column:1/-1; }
#page-recambios .rc-kv-rot .covbadge { margin-top:7px; }
#page-recambios .refhead__kv .rc-rot-u { display:inline; font-size:11px; font-weight:600; color:var(--text-2); text-transform:none; letter-spacing:0; }
#page-recambios .refhead__kv .rc-rot-g { display:block; margin-top:5px; font-size:10.5px; font-weight:500; line-height:1.45; color:var(--text-3); text-transform:none; letter-spacing:0; }
#page-recambios .refhead__kv b.rc-rot-nc { color:var(--warn); }
/* dato que el DMS no trae: guion atenuado. Nunca se hereda ni se inventa. */
#page-recambios .rc-vacio { color:var(--text-3); font-family:var(--font-num); }
/* stock negativo: se muestra tal cual (señal operativa, no error de pintado) */
#page-recambios .rc-neg { color:var(--neg); }
#page-recambios .abc__rot { font-family:var(--font-num); font-weight:700; color:var(--text-2); }

/* layout columnas del módulo */
#page-recambios .rc-cols { display:grid; gap:var(--s-5); margin-bottom:var(--s-5); }
#page-recambios .rc-cols--2 { grid-template-columns:1fr 1fr; }
#page-recambios .rc-cols--32 { grid-template-columns:3fr 2fr; }
@media (max-width:1000px){ #page-recambios .rc-cols--2, #page-recambios .rc-cols--32 { grid-template-columns:1fr; } }
#page-recambios .panel { margin-bottom:0; }
#page-recambios .rc-stack > .panel { margin-bottom:var(--s-5); }