#page-costeos * {box-sizing:border-box;margin:0;padding:0;}
#page-costeos {font-family:'Segoe UI',Arial,sans-serif;background:var(--soft);color:var(--ink);min-height:100vh;}
#page-costeos .page {display:none;max-width:1100px;margin:0 auto;padding:0 16px 24px 16px;}
#page-costeos .page.active {display:block;}
#page-costeos .card {background:var(--card);border-radius:12px;border:1px solid var(--line);margin-bottom:16px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 2px 6px rgba(0,0,0,0.04);}
#page-costeos .chb {color:#fff;padding:12px 18px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;}
#page-costeos .chb.dark {background:#1a1a2e;}
#page-costeos .chb.green {background:#1d6b4a;}
#page-costeos .chb.red {background:#8b2635;}
#page-costeos .chb.blue {background:#0d4f8c;}
#page-costeos .chb.orange {background:#b45309;}
#page-costeos .chb.teal {background:#0d6b6b;}
#page-costeos .cb {padding:18px;}
#page-costeos .cb.tight {padding:10px 16px 4px;}
#page-costeos .cb.tight .filter-row {margin-bottom:6px;}
#page-costeos .cb.tight p {margin-bottom:6px;margin-top:0;}
#page-costeos .cb.tight .fg label {font-size:10px;}
#page-costeos .cb.tight .fg input, #page-costeos .cb.tight .fg select {padding:5px 8px;font-size:12px;border-radius:6px;}
#page-costeos .fg {display:flex;flex-direction:column;gap:5px;}
#page-costeos .fg label {font-size:11px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:0.4px;}
#page-costeos .fg input, #page-costeos .fg select {padding:8px 12px;border:1.5px solid var(--line);border-radius:8px;font-size:13px;color:var(--ink);background:var(--card);font-weight:500;}
#page-costeos .fg input:focus, #page-costeos .fg select:focus {outline:none;border-color:var(--info);box-shadow:0 0 0 3px rgba(26,26,46,0.08);}
#page-costeos .filter-row {display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
#page-costeos .btn {border:none;padding:9px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;}
#page-costeos .btn-dark {background:#1a1a2e;color:#fff;}
#page-costeos .btn-green {background:#1d6b4a;color:#fff;}
#page-costeos .btn-red {background:#e63946;color:#fff;}
#page-costeos .btn-orange {background:#b45309;color:#fff;}
#page-costeos .dash-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:16px;}
#page-costeos .top10-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
#page-costeos .top10-card {background:var(--card);border-radius:12px;border:1px solid var(--line);overflow:hidden;}
#page-costeos .top10-title {padding:10px 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;}
#page-costeos table.data-tbl {width:100%;border-collapse:collapse;font-size:11px;min-width:700px;}
#page-costeos table.data-tbl thead th {background:var(--soft);padding:7px 8px;text-align:right;font-weight:700;font-size:10px;color:var(--ink-mid);text-transform:uppercase;border-bottom:2px solid var(--line);white-space:nowrap;}
#page-costeos table.data-tbl thead th:first-child {text-align:left;}
#page-costeos table.data-tbl tbody tr {border-bottom:1px solid var(--line);}
#page-costeos table.data-tbl tbody tr:hover {background:var(--soft);}
#page-costeos table.data-tbl tbody td {padding:6px 8px;text-align:right;font-family:inherit;font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums;}
#page-costeos table.data-tbl tbody td:first-child {text-align:left;font-family:'Segoe UI',Arial,sans-serif;font-weight:600;color:var(--ink-strong);}
#page-costeos table.data-tbl tfoot tr {background:#1a1a2e;}
#page-costeos table.data-tbl tfoot td {padding:8px;text-align:right;font-family:inherit;font-variant-numeric:tabular-nums;color:#fff;font-weight:700;font-size:11px;}
#page-costeos table.data-tbl tfoot td:first-child {text-align:left;font-family:'Segoe UI',Arial,sans-serif;}
#page-costeos table.data-tbl.compact thead th {padding:3px 8px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#page-costeos table.data-tbl.compact tbody td {padding:2px 8px;font-size:11px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-family:'Segoe UI',Arial,sans-serif;}
#page-costeos table.data-tbl.compact tbody td:first-child {font-size:12px;font-weight:600;color:var(--ink-strong);}
#page-costeos table.data-tbl.compact thead th:nth-child(5) {text-align:center;padding:3px 4px;}
#page-costeos table.data-tbl.compact tbody td:nth-child(5) {text-align:center;padding:2px 4px;}
#page-costeos table.data-tbl.compact thead th:nth-child(6) {text-align:left;padding-left:8px;}
#page-costeos table.data-tbl.compact tbody td:nth-child(6) {text-align:left;padding-left:8px;color:var(--mut-2);font-size:10px;}
#page-costeos #reporte {display:none;}
#page-costeos .btn-edit-sm {background:var(--info-soft);color:var(--info-ink);font-size:11px;padding:4px 10px;border:none;border-radius:6px;cursor:pointer;font-weight:600;}
#page-costeos .btn-del-sm {background:var(--danger-soft);color:var(--danger-ink);font-size:11px;padding:4px 10px;border:none;border-radius:6px;cursor:pointer;font-weight:600;}
#page-costeos .modal {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:999;align-items:center;justify-content:center;}
#page-costeos .modal.open {display:flex;}
#page-costeos .modal-box {background:var(--card);border-radius:12px;padding:24px;width:420px;max-width:95vw;max-height:90vh;overflow-y:auto;}
#page-costeos .modal-title {font-size:15px;font-weight:700;color:var(--ink-strong);margin-bottom:16px;}
#page-costeos .mf {margin-bottom:12px;}
#page-costeos .mf label {font-size:11px;color:var(--mut);font-weight:700;display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:0.4px;}
#page-costeos .mf input, #page-costeos .mf select {width:100%;padding:8px 12px;border:1.5px solid var(--line);border-radius:8px;font-size:13px;}
#page-costeos .mf input:focus, #page-costeos .mf select:focus {outline:none;border-color:#b45309;}
#page-costeos .modal-btns {display:flex;gap:10px;margin-top:16px;}
#page-costeos .no-data {text-align:center;padding:40px;color:var(--mut-2);font-size:14px;}
#page-costeos .toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:#1d6b4a;color:#fff;padding:12px 24px;border-radius:24px;font-size:14px;font-weight:500;transition:transform .3s;z-index:9999;pointer-events:none;}
#page-costeos .toast.show {transform:translateX(-50%) translateY(0);}
@media print {
@page {size:letter landscape;margin:8mm;}
 #page-costeos .toast, #page-costeos .modal {display:none!important;}
}
#page-costeos {
  --dp-primary:#1a1a2e;
  --dp-primary-hover:#2a2a4a;
  --dp-success:#27ae60;
  --dp-danger:#e63946;
  --dp-warning:#f39c12;
  --dp-info:#3498db;
  --dp-bg:#f4f7f6;
  --dp-surface:#ffffff;
  --dp-border:#e0e0e0;
  --dp-border-soft:#eeeeee;
  --dp-text:#1a1a2e;
  --dp-text-muted:#64748b;
  --dp-text-soft:#94a3b8;
  --dp-sidebar-w:250px;
  --dp-topbar-h:56px;
  --dp-content-x:10px;
  --dp-content-top:8px;
  --dp-content-bottom:28px;
  --dp-subtabs-gap:16px;
  --dp-radius:12px;
  --dp-radius-sm:8px;
  --dp-shadow-card:0 4px 12px rgba(0,0,0,0.05);
  --dp-shadow-hover:0 6px 20px rgba(0,0,0,0.08);
  --dp-mono:'JetBrains Mono','SF Mono','Courier New',Consolas,monospace;
  --dp-sans:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}
#page-costeos {font-family:var(--dp-sans);background:var(--dp-bg);color:var(--dp-text);font-size:13px;}
#page-costeos .page {display:none;width:100%;box-sizing:border-box;}
#page-costeos .page.active {display:block;}
#page-costeos .card {
  background:var(--dp-surface);
  border-radius:var(--dp-radius);
  border:1px solid var(--dp-border);
  margin-bottom:20px;
  overflow:hidden;
  box-shadow:var(--dp-shadow-card);
  transition:box-shadow 0.2s;
}
#page-costeos .card:hover {box-shadow:var(--dp-shadow-hover);}
#page-costeos .chb {
  padding:14px 20px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.8px;
}
#page-costeos .cb {padding:20px;}
#page-costeos table.data-tbl {font-size:12px;}
#page-costeos table.data-tbl thead th {
  background:var(--hover);
  color:var(--mut);
  font-weight:700;
  font-size:10px;
  letter-spacing:0.6px;
  padding:10px 10px;
  border-bottom:1px solid var(--dp-border);
}
#page-costeos table.data-tbl tbody td {
  padding:9px 10px;
  font-family:var(--dp-mono);
  font-size:12px;
  border-bottom:1px solid var(--dp-border-soft);
}
#page-costeos table.data-tbl tbody td:first-child {
  font-family:var(--dp-sans);
  font-weight:600;
}
#page-costeos table.data-tbl tbody tr {border-bottom:none;}
#page-costeos table.data-tbl tbody tr:hover {background:var(--hover);}
#page-costeos table.data-tbl tfoot tr {background:var(--dp-primary);}
#page-costeos table.data-tbl tfoot td {padding:11px 10px;font-family:var(--dp-mono);font-size:12px;}
#page-costeos .btn {
  border-radius:var(--dp-radius-sm);
  font-weight:600;
  font-size:13px;
  padding:9px 18px;
  transition:opacity 0.15s,transform 0.05s;
  letter-spacing:0.2px;
}
#page-costeos .btn:hover {opacity:0.9;}
#page-costeos .btn:active {transform:translateY(1px);}
#page-costeos .btn-dark {background:var(--dp-primary);}
#page-costeos .btn-green {background:var(--dp-success);}
#page-costeos .btn-red {background:var(--dp-danger);}
#page-costeos .btn-orange {background:var(--dp-warning);}
#page-costeos .fg input, #page-costeos .fg select, #page-costeos .mf input, #page-costeos .mf select {
  border-radius:var(--dp-radius-sm);
  border:1px solid var(--dp-border);
  font-size:13px;
}
#page-costeos .fg input:focus, #page-costeos .fg select:focus, #page-costeos .mf input:focus, #page-costeos .mf select:focus {
  border-color:var(--dp-primary);
  box-shadow:0 0 0 3px var(--acc-soft);
}
#page-costeos .modal-box {
  width:75vw !important;
  max-width:900px !important;
  min-width:auto;
  border-radius:var(--dp-radius) !important;
  box-shadow:0 20px 60px rgba(0,0,0,0.25) !important;
  padding:28px !important;
}
#page-costeos .modal-title {
  font-size:18px !important;
  font-weight:800;
  color:var(--dp-text);
  margin-bottom:20px !important;
  padding-bottom:14px;
  border-bottom:1px solid var(--dp-border);
}
#page-costeos .mf label {
  font-size:11px;
  color:var(--dp-text-muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  margin-bottom:5px;
}
#page-costeos .mf input, #page-costeos .mf select {
  padding:9px 12px;
  border-radius:var(--dp-radius-sm);
}
@media (max-width:1024px) {
#page-costeos .modal-box {width:90vw !important;max-width:90vw !important;padding:20px !important;}
}
#page-costeos {
  --m-bg:#f6f7f9;
  --m-surface:#ffffff;
  --m-border:#eaecef;
  --m-border-strong:#e2e5e9;
  --m-text:#0b1220;
  --m-text-2:#475467;
  --m-text-3:#667085;
  --m-bg-2:#f6f7f9; /* theme-exempt: definicion de token (par claro; el oscuro esta en el bloque dark) */
  --m-accent:#0b1220;
  --m-blue:#2563eb;
  --m-blue-soft:#eff5ff;
  --m-green:#12833c; /* theme-exempt: definicion de token; verde con 4.84:1 sobre blanco (el anterior daba 3.30) */
  --m-green-soft:#ecfdf3;
  --m-red:#dc2626;
  --m-red-soft:#fef2f2;
  --m-orange:#ea580c;
  --m-orange-soft:#fff4ed;
  --m-purple:#7c3aed;
  --m-purple-soft:#f5f0ff;
  --m-gray-soft:#f2f4f7;
  --m-shadow-card:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.04);
  --m-shadow-hover:0 4px 10px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);
  --m-radius-lg:14px;
  --m-radius:10px;
  --m-radius-sm:8px;
  --m-font:'Inter','SF Pro Display','Segoe UI',system-ui,-apple-system,sans-serif;
}
#page-costeos {font-family:var(--m-font);background:var(--m-bg);color:var(--m-text);-webkit-font-smoothing:antialiased;}
#page-costeos .rep-suc-toggle {display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:34px;}
#page-costeos .rep-suc-pill {
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:0 14px;
  border:1.5px solid transparent;
  border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;
  white-space:nowrap;transition:all .15s ease;font-family:inherit;
}
#page-costeos .rep-suc-pill.todas {background:var(--viol-soft);border-color:var(--viol-soft);color:var(--viol-ink);}
#page-costeos .rep-suc-pill.kp {background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger-ink);}
#page-costeos .rep-suc-pill.bp {background:var(--ok-soft);border-color:var(--ok-border);color:var(--ok-ink);}
#page-costeos .rep-suc-pill.cds {background:var(--ok-soft);border-color:var(--ok-border);color:var(--ok-ink);}
#page-costeos .rep-suc-pill:hover {filter:brightness(0.96);}
#page-costeos .rep-suc-pill.active.todas {background:#7c3aed;border-color:#7c3aed;color:#fff;}
#page-costeos .rep-suc-pill.active.kp {background:#ff0000;border-color:#ff0000;color:#fff;}
#page-costeos .rep-suc-pill.active.bp {background:#9fe406;border-color:#9fe406;color:#18230a;}
#page-costeos .rep-suc-pill.active.cds {background:#1d6b4a;border-color:#1d6b4a;color:#fff;}
#page-costeos .rep-suc-pill.huerf {background:var(--soft);border-color:var(--line);color:var(--mut);}
#page-costeos .rep-suc-pill.active.huerf {background:#6b7280;border-color:#6b7280;color:#fff;}
#page-costeos #reporte {
  display:flex;
  flex-direction:column;
  gap:18px;
}
#page-costeos .card:has(> .chb) > .cb {background:transparent !important;}
#page-costeos #rep-pane-compras .card {
  background:var(--m-surface) !important;
  border:1px solid var(--m-border) !important;
  border-radius:var(--m-radius-lg) !important;
  box-shadow:var(--m-shadow-card) !important;
  margin-bottom:14px !important;
  overflow:hidden !important;
}
#page-costeos #rep-pane-compras .card .chb {
  background:transparent !important;
  color:var(--m-text-2) !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  padding:14px 16px 0 !important;
  border:none !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
#page-costeos #rep-pane-compras .card .chb::before {
  content:"";
  width:22px;
  height:22px;
  border-radius:5px;
  background-size:12px 12px;
  background-repeat:no-repeat;
  background-position:center;
  display:inline-block;
  flex-shrink:0;
}
#page-costeos #rep-pane-compras .card .chb.orange::before {
  background-color:var(--m-orange-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='21' x2='4' y2='14'/><line x1='4' y1='10' x2='4' y2='3'/><line x1='12' y1='21' x2='12' y2='12'/><line x1='12' y1='8' x2='12' y2='3'/><line x1='20' y1='21' x2='20' y2='16'/><line x1='20' y1='12' x2='20' y2='3'/><line x1='1' y1='14' x2='7' y2='14'/><line x1='9' y1='8' x2='15' y2='8'/><line x1='17' y1='16' x2='23' y2='16'/></svg>");
}
#page-costeos #rep-pane-compras .card .chb.blue::before {
  background-color:var(--m-blue-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}
#page-costeos #rep-pane-compras .card .chb.red::before {
  background-color:var(--m-red-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='21' x2='4' y2='14'/><line x1='4' y1='10' x2='4' y2='3'/><line x1='12' y1='21' x2='12' y2='12'/><line x1='12' y1='8' x2='12' y2='3'/><line x1='20' y1='21' x2='20' y2='16'/><line x1='20' y1='12' x2='20' y2='3'/><line x1='1' y1='14' x2='7' y2='14'/><line x1='9' y1='8' x2='15' y2='8'/><line x1='17' y1='16' x2='23' y2='16'/></svg>");
}
#page-costeos #rep-pane-compras .card .cb {
  padding:14px 16px 16px !important;
  background:transparent !important;
}
#page-costeos #rep-pane-compras .fg label {
  font-size:10px !important;
  font-weight:600 !important;
  color:var(--m-text-2) !important;
  letter-spacing:0.8px !important;
  text-transform:uppercase !important;
  margin-bottom:4px !important;
  display:block !important;
}
#page-costeos #rep-pane-compras .fg input, #page-costeos #rep-pane-compras .fg select {
  background:var(--m-surface) !important;
  border:1px solid var(--m-border) !important;
  border-radius:var(--m-radius-sm) !important;
  padding:8px 11px !important;
  font-size:13px !important;
  font-family:var(--m-font) !important;
  color:var(--m-text) !important;
  transition:border-color .15s, box-shadow .15s !important;
}
#page-costeos #rep-pane-compras .fg input:focus, #page-costeos #rep-pane-compras .fg select:focus {
  outline:none !important;
  border-color:var(--m-text-2) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.08) !important;
}
#page-costeos #rep-pane-compras .btn {
  font-family:var(--m-font) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  padding:9px 16px !important;
  border-radius:var(--m-radius-sm) !important;
  border:none !important;
  cursor:pointer !important;
  letter-spacing:0.1px !important;
  transition:transform .08s, opacity .15s, box-shadow .15s !important;
}
#page-costeos #rep-pane-compras .btn:hover {
  transform:translateY(-1px) !important;
  box-shadow:var(--m-shadow-hover) !important;
}
#page-costeos #rep-pane-compras .btn-orange {
  background:var(--m-text) !important; 
  color:var(--m-surface) !important;
}
#page-costeos #rep-pane-compras .btn-red {
  background:var(--m-red) !important;
  color:#fff !important;
}
#page-costeos #rep-pane-compras .btn-green {
  background:var(--m-green) !important;
  color:#fff !important;
}
#page-costeos #rep-pane-compras .btn-dark {
  background:var(--m-text) !important;
  color:var(--m-surface) !important;
}
 #page-costeos #rep-pane-compras .filter-row {
  gap:12px !important;
  align-items:flex-end !important;
}
#page-costeos #rep-pane-compras #cp-no-data {
  color:var(--m-text-3) !important;
  font-size:13px !important;
  text-align:center !important;
  padding:28px 16px !important;
  font-style:normal !important;
}
#page-costeos #rep-pane-compras table {
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  font-family:var(--m-font) !important;
  font-size:12.5px !important;
}
#page-costeos #rep-pane-compras thead th {
  background:transparent !important;
  color:var(--m-text-3) !important;
  font-size:9.5px !important;
  font-weight:700 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  padding:11px 10px !important;
  border-bottom:1px solid var(--m-border) !important;
  
}
#page-costeos #rep-pane-compras tbody td {
  padding:9px 10px !important;
  border-bottom:1px solid var(--m-border) !important;
  font-size:12.5px !important;
  color:var(--m-text) !important;
  font-variant-numeric:tabular-nums !important;
  
}
#page-costeos #rep-pane-compras tbody tr:hover {
  background:rgba(0,0,0,.015) !important;
}
#page-costeos #rep-pane-compras tfoot td {
  background:var(--m-text) !important;
  color:var(--m-surface) !important;
  padding:11px 10px !important;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums !important;
}
#page-costeos #rep-pane-compras .dash-grid {
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap:10px !important;
  margin-bottom:14px !important;
}
#page-costeos .m-kpi-card {
  background:var(--m-surface);
  border:1px solid var(--m-border);
  border-radius:var(--m-radius-lg);
  box-shadow:var(--m-shadow-card);
  padding:14px 14px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  grid-template-areas:
    "label  ."
    "main   main";
  column-gap:8px;
  row-gap:12px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
#page-costeos .m-kpi-label {
  grid-area:label;
  font-size:9.5px;
  font-weight:700;
  color:var(--m-text-2);
  letter-spacing:0.8px;
  text-transform:uppercase;
  white-space:nowrap;
}
#page-costeos .m-kpi-icon {
  grid-area:main;
  width:28px;
  height:28px;
  border-radius:7px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
  justify-self:start;
  flex-shrink:0;
}
#page-costeos .m-kpi-val {
  grid-area:main;
  padding-left:37px;
  font-size:16.5px;
  font-weight:700;
  letter-spacing:-0.2px;
  line-height:1;
  color:var(--m-text);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}#page-costeos #rep-pane-compras .summary-layout {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:10px;
  margin-bottom:14px;
}
#page-costeos #rep-pane-compras .metric-grid { display:grid; gap:10px; }
#page-costeos #rep-pane-compras .metric-grid.origin { grid-template-columns:repeat(3,minmax(0,1fr)); }
#page-costeos #rep-pane-compras .metric-grid.entity { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:1180px) {
#page-costeos #rep-pane-compras .summary-layout { grid-template-columns:1fr; }
}
@media (max-width:720px) {
#page-costeos #rep-pane-compras .metric-grid.origin, #page-costeos #rep-pane-compras .metric-grid.entity { grid-template-columns:1fr; }
}
#page-costeos #rep-pane-compras .m-kpi-card.pnl-kpi {
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "label  ."
    "main   main"
    "sub    sub";
  row-gap:6px;
  padding:14px 14px 12px;
  border-left:3px solid var(--line);
}
#page-costeos #rep-pane-compras .m-kpi-card.kpi-total {border-left-color:#16a34a;}
#page-costeos #rep-pane-compras .m-kpi-card.kpi-admin {border-left-color:#a855f7;}
#page-costeos #rep-pane-compras .m-kpi-card.kpi-cajero {border-left-color:#2563eb;}
#page-costeos #rep-pane-compras .m-kpi-card.kpi-kp {border-left-color:#dc2626;}
#page-costeos #rep-pane-compras .m-kpi-card.kpi-bp {border-left-color:#16a34a;}
#page-costeos #rep-pane-compras .m-kpi-card.kpi-cedis {border-left-color:#1d6b4a;}
#page-costeos #rep-pane-compras .pnl-kpi-sub {
  grid-area:sub;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.2px;
  color:var(--m-text-3);
  display:inline-flex;
  width:fit-content;
  padding:2px 8px;
  border-radius:999px;
  margin-left:37px;
}
#page-costeos #rep-pane-compras .pnl-kpi-sub.tone-positive { color:var(--m-green); background:var(--m-green-soft); }
#page-costeos #rep-pane-compras .pnl-kpi-sub.tone-negative { color:var(--m-red);   background:var(--m-red-soft); }
#page-costeos #rep-pane-compras .pnl-kpi-sub.tone-expense { color:var(--warn-ink);        background:var(--warn-soft); }
#page-costeos #rep-pane-compras .pnl-kpi-sub.tone-neutral { color:var(--m-text-3);background:var(--m-gray-soft); }
#page-costeos #rep-pane-compras .pnl-kpi-sub.tone-channel { color:var(--m-blue);  background:var(--m-blue-soft); }
#page-costeos #rep-pane-compras .leader-list {
  padding:14px 16px 16px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
#page-costeos #rep-pane-compras .leader-row {
  min-height:64px;
  border:1px solid var(--m-border);
  border-left:3px solid transparent;
  border-radius:8px;
  background:var(--m-surface);
  padding:9px 10px;
  display:grid;
  grid-template-columns:26px minmax(0,1fr) 82px;
  gap:8px;
  align-items:center;
}
#page-costeos #rep-pane-compras .leader-row-main { min-width:0; }
#page-costeos #rep-pane-compras .leader-num {
  width:24px; height:24px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--m-gray-soft); color:var(--m-text-3);
  font-size:11px; font-weight:900;
}
#page-costeos #rep-pane-compras .leader-row-name {
  color:var(--m-text); font-size:12.2px; font-weight:850; line-height:1.15;
  white-space:normal; overflow-wrap:anywhere;
}
#page-costeos #rep-pane-compras .leader-row-sub {
  margin-top:4px; display:flex; align-items:center; gap:8px; min-width:0;
  color:var(--m-text-2); font-size:10.5px; font-weight:650;
}
#page-costeos #rep-pane-compras .leader-row-track {
  width:44px; height:5px; border-radius:999px; background:var(--line); overflow:hidden; flex-shrink:0;
}
#page-costeos #rep-pane-compras .leader-row-track span { display:block; height:100%; border-radius:999px; }
#page-costeos #rep-pane-compras .leader-row-val {
  text-align:right; color:var(--m-text); font-size:13px; font-weight:900;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  display:flex; flex-direction:column; align-items:flex-end; gap:3px;
}
#page-costeos #rep-pane-compras .leader-pct {
  display:inline-flex; align-items:center; height:17px; border-radius:999px; padding:0 6px;
  background:var(--m-gray-soft); color:var(--m-text-2); font-size:9.5px; font-weight:850; white-space:nowrap;
}
#page-costeos #rep-pane-compras .product-list .leader-row {
  border-color:rgba(234,88,12,.14);
  border-left-color:rgba(234,88,12,.55);
  background:linear-gradient(90deg,color-mix(in srgb,var(--warn-soft) 50%,var(--m-surface)),var(--m-surface) 56%);
}
#page-costeos #rep-pane-compras .provider-list .leader-row {
  border-color:rgba(20,128,74,.14);
  border-left-color:rgba(20,128,74,.55);
  background:linear-gradient(90deg,color-mix(in srgb,var(--ok-soft) 50%,var(--m-surface)),var(--m-surface) 56%);
}
#page-costeos #rep-pane-compras .product-list .leader-row-track span { background:var(--m-orange); }
#page-costeos #rep-pane-compras .provider-list .leader-row-track span { background:var(--m-green); }
#page-costeos #rep-pane-compras .product-list .leader-row.featured {
  border-color:rgba(234,88,12,.24);
  border-left-color:var(--m-orange);
  background:linear-gradient(90deg,var(--warn-soft),var(--m-surface) 58%);
}
#page-costeos #rep-pane-compras .provider-list .leader-row.featured {
  border-color:rgba(20,128,74,.24);
  border-left-color:var(--m-green);
  background:linear-gradient(90deg,var(--ok-soft),var(--m-surface) 58%);
}
#page-costeos #rep-pane-compras .product-list .leader-row.featured .leader-num {
  background:var(--m-surface); color:var(--m-orange); border:1px solid rgba(234,88,12,.24);
}
#page-costeos #rep-pane-compras .provider-list .leader-row.featured .leader-num {
  background:var(--m-surface); color:var(--m-green); border:1px solid rgba(20,128,74,.24);
}
#page-costeos #rep-pane-compras .product-list .leader-row.featured .leader-pct { background:var(--m-orange-soft); color:var(--warn-ink); }
#page-costeos #rep-pane-compras .provider-list .leader-row.featured .leader-pct { background:var(--m-green-soft); color:var(--m-green); }
@media (max-width:1180px) {
#page-costeos #rep-pane-compras .leader-list { grid-template-columns:1fr; }
}
#page-costeos #cp-price-card .cp-price-head {
  min-height:52px; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--m-border);
}
#page-costeos #cp-price-card .cp-price-title {
  display:flex; align-items:center; gap:9px;
  color:var(--m-text-2); font-size:10.5px; font-weight:850; letter-spacing:1.2px; text-transform:uppercase;
}
#page-costeos #cp-price-card .cp-price-ic {
  width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--m-purple-soft); color:var(--m-purple); flex-shrink:0;
}
#page-costeos #cp-price-card .cp-price-ic svg { width:13px; height:13px; }
#page-costeos #cp-price-card .cp-price-bar {
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  padding:12px 16px; background:var(--wash); border-bottom:1px solid var(--m-border);
}
#page-costeos #cp-price-card .cp-price-controls { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
#page-costeos #cp-price-card .cp-price-controls .fg { display:flex; flex-direction:column; gap:4px; }
#page-costeos #cp-price-card .cp-price-controls label { font-size:9px; color:var(--m-text-3); font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
#page-costeos #cp-price-card .cp-price-controls select { height:32px; border:1px solid var(--m-border-strong); border-radius:8px; background:var(--m-surface); color:var(--m-text); padding:0 10px; font-size:12.5px; }
#page-costeos #cp-price-card .variation-summary { margin:0; }
#page-costeos #rep-pane-compras .var-stat {
  min-height:30px; border:1px solid var(--m-border); border-radius:8px; background:var(--m-surface);
  display:inline-flex; align-items:center; gap:7px; padding:6px 10px;
  color:var(--m-text-2); font-size:11px; font-weight:800; white-space:nowrap;
}
#page-costeos #rep-pane-compras .var-stat strong { color:var(--m-text); font-size:13px; font-weight:900; }
#page-costeos #rep-pane-compras .var-stat.alert { border-color:rgba(220,38,38,.16); background:var(--danger-soft); }
#page-costeos #rep-pane-compras .var-stat.alert strong { color:var(--m-red); }
#page-costeos #rep-pane-compras .var-stat.down { border-color:rgba(20,128,74,.16); background:var(--ok-soft); }
#page-costeos #cp-price-card .price-table { width:100%; border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; }
#page-costeos #cp-price-card .price-table th { color:var(--m-text-3); font-size:9px; font-weight:850; letter-spacing:1px; text-transform:uppercase; text-align:left; padding:9px 12px; border-bottom:1px solid var(--m-border); white-space:nowrap; background:var(--m-surface); }
#page-costeos #cp-price-card .price-table th.right { text-align:right; }
#page-costeos #cp-price-card .price-table td { padding:7px 12px; border-bottom:1px solid var(--m-border); vertical-align:middle; font-size:12.5px; color:var(--m-text); }
#page-costeos #cp-price-card .price-table tbody tr:last-child td { border-bottom:0; }
#page-costeos #cp-price-card .price-table tbody tr:hover { background:var(--wash); }
#page-costeos #cp-price-card .price-table tr.vr td:first-child { border-left:3px solid transparent; }
#page-costeos #cp-price-card .price-table tr.vr.hot   td:first-child { border-left-color:var(--m-red); }
#page-costeos #cp-price-card .price-table tr.vr.watch td:first-child { border-left-color:var(--m-orange); }
#page-costeos #cp-price-card .price-table tr.vr.down  td:first-child { border-left-color:var(--m-green); }
#page-costeos #cp-price-card .price-table tr.vr.ok    td:first-child { border-left-color:var(--m-border-strong); }
#page-costeos #cp-price-card .price-table tr.vr.hot { background:linear-gradient(90deg,var(--danger-soft),var(--m-surface) 38%); }
#page-costeos #cp-price-card .price-table tr.vr.watch { background:linear-gradient(90deg,var(--warn-soft),var(--m-surface) 36%); }
#page-costeos #cp-price-card .price-table .product { font-weight:800; color:var(--m-text); line-height:1.1; }
#page-costeos #cp-price-card .price-table .muted { color:var(--m-text-2); font-weight:600; font-size:10.5px; margin-top:2px; }
#page-costeos #cp-price-card .price-table .prov { color:var(--m-text-2); font-weight:650; }
#page-costeos #cp-price-card .price-table .right { text-align:right; }
#page-costeos #cp-price-card .price-table .money { text-align:right; font-weight:850; }
#page-costeos #cp-price-card .price-table .money.base { color:var(--m-text-2); font-weight:650; }
#page-costeos #rep-pane-compras .delta { min-width:72px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:3px 8px; font-size:11px; font-weight:900; letter-spacing:.3px; }
#page-costeos #rep-pane-compras .delta.flat { background:var(--m-gray-soft); color:var(--m-text-2); }
#page-costeos #rep-pane-compras .varsum-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:8px 0 14px; }
@media (max-width:880px) {
#page-costeos #rep-pane-compras .varsum-row { grid-template-columns:1fr; }
}
#page-costeos #rep-pane-compras .vsum-card { background:var(--m-surface); border:1px solid var(--m-border); border-radius:var(--m-radius); box-shadow:var(--m-shadow-card); padding:16px 18px; display:flex; align-items:center; gap:14px; position:relative; overflow:hidden; }
#page-costeos #rep-pane-compras .vsum-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent,#cbd5e1); }
#page-costeos #rep-pane-compras .vsum-ic { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--accent-soft,#f2f4f7); color:var(--accent,#475467); }
#page-costeos #rep-pane-compras .vsum-ic svg { width:26px; height:26px; stroke-width:2.2; fill:none; }
#page-costeos #rep-pane-compras .vsum-body { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
#page-costeos #rep-pane-compras .vsum-lbl { font-size:10px; font-weight:850; letter-spacing:1.1px; text-transform:uppercase; color:var(--m-text-3); }
#page-costeos #rep-pane-compras .vsum-num { font-size:30px; font-weight:900; letter-spacing:-.5px; line-height:1.05; font-variant-numeric:tabular-nums; color:var(--accent,var(--m-text)); }
#page-costeos #rep-pane-compras .vsum-pct { display:inline-flex; align-items:center; height:21px; padding:0 9px; border-radius:6px; font-size:10.5px; font-weight:900; background:var(--accent-soft,#f2f4f7); color:var(--accent,var(--m-text-2)); letter-spacing:.2px; margin-top:5px; width:fit-content; }
#page-costeos #rep-pane-compras .vsum-card.v-up { --accent:#dc2626; --accent-soft:var(--danger-soft); } /* theme-exempt: --accent es color de dato y mejora de noche (3.34:1 en texto de 30px) */
#page-costeos #rep-pane-compras .vsum-card.v-eq { --accent:#0ea5e9; --accent-soft:var(--info-soft); } /* theme-exempt: --accent es color de dato y mejora de noche */
#page-costeos #rep-pane-compras .vsum-card.v-dn { --accent:#16a34a; --accent-soft:var(--ok-soft); } /* theme-exempt: --accent es color de dato y mejora de noche */
#page-costeos #rep-pane-compras .b4-panel-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:12px; }
@media (max-width:1180px) {
#page-costeos #rep-pane-compras .b4-panel-grid { grid-template-columns:1fr; }
}
#page-costeos #rep-pane-compras .b4-panel { background:var(--m-surface); border:1px solid var(--m-border); border-radius:var(--m-radius); box-shadow:var(--m-shadow-card); overflow:hidden; display:flex; flex-direction:column; }
#page-costeos #rep-pane-compras .b4-head { min-height:54px; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--m-border); flex-wrap:wrap; }
#page-costeos #rep-pane-compras .b4-title { display:flex; align-items:center; gap:9px; color:var(--m-text-2); font-size:11px; font-weight:850; letter-spacing:1.1px; text-transform:uppercase; white-space:nowrap; }
#page-costeos #rep-pane-compras .b4-mini { width:24px; height:24px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
#page-costeos #rep-pane-compras .b4-mini.pp { background:var(--m-purple-soft,#f5f0ff); color:var(--m-purple,#7c3aed); }
#page-costeos #rep-pane-compras .b4-mini.bl { background:var(--m-blue-soft,#eff5ff); color:var(--m-blue,#2563eb); }
#page-costeos #rep-pane-compras .b4-mini svg { width:14px; height:14px; stroke-width:2.2; fill:none; }
#page-costeos #rep-pane-compras .b4-head-right { display:flex; align-items:center; gap:8px; }
#page-costeos #rep-pane-compras .cp-cnt { display:inline-block; background:var(--m-accent); color:var(--m-surface); font-weight:950; border-radius:999px; padding:1px 9px; margin:0 3px; letter-spacing:0; }
#page-costeos #rep-pane-compras #cp-price-card .b4-head { flex-wrap:nowrap !important; gap:8px !important; padding:12px 14px !important; }
#page-costeos #rep-pane-compras #cp-price-card .b4-title { flex:0 1 auto; min-width:0; overflow:hidden; }
#page-costeos #rep-pane-compras #cp-price-card .b4-head-right { flex:0 0 auto; }
#page-costeos #rep-pane-compras .b4-search { height:34px; min-width:200px; border:1px solid var(--m-border-strong); border-radius:8px; background:var(--m-surface); color:var(--m-text); padding:0 12px; font-size:12.5px; }
#page-costeos #rep-pane-compras .b4-icbtn { width:34px; height:34px; border:1px solid var(--m-border-strong); border-radius:8px; background:var(--m-surface); color:var(--m-text-2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
#page-costeos #rep-pane-compras .b4-icbtn:hover { background:var(--m-purple-soft,#f5f0ff); color:var(--m-purple,#7c3aed); border-color:var(--m-purple,#7c3aed); }
#page-costeos #rep-pane-compras .b4-icbtn svg { width:15px; height:15px; stroke-width:2; fill:none; }
#page-costeos #rep-pane-compras .b4-scroll { flex:1; overflow:auto; max-height:620px; }
#page-costeos #rep-pane-compras .b4-foot { padding:10px 14px; border-top:1px solid var(--m-border); color:var(--m-text-3); font-size:11px; font-weight:700; }
#page-costeos #rep-pane-compras .b4-vt { width:100%; border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; }
#page-costeos #rep-pane-compras .b4-vt th { position:sticky; top:0; background:var(--m-surface); color:var(--m-text-3); font-size:9px; font-weight:850; letter-spacing:1px; text-transform:uppercase; text-align:left; padding:10px 12px; border-bottom:1px solid var(--m-border); white-space:nowrap; z-index:3; }
#page-costeos #rep-pane-compras .b4-vt td { padding:11px 12px; border-bottom:1px solid var(--m-border); font-size:12.5px; color:var(--m-text); vertical-align:middle; }
#page-costeos #rep-pane-compras .b4-vt tbody tr:last-child td { border-bottom:0; }
#page-costeos #rep-pane-compras .b4-vt tbody tr:hover { background:var(--wash); }
#page-costeos #rep-pane-compras .b4-vt .b4-prod { font-weight:800; line-height:1.1; color:var(--m-text); }
#page-costeos #rep-pane-compras .b4-vt .b4-uni { color:var(--m-text-2); font-weight:600; font-size:10.5px; margin-top:2px; }
#page-costeos #rep-pane-compras .vmoney { text-align:left; font-weight:850; white-space:nowrap; color:var(--m-text); }
#page-costeos #rep-pane-compras .vmoney.base { color:var(--m-text-2); font-weight:650; }
#page-costeos #rep-pane-compras .var-cell { min-width:260px; }
#page-costeos #rep-pane-compras .var-capsule { position:relative; display:flex; align-items:center; width:100%; height:24px; border-radius:12px; padding-right:14px; overflow:hidden; }
#page-costeos #rep-pane-compras .var-tail { position:absolute; left:0; top:0; height:100%; border-radius:12px; z-index:1; }
#page-costeos #rep-pane-compras .var-pill { position:relative; z-index:2; height:24px; border-radius:12px; padding:0 12px; display:inline-flex; align-items:center; color:#fff; font-size:11px; font-weight:900; white-space:nowrap; flex-shrink:0; }
#page-costeos #rep-pane-compras .var-money { position:relative; z-index:2; margin-left:auto; font-size:12.5px; font-weight:900; color:var(--m-text); white-space:nowrap; }
#page-costeos #rep-pane-compras .var-capsule.t1 { background:rgba(185,28,28,.08); }
#page-costeos #rep-pane-compras .var-pill.t1 { background:var(--danger-d); }
#page-costeos #rep-pane-compras .var-tail.t1 { background:linear-gradient(to right,rgba(185,28,28,.36),rgba(185,28,28,0)); }
#page-costeos #rep-pane-compras .var-capsule.t2 { background:rgba(220,38,38,.08); }
#page-costeos #rep-pane-compras .var-pill.t2 { background:var(--danger); }
#page-costeos #rep-pane-compras .var-tail.t2 { background:linear-gradient(to right,rgba(220,38,38,.34),rgba(220,38,38,0)); }
#page-costeos #rep-pane-compras .var-capsule.t3 { background:rgba(239,68,68,.08); }
#page-costeos #rep-pane-compras .var-pill.t3 { background:#ef4444; }
#page-costeos #rep-pane-compras .var-tail.t3 { background:linear-gradient(to right,rgba(239,68,68,.32),rgba(239,68,68,0)); }
#page-costeos #rep-pane-compras .var-capsule.t4 { background:rgba(234,88,12,.08); }
#page-costeos #rep-pane-compras .var-pill.t4 { background:#ea580c; }
#page-costeos #rep-pane-compras .var-tail.t4 { background:linear-gradient(to right,rgba(234,88,12,.34),rgba(234,88,12,0)); }
#page-costeos #rep-pane-compras .var-capsule.t5 { background:rgba(249,115,22,.08); }
#page-costeos #rep-pane-compras .var-pill.t5 { background:#f97316; }
#page-costeos #rep-pane-compras .var-tail.t5 { background:linear-gradient(to right,rgba(249,115,22,.32),rgba(249,115,22,0)); }
#page-costeos #rep-pane-compras .var-capsule.t6 { background:rgba(245,158,11,.08); }
#page-costeos #rep-pane-compras .var-pill.t6 { background:#f59e0b; }
#page-costeos #rep-pane-compras .var-tail.t6 { background:linear-gradient(to right,rgba(245,158,11,.32),rgba(245,158,11,0)); }
#page-costeos #rep-pane-compras .var-capsule.t7 { background:rgba(59,130,246,.08); }
#page-costeos #rep-pane-compras .var-pill.t7 { background:#3b82f6; }
#page-costeos #rep-pane-compras .var-tail.t7 { background:linear-gradient(to right,rgba(59,130,246,.28),rgba(59,130,246,0)); }
#page-costeos #rep-pane-compras .b4-dt { width:100%; border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; }
#page-costeos #rep-pane-compras .b4-dt th { position:sticky; top:0; background:var(--m-surface); color:var(--m-text-3); font-size:9px; font-weight:850; letter-spacing:1px; text-transform:uppercase; text-align:left; padding:10px 12px; border-bottom:1px solid var(--m-border); white-space:nowrap; z-index:3; }
#page-costeos #rep-pane-compras .b4-dt td { padding:9px 12px; border-bottom:1px solid var(--m-border); font-size:12px; color:var(--m-text); vertical-align:middle; }
#page-costeos #rep-pane-compras .b4-dt tbody tr:last-child td { border-bottom:0; }
#page-costeos #rep-pane-compras .b4-dt tbody tr { position:relative; }
#page-costeos #rep-pane-compras .b4-dt tbody tr:hover { background:var(--wash); }
#page-costeos #rep-pane-compras .b4-dt .b4-fch { font-weight:700; font-size:11.5px; white-space:nowrap; }
#page-costeos #rep-pane-compras .b4-dt .b4-prov { color:var(--m-text-2); font-weight:650; }
#page-costeos #rep-pane-compras .b4-dt .b4-dprod { font-weight:780; }
#page-costeos #rep-pane-compras .b4-dt .b4-cantpres { color:var(--m-text-2); font-weight:650; white-space:nowrap; font-size:11px; }
#page-costeos #rep-pane-compras .b4-dt .b4-cap { color:var(--m-text-2); font-weight:650; font-size:11px; white-space:nowrap; }
#page-costeos #rep-pane-compras .b4-dt .b4-mon { text-align:right; font-weight:850; white-space:nowrap; }
#page-costeos #rep-pane-compras .b4-dt .right { text-align:right; }
#page-costeos #rep-pane-compras .b4-ent { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:20px; border-radius:6px; padding:0 7px; font-size:10.5px; font-weight:900; color:#fff; }
#page-costeos #rep-pane-compras .b4-ent.kp { background:#FF0000; }
#page-costeos #rep-pane-compras .b4-ent.bp { background:#9FE406; color:#18230a; }
#page-costeos #rep-pane-compras .b4-ent.cds { background:#1d6b4a; }
#page-costeos #rep-pane-compras .b4-libre { display:inline-flex; align-items:center; height:18px; padding:0 7px; border-radius:6px; background:var(--m-green-soft); color:var(--m-green); font-size:10px; font-weight:800; margin-left:6px; letter-spacing:.3px; }
#page-costeos #rep-pane-compras .b4-dt tbody tr .b4-delx { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:6px; border:1px solid var(--m-border-strong); background:var(--m-surface); color:var(--m-red); font-size:11px; font-weight:900; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .12s; display:none; align-items:center; justify-content:center; padding:0; } /* preventivo: opacity:0 no desactiva el clic. El elemento no se genera hoy (ver nota al pie del archivo), asi que esto no corrige ningun sintoma observable. */
#page-costeos #rep-pane-compras .b4-dt tbody tr.has-del .b4-delx { display:inline-flex; }
#page-costeos #rep-pane-compras .b4-dt tbody tr.has-del:hover .b4-delx { opacity:1; pointer-events:auto; } /* preventivo: solo cuando el boton es visible vuelve a aceptar el clic */
#page-costeos #rep-pane-compras .top10-card {
  background:var(--m-surface) !important;
  border:1px solid var(--m-border) !important;
  border-radius:var(--m-radius-lg) !important;
  box-shadow:var(--m-shadow-card) !important;
  overflow:hidden !important;
}
#page-costeos #rep-pane-compras .top10-title {
  background:transparent !important;
  color:var(--m-text-2) !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  padding:14px 16px 10px !important;
  border:none !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
#page-costeos #rep-pane-compras .top10-title::before {
  content:"";
  width:22px;
  height:22px;
  border-radius:5px;
  background-size:12px 12px;
  background-repeat:no-repeat;
  background-position:center;
  display:inline-block;
  flex-shrink:0;
  background-color:var(--m-orange-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='21' x2='4' y2='14'/><line x1='4' y1='10' x2='4' y2='3'/><line x1='12' y1='21' x2='12' y2='12'/><line x1='12' y1='8' x2='12' y2='3'/><line x1='20' y1='21' x2='20' y2='16'/><line x1='20' y1='12' x2='20' y2='3'/><line x1='1' y1='14' x2='7' y2='14'/><line x1='9' y1='8' x2='15' y2='8'/><line x1='17' y1='16' x2='23' y2='16'/></svg>");
}
#page-costeos #rep-pane-compras .top10-grid > .top10-card:nth-child(2) .top10-title::before {
  background-color:var(--m-green-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 7L9 18l-5-5'/></svg>");
}
#page-costeos #rep-pane-compras .top10-grid {
  gap:12px !important;
}
#page-costeos .cst-subtabs {
  display:inline-flex !important;
  background:var(--m-gray-soft) !important;
  border-radius:10px !important;
  padding:3px !important;
  margin-bottom:16px !important;
  gap:2px !important;
  flex-wrap:wrap !important;
}
#page-costeos .cst-subtab {
  background:transparent !important;
  border:none !important;
  color:var(--m-text-2) !important;
  padding:7px 16px !important;
  border-radius:7px !important;
  font-family:var(--m-font) !important;
  font-size:13px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  transition:background .15s, color .15s, box-shadow .15s !important;
  letter-spacing:0.1px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
}
#page-costeos .cst-subtab:hover:not(.active) {
  color:var(--m-text) !important;
}
#page-costeos .cst-subtab.active {
  background:var(--m-surface) !important;
  color:var(--m-text) !important;
  box-shadow:var(--shadow-1) !important;
}
#page-costeos .cst-subtab-ic {
  font-size:14px !important;
  line-height:1 !important;
  display:inline-block !important;
  filter:saturate(0.85) !important;
}
#page-costeos .cst-subtab.active .cst-subtab-ic {
  filter:none !important;
}
#page-costeos .card {
  background:var(--m-surface) !important;
  border:1px solid var(--m-border) !important;
  border-radius:var(--m-radius-lg) !important;
  box-shadow:var(--m-shadow-card) !important;
  margin-bottom:14px !important;
  overflow:hidden !important;
}
#page-costeos .card .chb {
  background:transparent !important;
  color:var(--m-text-2) !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  padding:14px 16px 0 !important;
  border:none !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
#page-costeos .card .chb::before {
  content:"";
  width:22px;
  height:22px;
  border-radius:5px;
  background-size:12px 12px;
  background-repeat:no-repeat;
  background-position:center;
  display:inline-block;
  flex-shrink:0;
}
#page-costeos .card .chb.orange::before {
  background-color:var(--m-orange-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>");
}
#page-costeos .card .chb.dark::before {
  background-color:var(--m-gray-soft, #f1f5f9);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/></svg>");
}
#page-costeos .card .chb.green::before {
  background-color:var(--m-green-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>");
}
#page-costeos .card .chb.teal::before {
  background-color:var(--info-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d6b6b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='9' y1='13' x2='15' y2='13'/><line x1='9' y1='17' x2='13' y2='17'/></svg>");
}
#page-costeos .card .chb.blue::before {
  background-color:var(--m-blue-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}
#page-costeos .card .cb {
  padding:14px 16px 16px !important;
  background:transparent !important;
}
#page-costeos .card .cb.tight {
  padding:12px 16px !important;
}
#page-costeos .fg label {
  font-size:10px !important;
  font-weight:600 !important;
  color:var(--m-text-2) !important;
  letter-spacing:0.8px !important;
  text-transform:uppercase !important;
  margin-bottom:4px !important;
  display:block !important;
}
#page-costeos .fg input, #page-costeos .fg select, #page-costeos input[type="text"], #page-costeos input[type="number"], #page-costeos input[type="date"], #page-costeos select {
  background:var(--m-surface) !important;
  border:1px solid var(--m-border) !important;
  border-radius:var(--m-radius-sm) !important;
  padding:8px 11px !important;
  font-size:13px !important;
  font-family:var(--m-font) !important;
  color:var(--m-text) !important;
  transition:border-color .15s, box-shadow .15s !important;
}
#page-costeos .fg input:focus, #page-costeos .fg select:focus, #page-costeos input:focus, #page-costeos select:focus {
  outline:none !important;
  border-color:var(--m-text-2) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.08) !important;
}
#page-costeos .btn {
  font-family:var(--m-font) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  padding:9px 16px !important;
  border-radius:var(--m-radius-sm) !important;
  border:none !important;
  cursor:pointer !important;
  letter-spacing:0.1px !important;
  transition:transform .08s, opacity .15s, box-shadow .15s !important;
}
#page-costeos .btn:hover {
  transform:translateY(-1px) !important;
  box-shadow:var(--m-shadow-hover) !important;
}
#page-costeos .btn-dark {
  background:var(--m-text) !important;
  color:var(--m-surface) !important;
}
#page-costeos .btn-green {
  background:var(--m-green) !important;
  color:#fff !important; /* theme-exempt: la tinta de noche se fija en el bloque dark */
}
#page-costeos .btn-orange {
  background:var(--m-text) !important; 
  color:var(--m-surface) !important;
}
#page-costeos .btn-red {
  background:var(--m-red) !important;
  color:#fff !important;
}
#page-costeos table {
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  font-family:var(--m-font) !important;
  font-size:12.5px !important;
}
#page-costeos thead th {
  background:transparent !important;
  color:var(--m-text-3) !important;
  font-size:9.5px !important;
  font-weight:700 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  padding:11px 8px !important;
  border-bottom:1px solid var(--m-border) !important;
}
#page-costeos tbody td {
  padding:8px 8px !important;
  border-bottom:1px solid var(--m-border) !important;
  font-size:12.5px !important;
  color:var(--m-text) !important;
  font-variant-numeric:tabular-nums !important;
}
#page-costeos tbody tr:hover {
  background:rgba(0,0,0,.015) !important;
}
#page-costeos tfoot td {
  background:var(--m-text) !important;
  color:var(--m-surface) !important;
  padding:11px 10px !important;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums !important;
}
 #page-costeos #recetas-prep-lista {
  background:transparent !important;
}
 #page-costeos #recetas-prep-lista > div {
  border-bottom:1px solid var(--m-border) !important;
  font-family:var(--m-font) !important;
}
#page-costeos #cst-menu > div > div > div[style*="background:#b45309"], #page-costeos #cst-menu > div > div > div[style*="background: #b45309"] {
  background:transparent !important;
  color:var(--m-text-2) !important;
  padding:14px 16px 8px !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  border-radius:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
#page-costeos #cst-menu > div > div > div[style*="background:#b45309"]::before, #page-costeos #cst-menu > div > div > div[style*="background: #b45309"]::before {
  content:"";
  width:22px;
  height:22px;
  border-radius:5px;
  background-color:var(--m-orange-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8h1a4 4 0 0 1 0 8h-1'/><path d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4z'/><line x1='6' y1='1' x2='6' y2='4'/><line x1='10' y1='1' x2='10' y2='4'/><line x1='14' y1='1' x2='14' y2='4'/></svg>");
  background-size:12px 12px;
  background-repeat:no-repeat;
  background-position:center;
  display:inline-block;
  flex-shrink:0;
}
#page-costeos #menu-list {
  background:var(--m-surface) !important;
  border:1px solid var(--m-border) !important;
  border-radius:var(--m-radius-lg) !important;
  box-shadow:var(--m-shadow-card) !important;
}
#page-costeos #cst-menu button[style*="background:#b45309"], #page-costeos #cst-menu button[style*="background: #b45309"] {
  background:var(--m-green) !important;
  color:#fff !important;
  border-radius:var(--m-radius-sm) !important;
  padding:9px 16px !important;
  font-weight:600 !important;
  font-size:12.5px !important;
}
#page-costeos #menu-editor-title {
  background:transparent !important;
  color:var(--m-text-2) !important;
}
#page-costeos .pb-context {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  padding:10px 14px;
  margin:10px 0 4px 0;
  background:var(--m-blue-soft, rgba(37,99,235,.06));
  border:1px solid rgba(37,99,235,.18);
  border-radius:var(--m-radius-sm);
  font-size:12px;
  color:var(--m-text-2);
}
#page-costeos .pb-context .ic-item {
  display:flex; align-items:center; gap:6px;
  font-weight:500;
}
#page-costeos .pb-context .ic-item strong {
  color:var(--m-text);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
#page-costeos .pb-context .ic-sep {
  color:var(--m-text-3);
  opacity:.5;
}
#page-costeos .pb-context .ic-warn {
  color:var(--warn-ink);
  font-weight:600;
}
#page-costeos .btn.cat-btn-outline, #page-costeos .btn.cat-btn-outline:hover {
  background:transparent !important;
  color:var(--m-text-2) !important;
  border:1px solid var(--m-border-strong, #cbd5e1) !important;
  font-weight:600 !important;
}
#page-costeos .btn.cat-btn-outline:hover {
  background:var(--m-bg-2, rgba(0,0,0,.03)) !important;
  border-color:var(--m-text-3) !important;
}
#page-costeos .pb-actions {
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-left:auto;
}
#page-costeos .cat-btn-outline.cat-btn-prov {
  border-color:rgba(37,99,235,.35) !important;
  color:var(--info) !important;
}
#page-costeos .cat-btn-outline.cat-btn-prov:hover {
  background:rgba(37,99,235,.06) !important;
  border-color:var(--info) !important;
}
#page-costeos .cat-btn-outline.cat-btn-cat {
  border-color:rgba(124,58,237,.35) !important;
  color:var(--viol) !important;
}
#page-costeos .cat-btn-outline.cat-btn-cat:hover {
  background:rgba(124,58,237,.06) !important;
  border-color:#7c3aed !important;
}
#page-costeos .pb-actions .btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
}
#page-costeos table.data-tbl thead th {
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:1.4px !important;
  color:var(--m-text-2) !important;
  padding:14px 8px 12px !important;
  text-transform:uppercase !important;
  background:transparent !important;
  border-bottom:1px solid var(--m-border) !important;
}
#page-costeos table.data-tbl tbody tr {
  border-bottom:1px solid var(--m-border) !important;
}
#page-costeos table.data-tbl tbody td {
  padding:12px 8px !important;
}
#page-costeos table.data-tbl tbody tr:hover {
  background:rgba(0,0,0,.015) !important;
}
#page-costeos table.data-tbl input.pb-precio, #page-costeos table.data-tbl input.pb-conv-cant {
  -moz-appearance:textfield !important;
}
#page-costeos table.data-tbl input.pb-precio::-webkit-outer-spin-button, #page-costeos table.data-tbl input.pb-precio::-webkit-inner-spin-button, #page-costeos table.data-tbl input.pb-conv-cant::-webkit-outer-spin-button, #page-costeos table.data-tbl input.pb-conv-cant::-webkit-inner-spin-button {
  -webkit-appearance:none !important;
  margin:0 !important;
}
#page-costeos table.data-tbl input.pb-precio {
  width:80px !important;
  padding:6px 10px !important;
  border:1px solid var(--m-border) !important;
  border-radius:6px !important;
  font-size:12px !important;
  font-weight:700 !important;
  text-align:right !important;
  font-family:'Courier New',monospace !important;
  background:var(--m-surface) !important;
  color:var(--m-text) !important;
}
#page-costeos table.data-tbl input.pb-precio:focus {
  border-color:var(--m-blue) !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.10) !important;
}
#page-costeos table.data-tbl input.pb-conv-cant {
  width:72px !important;
  padding:6px 8px !important;
  border:1px solid var(--m-border) !important;
  border-radius:6px !important;
  font-size:12px !important;
  font-weight:700 !important;
  text-align:right !important;
  font-family:'Courier New',monospace !important;
  background:var(--m-surface) !important;
  color:var(--m-text) !important;
}
#page-costeos table.data-tbl input.pb-conv-cant:focus {
  border-color:var(--m-blue) !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.10) !important;
}
#page-costeos table.data-tbl select.pb-conv-unidad {
  padding:6px 6px !important;
  border:1px solid var(--m-border) !important;
  border-radius:6px !important;
  font-size:11px !important;
  font-weight:600 !important;
  background:var(--m-surface) !important;
  color:var(--m-text) !important;
}
#page-costeos table.data-tbl button.btn-edit-sm {
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:5px 10px !important;
  border-radius:6px !important;
  font-size:11px !important;
  font-weight:600 !important;
  font-family:var(--m-font, 'Segoe UI', sans-serif) !important;
  cursor:pointer !important;
  transition:all .12s ease !important;
}
#page-costeos table.data-tbl button.btn-edit-sm:not(.fus-btn-neutral) {
  background:transparent !important;
  color:var(--ok-ink) !important;
  border:1px solid rgba(22,163,74,.4) !important;
}
#page-costeos table.data-tbl button.btn-edit-sm:not(.fus-btn-neutral):hover {
  background:rgba(22,163,74,.08) !important;
  border-color:#15803d !important;
}
#page-costeos table.data-tbl button.btn-del-sm {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  padding:0 !important;
  background:var(--danger) !important;
  color:#fff !important;
  border:none !important;
  border-radius:6px !important;
  font-size:0 !important; 
  cursor:pointer !important;
  position:relative !important;
}
#page-costeos table.data-tbl button.btn-del-sm:hover {
  background:var(--danger-d) !important;
}
#page-costeos table.data-tbl button.btn-del-sm::before {
  content:"";
  width:13px;
  height:13px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/></svg>");
  background-size:13px 13px;
  background-repeat:no-repeat;
}
#page-costeos table.data-tbl tbody td:nth-child(3) {
  color:var(--m-text-2) !important;
}
#page-costeos table.data-tbl tbody td:nth-child(6) span {
  color:var(--m-text-2) !important;
  font-weight:500 !important;
}
#page-costeos .rcta-search {
  width:100%;
  padding:8px 12px;
  border:1px solid var(--m-border);
  border-radius:8px;
  font-size:12px;
  font-family:var(--m-font, 'Segoe UI', sans-serif);
  background:var(--m-surface);
  color:var(--m-text);
  box-sizing:border-box;
  margin-bottom:8px;
}
#page-costeos .rcta-search:focus {
  outline:none;
  border-color:var(--m-blue);
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}
#page-costeos .rcta-search::placeholder {
  color:var(--m-text-3);
}
#page-costeos .mo-wrap {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}
@media (max-width:1100px) {
#page-costeos .mo-wrap {
    grid-template-columns:1fr;
  }
}
#page-costeos .mo-card {
  background:var(--m-surface);
  border:1px solid var(--m-border);
  border-radius:var(--m-radius-lg);
  padding:18px 22px;
  box-shadow:var(--m-shadow-card);
}
#page-costeos .mo-card-title {
  font-size:11px;
  font-weight:700;
  color:var(--m-text-2);
  text-transform:uppercase;
  letter-spacing:1.2px;
  margin-bottom:14px;
}
#page-costeos .mo-form {
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
#page-costeos .mo-field {
  display:flex;
  flex-direction:column;
  gap:4px;
}
#page-costeos .mo-label {
  font-size:10px;
  font-weight:700;
  color:var(--m-text-2);
  text-transform:uppercase;
  letter-spacing:.5px;
}
#page-costeos #mo-entidad {
  padding:8px 12px;
  border:1px solid var(--m-border);
  border-radius:8px;
  font-size:13px;
  background:var(--m-surface);
  color:var(--m-text);
  min-width:200px;
}
#page-costeos #mo-input {
  width:120px;
  padding:8px 12px;
  border:1px solid var(--m-border);
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  font-family:'Courier New', monospace;
  text-align:right;
  background:var(--m-surface);
  color:var(--m-text);
  font-variant-numeric:tabular-nums;
}
#page-costeos #mo-input:focus, #page-costeos #mo-entidad:focus {
  border-color:var(--m-blue);
  outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}
#page-costeos .mo-hint {
  font-size:11px;
  color:var(--m-text-2);
  font-style:italic;
}
#page-costeos .mo-tabla {
  display:flex;
  flex-direction:column;
  gap:8px;
}
#page-costeos .mo-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:var(--m-bg-2, rgba(0,0,0,.02));
  border-radius:8px;
}
#page-costeos .mo-row-ent {
  flex:1;
  font-size:13px;
  font-weight:600;
  color:var(--m-text);
}
#page-costeos .mo-row-val {
  font-size:14px;
  font-weight:700;
  font-family:'Courier New', monospace;
  color:var(--m-text);
  font-variant-numeric:tabular-nums;
}
#page-costeos .mo-warn {
  font-size:10px;
  font-weight:600;
  color:var(--warn-ink);
  background:rgba(180,83,9,.10);
  padding:3px 8px;
  border-radius:4px;
  text-transform:uppercase;
  letter-spacing:.4px;
}#page-costeos #cortes-vista-a > .card:first-child .rep-suc-toggle {height:34px !important;}
#page-costeos #cortes-vista-a > .card:first-child .rep-suc-pill {height:34px !important;}
#page-costeos .rp-skin .card {border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.04);overflow:hidden;}
#page-costeos .rp-skin .cb {padding:20px 22px;}
#page-costeos .rp-skin .rp-head {display:flex;align-items:center;gap:12px;margin-bottom:20px;}
#page-costeos .rp-skin .rp-head-ic {width:42px;height:42px;border-radius:10px;background:var(--info-soft);color:var(--info);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#page-costeos .rp-skin .rp-head-ic svg {width:22px;height:22px;}
#page-costeos .rp-skin .rp-title {font-size:18px;font-weight:600;color:var(--ink);line-height:1.2;}
#page-costeos .rp-skin .rp-sub {font-size:12px;color:var(--mut);margin-top:1px;}
#page-costeos .rp-skin .rp-metrics {display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
#page-costeos .rp-skin .rp-metric {flex:1 1 110px;background:var(--soft);border-radius:10px;padding:10px 12px;}
#page-costeos .rp-skin .rp-metric.rp-metric-name {flex:2 1 200px;}
#page-costeos .rp-skin .rp-metric label {display:block;font-size:11px;color:var(--mut);font-weight:600;margin-bottom:5px;text-transform:none;letter-spacing:0;}
#page-costeos .rp-skin .rp-metric input {width:100%;border:none;background:transparent;font-size:17px;font-weight:600;color:var(--ink);padding:0;outline:none;}
#page-costeos .rp-skin .rp-metric input::placeholder {color:var(--mut-2);}
#page-costeos .rp-skin .rp-sec-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
#page-costeos .rp-skin .rp-sec-title {font-size:14px;font-weight:600;color:var(--ink);}
#page-costeos .rp-skin .rp-add-btn {font-size:13px;padding:7px 13px;border:1px solid var(--line);background:var(--card);border-radius:9px;color:var(--ink);cursor:pointer;font-weight:600;}
#page-costeos .rp-skin .rp-add-btn:hover {background:var(--hover);}
#page-costeos .rp-skin table.data-tbl {border-collapse:separate;border-spacing:0;}
#page-costeos .rp-skin table.data-tbl th {font-size:11px;color:var(--mut);font-weight:600;text-transform:none;letter-spacing:0;border-bottom:1px solid var(--line);padding:6px 10px;background:transparent;}
#page-costeos .rp-skin .data-tbl tbody td {padding:9px 10px;border-bottom:1px solid var(--line-2);font-size:13px;}
#page-costeos .rp-skin .rp-summary {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:6px;}
#page-costeos .rp-skin .rp-hero {background:var(--ok-soft);border:1px solid var(--ok-border);border-radius:14px;padding:22px 24px;display:flex;flex-direction:column;justify-content:center;}
#page-costeos .rp-skin .rp-hero-top {display:flex;align-items:center;gap:8px;}
#page-costeos .rp-skin .rp-hero-ic {width:26px;height:26px;border-radius:50%;background:#0f6e56;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#page-costeos .rp-skin .rp-hero-ic svg {width:15px;height:15px;}
#page-costeos .rp-skin .rp-hero-label {font-size:13px;color:var(--ok-ink);font-weight:600;}
#page-costeos .rp-skin .rp-hero-val {font-size:46px;font-weight:700;color:var(--ok-ink);line-height:1;margin:10px 0 16px;font-family:'Courier New',monospace;letter-spacing:-1px;}
#page-costeos .rp-skin .rp-hero-stats {display:flex;align-items:center;gap:16px;flex-wrap:wrap;row-gap:10px;}
#page-costeos .rp-skin .rp-hero-stat-num {display:block;font-size:16px;font-weight:700;color:var(--ink);font-family:'Courier New',monospace;}
#page-costeos .rp-skin .rp-hero-stat-lbl {display:block;font-size:11px;color:var(--mut);margin-top:1px;}
#page-costeos .rp-skin .rp-hero-div {width:1px;align-self:stretch;background:rgba(15,110,86,.2);}
#page-costeos .rp-skin .rp-hero-sub {font-size:13px;color:var(--mut);margin-top:2px;}
#page-costeos .rp-skin .rp-hero-cap {font-size:11px;color:var(--mut);margin-top:8px;}
#page-costeos .rp-skin .rp-comp {background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;}
#page-costeos .rp-skin .rp-comp-title {font-size:13px;color:var(--mut);margin-bottom:12px;}
#page-costeos .rp-skin .rp-comp-row {display:flex;align-items:center;gap:14px;}
#page-costeos .rp-skin .rp-legend-item {display:flex;align-items:center;gap:8px;margin-bottom:8px;}
#page-costeos .rp-skin .rp-dot {width:9px;height:9px;border-radius:50%;flex-shrink:0;}
#page-costeos .rp-skin .rp-notas-label {font-size:12px;color:var(--mut);font-weight:600;margin-bottom:6px;}
#page-costeos .rp-skin .rp-btns {display:flex;gap:10px;margin-top:18px;}
#page-costeos .rp-skin .rp-btn-save {flex:1;background:var(--m-green);color:#fff;border:none;border-radius:10px;padding:11px;font-size:14px;font-weight:600;cursor:pointer;} /* theme-exempt: tinta de dia sobre el verde; la de noche se fija en el bloque dark */
#page-costeos .rp-skin .rp-btn-save:hover {background:var(--accent-d);}
#page-costeos .rp-skin .rp-btn-cancel {background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 18px;font-size:14px;color:var(--ink);cursor:pointer;font-weight:600;}
#page-costeos .rp-skin .rp-btn-cancel:hover {background:var(--hover);}
#page-costeos .rp-skin .rp-btn-del {background:var(--card);border:1px solid var(--danger-border);color:var(--danger-ink);border-radius:10px;padding:11px 14px;font-size:14px;cursor:pointer;font-weight:600;}
#page-costeos{display:block!important;}
#page-costeos .card{display:block!important;}
#page-costeos .modal{display:none;}
#page-costeos .modal.open{display:flex;}

/* ===== Formato PRO del modal "Editar producto" ===== */
#page-costeos #cost-modal-prod .modal-box{width:min(600px,94vw)!important;max-width:600px!important;padding:22px 24px!important;border-radius:14px!important;}
#page-costeos #cost-modal-prod .modal-title{font-size:17px!important;margin-bottom:16px!important;}
#page-costeos #cost-modal-prod .mf{margin-bottom:14px;}
#page-costeos #cost-modal-prod .mf > label{font-size:11px!important;color:var(--mut)!important;font-weight:700!important;letter-spacing:.5px!important;margin-bottom:6px!important;display:block;text-transform:uppercase;}
/* Inputs + selects UNIFICADOS (mismo alto, borde, radio, foco) */
#page-costeos #cost-modal-prod .mf input, #page-costeos #cost-modal-prod .mf select{width:100%;height:42px!important;padding:0 12px!important;border:1.5px solid var(--line)!important;border-radius:10px!important;font-size:14px!important;color:#1f2937!important;background:var(--card)!important;box-sizing:border-box;transition:border-color .12s ease,box-shadow .12s ease;}
#page-costeos #cost-modal-prod .mf input:focus, #page-costeos #cost-modal-prod .mf select:focus{border-color:#16a34a!important;box-shadow:0 0 0 3px rgba(22,163,74,.12)!important;outline:none;}
#page-costeos #cost-modal-prod .mf select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:34px!important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;}
/* Sucursales como PILLS compactas (mayor especificidad para ganarle a .mf label) */
#page-costeos #cost-modal-prod #cost-mp-sucs{display:flex!important;flex-wrap:wrap;gap:8px;margin-top:4px;}
#page-costeos #cost-modal-prod #cost-mp-sucs .cost-suc-pill{display:inline-flex!important;align-items:center;gap:8px;height:34px;padding:0 12px!important;margin:0!important;border:1.5px solid var(--line);border-radius:10px;font-size:13px!important;font-weight:600!important;color:#3a4150!important;background:var(--card);cursor:pointer;text-transform:none!important;letter-spacing:normal!important;user-select:none;transition:border-color .12s ease,background .12s ease,color .12s ease,box-shadow .12s ease;}
#page-costeos #cost-modal-prod #cost-mp-sucs .cost-suc-pill:hover{border-color:#9aa6b6;}
#page-costeos #cost-modal-prod #cost-mp-sucs .cost-suc-pill:has(input:checked){border-color:var(--pc,#16a34a);background:var(--pcbg,#ecfdf3);color:var(--pc,#0f5132)!important;box-shadow:inset 0 0 0 1px var(--pc,#16a34a);}
#page-costeos #cost-modal-prod #cost-mp-sucs input{width:16px!important;height:16px!important;min-width:16px;flex:0 0 auto;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;accent-color:var(--pc,#16a34a);cursor:pointer;}
/* Footer estilo mockup: Guardar verde, Cancelar y Eliminar en outline */
#page-costeos #cost-modal-prod .modal-btns{gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid #edf0f4;align-items:center;}
#page-costeos #cost-modal-prod .modal-btns .btn{height:40px;padding:0 20px;border-radius:11px;font-size:14px;font-weight:700;box-shadow:none;transition:transform .12s ease,background .12s ease,border-color .12s ease;}
#page-costeos #cost-modal-prod .modal-btns .btn:hover{transform:translateY(-1px);opacity:1;}
#page-costeos #cost-modal-prod .modal-btns .btn:active{transform:translateY(0);}
#page-costeos #cost-modal-prod .modal-btns .btn-green{background:var(--m-green);color:#fff;} /* theme-exempt: tinta de dia sobre el verde; la de noche se fija en el bloque dark */
#page-costeos #cost-modal-prod .modal-btns .btn-green:hover{background:#12833c;box-shadow:0 6px 16px -6px rgba(22,163,74,.55);}
#page-costeos #cost-modal-prod .modal-btns .btn-dark{background:var(--card)!important;color:#3a4150!important;border:1.5px solid var(--line)!important;}
#page-costeos #cost-modal-prod .modal-btns .btn-dark:hover{background:var(--wash)!important;border-color:#9aa6b6!important;}
#page-costeos #cost-modal-prod .modal-btns .btn-red{background:var(--card)!important;color:var(--danger-ink)!important;border:1.5px solid var(--danger-border)!important;margin-left:auto;}
#page-costeos #cost-modal-prod .modal-btns .btn-red:hover{background:var(--danger-soft)!important;border-color:#e11d48!important;}

/* ===== MODO NOCHE — override de tokens internos del módulo ===== */
html[data-theme="dark"] #page-costeos {background:var(--bg);}
html[data-theme="dark"] #page-costeos{
  --dp-bg:#121419; --dp-surface:#1e2127; --dp-border:#313640; --dp-border-soft:#272b31;
  --dp-text:#e7e9ec; --dp-text-muted:#9aa2ae; --dp-text-soft:#727a86;
  --dp-primary:#8b93ff; --dp-primary-hover:#a3a9ff;
  --dp-success:#3ddc84; --dp-danger:#f26157; --dp-warning:#f7b83d; --dp-info:#5bb0e8;
  --dp-shadow-card:0 1px 2px rgba(0,0,0,.5); --dp-shadow-hover:0 8px 24px rgba(0,0,0,.55);
  --m-bg:#121419; --m-surface:#1e2127; --m-border:#313640; --m-border-strong:#3b414c;
  --m-text:#e7e9ec; --m-text-2:#9aa2ae; --m-text-3:#8f97a3; --m-accent:#e7e9ec; /* theme-exempt: definicion de tokens del bloque noche */
  --m-blue:#5b93ff; --m-blue-soft:#15203a; --m-green:#3ddc84; --m-green-soft:#122a1e;
  --m-red:#f26157; --m-red-soft:#2c1614; --m-orange:#ff8a4c; --m-orange-soft:#2a1a10;
  --m-purple:#a98bf0; --m-purple-soft:#201934; --m-gray-soft:#23262c; --m-bg-2:#23262c; /* theme-exempt: definicion de tokens del bloque noche */
  --m-shadow-card:0 1px 2px rgba(0,0,0,.5); --m-shadow-hover:0 6px 18px rgba(0,0,0,.55);
}
/* Zebra/hover que en claro eran lavados de negro casi invisibles: se vuelven lavados de blanco */
html[data-theme="dark"] #page-costeos tr:hover td,
html[data-theme="dark"] #page-costeos .row:hover,
html[data-theme="dark"] #page-costeos .hoverable:hover{background:rgba(255,255,255,.04);}

/* Modo noche: modal "Editar producto" (tenía tintas oscuras hardcodeadas) */
html[data-theme="dark"] #page-costeos #cost-modal-prod .mf input,
html[data-theme="dark"] #page-costeos #cost-modal-prod .mf select,
html[data-theme="dark"] #page-costeos #cost-modal-prod #cost-mp-sucs .cost-suc-pill,
html[data-theme="dark"] #page-costeos #cost-modal-prod .modal-btns .btn-dark{color:var(--ink)!important}
html[data-theme="dark"] #page-costeos #cost-modal-prod .modal-btns{border-top-color:var(--line)}
html[data-theme="dark"] #page-costeos #cost-modal-prod #cost-mp-sucs .cost-suc-pill:has(input:checked){background:var(--ok-soft)!important;color:var(--ok-ink)!important;border-color:var(--ok-border)!important;box-shadow:inset 0 0 0 1px var(--ok)!important;accent-color:var(--ok)!important}

/* Boton verde: --m-green es una menta pensada como TINTA sobre fondo oscuro; de
 * relleno con letra blanca daba 1.78:1. De noche la etiqueta va oscura (10.3:1). */
html[data-theme="dark"] #page-costeos .btn-green,
html[data-theme="dark"] #page-costeos .btn-red{color:var(--bg)!important}
html[data-theme="dark"] #page-costeos .rp-skin .rp-btn-save{color:var(--bg)!important}
/* Sub-pestana activa: de noche la tarjeta es MAS oscura que la franja y la sombra
 * negra no se ve. Mismo remedio que .segtab.on en theme.css. */
html[data-theme="dark"] #page-costeos .cst-subtab.active{background:var(--hover)!important}
/* Disco del icono "$" del panel "Costo unitario final": llevaba clavado el valor
 * de DIA de --ok-d y el panel si oscurece, asi que el disco se fundia (2.46:1). */
html[data-theme="dark"] #page-costeos .rp-skin .rp-hero-ic{background:var(--ok);color:var(--ok-soft)}

/* ===== LAYOUT RESPONSIVO — clases que sustituyen al style= inline de costeos.js =====
   El corte es 820px porque es el que usa el cascaron (admin.css); costeos.css tenia
   cortes propios en 1024/1180/1100/880/720 y la franja del iPad vertical (768) caia
   en tierra de nadie. */

/* Recetas de preparacion y Productos CEDIS (costeos.js:131 y :167). El grid vivia en
   el atributo style=, o sea con especificidad infinita: la unica forma de colapsarlo
   era !important desde la hoja global. Ya como clase, la media query basta. */
#page-costeos .rcta-split { display:grid; grid-template-columns:260px 1fr; gap:16px; }

/* Catalogo de insumos (costeos.js:79). El wrapper usa .scrollx, que HOY solo esta
   definida en admin.css:969 (Tanda 2). Si costeos.* sube sin ese admin.css, el
   wrapper se queda sin overflow y la tabla — que al quitarle el min-width:0 inline
   recupera los 700px de costeos.css:33 — la recorta html,body{overflow-x:hidden}
   dejando CATEGORIA / P.COMPRA / ACCIONES fisicamente inalcanzables en telefono.
   Se redeclara aqui, identica, para que el modulo no dependa del orden de despliegue. */
#page-costeos .scrollx { overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }

/* Menu (costeos.js:199). Idem: fila flex con barra lateral de 300px inmovible. */
#page-costeos .menu-split { display:flex; gap:12px; min-height:500px; }
#page-costeos .menu-split-side { width:300px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; }

@media (max-width:820px) {
  /* Una sola columna: el editor deja de nacer fuera del viewport.
     Dos mecanismos DISTINTOS, no uno:
      - minmax(0,1fr) fija la PISTA. Un `1fr` pelado es minmax(auto,1fr) y su base
        sale del minimo de los items, o sea la pista podria crecer por encima del
        ancho del contenedor.
      - min-width:0 fija el ITEM. minmax(0,1fr) NO lo hace: un grid item con
        min-width:auto sigue midiendo su min-content y desborda su propia pista.
        Aqui el item 1 (.card) ya esta cubierto por overflow:hidden (costeos.css:5)
        y las tablas de 480px del item 2 viven en un wrapper overflow-x:auto, pero
        se declara explicito para que no dependa de eso. */
  #page-costeos .rcta-split { grid-template-columns:minmax(0,1fr); }
  #page-costeos .rcta-split > * { min-width:0; }

  /* min-height:500px sobre una columna apilada es medio telefono de aire muerto
     antes de llegar al editor. */
  #page-costeos .menu-split { flex-direction:column; min-height:0; }
  #page-costeos .menu-split-side { width:auto; }
  /* El arbol es flex:1 con overflow propio: apilado crece sin techo y empuja el
     editor de platillo por debajo del pliegue. */
  #page-costeos #menu-arbol { max-height:240px; }

  /* Las dos tarjetas Top 10 a 1fr 1fr dejan ~180px por tarjeta: el nombre del
     producto desaparecia entero y solo quedaba el importe. */
  #page-costeos .top10-grid { grid-template-columns:1fr; }
}

/* OJO — REGLA PREVENTIVA, HOY NO PINTA NADA. Verificado con grep en todo el repo:
   ni `b4-delx` ni la clase `has-del` se generan en ningun sitio. renderDetalleCompras()
   (costeos.js:1453) emite 8 <td> sin boton de borrar y sin has-del en el <tr>; las
   unicas apariciones de b4-delx en el arbol son estas reglas y sus gemelas del CSS
   embebido de nomina.js:7090-7092, que tampoco tienen HTML detras.
   O sea: NO es que en tactil no se pudiera borrar una compra — no se puede borrar en
   NINGUN dispositivo porque el boton no existe. Esto queda como red de seguridad para
   cuando se implemente el borrado; NO cuenta como bug movil arreglado. */
@media (hover:none) {
  #page-costeos #rep-pane-compras .b4-dt tbody tr.has-del .b4-delx { opacity:1; pointer-events:auto; }
}