/* ================== FromApp – Sortie – Emballage des commandes ================== */
/* Paleta & base */
:root{
  --blue:#2563eb; --panel:#fff; --line:#e5e7eb; --muted:#64748b; --bg:#f6f7fb;
  --sidebar-bg:#dbe6ff; --sidebar-accent:#cfe0ff; --sidebar-grad-end:#bcd2ff;

  --ok:#16a34a; --warn:#d97706; --err:#ef4444;
  --ok-soft:#e8faef;        /* verde suave para done */
  --warn-soft:#fff7db;      /* amarillo suave para pending */
  --ok-border:#a9e7bb;
  --warn-border:#fde68a;

  --pill-blue:#e5edff; --pill-green:#d1fae5; --pill-red:#fee2e2; --pill-yellow:#fef9c3;
}
html,body{ height:100%; background:var(--bg); }
body{ margin:0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; color:#111827; }
*{ box-sizing:border-box; }

/* Grid principal */
.layout{ display:flex; min-height:100vh; }

/* ------------- Sidebar (liste) ------------- */
.sidebar{
  width:340px; background:linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-grad-end) 65%);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:relative; z-index:20;
  box-shadow:6px 0 14px -10px rgba(16,24,40,.18);
}
.side-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px; border-bottom:1px solid var(--line); position:sticky; top:0;
  background:var(--sidebar-accent); z-index:5;
}
.side-header h3{ margin:0; font-size:18px; }
.side-header-actions{ display:flex; gap:8px; align-items:center; }
.filters{ padding:10px 12px; border-bottom:1px solid var(--line); }
.filters input, .filters select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-size:16px;
  margin-bottom:8px; background:#fff;
}
.cmd-list{ overflow:auto; padding-bottom:20px; }
.cmd-item{ padding:12px 14px; border-bottom:1px solid #f1f5f9; cursor:pointer; }
.cmd-item:hover{ background:#f8fafc; }
.cmd-item.active{ background:#eef2ff; }
.cmd-item .title{ font-size:16px; font-weight:600; }
.cmd-item .meta{ color:#6b7280; margin-top:4px; font-size:13px; }

/* ------------- Main ------------- */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; height:100vh; }
.empty{ padding:24px; color:#475569; }
.btn-open-list{
  display:none; gap:8px; align-items:center; padding:10px 12px; border:1px solid var(--line);
  border-radius:12px; background:#fff; font-size:16px; cursor:pointer;
}

/* Header de la commande */
.cmd-panel{ display:flex; flex-direction:column; gap:14px; padding:14px; height:100%; overflow:auto; }
.cmd-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; position:sticky; top:0; z-index:2;
}
.header-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cmd-header h2{ margin:0; font-size:20px; }
.cmd-header .meta{ color:#374151; font-size:14px; display:flex; flex-direction:column; gap:6px; }
.cmd-header .right{ display:flex; gap:10px; align-items:end; flex-wrap:wrap; }

/* Pills / estados */
.pill{ background:#f1f5f9; border-radius:999px; padding:4px 10px; font-size:12px; border:1px solid #e5e7eb; }
.pill-blue{ background:var(--pill-blue); border-color:#cdd9ff; }
.pill-green{ background:var(--pill-green); border-color:#a7f3d0; }
.pill-red{ background:var(--pill-red); border-color:#fecaca; }
.pill-yellow{ background:var(--pill-yellow); border-color:#fde68a; }
.status-emballage{ background:#e0f2fe; border-color:#bae6fd; }
.status-expediee{ background:#ecfccb; border-color:#d9f99d; }
.status-annulee{ background:#fee2e2; border-color:#fecaca; }

/* Botones */
.btn{ background:var(--blue); color:#fff; border:none; border-radius:12px; padding:12px 14px; font-size:16px; cursor:pointer; }
.btn:hover{ filter:brightness(.94); }
.btn.ghost{ background:#fff; color:#1f2937; border:1px solid var(--line); }
.btn.danger{ background:var(--err); }
.btn.success{ background:var(--ok); }
.btn.warn{ background:var(--warn); color:#fff; }
.btn.outline{ background:#fff; color:#111827; border:1px solid var(--line); }
.btn.footer-lg{ padding:12px 16px; font-weight:700; }
.btn.small{ padding:8px 12px; font-size:14px; border-radius:10px; }
.btn.icon{ display:inline-flex; align-items:center; gap:8px; }

/* Footer pegajoso (uniforme y responsivo) */
.cmd-footer{
  position:sticky; bottom:0; display:flex; justify-content:space-between; gap:10px;
  background:linear-gradient(180deg, rgba(246,247,251,0) 0%, rgba(246,247,251,1) 35%);
  padding:12px 0 4px 0; margin-top:8px;
}
.cmd-footer-group{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width: 860px){
  .cmd-footer{ flex-direction:column; }
  .cmd-footer-group{ width:100%; }
  .cmd-footer-group .btn{ flex:1 1 0; min-height:48px; }
}

/* Item card */
.item-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px; box-shadow: 0 2px 10px rgba(0,0,0,.03); margin-bottom:12px;
  display:block !important;
}
.item-head{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.item-title{ font-weight:700; font-size:18px; }
.item-meta{ color:#475569; display:flex; gap:10px; flex-wrap:wrap; font-size:15px; }
.item-actions .chev{ border:1px solid var(--line); background:#fff; border-radius:10px; padding:8px 12px; cursor:pointer; }
.item-body.collapsed{ display:none; }

/* Semáforo visual por estado del item */
.item-card.pending{
  background:var(--warn-soft);
  border-color:var(--warn-border);
  box-shadow:inset 0 0 0 2px rgba(253,230,138,.5);
}
.item-card.done{
  background:var(--ok-soft);
  border-color:var(--ok-border);
  box-shadow:inset 0 0 0 2px rgba(169,231,187,.55);
}
.item-card.pending .item-title::before{
  content:"⏳ "; opacity:.85;
}
.item-card.done .item-title::before{
  content:"✅ "; opacity:.85;
}

/* Tabla resumen global */
.grid-pesadas table{ width:100%; border-collapse:collapse; background:#fff; }
.grid-pesadas th, .grid-pesadas td{ border-bottom:1px solid var(--line); padding:10px; }
.grid-pesadas th{ text-align:left; font-weight:700; }
.grid-pesadas .kg, .right{ text-align:right; }

/* --------- Pesos Variable (pv-*) --------- */
.pv-wrap{ display:flex; flex-direction:column; gap:12px; }
.pv-toolbar{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.pv-total{ font-weight:700; color:#111827; }

.pv-lot{ border:1px dashed #d1d5db; border-radius:12px; padding:12px; background:#fafafa; }
.pv-lot-header{ display:flex; justify-content:space-between; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.pv-lot-left{ min-width:240px; flex:1; }
.pv-lot-label{ display:block; font-size:13px; color:#475569; margin-bottom:6px; }
.pv-lot-tools{ display:flex; gap:8px; flex-wrap:wrap; }
.pv-lot-tools .btn{ white-space:nowrap; }

.pv-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap:8px; margin-top:10px;
}
.pv-grid input{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; background:#fff; font-size:15px;
}
.pv-lot-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:10px; flex-wrap:wrap; }
.pv-lot-total{ color:#111827; font-weight:600; }
.pv-saved-groups{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.pv-group{ border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.pv-group-head{ display:flex; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #e5e7eb; }
.pv-group-title{ font-size:13px; color:#475569; }
.pv-group-list{ list-style:none; margin:0; padding:10px 12px; display:grid; gap:8px; }
.pv-group-item{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.pv-group-poids{ font-weight:600; }

/* Autocomplete LOT (variable & fixe) */
.lot-ac-wrap{ position:relative; }
.lot-ac-inp{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px;
  font-size:15px; background:#fff;
}
.lot-ac-dd{
  position:absolute; left:0; right:0; top:100%; margin-top:6px; background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 12px 24px rgba(0,0,0,.1); max-height:260px; overflow:auto; z-index:50;
}
.lot-ac-opt{ padding:10px 12px; cursor:pointer; }
.lot-ac-opt:hover{ background:#f8fafc; }
.lot-ac-opt.empty{ color:#6b7280; }

/* --------- Pesos Fijos (pf-*) --------- */
.pf-wrap{ display:flex; flex-direction:column; gap:12px; }
.pf-row{ display:flex; flex-direction:column; gap:6px; }
.pf-label{ font-size:13px; color:#475569; }
.pf-inline{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:12px; align-items:end; }
@media (max-width: 720px){
  .pf-inline{ grid-template-columns: 1fr; }
}
.pf-inline-item{ min-width:160px; }
.pf-inp{ width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; font-size:15px; background:#fff; }
.pf-sublabel{ display:block; font-size:12px; color:#64748b; margin-bottom:6px; }
.pf-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pf-totals{ display:flex; gap:16px; flex-wrap:wrap; padding:8px 0; }
.pf-total-line{ background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; }

/* --------- Drawer (tablet) --------- */
.drawer-scrim{ display:none; }

@media (max-width: 1024px){
  html{ font-size:17px; }
  .sidebar{
    position: fixed; inset: 0 auto 0 0; width: 92vw; max-width: 420px;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
  }
  body.drawer-open .sidebar{ transform: translateX(0); }

  /* 👇 Mostrar el velo SOLO cuando el drawer está abierto */
  .drawer-scrim{
    position:fixed; inset:0; background:rgba(0,0,0,.35);
    display:none; z-index:30;
  }
  body.drawer-open .drawer-scrim{ display:block; }

  .btn-open-list{ display:inline-flex; }
  /* Asegura que el botón quede por encima del velo */
  .btn-open-list, #btnOpenListHeader{ position:relative; z-index:1; }
}

/* Fire HD 8 (1280x800) – tipografía/paddings cómodos */
@media (max-width: 900px){
  html{ font-size:18px; }
  .item-title{ font-size:19px; }
  .cmd-header{ padding:10px 12px; }
  .filters input, .filters select{ font-size:18px; padding:14px 16px; }
  .cmd-item .title{ font-size:17px; }
  .btn{ padding:14px 16px; font-size:18px; border-radius:14px; }
  .item-card{ border-radius:16px; }
}

/* --------- Utilidades --------- */
.small{ font-size:12px; color:#6b7280; }
.hidden{ display:none !important; }

/* === Botón ⬅︎ Fermer del drawer === */
.side-header #btnCloseList{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  height:40px !important; line-height:40px !important; padding:0 14px !important; white-space:nowrap !important;
  overflow:hidden !important; border:1px solid #c7d2fe !important; border-radius:12px !important;
  background:#fff !important; color:#0f3b9d !important; font-weight:600 !important;
}

/* === Selects legibles (lista filtros) === */
.select, .filters select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font-size:15px; line-height:42px; height:42px; padding:0 2.25rem 0 .9rem;
  border:1px solid #e5e7eb; border-radius:12px; background:#fff; color:#0f172a; min-width:220px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center; background-size:16px;
}

/* ====== PRINT ====== */
@media print{
  :root{ --bg:#fff; }
  html,body{ background:#fff !important; }
  /* Ocultar elementos de navegación/overlay */
  .sidebar, .drawer-scrim, .filters, .btn-open-list,
  .cmd-footer, .side-header, #btnOpenListHeader,
  #fromapp-auth-overlay, #auth-overlay { display:none !important; }
  /* Expandir contenido */
  .layout, .main, .cmd-panel{ display:block; min-height:auto; height:auto; padding:0; }
  .cmd-panel{ padding:0 0 8mm 0; }
  .cmd-header{
    position:static; border:none; background:#fff; padding:0 0 6mm 0; margin-bottom:4mm;
    border-bottom:2px solid #ccc;
  }
  .cmd-header h2{ font-size:18pt; }
  .cmd-header .meta{ font-size:11pt; color:#111; }
  .item-card{
    break-inside:avoid; page-break-inside:avoid;
    border:1px solid #ddd; background:#fff; box-shadow:none; margin:0 0 6mm 0;
  }
  .item-card.pending, .item-card.done{
    background:#fff; box-shadow:none; border-color:#ddd;
  }
  .pv-lot, .pf-inline, .pf-totals, .grid-pesadas table{ background:#fff; }
  .btn{ display:none !important; }
  /* Tipografía más grande para lectura */
  body{ font-size:11pt; }
  .item-title{ font-size:13pt; }
  .pv-grid input, .pf-inp{ border:1px solid #aaa; }
}
/* ===== Drawer layering fix ===== */
@media (max-width: 1024px){
  /* Orden de capas: sidebar (40) > scrim (30) > resto (auto) */
  .sidebar{ z-index: 40; }
  .drawer-scrim{ z-index: 30; }

  /* El botón "📥 Liste" debe estar visible solo cuando el drawer está cerrado */
  .btn-open-list, #btnOpenListHeader{
    position: relative;
    z-index: 1;              /* por debajo del drawer */
  }
  body.drawer-open .btn-open-list,
  body.drawer-open #btnOpenListHeader{
    display: none !important;  /* ocultarlo mientras el drawer está abierto */
  }
}

/* Seguridad extra: nunca mostrar scrim si el drawer está cerrado */
body:not(.drawer-open) .drawer-scrim{ display:none !important; }
/* ===== Bloqueo del drawer cuando el teclado está abierto ===== */
@media (max-width: 1024px){
  body.kbd-open .sidebar{
    transform: translateX(-100%) !important; /* drawer forzado a cerrado */
  }
  body.kbd-open .drawer-scrim{
    display: none !important;               /* scrim oculto */
  }
}