:root{
  --barra:#e3ad63;
  --fondo:#fff3d9;
  --texto:#6f665c;
  --btn:#8a956e;
  --btn-txt:#ffffff;
  --borde:rgba(0,0,0,.08);
  --sombra:0 10px 30px rgba(0,0,0,.08);
  --radio:12px;
  --radio-lg:16px;
  --f1:clamp(26px,3.2vw,34px);
  --f3:clamp(14px,1.5vw,16px);
}

/* helpers de color para Bootstrap */
.bg-fondo{ background:var(--fondo)!important; }
.text-texto{ color:var(--texto)!important; }

/* Barra superior */
.barra{
  height:48px;
  background:var(--barra);
  border-bottom-left-radius:var(--radio);
  border-bottom-right-radius:var(--radio);
  box-shadow:0 2px 0 rgba(0,0,0,.04);
  position:relative; overflow:hidden;
}
.barra::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0 30%,rgba(255,255,255,.16) 50%,transparent 70% 100%);
  transform:translateX(-100%); animation:barra-brillo 6s linear infinite;
}
@keyframes barra-brillo{to{transform:translateX(100%)}}

/* Lienzo */
.lienzo{ min-height:calc(100dvh - 48px); padding:28px 0 40px; }
.hero{ margin-top:0; }

/* Tipos y títulos */
h1,h2,h3,h4,h5,h6{ margin-top:.2rem; margin-bottom:.6rem; }
.titulo{
  font-weight:600; font-size:var(--f1); line-height:1.2; letter-spacing:.2px; margin-bottom:14px; position:relative;
}
.titulo::after{
  content:""; position:absolute; left:0; bottom:-8px;
  width:180px; height:10px; background:linear-gradient(90deg,#edd09b,transparent);
  border-radius:999px; opacity:.6;
}
.desc{ font-size:var(--f3); line-height:1.55; max-width:46ch; margin:0 0 22px 0; }


/* Ilustración */
.ilustracion{
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.08));
  width: clamp(220px, 40vw, 360px);
}

/* Ajustes responsivos */
@media (max-width: 900px){
  .titulo,.desc{ text-align:center; }
}
@media (max-width: 480px){
  .desc{ font-size:15px; }
}
html,body{ overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
/* Fondo general */
body {
  background: #f7f8ff;
  color: #222;
}

/* Topbar */
.topbar {
  padding: 12px 0;
  border-bottom: 1px solid #e7e9fb;
  background: #fff;
  margin-bottom: 18px;
}

/* KPI Card */
.kpi-card {
  border: 1px solid #e7e9fb;
  border-radius: 10px;
}
.kpi-card .big {
  font-size: 26px;
  font-weight: 700;
}

/* Badges */
.badge-ok {
  background: #e6ffec;
  border: 1px solid #b3f0c2;
  color: #8a956e;
}
.badge-no {
  background: #ffe6e6;
  border: 1px solid #ffc2c2;
  color: #991b1b;
}

/* Tablas */
.table thead th {
  background: #fff;
  font-weight: 600;
  border-bottom: 2px solid #e7e9fb;
}
.table tbody tr+tr td {
  border-top: 1px solid #e7e9fb;
}
body {
  background: #f7f8ff;
}

/* Sidebar */
.sidebar {
  min-height: 100vh;
  border-right: 1px solid #e7e9fb;
}
.sidebar .nav-link {
  color: #333;
  border-radius: 6px;
  padding: .5rem .75rem;
}
.sidebar .nav-link:hover {
  background: #f1f3ff;
}
.sidebar .nav-link.active {
  font-weight: 600;
  background: #e9ecef;
}

/* Tablas */
.table thead th {
  font-weight: 600;
}

/* Ajustes de badges si querés más contraste */
.badge.bg-success-subtle {
  background: #e9f7ef !important;
  color: #8a956e !important;
}

/* icono del date input más discreto */
.dr-fields input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: .6;
  cursor: pointer;
}

/* Botones del rango */
.dr-apply{
  padding: 8px 14px;
  border-radius: 10px;
}

.dr-clear{
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--borde) !important;
  background: #fff !important;
  color: var(--texto) !important;
}

/* Responsive */
@media (max-width: 760px){
  .prod-filters.range{
    gap: 8px;
  }
  .dr-fields{
    width: 100%;
    justify-content: space-between;
  }
  .dr-fields input[type="date"]{
    min-width: 0;
    width: 48%;
  }
}
.btn-state{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:12px;
  background:var(--btn); color:var(--btn-txt)!important;
  border:1px solid var(--btn); font-weight:600;
  font-size:14px; line-height:1; cursor:pointer;
  transition:filter .15s ease, transform .05s ease;
  min-width:92px;
}

/* === FILTROS centrados === */
.prod-filters{
  display:flex; flex-wrap:wrap; gap:10px 12px;
  align-items:center; justify-content:center;
  margin-bottom:14px;
}
.prod-filters .input-search,
.prod-filters select{
  height:38px; padding:0 12px;
  border:1px solid var(--borde); border-radius:12px;
  background:#fff;
}

.table-wrap table{ background:#fff; border:1px solid var(--borde); border-radius:var(--radio); }
.table-wrap thead th{
  background:#fff; 
  color:var(--texto);
  border-bottom:1px solid var(--borde);
}
.table-wrap td, .table-wrap th{ vertical-align:middle; }
.prod-main{ max-width:1060px; margin:0 auto; padding:0 8px; }
.prod-card{ background:#fff; border-radius:12px; box-shadow:var(--sombra); padding:18px; margin-bottom:18px; }
.prod-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.table-wrap{ overflow:auto; }
.ta-r{text-align:right}
.muted{opacity:.7}

.prod-toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px }
.chip{ padding:8px 12px; border-radius:10px; background:#eef2ea; border:1px solid var(--borde); cursor:pointer; }
.chip.on{ background:#dfe7d6; font-weight:600; }

.kpi{ flex:1; min-width:180px; background:#fff; border-radius:12px; box-shadow:var(--sombra); padding:14px; }
.kpi h6{ margin:0 0 6px 0; font-size:13px; opacity:.7; }
.kpi big{ font-size:22px; font-weight:700; }

.badge{ padding:4px 10px; border-radius:999px; font-size:12px; display:inline-block; }
.badge.borrador{  background:#fff1cd; }
.badge.aprobado{  background:#e8f5e9; }
.badge.enviado{   background:#e3ecfb; }
.badge.recibido{  background:#e9f7ef; }
.badge.cancelado{ background:#fdecea; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:840px){ .grid2{ grid-template-columns:1fr } }
/* Layout */
.prod-main{ max-width:1060px; margin:0 auto; padding:0 8px; }
.prod-card{ background:#fff; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.06); padding:18px; margin-bottom:18px; }
.prod-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.table-wrap{ overflow:auto; }

/* KPI cards */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin:10px 0 18px;
}
.kpi-card{
  display:block;
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  padding:16px 18px;
  text-decoration:none;
  color:inherit;
  transition:transform .08s ease, box-shadow .12s ease;
}
.kpi-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.08); }
.kpi-title{ font-size:18px; font-weight:600; margin:0 0 10px 0; padding-bottom:6px; border-bottom:1px solid rgba(0,0,0,.06); }
.kpi-value{ font-size:26px; font-weight:800; margin:6px 0 2px; }
.kpi-sub{ font-size:13px; opacity:.75; }
.kpi-card.is-good .kpi-value{ color:#2f7d32; }

/* Chips de estado */
.prod-toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 12px; }
.chip{ padding:8px 12px; border-radius:10px; background:#eef2ea; border:1px solid rgba(0,0,0,.08); }
.chip.on{ background:#dfe7d6; font-weight:600; }

/* Badges */
.badge{ padding:4px 10px; border-radius:999px; font-size:12px; display:inline-block; }
.badge.borrador{ background:#fff1cd; }
.badge.aprobado{ background:#e8f5e9; }
.badge.enviado{ background:#e3ecfb; }
.badge.recibido{ background:#e9f7ef; }
.badge.cancelado{ background:#fdecea; }

/* Grid responsive */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:840px){ .grid2{ grid-template-columns:1fr } }

.kpi-link{ display:block; color:inherit; text-decoration:none; }
.kpi-link:hover{ transform: translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.08); }
.kpi-value{ font-size:26px; font-weight:700; }
/* Avisos KPI de pedidos */
.kpi-alerts{
  display:flex;
  gap:16px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.kpi-alert{
  flex:1;
  min-width:200px;
  background:#fff9e8;          /* fondo suave */
  border:1px solid #f5d08a;    /* borde amarillo pastel */
  border-radius:10px;
  padding:12px 16px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.kpi-alert h5{
  margin:0 0 6px;
  font-size:15px;
  font-weight:600;
  color:#6f665c;
}
.kpi-alert .val{
  font-size:22px;
  font-weight:700;
  margin-bottom:4px;
}
.kpi-alert .muted{
  font-size:13px;
  color:#777;
}

.table-wrap td, .table-wrap th { vertical-align: middle; }

.u-full-width th.col-accion,
.u-full-width td.col-accion { text-align:center !important; width:120px; }

.u-full-width td.col-accion form{
  display:inline-flex !important;
  margin:0 !important;
  width:auto !important;
  justify-content:center !important;
}

.u-full-width td.col-accion a,
.u-full-width td.col-accion button,
.prod-filters .btn-filter,
.btn-sm, .btn-olive, .btn-state{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:38px !important;
  line-height:38px !important;   
  padding:0 14px !important;
  border-radius:12px !important;
  font-size:14px !important;
  font-weight:600 !important;
  text-decoration:none !important;
  cursor:pointer;
}
.prod-filters .input-search,
.prod-filters select{
  height:38px; padding:0 12px;
  border:1px solid var(--borde); border-radius:12px;
  background:#fff !important;
}

.u-full-width td.col-accion a,
.u-full-width td.col-accion button,
.prod-filters {
  -webkit-appearance:none !important;
  appearance:none !important;
  background:var(--btn) !important;
  color:var(--btn-txt) !important;
  border:1px solid var(--btn) !important;
  box-shadow:none !important;
  transition:filter .15s ease;
}
.u-full-width td.col-accion a:hover,
.u-full-width td.col-accion button:hover,
.prod-filters , .btn-state:hover{
  filter:brightness(.95);
}

@media (max-width:760px){
  .u-full-width th.col-accion,
  .u-full-width td.col-accion{ width:auto; }
}

.prod-filters{
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:flex-start;
  margin:8px 0 16px;
}
.prod-filters .input-search{
  height:38px; padding:0 12px; border:1px solid var(--borde); border-radius:12px; background:#fff;
}

th.col-accion, td.col-accion{ text-align:center; width:120px; }
td.col-accion form{ display:inline-flex; margin:0; }      
td.col-accion a, td.col-accion button{ justify-content:center; } 

.ta-r{ text-align:right } .ta-c{ text-align:center } .muted{ opacity:.7 }

.table-wrap table { font-size: 14px; }      
.table-wrap thead th { font-size: 13px; }   

.kpi-val{
  font-size:26px; font-weight:700;
}
.text-warn{ color:#c0392b; font-weight:600; }
.tr-warn{ background:#fff1f0; }
.trans-row{ margin-bottom:8px; }

.table-wrap{ overflow:auto; }
.prod-head h5{ margin:0; }
.btn-add, .btn-sm, .btn-filter{
  font-size: 13px;
}
.kpi-val{ font-size:26px; font-weight:700; }
.text-warn{ color:#c0392b; font-weight:600; }
.tr-warn{ background:#fff1f0; }
.table-wrap{ overflow:auto; }
.prod-head h5{ margin:0; }

.btn-add, .btn-view, .btn-edit, .btn-transfer{
  font-size: 13px; line-height: 1; padding: 8px 10px;
}


.th-act{ width:80px; text-align:center; }
.td-act{ text-align:center; white-space:nowrap; }


.btn-view{ display:inline-block; border:1px solid var(--borde); border-radius:8px; }
.btn-edit{ display:inline-block; border:1px solid #d9e6ff; background:#eef4ff; border-radius:8px; }
.btn-transfer{ display:inline-block; border:1px solid #e6f4ea; background:#f1fbf5; border-radius:8px; }


.trans-row{ margin-bottom:8px; }
.prod-main select,
.prod-main input[type="text"],
.prod-main input[type="number"],
.prod-main input[type="date"]{
  height: 38px;            
  font-size: 14px;        
}
.prod-main label{
  font-size: 13px;
}
.kpi-val{ font-size:26px; font-weight:700; }
.text-warn{ color:#c0392b; font-weight:600; }
.tr-warn{ background:#fff1f0; }
.table-wrap{ overflow:auto; }
.prod-head h5{ margin:0; }

.th-act{ width:80px; text-align:center; }
.td-act{ text-align:center; white-space:nowrap; }

.btn-view,
.btn-edit,
.btn-transfer{
  display:inline-block;
  padding:6px 12px;
  font-size:13px;
  color:#fff;
  background:#27ae60;         /* verde */
  border:none;
  border-radius:20px;          /* redondeadito */
  cursor:pointer;
  text-decoration:none;
  transition: background 0.2s ease-in-out;
}

.btn-view:hover,
.btn-edit:hover,
.btn-transfer:hover{
  background:#219150;         
}



.badge.alerta{padding:.15rem .5rem;border-radius:8px;font-size:12px;font-weight:700}
.badge.sb{background:#fff2cc;border:1px solid #ffe08a}
.badge.ss{background:#ffd6d6;border:1px solid #ff9c9c}
.badge.nv{background:#e5f0ff;border:1px solid #b9d2ff}
.row .btn-gen{margin-left:.5rem}


.badge.alerta{padding:.15rem .5rem;border-radius:8px;font-size:12px;font-weight:700}
.badge.sb{background:#fff2cc;border:1px solid #ffe08a}
.badge.ss{background:#ffd6d6;border:1px solid #ff9c9c}
.badge.nv{background:#e5f0ff;border:1px solid #b9d2ff}


.table-wrap{ overflow:auto }
.bulkbar{
  display:none; align-items:center; gap:.5rem; padding:.5rem; border:1px dashed var(--borde);
  border-radius:12px; margin:.5rem 0 .75rem 0; background:#f8fff4;
}

/* panel detalle */
.alerta-card{
  border:1px solid var(--borde); border-radius:16px; padding:12px; margin-bottom:12px; background:#fff
}
.alerta-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:8px }
.alerta-grid .cell{ background:#fafafa; padding:8px; border-radius:10px; font-size:13px }
.row .btn-gen{margin-left:.5rem}
/* Forzar misma altura y alineación en columnas de acciones */
td.actions {
  text-align: center;
  vertical-align: middle;
}

td.actions form,
td.actions a {
  display: inline-block;
  margin: 0 2px;
}



.badge.alerta{padding:.15rem .5rem;border-radius:8px;font-size:12px;font-weight:700}
.badge.sb{background:#fff2cc;border:1px solid #ffe08a}
.badge.ss{background:#ffd6d6;border:1px solid #ff9c9c}
.badge.nv{background:#e5f0ff;border:1px solid #b9d2ff}

/* Botones verdes redondeaditos y rojos para eliminar */
.btn-sm, .btn-add, .btn-filter, .btn-green, .btn-red, .btn-line{
  border-radius:12px; 
  line-height:1;
   padding:.5rem .75rem;
    border:0;
    text-decoration:none; cursor:pointer;
}
.btn-green{ background:#8a956e; color:#fff }
.btn-red{ background:#dd4b39; color:#fff }
.btn-filter{ background:#8a956e; color:#fff }
.btn-line{ background:#fff; border:1px solid var(--borde); }
.btn-green:hover{filter:brightness(.95)}
.btn-red:hover{filter:brightness(.80)}
.btn-line:hover{background:#fafafa}


.table-wrap{ overflow:auto }
.bulkbar{
  display:none; align-items:center; gap:.5rem; padding:.5rem; border:1px dashed var(--borde);
  border-radius:12px; margin:.5rem 0 .75rem 0; background:#f8fff4;
}

/* panel detalle */
.alerta-card{
  border:1px solid var(--borde); border-radius:16px; padding:12px; margin-bottom:12px; background:#fff
}
.alerta-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:8px }
.alerta-grid .cell{ background:#fafafa; padding:8px; border-radius:10px; font-size:13px }
.row .btn-gen{margin-left:.5rem}

/* === Botones POS === */
.btn, .btn-ok, .btn-del, .btn-filter {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  font-family: inherit;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background .2s, transform .1s;
  line-height: 1.3;
}

/* Botón normal (gris verdoso) */
.btn {
  background: #8a956e;
  color: #fff;
}
.btn:hover { background: #76805d; }

/* Botón principal (verde “ok”) */
.btn-ok {
  background: #6c9d5a;
  color: #fff;
}
.btn-ok:hover { background: #598648; }

/* Botón eliminar / vaciar (rojo suave) */
.btn-del {
  background: #f8d0d0;
  color: #a33;
}
.btn-del:hover { background: #f3bcbc; }

/* Botón filtro/buscar */
.btn-filter {
  background: #fff;
  color: #8a956e;
}
.btn-filter:hover { background: #faffef; }

/* Todos al mismo alto */
.btn, .btn-ok, .btn-del, .btn-filter {
  min-height: 36px;
}

/* Ajuste inputs para que alineen con botones */
.input-search, .qty-inp, select {
  height: 36px;
  padding: 4px 8px;
  font-size: 14px;
}

body{background:var(--fondo);color:var(--texto)}
.barra{height:54px;background:var(--barra);border-bottom-left-radius:var(--radio);border-bottom-right-radius:var(--radio);box-shadow:0 2px 0 rgba(0,0,0,.04)}
.card{background:#fff;border:1px solid var(--borde);border-radius:16px;box-shadow:var(--sombra);padding:16px}
table thead th{background:#f6e7c3}
.button-primary,.btn,.btn-sm{background:var(--btn);color:var(--btn-txt);border:none;border-radius:14px;padding:.6rem .9rem}
.btn-sm{padding:.4rem .7rem}
.btn-red{background:#d26464;color:#fff}
.btn-gray{background:#f3f3f3;color:#333;border:1px solid var(--borde)}
.badge{padding:2px 8px;border-radius:999px;font-size:12px}
.badge.on{background:#ffffff;color:#8a956e;border:1px solid #8a956e}
.badge.off{background:#ffe4e4;color:#b33;border:1px solid #ffd0d0}



.prod-side{
  width: 240px;
  padding: 10px;
  background: linear-gradient(to bottom, #fffaf0, #fef6e4);
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0,0,0,.05);
  border: 1px solid var(--borde);
}

.prod-nav{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.prod-nav li{ margin:0; }
.prod-nav a{
  display:block;
  padding:10px 15px;
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:10px;
  color:#5c4b3b;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  transition:all .2s ease-in-out;
  box-shadow: var(--sombra);
}
.prod-nav a:hover{
  background:#fff7ec;
  border-color:#d8b88a;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.prod-nav .active a{
  background:#fdf2e3;
  border-color:#e3ad63;
  font-weight:700;
  color:#4a3d2e;
}

#nav-toggle.hamburger{ display:none; }
.offcanvas-overlay{ display:none; }

@media (min-width: 992px){
  /* Layout con sidebar fijo a la izquierda */
  .prod-shell{
    display:grid;
    grid-template-columns: 260px 1fr;
    gap:18px;
  }
  .prod-side{
    position:sticky; top:12px; align-self:start;
    transform:none !important; /* por si quedó una clase */
  }
  .prod-main{ margin-left:0 !important; }
  /* Jamás mostrar hamburguesa en desktop */
  #nav-toggle.hamburger{ display:none !important; }
}

@media (max-width: 991px){
  /* Botón hamburguesa fijo */
  #nav-toggle.hamburger{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    position:fixed; top:10px; left:10px; z-index:10020;
    height:40px; min-width:40px; padding:0 12px;
    border-radius:12px; border:1px solid var(--borde);
    background:#fff; color:#333; font-weight:700; font-size:18px;
    box-shadow:0 6px 24px rgba(0,0,0,.06);
  }

  /* Off-canvas: entra desde la izquierda con el MISMO look del desktop */
  .prod-side{
    position:fixed !important;
    top:0; left:0;
    height:100dvh; width:260px;
    transform:translateX(-100%);
    transition:transform .2s ease-out;
    z-index:10010;
    padding-top:14px;
    overflow:auto;
    /* el resto del estilo (gradiente, borde, radios) ya viene del bloque base */
  }

  /* Navegación scrolleable confortable */
  .prod-nav{ padding:8px 10px 20px; }

  /* Overlay de fondo */
  .offcanvas-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.35);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease-out;
    z-index:10000; display:block;
  }

  /* Estado abierto (lo agrega tu app.js al <body>) */
  body.nav-open .prod-side{ transform:translateX(0); }
  body.nav-open .offcanvas-overlay{ opacity:1; pointer-events:auto; }

  /* El contenido ocupa todo en móvil */
  .prod-main{ margin-left:0 !important; }
}
/* ====== LAYOUT COMÚN ====== */
.prod-shell{
  display:grid;
  grid-template-columns: 260px 1fr;   /* sidebar + contenido */
  gap:24px;                           /* mismo gap que en la 2da imagen */
}

/* ====== SIDEBAR ====== */
.prod-side{
  position: sticky; top:12px;         /* fijo mientras scrolleo */
  align-self: start;
  width:240px;
  padding:10px;
  background: linear-gradient(to bottom,#fffaf0,#fef6e4);
  border:1px solid var(--borde);
  border-radius:12px;
  box-shadow:0 0 8px rgba(0,0,0,.05);
  /* espacio a la derecha para el separador */
  margin-right:18px; padding-right:10px;
  position: sticky; top:12px;
}

/* Separador vertical (línea fina como en la 2da imagen) */
.prod-side{ position: sticky; top:12px; }
.prod-side::after{
  content:"";
  position:absolute;
  right:-18px; top:0;
  width:1px; height:100%;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.08),
    rgba(0,0,0,.06) 30%,
    rgba(0,0,0,.04) 70%,
    rgba(0,0,0,.02)
  );
  border-radius:1px;
}

/* Ítems del menú: mismo estilo en todas las secciones */
.prod-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.prod-nav li{ margin:0; }
.prod-nav a{
  display:block;
  padding:10px 15px;
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:10px;
  color:#5c4b3b;
  font-size:15px; font-weight:500;
  text-decoration:none;
  transition:all .2s ease-in-out;
  box-shadow: var(--sombra);
}
.prod-nav a:hover{
  background:#fff7ec; border-color:#d8b88a;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.prod-nav .active a{
  background:#fdf2e3; border-color:#e3ad63;
  font-weight:700; color:#4a3d2e;
}

/* ====== TÍTULO Y ESPACIOS DEL MAIN ====== */
/* Título de página como en la 2da imagen */
.prod-main > h1,
.prod-main > .page-title{
  margin: 4px 0 18px;                 /* mismo aire superior e inferior */
  font-weight: 700;
  color: var(--texto);
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: .2px;
}

/* Contenedor principal: mismo padding/aire que la 2da imagen */
.prod-main{
  margin-left:0 !important;
}

/* Tarjetas/cuadros del dashboard: alineación y respiración */
.card, .kpi, .panel, .box{
  border-radius:16px;
  box-shadow: var(--sombra);
}

/* ====== RESPONSIVE (≤ 991px) – mantiene coherencia con tu hamburguesa ====== */
@media (max-width: 991px){
  .prod-shell{ display:block; }
  .prod-side{ 
    position:fixed !important; top:0; left:0;
    height:100dvh; width:260px; overflow:auto;
    transform:translateX(-100%); transition:transform .2s ease-out; z-index:10010;
    margin-right:0; padding-right:10px;
  }
  body.nav-open .prod-side{ transform:translateX(0); }
  .prod-side::after{ display:none; }       /* sin separador cuando es off-canvas */
  .prod-main{ margin-left:0 !important; }
}

/* 1) Layout de dos columnas como en “productos” */
@media (min-width: 992px){
  .prod-shell{
    display:grid;
    grid-template-columns: 260px 1fr;   /* sidebar + contenido */
    gap:24px;                            /* mismo gap que la segunda imagen */
  }
  .prod-main{
    max-width:1060px;                    /* mismo ancho de trabajo */
    margin:0 auto;                       /* centrado */
    padding:0 8px;
  }
}

/* 2) Sidebar: mismo look y comportamiento sticky */
.prod-side{
  position:sticky; top:12px; align-self:start;
  width:240px;
  padding:10px;
  background: linear-gradient(to bottom,#fffaf0,#fef6e4);
  border:1px solid var(--borde);
  border-radius:12px;
  box-shadow: var(--sombra);
  margin-right:18px;                     /* aire para el separador */
}

/* Separador vertical a la derecha del menú (como en “productos”) */
@media (min-width: 992px){
  .prod-side{ position:sticky; }
  .prod-side::after{
    content:"";
    position:absolute;
    right:-18px; top:0;
    width:1px; height:100%;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.08),
      rgba(0,0,0,.06) 30%,
      rgba(0,0,0,.04) 70%,
      rgba(0,0,0,.02)
    );
    border-radius:1px;
  }
}

.prod-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.prod-nav li{ margin:0; }
.prod-nav a{
  display:block;
  padding:10px 15px;
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:10px;
  color:#5c4b3b;
  font-size:15px; font-weight:500;
  text-decoration:none;
  transition:all .2s ease-in-out;
  box-shadow: var(--sombra);
}
.prod-nav a:hover{
  background:#fff7ec; border-color:#d8b88a;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.prod-nav .active a{
  background:#fdf2e3; border-color:#e3ad63;
  font-weight:700; color:#4a3d2e;
}

/* 3) Título principal del dashboard (igual estilo que “productos”) */
.prod-main > h1,
.prod-main > .page-title,
.prod-main > .titulo{
  margin: 4px 0 18px;                  /* aire arriba y abajo */
  font-weight: 700;
  color: var(--texto);
  font-size: var(--f1);
  letter-spacing:.2px;
  line-height:1.2;
  position:relative;
}
.prod-main > h1::after,
.prod-main > .page-title::after,
.prod-main > .titulo::after{
  content:"";
  position:absolute; left:0; bottom:-8px;
  width:180px; height:10px;
  background:linear-gradient(90deg,#edd09b,transparent);
  border-radius:999px; opacity:.6;
}

/* 4) Tarjetas del dashboard con el mismo “peso” visual */
.card, .kpi, .panel, .box{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:16px;
  box-shadow: var(--sombra);
}

@media (max-width: 991px){
  .prod-shell{ display:block; }
  .prod-side::after{ display:none; }
  .prod-main{ margin-left:0 !important; }
}

/* Contenedor de la página (centra todo) */
.prod-shell{
  max-width: 1200px;              /* ancho total centrado */
  margin: 14px auto 24px;         /* separación de la barra + margen inferior */
  display: grid;
  grid-template-columns: 200px 1fr; /* menú más chico */
  gap: 28px;                        /* más aire entre menú y contenido */
}

/* Sidebar compacto y separado de la barra */
.prod-side{
  position: sticky;
  top: 16px;                        /* despega de la barra al hacer scroll */
  align-self: start;
  width: 200px;                     /* ↓ tamaño del menú */
  padding: 8px;
  background: linear-gradient(to bottom,#fffaf0,#fef6e4);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
  margin-right: 18px;               /* espacio para el separador */
}

/* Separador vertical a la derecha del menú */
.prod-side::after{
  content:"";
  position:absolute;
  right:-18px; top:0;
  width:1px; height:100%;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.08),
    rgba(0,0,0,.06) 30%,
    rgba(0,0,0,.04) 70%,
    rgba(0,0,0,.02)
  );
  border-radius:1px;
}

/* Ítems del menú (más compactos) */
.prod-nav{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.prod-nav a{
  display:block;
  padding:8px 12px;                /* ↓ padding */
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:10px;
  color:#5c4b3b;
  font-size:14px;                  /* ↓ tipografía */
  font-weight:500;
  text-decoration:none;
  transition:all .2s ease-in-out;
  box-shadow: var(--sombra);
}
.prod-nav a:hover{
  background:#fff7ec; border-color:#d8b88a;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.prod-nav .active a{
  background:#fdf2e3; border-color:#e3ad63;
  font-weight:700; color:#4a3d2e;
}

/* Área de contenido centrada y con buen ancho de lectura */
.prod-main{
  max-width: 980px;                /* columna de contenido más angosta */
  width: 100%;
  margin-inline: auto;             /* centra dentro de la columna 1fr */
  padding: 0 8px;
}

/* Título consistente con el resto del sitio */
.prod-main > h1,
.prod-main > .page-title,
.prod-main > .titulo{
  margin: 4px 0 18px;
  font-weight: 700;
  color: var(--texto);
  font-size: var(--f1);
  line-height: 1.2;
  letter-spacing: .2px;
  position: relative;
}
.prod-main > h1::after,
.prod-main > .page-title::after,
.prod-main > .titulo::after{
  content:"";
  position:absolute; left:0; bottom:-8px;
  width:180px; height:10px;
  background:linear-gradient(90deg,#edd09b,transparent);
  border-radius:999px; opacity:.6;
}

/* Tarjetas/KPIs coherentes */
.card, .kpi, .panel, .box{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:16px;
  box-shadow: var(--sombra);
}

/* Responsive: en móvil, el menú no ocupa espacio (si usás off-canvas) */
@media (max-width: 991px){
  .prod-shell{ display:block; margin:10px auto 20px; }
  .prod-side::after{ display:none; }
  .prod-main{ max-width: 100%; padding: 0 10px; }
}
/* === Pegar sidebar al borde izquierdo (desktop) === */
@media (min-width: 992px){
  .prod-shell{
    max-width: none;          /* quita centrado del grid */
    width: 100%;
    margin: 14px 0 24px;      /* deja aire con la barra, sin auto */
    padding-left: 8px;        /* mini gutter a la izquierda */
    padding-right: 0;
    display: grid;
    grid-template-columns: 200px 1fr;  /* mismo menú chico */
    gap: 28px;                /* separación menú ↔ contenido */
  }

  .prod-side{
    margin-left: 0;           /* por si venía de un contenedor */
  }

  /* acercar la línea separadora al menú */
  .prod-side::after{
    right: -14px;             /* antes -18px */
  }

  /* el contenido sigue con ancho cómodo y alineado */
  .prod-main{
    max-width: 980px;
    margin-left: 0;           /* arranca junto al separador */
    margin-right: auto;       /* respira hacia la derecha */
    padding: 0 8px;
  }
}

/* móvil: sin cambios (off-canvas) */
@media (max-width: 991px){
  .prod-shell{ padding-left: 0; }
}
/* === Más espacio entre menú y contenido (desktop) === */
@media (min-width: 992px){
  .prod-shell{
    grid-template-columns: 200px 1fr;  
    gap: 60px;                          
    padding-left: 8px;                 
  }

  .prod-side{
    margin-right: 0;                
  }

  .prod-side::after{
    right: -20px;                      
  }

  .prod-main{
    padding-left: 13px;
  }
}

.inv-title{
  text-align:center;
  font-weight:300;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height:1.15;
  color: var(--texto);
  margin: 6px 0 18px;
  position: relative;
}
/* sin línea decorativa debajo del título */
.inv-title::after{ content:none !important; }

.prod-filters{
  background: #fff3d9  !important;               

  border-radius: 14px;
  padding: 12px;
  justify-content: center;             
  gap: 10px 12px;
}
.prod-filters input[type="text"],
.prod-filters select{
  background:#fff;                     
  border:1px solid var(--borde);
  border-radius:12px;
  height:38px;
  padding:0 12px;
}

.bto-f{
  background: var(--btn);
  color: var(--btn-txt);
  border: 1px solid var(--btn);
  border-radius: 12px;
  height: 38px;
  padding: 0 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease;
}
.bto-f:hover{ filter:brightness(.95); }

.button-primary,
.button-primary:visited,
.button-primary:hover,
.button-primary:focus{
  text-decoration:none !important;     
  outline: none;
  box-shadow:none;
}

.button-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  padding:.6rem .9rem;
  font-weight:700;
}

@media (max-width: 600px){
  .inv-title{ font-size: 26px; }
  .prod-filters{ padding:10px; }
}
.trans-row input[type="number"]{ width:100%; max-width:100%; box-sizing:border-box; }