*{box-sizing:border-box;margin:0;padding:0;}

:root{
  --mk-green:#8ABD7B;
  --mk-blue:#59689E;
  --mk-teal:#8BC1A8;
  --mk-dark:#1A1919;
  --mk-body:#5B5F66;
  --mk-border:#E6E8EC;
  --mk-bg-soft:#F6F8F7;
  --mk-danger:#D9685A;
  --mk-warn:#E0A33C;

  --radius-pill:9999px;
  --radius-base:20px;
  --radius-sm:10px;

  --shadow-xs:0 2px 4px 0 rgba(26,25,25,0.05);
  --shadow-sm:0 2px 6px 0 rgba(26,25,25,0.07), 0 1px 2px -1px rgba(26,25,25,0.04);
  --shadow-md:0 6px 16px -4px rgba(26,25,25,0.10), 0 2px 6px -2px rgba(26,25,25,0.05);
}

html,body{min-height:100%;font-family:-apple-system,'Inter',sans-serif;background:var(--mk-bg-soft);color:var(--mk-dark);font-size:14px;}

/* ---------- barra superior ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:20px;
  padding:12px 22px;background:#fff;border-bottom:1px solid var(--mk-border);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.brand-icon{height:30px;}
.brand-name{font-size:14px;font-weight:800;letter-spacing:-0.2px;line-height:1.2;}
.brand-sub{font-size:11.5px;color:#9AA0A8;font-weight:600;}

.tab-nav{display:flex;gap:6px;background:var(--mk-bg-soft);border-radius:var(--radius-pill);padding:4px;}
.tab-btn{
  border:none;background:transparent;border-radius:var(--radius-pill);
  padding:8px 18px;font-size:12.5px;font-weight:700;color:var(--mk-body);cursor:pointer;
  transition:background .15s,color .15s;
}
.tab-btn.active{background:#fff;color:var(--mk-dark);box-shadow:var(--shadow-xs);}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
.import-info{font-size:11.5px;color:#9AA0A8;font-weight:600;text-align:right;line-height:1.45;}
.import-info b{color:var(--mk-body);font-weight:700;}

.btn{
  border:none;border-radius:var(--radius-pill);
  padding:11px 18px;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:background .15s,transform .12s,opacity .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--mk-blue);color:#fff;}
.btn-primary:hover{background:#4c5a87;}
.btn-outline{background:#fff;color:var(--mk-body);border:1px solid var(--mk-border);box-shadow:none;}
.btn-outline:hover{background:var(--mk-bg-soft);}
.btn-sm{padding:9px 14px;font-size:12.5px;}

/* ---------- avisos ---------- */
.aviso{
  margin:14px 22px 0;padding:12px 16px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;
}
.aviso.ok{background:rgba(138,189,123,0.16);color:#4a7a3c;}
.aviso.error{background:rgba(217,104,90,0.14);color:#a2402f;}

/* ---------- layout ---------- */
.vista{padding:20px 22px 40px;max-width:1500px;margin:0 auto;}

/* ---------- KPIs ---------- */
.kpis{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px;}
.kpi{
  background:#fff;border:1px solid var(--mk-border);border-radius:var(--radius-base);
  padding:14px 18px;min-width:132px;box-shadow:var(--shadow-xs);
}
.kpi-num{font-size:23px;font-weight:800;letter-spacing:-0.5px;line-height:1.1;}
.kpi-lbl{font-size:11px;font-weight:700;color:#9AA0A8;text-transform:uppercase;letter-spacing:0.4px;margin-top:4px;}
.kpi.alerta .kpi-num{color:var(--mk-danger);}
.kpi.aviso-kpi .kpi-num{color:var(--mk-warn);}

/* ---------- filtros ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;}
.input{
  border:1px solid var(--mk-border);background:#fff;border-radius:var(--radius-pill);
  padding:10px 16px;font-size:13px;font-family:inherit;color:var(--mk-dark);
  outline:none;transition:border-color .15s;
}
.input:focus{border-color:var(--mk-blue);}
#buscarPedidos,#buscarDemanda{flex:1;min-width:260px;}
select.input{cursor:pointer;max-width:280px;}

.toggle{display:flex;gap:4px;background:#fff;border:1px solid var(--mk-border);border-radius:var(--radius-pill);padding:3px;}
.toggle-btn{
  border:none;background:transparent;border-radius:var(--radius-pill);
  padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--mk-body);cursor:pointer;
}
.toggle-btn.active{background:var(--mk-bg-soft);color:var(--mk-dark);}

.nota-vista{
  font-size:12.5px;color:var(--mk-body);background:#fff;border:1px solid var(--mk-border);
  border-radius:var(--radius-sm);padding:11px 15px;margin-bottom:14px;line-height:1.5;
}

/* ---------- tabla ---------- */
/* Sin overflow: cualquier recorte en el contenedor rompe el sticky del thead.
   Las esquinas se redondean en las celdas de los extremos. */
.tabla-wrap{background:#fff;border:1px solid var(--mk-border);border-radius:var(--radius-base);box-shadow:var(--shadow-xs);}
.tabla{width:100%;border-collapse:collapse;}
.tabla thead th:first-child{border-top-left-radius:var(--radius-base);}
.tabla thead th:last-child{border-top-right-radius:var(--radius-base);}
.tabla tbody tr:last-child td{border-bottom:none;}
.tabla tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radius-base);}
.tabla tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-base);}
.tabla thead th{
  text-align:left;font-size:10.5px;font-weight:800;color:#9AA0A8;
  text-transform:uppercase;letter-spacing:0.5px;
  padding:12px 14px;border-bottom:1px solid var(--mk-border);background:var(--mk-bg-soft);
  position:sticky;top:56px;z-index:5;white-space:nowrap;
}
.tabla td{padding:11px 14px;border-bottom:1px solid #F1F3F5;vertical-align:top;font-size:13px;}
.tabla tbody tr:hover{background:#FAFBFC;}
.tabla tr.grupo-inicio td{border-top:1px solid var(--mk-border);}
.tabla tr.grupo-inicio:first-child td{border-top:none;}
.tabla tr.hija td.c-doc{border-left:2px solid var(--mk-border);}

.c-doc{white-space:nowrap;}
.doc-num{font-weight:800;font-size:12.5px;}
.doc-vend{font-size:11px;color:#9AA0A8;font-weight:600;}
.cliente{font-weight:700;line-height:1.35;}
.cliente-cod{font-size:11px;color:#9AA0A8;font-weight:600;}
.nota{font-size:11.5px;color:var(--mk-body);line-height:1.4;max-width:270px;}

.prod{display:flex;align-items:flex-start;gap:9px;}
.swatch{width:13px;height:13px;border-radius:4px;border:1px solid rgba(0,0,0,0.18);flex-shrink:0;margin-top:2px;}
.prod-nom{line-height:1.35;max-width:330px;}
.prod-cod{font-size:11px;color:#9AA0A8;font-weight:600;}
.medida{font-weight:800;letter-spacing:-0.2px;}

.cant{font-weight:800;text-align:right;white-space:nowrap;}
.cant-u{font-size:11px;color:#9AA0A8;font-weight:600;}

.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:700;white-space:nowrap;
}
.chip-imp{background:rgba(89,104,158,0.12);color:var(--mk-blue);}
.chip-suelta{background:rgba(224,163,60,0.16);color:#9a6d16;}
.chip-tipo{background:var(--mk-bg-soft);color:var(--mk-body);}

.estado{
  display:inline-block;padding:4px 11px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:800;white-space:nowrap;
}
.estado.atrasado{background:var(--mk-danger);color:#fff;}
.estado.hoy{background:#B4472F;color:#fff;}
.estado.urgente{background:rgba(224,163,60,0.2);color:#8a5f11;}
.estado.semana{background:rgba(89,104,158,0.14);color:var(--mk-blue);}
.estado.en-tiempo{background:rgba(138,189,123,0.18);color:#4a7a3c;}
.estado.sin-fecha{background:var(--mk-bg-soft);color:#9AA0A8;}
.fecha{font-size:11.5px;color:var(--mk-body);font-weight:600;margin-top:3px;white-space:nowrap;}
.planilla{font-size:10.5px;color:#B0B5BC;font-weight:600;margin-top:2px;white-space:nowrap;}

.vacio{padding:44px 20px;text-align:center;color:#9AA0A8;font-size:13.5px;font-weight:600;line-height:1.6;}

/* ================= CALENDARIO ================= */
.vista-ancha{max-width:none;}
.cal-layout{display:flex;gap:16px;align-items:flex-start;}

/* ---------- pendientes ----------
   El panel arranca cerrado; se abre con el botón de la cabecera y empuja el
   calendario en vez de taparlo, para poder arrastrar de uno al otro. */
.pend{display:none;}
.cal-layout.con-pend .pend{
  width:270px;flex-shrink:0;background:#fff;border:1px solid var(--mk-border);
  border-radius:var(--radius-base);padding:14px;box-shadow:var(--shadow-xs);
  display:flex;flex-direction:column;gap:9px;
  position:sticky;top:70px;max-height:calc(100vh - 90px);
}
.pend-head{display:flex;align-items:center;gap:8px;}
.pend-x{
  margin-left:auto;border:none;background:transparent;color:#9AA0A8;
  font-size:12px;cursor:pointer;padding:3px 5px;border-radius:6px;
}
.pend-x:hover{background:var(--mk-bg-soft);}
.pend-titulo{font-size:13px;font-weight:800;}
.pend-cuenta{
  background:var(--mk-bg-soft);color:var(--mk-body);border-radius:var(--radius-pill);
  padding:2px 10px;font-size:11.5px;font-weight:800;
}
.toggle-full{width:100%;}
.toggle-full .toggle-btn{flex:1;padding:6px 4px;font-size:11.5px;}
.input-full{width:100%;}
.pend input.input{padding:8px 13px;font-size:12.5px;}

.pend-lista{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-right:2px;margin-top:2px;}
.pend-item{
  border:1px solid var(--mk-border);border-radius:var(--radius-sm);
  padding:9px 10px;cursor:grab;background:#fff;transition:border-color .15s,box-shadow .15s;
}
.pend-item:hover{border-color:var(--mk-blue);box-shadow:var(--shadow-xs);}
.pend-item.is-drag{opacity:.35;}
/* touch-action:none deja arrastrar con el dedo sin que la página scrollee */
.pend-item,.tar{touch-action:none;user-select:none;}

/* la copia que sigue al puntero mientras se arrastra */
.fantasma{
  position:fixed;z-index:80;pointer-events:none;opacity:.92;
  box-shadow:var(--shadow-md);transform:rotate(-1.5deg);margin:0;
}
.pend-item-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.pend-medida{font-size:12.5px;font-weight:800;letter-spacing:-0.2px;}
.pend-cliente{font-size:11.5px;color:var(--mk-body);font-weight:600;margin:3px 0 6px;line-height:1.35;}
.pend-abajo{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pend-cant{font-size:11.5px;font-weight:800;}
.pend-vacio{padding:26px 8px;text-align:center;color:#9AA0A8;font-size:12.5px;font-weight:600;line-height:1.6;}
.pend-pie{font-size:11px;color:#9AA0A8;font-weight:600;text-align:center;line-height:1.5;}

/* ---------- cabecera y leyenda ---------- */
.cal{flex:1;min-width:0;}
.cal-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--mk-border);border-radius:var(--radius-base);
  padding:11px 16px;margin-bottom:10px;box-shadow:var(--shadow-xs);
}
.cal-nav{display:flex;align-items:center;gap:7px;}
.cal-mes{font-size:13.5px;font-weight:800;min-width:130px;text-align:center;}
.cal-resumen{font-size:12.5px;color:var(--mk-body);font-weight:600;}
.cal-resumen b{color:var(--mk-dark);font-weight:800;}
.check{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--mk-body);cursor:pointer;
}

.pend-abrir{display:inline-flex;gap:7px;align-items:center;}
.pend-abrir.activo{background:var(--mk-blue);color:#fff;border-color:var(--mk-blue);}
.pend-badge{
  background:var(--mk-bg-soft);color:var(--mk-body);
  border-radius:var(--radius-pill);padding:1px 8px;font-size:11px;font-weight:800;
}
.pend-abrir.activo .pend-badge{background:rgba(255,255,255,0.22);color:#fff;}

.cal-leyenda{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.leg{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--mk-border);background:#fff;border-radius:var(--radius-pill);
  padding:5px 12px;font-size:11.5px;font-weight:700;color:var(--mk-dark);
  transition:opacity .12s,background .12s;
}
.leg:hover{background:var(--mk-bg-soft);}
.leg.apagada{opacity:.4;}
.leg.apagada .leg-punto{background:#C4C9D0 !important;}
.leg-punto{width:9px;height:9px;border-radius:50%;flex-shrink:0;}

/* ---------- grilla del mes ---------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;}
.cal-dia-cab{
  text-align:center;padding:6px 2px;
  font-size:10.5px;font-weight:800;color:#9AA0A8;
  text-transform:uppercase;letter-spacing:0.5px;
}
.cal-cel{
  min-height:120px;padding:5px;display:flex;flex-direction:column;gap:4px;
  background:#fff;border:1px solid var(--mk-border);border-radius:var(--radius-sm);
  transition:background .12s,border-color .12s;
}
.cal-cel.fuera{background:var(--mk-bg-soft);}
.cal-cel.fuera .cel-num{color:#C4C9D0;}
.cal-cel.es-hoy{border-color:var(--mk-blue);box-shadow:inset 0 0 0 1px var(--mk-blue);}
.cal-cel.is-over{border-color:var(--mk-blue);background:rgba(89,104,158,0.08);}

.cel-cab{display:flex;align-items:center;justify-content:space-between;padding:1px 2px 0;}
.cel-num{font-size:11.5px;font-weight:800;color:var(--mk-body);}
.cal-cel.es-hoy .cel-num{color:var(--mk-blue);}
.cel-mas{
  border:none;background:transparent;color:#C4C9D0;font-size:14px;font-weight:700;
  cursor:pointer;border-radius:5px;line-height:1;padding:1px 5px;
  opacity:0;transition:opacity .12s,background .12s;
}
.cal-cel:hover .cel-mas{opacity:1;}
.cel-mas:hover{background:var(--mk-bg-soft);color:var(--mk-body);}
.cel-tareas{display:flex;flex-direction:column;gap:4px;}

/* ---------- tarjeta ---------- */
/* --maq lo pone el JS con el color de la máquina */
.tar{
  position:relative;border-radius:6px;padding:5px 7px;cursor:grab;
  background:color-mix(in srgb, var(--maq) 11%, #fff);
  border-left:3px solid var(--maq);
  transition:box-shadow .12s,opacity .12s;
}
.tar:hover{box-shadow:var(--shadow-sm);}
.tar.is-drag{opacity:.35;}
.tar.estado-en-proceso{box-shadow:inset 0 0 0 1px var(--mk-warn);}
.tar.estado-terminado{background:var(--mk-bg-soft);border-left-color:#C4C9D0;opacity:.7;}
.tar.estado-terminado .tar-titulo{text-decoration:line-through;}

.tar-maq{
  font-size:9px;font-weight:800;color:var(--maq);
  text-transform:uppercase;letter-spacing:0.4px;
}
.tar.estado-terminado .tar-maq{color:#9AA0A8;}
.tar-titulo{font-size:11px;font-weight:800;line-height:1.25;letter-spacing:-0.2px;margin-top:1px;}
.tar-cliente{
  font-size:9.5px;color:var(--mk-body);font-weight:600;line-height:1.25;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tar-abajo{display:flex;align-items:center;gap:5px;margin-top:3px;flex-wrap:wrap;}
.tar-cant{font-size:9.5px;font-weight:800;color:var(--mk-dark);}
.tar-alerta{
  font-size:8.5px;font-weight:800;color:#fff;background:var(--mk-danger);
  padding:1px 5px;border-radius:var(--radius-pill);
}

.tar-ok{
  position:absolute;top:3px;right:3px;
  width:17px;height:17px;border:none;border-radius:50%;
  background:#fff;color:#B0B5BC;font-size:10px;font-weight:800;
  cursor:pointer;opacity:0;transition:opacity .12s,background .12s,color .12s;
}
.tar:hover .tar-ok{opacity:1;}
.tar-ok:hover{background:var(--mk-green);color:#fff;}
.tar.estado-terminado .tar-ok{opacity:1;background:var(--mk-green);color:#fff;}

/* ---------- modal ---------- */
.modal-fondo{
  position:fixed;inset:0;z-index:50;background:rgba(26,25,25,0.35);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-fondo[hidden]{display:none;}
.modal{
  background:#fff;border-radius:var(--radius-base);width:100%;max-width:520px;
  box-shadow:var(--shadow-md);max-height:90vh;display:flex;flex-direction:column;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 12px;}
.modal-head h3{font-size:16px;font-weight:800;letter-spacing:-0.3px;}
.modal-x{border:none;background:transparent;font-size:15px;color:#9AA0A8;cursor:pointer;padding:4px 6px;}
.modal-body{
  padding:0 22px 8px;overflow-y:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.campo{display:flex;flex-direction:column;gap:5px;}
.campo-full{grid-column:1 / -1;}
.campo span{font-size:11px;font-weight:800;color:#9AA0A8;text-transform:uppercase;letter-spacing:0.4px;}
.campo .input{border-radius:var(--radius-sm);padding:9px 13px;}
.campo textarea.input{resize:vertical;font-family:inherit;line-height:1.45;}
/* botonera de máquinas del modal: se elige con un click, con su color a la vista */
.maq-ops{display:flex;flex-wrap:wrap;gap:6px;}
.maq-op{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--mk-border);background:#fff;border-radius:var(--radius-pill);
  padding:7px 13px;font-size:11.5px;font-weight:700;color:var(--mk-body);
  transition:background .12s,border-color .12s,color .12s;
}
.maq-op:hover{background:var(--mk-bg-soft);}
.maq-op.elegida{
  border-color:var(--maq);color:var(--mk-dark);
  background:color-mix(in srgb, var(--maq) 14%, #fff);
}
.modal-ref{
  grid-column:1 / -1;font-size:11.5px;color:var(--mk-body);line-height:1.5;
  background:var(--mk-bg-soft);border-radius:var(--radius-sm);padding:9px 12px;
}
.modal-ref:empty{display:none;}
.modal-pie{display:flex;align-items:center;padding:14px 22px 18px;gap:10px;}
.modal-pie-der{margin-left:auto;display:flex;gap:8px;}
.btn-danger{background:transparent;color:var(--mk-danger);box-shadow:none;}
.btn-danger:hover{background:rgba(217,104,90,0.1);}
.btn-danger[hidden]{display:none;}