*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f5f4f0; --surface: #ffffff; --surface2: #f0ede8;
  --border: #dddad4; --border2: #ccc9c2;
  --text: #1a1917; --text2: #6b6860;
  --green: #1D9E75; --green-bg: #E1F5EE; --green-dark: #085041;
  --amber: #BA7517; --amber-bg: #FAEEDA; --amber-dark: #412402;
  --red: #993C1D; --red-bg: #FAECE7;
  --blue: #185FA5; --blue-bg: #E6F1FB; --blue-dark: #042C53;
  --purple: #6B3FA0; --purple-bg: #F0EAF9;
  --gray: #5a5856; --gray-bg: #EDEDEB;
  --radius: 10px; --radius-sm: 6px;
}
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; margin: 0; padding: 0; }
.app { padding: 2rem 1.5rem; max-width: 100%; width: 100%; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:12px; }
.page-header h1 { font-size:22px; font-weight:700; }
.page-header p { font-size:13px; color:var(--text2); margin-top:3px; }
.stats-strip { display:flex; gap:12px; margin-bottom:1.5rem; flex-wrap:wrap; }
.stat-chip { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 16px; font-size:13px; }
.stat-chip strong { font-size:20px; display:block; font-weight:700; }
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { background:var(--surface2); padding:10px 12px; text-align:left; font-size:11px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); cursor:pointer; user-select:none; white-space:nowrap; }
thead th:hover { background:#e8e5e0; color:var(--text); }
tbody td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--surface2); }
.pill { display:inline-block; font-size:11px; padding:2px 9px; border-radius:20px; font-weight:600; }
.fr-high { color:var(--green-dark); background:var(--green-bg); }
.fr-mid  { color:var(--amber-dark); background:var(--amber-bg); }
.fr-low  { color:var(--red);        background:var(--red-bg); }
.mono { font-family: 'Courier New', monospace; font-size:12px; }
.loading-row td { text-align:center; padding:3rem; color:var(--text2); }
.spinner { width:18px; height:18px; border:2.5px solid var(--border); border-top-color:var(--blue); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; vertical-align:middle; margin-right:8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.toolbar { display:flex; gap:8px; margin-bottom:12px; align-items:center; flex-wrap:wrap; }
.btn-sm { padding:6px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); font-size:12px; cursor:pointer; font-family:inherit; color:var(--text); }
.btn-sm:hover { background:var(--surface2); }
.search-input { padding:6px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; outline:none; width:220px; }
.search-input:focus { border-color:var(--blue); }
/* Modal */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:var(--surface); border-radius:var(--radius); max-width:900px; width:100%; max-height:85vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.modal-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h2 { font-size:16px; font-weight:700; }
.modal-close { cursor:pointer; font-size:20px; color:var(--text2); background:none; border:none; padding:4px 8px; border-radius:4px; }
.modal-close:hover { background:var(--surface2); }
.modal-body { overflow-y:auto; flex:1; padding:16px; }
.modal-table { width:100%; border-collapse:collapse; font-size:12px; }
.modal-table th { background:var(--surface2); padding:7px 10px; text-align:left; font-size:10px; font-weight:600; color:var(--text2); text-transform:uppercase; border-bottom:1px solid var(--border); }
.modal-table td { padding:7px 10px; border-bottom:1px solid var(--border); }
.modal-table tr:last-child td { border-bottom:none; }
.row-ok td { background:#1D9E750a; } .row-warn td { background:#BA751710; }
.row-mv td { background:#993C1D0d; } .row-moc td { background:#185FA50d; }
.row-nostock td { background:#6B3FA00d; }
.p-ok { background:#9FE1CB; color:#04342C; } .p-warn { background:#FAC775; color:#412402; }
.p-mv { background:#F5C4B3; color:#4A1B0C; } .p-moc { background:#B5D4F4; color:#042C53; }
.p-nostock { background:#D8C4F0; color:#3B1A6E; }

/* Tabla que ocupa todo el ancho disponible */
.table-scroll-wrap { border-radius: var(--radius); border: 1px solid var(--border); overflow-x: auto; }
.table-scroll-wrap table { width: 100%; min-width: 0; }
thead th { font-size: 10px; padding: 8px 10px; white-space: nowrap; }
tbody td { font-size: 12px; padding: 8px 10px; white-space: nowrap; }
.col-fecha  { min-width: 130px; }
.col-oc     { min-width: 60px; }
.col-suc    { min-width: 160px; white-space: normal !important; word-break: break-word; }
.col-num    { min-width: 45px; }
.col-fr     { min-width: 75px; }
.col-money  { min-width: 100px; }