@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#EEF1F5;
  --surface:#FFFFFF;
  --surface-2:#F5F7FA;
  --border:#DDE2E9;
  --border-strong:#C3CAD4;
  --text:#0F1520;
  --text-soft:#565E6E;
  --text-faint:#868EA0;
  --accent:#1B4DB3;
  --accent-hover:#143A88;
  --accent-soft:#E7EEFB;
  --warn:#A65A0B;
  --warn-bg:#FDF2E0;
  --warn-border:#EFD3A3;
  --danger:#B32438;
  --danger-bg:#FCEBEE;
  --ok:#177C50;
  --ok-bg:#E4F4EC;
  --gasto:#8E2A3F;
  --gasto-soft:#F6E7EA;
  --shadow-sm:0 1px 2px rgba(15,21,32,.04), 0 1px 3px rgba(15,21,32,.06);
  --shadow-md:0 2px 8px rgba(15,21,32,.06), 0 4px 16px rgba(15,21,32,.05);
  --shadow-lg:0 12px 32px rgba(15,21,32,.12);
  --radius:9px;
  --radius-lg:13px;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;}
.inv-root{
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(circle at 1px 1px, rgba(15,21,32,.028) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg);
  min-height:100vh;
  padding:0;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'tnum' 1, 'cv01' 1;
}
.inv-root button{font-family:var(--font-body);cursor:pointer;}
.inv-root input,.inv-root select,.inv-root textarea{font-family:var(--font-body);}
.inv-root ::selection{background:var(--accent-soft);}

/* ---------- Nav sidebar (módulos) ---------- */
.app-shell{display:flex;min-height:100vh;}
.nav-sidebar{
  width:248px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:0;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.nav-brand{
  display:flex;align-items:center;gap:12px;padding:20px 20px 18px;border-bottom:1px solid var(--border);
}
.nav-brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(145deg, var(--accent) 0%, var(--accent-hover) 100%);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 6px rgba(27,77,179,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-brand-mark svg{width:20px;height:20px;stroke:#fff;}
.nav-brand h1{font-family:var(--font-display);font-size:15.5px;font-weight:600;margin:0;letter-spacing:-0.015em;line-height:1.2;}
.nav-brand span{font-size:10.5px;color:var(--text-faint);font-family:var(--font-mono);letter-spacing:.02em;}
.nav-menu{padding:12px 12px 20px;display:flex;flex-direction:column;gap:2px;flex:1;}
.nav-section-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);
  font-weight:700;padding:14px 12px 6px;
}
.nav-menu .nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;
  font-size:13.5px;color:var(--text-soft);font-weight:500;cursor:pointer;border:none;background:none;
  text-align:left;width:100%;font-family:var(--font-body);transition:background .12s ease, color .12s ease;
}
.nav-menu .nav-item svg{width:18px;height:18px;flex-shrink:0;}
.nav-menu .nav-item:hover{background:var(--surface-2);color:var(--text);}
.nav-menu .nav-item.active{background:var(--accent-soft);color:var(--accent-hover);font-weight:600;}
.nav-menu .nav-item.active svg{color:var(--accent-hover);}
.nav-menu .nav-item.disabled{color:var(--text-faint);cursor:default;opacity:.7;}
.nav-menu .nav-item.disabled:hover{background:none;color:var(--text-faint);}
.nav-soon{
  margin-left:auto;font-size:9px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  background:var(--surface-2);color:var(--text-faint);padding:2px 6px;border-radius:5px;border:1px solid var(--border);
}
.app-content{flex:1;min-width:0;display:flex;flex-direction:column;}
@media (max-width:900px){
  .app-shell{flex-direction:column;}
  .nav-sidebar{width:auto;height:auto;position:relative;flex-direction:column;border-right:none;border-bottom:1px solid var(--border);}
  .nav-menu{flex-direction:row;flex-wrap:wrap;gap:4px;}
  .nav-section-label{display:none;}
  .nav-item{width:auto;}
  .nav-soon{display:none;}
}

/* ---------- Header ---------- */
.inv-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 26px;background:var(--surface);
  border-bottom:1px solid var(--border);gap:16px;flex-wrap:wrap;
  box-shadow:var(--shadow-sm);position:relative;z-index:10;
}
.inv-brand{display:flex;align-items:center;gap:13px;}
.inv-brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(145deg, var(--accent) 0%, var(--accent-hover) 100%);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 6px rgba(27,77,179,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.inv-brand-mark svg{width:20px;height:20px;stroke:#fff;}
.inv-brand h1{
  font-family:var(--font-display);font-size:17.5px;font-weight:600;margin:0;letter-spacing:-0.015em;
}
.inv-brand span{font-size:11px;color:var(--text-faint);font-family:var(--font-mono);letter-spacing:.02em;}
.inv-header-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.menu-wrap{position:relative;}
.dropdown-menu{
  position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:210px;z-index:150;padding:6px;
}
.dropdown-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;background:none;border:none;
  font-size:13px;color:var(--text);text-align:left;border-radius:6px;cursor:pointer;font-family:var(--font-body);
  transition:background .12s ease;
}
.dropdown-item:hover{background:var(--surface-2);}
.dropdown-item svg{width:14px;height:14px;flex-shrink:0;color:var(--text-soft);}
.role-switch{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-soft);margin-right:6px;}
.role-switch select,.role-switch input{
  padding:7px 10px;border:1px solid var(--border-strong);border-radius:7px;font-size:12.5px;
  background:var(--surface-2);color:var(--text);font-weight:500;transition:border-color .12s ease, box-shadow .12s ease;
}
.role-switch select:focus,.role-switch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not(.btn-outline-light):not(.btn-outline-primary){
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  padding:9px 15px;border-radius:8px;font-size:13.5px;font-weight:500;
  display:inline-flex;align-items:center;gap:6px;transition:all .14s ease;white-space:nowrap;
  box-shadow:var(--shadow-sm);
}
.btn:hover:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not(.btn-outline-light):not(.btn-outline-primary){border-color:var(--text-soft);background:var(--surface-2);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 6px rgba(27,77,179,.24);}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 4px 12px rgba(27,77,179,.3);}
.btn-danger{color:var(--danger);border-color:var(--danger-bg);}
.btn-danger:hover{background:var(--danger-bg);border-color:var(--danger);}
.movement-actions{display:flex;gap:10px;margin-bottom:16px;}
.movement-actions .btn{flex:1;justify-content:center;font-weight:600;}
.btn-entrada{background:var(--ok-bg);border-color:#BEE7D2;color:var(--ok);}
.btn-entrada:hover{background:#D5F0E2;}
.btn-salida{background:var(--danger-bg);border-color:#F5C6CD;color:var(--danger);}
.btn-salida:hover{background:#FBDDE2;}
.btn-sm{padding:5px 9px;font-size:12px;border-radius:6px;box-shadow:none;}
.btn svg{width:14px;height:14px;}
#btn-mov-ajuste svg{width:13px;height:13px;}
#btn-mov-ajuste:hover{color:var(--text-soft);text-decoration:underline;}

/* ---------- Layout ---------- */
.inv-body{display:flex;gap:0;}
.inv-sidebar{
  width:220px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);
  padding:20px 16px;min-height:calc(100vh - 71px);
}
.inv-sidebar h3{
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);
  margin:0 0 10px 0;font-weight:600;
}
.inv-filter-group{margin-bottom:22px;}
.inv-filter-group select{
  width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:7px;
  font-size:13px;background:var(--surface-2);color:var(--text);transition:border-color .14s ease, box-shadow .14s ease;
}
.inv-filter-group select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.inv-filter-clear{
  font-size:12px;color:var(--accent);background:none;border:none;padding:0;margin-top:8px;
  text-decoration:none;display:inline-block;
}
.inv-filter-clear:hover{text-decoration:underline;}

.inv-main{flex:1;padding:22px 26px 44px;min-width:0;}

/* ---------- Filtros horizontales ---------- */
.filter-bar{
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.filter-field{display:flex;flex-direction:column;gap:5px;min-width:150px;}
.filter-field label{font-size:11px;color:var(--text-faint);font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
.filter-field select{
  padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-size:13px;
  background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);transition:border-color .14s ease, box-shadow .14s ease;
}
.filter-field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.filter-check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-soft);cursor:pointer;padding-bottom:10px;white-space:nowrap;}
.filter-clear-btn{
  padding:9px 13px;border:1px solid var(--border);background:var(--surface);border-radius:8px;
  font-size:12.5px;color:var(--text-soft);cursor:pointer;box-shadow:var(--shadow-sm);transition:all .12s ease;margin-bottom:0;
}
.filter-clear-btn:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-bg);}

/* ---------- Stat cards ---------- */
.inv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:22px;}
.inv-stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:box-shadow .15s ease;
  display:flex;align-items:center;gap:12px;
}
.inv-stat:hover{box-shadow:var(--shadow-md);}
.inv-stat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.inv-stat-icon svg{width:18px;height:18px;}
.inv-stat .label{font-size:10.5px;color:var(--text-faint);margin-top:4px;text-transform:uppercase;letter-spacing:.03em;font-weight:600;}
.inv-stat .value{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;line-height:1.1;}
.inv-stat .value.warn{color:var(--warn);}

/* ---------- Toolbar ---------- */
.inv-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
.inv-search{position:relative;flex:1;min-width:220px;}
.inv-search svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--text-faint);
}
.inv-search input{
  width:100%;padding:10px 12px 10px 36px;border:1px solid var(--border);border-radius:8px;
  font-size:13.5px;background:var(--surface);box-shadow:var(--shadow-sm);transition:border-color .14s ease, box-shadow .14s ease;
}
.inv-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

.filter-banner{
  font-size:12.5px;color:var(--accent-hover);background:var(--accent-soft);border:1px solid #C9D9F9;
  border-radius:8px;padding:9px 13px;margin-bottom:14px;
}
.filter-banner strong{font-weight:600;}

.inv-view-toggle{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface);flex-shrink:0;box-shadow:var(--shadow-sm);}
.view-btn{
  border:none;background:var(--surface);color:var(--text-soft);padding:9px 14px;font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:6px;border-right:1px solid var(--border);transition:background .12s ease, color .12s ease;
}
.view-btn:last-child{border-right:none;}
.view-btn svg{width:14px;height:14px;}
.view-btn.active{background:var(--accent);color:#fff;}
.view-btn:hover:not(.active){background:var(--surface-2);color:var(--text);}

/* ---------- Charts ---------- */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px;}
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);}
.chart-card.full{grid-column:1/-1;}
.chart-card h4{
  font-family:var(--font-display);font-size:13.5px;font-weight:600;margin:0 0 12px;color:var(--text);letter-spacing:-0.01em;
}
.chart-hint{font-size:11px;color:var(--text-faint);margin:-8px 0 10px;}
.chart-card .chart-box{position:relative;height:240px;}
.chart-card .chart-box.tall{height:280px;}
.chart-empty{font-size:12.5px;color:var(--text-faint);text-align:center;padding:40px 0;}
@media (max-width:820px){ .charts-grid{grid-template-columns:1fr;} }

/* ---------- Table ---------- */
.inv-table-wrap{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
}
table.inv-table{width:100%;border-collapse:collapse;font-size:13px;}
.inv-table thead th{
  text-align:left;padding:11px 15px;background:var(--surface-2);border-bottom:1px solid var(--border-strong);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:600;
  cursor:pointer;user-select:none;white-space:nowrap;
}
.inv-table thead th:hover{color:var(--text);}
.inv-table thead th .arrow{opacity:.5;margin-left:3px;}
.inv-table tbody tr{border-bottom:1px solid var(--border);transition:background .1s;}
.inv-table tbody tr:last-child{border-bottom:none;}
.inv-table tbody tr:hover{background:var(--surface-2);}
.inv-table tbody tr.low-stock{box-shadow:inset 3px 0 0 var(--warn);}
.inv-table td{padding:11px 15px;vertical-align:middle;}
.code-badge{
  font-family:var(--font-mono);font-size:11.5px;background:var(--accent-soft);color:var(--accent-hover);
  padding:2px 8px;border-radius:5px;letter-spacing:.01em;white-space:nowrap;font-weight:500;
}
.part-badge{font-family:var(--font-mono);font-size:12px;color:var(--text-soft);}
.cell-name{font-weight:500;}
.cell-sub{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.stock-num{font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums;}
.stock-num.low{color:var(--warn);}
.cost-num{font-family:var(--font-mono);color:var(--text-soft);font-variant-numeric:tabular-nums;}
.value-num{font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums;}
.mov-badge{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:20px;
}
.mov-badge svg{width:13px;height:13px;}
.dash{display:flex;flex-direction:column;gap:16px;}
.dash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px;}
.kpi-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;
  display:flex;align-items:center;gap:15px;box-shadow:var(--shadow-sm);transition:box-shadow .15s ease, transform .15s ease;
}
.kpi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.kpi-card.kpi-warn{border-color:var(--warn-border);background:var(--warn-bg);}
.kpi-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.kpi-icon svg{width:21px;height:21px;}
.kpi-value{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-0.02em;line-height:1.05;font-variant-numeric:tabular-nums;}
.kpi-label{font-size:11px;color:var(--text-faint);margin-top:4px;text-transform:uppercase;letter-spacing:.02em;font-weight:500;}
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.dash-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow-sm);}
.dash-panel-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.dash-panel-head h3{font-family:var(--font-display);font-size:14px;font-weight:600;margin:0;display:flex;align-items:center;gap:8px;letter-spacing:-0.01em;}
.dash-panel-head h3 svg{width:15px;height:15px;color:var(--accent);}
.dash-panel-head h3 span svg{color:inherit;}
.dash-sub{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:600;margin:8px 0 4px;}
.dash-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.dash-row:last-child{border-bottom:none;}
.dash-row-click{cursor:pointer;border-radius:7px;margin:0 -9px;padding-left:9px;padding-right:9px;transition:background .12s ease;}
.dash-row-click:hover{background:var(--surface-2);}
.dash-empty{text-align:center;padding:30px 10px;color:var(--text-faint);}

.feed{display:flex;flex-direction:column;}
.feed-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
.feed-row:last-child{border-bottom:none;}
.feed-dot{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.feed-dot svg{width:16px;height:16px;}
.feed-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.feed-qty{
  flex-shrink:0;font-family:var(--font-mono);font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums;letter-spacing:-0.01em;
}
.dash-empty svg{width:32px;height:32px;stroke:var(--border-strong);margin-bottom:8px;}
.dash-empty p{font-size:12.5px;margin:0;}
@media (max-width:820px){ .dash-cols{grid-template-columns:1fr;} }

.mov-row-click{cursor:pointer;}
.mov-row-click:hover{background:var(--surface-2);}
.mov-type-tabs{display:flex;gap:6px;padding:14px 16px 0;flex-wrap:wrap;}
.mov-tab{
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-soft);padding:6px 14px;
  border-radius:20px;font-size:12.5px;font-weight:500;cursor:pointer;transition:all .12s ease;
}
.mov-tab:hover{background:var(--border);}
.mov-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;}

.pagination-bar{
  display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
  border-top:1px solid var(--border);flex-wrap:wrap;gap:10px;
}
.mov-badge.mov-entrada{background:var(--ok-bg);color:var(--ok);}
.mov-badge.mov-salida{background:var(--danger-bg);color:var(--danger);}
.mov-badge.mov-ajuste{background:var(--accent-soft);color:var(--accent-hover);}
.row-actions{display:flex;gap:4px;justify-content:flex-end;}
.icon-btn{
  border:none;background:none;padding:5px;border-radius:6px;display:flex;color:var(--text-faint);transition:background .12s ease, color .12s ease;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text);}
.icon-btn svg{width:15px;height:15px;}
.empty-state{padding:60px 20px;text-align:center;color:var(--text-faint);}
.empty-state svg{width:40px;height:40px;margin-bottom:12px;stroke:var(--border-strong);}
.empty-state h4{font-family:var(--font-display);font-size:15px;color:var(--text-soft);margin:0 0 6px;}
.empty-state p{font-size:13px;margin:0;}

/* ---------- Modal ---------- */
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.99);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
.inv-overlay{
  position:fixed;inset:0;background:rgba(9,13,22,.5);display:flex;align-items:center;justify-content:center;
  z-index:100;padding:20px;backdrop-filter:blur(2px);animation:overlayIn .15s ease;
}
.inv-modal{
  background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);animation:modalIn .2s cubic-bezier(.16,1,.3,1);
}
.inv-modal-header{
  padding:19px 23px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.inv-modal-header h3{font-family:var(--font-display);font-size:16px;margin:0;font-weight:600;letter-spacing:-0.01em;}
.inv-modal-body{padding:21px 23px;}
.inv-modal-footer{padding:16px 23px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:12px;color:var(--text-soft);font-weight:500;}
.form-field input,.form-field select{
  padding:9px 11px;border:1px solid var(--border);border-radius:7px;font-size:13.5px;background:var(--surface-2);
  transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.form-field input:focus,.form-field select:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft);}
.inv-modal textarea{
  width:100%;min-height:140px;border:1px solid var(--border);border-radius:7px;padding:11px;
  font-family:var(--font-mono);font-size:12px;background:var(--surface-2);resize:vertical;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.inv-modal textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.hint{font-size:12px;color:var(--text-faint);margin-top:8px;line-height:1.5;}
.hint code{background:var(--accent-soft);padding:1px 5px;border-radius:4px;font-family:var(--font-mono);color:var(--accent-hover);}

.save-warning{
  position:fixed;top:0;left:0;right:0;background:var(--danger);color:#fff;padding:10px 16px;
  font-size:13px;display:flex;align-items:center;justify-content:center;gap:14px;z-index:300;flex-wrap:wrap;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.save-warning button{
  background:#fff;color:var(--danger);border:none;padding:6px 12px;border-radius:6px;font-size:12.5px;
  font-weight:600;cursor:pointer;flex-shrink:0;
}
.save-warning button:disabled{opacity:.6;cursor:default;}

.toast{
  position:fixed;bottom:20px;right:20px;background:var(--text);color:#fff;padding:11px 16px;border-radius:8px;
  font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:200;opacity:0;transform:translateY(8px);
  transition:all .2s ease;pointer-events:none;
}
.toast.show{opacity:1;transform:translateY(0);}

@media (max-width:820px){
  .inv-body{flex-direction:column;}
  .inv-sidebar{width:auto;border-right:none;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:16px;min-height:auto;}
  .inv-filter-group{margin-bottom:0;min-width:140px;flex:1;}
  .inv-stats{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;}
  .inv-table-wrap{overflow-x:auto;}
}

/* ---------- Vista Almacén (optimizada para móvil) ---------- */
.almacen-wrap{max-width:640px;margin:0 auto;padding:48px 24px;}
.almacen-hero{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:36px 30px;text-align:center;margin-bottom:24px;box-shadow:var(--shadow-sm);
}
.almacen-hero-icon{
  width:56px;height:56px;border-radius:14px;background:var(--danger-bg);color:var(--danger);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.almacen-hero-icon svg{width:26px;height:26px;}
.almacen-hero h2{font-family:var(--font-display);font-size:19px;margin:0 0 8px;letter-spacing:-0.01em;}
.btn-almacen{
  font-weight:600;padding:14px 26px;font-size:15px;
}
.almacen-recientes{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:18px 20px;box-shadow:var(--shadow-sm);
}
.almacen-rec-row{
  display:flex;align-items:center;justify-content:space-between;font-size:12.5px;
  padding:10px 0;border-bottom:1px solid var(--border);gap:10px;
}
.almacen-rec-row:last-child{border-bottom:none;}

@media (max-width:640px){
  .almacen-header .role-switch label{display:none;}
  .almacen-header{padding:12px 16px;gap:10px;}
  .almacen-header .inv-brand h1{font-size:15px;}
  .almacen-header-actions{width:100%;justify-content:space-between;gap:8px;}
  .almacen-header-actions .role-switch{margin-right:0;flex:1;}
  .almacen-header-actions .role-switch input,
  .almacen-header-actions .role-switch select{width:100%;padding:10px 12px;font-size:14px;}
  .almacen-wrap{padding:20px 16px;}
  .almacen-hero{padding:28px 20px;border-radius:16px;}
  .almacen-hero h2{font-size:18px;}
  .btn-almacen{width:100%;justify-content:center;padding:16px;font-size:16px;border-radius:12px;}
  /* Modal selector de artículo a pantalla completa en móvil */
  .inv-overlay{padding:0;align-items:stretch;}
  .inv-modal{max-width:100%;max-height:100vh;border-radius:0;display:flex;flex-direction:column;}
  .inv-modal-body{flex:1;}
  .pick-row-mobile{padding:14px 12px !important;}
  .pick-row-mobile .cell-name{font-size:15px !important;}
  .inv-modal-footer .btn{flex:1;justify-content:center;padding:14px;font-size:15px;}
  .form-field input,.form-field select{padding:13px 12px;font-size:16px;}
  .inv-modal-header h3{font-size:15px;}
}


/* ---------- Almacen & Auth Custom Styles ---------- */
:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --text: #111827;
  --muted: #667085;
  --line: #d9e1ec;
  --primary: #c41735;
  --primary-soft: #fde8ec;
  --accent: #0f766e;
  --shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.role-admin .topbar,
.role-operacion .topbar {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.page {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 18px 14px 92px;
}

.form-stack,
.hero-card,
.panel,
.movement-card {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.brand,
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.brand-mark,
.login-icon,
.hero-icon {
  display: grid;
  place-items: center;
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: 800;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.top-actions {
  color: var(--muted);
  font-size: 14px;
}

.profile-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #f8fafc;
  font-size: 12px;
}

.hero-card,
.panel,
.movement-card,
.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.hero-card {
  padding: 34px 20px;
  text-align: center;
}

.hero-icon,
.login-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 8px;
  font-size: 28px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  font-size: 23px;
  line-height: 1.2;
}

h2 {
  margin-bottom: 4px;
  font-size: 18px;
}

p,
.muted {
  color: var(--muted);
  line-height: 1.4;
}

.button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 18px;
  font-weight: 700;
  cursor: pointer;
}

.button.primary {
  color: #ffffff;
  background: var(--primary);
}

.button.secondary {
  color: var(--text);
  background: #ffffff;
  border-color: var(--line);
}

.button.ghost {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: #fac7d1;
}

.button.full {
  width: 100%;
}

.icon-button {
  width: 46px;
  padding: 0;
  color: #ffffff;
  background: var(--primary);
  font-size: 26px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.kpi-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 82px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.kpi-card.warning {
  border-color: #f6c875;
  background: #fff7e6;
}

.kpi-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 13px;
  font-weight: 800;
  flex: 0 0 auto;
}

.kpi-card strong {
  display: block;
  font-size: 18px;
  line-height: 1.15;
  word-break: break-word;
}

.kpi-card span:last-child,
.list-item span,
.movement-foot,
.movement-head span {
  color: var(--muted);
  font-size: 13px;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.quick-card {
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

.quick-card strong {
  display: block;
  font-size: 21px;
}

.quick-card span,
.demo-users small {
  color: var(--muted);
  font-size: 12px;
}

.action-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.action-card {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.action-card strong {
  color: var(--primary);
}

.action-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.panel {
  padding: 16px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.section-title p {
  margin-bottom: 0;
}

.section-title a {
  color: var(--primary);
  font-weight: 700;
}

.sticky-title {
  position: sticky;
  top: 58px;
  z-index: 4;
  padding: 12px 0;
  background: var(--bg);
}

.compact {
  align-items: flex-start;
}

.list {
  display: grid;
  gap: 10px;
}

.list-item,
.movement-head,
.movement-foot,
.bottom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.list-item {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.list-item:first-child {
  border-top: 0;
}

.movement-card {
  padding: 16px;
}

.movement-card p {
  margin: 10px 0;
}

.movement-foot span:last-child {
  color: var(--accent);
  font-weight: 700;
}

.danger-text {
  color: #a65a0b;
  font-weight: 800;
}

.login-shell {
  display: grid;
  min-height: calc(100vh - 36px);
  place-items: center;
}

.login-card {
  width: min(100%, 410px);
  padding: 26px 20px;
}

.demo-users {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.demo-users strong {
  font-size: 13px;
}

.demo-users button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: #ffffff;
  font: inherit;
  cursor: pointer;
}

.demo-users span {
  font-weight: 800;
}

.form-stack {
  display: grid;
  gap: 14px;
}

.form-panel {
  display: grid;
  gap: 14px;
}

.salida-card {
  padding: 0;
  overflow: hidden;
}

.header-accordion summary {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.header-accordion summary::-webkit-details-marker {
  display: none;
}

.header-accordion summary span {
  display: grid;
  gap: 4px;
}

.header-accordion small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.header-accordion strong {
  font-size: 16px;
}

.header-accordion em {
  color: var(--primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.accordion-body {
  display: grid;
  gap: 14px;
}

.login-card label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}

label, .form-label {
  display: inline-block;
  margin-bottom: 6px;
  color: #344054;
  font-size: 13.5px;
  font-weight: 600;
}

label .text-danger,
label span.text-danger,
.form-label .text-danger,
.form-label span.text-danger {
  display: inline !important;
  margin-left: 3px;
  color: #dc3545;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cfd8e5;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  background: #ffffff;
  font: inherit;
  font-weight: 400;
}

.form-control {
  min-height: 44px;
  border-color: #cfd8e5;
  border-radius: 8px;
}

textarea {
  resize: vertical;
}

.detail-empty {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.detail-table th,
.detail-table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.detail-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.detail-table th:nth-child(1),
.detail-table td:nth-child(1) {
  width: 78px;
}

.detail-table th:nth-child(3),
.detail-table td:nth-child(3) {
  width: 58px;
  text-align: right;
}

.detail-table th:nth-child(4),
.detail-table td:nth-child(4) {
  width: 34px;
  text-align: right;
}

.detail-table td strong,
.detail-table td small {
  display: block;
}

.detail-table td small {
  color: var(--muted);
  margin-top: 2px;
}

.detail-table[hidden],
.detail-empty[hidden] {
  display: none;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
}

.modal-footer .button {
  flex: 1;
}

.bottom-actions {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  width: min(100%, 720px);
  margin: 0 auto;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--line);
}

.bottom-actions .button {
  flex: 1;
}

.alert,
.notice {
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 8px;
}

.alert {
  color: #9f1239;
  background: #fff1f2;
}

.notice {
  color: #065f46;
  background: #ecfdf3;
  border: 1px solid #abefc6;
}

.empty-state {
  padding: 32px 18px;
  text-align: center;
}

.admin-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.admin-sidebar {
  background: #ffffff;
  border-right: 1px solid var(--line);
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.admin-brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #ffffff;
  background: #1b4db3;
  font-weight: 800;
}

.admin-brand strong,
.admin-brand small {
  display: block;
}

.admin-brand small,
.admin-panel-head small,
.admin-row small,
.feed-row-admin small,
.admin-kpi small {
  color: var(--muted);
}

.admin-menu {
  display: grid;
  gap: 2px;
  padding: 12px;
}

.menu-label {
  padding: 14px 10px 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.menu-item span {
  display: grid;
  place-items: center;
  width: 22px;
  color: #667085;
}

.menu-item.active,
.menu-item:hover {
  color: #143a88;
  background: #e7eefb;
}

.menu-item.muted-link {
  color: #667085;
}

.admin-content {
  min-width: 0;
  background: #eef1f5;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.admin-header h1 {
  margin-bottom: 3px;
}

.admin-header p {
  margin-bottom: 0;
}

.admin-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 16px 0;
}

.admin-kpi {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 86px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.06);
}

.admin-kpi.warn {
  border-color: #efd3a3;
  background: #fdf2e0;
}

.admin-kpi > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #1b4db3;
  background: #e7eefb;
  font-weight: 800;
  flex: 0 0 auto;
}

.admin-kpi strong {
  display: block;
  font-size: 20px;
  line-height: 1.15;
}

.admin-kpi small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.admin-grid {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.admin-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.06);
}

.admin-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-panel-head h2 {
  margin: 0;
  font-size: 16px;
}

.admin-row,
.feed-row-admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.admin-row:last-child,
.feed-row-admin:last-child {
  border-bottom: 0;
}

.admin-row div,
.feed-row-admin div {
  min-width: 0;
}

.admin-row strong,
.admin-row small,
.feed-row-admin strong,
.feed-row-admin small {
  display: block;
}

.admin-row small,
.feed-row-admin small {
  font-size: 12px;
}

.warn-text {
  color: #a65a0b;
}

.ok-text {
  color: #177c50;
}

.feed-dot-admin {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #143a88;
  background: #e7eefb;
  font-weight: 800;
  flex: 0 0 auto;
}

.feed-dot-admin.salida {
  color: #b32438;
  background: #fcebEE;
}

.feed-dot-admin.entrada {
  color: #177c50;
  background: #e4f4ec;
}

.bar-list {
  display: grid;
  gap: 12px;
}

.bar-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 82px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.bar-row div {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef1f5;
}

.bar-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #8e2a3f;
}

.bar-row b {
  text-align: right;
}

@media (min-width: 720px) {
  .page {
    padding-top: 28px;
  }

  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .admin-menu {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
  }

  .menu-label {
    display: none;
  }

  .admin-header,
  .admin-grid.two {
    grid-template-columns: 1fr;
  }

  .admin-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    width: 100%;
    justify-content: space-between;
  }

  .kpi-grid,
  .quick-grid,
  .admin-kpis {
    grid-template-columns: 1fr;
  }

  .admin-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-actions {
    width: 100%;
    justify-content: flex-start;
  }
}