:root{--navy:#082f61;--blue:#087fea;--red:#e62442;--orange:#ff7a1a;--yellow:#ffc72c;--ink:#10233f;--muted:#64748b;--line:#d9e3ef;--bg:#eef4fa;--white:#fff;--green:#14804a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px Inter,Segoe UI,Arial,sans-serif}.topbar{min-height:72px;padding:12px clamp(16px,4vw,56px);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(105deg,#061f43,var(--navy));border-bottom:4px solid transparent;border-image:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--blue)) 1;color:#fff}.brand{display:flex;align-items:center;gap:10px}.brand-mark{background:linear-gradient(135deg,var(--red),var(--orange));padding:8px;border-radius:12px;font-size:22px;font-weight:950}.brand b{font-size:22px;letter-spacing:1px}.brand small{display:block;color:#cbdcf2}main{max-width:1500px;margin:auto;padding:24px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}.page-head h1{font-size:30px;margin:0}.page-head p,.dialog header p{color:var(--muted);margin:5px 0 0}.head-actions,.inline{display:flex;gap:8px}.btn{border:1px solid #bfd0e3;border-radius:11px;background:#fff;color:var(--navy);padding:11px 14px;font-weight:800;cursor:pointer;box-shadow:0 3px 10px #193b6120}.btn:hover{transform:translateY(-1px);border-color:var(--blue)}.btn.primary{border:0;background:linear-gradient(115deg,var(--orange),var(--red));color:#fff}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.summary article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 8px 20px #183b6110}.summary span{display:block;color:var(--muted);font-weight:700}.summary strong{display:block;margin-top:8px;font-size:24px;color:var(--navy)}.catalog{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 14px 35px #17375b14}.tools{display:flex;gap:10px;padding:14px;border-bottom:1px solid var(--line)}.search{display:flex;align-items:center;gap:10px;flex:1;border:2px solid #b9d3ec;border-radius:12px;padding:0 14px;font-size:22px;color:var(--blue)}input,select,textarea{width:100%;border:1px solid #c8d6e5;border-radius:9px;padding:10px 11px;background:#fff;color:var(--ink);font:inherit}input:focus,select:focus,textarea:focus{outline:3px solid #0785ef20;border-color:var(--blue)}.search input{border:0;outline:0;padding:11px 0;font-size:15px}.tools select{width:190px}.table-wrap{overflow:auto;min-height:410px;position:relative}table{width:100%;border-collapse:collapse;min-width:1050px}th{background:var(--navy);color:#fff;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.35px;padding:14px 12px}td{padding:13px 12px;border-bottom:1px solid #e6edf5;vertical-align:middle}tbody tr:hover{background:#f5faff}.product-name{font-weight:850}.muted{margin-top:3px;color:var(--muted);font-size:12px}.num{text-align:right;white-space:nowrap}.pill{display:inline-flex;border-radius:99px;padding:5px 9px;background:#e8f7ef;color:var(--green);font-size:11px;font-weight:850}.pill.low,.pill.off{background:#fff0f1;color:#bd2440}.actions{white-space:nowrap}.actions button{border:0;background:transparent;color:var(--blue);font-weight:800;cursor:pointer;padding:7px}.actions .danger{color:var(--red)}.empty{position:absolute;inset:70px 0 0;display:grid;place-content:center;text-align:center;color:var(--muted)}.empty[hidden]{display:none}.empty span{font-size:54px;color:#b5c8dc}.empty h2{color:var(--ink);margin-bottom:0}.modal{position:fixed;z-index:50;inset:0;display:none;place-items:center;padding:20px;background:#07182db5;backdrop-filter:blur(5px)}.modal.open{display:grid}.dialog{width:min(720px,100%);max-height:94vh;display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 25px 70px #0006}.dialog.wide{width:min(980px,100%)}.dialog.prices{width:min(1050px,100%)}.dialog>header{display:flex;justify-content:space-between;align-items:start;padding:20px 22px;background:linear-gradient(100deg,#f8fbff,#fff8e8);border-bottom:3px solid var(--orange)}.dialog h2{margin:0}.close{border:0;border-radius:9px;width:38px;height:38px;background:#e8eef6;color:var(--navy);font-size:24px;cursor:pointer}.dialog footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;background:#f6f9fc;border-top:1px solid var(--line)}form{padding:18px 22px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:13px}form h3{grid-column:1/-1;margin:8px 0 0;padding-bottom:7px;border-bottom:1px solid var(--line);color:var(--navy)}form label{display:grid;gap:6px;font-size:12px;font-weight:800}.span2{grid-column:1/-1}.check{display:flex;align-items:center}.check input{width:auto}.inline input{flex:1}.inline .btn{box-shadow:none}.error{min-height:18px;color:var(--red);font-weight:800}.price-tools{padding:12px 16px}.price-list{overflow:auto;padding:0 16px 16px}.price-row{display:grid;grid-template-columns:minmax(230px,1fr) repeat(4,120px) 90px;gap:9px;align-items:end;padding:10px;border-bottom:1px solid var(--line)}.price-row label{font-size:10px;color:var(--muted);font-weight:800}.price-row b{align-self:center}.toast{position:fixed;right:20px;bottom:20px;z-index:100;transform:translateY(100px);opacity:0;padding:12px 16px;border-radius:10px;background:var(--navy);color:#fff;font-weight:800;transition:.2s}.toast.show{transform:none;opacity:1}@media(max-width:850px){main{padding:14px}.page-head{align-items:stretch;flex-direction:column}.head-actions{flex-wrap:wrap}.summary{grid-template-columns:1fr 1fr}.tools{flex-direction:column}.tools select{width:100%}.price-row{grid-template-columns:1fr 1fr}.price-row>b{grid-column:1/-1}form{grid-template-columns:1fr}.span2,form h3{grid-column:auto}}@media print{.topbar,.page-head,.tools,.actions{display:none!important}body{background:#fff}main{max-width:none;padding:0}.catalog{box-shadow:none;border:0}.summary{grid-template-columns:repeat(4,1fr)}.table-wrap{overflow:visible;min-height:0}}

/* ================================================================
   CAPA VISUAL 504 — alineada con Administración
   Solo presentación; catálogo, formularios y persistencia intactos.
   ================================================================ */
:root {
  --bg-app:#f4f7f9;
  --brand-red:#FF416C;
  --brand-orange:#FF4B2B;
  --brand-yellow:#FFD93D;
  --navy:#0B2447;
  --navy-light:#193D71;
  --text-main:#1e293b;
  --text-muted:#64748b;
  --card-bg:#fff;
  --border-color:#e2e8f0;
  --radius:16px;
  --shadow-sm:0 4px 10px rgba(0,0,0,.03);
  --shadow-md:0 10px 25px -5px rgba(11,36,71,.08);
}
body { background:var(--bg-app); color:var(--text-main); }
.topbar {
  background:#fff;
  color:var(--navy);
  border-bottom:1px solid var(--border-color);
  box-shadow:var(--shadow-sm);
  position:relative;
}
.topbar::after {
  content:""; position:absolute; right:0; bottom:-1px; left:0; height:3px;
  background:linear-gradient(90deg,var(--brand-red),var(--brand-orange),var(--brand-yellow),var(--navy));
}
.brand, .head-actions { color:var(--navy); }
.brand-mark { background:linear-gradient(135deg,var(--brand-red),var(--brand-orange)); box-shadow:0 5px 12px rgba(255,65,108,.20); }
.btn, .head-actions button {
  border:1px solid var(--border-color); border-radius:11px; background:#fff; color:var(--navy);
  box-shadow:var(--shadow-sm); transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover, .head-actions button:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn.primary, .primary-action { border:0; color:#fff; background:linear-gradient(135deg,var(--brand-red),var(--brand-orange)); box-shadow:0 5px 0 #c62b27,0 10px 18px rgba(255,75,43,.17); }
.btn.primary:active, .primary-action:active { transform:translateY(3px); box-shadow:0 2px 0 #c62b27; }
.summary > *, .catalog, .card, .table-wrap {
  background:var(--card-bg); border-color:var(--border-color); border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.summary > * { position:relative; overflow:hidden; }
.summary > *::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(var(--navy-light),var(--brand-red),var(--brand-yellow)); }
.tools, .catalog-tools { background:#fff; border-color:var(--border-color); }
.search, .tools input, .tools select, .catalog-tools input, .catalog-tools select {
  border-color:#cbd5e1; border-radius:11px; background:#fff;
}
.search:focus-within, .tools input:focus, .tools select:focus { border-color:var(--navy-light); box-shadow:0 0 0 4px rgba(25,61,113,.10); outline:0; }
table thead, .product-table th { background:#eef4fa; color:var(--navy); }
table tbody tr:hover, .product-table tbody tr:hover { background:#f8fbff; }
.modal, .dialog, .product-modal { border-radius:20px; border:1px solid rgba(255,255,255,.7); box-shadow:0 28px 70px rgba(11,36,71,.28); }
.modal-overlay, .modal-layer { background:rgba(11,36,71,.72); }
.modal-header, .dialog-head, .modal-title { background:linear-gradient(110deg,#eaf3fb,#fff 55%,#fff5e7); border-bottom:3px solid var(--brand-yellow); }

/* Ajuste fino: mismos encabezados de tabla y modales que Administración. */
.topbar { min-height:70px; padding:14px 30px; }
.topbar .brand b { color:var(--navy); font-size:1.1rem; }
.topbar .brand small { color:var(--text-muted); }
main { max-width:none; width:100%; padding:28px 32px; }
.page-head h1 { color:var(--navy); font-size:1.7rem; }
.page-head p { color:var(--text-muted); }
.summary article { padding:20px 22px; }
.summary article:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.catalog { box-shadow:var(--shadow-sm); }
.catalog .tools { padding:16px 18px; }
.catalog table th { background:var(--navy); color:#fff; padding:14px 12px; }
.catalog table td { color:var(--text-main); }
.dialog > header {
  background:linear-gradient(110deg,#eaf3fb,#fff 55%,#fff5e7);
  color:var(--text-main);
  border-bottom:3px solid var(--brand-yellow);
  box-shadow:none;
}
.dialog > header h2 { color:var(--navy); }
.dialog footer { background:#f8fafc; border-color:var(--border-color); }
.close { border:1px solid var(--border-color); background:#fff; color:var(--navy); }
.close:hover { background:#fff5f7; border-color:rgba(255,65,108,.35); color:var(--brand-red); }
@media(max-width:850px){main{padding:18px 14px}.topbar{padding:12px 14px}}

/* Trazabilidad visible en el detalle; la tabla principal permanece compacta. */
.traceability{margin-top:6px;border:1px solid var(--border-color);border-radius:13px;background:#f8fbff;overflow:hidden}
.traceability[hidden]{display:none}
.traceability-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border-color);background:#eef5fb}
.traceability-head h3{margin:0!important;padding:0!important;border:0!important;font-size:15px}
.traceability-head p{margin:3px 0 0;color:var(--text-muted);font-size:11px;font-weight:500}
.traceability-count{white-space:nowrap;border-radius:999px;padding:5px 9px;background:#fff;color:var(--navy-light);font-size:11px;font-weight:800}
.traceability-table-wrap{max-height:230px;overflow:auto}
.traceability-table{min-width:720px;background:#fff}
.traceability-table th{position:sticky;top:0;padding:9px 10px!important;background:var(--navy)!important;color:#fff!important;font-size:10px}
.traceability-table td{padding:9px 10px;font-size:12px}
.trace-state{display:inline-flex;border-radius:999px;padding:4px 8px;background:#e8f7ef;color:var(--green);font-size:10px;font-weight:800}
.traceability-empty{margin:0;padding:18px;text-align:center;color:var(--text-muted);font-size:12px}
.unit-cost-dialog{width:min(1080px,96vw)}
.unit-cost-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 20px;border-bottom:1px solid var(--border-color);background:#f8fafc;color:var(--navy)}
.unit-cost-summary span{font-weight:900}.unit-cost-summary b{padding:5px 9px;border-radius:999px;background:#e8f7ef;color:var(--green);font-size:11px}
.unit-cost-table-wrap{max-height:min(58vh,520px);overflow:auto;padding:0 18px 16px}
.unit-cost-table{min-width:820px;background:#fff}
.unit-cost-table th{position:sticky;top:0;z-index:2;padding:11px 10px!important;background:var(--navy)!important;color:#fff!important;font-size:10px}
.unit-cost-table td{padding:11px 10px;font-size:12px}
.unit-cost-table td:nth-child(2){color:var(--navy);font-size:13px}