/* ============================================================================
   OC2 — Rediseño visual del flujo de Órdenes de Compra (escritorio)
   ----------------------------------------------------------------------------
   Scope global: clase raíz `.oc2`. JAMÁS `:root` global.
   Construido sobre los tokens --mn-* del DS, re-mapeados a vars locales
   --oc2-* para tener modo claro en una sola pasada.
   Cargar AL FINAL en _Host.cshtml: después de v171-fixes.css, antes de mnx.css.
   Assets con ruta absoluta (/css/oc2.css) por la lección <base href="/">.
   ============================================================================ */

/* === re-map de tokens del DS a vars locales (default = dark) === */
.oc2 {
  --oc2-bg:        var(--mn-bg-0,#0a0e0b);
  --oc2-surface:   var(--mn-bg-1,#141a16);
  --oc2-surface-2: var(--mn-bg-2,#1c241f);
  --oc2-surface-3: var(--mn-bg-3,#232d26);
  --oc2-line:      var(--mn-line,rgba(255,255,255,.08));
  --oc2-line-2:    var(--mn-line-strong,rgba(255,255,255,.14));
  --oc2-fg:        var(--mn-aa-text-base,#f5f6f8);
  --oc2-fg-strong: var(--mn-fg-strong,#fff);
  --oc2-fg-dim:    var(--mn-aa-text-muted,#a8b5ad);
  --oc2-fg-mute:   var(--mn-fg-mute,#6b7f71);
  --oc2-brand:     var(--mn-brand,#C0633D);
  --oc2-brand-soft:var(--mn-brand-soft,rgba(192,99,61,.12));
  --oc2-ok:        var(--mn-success,#22c55e);
  --oc2-warn:      var(--mn-warning,#f59e0b);
  --oc2-danger:    var(--mn-danger,#ef4444);
  --oc2-info:      var(--mn-info,#3b82f6);
  --oc2-ok-soft:   var(--mn-success-soft,rgba(34,197,94,.12));
  --oc2-warn-soft: var(--mn-warning-soft,rgba(245,158,11,.12));
  --oc2-danger-soft:var(--mn-danger-soft,rgba(239,68,68,.12));
  --oc2-info-soft: var(--mn-info-soft,rgba(59,130,246,.12));
  /* lila para EXTRA / info-secundaria */
  --oc2-extra:      #a78bfa;
  --oc2-extra-soft: rgba(167,139,250,.14);

  /* espaciado base-4, radios, sombras, motion — del DS */
  --oc2-s1:4px;--oc2-s2:8px;--oc2-s3:12px;--oc2-s4:16px;--oc2-s5:24px;--oc2-s6:32px;--oc2-s7:48px;
  --oc2-r-sm:var(--mn-r-sm,6px);--oc2-r-md:var(--mn-r-md,10px);--oc2-r-lg:var(--mn-r-lg,14px);
  --oc2-elev-1:var(--mn-elev-1,0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.15));
  --oc2-elev-2:var(--mn-elev-2,0 2px 4px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.18));
  --oc2-elev-3:var(--mn-elev-3,0 4px 12px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.2));
  --oc2-dur:var(--mn-dur-fast,150ms);--oc2-ease:var(--mn-ease-out,cubic-bezier(.2,.8,.2,1));

  /* densidad de tabla conmutable (default = comfortable) */
  --oc2-row-h:44px;

  color:var(--oc2-fg);
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
}

/* === modo claro: re-map en UN bloque (no se hereda solo) === */
body[data-theme="light"] .oc2{
  --oc2-bg:#f3f1ec;--oc2-surface:#fff;--oc2-surface-2:#faf8f3;--oc2-surface-3:#f0ece2;
  --oc2-line:#e8e2d4;--oc2-line-2:#d8d0bd;
  --oc2-fg:#1a211c;--oc2-fg-strong:#000;--oc2-fg-dim:#5b6960;--oc2-fg-mute:#8a948d;
  --oc2-brand:#A9532F;--oc2-brand-soft:rgba(163,13,36,.10);
  --oc2-ok-soft:rgba(34,197,94,.14);--oc2-warn-soft:rgba(245,158,11,.16);
  --oc2-danger-soft:rgba(239,68,68,.12);--oc2-info-soft:rgba(59,130,246,.12);
  --oc2-extra:#7c3aed;--oc2-extra-soft:rgba(124,58,237,.10);
}

/* ============================================================================
   1.3 — Tipografía y números
   ============================================================================ */
.oc2 h1,.oc2 h2,.oc2 h3{color:var(--oc2-fg-strong);margin:0;line-height:1.15;}
.oc2-num{font-variant-numeric:tabular-nums;text-align:right;}

/* ============================================================================
   1.4 — Componentes base del sistema .oc2
   ============================================================================ */

/* --- wrapper raíz de pantalla --- */
.oc2-page{
  max-width:1700px;margin:0 auto;
  padding:var(--oc2-s5) var(--oc2-s5) var(--oc2-s7);
  background:var(--oc2-bg);
}

/* --- header de pantalla --- */
.oc2-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--oc2-s4);
  flex-wrap:wrap;margin-bottom:var(--oc2-s5);
}
.oc2-head .oc2-crumb{font-size:12px;color:var(--oc2-fg-mute);margin-bottom:var(--oc2-s1);}
.oc2-head h1{font-size:var(--mn-text-2xl,24px);font-weight:800;letter-spacing:-.5px;}
.oc2-head .oc2-sub{color:var(--oc2-fg-dim);font-size:14px;margin-top:2px;}
.oc2-head-actions{display:flex;align-items:center;gap:var(--oc2-s2);flex-wrap:wrap;}

/* --- stepper de pipeline de estado --- */
.oc2-stepper{
  display:flex;align-items:center;gap:var(--oc2-s2);
  margin:0 0 var(--oc2-s5);flex-wrap:wrap;
}
.oc2-step{
  display:inline-flex;align-items:center;gap:var(--oc2-s2);
  padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;
  border:1px solid var(--oc2-line);color:var(--oc2-fg-dim);
  background:var(--oc2-surface);white-space:nowrap;
}
.oc2-step::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--oc2-fg-mute);flex:none;
}
.oc2-step.done{color:var(--oc2-ok);border-color:var(--oc2-ok-soft);}
.oc2-step.done::before{background:var(--oc2-ok);}
.oc2-step.now{color:var(--oc2-fg-strong);border-color:var(--oc2-brand);background:var(--oc2-brand-soft);}
.oc2-step.now::before{background:var(--oc2-brand);}
.oc2-step.pending{opacity:.6;}
.oc2-step.warn{color:var(--oc2-warn);border-color:var(--oc2-warn-soft);background:var(--oc2-warn-soft);}
.oc2-step.warn::before{background:var(--oc2-warn);}
.oc2-stepper .oc2-step-sep{color:var(--oc2-fg-mute);}

/* --- superficies card (border-first) --- */
.oc2-card{
  background:var(--oc2-surface);
  border:1px solid var(--oc2-line);
  border-radius:var(--oc2-r-md);
  padding:var(--oc2-s4);
}
.oc2-card-strong{
  background:var(--oc2-surface-2);
  border:1px solid var(--oc2-line-2);
  border-radius:var(--oc2-r-lg);
  padding:var(--oc2-s5);
  box-shadow:var(--oc2-elev-2);
}
.oc2-card-title{
  font-size:14px;font-weight:700;color:var(--oc2-fg-strong);
  margin:0 0 var(--oc2-s3);display:flex;align-items:center;gap:var(--oc2-s2);
}

/* --- tabs unificadas --- */
.oc2-tabs{
  display:flex;gap:var(--oc2-s1);border-bottom:1px solid var(--oc2-line);
  margin-bottom:var(--oc2-s5);overflow-x:auto;
}
.oc2-tab{
  appearance:none;background:none;border:none;cursor:pointer;
  padding:var(--oc2-s3) var(--oc2-s4);font-size:14px;font-weight:600;
  color:var(--oc2-fg-dim);border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;gap:var(--oc2-s2);white-space:nowrap;
  transition:color var(--oc2-dur) var(--oc2-ease);
}
.oc2-tab:hover{color:var(--oc2-fg);}
.oc2-tab.on{color:var(--oc2-fg-strong);border-bottom-color:var(--oc2-brand);}
.oc2-tab-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  font-size:12px;font-weight:700;line-height:1;
  background:var(--oc2-surface-3);color:var(--oc2-fg-dim);
}
.oc2-tab.on .oc2-tab-badge{background:var(--oc2-brand-soft);color:var(--oc2-brand);}

/* --- grid de cards --- */
.oc2-grid{
  display:grid;gap:var(--oc2-s4);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}

/* --- card de OC (hub / listado) --- */
.oc2-oc-card{
  background:var(--oc2-surface);
  border:1px solid var(--oc2-line);
  border-radius:var(--oc2-r-md);
  padding:var(--oc2-s4);cursor:pointer;
  display:flex;flex-direction:column;gap:var(--oc2-s2);
  transition:transform var(--oc2-dur) var(--oc2-ease),box-shadow var(--oc2-dur) var(--oc2-ease),border-color var(--oc2-dur) var(--oc2-ease);
}
.oc2-oc-card:hover{transform:translateY(-1px);box-shadow:var(--oc2-elev-2);border-color:var(--oc2-line-2);}
.oc2-oc-card.urgent{border-color:var(--oc2-warn);}
.oc2-oc-card .oc2-oc-top{display:flex;align-items:center;justify-content:space-between;gap:var(--oc2-s2);}
.oc2-oc-card .oc2-oc-num{font-weight:700;font-size:15px;color:var(--oc2-fg-strong);}
.oc2-oc-card .oc2-oc-meta{font-size:13px;color:var(--oc2-fg-dim);display:flex;flex-direction:column;gap:2px;}
.oc2-oc-card .oc2-oc-monto{font-weight:800;font-size:18px;color:var(--oc2-fg-strong);}
.oc2-oc-cta{margin-top:var(--oc2-s2);}

/* --- badge de estado --- */
.oc2-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  border:1px solid transparent;line-height:1.4;white-space:nowrap;
}
.oc2-badge.borrador {color:var(--oc2-fg-dim);background:var(--oc2-surface-3);border-color:var(--oc2-line);}
.oc2-badge.enviada  {color:var(--oc2-info);background:var(--oc2-info-soft);border-color:var(--oc2-info-soft);}
.oc2-badge.transito {color:var(--oc2-info);background:var(--oc2-info-soft);border-color:var(--oc2-info-soft);}
.oc2-badge.parcial  {color:var(--oc2-warn);background:var(--oc2-warn-soft);border-color:var(--oc2-warn-soft);}
.oc2-badge.recibida {color:var(--oc2-ok);background:var(--oc2-ok-soft);border-color:var(--oc2-ok-soft);}
.oc2-badge.cerrada  {color:var(--oc2-ok);background:var(--oc2-ok-soft);border-color:var(--oc2-ok-soft);}
.oc2-badge.cancelada{color:var(--oc2-danger);background:var(--oc2-danger-soft);border-color:var(--oc2-danger-soft);}

/* --- tabla densa (border-first) --- */
.oc2-table{
  width:100%;border-collapse:collapse;font-size:14px;
  background:var(--oc2-surface);
  border:1px solid var(--oc2-line);border-radius:var(--oc2-r-md);
  overflow:hidden;
}
.oc2-table thead th{
  position:sticky;top:0;z-index:2;
  background:var(--oc2-surface-2);
  color:var(--oc2-fg-dim);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;text-align:left;
  padding:0 var(--oc2-s3);height:38px;
  border-bottom:1px solid var(--oc2-line-2);white-space:nowrap;
}
.oc2-table tbody td{
  padding:0 var(--oc2-s3);height:var(--oc2-row-h);
  border-bottom:1px solid var(--oc2-line);
  color:var(--oc2-fg);vertical-align:middle;
}
.oc2-table tbody tr:last-child td{border-bottom:none;}
.oc2-table tbody tr{transition:background var(--oc2-dur) var(--oc2-ease);}
.oc2-table tbody tr:hover{background:var(--oc2-surface-2);}
.oc2-table tbody tr.clickable{cursor:pointer;}
.oc2-table tfoot td{
  padding:0 var(--oc2-s3);height:var(--oc2-row-h);
  border-top:1px solid var(--oc2-line-2);
  font-weight:700;color:var(--oc2-fg-strong);background:var(--oc2-surface-2);
}
.oc2-table th.oc2-num,.oc2-table td.oc2-num{text-align:right;}
/* densidad conmutable */
.oc2-table.dense{--oc2-row-h:36px;}
.oc2-table.relaxed{--oc2-row-h:56px;}
/* tinte de fila por excepción (sutil) */
.oc2-table tbody tr.oc2-row-warn  > td{background:var(--oc2-warn-soft);}
.oc2-table tbody tr.oc2-row-danger> td{background:var(--oc2-danger-soft);}
.oc2-table tbody tr.oc2-row-extra > td{background:var(--oc2-extra-soft);}
.oc2-table tbody tr.oc2-row-warn:hover > td  {background:var(--oc2-warn-soft);filter:brightness(1.08);}
.oc2-table tbody tr.oc2-row-danger:hover > td{background:var(--oc2-danger-soft);filter:brightness(1.08);}
.oc2-table tbody tr.oc2-row-extra:hover > td {background:var(--oc2-extra-soft);filter:brightness(1.08);}

/* --- chip de delta (signo + flecha + color) --- */
.oc2-delta{
  font-variant-numeric:tabular-nums;font-weight:800;
  padding:2px 8px;border-radius:var(--oc2-r-sm);
  display:inline-flex;gap:3px;align-items:center;font-size:13px;
}
.oc2-delta.zero {color:var(--oc2-fg-mute);background:transparent;}
.oc2-delta.short{color:var(--oc2-danger);background:var(--oc2-danger-soft);}
.oc2-delta.over {color:var(--oc2-warn);background:var(--oc2-warn-soft);}
.oc2-delta.extra{color:var(--oc2-extra);background:var(--oc2-extra-soft);}

/* --- barra sticky de totales --- */
.oc2-sticky-totals{
  position:sticky;bottom:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:var(--oc2-s4);
  flex-wrap:wrap;
  padding:var(--oc2-s3) var(--oc2-s4);margin-top:var(--oc2-s4);
  background:var(--oc2-surface-2);
  border:1px solid var(--oc2-line-2);border-radius:var(--oc2-r-md);
  box-shadow:var(--oc2-elev-2);
}
.oc2-sticky-totals .oc2-tot-group{display:flex;align-items:center;gap:var(--oc2-s5);flex-wrap:wrap;}
.oc2-sticky-totals .oc2-tot{display:flex;flex-direction:column;}
.oc2-sticky-totals .oc2-tot .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--oc2-fg-mute);}
.oc2-sticky-totals .oc2-tot .val{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--oc2-fg-strong);}
.oc2-sticky-totals .oc2-tot .val.dif-plus{color:var(--oc2-warn);}
.oc2-sticky-totals .oc2-tot .val.dif-neg {color:var(--oc2-danger);}
.oc2-sticky-totals .oc2-tot-actions{display:flex;align-items:center;gap:var(--oc2-s2);}

/* --- KPIs / métricas --- */
.oc2-kpi-row{
  display:grid;gap:var(--oc2-s3);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin-bottom:var(--oc2-s5);
}
.oc2-kpi{
  background:var(--oc2-surface);
  border:1px solid var(--oc2-line);border-radius:var(--oc2-r-md);
  padding:var(--oc2-s4);display:flex;flex-direction:column;gap:var(--oc2-s1);
}
.oc2-kpi .oc2-kpi-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--oc2-fg-mute);}
.oc2-kpi .oc2-kpi-val{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--oc2-fg-strong);}
.oc2-kpi.ok    .oc2-kpi-val{color:var(--oc2-ok);}
.oc2-kpi.warn  .oc2-kpi-val{color:var(--oc2-warn);}
.oc2-kpi.danger.oc2-kpi-val,.oc2-kpi.danger .oc2-kpi-val{color:var(--oc2-danger);}
.oc2-kpi.info  .oc2-kpi-val{color:var(--oc2-info);}

/* --- empty state --- */
.oc2-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:var(--oc2-s3);
  padding:var(--oc2-s7) var(--oc2-s4);
  color:var(--oc2-fg-dim);
}
.oc2-empty .oc2-empty-ico{font-size:42px;opacity:.5;line-height:1;}
.oc2-empty .oc2-empty-title{font-size:16px;font-weight:700;color:var(--oc2-fg-strong);}
.oc2-empty .oc2-empty-msg{font-size:14px;color:var(--oc2-fg-dim);max-width:42ch;}

/* --- banners contextuales --- */
.oc2-banner{
  display:flex;align-items:flex-start;gap:var(--oc2-s3);
  padding:var(--oc2-s3) var(--oc2-s4);border-radius:var(--oc2-r-md);
  border:1px solid var(--oc2-line);font-size:14px;line-height:1.45;
  margin-bottom:var(--oc2-s4);
}
.oc2-banner .oc2-banner-ico{flex:none;font-size:18px;line-height:1.4;}
.oc2-banner.info  {color:var(--oc2-info);  background:var(--oc2-info-soft);  border-color:var(--oc2-info-soft);}
.oc2-banner.warn  {color:var(--oc2-warn);  background:var(--oc2-warn-soft);  border-color:var(--oc2-warn-soft);}
.oc2-banner.ok    {color:var(--oc2-ok);    background:var(--oc2-ok-soft);    border-color:var(--oc2-ok-soft);}
.oc2-banner.danger{color:var(--oc2-danger);background:var(--oc2-danger-soft);border-color:var(--oc2-danger-soft);}
.oc2-banner strong{color:inherit;}

/* --- toast con Undo --- */
.oc2-toast{
  position:fixed;left:50%;bottom:var(--oc2-s5);transform:translateX(-50%);
  z-index:9999;
  display:flex;align-items:center;gap:var(--oc2-s4);
  padding:var(--oc2-s3) var(--oc2-s4);border-radius:var(--oc2-r-md);
  background:var(--oc2-surface-3);color:var(--oc2-fg-strong);
  border:1px solid var(--oc2-line-2);box-shadow:var(--oc2-elev-3);
  font-size:14px;
}
.oc2-toast .oc2-toast-undo{
  appearance:none;background:none;border:none;cursor:pointer;
  color:var(--oc2-brand);font-weight:700;font-size:14px;
}

/* --- toggle segmentado --- */
.oc2-segment{
  display:inline-flex;padding:3px;gap:2px;border-radius:var(--oc2-r-md);
  background:var(--oc2-surface-2);border:1px solid var(--oc2-line);
}
.oc2-seg{
  appearance:none;background:none;border:none;cursor:pointer;
  padding:6px 14px;border-radius:var(--oc2-r-sm);
  font-size:13px;font-weight:600;color:var(--oc2-fg-dim);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:background var(--oc2-dur) var(--oc2-ease),color var(--oc2-dur) var(--oc2-ease);
}
.oc2-seg:hover{color:var(--oc2-fg);}
.oc2-seg.on{background:var(--oc2-surface);color:var(--oc2-fg-strong);box-shadow:var(--oc2-elev-1);}

/* --- tarjeta-radio grande --- */
.oc2-radio-card{
  display:flex;align-items:flex-start;gap:var(--oc2-s3);
  padding:var(--oc2-s4);border-radius:var(--oc2-r-md);cursor:pointer;
  border:1.5px solid var(--oc2-line);background:var(--oc2-surface);
  transition:border-color var(--oc2-dur) var(--oc2-ease),background var(--oc2-dur) var(--oc2-ease);
  flex:1 1 200px;
}
.oc2-radio-card:hover{border-color:var(--oc2-line-2);}
.oc2-radio-card .oc2-radio-ico{font-size:22px;line-height:1.2;flex:none;}
.oc2-radio-card .oc2-radio-title{font-weight:700;color:var(--oc2-fg-strong);}
.oc2-radio-card .oc2-radio-sub{font-size:13px;color:var(--oc2-fg-dim);margin-top:2px;}
.oc2-radio-card.on{border-color:var(--oc2-brand);background:var(--oc2-brand-soft);}
.oc2-radio-card.on.ok-card{border-color:var(--oc2-ok);background:var(--oc2-ok-soft);}
.oc2-radio-card.on.warn-card{border-color:var(--oc2-warn);background:var(--oc2-warn-soft);}

/* --- timeline de actividad --- */
.oc2-timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:var(--oc2-s5);}
.oc2-timeline::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:var(--oc2-line);
}
.oc2-tl-item{position:relative;padding:0 0 var(--oc2-s4) var(--oc2-s4);}
.oc2-tl-item::before{
  content:"";position:absolute;left:-22px;top:4px;width:14px;height:14px;border-radius:50%;
  background:var(--oc2-surface);border:2px solid var(--oc2-fg-mute);
}
.oc2-tl-item.ok::before    {border-color:var(--oc2-ok);}
.oc2-tl-item.warn::before  {border-color:var(--oc2-warn);}
.oc2-tl-item.danger::before{border-color:var(--oc2-danger);}
.oc2-tl-item.info::before  {border-color:var(--oc2-info);}
.oc2-tl-item.brand::before {border-color:var(--oc2-brand);}
.oc2-tl-item .oc2-tl-title{font-weight:700;color:var(--oc2-fg-strong);}
.oc2-tl-item .oc2-tl-time{font-size:12px;color:var(--oc2-fg-mute);}
.oc2-tl-item .oc2-tl-sub{font-size:13px;color:var(--oc2-fg-dim);margin-top:2px;}

/* ============================================================================
   Botones .oc2-btn (variantes primary / ghost / danger)
   ============================================================================ */
.oc2-btn{
  appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:var(--oc2-r-md);
  font-size:14px;font-weight:700;line-height:1;white-space:nowrap;
  border:1px solid var(--oc2-line-2);background:var(--oc2-surface-2);color:var(--oc2-fg);
  transition:background var(--oc2-dur) var(--oc2-ease),border-color var(--oc2-dur) var(--oc2-ease),transform var(--oc2-dur) var(--oc2-ease);
}
.oc2-btn:hover{background:var(--oc2-surface-3);}
.oc2-btn:active{transform:translateY(1px);}
.oc2-btn:disabled{opacity:.5;cursor:not-allowed;}
.oc2-btn.primary{background:var(--oc2-brand);border-color:var(--oc2-brand);color:#fff;}
.oc2-btn.primary:hover{filter:brightness(1.08);}
.oc2-btn.ghost{background:transparent;border-color:var(--oc2-line-2);color:var(--oc2-fg-dim);}
.oc2-btn.ghost:hover{background:var(--oc2-surface-2);color:var(--oc2-fg);}
.oc2-btn.danger{background:var(--oc2-danger);border-color:var(--oc2-danger);color:#fff;}
.oc2-btn.danger:hover{filter:brightness(1.08);}
.oc2-btn.sm{padding:5px 10px;font-size:13px;}
.oc2-btn.lg{padding:12px 22px;font-size:15px;}

/* ============================================================================
   1.5 — Microinteracciones / accesibilidad
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  .oc2 *,.oc2 *::before,.oc2 *::after{
    transition:none !important;animation:none !important;
  }
  .oc2-oc-card:hover,.oc2-btn:active{transform:none;}
}

/* skeleton de carga */
.oc2-skeleton{
  position:relative;overflow:hidden;border-radius:var(--oc2-r-sm);
  background:var(--oc2-surface-2);
}
.oc2-skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--oc2-surface-3),transparent);
  transform:translateX(-100%);animation:oc2-shimmer 1.4s infinite;
}
@keyframes oc2-shimmer{100%{transform:translateX(100%);}}
@media (prefers-reduced-motion:reduce){.oc2-skeleton::after{animation:none;}}

/* check verde fugaz tras confirmar edición de celda (optimistic UI) */
.oc2-cell-ok{animation:oc2-cell-flash .8s var(--oc2-ease);}
@keyframes oc2-cell-flash{0%{background:var(--oc2-ok-soft);}100%{background:transparent;}}

/* ============================================================================
   SECCIONES ESPECÍFICAS DE PANTALLA — cada agente AGREGA su bloque aquí abajo,
   claramente delimitado (/* === HUB === */, /* === RECEPCION === */, …).
   No tocar los componentes base de arriba.
   ============================================================================ */