:root{
  --bg: #0d0e10;
  --surface: #17181c;
  --surface-2: #1f2126;
  --border: #35373f;
  --text: #f2f3f5;
  --text-dim: #8b8f99;
  --accent: #1cc6a6;
  --accent2: #ff9f40;
  --accent3: #ff4d73;
  --accent4: #b6dd4f;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --radius: 4px;
  --radius-lg: 6px;
  --shadow-sm: 3px 3px 0 rgba(0,0,0,.55);
  --shadow-md: 5px 5px 0 rgba(0,0,0,.6);
  --shadow-lg: 7px 7px 0 rgba(0,0,0,.65);
  --ease: cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  min-height:100vh;
  background: var(--bg);
}

/* Look plano y técnico (sin blur/glow, bordes duros + sombra sólida sin difuminar): selección
   de texto y scrollbar temáticos, sin tocar ningún elemento/clase de la app. */
::selection{ background: var(--accent); color:#04211c; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--surface-2); border:2px solid var(--bg); border-left:2px solid var(--accent); }
::-webkit-scrollbar-thumb:hover{ background: #2a2d34; }
* { scrollbar-color: var(--surface-2) var(--bg); scrollbar-width: thin; }

a{ color: var(--accent); }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius:0; }

.wrap{ max-width:820px; margin:0 auto; padding:32px 20px 60px; }

.scroll-fade{ opacity:0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.scroll-fade-in{ opacity:1; transform: translateY(0); }

header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:24px;
}
header h1{
  font-size:1.1rem; margin:0; font-weight:800; letter-spacing:.01em;
  display:flex; align-items:center; gap:10px; color: var(--text);
  text-transform:uppercase;
}
header h1 .dot{
  width:10px;height:10px;border-radius:0;
  background: var(--accent);
  transform: rotate(45deg);
  transition: background .3s;
}
header h1 .dot.status-green{ background:var(--ok); }
header h1 .dot.status-orange{ background:var(--warn); }
header h1 .dot.status-red{ background:var(--err); }

.glass{
  background: var(--surface);
  border:2px solid var(--border);
  border-radius: var(--radius-lg);
  padding:20px;
  box-shadow: var(--shadow-sm);
}

/* ---------- Barra de búsqueda principal: tarjeta plana con franja de acento sólida arriba ---------- */
.search-panel{
  position:relative;
  margin-bottom:16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border:2px solid var(--text);
  box-shadow: var(--shadow-lg);
}
.search-panel::before{
  content:'';
  position:absolute; left:-2px; right:-2px; top:-2px; height:6px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: repeating-linear-gradient(90deg,
    var(--accent) 0 25%, var(--accent2) 25% 50%, var(--accent3) 50% 75%, var(--accent4) 75% 100%);
  pointer-events:none;
}

/* ---------- Launcher de secciones (estilo Odoo): tiles por sección para cuentas restringidas ---------- */
.sections-launcher{ margin-bottom:16px; }
.sections-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:14px; margin-top:8px; }
.section-tile{
  display:flex; flex-direction:column; align-items:center; gap:9px; padding:20px 10px;
  border-radius: var(--radius-lg); border:2px solid var(--border); background:var(--surface-2);
  cursor:pointer; transition:transform .12s var(--ease), box-shadow .12s var(--ease), border-color .12s;
  text-align:center; box-shadow: var(--shadow-sm);
}
.section-tile:hover{ border-color:var(--text); transform:translate(-2px,-2px); box-shadow: var(--shadow-md); }
.section-tile:active{ transform:translate(1px,1px); box-shadow:none; }
.section-tile .section-tile-icon{
  width:52px; height:52px; border-radius:0; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; background: var(--accent);
  border:2px solid var(--text);
}
.section-tile .section-tile-label{ font-size:.8rem; font-weight:600; color:var(--text); }
.sections-back-btn{ margin-bottom:12px; font-size:.78rem; padding:6px 12px; }

/* ---------- "Surtidos (Pedidos)": vista de pantalla completa estilo lista de Odoo (en vez del
   modal chico de antes) — encabezado + tabla de una columna con todos los pedidos pendientes. ---------- */
.odoo-list-panel{ margin-bottom:16px; }
.odoo-list-head{ display:flex; align-items:center; gap:14px; margin:4px 0 14px; }
.odoo-list-icon{
  flex-shrink:0; width:44px; height:44px; border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); border:2px solid var(--accent);
}
.odoo-list-head-text{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.odoo-list-head h2{ font-size:1.1rem; font-weight:800; margin:0; text-transform:uppercase; letter-spacing:.3px; }
.odoo-list-count{
  font-size:.72rem; font-weight:700; color: var(--accent); font-family:'JetBrains Mono','SF Mono','Consolas',monospace;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); border:1px solid var(--accent);
  padding:3px 10px; border-radius: var(--radius);
}
.odoo-list-sub{
  font-size:.82rem; color:var(--text-dim); line-height:1.55; margin:0 0 16px;
  padding:11px 14px; border-radius: var(--radius); background: var(--surface-2); border-left:3px solid var(--accent);
}
.odoo-list-table{
  display:flex; flex-direction:column; gap:10px;
  max-height:70vh; overflow-y:auto; padding:2px;
}
.odoo-list-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer;
  font-family:'JetBrains Mono','SF Mono','Consolas',monospace; font-size:.88rem; font-weight:600;
  transition:background .15s var(--ease), padding-left .15s var(--ease);
}
.odoo-list-row:last-child{ border-bottom:none; }
.odoo-list-row:hover{ background:var(--surface-2); color:var(--accent); padding-left:20px; }
.odoo-list-row .odoo-list-arrow{ color:var(--text-dim); font-family:inherit; font-weight:400; }
.odoo-list-row-sub{
  font-size:.78rem; font-weight:400; color:var(--text-dim); margin-top:5px;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing:normal;
}
.odoo-list-row-sub strong{ color:var(--text); font-weight:600; }

/* Tarjetas de pedido dentro de la lista de Surtidos: cada pedido es su propia tarjeta con
   borde duro (mismo criterio que .loc-card) en vez de filas planas separadas solo por una
   línea — número + estado arriba, cliente/P.M. en medio, barra de progreso de salidas abajo. */
.surtido-card{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 18px; cursor:pointer;
  background: var(--surface-2); border:2px solid var(--border); border-left:4px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), border-color .12s;
}
.surtido-card:hover{ transform: translate(-2px,-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.surtido-card-main{ flex:1; min-width:0; }
.surtido-card-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.surtido-card-pedido{
  font-family:'JetBrains Mono','SF Mono','Consolas',monospace; font-size:1.05rem; font-weight:800; color:var(--text);
}
.surtido-card-badge{
  font-size:.7rem; font-weight:700; padding:3px 10px; border-radius: var(--radius);
  border:1.5px solid; letter-spacing:.2px; white-space:nowrap;
}
.surtido-card-meta{
  display:flex; flex-wrap:wrap; gap:5px 16px; font-size:.8rem; color:var(--text-dim); margin-bottom:10px;
}
.surtido-progress-bar{
  width:100%; max-width:320px; height:8px; border-radius:999px; background:var(--surface);
  border:1px solid var(--border); overflow:hidden; margin-bottom:6px;
}
.surtido-progress-fill{
  height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--accent4));
  transition:width .25s;
}
.surtido-card-progress-label{ font-size:.8rem; color:var(--text-dim); }
.surtido-card-progress-label strong{ color:var(--text); font-weight:700; }
.surtido-card .odoo-list-arrow{ flex-shrink:0; font-size:1.3rem; color:var(--text-dim); transition: color .12s, transform .12s; }
.surtido-card:hover .odoo-list-arrow{ color: var(--accent); transform: translateX(3px); }
.greeting{
  position:relative;
  margin:0 0 16px; padding-left:12px;
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:-.005em;
  color: var(--text);
  border-left:3px solid var(--accent);
}
.search-row{ position:relative; display:flex; gap:10px; flex-wrap:wrap; }
.autocomplete-wrap{ position:relative; flex:1; min-width:220px; }
.autocomplete-wrap input[type=text]{ width:100%; }
.autocomplete-list{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  background: var(--surface-2);
  border:2px solid var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow:hidden;
  display:none;
  max-height:280px;
  overflow-y:auto;
}

/* Ambos botones (historial + buscar) viven DENTRO del cuadro de texto, superpuestos a su
   borde derecho — la lupa primero, el historial pegado a la orilla — así los dos se leen como
   parte del mismo buscador en vez de cosas sueltas al lado. */
#searchHistoryBtn{
  position:absolute; top:6px; right:6px; bottom:6px;
  padding:0; width:44px; flex-shrink:0; font-size:1.1rem; justify-content:center;
}
.search-history-list{
  position:absolute; top:calc(100% + 6px); right:0; left:auto; width:min(100%, 380px); z-index:31;
  background: var(--surface-2); border:2px solid var(--text); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); max-height:360px; overflow-y:auto;
  display:none; flex-direction:column;
}
.search-history-list.show{ display:flex; }
.search-history-header{
  padding:12px 14px; font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  color:var(--text-dim); background: var(--surface); border-bottom:2px solid var(--border);
  position:sticky; top:0; z-index:1;
}
.search-history-empty{ padding:20px 14px; font-size:.82rem; color:var(--text-dim); text-align:center; }
.search-history-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--border);
  border-left:3px solid transparent; transition: background .1s, border-color .1s;
}
.search-history-item:hover{ background: var(--surface); border-left-color: var(--accent); }
.search-history-item .sh-type{
  flex-shrink:0; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.3px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border:1px solid var(--accent);
  padding:3px 7px; border-radius: var(--radius);
}
.search-history-item .sh-main{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.search-history-item .sh-code{
  font-family:'JetBrains Mono','SF Mono','Consolas',monospace; font-weight:600; font-size:.85rem;
  white-space:normal; overflow-wrap:anywhere; color: var(--text);
}
.search-history-item .sh-time{ font-size:.68rem; color:var(--text-dim); }
.search-history-item .sh-clear{
  flex-shrink:0; background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:.85rem; padding:4px 6px;
  border-radius: var(--radius); transition: color .1s, background .1s;
}
.search-history-item .sh-clear:hover{ color:#fff; background: var(--err, #ff4d73); }
.search-history-clear-all{
  display:block; width:100%; text-align:center; padding:11px; font-size:.78rem; font-weight:700;
  color:var(--text-dim); background: var(--surface); border:none; border-top:2px solid var(--border); cursor:pointer;
}
.search-history-clear-all:hover{ color:#fff; background: var(--err, #ff4d73); }
.autocomplete-list.show{ display:block; }
.autocomplete-item{
  padding:11px 14px; cursor:pointer; display:flex; flex-direction:column; gap:2px;
  border-bottom:1px solid var(--border);
  border-left:3px solid transparent;
  transition: background .1s, border-color .1s;
}
.autocomplete-item:last-child{ border-bottom:none; }
.autocomplete-item:hover, .autocomplete-item.active{ background: var(--surface); border-left-color: var(--accent); }
.autocomplete-item .ac-code{ font-family:'JetBrains Mono','SF Mono','Consolas',monospace; font-weight:600; font-size:.85rem; letter-spacing:.2px; }
.autocomplete-item .ac-name{ font-size:.75rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.search-row input[type=text]{
  width:100%; box-sizing:border-box;
  background: var(--surface-2);
  border:2px solid var(--border);
  border-radius: var(--radius);
  padding:15px 106px 15px 18px;
  color:var(--text);
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  outline:none;
  transition: border-color .12s;
}
.search-row input[type=text]::placeholder{ color:var(--text-dim); text-transform:none; font-weight:400; }
.search-row input[type=text]:focus{
  border-color:var(--accent);
  background: var(--surface);
}

.btn{
  border:none; border-radius: var(--radius); padding:12px 18px;
  font-size:.86rem; font-weight:800; cursor:pointer; text-transform:uppercase; letter-spacing:.02em;
  display:flex; align-items:center; gap:8px;
  transition: transform .1s var(--ease), box-shadow .1s var(--ease), opacity .15s, border-color .12s;
  color:#fff;
  background: var(--surface-2);
  border:2px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.btn:active:not(:disabled){ transform: translate(2px,2px); box-shadow:none; }
.btn:hover:not(:disabled){ transform: translate(-1px,-1px); box-shadow: var(--shadow-md); border-color: var(--text); }
.btn-primary{ background: var(--accent); border-color: var(--text); color:#04211c; }
/* El botón de buscar vive DENTRO del cuadro de búsqueda (a la derecha, superpuesto), no en su
   propia fila — así queda "parte del buscador" sin importar el ancho de pantalla. */
#searchBtn{
  position:absolute; top:6px; right:56px; bottom:6px;
  padding:0; width:44px; flex-shrink:0;
  font-size:1.15rem; justify-content:center;
}
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.status-line{ margin-top:10px; font-size:.82rem; color:var(--text-dim); min-height:1.2em; }

.result{ margin-top:20px; display:none; }
.result.show{ display:block; animation: fadeUp .25s ease; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.product-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.product-head h2{ margin:0 0 4px; font-size:1.05rem; font-weight:600; }
.product-head .code-pill{
  display:inline-block; margin-top:6px; padding:3px 10px; border-radius:6px;
  background: var(--surface-2); border:1px solid var(--border);
  font-family: 'JetBrains Mono','SF Mono','Consolas', monospace; font-size:.78rem; letter-spacing:.2px; color: var(--accent);
  transition: background .12s, border-color .12s;
}
.product-head .code-pill[data-copy]:hover{ background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); border-color: var(--accent); }
.code-pill-main{
  display:inline-flex; align-items:center; gap:9px;
  font-size:1.6rem; font-weight:900; padding:11px 20px; margin:0 0 6px;
  background: var(--surface-2);
  border:2px solid var(--accent); box-shadow: var(--shadow-sm);
  border-radius: var(--radius); font-family:'JetBrains Mono','SF Mono','Consolas',monospace; letter-spacing:.3px; color: var(--accent);
  cursor:pointer; transition: transform .1s var(--ease), box-shadow .1s var(--ease), background .1s, color .1s;
}
.code-pill-main:hover{ transform: translate(-1px,-1px); box-shadow: var(--shadow-md); }
.code-pill-main.copied{
  background: var(--accent); border-color: var(--text); color:#04211c;
}
.odoo-link-btn{ text-decoration:none; border-color:#311B92; }
.odoo-link-btn:hover:not(:disabled){ border-color:#fff; }
.share-product-btn{ background:#0e7490; border-color:#0e7490; color:#fff; }
.share-product-btn:hover:not(:disabled){ border-color:#fff; }
.product-actions-row{ margin:18px 0 20px; }
.product-desc{
  display:block; font-size:.92rem; line-height:1.45; font-weight:600; color: var(--text-dim);
  margin:0 0 10px; max-width:60ch; padding:0; border:none; background:none;
}
.product-desc-text{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.product-desc.expanded .product-desc-text{ -webkit-line-clamp:unset; overflow:visible; }
.product-desc.truncatable .product-desc-text{ cursor:pointer; }
.product-desc-toggle{
  display:none; margin-top:4px; font-size:.72rem; font-weight:700; color:var(--accent);
  background:none; border:none; padding:0; cursor:pointer;
}
.product-desc.truncatable .product-desc-toggle{ display:inline-block; }

/* En pantallas de escritorio hay espacio de sobra: se muestra la descripción completa sin
   recortar a 2 líneas ni el "Ver más" (que ahí no aporta nada). */
@media (min-width:681px){
  .product-desc{ max-width:70ch; }
  .product-desc-text{ -webkit-line-clamp:unset; overflow:visible; }
  .product-desc-toggle{ display:none !important; }
}
.copy-btn{
  border:none; background: var(--surface-2); color: var(--text-dim);
  border-radius:6px; width:24px; height:24px; font-size:.75rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: background .15s, color .15s, transform .1s;
}
.copy-btn:hover{ background: rgba(28,198,166,0.18); color: var(--accent); }
.copy-btn:active{ transform: scale(0.9); }
.code-copy-wrap{
  font-family:'JetBrains Mono','SF Mono','Consolas',monospace; cursor:pointer; border-radius:5px; padding:1px 3px;
  transition: background .15s, color .15s;
}
.code-copy-wrap:hover{ background: rgba(28,198,166,0.15); color: var(--accent); }
/* La descripción junto a un código (ver codeInlineHtml) lleva su propio estilo — más suave y
   sin negritas, para no competir visualmente con el código en monoespaciado. */
.code-desc-text{ font-weight:400; color: var(--text-dim); font-style:italic; }
.total-qty{
  text-align:right; padding:12px 20px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  border:2px solid var(--accent); box-shadow: var(--shadow-sm);
}
.total-qty .num{ font-size:1.9rem; font-weight:900; color: var(--accent); line-height:1.1; }
.total-qty .lbl{ font-size:.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.8px; font-weight:700; }

.section-title{ font-size:.72rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-dim); font-weight:600; margin:18px 0 8px; }

/* Botón "Ver detalles" — más legible que el link chiquito de antes: bloque completo con borde,
   flecha que gira y fondo que resalta al expandir (ver detailsToggleHeadHtml en script.js). */
.details-toggle-btn{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  margin:14px 0 10px; padding:10px 14px; border-radius: var(--radius);
  border:2px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; cursor:pointer;
  transition: border-color .12s, background .12s;
}
.details-toggle-btn:hover{ border-color: var(--accent); }
.details-toggle-btn.expanded{ background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); border-color: var(--accent); }
.details-toggle-arrow{ display:inline-block; color: var(--accent); font-weight:900; transition: transform .12s; }
.history-hint{ font-size:.75rem; color:var(--text-dim); margin:-4px 0 8px; }

.result-filter-wrap{ margin:-2px 0 12px; }
.result-filter-input{
  width:100%;
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:9px 12px;
  color:var(--text);
  font-size:.85rem;
  letter-spacing:.3px;
  text-transform:uppercase;
  outline:none;
}
.result-filter-input::placeholder{ color:var(--text-dim); text-transform:none; }
.result-filter-input:focus{ border-color:var(--accent); }
.result-filter-empty{ margin:-2px 0 12px; }

.surtidos-date-filter{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px;
}
.surtidos-date-filter label{ font-size:.76rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.3px; }
.surtidos-date-filter input[type=date]{
  background: var(--surface-2); border:2px solid var(--border); border-radius: var(--radius);
  padding:7px 10px; color:var(--text); font-size:.82rem; font-family:inherit; outline:none;
}
.surtidos-date-filter input[type=date]:focus{ border-color:var(--accent); }
.surtidos-date-filter .btn{ padding:7px 12px; font-size:.76rem; }
.flow-tag{
  display:inline-block; padding:2px 8px; border-radius:0;
  font-size:.65rem; font-weight:800; letter-spacing:.4px; margin-right:6px;
  text-transform:uppercase; border:1.5px solid currentColor;
}
.flow-tag.flow-in{ background: transparent; color: var(--accent); }
.flow-tag.flow-out{ background: transparent; color: var(--accent3); }
.flow-tag.flow-mo{ background: transparent; color: var(--warn); }
/* Movimiento que sí se aplicó pero no viene del documento normal para su dirección (O.C. en
   entradas, Pedido de Venta en salidas) — devolución, ajuste manual, etc. Ver esRetorno en
   fetchMoveLineHistory (backend) y renderMovesTable (script.js). */
.flow-tag.flow-atipico{ background: rgba(251,146,60,0.18); color: #fb923c; border:1px solid rgba(251,146,60,0.4); margin-right:0; }
/* Botón con apariencia de link — Referencia (O.C./Pedido/M.O.) y Albarán de las tablas de
   movimientos, que reabren esa búsqueda dentro de A.L.B.A. (ver movesRefLinkHtml/
   movesAlbaranLinkHtml/wireMovesLinks en script.js), nunca a Odoo. */
.moves-link{
  background:none; border:none; padding:0; margin:0; font:inherit; cursor:pointer;
  color: var(--accent); text-decoration: underline dotted; text-underline-offset: 2px;
}
.moves-link:hover{ color: var(--accent2, var(--accent)); text-decoration-style: solid; }

.loc-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.loc-card{
  background: var(--surface-2);
  border:2px solid var(--border);
  border-left:5px solid var(--border);
  border-radius: var(--radius); padding:14px 16px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.loc-card:hover{ transform: translate(-2px,-2px); box-shadow: var(--shadow-md); }
.loc-card-copy{ cursor:pointer; }
.loc-card-copy:hover{ border-color: var(--accent); }
.loc-card .loc-name{
  font-family:'JetBrains Mono','SF Mono','Consolas',monospace; font-weight:700; font-size:1.15rem;
  display:flex; align-items:center; gap:8px; color: var(--text); letter-spacing:.3px;
}
/* min-width:0 es la parte importante: sin esto, un hijo de flex nunca se encoge por debajo de
   su ancho de contenido y el texto se corta/oculta en vez de partirse en varias líneas. */
.loc-card .loc-name-text{
  flex:1 1 auto; min-width:0; white-space:normal; overflow-wrap:anywhere; word-break:break-word;
}
.loc-card .loc-qty{ font-size:1.55rem; font-weight:800; color: var(--text); }
.loc-card .loc-qty.high{ color: var(--ok); }
.loc-card .loc-qty.mid{ color: var(--accent2); }
.loc-card .loc-qty.low{ color: var(--accent3); }
.loc-card .loc-path{ font-size:.68rem; color:var(--text-dim); word-break:break-all; }
.loc-card.principal{ border-left-color: var(--accent3); background: rgba(255,77,115,0.07); }
.loc-card:not(.principal){ border-left-color: var(--accent); }
.total-piezas-card{
  display:flex; align-items:center; gap:16px; margin:20px 0 16px; padding:16px 20px;
  border-radius: var(--radius-lg); border:2px solid var(--accent2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent2) 16%, var(--surface-2)), var(--surface-2));
  box-shadow: var(--shadow-sm);
}
.total-piezas-icon{
  flex-shrink:0; width:52px; height:52px; border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  background: color-mix(in srgb, var(--accent2) 28%, var(--surface)); border:2px solid var(--accent2);
}
.total-piezas-text{ min-width:0; }
.total-piezas-label{ font-size:.76rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.8px; }
.total-piezas-value{ font-size:1.75rem; font-weight:900; color:var(--accent2); line-height:1.2; }
.total-piezas-unit{ font-size:1rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; }
.principal-badge{
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  color: var(--accent3); margin-bottom:2px;
}

/* Ubicaciones agregadas manualmente por un admin (no vienen de Odoo) — mismo look de
   loc-card pero con acento propio y el icono de MANUAL_LOCATION_ICON_DATAURI en vez del pin
   por defecto, para que se note a simple vista que es una referencia dentro de la página. */
.manual-loc-card{
  border-left-color: var(--accent2);
  background: rgba(139,92,246,0.06);
  position: relative;
}
.manual-loc-icon{
  width:20px; height:20px; display:block; margin-bottom:2px;
}
.manual-loc-by{
  font-size:.68rem; color: var(--text-dim);
}
.manual-loc-qty{
  font-size:1rem; font-weight:800; color: var(--text);
}
.manual-loc-actions{
  position:absolute; top:8px; right:8px;
  display:flex; gap:4px;
}
.manual-loc-edit,
.manual-loc-delete{
  width:22px; height:22px; border-radius:50%;
  border:1px solid var(--border); background: var(--surface);
  font-size:.72rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.manual-loc-edit{ color: var(--accent2); }
.manual-loc-edit:hover{ background: rgba(139,92,246,0.12); border-color: var(--accent2); }
.manual-loc-delete{ color: var(--accent3); }
.manual-loc-delete:hover{ background: rgba(255,77,115,0.12); border-color: var(--accent3); }

body.role-almacen #addManualLocationBtn,
body.role-almacen .manual-loc-delete{
  display:none !important;
}

.order-product-card{
  background: var(--surface-2);
  border:2px solid var(--border);
  border-radius: var(--radius-lg); padding:15px 17px; margin-top:10px;
  box-shadow: var(--shadow-sm);
  transition: border-color .12s;
}
.order-product-card:hover{ border-color: var(--accent); }
.order-product-title{
  font-weight:600; font-size:.95rem; margin-bottom:10px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
tr.delivery-row:hover td, tr.picking-row:hover td{ background: rgba(255,255,255,0.03); }
tr.delivery-row.active-row td, tr.picking-row.active-row td{ background: rgba(28,198,166,0.14); font-weight:600; }

.other-note{
  font-size:.82rem; padding:10px 14px; border-radius: var(--radius);
  background: rgba(251,191,36,0.08); border:1px solid rgba(251,191,36,0.25);
  color: var(--text);
}
.other-note-head{ cursor:pointer; display:flex; align-items:center; gap:8px; flex-wrap:wrap; line-height:1.4; }
.other-note-arrow{ font-size:.7rem; color:var(--warn); flex-shrink:0; margin-left:auto; }

/* Foto de perfil del P.M. (Odoo) junto a su nombre, en el badge del encabezado y en la tabla
   de detalles del pedido — con su propio espacio (no apretada contra el texto) y clickeable
   para verse en grande en el lightbox. */
/* Selector calificado con .product-head para ganarle en especificidad a
   ".product-head .code-pill" (display:inline-block), que si no quedaba encima y hacía que la
   foto se apilara arriba del texto en vez de quedar a un lado. */
.product-head .pm-pill{
  display:inline-flex !important; align-items:center; gap:8px; padding-left:6px;
  flex-wrap:nowrap; white-space:nowrap;
}
.pm-cell{ display:flex; align-items:center; gap:10px; }
.pm-avatar{
  width:30px; height:30px; border-radius:50%; object-fit:cover; vertical-align:middle;
  border:1.5px solid var(--border); flex-shrink:0; cursor:pointer;
  transition: border-color .15s, transform .1s;
}
.pm-avatar:hover{ border-color: var(--accent); transform: scale(1.08); }

/* Lista de "¿quisiste decir...?" cuando un código no dio match exacto. */
.similar-code-list{ display:flex; flex-direction:column; gap:6px; }
.similar-code-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%; text-align:left; cursor:pointer;
  background: var(--surface-2); border:2px solid var(--border); border-radius: var(--radius);
  padding:11px 14px; transition: border-color .12s, transform .1s var(--ease), box-shadow .1s var(--ease);
  box-shadow: var(--shadow-sm);
}
.similar-code-btn:hover{ border-color: var(--accent); transform: translate(-1px,-1px); box-shadow: var(--shadow-md); }
.similar-code-text{
  font-family:'JetBrains Mono','SF Mono','Consolas',monospace; font-weight:700; font-size:.85rem; color: var(--accent);
}
.similar-code-name{ font-size:.75rem; color: var(--text-dim); }
.other-loc-list{
  list-style:none; margin:8px 0 0; padding:0;
  display:flex; flex-direction:column; gap:4px;
}
.other-loc-list li{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 10px;
  padding:6px 10px; border-radius:6px;
  background: var(--surface);
  font-family:'JetBrains Mono','SF Mono','Consolas',monospace; font-size:.78rem;
  overflow-wrap:break-word; word-break:break-word;
}
.other-loc-list li strong{ color: var(--accent2); white-space:nowrap; }

/* Total de piezas fuera de sistema (ver buildLocationsHtml) — separador + línea de total justo
   debajo de la última tarjeta de ubicación de almacén. */
.other-total-line{
  margin-top:12px; padding-top:10px; border-top:1px dashed var(--border);
  font-size:.85rem; color: var(--text-dim); display:flex; justify-content:space-between; gap:8px;
  flex-wrap:wrap;
}
.other-total-line strong{ color: var(--text); }

/* Aviso de piezas sin ubicación asignada (ej. "100/Stock") — distinto del de "otras ubicaciones"
   normales, porque implica una acción pendiente de almacén, no solo información. */
.stock-pending-note{
  margin-top:12px; padding:12px 14px; border-radius: var(--radius);
  background: rgba(255,159,64,0.10); border:1px solid rgba(255,159,64,0.35);
  color:#ff9f40; font-size:.85rem; line-height:1.45;
}
.stock-pending-note strong{ color:#ff9f40; }

.empty-note{
  font-size:.88rem; padding:13px 16px; border-radius:0;
  background: var(--surface-2); border-left:4px solid var(--err);
  line-height:1.5;
}

.choice-note{
  border-left-color: var(--warn);
}
.choice-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.choice-row .btn{ flex:1; min-width:180px; justify-content:center; }

table.moves{ width:100%; border-collapse:collapse; font-size:.83rem; }
table.moves th, table.moves td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
table.moves thead th{ color:var(--text-dim); font-weight:700; text-transform:uppercase; font-size:.66rem; letter-spacing:.8px; }
/* Filas "clave: valor" (Detalles de la orden/pedido/etc., ver detailsToggleHeadHtml) — el <th>
   de fila es una etiqueta, no un encabezado de columna: se ve mejor grande y legible que en
   mayúsculas chiquitas. */
table.moves tbody th{ color:var(--text-dim); font-weight:700; font-size:.8rem; width:130px; white-space:nowrap; }
table.moves tbody tr{ transition: background .12s; }
table.moves tbody tr:hover{ background: rgba(255,255,255,0.025); }
table.moves td.oc{ font-family:'JetBrains Mono','SF Mono','Consolas',monospace; font-weight:600; color:var(--accent); }

/* Tabla "Detalles" de una Transferencia (dirección, ubicación de origen, fechas, P.M., etc.) —
   caja propia con bordes duros en vez de filas sueltas, etiqueta con icono a la izquierda sobre
   fondo distinto para separarla claramente del valor. */
.transfer-details-table{
  border:2px solid var(--border); border-radius: var(--radius); overflow:hidden;
}
.transfer-details-table tbody th{
  width:190px; color:var(--text-dim); background: var(--surface-2); font-weight:700; font-size:.78rem;
  border-right:2px solid var(--border);
}
.transfer-details-table tbody td{ color:var(--text); font-weight:600; }
.transfer-details-table tbody tr:last-child th,
.transfer-details-table tbody tr:last-child td{ border-bottom:none; }

.qty-badge{
  display:inline-block; padding:3px 11px; border-radius:0;
  background: var(--accent); color:#04211c; font-weight:800; font-size:.8rem; letter-spacing:.2px;
}
.qty-badge-surtir{
  display:inline-block; padding:4px 12px; border-radius:0;
  background: var(--accent4); color:#12210a; font-weight:800; font-size:.85rem; letter-spacing:.2px;
  border:2px solid var(--text);
}

/* Único indicador visual de "cuánto hay que surtir" en una línea de transferencia/albarán —
   reemplaza el par redundante de badge + fila de tabla que antes mostraban el mismo número. */
.surtir-callout{
  display:flex; align-items:center; gap:9px;
  margin:8px 0; padding:8px 13px; border-radius:0;
  background: var(--surface-2);
  border-left:4px solid var(--accent4);
  border-top:2px solid var(--border); border-right:2px solid var(--border); border-bottom:2px solid var(--border);
}
.surtir-callout-icon{ font-size:1.15rem; line-height:1; flex-shrink:0; }
.surtir-callout-label{
  font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color: var(--accent4);
}
.surtir-callout-qty{
  font-size:1.05rem; font-weight:800; color: var(--text); line-height:1.2;
}

.product-info{ flex:1; min-width:0; }
.color-badges{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.color-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:7px; font-size:.74rem; font-weight:600; letter-spacing:.15px;
  background: var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--accent);
  color: var(--text);
}
.color-dot{ width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); flex-shrink:0; }
/* Etiquetas editadas solo dentro de ALBA (nunca se escriben en Odoo) — ver "✏️ Editar en ALBA". */
.color-badge.hidden-by-override{ display:none; }
.color-badge.custom-tag{ border:1px dashed var(--accent); color:var(--accent); }
.color-badge.edit-override-btn{
  cursor:pointer; background:transparent; border-style:dashed; color:var(--text-dim);
  font-family:inherit;
}
.color-badge.edit-override-btn:hover{ color:var(--accent); border-color:var(--accent); }
.color-badge.tags-toggle-btn{
  width:auto; display:inline-flex; margin:0; padding:5px 11px; font-size:.74rem; font-weight:600;
  text-transform:none; letter-spacing:.15px; cursor:pointer;
}
.color-badge.tags-toggle-btn:hover{ border-color:var(--accent); color:var(--accent); }
.tags-toggle-body{
  display:flex; flex-wrap:wrap; gap:7px; margin:-6px 0 14px;
}

.photo-panel{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.photo-upload-btns{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.photo-upload-btns .btn{ font-size:.76rem; padding:7px 10px; }
.photo-box{
  width:260px; height:260px; border-radius: var(--radius-lg); overflow:hidden;
  border:2px solid var(--border); background: var(--surface-2);
  cursor:pointer; transition: border-color .12s, transform .12s var(--ease), box-shadow .12s var(--ease);
  box-shadow: var(--shadow-sm);
}
.photo-box:hover{ border-color: var(--accent); transform: translate(-2px,-2px); box-shadow: var(--shadow-md); }
.photo-box img{ width:100%; height:100%; object-fit:cover; display:block; }
.no-photo-badge{
  font-size:.75rem; color:var(--text-dim); text-align:center; white-space:nowrap;
  background: var(--surface-2); border:1px solid var(--border);
  padding:8px 10px; border-radius: var(--radius); width:180px;
}

/* Miniatura de foto por fila (O.C., MO, pedido, transferencia) — clickeable, abre el lightbox
   con navegación prev/next si el producto tiene más de una foto (modo carrusel). */
.row-thumb-wrap{ position:relative; display:inline-flex; vertical-align:middle; }
.row-thumb{
  width:34px; height:34px; border-radius:6px; object-fit:cover;
  border:1px solid var(--border); cursor:pointer; transition: border-color .15s; display:block;
}
.row-thumb:hover{ border-color: var(--accent); }
.row-thumb-count{
  position:absolute; bottom:-4px; right:-4px; min-width:15px; height:15px; padding:0 3px;
  border-radius:999px; background: var(--accent); color:#fff; font-size:.58rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
  border:1px solid var(--bg);
}
.row-thumb-empty{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:6px; font-size:.95rem; opacity:.35;
  border:1px dashed var(--border); vertical-align:middle;
}

/* En los albaranes/transferencias la foto de cada línea se ve más grande que en pedidos/O.C./MO
   — es la vista donde más se usa para identificar visualmente el producto antes de surtirlo. */
.transfer-line-card .row-thumb,
.transfer-line-card .row-thumb-empty{ width:64px; height:64px; border-radius:10px; }
.transfer-line-card .row-thumb-empty{ font-size:1.6rem; }
.transfer-line-card .row-thumb-count{ font-size:.68rem; min-width:18px; height:18px; }

/* Botones chicos de cambiar foto junto a la miniatura de cada fila (admin) — misma subida
   que la búsqueda de un solo código, pero sin salir del pedido/O.C./MO/albarán. La foto
   PRINCIPAL usa el color de acento (para distinguirla a simple vista de la foto extra/
   adjunto, que queda en gris neutro). */
.row-photo-btns{ display:inline-flex; gap:3px; vertical-align:middle; margin-left:4px; }
.row-photo-change-btn, .row-attachment-add-btn{
  width:24px; height:24px; padding:0; border-radius:6px; font-size:.8rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); cursor:pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.row-photo-main{
  border-color: var(--accent2); background: color-mix(in srgb, var(--accent2) 16%, var(--surface-2)); color: var(--accent2);
}
.row-photo-main:hover{ background: color-mix(in srgb, var(--accent2) 28%, var(--surface-2)); color: var(--text); }
.row-photo-extra{
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--accent);
}
.row-photo-extra:hover{ background: color-mix(in srgb, var(--accent) 28%, var(--surface-2)); color: var(--text); }

.lightbox-content{
  position:relative; display:flex; align-items:center; justify-content:center; gap:14px;
  max-width:min(92vw, 760px); max-height:85vh;
}
.lightbox-stage{ display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; }
.lightbox-stage img{
  max-width:100%; max-height:72vh; border-radius: var(--radius-lg);
  box-shadow:0 20px 60px rgba(0,0,0,0.6); background:#000;
  transition: opacity .12s var(--ease);
}
.lightbox-tabs{ display:flex; gap:8px; }
.lightbox-tab{
  font-size:1.02rem; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  color:#fff; background: rgba(0,0,0,.55); border:2px solid var(--border);
  padding:9px 20px; border-radius: var(--radius); cursor:pointer; font-family:inherit;
  transition: border-color .12s, background .12s, color .12s;
}
.lightbox-tab:hover{ border-color: var(--accent); }
.lightbox-tab.active{ background: var(--accent); border-color: var(--accent); color:#04211c; }
.lightbox-dots{ display:flex; gap:7px; }
.lightbox-dot{
  width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.35);
  border:1.5px solid rgba(255,255,255,.5); cursor:pointer; transition: background .12s, transform .12s;
}
.lightbox-dot:hover{ transform: scale(1.2); }
.lightbox-dot.active{ background: var(--accent); border-color: var(--accent); }
.lightbox-caption{
  font-size:.82rem; color:rgba(255,255,255,.75); text-align:center; max-width:90vw;
  background: rgba(0,0,0,.5); padding:6px 14px; border-radius: var(--radius);
}
.lightbox-nav{
  position:relative; flex-shrink:0;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background: rgba(0,0,0,0.6); color:#fff; font-size:1.4rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-nav:hover{ background: rgba(0,0,0,0.85); }
.lightbox-close{
  position:absolute; top:-44px; right:0; background: rgba(0,0,0,0.6); color:#fff;
}

/* El spinner viejo usaba border-top-color:#0a0a0a — casi invisible sobre el fondo oscuro de
   la app. Ahora es un anillo con degradado de acento, más grande y con glow sutil, para que
   se note claramente que algo está cargando. */
/* Botón flotante para subir directo al buscador — solo aparece al bajar en la página, con un
   pequeño rebote de entrada y glow del mismo acento que el botón "Buscar" principal. */
/* Toast chiquito (ver showToast en script.js) — plano, con borde duro, entra/sale desde abajo. */
#albaToast{
  position:fixed; left:50%; bottom:24px; z-index:60;
  transform: translate(-50%, 16px); opacity:0; pointer-events:none;
  background: var(--text); color: var(--bg); border:2px solid var(--accent);
  padding:10px 18px; font-size:.85rem; font-weight:700; max-width:90vw;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow: var(--shadow-md);
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
#albaToast.show{ opacity:1; transform: translate(-50%, 0); }

.scroll-top-fab{
  position:fixed; right:20px; bottom:24px; z-index:40;
  width:50px; height:50px; border-radius:0; border:2px solid var(--text); cursor:pointer;
  background: var(--accent);
  color:#04211c; font-size:1.15rem; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md);
  opacity:0; transform: translateY(10px); pointer-events:none;
  transition: opacity .2s, transform .15s var(--ease), box-shadow .1s var(--ease);
}
.scroll-top-fab.show{
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.scroll-top-fab:hover{ transform: translate(-2px,-2px); box-shadow: var(--shadow-lg); }
.scroll-top-fab:active{ transform: translate(2px,2px); box-shadow:none; }
.scroll-top-fab-arrow{ position:absolute; font-size:.75rem; font-weight:900; bottom:-3px; right:-3px; background:var(--text); color:var(--bg); border-radius:0; width:17px; height:17px; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); }

.spinner{
  width:16px;height:16px;
  border:3px solid var(--surface-2);
  border-top-color: var(--accent);
  border-radius:50%;
  animation: spin .6s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Texto de estado ("Buscando...") con un parpadeo suave mientras carga, para reforzar que
   sigue en proceso sin depender solo del spinner. */
.status-line.loading{ animation: statusPulse 1.3s ease-in-out infinite; }
@keyframes statusPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

.modal-overlay{
  position:fixed; inset:0; background:rgba(4,4,6,0.8);
  display:none; align-items:center; justify-content:center; z-index:50; padding:16px;
}
.modal-overlay.show{ display:flex; }
/* El lightbox de fotos oscurece más el fondo que el resto de los modales — la foto es lo
   único que importa ver ahí, así que se resalta más que en login/config/etc. */
#lightboxOverlay.show{ background: rgba(0,0,0,0.93); }

.ml-modal{
  background: var(--surface); border:2px solid var(--text); border-radius: var(--radius-lg);
  width:100%; max-width:380px; padding:22px; display:flex; flex-direction:column; gap:14px;
  box-shadow: var(--shadow-lg);
}

/* Modal "Seleccionar Albarán" (varios pendientes en un mismo pedido) — verde oscuro, para
   distinguirlo de los demás modales (grises) sin salirse del sistema de bordes duros/planos. */
.albaran-modal-card{ max-width:460px; }
.albaran-modal-title{ margin:0 0 8px; font-size:1.05rem; font-weight:800; }
.albaran-modal-sub{
  margin:0 0 16px; font-size:.85rem; color:var(--text-dim); line-height:1.5;
  padding:10px 14px; border-radius: var(--radius); background: var(--surface-2);
  border-left:3px solid #1a9c6b;
}
.albaran-modal-sub strong{ color:var(--text); }
.albaran-modal-sub-code{
  font-family:'JetBrains Mono','SF Mono','Consolas',monospace; font-weight:800; color:#1a9c6b;
}
.albaran-modal-list{ display:flex; flex-direction:column; gap:8px; }
.albaran-modal-btn{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left; padding:13px 16px; font-family:inherit; cursor:pointer;
  background:#7c3f0c; border:2px solid #f7941d; border-radius: var(--radius); color:#fff;
  box-shadow: var(--shadow-sm); transition: transform .1s var(--ease), box-shadow .1s var(--ease), border-color .12s;
}
.albaran-modal-btn:hover{ border-color:#fff; transform: translate(-1px,-1px); box-shadow: var(--shadow-md); }
.albaran-modal-btn:active{ transform: translate(1px,1px); box-shadow:none; }
.albaran-modal-btn-code{ font-weight:800; font-family:'JetBrains Mono','SF Mono','Consolas',monospace; }
.albaran-modal-btn-state{ font-size:.78rem; font-weight:700; color:#fff; flex-shrink:0; margin-left:16px; }

/* Variantes de producto (color/potencia/voltaje/etc.) — mismo componente del modal de albarán
   pero en el acento teal de la app, sin el naranja de "pendiente por surtir" (no aplica aquí). */
.product-variant-btn{
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)) !important;
  border-color: var(--accent) !important; color: var(--text) !important;
}
.product-variant-btn:hover{ border-color: var(--text) !important; }
.product-variants-btn{
  display:block; width:100%; text-align:left; margin-bottom:14px; padding:12px 16px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); border:2px solid var(--accent);
  color: var(--text); font-size:.85rem; font-weight:700; text-transform:none; letter-spacing:normal;
}
.product-variants-btn:hover{ border-color:#fff; }
.ml-modal h3{
  margin:0 0 2px; font-size:.95rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  padding-bottom:10px; border-bottom:2px solid var(--border);
}
.ml-modal label{ font-size:.74rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.3px; display:block; margin-bottom:5px; }
.ml-modal input{
  width:100%; padding:10px 12px; border-radius: var(--radius); border:2px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size:.9rem; font-family:inherit;
  box-sizing:border-box; transition: border-color .12s;
}
.ml-modal input:focus{ outline:none; border-color: var(--accent); }
/* Se ve "apagado" mientras no es la fecha elegida, pero sigue siendo clickeable de verdad —
   ver syncFechaCustomEnabled: un input con disabled real no puede recibir focus/click. */
.ml-modal input.ko-fecha-inactive{ opacity:.55; }
.ml-modal select{
  width:100%; padding:10px 34px 10px 12px; border-radius: var(--radius); border:2px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size:.9rem; font-family:inherit;
  box-sizing:border-box; appearance:none; -webkit-appearance:none; cursor:pointer;
  transition: border-color .15s, box-shadow .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231cc6a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 10px center; background-size:16px;
}
.ml-modal select:hover{ border-color: var(--accent); }
.ml-modal select:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.ml-modal select option{ background: var(--surface-2); color: var(--text); }
/* El título del modal de Kardex son estas 2 pestañas — cada una es su propia "tarjetita" con
   forma, color y espacio de por medio (no solo texto con una rayita de color abajo), para que
   se distingan de un vistazo cuál es cuál incluso sin leer el texto. */
.ko-modo-tabs{ display:flex; gap:10px; margin:0 0 4px; }
.ko-modo-tab{
  flex:1; padding:10px 10px; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.2px;
  border-radius: var(--radius); cursor:pointer; font-family:inherit;
  transition: color .15s, border-color .15s, background .15s, transform .1s var(--ease);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.ko-modo-tab:hover{ transform: translateY(-1px); }
.ko-modo-tab-normal{
  border:2px solid var(--border); background: var(--surface-2); color: var(--text-dim);
}
.ko-modo-tab-normal.active{
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.ko-modo-tab-accesorio{
  border:2px solid var(--border); background: var(--surface-2); color: var(--text-dim);
}
.ko-modo-tab-accesorio.active{
  border-color: var(--accent3); background: color-mix(in srgb, var(--accent3) 22%, var(--surface-2)); color: var(--accent3);
  box-shadow: var(--shadow-sm);
}
.ml-modal textarea{
  width:100%; padding:10px 12px; border-radius: var(--radius); border:2px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size:.9rem; font-family:inherit;
  box-sizing:border-box; resize:vertical; transition: border-color .12s;
}
.ml-modal textarea:focus{ outline:none; border-color: var(--accent); }
.surtido-name-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.surtido-name-grid .btn{ width:100%; }
/* Albarán ya surtido (estado "done") dentro del selector — deshabilitado y en gris para
   Almacén (solo Admin puede seguir eligiéndolo, para corregir). */
.surtido-albaran-btn-disabled{ opacity:.45; cursor:not-allowed; filter:grayscale(.6); }

.ml-modal-actions{ display:flex; gap:8px; margin-top:4px; }
.ml-modal-actions button{ flex:1; }

.ml-modal-check-row{ display:flex; align-items:center; gap:9px; }
.ml-modal-check-row label{
  display:flex; align-items:center; gap:8px; margin-bottom:0; font-size:.85rem;
  font-weight:600; text-transform:none; letter-spacing:normal;
  color:var(--text); cursor:pointer;
}
.ml-modal-check-row input[type="checkbox"],
.ml-modal-check-row input[type="radio"]{ width:auto; flex-shrink:0; accent-color: var(--accent); width:16px; height:16px; }
.ml-modal-check-row input[type="date"]{
  width:auto; flex:1; padding:8px 10px; border-radius: var(--radius); border:2px solid var(--border);
  background: var(--surface-2); color: var(--text); font-family:inherit; font-size:.85rem;
}
.ml-modal-check-row input[type="date"]:disabled{ opacity:.5; }
.ml-modal-check-row input[type="date"]:focus{ outline:none; border-color: var(--accent); }

.lm-modal{ max-width:440px; max-height:82vh; overflow-y:auto; }
.lm-empty{ font-size:.8rem; color:var(--text-dim); }
.lm-list{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.lm-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:8px 10px;
}
.lm-row-hidden{ opacity:.6; }
.lm-row-main{ font-size:.82rem; color:var(--text); }
.lm-qty{ color:var(--text-dim); font-size:.76rem; }
.lm-hidden-tag{
  background:var(--err); color:#fff; font-size:.68rem; font-weight:700; text-transform:uppercase;
  border-radius:6px; padding:2px 6px; margin-left:4px;
}
.lm-toggle-btn{
  flex-shrink:0; border:1px solid var(--border); border-radius:6px; padding:5px 9px;
  font-size:.74rem; cursor:pointer; background:transparent; color:var(--text); font-weight:600;
}
.lm-toggle-btn:hover{ border-color:var(--accent); }
.lm-row-actions{ display:flex; gap:4px; flex-shrink:0; }
.lm-manual-edit, .lm-manual-delete{
  border:1px solid var(--border); border-radius:6px; padding:4px 7px; font-size:.76rem;
  cursor:pointer; background:transparent; color:var(--text);
}
.lm-manual-delete{ color:var(--err); }

.img-fluid{ max-width:100%; height:auto; display:block; }

.internal-notes{ font-size:.85rem; line-height:1.6; }
.internal-notes, .internal-notes *{
  color:#ffffff !important; font-weight:700 !important;
  text-decoration:none !important;
  background:none !important; background-color:transparent !important;
}
.internal-notes p{ margin:0 0 8px; }
.internal-notes p:last-child{ margin-bottom:0; }
.internal-notes.internal-notes-empty{ color: var(--text-dim) !important; font-weight:500 !important; font-style:italic; }
.internal-notes-edit{ display:flex; flex-direction:column; gap:8px; }
.internal-notes-textarea{
  width:100%; box-sizing:border-box; resize:vertical; font-family:inherit; font-size:.85rem;
  padding:9px 12px; border-radius:8px; background: var(--surface-2); border:1px solid var(--border); color: var(--text);
}
.internal-notes-edit-actions{ display:flex; gap:8px; }

.doc-list{ display:flex; flex-direction:column; gap:8px; }
.doc-item{ display:flex; flex-direction:column; }
.doc-link{
  display:flex; align-items:center; gap:8px; padding:10px 14px; width:100%;
  border-radius: var(--radius); background: var(--surface-2); border:1px solid var(--border);
  color:var(--text); font-family:inherit; text-align:left; font-size:.85rem; font-weight:500; cursor:pointer;
  transition: background .15s, border-color .15s;
}
.doc-link:hover{ background: rgba(28,198,166,0.1); border-color: var(--accent); }
.doc-icon{ width:20px; height:20px; flex-shrink:0; }
.doc-preview{ position:relative; margin-top:8px; }
.doc-frame{ width:100%; height:70vh; border:none; border-radius: var(--radius); display:block; background:#fff; }
.doc-preview-actions{
  position:absolute; top:8px; right:8px; z-index:5;
  display:flex; gap:6px;
}
.doc-action-btn{
  width:30px; height:30px; border:none; border-radius:8px; cursor:pointer;
  background: rgba(0,0,0,0.6); color:#fff; font-size:.95rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s;
}
.doc-action-btn:hover{ background: rgba(28,198,166,0.85); }

.attachments-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.attachments-row .btn{ font-size:.76rem; padding:7px 10px; }
.attach-thumb{
  width:72px; height:72px; border-radius:10px; object-fit:cover;
  border:2px solid var(--border); cursor:pointer; transition: border-color .15s, transform .12s var(--ease);
}
.attach-thumb:hover{ border-color: var(--accent); transform: translateY(-2px); }
.attachments-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.attachments-btns .btn{ font-size:.76rem; padding:7px 10px; }

.config-content{
  width:min(92vw, 380px); display:flex; flex-direction:column; gap:14px;
  max-height:88vh; overflow-y:auto;
}
.config-divider{ border-top:1px solid var(--border); margin:2px 0; }
.config-section-title{ font-size:.8rem; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.6px; }
.config-hint{ font-size:.75rem; color:var(--text-dim); line-height:1.4; margin-top:-8px; }

.glossary-list{ display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; }
.glossary-row{
  display:flex; align-items:center; gap:6px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius); padding:7px 8px;
}
.glossary-row .glossary-code{
  font-family:'JetBrains Mono','SF Mono','Consolas',monospace; font-weight:700; font-size:.78rem;
  color:var(--accent); min-width:52px; flex-shrink:0;
}
.glossary-row input{
  flex:1; background:transparent; border:1px solid transparent; border-radius:6px;
  padding:5px 6px; color:var(--text); font-size:.78rem; outline:none; min-width:0;
}
.glossary-row input:focus{ border-color:var(--accent); background:var(--surface); }
.glossary-row-btn{
  flex-shrink:0; border:none; border-radius:6px; padding:5px 8px; font-size:.72rem;
  cursor:pointer; font-weight:600;
}
.glossary-save-btn{ background:var(--accent); color:#fff; }
.glossary-save-btn:hover{ background:rgba(28,198,166,0.85); }
.glossary-delete-btn{ background:transparent; color:var(--err); border:1px solid var(--border); }
.glossary-delete-btn:hover{ border-color:var(--err); }
.glossary-add-row{ display:flex; gap:6px; }
.glossary-add-row input{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:9px 10px; color:var(--text); font-size:.8rem; outline:none;
}
.glossary-add-row input:focus{ border-color:var(--accent); }
.glossary-add-row input#glossaryNewCode{ width:90px; flex-shrink:0; text-transform:uppercase; }
.glossary-add-row input#glossaryNewMeaning{ flex:1; min-width:0; }

.surtido-stats-list{ display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; }
.surtido-stat-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:8px 12px; font-size:.85rem;
}
.surtido-stat-count{
  font-weight:800; font-size:.9rem; color: var(--accent);
  background: rgba(28,198,166,0.14); border-radius:999px; padding:2px 10px; min-width:24px; text-align:center;
}
.surtido-stat-clickable{ cursor:pointer; transition: border-color .15s; }
.surtido-stat-clickable:hover{ border-color: var(--accent); }
.surtido-pedidos-list{
  display:flex; flex-direction:column; gap:2px; margin:4px 0 2px 10px;
}
.surtido-pedido-item{
  text-align:left; background:none; border:none; color: var(--accent);
  font-family:'JetBrains Mono','SF Mono','Consolas',monospace; font-size:.8rem; cursor:pointer; padding:3px 4px;
  border-radius:6px;
}
.surtido-pedido-item:hover{ background: rgba(28,198,166,0.12); }

.config-content .config-title{ font-size:.95rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.config-content label{ font-size:.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.8px; display:block; margin-bottom:4px; }
.config-field{ display:flex; flex-direction:column; }
.config-field input{
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius);
  padding:11px 13px; color:var(--text); font-size:.88rem; outline:none;
}
.config-field input:focus{ border-color: var(--accent); }
.config-info-row{
  display:flex; justify-content:space-between; gap:10px; font-size:.83rem;
  padding:8px 0; border-bottom:1px solid var(--border);
}
.config-info-row:last-child{ border-bottom:none; }
.config-info-row span:first-child{ color:var(--text-dim); }
.config-info-row span:last-child{ font-family:'JetBrains Mono','SF Mono','Consolas',monospace; font-weight:600; text-align:right; word-break:break-all; }
.config-msg{ font-size:.78rem; min-height:1.2em; }

.config-api-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px;
  padding:9px 12px; border-radius: var(--radius); background: var(--surface-2); border:2px solid var(--border);
}
/* min-width:0 no basta aquí: overflow-wrap:anywhere cambia el "tamaño mínimo automático" del
   elemento flex a un solo carácter (así lo define la especificación, para que texto largo sin
   espacios no fuerce el ancho de todo el row) — en un URL larga sin espacios eso colapsaba la
   columna a 1 letra por línea en vez de ensancharse. En lugar de pelearse con eso, se trunca a
   una sola línea con "…" y se deja el botón de copiar como la forma real de llevarse la URL
   completa (que es como se va a usar de cualquier forma). */
.config-api-row code{
  flex:1; min-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:.76rem; color: var(--accent); font-family:'JetBrains Mono','SF Mono','Consolas',monospace;
}
.config-api-row .btn{ flex-shrink:0; padding:6px 10px; font-size:.8rem; white-space:nowrap; }
.config-msg.err{ color: var(--err); }
.config-msg.ok{ color: var(--ok); }
.config-actions{ display:flex; gap:10px; justify-content:flex-end; }

.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrap table.moves{ min-width:480px; }

@media (max-width:520px){
  .total-qty{ text-align:left; }
  .photo-box{ width:min(80vw, 260px); height:min(80vw, 260px); }
  .product-head{ flex-direction:column; align-items:center; text-align:center; }
  .product-info{ display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; }
  .product-info .code-badges-row,
  .product-info #productBadgesRow,
  .product-desc{ justify-content:center; margin-left:auto; margin-right:auto; }
  #productBadgesRow{ display:flex; flex-wrap:wrap; justify-content:center; }
  .total-qty{ text-align:center; align-self:center; }
}

@media (max-width:680px){
  .wrap{ padding:20px 14px 40px; }
  header h1{ font-size:1.05rem; }
  .glass{ padding:16px; border-radius:14px; }
  .greeting{ font-size:.9rem; }
  .search-row{ flex-direction:column; }
  .autocomplete-wrap{ min-width:0; width:100%; }
  .btn{ width:100%; justify-content:center; }
  /* Una sola columna a todo el ancho en celular — así el código de ubicación (ej. "A1-R2-A-1")
     cabe en una sola línea sin cortarse, en vez de apretarse en tarjetas angostas. */
  .loc-grid{ grid-template-columns: 1fr; }
}

@media (max-width:360px){
  header h1{ font-size:1rem; }
  .total-qty .num{ font-size:1.4rem; }
}

/* ---------- Login: mientras no haya sesión, la app no se ve — solo el fondo animado ---------- */
body.login-active .wrap{ visibility:hidden; }

#loginOverlay{
  background:var(--bg);
  overflow:hidden;
}
/* Formas planas y duras en vez de blobs difuminados — mismo espíritu técnico/geométrico que el
   resto del rediseño, ahora también en la pantalla de login. */
.login-bg-blob{
  position:absolute;
  width:38vmax; height:38vmax;
  border-radius:0;
  opacity:.14;
  pointer-events:none;
  transform: rotate(45deg);
}
.login-bg-blob.b1{ background:var(--accent); top:-20%; left:-16%; animation:loginBlob1 20s linear infinite; }
.login-bg-blob.b2{ background:var(--accent3); bottom:-24%; right:-14%; animation:loginBlob2 24s linear infinite; }
.login-bg-blob.b3{ background:var(--accent2); top:22%; right:-10%; width:22vmax; height:22vmax; animation:loginBlob3 26s linear infinite; }
@keyframes loginBlob1{ 0%{ transform:rotate(45deg); } 100%{ transform:rotate(405deg); } }
@keyframes loginBlob2{ 0%{ transform:rotate(45deg); } 100%{ transform:rotate(-315deg); } }
@keyframes loginBlob3{ 0%{ transform:rotate(45deg); } 100%{ transform:rotate(405deg); } }

#loginOverlay .login-card{
  position:relative; z-index:1;
  background: var(--surface);
  border:2px solid var(--text);
  box-shadow: var(--shadow-lg);
  transition: border-color .15s, box-shadow .15s;
}
/* Cuenta de respaldo oculta "root" (ver loginAsRoot en script.js) — mismo overlay de login,
   pero con un estilo de advertencia claro (borde naranja) para que quede obvio que se está
   entrando a un modo de emergencia, no a una cuenta normal. */
#loginOverlay .login-card.root-mode{
  border-color: var(--accent2);
}
.login-root-hint{
  display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600;
  color:#ff9f40; background:rgba(255,159,64,0.12); border:1px solid rgba(255,159,64,0.35);
  border-radius:8px; padding:8px 10px; margin:-6px 0 14px;
}
.login-powered-by{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:14px; font-size:.72rem; font-weight:600; letter-spacing:.3px;
  color:var(--text-dim);
}

/* ---------- Rol Almacén: sin botones de descarga de PDF (ya no hay permiso "pdf" aparte — ---------- */
/* no tenía sentido separado de las secciones O.C./MO/pedido que ya lo controlan). El Kardex sí
   depende del permiso real de la cuenta (perm-kardex, ver applySession en script.js). */
body.role-almacen #downloadOrderPdf,
body.role-almacen #downloadPoPdf,
body.role-almacen #downloadMoPdf,
body.role-almacen #downloadTransferPdf,
body.role-almacen #downloadTransferPendingPdf,
body.role-almacen #downloadCodeMovsPdf,
body.role-almacen [data-act="print-transfer"],
body.role-almacen [data-act="print-transfer-pending"],
body.role-almacen:not(.perm-kardex) #downloadKardexBtn,
/* #downloadCodeKardexBtn también lo usa la sección "🏷️ Laina" para su propia cuenta con
   perm-laina (sin perm-kardex necesariamente) — no ocultarlo ahí, ver hasKardexPerm en
   renderResult (script.js). */
body.role-almacen:not(.perm-kardex):not(.perm-laina) #downloadCodeKardexBtn{
  display:none !important;
}

/* El 📦 de "Surtidos (Pedidos)" en la barra superior: ahora es un permiso de cuenta más (igual
   que Kardex arriba), en vez de estar disponible para cualquier cuenta logueada. Admin siempre
   lo tiene (perm-surtidos se marca true para admin en applySession). */
body.role-almacen:not(.perm-surtidos) #surtidosBtn{
  display:none !important;
}