/* A.L.B.A. — hoja de estilos. (6 oct 2026: se toca esta linea para que salga con nombre nuevo y
   no se use el 404 que Cloudflare dejo guardado del anterior; ver el plan B en build.js.) */
:root{
  /* Tipografia de toda la app: Raleway (Google Fonts, pedido de Manuel), del 100 al 900. Antes
     fueron Arvo, Chubbo y Clash Display. Va en variables y no repartida en cada regla; cambiarla es tocar dos renglones.
     --font-code tambien es Raleway, para que la letra sea la misma en todo. El mono se deja
     detras en la cadena: quitando 'Raleway' de esa linea los codigos regresan a monoespaciado. */
  --font-ui: 'Raleway', 'Segoe UI', system-ui, sans-serif;
  --font-code: 'Raleway', 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  --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;}
/* La tipografía base escala con el ancho de la pantalla: como casi todo el CSS está en rem, con
   esto la app entera (textos, botones, cajas) crece en un monitor grande y se encoge en un
   celular, en vez de quedarse del mismo tamaño físico en los dos. El rango es corto a propósito
   — lo justo para que se sienta proporcionada, sin deformar el diseño. */
/* --text-scale lo pone cada cuenta desde "Tamaño y apariencia" (25% a 150%): multiplica la
   base, así crece todo lo que esté en rem sin tocar el diseño. */
:root{ --text-scale: 1; }
html{ font-size: calc(clamp(15px, 0.35vw + 14.2px, 17.5px) * var(--text-scale)); }

html,body{
  margin:0; padding:0; height:100%;
  font-family: var(--font-ui);
  /* Raleway si trae 800 y 900; esto queda por si se cambia a una letra que no, y el CSS los pide en titulos y codigos. Sin esto el
     navegador se los inventa engordando el trazo (negrita falsa), que en una serif de palo
     grueso sale sucia y desalineada. Apagandolo, esos pesos usan el 700 de verdad. */
  font-synthesis: none;
  -webkit-font-synthesis: none;
  color: var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Dividido entre --alba-zoom (ver ajuste-escala.js): con el zoom de salida de las laptops con
   escala alta, 100vh a secas queda mas corto que la ventana. */
:root{ --alba-zoom: 1; }
body{
  min-height:calc(100vh / var(--alba-zoom));
  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; }

/* Ancho y espaciado que siguen a la pantalla en vez de quedarse fijos: en un monitor grande la
   app deja de verse como una columna angosta perdida en el centro, y en pantallas chicas
   aprovecha casi todo el ancho sin pegarse a las orillas. El tope evita el otro extremo —
   líneas de texto tan largas que cuesta seguirlas de un renglón al siguiente. */
.wrap{
  width:min(94vw, clamp(820px, 76vw, 1320px));
  margin:0 auto;
  padding: clamp(18px, 2.4vw, 34px) clamp(12px, 1.6vw, 22px) 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-yellow{ background:#e0c000; }
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:var(--font-code);
  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:var(--font-code); 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:var(--font-ui);
  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:var(--font-code); 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:8px; background:var(--surface);
  border:1px solid var(--border); overflow:hidden; margin-bottom:6px;
}
.surtido-progress-fill{
  height:100%; border-radius:8px; 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:var(--font-code); 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; }
/* Cada sugerencia es una fila con tres partes: el icono de que cosa es, el cuerpo (codigo y
   descripcion) y, a la derecha, cuanto hay en los racks A. La parte del codigo que ya se
   tecleo va resaltada, para ver de un golpe por que salio esa fila. */
.autocomplete-item{
  padding:10px 12px; cursor:pointer;
  display:flex; align-items:center; gap:11px;
  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: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-left-color: var(--accent);
}
.autocomplete-item .ac-icon{
  flex:none; width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
  background: var(--surface); border:1px solid var(--border);
}
.autocomplete-item .ac-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.autocomplete-item .ac-code{
  font-family:var(--font-code);
  font-weight:700; font-size:.86rem; letter-spacing:.2px; color: var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Lo que coincide con lo tecleado. */
.autocomplete-item .ac-hit{
  background:transparent; color: var(--accent); font-weight:900;
  border-bottom:2px solid var(--accent);
}
.autocomplete-item .ac-name{
  font-size:.74rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Piezas en los racks A1-A6: lo unico que se sugiere (ver suggestCodes). */
.autocomplete-item .ac-stock{
  flex:none; padding:3px 9px; border-radius:8px;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  border:1px solid var(--accent); color: var(--accent);
  font-family:var(--font-code);
  font-size:.7rem; font-weight:800;
}
/* Pista de "Enter para elegir": solo en la fila marcada con el teclado. */
.autocomplete-item .ac-enter{
  flex:none; width:20px; text-align:center; color: var(--accent);
  font-size:.9rem; font-weight:900; opacity:0; transition: opacity .1s;
}
.autocomplete-item.active .ac-enter{ opacity:1; }
.autocomplete-item.ac-user .ac-icon{ border-color:#a78bfa; color:#a78bfa; }

@media (max-width:680px){
  .autocomplete-item{ gap:9px; padding:9px 10px; }
  .autocomplete-item .ac-icon{ width:24px; height:24px; font-size:.8rem; }
  .autocomplete-item .ac-enter{ display:none; }
}

.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 58px 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{
  /* Pegado a la orilla derecha del cuadro: antes iba corrido 56px para dejarle sitio al 🕒 del
     historial, que ahora vive en el menú lateral. */
  position:absolute; top:6px; right:6px; 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-titulo{ margin-bottom:12px; }
.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: var(--font-code); 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); }
/* Titulo de la ficha: el codigo, a todo el ancho y lo mas grande que quepa. clamp con vw para
   que no haya que elegir entre "chico siempre" y "se sale en celular": crece con la pantalla y
   se frena en 2rem. overflow-wrap:anywhere porque estos codigos son una sola palabra de 40+
   caracteres sin espacios — sin eso desbordan la tarjeta en vez de partirse. */
.code-pill-main{
  display:flex; align-items:center; gap:9px; width:100%;
  font-size: clamp(1.05rem, 3.6vw, 2rem); line-height:1.2;
  overflow-wrap:anywhere;
  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:var(--font-code); 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; }
/* ---------- Fila de acciones de la ficha ---------- */
/* Todos los botones iguales: mismo alto, mismo ancho y la misma caja redondeada. Con
   flex:1 1 100% cada uno ocupa su renglon completo y ninguno queda a medias del de arriba,
   que era lo que hacia ver la fila desordenada. */
.product-actions-row{
  display:flex; flex-wrap:wrap; gap:8px; align-items:stretch;
  margin:18px 0 20px;
}
.product-actions-row .btn{
  flex:1 1 100%;
  justify-content:center; text-align:center;
  min-height:48px; padding:12px 16px;
  border-radius:10px;
  font-size:.88rem;
}
/* Colores semioscuros, todos con el texto en blanco: cada accion se distingue por su color sin
   que ninguno grite mas que los demas, y el texto se lee igual de bien en todos. El borde va
   en el mismo tono pero mas claro, que es lo que les da el filo del resto de la app. */
/* Cuadricula escogida por cada quien (ver albaCuadriculaAcciones). Con 1 se queda como arriba;
   con 2, 3 o 4 columnas los botones se achican para que el texto quepa, y si aun asi no cabe
   pasa al siguiente renglon en vez de salirse. */
.product-actions-row:not([data-cols="1"]){ display:grid; gap:8px; }
.product-actions-row[data-cols="2"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.product-actions-row[data-cols="3"]{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.product-actions-row[data-cols="4"]{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.product-actions-row:not([data-cols="1"]) .btn{
  width:auto; min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.25;
}
.product-actions-row[data-cols="2"] .btn{ min-height:44px; padding:10px 10px; font-size:.8rem; }
.product-actions-row[data-cols="3"] .btn{ min-height:40px; padding:8px 7px; font-size:.72rem; gap:5px; }
.product-actions-row[data-cols="4"] .btn{ min-height:36px; padding:7px 5px; font-size:.64rem; gap:4px; letter-spacing:0; }
.product-actions-row[data-cols="4"] .btn img{ width:14px; height:14px; }
/* En 3 y 4 columnas el icono va arriba del texto: asi el texto tiene todo el ancho del boton y
   no parte las palabras a la mitad ("PROVEEDO R" en un celular). */
.product-actions-row[data-cols="3"] .btn,
.product-actions-row[data-cols="4"] .btn{ overflow-wrap:normal; word-break:normal; hyphens:auto; }
@media (max-width: 680px){
  .product-actions-row[data-cols="3"] .btn,
  .product-actions-row[data-cols="4"] .btn{ flex-direction:column; }
  .product-actions-row[data-cols="4"] .btn{ padding:7px 3px; }
}

/* El selector: chico y a la derecha, justo arriba de los botones. */
.acc-cuadricula{
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:5px;
  margin:14px 0 -10px; font-size:.68rem; color: var(--text-dim);
}
.acc-cuadricula-txt{ font-weight:700; margin-right:2px; }
.acc-cuad-op{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  padding:4px 8px; font:inherit; font-weight:800; color: var(--text-dim);
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius);
}
.acc-cuad-op:hover{ color: var(--text); border-color: var(--text-dim); }
.acc-cuad-op.activo{ color:#04211c; background: var(--accent); border-color: var(--accent); }
.acc-cuad-ico{
  display:grid; width:12px; height:12px; gap:1px;
  grid-template-columns:repeat(var(--n), 1fr); grid-template-rows:repeat(var(--n), 1fr);
}
.acc-cuad-ico i{ background: currentColor; border-radius:1px; opacity:.85; }

.act-btn{ color:#fff !important; border:2px solid rgba(255,255,255,.18); }
.act-btn:hover:not(:disabled){ border-color: rgba(255,255,255,.45); filter:brightness(1.12); }
.act-kardex{ background:#3f6212; }
.act-odoo{ background:#311b92; }
.act-guardar{ background:#9d174d; }
.act-mandar{ background:#3730a3; }
.act-proveedor{ background:#92400e; }
.act-laina{ background:#155e75; }
.act-codif{ background:#0f766e; }

/* ---------- Codificacion: que significa cada pieza del codigo (ver abrirCodificacion) ----------
   Arriba el codigo en piezas; de la pieza que toca sale una flecha que se va trazando hasta la
   tarjeta con su significado, y abajo se va armando la leyenda. */
.cod-modal{ width:min(760px, 100%); }
.cod-cuerpo{ gap:14px; }
.cod-escena{ position:relative; display:flex; flex-direction:column; align-items:center; gap:58px; padding:6px 0 4px; flex:none; }
.cod-chips{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 2px;
  font-family: var(--font-code); position:relative; z-index:1;
}
.cod-chip{
  font:inherit; font-weight:900; font-size:1rem; cursor:pointer; color: var(--text);
  padding:5px 8px; border-radius: var(--radius); background: var(--surface-2);
  border:2px solid color-mix(in srgb, var(--c) 35%, var(--border));
  transition: transform .25s, background .25s, color .25s, box-shadow .25s;
}
.cod-chip.vista{ border-color: var(--c); color: var(--c); }
.cod-chip.activa{
  background: var(--c); color:#04211c; border-color: var(--c); transform: translateY(-3px) scale(1.08);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent);
}
.cod-chip-sin{ border-style:dashed; }
.cod-sep{ color: var(--text-dim); font-weight:900; font-size:1rem; }
.cod-flechas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.cod-linea{ fill:none; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation: codTraza .7s cubic-bezier(.5,0,.3,1) forwards; }
.cod-punta{ fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; opacity:0; animation: codPunta .2s ease .65s forwards; }
@keyframes codTraza{ to{ stroke-dashoffset:0; } }
@keyframes codPunta{ to{ opacity:1; } }
.cod-tarjeta{
  position:relative; z-index:1; width:min(440px, 100%); min-height:92px; text-align:center;
  padding:12px 16px; border-radius: var(--radius-lg, 8px); background: var(--surface-2);
  border:2px solid var(--c, var(--border));
  display:flex; flex-direction:column; justify-content:center; gap:4px;
}
.cod-tarjeta.entra{ animation: codTarjeta .45s ease .45s both; }
@keyframes codTarjeta{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
.cod-tarjeta-pieza{ font-family: var(--font-code); font-weight:900; font-size:1.25rem; color: var(--c, var(--accent)); }
.cod-tarjeta-que{ font-size:.72rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color: var(--text-dim); }
.cod-tarjeta-detalle{ font-size:.95rem; font-weight:700; color: var(--text); line-height:1.35; }
.cod-tarjeta-explica{ font-size:.86rem; font-weight:600; color: var(--text); line-height:1.45; margin-top:4px; padding-top:6px; border-top:1px dashed var(--border); text-align:left; }
.cod-leyenda{ display:flex; flex-direction:column; gap:6px; flex:none; }
.cod-ley{
  display:flex; align-items:baseline; gap:10px; padding:7px 10px; font-size:.8rem; line-height:1.35;
  border-left:4px solid var(--c); background: var(--surface-2); border-radius: var(--radius);
  animation: codTarjeta .35s ease both;
}
.cod-ley code{ font-family: var(--font-code); font-weight:900; color: var(--c); min-width:52px; }
.cod-ley-sin{ opacity:.7; }
/* Correcciones de Admin y Moderador: el boton en la tarjeta, la nota de quien corrigio y el
   formulario que la reemplaza mientras se edita. */
.cod-corregido{ font-size:.7rem; font-weight:700; color: var(--accent4); }
.cod-corregir{ align-self:center; width:auto; margin-top:4px; padding:5px 12px; font-size:.7rem; }
.cod-ley-corr{ font-style:normal; font-size:.75em; }
.cod-form{ display:flex; flex-direction:column; gap:8px; text-align:left; }
.cod-form label{ display:flex; flex-direction:column; gap:4px; font-size:.7rem; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color: var(--text-dim); }
.cod-form input, .cod-form textarea{
  font:inherit; font-size:.88rem; text-transform:none; letter-spacing:0; font-weight:600; color: var(--text);
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:8px 10px; resize:vertical;
}
.cod-form-ayuda{ font-size:.72rem; color: var(--text-dim); line-height:1.4; }
.cod-form-botones{ display:flex; gap:8px; justify-content:flex-end; }
.cod-form-botones .btn{ width:auto; padding:7px 14px; font-size:.74rem; }
/* Con doble clase: .nov-acciones viene despues en este archivo y las ponia en columna, donde
   el flex-basis se volvia ALTO y cada boton media 120 px. */
.nov-acciones.cod-acciones{ flex-direction:row; flex-wrap:wrap; }
.nov-acciones.cod-acciones .btn{ flex:1 1 110px; width:auto; }
@media (prefers-reduced-motion: reduce){
  .cod-linea{ animation:none; stroke-dashoffset:0; }
  .cod-punta, .cod-tarjeta.entra, .cod-ley{ animation:none; opacity:1; }
}
/* Misma pastilla que el código de arriba (fondo, borde duro y sombra), en versión chica: se lee
   como el mismo componente, no como texto suelto debajo. También se copia con un click. */
.product-desc{
  display:block; font-size:.92rem; line-height:1.45; font-weight:600; color: var(--text);
  margin:0 0 10px; max-width:60ch;
  padding:10px 14px;
  background: var(--surface-2);
  border:2px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  transition: transform .1s var(--ease), box-shadow .1s var(--ease), background .1s, color .1s, border-color .12s;
}
.product-desc:hover{
  border-color: var(--accent);
  transform: translate(-1px,-1px); box-shadow: var(--shadow-md);
}
/* Mismo parpadeo de confirmación que la pastilla del código (ver .code-pill-main.copied). */
.product-desc.copied{
  background: var(--accent); border-color: var(--text); color:#04211c;
}
.product-desc.copied .product-desc-toggle{ color:#04211c; }
.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:var(--font-code); 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;
  /* El calendario que abre el navegador también sale en oscuro, igual que el resto de la app. */
  color-scheme: dark;
}
.surtidos-date-filter input[type=date]:focus{ border-color:var(--accent); }
.surtidos-date-filter .btn{ padding:7px 12px; font-size:.76rem; }
/* El <select> sin estilos se pintaba con el tema claro del sistema (caja blanca y texto casi
   ilegible sobre el fondo oscuro). Se le quita la apariencia nativa y se le da la misma caja
   que los campos de fecha de al lado; color-scheme:dark es lo que hace que la lista desplegable
   que dibuja el navegador también salga oscura. */
.surtidos-date-filter select{
  appearance:none; -webkit-appearance:none;
  background: var(--surface-2); border:2px solid var(--border); border-radius: var(--radius);
  padding:7px 32px 7px 10px; color:var(--text); font-size:.82rem; font-family:inherit;
  font-weight:600; outline:none; cursor:pointer; color-scheme: dark;
  /* Flecha propia (la nativa se fue con appearance:none). */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.surtidos-date-filter select:focus{ border-color: var(--accent); }
.surtidos-date-filter select option{ background: var(--surface); color: var(--text); }
.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. */
/* Albarán y Referencia en las tablas de movimientos: pastillas, no texto subrayado.
   Eran dos links iguales, los dos del mismo verde, en una tabla de siete columnas — había que
   leerlos para saber cuál era cuál. Como pastilla se ve que se tocan, y el COLOR dice de qué
   documento se trata antes de leer el número:

     turquesa  Albarán (la transferencia de Odoo, 101/OUT/…)
     rosa      Pedido de Venta (S…)  — el mismo rosa de la etiqueta ⬆ Salida
     lima      Orden de Compra (P…)  — el mismo verde de ⬇ Entrada
     ámbar     Orden de Producción (…/MO/…) */
.moves-link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 11px; margin:0; cursor:pointer; white-space:nowrap;
  font-family: var(--font-code); font-size:.76rem; font-weight:700; letter-spacing:.2px;
  line-height:1.45;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius:8px;
  text-decoration:none;
  transition: background .14s var(--ease, ease), border-color .14s var(--ease, ease),
              transform .1s var(--ease, ease), box-shadow .14s var(--ease, ease);
}
/* Al pasar el mouse se llena y se levanta un poco: lo mismo que hacen los botones de la app. */
.moves-link:hover{
  color:#04211c;
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.moves-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.moves-link:active{ transform:none; }

/* Pedido de Venta: lo que sale. */
.moves-link[data-search-type="order"]{
  color: var(--accent3);
  background: color-mix(in srgb, var(--accent3) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent3) 45%, transparent);
}
.moves-link[data-search-type="order"]:hover{
  color:#2a0710; background: var(--accent3); border-color: var(--accent3);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent3) 35%, transparent);
}
/* Orden de Compra: lo que entra. */
.moves-link[data-search-type="po"]{
  color: var(--accent4);
  background: color-mix(in srgb, var(--accent4) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent4) 45%, transparent);
}
.moves-link[data-search-type="po"]:hover{
  color:#12210a; background: var(--accent4); border-color: var(--accent4);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent4) 35%, transparent);
}
/* Orden de Producción. */
.moves-link[data-search-type="mo"]{
  color: var(--accent2);
  background: color-mix(in srgb, var(--accent2) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent2) 45%, transparent);
}
.moves-link[data-search-type="mo"]:hover{
  color:#2a1705; background: var(--accent2); border-color: var(--accent2);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent2) 35%, transparent);
}

/* La celda de la referencia ya no impone su color: lo pone la pastilla segun el documento. */
table.moves td.oc .moves-link{ font-family: var(--font-code); }

@media (prefers-reduced-motion: reduce){
  .moves-link{ transition:none; }
  .moves-link:hover{ transform:none; }
}

.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:var(--font-code); 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:var(--font-code); 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:var(--font-code); 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;
  display:flex; align-items:flex-start; gap:10px;
}
/* align-self:flex-start para que el icono se quede arriba cuando el aviso ocupa varios
   renglones, en vez de irse al centro del parrafo. */
.stock-pending-note .acc-ico{ width:26px; height:26px; flex-shrink:0; align-self:flex-start; }
.stock-pending-texto{ flex:1; min-width:0; }
.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:var(--font-code); font-weight:600; color:var(--accent); }

/* Paginación de los reportes de Prefijos Avanzados (-100/-foto/-foto -laina, ver script.js) —
   mismo lenguaje visual que el resto de botones/chips de la app en vez de los <button> planos
   del navegador. */
.report-pagination{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--border);
}
.report-pagination .report-pag-info{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--text-dim);
}
.report-pagination button{
  display:flex; align-items:center; gap:6px;
  background:var(--surface-2); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius); padding:8px 14px; font-size:.8rem; font-weight:600;
  cursor:pointer; transition:background .12s, border-color .12s, color .12s, transform .08s;
}
.report-pagination button:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.report-pagination button:active:not(:disabled){ transform:translateY(1px); }
.report-pagination button:disabled{ opacity:.35; cursor:default; }

/* 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 se quitó: las etiquetas salen en el globo del botón, ver .etq-pop.) */

.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-upload-hint{ font-size:.7rem; color:var(--text-dim); text-align:center; margin-top:2px; }
.photo-box{
  width:clamp(180px, 34vw, 300px); aspect-ratio:1/1; height:auto; 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; }
/* Con la forma de la foto (ver el 'load' de #mainPhotoImg en script.js): se ve completa. */
.photo-box.photo-box-ajustada img{ object-fit:contain; }
/* Una foto vertical no crece hacia abajo sin fin: tope de alto (la foto se sigue viendo entera). */
.photo-box.photo-box-ajustada{ max-height:340px; max-width:100%; }
.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:8px; 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); }
/* El pie de la foto en pantalla completa (ver pieDeFotoHtml): una tarjeta con los colores del
   tema — el titulo de la foto arriba con la raya del acento, y quien la subio con sus iniciales
   en un circulo y la fecha en una pastilla. */
.lightbox-caption{
  flex-direction:column; gap:8px; max-width:min(560px, 92vw); width:max-content;
  padding:10px 14px; border-radius: var(--radius-lg, 10px); text-align:left;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 8px 24px rgba(0,0,0,.45); backdrop-filter: blur(6px);
}
.lb-cap-titulo{
  font-size:.95rem; font-weight:800; color: var(--text); line-height:1.3;
  padding-left:9px; border-left:4px solid var(--accent);
}
.lb-cap-quien{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.lb-cap-avatar{
  flex:none; width:34px; height:34px; border-radius:50%; overflow:hidden; padding:2px;
  /* El aro en degradado del tema; la foto va adentro. */
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.lb-cap-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; background: var(--surface); }
.lb-cap-texto{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.lb-cap-label{ font-size:.62rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color: var(--text-dim); }
.lb-cap-texto strong{ font-size:.86rem; color: var(--text); }
.lb-cap-fecha{
  font-size:.72rem; font-weight:700; color: var(--accent4);
  padding:3px 9px; border-radius:8px; background: color-mix(in srgb, var(--accent4) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent4) 40%, transparent);
}
.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. */
/* Aviso flotante: se usa cuando el banner no esta a la vista (consultando un resultado, con la
   pagina bajada) o donde no hay banner. Sale pegado ARRIBA, no abajo: al copiar un codigo la
   vista esta en el contenido, y un aviso al pie de la ventana pasaba desapercibido. */
#albaToast{
  position:fixed; left:50%; top:16px; z-index:95;
  transform: translate(-50%, -14px); opacity:0; pointer-events:none;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
  color: var(--text); border:2px solid var(--accent);
  border-radius: var(--radius);
  padding:11px 20px; font-size:.86rem; font-weight:800; max-width:min(92vw, 560px);
  line-height:1.4; text-align:center;
  box-shadow: var(--shadow-lg);
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
#albaToast.show{ opacity:1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce){
  #albaToast{ transition: opacity .16s; 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); }

/* ---- Botón flotante "Marcar Como Hecho" (solo celular) ----
   Va justo arriba del FAB de la lupa, en la misma columna, para que el pulgar los alcance sin
   estirarse. En PC no aparece: ahí el botón normal de la ficha ya está a la vista. */
/* Nota bajo el botón de marcar: a nombre de quién queda la marca, y que es definitiva. */
.surtido-firma-hint{
  margin-top:7px; font-size:.78rem; color: var(--text-dim); line-height:1.45;
}
.surtido-firma-hint strong{ color: var(--text); }

.surtido-fab{
  position:fixed; right:20px; bottom:86px; z-index:41; display:none;
  width:50px; height:50px; border-radius:0; border:2px solid var(--text); cursor:pointer;
  background: var(--ok, #1a9c6b); color:#04211c; font-size:1.2rem;
  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);
}
.surtido-fab.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.surtido-fab:active{ transform: translate(2px,2px); box-shadow:none; }

/* El botón flotante de "Marcar Como Hecho" sí sigue siendo solo de celular: en PC el botón
   normal de la ficha ya está a la vista y no hace falta un flotante encima. */
@media (max-width:680px){
  .surtido-fab{ display:flex; }
}

/* ---- Menú lateral deslizable ----
   Reemplaza al desplegable pegado al chip de usuario: los botones sueltos estorbaban y se
   encimaban al contenido. Ahora todo vive en un panel que entra desde la orilla, con un
   disparador delgado siempre visible; en celular además se abre y cierra deslizando el dedo.
   Es igual en PC y en celular — mismo panel, mismas acciones, misma preferencia de lado. */
  /* El desplegable del header se esconde: sus acciones viven en el panel lateral. "Salir"
     corre la misma suerte — se quedaba duplicado (arriba y en el panel). Sigue en el DOM
     porque el renglón del panel reenvía el click a este mismo botón. */
  .alba-menu-wrap{ display:none !important; }
  .alba-logout-btn{ display:none !important; }

  /* El header queda solo con el título: la info de la cuenta (foto, nombre, rol) y el 🏠 de
     "ir al inicio" ahora viven en el panel lateral, que es donde está todo lo demás.
     OJO: se esconden SIN display:none — los renglones del panel reenvían el click a estos
     mismos botones, y para saber cuáles mostrar se lee su display calculado (ver isUsable en
     script.js). Con display:none se creerían deshabilitados y desaparecerían del panel. */
  #sessionBadge,
  .alba-home-btn,
  /* El 🕒 de la barra también: el historial ya tiene su renglón en el panel. */
  #searchHistoryBtn{
    position:absolute !important;
    width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip-path: inset(50%); white-space:nowrap;
    opacity:0; pointer-events:none;
  }

  .drawer-handle{
    /* En columna: la flecha arriba y la palabra "Menú" en vertical debajo — la pestaña sola no
       decía qué era, sobre todo para quien entra por primera vez. */
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:60;
    width:30px; height:120px; padding:0;
    border:2px solid var(--text); border-right:none; border-radius:0;
    background: var(--accent); color:#04211c; cursor:pointer;
    box-shadow: var(--shadow-md);
    transition: transform .25s var(--ease), opacity .2s;
  }
  .drawer-handle-arrow{ font-size:1.2rem; font-weight:900; line-height:1; }
  .drawer-handle.hidden{ opacity:0; pointer-events:none; transform:translate(28px,-50%); }

  /* Lado izquierdo: el usuario lo elige desde el propio panel (ver drawer-side-btn) y queda
     guardado en su navegador. Solo se voltea de orilla — todo lo demás es idéntico. */
  body.drawer-left .drawer-handle{
    right:auto; left:0;
    border-right:2px solid var(--text); border-left:none;
  }
  body.drawer-left .drawer-handle .drawer-handle-arrow{ transform: rotate(180deg); }
  body.drawer-left .drawer-handle.hidden{ transform:translate(-28px,-50%); }

  .drawer-backdrop{
    display:block; position:fixed; inset:0; z-index:70;
    background: rgba(0,0,0,.55); opacity:0; pointer-events:none;
    transition: opacity .25s var(--ease);
  }
  .drawer-backdrop.show{ opacity:1; pointer-events:auto; }

  .mobile-drawer{
    display:flex; flex-direction:column; gap:14px;
    position:fixed; top:0; right:0; z-index:71;
    width:min(82vw, 320px); height:100%;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));
    box-sizing:border-box; overflow-y:auto;
    background: var(--surface); border-left:2px solid var(--text);
    box-shadow: -10px 0 28px rgba(0,0,0,.45);
    transform: translateX(100%);
    transition: transform .28s var(--ease);
  }
  .mobile-drawer.open{ transform: translateX(0); }
  body.drawer-left .mobile-drawer{
    right:auto; left:0;
    border-left:none; border-right:2px solid var(--text);
    box-shadow: 10px 0 28px rgba(0,0,0,.45);
    transform: translateX(-100%);
  }
  body.drawer-left .mobile-drawer.open{ transform: translateX(0); }

  /* Botón "cambiar de lado", al final del panel. */
  .drawer-side-btn{ margin-top:10px; border-style:dashed; }
  /* Mientras se arrastra con el dedo la posición la pone el JS: sin transición para que siga
     al dedo en tiempo real y no "persiga" el gesto con retraso. */
  .mobile-drawer.dragging{ transition:none; }

  .mobile-drawer-grip{
    width:38px; height:4px; border-radius:2px; background: var(--border);
    align-self:center; flex:none;
  }
  .mobile-drawer-head{ display:flex; align-items:center; justify-content:space-between; }
  .mobile-drawer-title{
    font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:1px;
    color: var(--text-dim);
  }
  .mobile-drawer-close{
    background:transparent; border:2px solid var(--border); color:var(--text);
    width:32px; height:32px; cursor:pointer; font-size:.9rem; border-radius:0;
  }
  /* Tarjeta de la cuenta: foto redonda a la izquierda, nombre y rol a la derecha. El botón de
     la esquina cambia según el caso — lápiz si ya hay foto, cámara si todavía no. */
  .mobile-drawer-user{
    padding:14px; background: var(--surface-2); border:2px solid var(--border);
    display:flex; align-items:center; gap:14px;
  }
  .drawer-avatar-wrap{ position:relative; flex:none; }
  .drawer-avatar{
    width:62px; height:62px; border-radius:50%; overflow:hidden;
    border:2px solid var(--accent); background: var(--surface);
    display:flex; align-items:center; justify-content:center;
  }
  .drawer-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .drawer-avatar-empty{ font-size:1.7rem; opacity:.5; }
  .drawer-avatar-edit{
    position:absolute; right:-4px; bottom:-4px;
    width:26px; height:26px; border-radius:50%; cursor:pointer;
    border:2px solid var(--surface-2); background: var(--accent); color:#04211c;
    font-size:.72rem; line-height:1; padding:0;
    display:flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow-md);
  }
  .drawer-avatar-edit:active{ transform: scale(.92); }
  .drawer-user-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
  .mobile-drawer-user-name{ font-weight:800; font-size:.95rem; word-break:break-word; }
  .mobile-drawer-user-role{ font-size:.74rem; color: var(--text-dim); text-transform:uppercase; letter-spacing:.6px; font-weight:800; }
  /* Rojo para Administrador (pedido directo) y turquesa para Almacén — el acento de la app, que
     lo distingue sin competir con el rojo de "mando". */
  .mobile-drawer-user-role.rol-admin{ color:#ff5f5f; }
  .mobile-drawer-user-role.rol-almacen{ color: var(--accent); }
  /* El aro de la foto toma el mismo color del rol, para que se lea de un vistazo quién es quién
     sin tener que leer la palabra. */
  body.role-admin .drawer-avatar{ border-color:#ff5f5f; }
  body.role-admin .drawer-avatar-edit{ background:#ff5f5f; color:#fff; }

  /* Globito de "códigos recibidos" sin leer, en el renglón del menú. */
  .drawer-item-badge{
    margin-left:auto; min-width:22px; height:22px; padding:0 6px; border-radius:11px;
    background: var(--accent3, #e0533d); color:#fff;
    font-size:.72rem; font-weight:900;
    display:flex; align-items:center; justify-content:center;
  }
  /* Con el panel cerrado, el disparador es lo único visible: cuando hay códigos compartidos sin
     abrir se pone rojo, se ensancha, muestra cuántos son y late despacio, para que se note sin
     tener que abrir nada. */
  .drawer-handle.has-alerts{
    background: var(--accent3, #e0533d);
    /* Mas alta que la normal (120px) para que quepan el numero, la palabra y la flecha sin
       encimarse — antes media 104 y el contador tapaba el texto. */
    width:34px; height:142px;
    animation: drawerPulse 1.8s ease-in-out infinite;
  }
  .drawer-handle.has-alerts .drawer-handle-arrow{ color:#fff; }
  .drawer-handle-count{
    position:absolute; top:6px; left:50%; transform:translateX(-50%);
    min-width:19px; height:19px; padding:0 4px; border-radius:10px;
    background:#fff; color:#b3301f;
    font-size:.68rem; font-weight:900; line-height:19px; text-align:center;
    box-shadow:0 1px 3px rgba(0,0,0,.4);
  }
  @keyframes drawerPulse{
    0%,100%{ box-shadow: var(--shadow-md); }
    50%{ box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent3, #e0533d) 28%, transparent); }
  }
  /* Quien prefiera menos movimiento no ve el latido, pero sí el color y el número. */
  @media (prefers-reduced-motion: reduce){
    .drawer-handle.has-alerts{ animation:none; }
  }

  .mobile-drawer-nav{ display:flex; flex-direction:column; gap:8px; }
  .drawer-item{
    display:flex; align-items:center; gap:12px; width:100%; text-align:left;
    padding:13px 14px; border:2px solid var(--border); border-radius:0;
    background: var(--surface-2); color: var(--text);
    font-size:.92rem; font-weight:700; font-family:inherit; cursor:pointer;
    transition: border-color .12s, background .12s;
  }
  .drawer-item:hover,
  .drawer-item:active{ border-color: var(--accent); background: var(--surface); }
  .drawer-item-icon{ font-size:1.15rem; flex:none; }
  .drawer-item-danger{ border-color:#a33; color:#ff8a8a; margin-top:6px; }
  .drawer-item-danger:hover{ border-color:#ff8a8a; }
  .drawer-handle:hover{ filter:brightness(1.1); }
  .mobile-drawer-close:hover{ border-color: var(--accent); color: var(--accent); }
  /* En PC no hay gesto de arrastre, así que la "manija" de arriba no aporta nada. */
  @media (min-width:681px){
    .mobile-drawer-grip{ display:none; }
  }

.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;
  height:100vh;
  height:100dvh;
  /* Descontando el zoom de ajuste-escala.js (pedido de Manuel: con la vista del navegador al 50 %
     las ventanas quedaban mas abajo del centro). 100dvh NO descuenta ese zoom: el fondo media mas
     que la pantalla y la ventana se centraba por debajo de la mitad. */
  height: calc(100vh / var(--alba-zoom, 1));
  height: calc(100dvh / var(--alba-zoom, 1));
  box-sizing:border-box;
}
.modal-overlay.show{ display:flex; }

/* ---- Ninguna ventana se sale de la pantalla, mida lo que mida ----
   Esta regla es para TODAS, no para la que se acaba de romper: cada ventana tenia (o no) su
   propio tope de alto, asi que bastaba con que a una se le olvidara para que en un celular
   acostado se saliera y no se pudiera llegar a sus botones. Medido antes de escribirla: en
   844x390 se salian Temas y el aviso de Mantenimiento, y en este ultimo no se alcanzaba Guardar.

   100dvh y no 100vh: en un celular, vh NO descuenta la barra del navegador, que aparece y
   desaparece al desplazar. Con vh la ventana queda mas alta que lo que de verdad se ve y el
   ultimo renglon se esconde debajo de la barra. Se deja vh primero como respaldo para
   navegadores viejos, que ignoran la linea de dvh. */
.modal-overlay > *{
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* El visor de fotos es la excepcion: ahi la foto se acomoda sola y un desplazamiento dentro
   del contenedor solo estorbaria. */
#lightboxOverlay > *{ overflow: visible; }
/* 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 "Sección restringida" — sale cuando la cuenta busca algo de una sección que no tiene
   permitida (ver showPermissionDenied en script.js). Mismo lenguaje de bordes duros que los
   demás modales, con el borde ámbar para que se lea como aviso y no como error de búsqueda. */
.perm-denied-modal{
  background: var(--surface); border:2px solid #e0a800; border-radius: var(--radius-lg);
  width:100%; max-width:440px; padding:26px 24px; display:flex; flex-direction:column; gap:12px;
  box-shadow: var(--shadow-lg); text-align:center;
}
.perm-denied-icon{ font-size:2.2rem; line-height:1; }
.perm-denied-modal h3{
  margin:0; font-size:.95rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  color:#e0a800;
}
.perm-denied-msg{
  margin:0; font-size:.88rem; line-height:1.6; color: var(--text-dim);
}
.perm-denied-msg strong{ color: var(--text); }
.perm-denied-actions{ display:flex; justify-content:center; margin-top:6px; }
.perm-denied-actions .btn{ min-width:140px; }

/* 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:var(--font-code); 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:var(--font-code); }
.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);
}
/* Sugerencias del Kardex: las ubicaciones de sistema y las O.C. de las entradas, para no
   escribirlas a mano. Van DEBAJO de su campo, no en lugar de el — escribir a mano sigue siendo
   valido, que es justo lo que se pidio. */
.ko-sug{ margin-top:7px; }
.ko-sug-titulo{
  display:block; margin-bottom:5px;
  font-size:.64rem; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color: var(--text-dim);
}
.ko-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ko-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 9px;
  background: var(--surface-2); color: var(--text);
  border:2px solid var(--border); border-radius: var(--radius);
  font-family:inherit; font-size:.72rem; cursor:pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.ko-chip:hover{ border-color: var(--accent); }
.ko-chip.activo{
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
}
.ko-chip-valor{
  font-family:var(--font-code);
  font-weight:700; overflow-wrap:anywhere;
}
.ko-chip-meta{ color: var(--text-dim); font-size:.66rem; }
.ko-chip.activo .ko-chip-meta{ color: inherit; opacity:.75; }
/* La O.C. mas reciente, que es la que casi siempre se busca. */
.ko-chip-nuevo{
  font-size:.56rem; font-weight:800; text-transform:uppercase; letter-spacing:.3px;
  color:#12210a; background: var(--accent4); border-radius:8px; padding:1px 6px;
}

.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); }
/* Con la forma de la foto (ver el 'load' en script.js): se ve completa. */
.attach-thumb.attach-thumb-ajustada{ object-fit:contain; background: var(--surface-2); }
.attachments-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
/* Borrar adjuntas eligiendo cuales: en modo de elegir, tocar una foto la marca (palomita) en vez
   de abrirla, y las no elegidas se apagan un poco para que se note cuales se van. */
.attach-thumb-wrap{ position:relative; display:inline-flex; }
.attach-check{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  display:none; align-items:center; justify-content:center; font-size:.75rem; font-weight:900;
  background: var(--surface); color: var(--text-dim); border:2px solid var(--border); pointer-events:none;
}
.attachments-row.eligiendo .attach-thumb-wrap[data-att-id] .attach-check{ display:flex; }
.attachments-row.eligiendo .attach-thumb{ opacity:.55; }
.attachments-row.eligiendo .attach-thumb-wrap.elegida .attach-thumb{ opacity:1; border-color: var(--err); box-shadow: 0 0 0 2px var(--err); }
.attachments-row.eligiendo .attach-thumb-wrap.elegida .attach-check{ background: var(--err); color:#fff; border-color: var(--err); }
.attach-borrar-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.attach-borrar-barra .btn{ font-size:.74rem; padding:7px 10px; width:auto; }
.attach-borrar-empezar{ color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, var(--border)); }
.attach-borrar-modo{ display:none; flex-wrap:wrap; align-items:center; gap:8px; }
.attach-borrar-barra.eligiendo .attach-borrar-empezar{ display:none; }
.attach-borrar-barra.eligiendo .attach-borrar-modo{ display:flex; }
.attach-borrar-cuenta{ font-size:.76rem; font-weight:700; color: var(--text-dim); }
.attach-borrar-ok:not(:disabled){ background: var(--err); color:#fff; border-color: var(--err); }
/* Segunda confirmacion de borrar adjuntas: las fotos a la vista y el boton de borrar con espera. */
.bf2-fotos{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-height:180px; overflow-y:auto; }
.bf2-fotos img{ width:58px; height:58px; object-fit:cover; border-radius:8px; border:2px solid var(--err); }
.bf2-acciones{ flex-wrap:wrap; }
.bf2-acciones .btn{ flex:1 1 140px; }
.bf2-acciones .bf-confirmar:disabled{ opacity:.45; cursor:not-allowed; }
.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; }


.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:8px; 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:var(--font-code); 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:var(--font-code); 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:var(--font-code);
}
.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:.17;
  pointer-events:none;
  transform: rotate(45deg);
  /* El desenfoque las funde con el fondo: sin el, los cuadrados se leen como recuadros sueltos
     encima en vez de como profundidad. */
  filter: blur(2px);
}
/* Las formas cruzan la pantalla completa en diagonal, de arriba-derecha a abajo-izquierda.
   Antes solo se mecian unos pocos vmax alrededor de su sitio, que casi no se notaba; ahora
   hacen el recorrido entero y vuelven a entrar por arriba.

   Cada una tiene su propia duracion (numeros que no son multiplos entre si) y arranca con un
   retraso NEGATIVO: eso hace que al abrir la pantalla ya esten repartidas a media travesia en
   vez de salir todas juntas desde la misma esquina. */
.login-bg-blob{
  /* El punto de partida lo pone la animacion; aqui solo se fija de donde cuelgan. */
  top:0; left:0;
}
.login-bg-blob.b1{ background:var(--accent);  width:28vmax; height:28vmax; animation: loginCruza1 52s linear infinite; animation-delay:-6s; }
.login-bg-blob.b2{ background:var(--accent3); width:22vmax; height:22vmax; animation: loginCruza2 67s linear infinite; animation-delay:-28s; }
.login-bg-blob.b3{ background:var(--accent2); width:18vmax; height:18vmax; animation: loginCruza3 43s linear infinite; animation-delay:-17s; }
.login-bg-blob.b4{ background:var(--accent4); width:25vmax; height:25vmax; animation: loginCruza4 79s linear infinite; animation-delay:-41s; }
.login-bg-blob.b5{ background:var(--accent);  width:13vmax; height:13vmax; opacity:.12; animation: loginCruza5 61s linear infinite; animation-delay:-9s; }
/* Cuatro mas, desfasadas a media vuelta de las anteriores: con solo cinco, cada una pasaba
   hasta 15 segundos seguidos fuera de cuadro y el fondo se quedaba medio vacio a ratos. Con
   nueve siempre hay varias cruzando, que es lo que hace que el movimiento no se corte. */
.login-bg-blob.b6{ background:var(--accent2); width:20vmax; height:20vmax; animation: loginCruza1 52s linear infinite; animation-delay:-32s; }
.login-bg-blob.b7{ background:var(--accent4); width:16vmax; height:16vmax; animation: loginCruza3 43s linear infinite; animation-delay:-38s; }
.login-bg-blob.b8{ background:var(--accent);  width:24vmax; height:24vmax; animation: loginCruza2 67s linear infinite; animation-delay:-58s; }
.login-bg-blob.b9{ background:var(--accent3); width:15vmax; height:15vmax; opacity:.13; animation: loginCruza4 79s linear infinite; animation-delay:-12s; }

/* Entran y salen justo por el borde, sin alejarse de mas: cuanto menos camino hacen fuera de
   cuadro, mas tiempo se las ve y mas continuo se siente el flujo. */
@keyframes loginCruza1{
  from{ transform: translate(105vw, -32vh) rotate(45deg); }
  to{   transform: translate(-32vw, 108vh) rotate(405deg); }
}
@keyframes loginCruza2{
  from{ transform: translate(108vw, -12vh) rotate(45deg); }
  to{   transform: translate(-28vw, 102vh) rotate(-315deg); }
}
@keyframes loginCruza3{
  from{ transform: translate(102vw, -28vh) rotate(0deg); }
  to{   transform: translate(-24vw, 106vh) rotate(360deg); }
}
@keyframes loginCruza4{
  from{ transform: translate(110vw, 4vh) rotate(45deg); }
  to{   transform: translate(-34vw, 98vh) rotate(-275deg); }
}
@keyframes loginCruza5{
  from{ transform: translate(104vw, -20vh) rotate(45deg); }
  to{   transform: translate(-22vw, 104vh) rotate(765deg); }
}

/* Un aro fino que late detras de la tarjeta: le da centro a la composicion sin taparla. */
.login-bg-ring{
  position:absolute; top:50%; left:50%;
  width:min(74vmin, 520px); height:min(74vmin, 520px);
  transform: translate(-50%,-50%);
  border:2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius:50%;
  pointer-events:none;
  animation: loginRing 9s ease-in-out infinite;
}
@keyframes loginRing{
  0%,100%{ transform: translate(-50%,-50%) scale(1); opacity:.5; }
  50%{ transform: translate(-50%,-50%) scale(1.09); opacity:.16; }
}

/* Con "reducir movimiento" las formas se quedan quietas: siguen dando color de fondo, que es
   lo que aporta, sin nada moviendose. */
@media (prefers-reduced-motion: reduce){
  .login-bg-blob, .login-bg-ring{ animation:none !important; }
}

#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;
}

/* Borrar fotos es de quien tenga ESE permiso. A diferencia de los demás, no llega en la sesión
   —inventario-api todavía no lo conoce—: lo pregunta sincronizarPermisoBorrarFotos y marca
   perm-borrarFotos en el body. Mientras no conteste, el botón no se ve, que es lo prudente
   para algo que borra sin vuelta atrás. */
#borrarFotosBtn{ display:none !important; }
body.perm-borrarFotos #borrarFotosBtn{ display:inline-flex !important; }

/* El SKU de proveedores externos lo ve quien puede darlos de alta: es su catálogo. Un Admin
   entra siempre, porque applySession marca todos los perm-* para el rol admin. */
body.role-almacen:not(.perm-almacenesExternos) #proveedoresSkuBtn{
  display:none !important;
}
body.role-almacen.perm-almacenesExternos #proveedoresSkuBtn{
  display:inline-flex;
}

/* Al quitarse el menú de tiles por sección, el header (y el panel lateral de celular, que lee
   el display de estos mismos botones) es la única entrada a Surtidos y a "Mis Surtidos" — así
   que una cuenta Almacén con el permiso correspondiente también los ve, no solo un Admin. */
body.role-almacen.perm-surtidos #surtidosBtn,
body.role-almacen.perm-marcarSurtido #misSurtidosBtn,
/* Ni "Códigos recibidos" ni "Tamaño y apariencia" son permisos: el primero lo puede recibir
   cualquiera, y el segundo solo cambia cómo ve cada quien la app en su propio dispositivo. */
body.role-almacen #codigosRecibidosBtn,
body.role-almacen #myAccountBtn,
/* Los marcadores tampoco son un permiso: son la lista propia de cada cuenta, con cosas que esa
   cuenta ya puede ver desde el buscador. */
body.role-almacen #favoritosBtn,
body.role-almacen #appearanceBtn{
  display:inline-flex;
}
body.role-almacen:not(.perm-marcarSurtido) #misSurtidosBtn{
  display:none !important;
}

/* ---- IDs viejos FP/FPA ligados a un código ---- */
.alias-box{
  margin:14px 0; padding:12px 14px;
  background: var(--surface-2); border:2px solid var(--border); border-radius: var(--radius);
}
.alias-box-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.alias-box-title{
  font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  color: var(--text-dim);
}
.alias-add-btn{ padding:5px 11px; font-size:.74rem; }
.alias-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.alias-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border:2px solid var(--accent); border-radius: var(--radius);
  background: var(--surface); color: var(--accent);
  font-size:.82rem; font-weight:800; letter-spacing:.4px;
}
.alias-chip-del{
  background:transparent; border:none; color: var(--text-dim); cursor:pointer;
  font-size:.72rem; padding:0 0 0 2px; line-height:1;
}
.alias-chip-del:hover{ color:#ff8a8a; }
.alias-empty{ margin-top:8px; font-size:.8rem; color: var(--text-dim); }

/* ---- Compartir un código a otra cuenta ---- */
.share-code-name{
  font-size:.84rem; color: var(--text-dim); margin:-6px 0 4px; line-height:1.4;
}

/* ---- Códigos recibidos ---- */
.recibido-row{ position:relative; }
/* Los que todavía no se abren llevan el borde marcado, para distinguirlos de un vistazo. */
.recibido-nuevo{ border-color: var(--accent) !important; }
.recibido-badge{ color: var(--accent) !important; border-color: var(--accent) !important; }
.recibido-nombre{ font-size:.86rem; color: var(--text); margin:3px 0 2px; }
.recibido-nota{
  margin-top:7px; padding:7px 10px; font-size:.82rem; line-height:1.45;
  background: var(--surface-2); border-left:3px solid var(--accent); color: var(--text-dim);
}
.recibido-del{
  position:absolute; top:8px; right:34px;
  background:transparent; border:2px solid var(--border); color: var(--text-dim);
  width:24px; height:24px; border-radius:0; cursor:pointer; font-size:.7rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.recibido-del:hover{ border-color:#a33; color:#ff8a8a; }

/* ---- Aviso de producto de garantías (G1, G2…) ----
   La G en el código marca que la pieza ya se regresó y se volvió a ocupar para una garantía, y
   el número dice cuántas veces. No va como una etiqueta más (que se esconden detrás de "Mostrar
   Etiquetas"): es de lo primero que hay que notar al abrir un código así, por eso lleva su
   propio aviso en ámbar a todo lo ancho de la ficha. */
.garantia-note{
  display:flex; align-items:flex-start; gap:12px;
  margin:12px 0; padding:12px 14px;
  background: rgba(224,168,0,0.10); border:2px solid #e0a800; border-radius: var(--radius);
}
.garantia-note-icon{ font-size:1.3rem; line-height:1.2; flex:none; }
.garantia-note-text{ display:flex; flex-direction:column; gap:3px; font-size:.86rem; line-height:1.5; }
/* El genérico va primero: el título (strong directo) debe ganarle al strong de adentro del
   texto, y con igual especificidad manda el que se declara después. */
.garantia-note-text strong{ color: var(--text); }
.garantia-note-text > span{ color: var(--text-dim); }
.garantia-note-text > strong{ color:#e0a800; font-size:.9rem; }

/* ---- Semáforo de existencias en la lista de variantes ----
   La tarjeta pasa de "todas verdes" a decir si de verdad se puede ir por esa variante ahora:
   verde solo con piezas en un bin del almacén A, ámbar si hay pero fuera de A, y apagada en
   gris con aviso rojo si no hay nada (ver variantStockClass en script.js). */
.product-variant-btn{
  flex-wrap:wrap;
}
.product-variant-btn.variant-ok{
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)) !important;
  border-color: var(--accent) !important;
}
.product-variant-btn.variant-warn{
  background: color-mix(in srgb, #e0a800 14%, var(--surface-2)) !important;
  border-color: #e0a800 !important;
}
.product-variant-btn.variant-empty{
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  opacity:.72;
}
.product-variant-btn.variant-empty:hover{ opacity:1; }

/* La línea de existencias ocupa su propio renglón abajo del código. */
.variant-stock{
  flex-basis:100%; margin-top:6px;
  font-size:.76rem; font-weight:700; letter-spacing:.2px;
}
.variant-stock-ok{ color: var(--accent); }
.variant-stock-warn{ color:#e0a800; }
.variant-stock-empty{ color:#ff8a8a; }

/* Confirmación momentánea en el botón de "Mandar a una cuenta" (ver flashShareButton): se pinta
   en verde al compartir y en rojo si no se pudo, y regresa solo a su texto normal. */
.share-btn-ok{
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)) !important;
}
.share-btn-fail{
  border-color:#a33 !important;
  color:#ff8a8a !important;
}

/* El saludo ya no se pinta ahí (sale como toast), así que su hueco y la caja que lo envolvía
   sobran: el panel se queda solo con la línea de estado y el botón de volver, sin fondo ni
   borde, para no dejar una tarjeta vacía bajo el buscador. */
#greetingText{ display:none; }
#searchPanelCard{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  /* Sin caja ni contenido fijo, su margen inferior solo dejaba un hueco muerto entre el
     buscador y el resultado. Lo que sí necesita separación (el botón de volver) trae la suya. */
  margin:0 !important;
}
#sectionsBackBtn{ margin-bottom:14px; }
#searchPanelCard::before{ display:none !important; }

/* ---- Pantalla de carga completa ----
   Tapa todo mientras se busca. Fondo oscuro con la rejilla y un resplandor de los cuatro
   colores de la marca moviendose despacio (el mismo lenguaje que el acceso), las cuatro cajas
   que se acomodan como en un rack, el titulo con el codigo en su etiqueta, pasos que se turnan
   y una barra de avance indeterminada. */
.alba-loader{
  position:fixed; inset:0; z-index:95;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg); overflow:hidden;
  opacity:0; pointer-events:none; visibility:hidden;
  transition: opacity .2s var(--ease), visibility 0s linear .2s;
}
/* Aparece DE GOLPE (sin transicion) y ya opaco: con el desvanecido de entrada, durante ese
   instante semitransparente se veia la pagina de atras cambiando antes de quedar tapada. Solo
   el contenido del centro entra animado; al quitarse si se desvanece. */
.alba-loader.show{ opacity:1; pointer-events:auto; visibility:visible; transition:none; }
.alba-loader-fondo{
  position:absolute; inset:-30%;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%) 20% 30% / 55% 55% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--accent4) 20%, transparent), transparent 70%) 80% 25% / 50% 50% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--accent2) 20%, transparent), transparent 70%) 75% 80% / 55% 55% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--accent3) 22%, transparent), transparent 70%) 25% 78% / 50% 50% no-repeat;
  filter: blur(10px);
  animation: loaderFondo 9s ease-in-out infinite alternate;
}
@keyframes loaderFondo{
  from{ transform: rotate(0deg) scale(1); }
  to{   transform: rotate(18deg) scale(1.12); }
}
.alba-loader-rejilla{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.alba-loader-centro{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:0 20px; max-width:min(560px, calc(100vw - 32px)); text-align:center;
}
.alba-loader.show .alba-loader-centro{ animation: loaderEntra .35s var(--ease) both; }
@keyframes loaderEntra{ from{ opacity:0; transform: translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }

.alba-loader-marca{
  display:flex; align-items:center; gap:10px;
  font-size:1.05rem; font-weight:900; letter-spacing:4px; color: var(--text);
}
.alba-loader-rombo{ color: var(--accent); font-size:.9rem; animation: loaderRombo 1.6s ease-in-out infinite; }
@keyframes loaderRombo{ 50%{ transform: rotate(180deg) scale(1.25); color:#ff4d73; } }

/* Cuatro cajas en una cuadricula de 2x2 que giran juntas una esquina a la vez, con una pausa en
   cada una: se leen como tarimas reacomodandose en un rack. Van SIN retraso entre ellas a
   proposito: cada una arranca en una esquina distinta, y con retrasos dos acababan encimadas. */
.alba-loader-cajas{
  position:relative; width:74px; height:74px; margin:10px 0 6px;
}
.alba-loader-cajas i{
  position:absolute; width:32px; height:32px; border-radius: var(--radius, 6px);
  box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 -4px 0 rgba(0,0,0,.18);
  animation: loaderCaja 2.4s cubic-bezier(.65,0,.35,1) infinite;
}
.alba-loader-cajas i:nth-child(1){ background: var(--accent); top:0;    left:0;    }
.alba-loader-cajas i:nth-child(2){ background: var(--accent4); top:0;    left:42px; }
.alba-loader-cajas i:nth-child(3){ background: var(--accent2); top:42px; left:42px; }
.alba-loader-cajas i:nth-child(4){ background: var(--accent3); top:42px; left:0;    }
@keyframes loaderCaja{
  0%, 20%   { transform: translate(0,0) scale(1); }
  25%, 45%  { transform: translate(var(--dx1,0), var(--dy1,0)) scale(.86); }
  50%, 70%  { transform: translate(var(--dx2,0), var(--dy2,0)) scale(1); }
  75%, 95%  { transform: translate(var(--dx3,0), var(--dy3,0)) scale(.86); }
  100%      { transform: translate(0,0) scale(1); }
}
/* Cada caja recorre las cuatro esquinas en el mismo sentido (horario). */
.alba-loader-cajas i:nth-child(1){ --dx1:42px; --dy1:0;    --dx2:42px; --dy2:42px; --dx3:0;     --dy3:42px; }
.alba-loader-cajas i:nth-child(2){ --dx1:0;    --dy1:42px; --dx2:-42px; --dy2:42px; --dx3:-42px; --dy3:0; }
.alba-loader-cajas i:nth-child(3){ --dx1:-42px; --dy1:0;   --dx2:-42px; --dy2:-42px; --dx3:0;    --dy3:-42px; }
.alba-loader-cajas i:nth-child(4){ --dx1:0;    --dy1:-42px; --dx2:42px; --dy2:-42px; --dx3:42px; --dy3:0; }

.alba-loader-text{
  font-size: clamp(1.15rem, 3.4vw, 1.6rem); font-weight:900; color: var(--text);
  letter-spacing:.3px; line-height:1.25;
}
.alba-loader-codigo{
  font-family: var(--font-code, 'JetBrains Mono', monospace);
  font-size: clamp(.9rem, 2.6vw, 1.1rem); font-weight:800; color: var(--accent);
  padding:7px 14px; border-radius: var(--radius-lg, 10px); max-width:100%; overflow-wrap:anywhere;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border:1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.alba-loader-paso{
  min-height:1.3em; font-size:.85rem; font-weight:700; color: var(--text-dim); letter-spacing:.3px;
}
.alba-loader-paso.entra{ animation: loaderPaso .35s var(--ease) both; }
@keyframes loaderPaso{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

/* Barra indeterminada: un tramo con los cuatro colores que corre de lado a lado. */
.alba-loader-barra{
  position:relative; width:min(280px, 70vw); height:5px; margin-top:4px;
  border-radius:8px; overflow:hidden; background: rgba(255,255,255,.07);
}
.alba-loader-barra span{
  position:absolute; top:0; bottom:0; left:-40%; width:40%; border-radius:inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent4), var(--accent2), var(--accent3));
  animation: loaderBarra 1.3s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes loaderBarra{ to{ left:100%; } }
.alba-loader-reloj{
  min-height:1em; font-family: var(--font-code, 'JetBrains Mono', monospace);
  font-size:.72rem; font-weight:700; color: var(--text-dim); opacity:.8;
}

@media (prefers-reduced-motion: reduce){
  .alba-loader-fondo, .alba-loader-rombo, .alba-loader-cajas i{ animation:none; }
  .alba-loader-barra span{ animation-duration: 2.6s; }
}

/* Sin texto de estado no hay por qué reservar su renglón: así el buscador queda pegado al
   resultado en vez de dejar un hueco vacío debajo. */
.status-line{ min-height:0; }
.status-line:empty{ display:none; margin:0; }

/* Engranaje de ajustes del código, en la fila de etiquetas, junto a "Mostrar Etiquetas". Se
   estira al alto de la fila (align-self:stretch) para quedar parejo con las etiquetas. */
.product-gear-btn{
  align-self:stretch; min-width:34px; min-height:28px; padding:0 8px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:.95rem;
  background: var(--surface-2); color: var(--text-dim);
  border:2px solid var(--border); border-radius: var(--radius);
  transition: color .15s, border-color .15s, transform .1s var(--ease);
}
.product-gear-btn:hover{ color: var(--accent); border-color: var(--accent); }
.product-gear-btn:active{ transform: translate(1px,1px); }
/* El panel de resultado es el ancla del botón. */
#resultPanel{ position:relative; }

/* Descripción escondida desde el ⚙️ (sigue en el DOM para poder volver a mostrarla). */
.product-desc.desc-hidden{ display:none; }

/* ---- Preferencias de apariencia (modal "Tamaño y apariencia") ---- */
.ap-scale-row{ display:flex; align-items:center; gap:14px; }
.ap-scale-row input[type=range]{ flex:1; accent-color: var(--accent); cursor:pointer; }
.ap-scale-value{
  min-width:56px; text-align:center; font-weight:900; font-size:.95rem; color: var(--accent);
  font-family:var(--font-code);
}
.ap-scale-ticks{
  display:flex; justify-content:space-between; margin-top:4px;
  font-size:.66rem; color: var(--text-dim);
  font-family:var(--font-code);
}
.ap-shape-row{ display:flex; gap:10px; flex-wrap:wrap; }
.ap-shape-btn{ flex:1 1 150px; justify-content:flex-start; gap:10px; font-size:.82rem; }
.ap-shape-btn.active{ border-color: var(--accent); color: var(--accent); }
.ap-shape-demo{
  width:22px; height:22px; flex:none;
  background: var(--surface-2); border:2px solid currentColor;
}
.ap-shape-demo-rounded{ border-radius:7px; }
.ap-shape-demo-square{ border-radius:0; }

/* Forma de las fotos: por defecto cuadrada con las esquinas apenas redondeadas; con la
   preferencia en "Cuadrada" quedan a escuadra. */
.photo-box, .row-thumb, .attachment-thumb{ border-radius:10px; }
body.fotos-cuadradas .photo-box,
body.fotos-cuadradas .row-thumb,
body.fotos-cuadradas .attachment-thumb{ border-radius:0; }

/* ---- Aviso de código archivado ---- */
.alba-archived{ background: color-mix(in srgb, var(--bg) 92%, transparent); }
.alba-archived-box{ border-color:#e0a800 !important; max-width:min(92vw, 460px); text-align:center; }
.alba-archived-icon{ font-size:2.4rem; line-height:1; }
.alba-archived-title{
  font-size:.95rem; font-weight:900; text-transform:uppercase; letter-spacing:.6px; color:#e0a800;
}
.alba-archived-code{
  font-family:var(--font-code); font-weight:800; font-size:.95rem;
  color: var(--text); word-break:break-all;
  padding:8px 12px; background: var(--surface-2); border:2px solid var(--border); border-radius: var(--radius);
}
.alba-archived-name{ font-size:.84rem; color: var(--text-dim); }
.alba-archived-text{ font-size:.86rem; line-height:1.6; color: var(--text-dim); }

/* El modal de ajustes de un código, como cualquier otro, se acomoda a la pantalla en vez de
   desbordarse en un celular. */
.ml-modal, .lm-modal{
  max-width:min(92vw, 460px);
  max-height:88vh; overflow-y:auto;
  box-sizing:border-box;
}
.ml-modal h3{ word-break:break-word; }
.ml-modal textarea, .ml-modal input[type=text]{ max-width:100%; box-sizing:border-box; }

/* Cabecera del modal de configuraciones del producto: título a la izquierda, ✕ a la derecha. */
.po-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.po-modal-head h3{ flex:1; margin:0; border:none; padding:0; }
.po-modal-close{
  flex:none; width:30px; height:30px; padding:0; cursor:pointer; line-height:1;
  background:transparent; border:2px solid var(--border); border-radius: var(--radius);
  color: var(--text-dim); font-size:.85rem;
}
.po-modal-close:hover{ border-color:#a33; color:#ff8a8a; }
.po-modal-code{
  font-family:var(--font-code);
  font-size:.8rem; font-weight:800; color: var(--accent); word-break:break-all;
  padding-bottom:10px; border-bottom:2px solid var(--border);
}
.po-modal-warn{ line-height:1.5; }
.po-modal-warn strong{ color:#e0a800; }

/* ---- Modal de "Configuraciones Del Producto": más aire y texto legible ----
   Se veía apretado porque hereda el modal chico de 380px pensado para un formulario de dos
   campos, y porque las etiquetas van en mayúsculas a .74rem — bien para un rótulo suelto,
   ilegible cuando hay seis seguidos. */
#poModalOverlay .ml-modal{
  max-width:min(94vw, 540px);
  padding: clamp(18px, 3vw, 26px);
  gap:18px;
}
#poModalOverlay label{
  font-size:.82rem; letter-spacing:.2px; text-transform:none;
  color: var(--text); font-weight:800; margin-bottom:7px;
}
#poModalOverlay .config-hint{
  font-size:.82rem; line-height:1.55; margin-top:0;
}
#poModalOverlay .po-modal-head h3{ font-size:1rem; letter-spacing:.3px; }
#poModalOverlay .po-modal-code{ font-size:.86rem; }
#poModalOverlay input,
#poModalOverlay textarea{ font-size:.92rem; padding:12px 14px; line-height:1.5; }
#poModalOverlay textarea{ min-height:96px; }
#poModalOverlay .lm-list{ gap:8px; }
#poModalOverlay .lm-row{ padding:10px 12px; font-size:.88rem; }
#poModalOverlay .lm-empty{ font-size:.84rem; padding:12px; }
#poModalOverlay .ml-modal-check-row label{
  display:flex; align-items:center; gap:9px; font-size:.9rem; font-weight:700;
  text-transform:none; color: var(--text); margin:0;
}
#poModalOverlay .ml-modal-check-row input[type=checkbox]{ width:auto; flex:none; }
/* El renglón de "escribe + botón" se apila en pantallas angostas en vez de exprimir el campo. */
#poModalOverlay .search-row{ flex-wrap:wrap; gap:8px; }
#poModalOverlay .search-row input{ min-width:0; }
#poModalOverlay .search-row .btn{ white-space:nowrap; }

/* ---- Aviso de impresora antes de mandar un Kardex ---- */

/* ---- Listas con varios códigos (pedidos, O.C., MO): más legibles ----
   La miniatura era de 34px y el código/descripción iban al tamaño de texto corrido, así que en
   una lista larga costaba distinguir un renglón de otro y reconocer la pieza por la foto. */
.row-thumb,
.row-thumb-empty{
  width:56px; height:56px; border-radius:8px;
}
.row-thumb-empty{ font-size:1.3rem; }
.row-thumb-count{
  min-width:18px; height:18px; font-size:.64rem; bottom:-5px; right:-5px;
}
.code-copy-wrap{
  font-size:1.02rem; letter-spacing:.2px; padding:2px 5px;
}
.code-desc-text{
  font-size:.92rem; line-height:1.5;
  cursor:pointer; border-radius:5px; padding:1px 4px;
  transition: background .15s, color .15s;
}
/* Mismo realce al pasar por encima que el código, para que se note que también se puede tocar. */
.code-desc-text:hover{ background: rgba(28,198,166,0.12); color: var(--text); }
/* Y el mismo parpadeo de confirmación al copiar que usan el código y la ficha. */
.code-desc-text.copied{ background: var(--accent); color:#04211c; font-style:normal; }

/* En celular se mantienen legibles pero sin comerse el ancho de la tarjeta. */
@media (max-width:680px){
  .row-thumb,
  .row-thumb-empty{ width:46px; height:46px; }
  .code-copy-wrap{ font-size:.94rem; }
  .code-desc-text{ font-size:.86rem; }
}

/* ---- Encabezado propio de las Órdenes de Producción ----
   Una MO no se lee como un pedido: lo que importa es en QUÉ se convierte lo que se va a surtir.
   Por eso el producto terminado va destacado en su propio bloque, con el código separado de la
   descripción, y el resto de los datos bajan a fichas chicas. El acento es el verde-lima de
   producción (--accent4), para distinguirlas de un vistazo del turquesa del resto de la app. */
/* "Todas las versiones": el historial completo, al final de Cambios y Novedades. Va plegado —
   son decenas de renglones y la ventana es para leer lo nuevo, no para repasar todo. */
.nov-historial{ margin-top:4px; }
.nov-historial-cab{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px 14px; cursor:pointer; text-align:left;
  background: var(--surface-2); border:2px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-ui); color: var(--text);
}
.nov-historial-cab:hover{ border-color: var(--accent); }
.nov-historial-icono{ font-size:1.1rem; line-height:1; }
.nov-historial-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.nov-historial-txt b{ font-size:.86rem; }
.nov-historial-txt small{ font-size:.72rem; color: var(--text-dim); }
.nov-historial-flecha{ flex:none; color: var(--text-dim); transition: transform .15s var(--ease); }
.nov-historial-cab.abierto .nov-historial-flecha{ transform: rotate(180deg); }
.nov-historial-cuerpo{ padding:4px 2px 0; }

.nov-mes{ margin-top:14px; }
.nov-mes-titulo{
  font-size:.74rem; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
  color: var(--accent); display:flex; align-items:center; gap:7px;
}
.nov-mes-cuenta{
  font-size:.66rem; font-weight:800; letter-spacing:0;
  padding:1px 7px; border-radius:8px;
  color: var(--text-dim); background: var(--surface-2); border:1px solid var(--border);
}
.nov-mes-nota{ margin-top:5px; font-size:.76rem; line-height:1.5; color: var(--text-dim); }
.nov-mes-lista{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
/* Las del historial son la misma tarjeta, pero no se abren: sin flecha y sin cursor de
   "pícame". La pastilla del número va en el color de "total" para distinguirlas de las de
   arriba, que son las que sí traen algo que leer. */
.nov-item-hist .nov-item-cab{ cursor:default; padding:10px 13px; }
.nov-item-hist .nov-item-ver{ background: var(--accent2); }
.nov-item-hist .nov-item-titulo{ font-size:.85rem; font-weight:600; }

/* Una nota interna larga sale plegada. El degradado de abajo dice "sigue" sin tener que
   escribirlo — un corte a secas se lee como si la nota terminara ahí. */
.internal-notes.plegada{
  position:relative; max-height:92px; overflow:hidden;
}
.internal-notes.plegada::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:38px;
  background: linear-gradient(to bottom, transparent, var(--surface-2));
  pointer-events:none;
}
.notes-toggle{
  margin-top:6px; padding:5px 11px; cursor:pointer;
  font-family: var(--font-ui); font-size:.73rem; font-weight:800;
  color: var(--accent); background: transparent;
  border:1px solid var(--border); border-radius:8px;
}
.notes-toggle:hover{ border-color: var(--accent); }

/* "Falta hacer la transferencia": una ubicación puesta a mano que Odoo todavía no tiene. Va en
   ámbar y no en rojo — no es un error de nadie, es un pendiente. */
.ubic-pendiente{
  margin-top:10px; padding:11px 13px;
  border:2px solid color-mix(in srgb, var(--warn) 55%, var(--border));
  border-left-width:5px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 9%, var(--surface-2));
}
.ubic-pendiente-cab{
  font-size:.78rem; font-weight:800; color: var(--warn);
  display:flex; align-items:center; gap:6px;
}
.ubic-pendiente-texto{ margin-top:5px; font-size:.8rem; line-height:1.5; color: var(--text); }
.ubic-pendiente-texto b{ font-family: var(--font-code); color: var(--warn); }
.ubic-pendiente-pie{ margin-top:6px; font-size:.72rem; color: var(--text-dim); }

/* El lapiz para corregir la unidad de medida, en la esquina del recuadro del total. Discreto:
   no es algo que se use a diario, pero tiene que estar donde a alguien se le ocurre que la
   unidad esta mal, que es leyendola. */
.total-piezas-card{ position:relative; }
.uom-lapiz{
  position:absolute; top:6px; right:6px; z-index:2;
  width:24px; height:24px; padding:0; cursor:pointer; line-height:1; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
  color: var(--text-dim); background: var(--surface);
  border:1px solid var(--border); border-radius: var(--radius);
}
.uom-lapiz:hover{ color: var(--accent); border-color: var(--accent); }
/* Cuando la unidad no es la de Odoo se dice, para que nadie crea que Odoo ya la tiene bien. */
.uom-aviso{
  margin-top:6px; font-size:.68rem; font-weight:700; color: var(--warn); line-height:1.35;
}

/* "¿Ya llegó todo?": la respuesta de la O.C. completa, antes del detalle de cada albarán. */
.oc-recepcion{
  display:flex; align-items:flex-start; gap:10px;
  margin:0 0 12px; padding:11px 14px;
  border:2px solid var(--border); border-left-width:5px; border-radius: var(--radius);
  font-size:.84rem; line-height:1.5; color: var(--text);
}
.oc-recepcion-icono{ font-size:1.1rem; line-height:1.2; flex:none; }
.oc-recepcion.completa{
  border-color: color-mix(in srgb, var(--accent4) 55%, var(--border));
  background: color-mix(in srgb, var(--accent4) 10%, var(--surface-2));
}
.oc-recepcion.completa b{ color: var(--accent4); }
.oc-recepcion.parcial{
  border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
  background: color-mix(in srgb, var(--warn) 9%, var(--surface-2));
}
.oc-recepcion.parcial b{ color: var(--warn); }
.oc-chip-falta{ color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.oc-chip-ok{ color: var(--accent4); border-color: color-mix(in srgb, var(--accent4) 45%, var(--border)); }

/* Los albaranes de una O.C., en tarjetas. Una tabla de cinco columnas en un teléfono se lee a
   pedazos, y lo que de verdad importa — el número, si ya llegó y quién lo recibió — se perdía
   entre dos fechas. Son botones de verdad: se tocan para ver lo que traen. */
.oc-albs{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:10px; margin-bottom:18px;
}
.oc-alb{
  display:flex; flex-direction:column; gap:7px; width:100%;
  padding:12px 14px; cursor:pointer; text-align:left;
  background: var(--surface-2); border:2px solid var(--border);
  border-left:5px solid var(--accent2, #b6dd4f); border-radius: var(--radius);
  font-family: var(--font-ui); color: var(--text);
  transition: border-color .12s, transform .1s var(--ease);
}
.oc-alb:hover{ border-color: var(--accent2, #b6dd4f); transform: translate(-1px,-1px); }
.oc-alb.active-row{
  border-color: var(--accent2, #b6dd4f);
  background: color-mix(in srgb, var(--accent2, #b6dd4f) 12%, var(--surface-2));
}
.oc-alb-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.oc-alb-num{ font-family: var(--font-code); font-size:.9rem; font-weight:800; letter-spacing:.3px; }
.oc-alb-fechas{ display:flex; flex-direction:column; gap:2px; font-size:.73rem; color: var(--text-dim); }
.oc-alb-fechas b{ color: var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.4px; font-size:.66rem; }
.oc-alb-hecho{ color: var(--accent4); }
.oc-alb-hecho b{ color: var(--accent4); }
.oc-alb-pend b{ color: var(--warn); }
.oc-alb-user{ font-size:.75rem; }
.oc-alb-ver{
  margin-top:2px; font-size:.68rem; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; color: var(--accent2, #b6dd4f);
}
.oc-alb.active-row .oc-alb-ver::after{ content:' (abierto)'; }

/* Encabezado de una Orden de Compra. Pariente del de la M.O. — misma familia, para que la app
   se sienta una sola — pero destaca otra cosa: en una M.O. el número grande son las piezas a
   producir; aquí es el DINERO, que es lo que define una compra. Y el borde es var(--accent2),
   el color que en A.L.B.A. significa "total", no el de las M.O. */
.oc-head{
  position:relative;
  margin:0 0 18px; padding:18px 20px 16px;
  background: var(--surface-2);
  border:2px solid var(--border); border-radius: var(--radius-lg);
  border-left:6px solid var(--accent2, #b6dd4f);
  box-shadow: var(--shadow-sm);
}
.oc-head-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.oc-title-wrap{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.oc-eyebrow{
  font-size:.68rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color: var(--accent2, #b6dd4f);
}
.oc-numero{
  margin:0; font-size:1.45rem; font-weight:900; line-height:1.1; color: var(--text);
  font-family:var(--font-code); letter-spacing:.5px; word-break:break-all;
}
.oc-total{
  flex:none; text-align:center; padding:10px 18px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent2, #b6dd4f) 14%, var(--surface));
  border:2px solid var(--accent2, #b6dd4f);
}
.oc-total-num{
  font-size:1.7rem; font-weight:900; line-height:1; color: var(--accent2, #b6dd4f);
  font-family:var(--font-code);
}
.oc-total-lbl{
  margin-top:3px; font-size:.62rem; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color: var(--text-dim);
}

/* "Se le compra a": el proveedor es a quien hay que marcarle si algo no llegó. */
.oc-prov{
  margin-top:14px; padding:12px 14px;
  display:flex; flex-direction:column; gap:6px;
  background: var(--surface); border:2px dashed var(--border); border-radius: var(--radius);
}
.oc-prov-label{
  font-size:.64rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color: var(--text-dim);
}
.oc-prov-name{ font-size:1rem; font-weight:800; color: var(--text); line-height:1.3; }
.oc-prov-buyer{ font-size:.78rem; color: var(--text-dim); }
.oc-prov-buyer b{ color: var(--text); }

.oc-meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.oc-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:8px;
  font-size:.74rem; font-weight:700; color: var(--text-dim);
  background: var(--surface); border:1px solid var(--border);
}

.oc-acciones{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.oc-acciones .btn{ flex:1 1 auto; justify-content:center; }
.oc-btn-kardex{ background: var(--accent4); border-color: var(--accent4); color:#12210a; }
@media (max-width:680px){
  .oc-acciones{ flex-direction:column; }
  .oc-total{ width:100%; }
}

.mo-head{
  position:relative;
  margin:0 0 18px; padding:18px 20px 16px;
  background: var(--surface-2);
  border:2px solid var(--border); border-radius: var(--radius-lg);
  border-left:6px solid var(--accent4, #a3d139);
  box-shadow: var(--shadow-sm);
}
.mo-head-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.mo-title-wrap{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.mo-eyebrow{
  font-size:.68rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color: var(--accent4, #a3d139);
}
.mo-numero{
  margin:0; font-size:1.45rem; font-weight:900; line-height:1.1; color: var(--text);
  font-family:var(--font-code); letter-spacing:.5px;
  word-break:break-all;
}
.mo-qty{
  flex:none; text-align:center; padding:10px 18px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent4, #a3d139) 14%, var(--surface));
  border:2px solid var(--accent4, #a3d139);
}
.mo-qty-num{
  font-size:1.9rem; font-weight:900; line-height:1; color: var(--accent4, #a3d139);
  font-family:var(--font-code);
}
.mo-qty-lbl{
  margin-top:3px; font-size:.62rem; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color: var(--text-dim);
}

/* Bloque "Se produce": el destino de todo lo que se surte en esta orden. */
.mo-target{
  margin-top:14px; padding:12px 14px;
  display:flex; flex-direction:column; gap:6px;
  background: var(--surface); border:2px dashed var(--border); border-radius: var(--radius);
}
.mo-target-label{
  font-size:.64rem; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color: var(--text-dim);
}
.mo-target-code{
  align-self:flex-start;
  font-family:var(--font-code);
  font-size:1rem; font-weight:800; letter-spacing:.3px; color: var(--accent4, #a3d139);
  word-break:break-all; cursor:pointer;
  padding:3px 7px; border-radius:5px; transition: background .15s, color .15s;
}
.mo-target-code:hover{ background: color-mix(in srgb, var(--accent4, #a3d139) 18%, transparent); }
.mo-target-code.copied{ background: var(--accent4, #a3d139); color:#12210a; }
.mo-target-name{
  font-size:.9rem; line-height:1.5; color: var(--text-dim);
  cursor:pointer; padding:2px 5px; border-radius:5px; transition: background .15s, color .15s;
}
.mo-target-name:hover{ background: rgba(255,255,255,.05); color: var(--text); }
.mo-target-name.copied{ background: var(--accent4, #a3d139); color:#12210a; }

.mo-meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.mo-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius: var(--radius);
  background: var(--surface); border:2px solid var(--border); color: var(--text-dim);
  font-size:.78rem; font-weight:700;
}
.mo-chip-user{ color: var(--text); }

@media (max-width:680px){
  .mo-head{ padding:14px 15px; }
  .mo-numero{ font-size:1.15rem; }
  .mo-qty{ padding:8px 14px; }
  .mo-qty-num{ font-size:1.5rem; }
  .mo-head-top{ gap:10px; }
}

/* ---- Pantalla de acceso: crear cuenta / restablecer contrasena ---- */
.login-links{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:2px solid var(--border);
}
.login-link-btn{
  background:none; border:none; padding:2px 4px; cursor:pointer;
  font-family:inherit; font-size:.78rem; font-weight:700; color: var(--text-dim);
  transition: color .15s;
}
.login-link-btn:hover{ color: var(--accent); text-decoration:underline; }
.login-links-sep{ color: var(--border); font-weight:900; }

/* ---- Cuentas pendientes por aprobar (Gestor de Cuentas) ---- */
.pending-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pending-title{
  font-size:.86rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  color:#e0a800;
}
.pending-count{
  padding:3px 10px; border-radius:8px;
  background: color-mix(in srgb, #e0a800 18%, var(--surface-2));
  border:2px solid #e0a800; color:#e0a800;
  font-size:.7rem; font-weight:900;
}
.pending-sub{ margin:6px 0 10px; font-size:.8rem; color: var(--text-dim); line-height:1.5; }
.pending-row{ border-color:#e0a800 !important; }
.pending-meta{ font-size:.74rem; color: var(--text-dim); margin-top:3px; }
.pending-note{
  margin-top:6px; padding:6px 10px; font-size:.78rem; line-height:1.45;
  background: var(--surface-2); border-left:3px solid #e0a800; color: var(--text-dim);
}
.pending-approve{ font-size:.76rem; padding:6px 12px; border-color:#e0a800; color:#e0a800; }
.pending-approve:hover{ border-color:#fff; }

/* Globito ambar: solicitudes de cuenta esperando aprobacion (distinto del rojo de los codigos
   compartidos, que es un mensaje de otra persona). */
.drawer-item-badge-warn{ background:#e0a800 !important; color:#12210a !important; }

/* ---- Botones alternos de la pantalla de acceso ----
   Mismo peso y forma que "Entrar" (ancho completo, centrados) pero cada uno con su color, para
   que se lean como acciones de verdad y no como letra chica: morado para pedir una cuenta,
   ambar para recuperar el acceso. El verde se queda reservado para entrar. */
.login-links{
  display:flex; flex-direction:column; gap:9px;
  margin-top:14px; padding-top:14px; border-top:2px solid var(--border);
}
.login-alt-btn{
  width:100%; justify-content:center;
  padding:12px 16px; font-size:.84rem; font-weight:800;
  border-radius: var(--radius); border-width:2px;
}
.login-alt-create{
  background: color-mix(in srgb, #7c5cff 20%, var(--surface-2));
  border-color:#7c5cff; color:#c3b5ff;
}
.login-alt-create:hover:not(:disabled){ background:#7c5cff; color:#fff; border-color:#fff; }
.login-alt-reset{
  background: color-mix(in srgb, #e0a800 16%, var(--surface-2));
  border-color:#e0a800; color:#e8c351;
}
.login-alt-reset:hover:not(:disabled){ background:#e0a800; color:#12210a; border-color:#fff; }

/* ---- Tour de creacion de cuenta (un paso a la vez) ---- */
.wz-modal{ max-width:min(94vw, 460px); gap:14px; }
.wz-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wz-step{
  font-size:.68rem; font-weight:900; letter-spacing:1px; text-transform:uppercase;
  color:#7c5cff;
}
.wz-dots{ display:flex; gap:6px; }
.wz-dot{
  flex:1; height:5px; border-radius:3px; background: var(--border);
  transition: background .2s;
}
.wz-dot.done{ background:#7c5cff; }
.wz-dot.active{ background: color-mix(in srgb, #7c5cff 55%, var(--border)); }
.wz-title{
  margin:0; border:none; padding:0;
  font-size:1.1rem; font-weight:900; color: var(--text); text-transform:none; letter-spacing:0;
}
.wz-help{ margin:0; font-size:.84rem; line-height:1.55; color: var(--text-dim); }
.wz-preview{ margin-top:7px; font-size:.78rem; color: var(--text-dim); line-height:1.4; }
.wz-preview strong{
  color:#7c5cff; font-family:var(--font-code); word-break:break-all;
}
.wz-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
.wz-actions-center{ justify-content:center; }
.wz-next{
  background:#7c5cff !important; border-color:#7c5cff !important; color:#fff !important;
  padding:11px 20px; font-weight:800;
}
.wz-next:hover:not(:disabled){ border-color:#fff !important; }
.wz-back{ padding:11px 16px; }

.wz-resumen{
  display:flex; flex-direction:column; gap:1px;
  background: var(--border); border:2px solid var(--border); border-radius: var(--radius);
  overflow:hidden;
}
.wz-res-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 12px; background: var(--surface-2); font-size:.84rem;
}
.wz-res-row span{ color: var(--text-dim); font-weight:700; }
.wz-res-row strong{ color: var(--text); text-align:right; word-break:break-all; }
.wz-aviso{
  padding:10px 12px; font-size:.8rem; line-height:1.5;
  background: rgba(224,168,0,.10); border:2px solid #e0a800; border-radius: var(--radius);
  color: var(--text-dim);
}
.wz-roles{ display:flex; flex-direction:column; gap:10px; }
.wz-rol{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  padding:12px 14px; border-radius: var(--radius); cursor:pointer;
  background: var(--surface-2); border:2px solid var(--border); color: var(--text);
}
.wz-rol:hover{ border-color: color-mix(in srgb, #7c5cff 55%, var(--border)); }
.wz-rol.sel{ border-color:#7c5cff; background: color-mix(in srgb, #7c5cff 14%, var(--surface-2)); }
.wz-rol-ico{ font-size:1.7rem; line-height:1; }
.wz-rol-txt{ display:flex; flex-direction:column; gap:3px; }
.wz-rol-txt b{ font-size:.98rem; }
.wz-rol-txt small{ font-size:.78rem; color: var(--text-dim); line-height:1.4; }
.wz-done{ text-align:center; }
.wz-done-icon{ font-size:2.6rem; line-height:1; }

/* Documento ya definido en el modal del Kardex (el caso de una MO): se muestra el numero en vez
   de un campo vacio de O.C., que ahi no aplica. */
.ko-doc-fijo{
  padding:11px 13px; border-radius: var(--radius);
  background: var(--surface-2); border:2px dashed var(--border);
  font-size:.88rem; color: var(--text-dim);
}
.ko-doc-fijo strong{
  color: var(--accent4, #b6dd4f);
  font-family:var(--font-code); letter-spacing:.3px;
}

/* El menu lateral no existe mientras no hay sesion: vive fuera de .wrap (que es lo que se
   esconde en la pantalla de acceso), asi que se asoma el disparador y hasta el panel completo
   si alguien lo desliza. Aqui se apaga entero hasta que se inicia sesion. */
body.login-active .drawer-handle,
body.login-active .mobile-drawer,
body.login-active .drawer-backdrop,
body.login-active .scroll-top-fab,
body.login-active .surtido-fab{
  display:none !important;
}

/* ---- Tarjeta del creador, bajo el acceso (reemplaza "Potenciado Por Odoo") ---- */
.login-creator{
  display:flex; align-items:center; gap:11px;
  margin:16px auto 0; padding:10px 14px; width:fit-content; max-width:100%;
  background: var(--surface-2); border:2px solid var(--border); border-radius: var(--radius);
}
.login-creator-avatar{
  width:42px; height:42px; border-radius:50%; overflow:hidden; flex:none;
  border:2px solid #ff5f5f; background: var(--surface);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.login-creator-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.login-creator-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.login-creator-label{
  font-size:.62rem; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color: var(--text-dim);
}
.login-creator-name{ font-size:.92rem; font-weight:900; color: var(--text); }

/* Palabra "Menú" en la pestaña del borde, escrita de arriba hacia abajo. */
.drawer-handle-text{
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size:.62rem; font-weight:900; letter-spacing:1.5px; text-transform:uppercase;
  line-height:1; user-select:none;
}
/* Con solicitudes sin ver la pestaña crece: el numero ocupa la parte de arriba, asi que el
   texto y la flecha se recorren para no encimarse. */
.drawer-handle.has-alerts{ padding-top:20px; }

/* ---- "Mi cuenta" ---- */
.ma-fijo{
  padding:11px 13px; border-radius: var(--radius);
  background: var(--surface-2); border:2px dashed var(--border);
  font-size:.9rem; font-weight:800; color: var(--text);
}
.ma-fijo span{ font-weight:600; font-size:.76rem; color: var(--text-dim); }
.ma-preview{ margin-top:6px; font-size:.78rem; color: var(--text-dim); }
.ma-preview strong{
  color: var(--accent); font-family:var(--font-code);
  word-break:break-all;
}
/* La contrasena actual va separada: es lo que confirma el cambio, no un dato mas del formulario. */
.ma-confirm{
  padding-top:12px; border-top:2px solid var(--border);
}

/* Foto de perfil dentro de "Mi cuenta". */
.ma-foto-row{
  display:flex; align-items:center; gap:14px;
  padding-bottom:14px; border-bottom:2px solid var(--border);
}
.ma-foto{
  width:64px; height:64px; border-radius:50%; overflow:hidden; flex:none;
  border:2px solid var(--accent); background: var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
}
.ma-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.ma-foto-acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.ma-foto-acciones .btn{ font-size:.76rem; padding:7px 11px; }
.ma-foto-hint{ flex-basis:100%; font-size:.72rem; color: var(--text-dim); }

/* ---- Modo "reordenar el menu" ---- */
.drawer-item-reorder{
  cursor:default; border-style:dashed;
}
.drawer-item-reorder .dr-label{ flex:1; text-align:left; min-width:0; }
.dr-arrows{ display:flex; gap:5px; flex:none; }
.dr-arrow{
  width:30px; height:30px; padding:0; cursor:pointer; line-height:1;
  background: var(--surface); border:2px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size:.72rem; font-weight:900;
}
.dr-arrow:hover:not(:disabled){ border-color: var(--accent); color: var(--accent); }
.dr-arrow:disabled{ opacity:.3; cursor:not-allowed; }
.drawer-reorder-done{
  margin-top:10px; border-color: var(--accent) !important; color: var(--accent) !important;
}
.drawer-reorder-reset{ border-style:dashed; font-size:.84rem; }

/* ---- Reordenar arrastrando (PC) ---- */
.dr-draggable{ cursor:grab; position:relative; }
.dr-draggable:active{ cursor:grabbing; }
.dr-grip{
  flex:none; color: var(--text-dim); font-size:1rem; line-height:1;
  letter-spacing:-2px; user-select:none;
}
.dr-draggable:hover .dr-grip{ color: var(--accent); }
/* El renglon que se esta moviendo se atenua: se ve que "salio" de la lista. */
.dr-dragging{ opacity:.4; border-style:solid; border-color: var(--accent); }
/* Linea que marca donde va a caer. */
.dr-over-top::before,
.dr-over-bottom::after{
  content:''; position:absolute; left:0; right:0; height:3px;
  background: var(--accent); border-radius:2px;
}
.dr-over-top::before{ top:-3px; }
.dr-over-bottom::after{ bottom:-3px; }
.dr-hint{
  margin-top:8px; font-size:.74rem; color: var(--text-dim); text-align:center; line-height:1.4;
}

/* La tarjeta del total copia el codigo con todas sus ubicaciones: se comporta como las demas
   cosas copiables de la ficha (realce al pasar encima y parpadeo al copiar). */
.total-piezas-copy{ cursor:pointer; transition: border-color .12s, transform .1s var(--ease), box-shadow .1s var(--ease); }
.total-piezas-copy:hover{
  border-color: var(--text);
  transform: translate(-1px,-1px); box-shadow: var(--shadow-md);
}
.total-piezas-copy.copied{
  background: var(--accent2) !important; border-color: var(--text) !important;
}
.total-piezas-copy.copied .total-piezas-label,
.total-piezas-copy.copied .total-piezas-value,
.total-piezas-copy.copied .total-piezas-unit,
.total-piezas-copy.copied .total-piezas-copy-hint{ color:#2a1400 !important; }
/* La pista de copiar se lee como un boton chico: siempre visible (tambien en celular, que no
   tiene hover) y resaltada al pasar por encima. Antes solo aparecia con el mouse, asi que en
   telefono nadie se enteraba de que la tarjeta se podia tocar. */
.total-piezas-copy-hint{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius: var(--radius);
  background: var(--surface-2); border:2px solid var(--border);
  font-size:.72rem; font-weight:800; color: var(--text-dim);
  white-space:nowrap; transition: border-color .12s, color .12s, background .12s;
}
.total-piezas-copy:hover .total-piezas-copy-hint{
  border-color: var(--accent2); color: var(--accent2);
  background: var(--surface);
}
@media (max-width:680px){
  /* En pantallas angostas la pista baja a su propio renglon en vez de exprimir el numero. */
  .total-piezas-card{ flex-wrap:wrap; gap:10px 14px; padding:14px 16px; }
  .total-piezas-copy-hint{ margin-left:0; flex-basis:100%; justify-content:center; font-size:.7rem; }
}

/* ---- Pantalla de inicio (atajos + ultimas busquedas) ---- */
/* El margen de arriba separa el Panel De Control del buscador: pegados, el titulo parecia parte
   de la caja de busqueda en vez del encabezado de lo de abajo. */
.home-panel{ margin:26px 0 20px; display:flex; flex-direction:column; gap:22px; }

.home-section-title{
  font-size:.74rem; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
  color: var(--text-dim); margin-bottom:9px;
}

.home-empty{
  padding:26px 20px; text-align:center; line-height:1.6;
  font-size:.88rem; color: var(--text-dim);
  background: var(--surface); border:2px dashed var(--border); border-radius: var(--radius-lg);
}

@media (max-width:680px){
  .home-recent-code{ max-width:200px; }
}

/* ---- Avisos del inicio ----
   Solo se pintan cuando hay algo que atender, asi que cuando aparecen se notan. No repiten el
   menu: dicen QUE pasa y llevan directo a resolverlo. */
.home-avisos{ display:flex; flex-direction:column; gap:10px; }
.home-aviso{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:14px 16px; cursor:pointer; font-family:inherit; font-size:.9rem;
  background: color-mix(in srgb, var(--tile, var(--accent)) 10%, var(--surface));
  color: var(--text);
  border:2px solid var(--tile, var(--accent)); border-radius: var(--radius-lg);
  transition: transform .1s var(--ease), box-shadow .1s var(--ease);
}
.home-aviso:hover{ transform: translate(-2px,-2px); box-shadow: var(--shadow-md); }
.home-aviso:active{ transform: translate(1px,1px); box-shadow:none; }
.home-aviso-icon{ flex:none; font-size:1.4rem; line-height:1; }
.home-aviso-text{ flex:1; min-width:0; line-height:1.45; }
.home-aviso-text strong{ color: var(--tile, var(--accent)); }
.home-aviso-go{ flex:none; font-size:1.1rem; font-weight:900; color: var(--tile, var(--accent)); }


/* ---- Tarjetas del inicio ----
   Son las mismas entradas del menu lateral, que en esta pantalla no se muestra: aqui son el
   menu. Mas compactas que los avisos porque son muchas y se reconocen por el icono. */
.home-tiles{
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.home-tile{
  position:relative; display:flex; align-items:center; gap:11px; text-align:left;
  padding:14px 15px; cursor:pointer; font-family:inherit;
  background: var(--surface); color: var(--text);
  border:2px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .1s var(--ease), box-shadow .1s var(--ease), border-color .12s;
}
.home-tile:hover{
  border-color: var(--accent);
  transform: translate(-2px,-2px); box-shadow: var(--shadow-md);
}
.home-tile:active{ transform: translate(1px,1px); box-shadow:none; }
.home-tile-icon{
  flex:none; width:38px; height:38px; border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  background: var(--surface-2); border:2px solid var(--border);
}
.home-tile-title{ font-size:.86rem; font-weight:800; line-height:1.3; min-width:0; }
.home-tile-badge{
  position:absolute; top:-7px; right:-7px;
  min-width:22px; height:22px; padding:0 7px; border-radius:11px;
  background: var(--accent3, #e0533d); color:#fff;
  font-size:.7rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg);
}
.home-tile-badge-warn{ background:#e0a800; color:#12210a; }
.home-tile-danger{ border-color:#a33; }
.home-tile-danger .home-tile-title{ color:#ff8a8a; }
.home-tile-danger:hover{ border-color:#ff8a8a; }

/* (Antes la pestaña del menu lateral se escondia en el inicio, porque las tarjetas repetian el
   menu. Ya no: en celular cada boton vive en el menu O en el panel —ver el intercambio en
   wireMobileDrawer—, asi que el menu hace falta tambien aqui.) */

@media (max-width:680px){
  .home-tiles{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
  .home-tile{ padding:11px 12px; gap:9px; }
  .home-tile-icon{ width:32px; height:32px; font-size:1rem; }
  .home-tile-title{ font-size:.78rem; }
}

/* ---- Banner de A.L.B.A (pantalla de inicio) ----
   Mismo lenguaje que el resto: borde duro, sombra solida y la franja de cuatro colores que ya
   cruza el header. El nombre es un acronimo, asi que el banner lo explica con la inicial de
   cada palabra en el color de su franja. */
.alba-banner{
  position:relative; overflow:hidden;
  border:2px solid var(--border); border-radius: var(--radius-lg);
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
  background-size: 26px 26px, 26px 26px, auto;
  box-shadow: var(--shadow-sm);
}
.alba-banner-bar{
  height:6px;
  background: repeating-linear-gradient(90deg,
    var(--accent) 0 25%, var(--accent2) 25% 50%, var(--accent3) 50% 75%, var(--accent4) 75% 100%);
}
.alba-banner-body{
  padding: clamp(18px, 3.4vw, 30px) clamp(16px, 3vw, 28px);
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
}
.alba-banner-mark{ display:flex; align-items:center; gap:clamp(9px, 1.6vw, 15px); }
.alba-banner-diamond{
  color: var(--accent); font-size: clamp(1.1rem, 2.4vw, 1.7rem); line-height:1;
  transform: rotate(0deg);
}
.alba-banner-name{
  font-size: clamp(1.9rem, 6.5vw, 3.2rem); font-weight:900; line-height:1;
  letter-spacing:.07em; color: var(--text);
  /* La sombra solida en el acento es la firma del wordmark, igual que en la pantalla de acceso. */
  text-shadow: 3px 3px 0 var(--accent);
}
.alba-banner-words{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px 10px; margin-top:2px;
  font-size: clamp(.68rem, 1.5vw, .82rem); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color: var(--text-dim);
}
.alba-banner-word{ white-space:nowrap; }
.abw-ini{ font-weight:900; font-size:1.15em; }
.alba-banner-dot{ color: var(--border); font-weight:900; }
.alba-banner-foot{
  margin-top:4px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  /* En blanco y a plena vista: es lo que dice QUE es esto, y en gris al 75% se perdia contra
     el fondo del banner. */
  color: var(--text); opacity:1;
}

@media (max-width:680px){
  .alba-banner-body{ gap:8px; }
  /* En pantallas angostas las cuatro palabras se apilan en dos renglones sin los separadores,
     que ahi solo estorban. */
  .alba-banner-dot{ display:none; }
  .alba-banner-words{ gap:4px 12px; }
  .alba-banner-foot{ font-size:.62rem; }
}

/* ---------- Animación del banner ---------- */
/* OJO: nada de esto cuelga de .alba-banner-body ni de sus hijos en general. El buscador NO es
   suyo de nacimiento — pintarBanner() lo MUEVE ahí dentro con appendChild (ver #mainSearch),
   así que una regla sobre los hijos del cuerpo se lo llevaría entre las patas. Se nombra una
   por una cada pieza de la identidad: la franja, el wordmark, las palabras y el pie.

   El rombo tampoco: es el semáforo de la conexión con Odoo y ya usa su propia animación para
   parpadear en naranja y rojo (ver .alba-banner-diamond.status-*). Ponerle otra aquí le
   ganaría a esa, que es información, no adorno. */

/* La franja corre despacio de un color al siguiente: es lo que mantiene vivo al banner sin
   pedir atención. El fondo al doble de ancho es lo que le da a dónde desplazarse — a tamaño
   normal no habría recorrido, y moverlo un tile completo hace que el ciclo cierre sin salto. */
.alba-banner-bar{
  background-size: 200% 100%;
  animation: albaBannerFranja 18s linear infinite;
}
@keyframes albaBannerFranja{
  from{ background-position: 0 0; }
  to{ background-position: 200% 0; }
}

/* El banner arranca siendo solo el wordmark: el significado no esta, y se ESCRIBE solo
   enseguida, palabra por palabra. Escrito ya, se queda con su barrido de siempre.

   Cada palabra se revela con clip-path de derecha a izquierda y en "steps" — un paso por
   letra, de ahi que cada una tenga los suyos ("Almacenamiento" son 14 y "Agilidad" 8). Se
   escogio clip-path sobre el truco clasico de animar el ancho porque ese exige una sola linea
   (white-space:nowrap sobre TODO el renglon), y en celular las cuatro palabras se acomodan en
   dos lineas. Cada palabra ya es nowrap por su cuenta, asi que revelarlas de una en una
   funciona igual con una linea que con dos. */
@keyframes albaBannerEntra{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes albaBannerEscribe{
  from{ clip-path: inset(0 100% 0 0); }
  to{ clip-path: inset(0 0 0 0); }
}

.alba-banner-mark,
.alba-banner-foot{
  animation: albaBannerEntra .5s cubic-bezier(.2,.8,.2,1) both;
}
.alba-banner-mark{ animation-delay:.04s; }
/* El pie entra al final, ya escrito el significado: antes salia antes que las palabras que
   tiene encima, y se leia al reves. */
.alba-banner-foot{ animation-delay:3.35s; }

/* Los separadores aparecen entre palabra y palabra, cada uno cuando le toca — un "·" antes de
   la palabra que separa no separa nada. */
.alba-banner-dot{ animation: albaBannerEntra .25s ease both; }
.alba-banner-words > .alba-banner-dot:nth-child(2){ animation-delay:1.15s; }
.alba-banner-words > .alba-banner-dot:nth-child(4){ animation-delay:1.90s; }
.alba-banner-words > .alba-banner-dot:nth-child(6){ animation-delay:2.45s; }

/* Las palabras llevan DOS animaciones: escribirse (una vez) y encenderse (infinita), asi que
   nombre, duracion, ritmo, relleno, repeticiones y retraso van en listas de dos.
   El clip-path de arranque las deja ocultas hasta su turno; el relleno "both" de la primera es
   lo que las deja escritas despues. */
.alba-banner-words > .alba-banner-word{
  clip-path: inset(0 100% 0 0);
  animation-name: albaBannerEscribe, albaBannerPalabra;
  animation-fill-mode: both, none;
  animation-iteration-count: 1, infinite;
  animation-duration: .4s, 20s;
  animation-timing-function: steps(8), ease-in-out;
}
/* Agilidad: 8 letras. */
.alba-banner-words > .alba-banner-word:nth-child(1){
  animation-duration:.40s, 20s; animation-timing-function: steps(8), ease-in-out;
  animation-delay:.70s, 3.5s;
}
/* Localizacion: 12. */
.alba-banner-words > .alba-banner-word:nth-child(3){
  animation-duration:.60s, 20s; animation-timing-function: steps(12), ease-in-out;
  animation-delay:1.25s, 8.5s;
}
/* Busqueda: 8. */
.alba-banner-words > .alba-banner-word:nth-child(5){
  animation-duration:.40s, 20s; animation-timing-function: steps(8), ease-in-out;
  animation-delay:2.00s, 13.5s;
}
/* Almacenamiento: 14. */
.alba-banner-words > .alba-banner-word:nth-child(7){
  animation-duration:.70s, 20s; animation-timing-function: steps(14), ease-in-out;
  animation-delay:2.55s, 18.5s;
}

/* El barrido empieza en 3.5s, cuando el significado acaba de escribirse, y de ahi cada palabra
   cinco segundos despues de la anterior. La sombra del wordmark lleva el MISMO retraso para
   que sigan coincidiendo: turquesa con "Agilidad", naranja con "Localizacion", y asi.
   La ventana encendida (6s) es mas ancha que la separacion entre palabras (5s), asi siempre
   hay una entrando y otra saliendo: se lee como un barrido, no como cuatro parpadeos sueltos. */
@keyframes albaBannerPalabra{
  0%{ color: var(--text); }
  15%, 85%{ color: var(--text-dim); }
  100%{ color: var(--text); }
}

/* La inicial ya trae su color de marca puesto en el HTML, asi que el halo se pinta con
   currentColor: cada una brilla de su propio color sin repetirlos aqui. */
.abw-ini{ animation: albaBannerInicial 20s ease-in-out infinite; }
.alba-banner-word:nth-child(1) .abw-ini{ animation-delay:3.5s; }
.alba-banner-word:nth-child(3) .abw-ini{ animation-delay:8.5s; }
.alba-banner-word:nth-child(5) .abw-ini{ animation-delay:13.5s; }
.alba-banner-word:nth-child(7) .abw-ini{ animation-delay:18.5s; }
@keyframes albaBannerInicial{
  0%{ text-shadow: 0 0 12px currentColor; }
  15%, 85%{ text-shadow: 0 0 0 transparent; }
  100%{ text-shadow: 0 0 12px currentColor; }
}

/* La sombra sólida del wordmark va pasando por los cuatro colores de la marca, los mismos de
   las cuatro palabras de abajo. Muy lento a propósito: es ambiente, no un efecto. */
.alba-banner-name{ animation: albaBannerFirma 20s ease-in-out 3.5s infinite; }
@keyframes albaBannerFirma{
  0%, 100%{ text-shadow: 3px 3px 0 var(--accent); }
  25%{ text-shadow: 3px 3px 0 var(--accent2); }
  50%{ text-shadow: 3px 3px 0 var(--accent3); }
  75%{ text-shadow: 3px 3px 0 var(--accent4); }
}

/* Quien pidió menos animación en su sistema se queda con el banner quieto y completo: las
   entradas llevan fill-mode "both", así que sin esto se quedarían congeladas en opacity:0. */
@media (prefers-reduced-motion: reduce){
  .alba-banner-bar,
  .alba-banner-mark,
  .alba-banner-words > span,
  .alba-banner-foot,
  .alba-banner-name,
  .alba-banner-dot,
  .abw-ini{
    animation:none !important;
    opacity:1; transform:none;
  }
  /* El selector va COMPLETO (.alba-banner-words > .alba-banner-word) y no basta con el de
     arriba: la regla que oculta la palabra para escribirla tiene esa misma especificidad, y
     con un selector mas flojo ganaba ella. Sin esto, quien pide menos movimiento se quedaba
     sin significado: el clip-path de arranque no se quitaba nunca y las cuatro palabras
     permanecian invisibles. */
  .alba-banner-words > .alba-banner-word{
    animation:none !important;
    opacity:1; transform:none;
    clip-path:none;
  }
}

/* ---------- Emblema circular: el planeta y su órbita ----------
   En la esquina, no al centro: el monograma de A.L.B.A dentro del planeta y el significado
   girando alrededor como su órbita (ver albaEmblemaSvg). Todo con las variables del tema, así
   que cada tema lo repinta sin tocar nada aquí. */
.alba-banner-top{
  display:flex; align-items:center; gap: clamp(12px, 2.4vw, 22px);
  width:100%; max-width:900px; align-self:center;
}
/* Solo el emblema, sin el nombre escrito: el buscador se sube a su lado. El renglon va de
   orilla a orilla y con poco margen a la izquierda, para que el emblema quede pegado a la
   esquina del recuadro (pedido de Manuel) y no flotando hacia el centro. */
#albaBannerSlot .alba-banner-top{ max-width:none; }
#albaBannerSlot .alba-banner-body{ padding-left:10px; }
#albaBannerSlot .alba-banner-top .main-search{ flex:1 1 220px; min-width:0; max-width:none; margin:0; }

/* El semaforo de la conexion con Odoo vive ahora en la luna de la orbita (antes era el rombo
   junto al nombre): mismos colores, y parpadea cuando va lenta o no hay conexion. */
.alba-emblema.status-green .ae-luna{ fill: var(--accent); }
.alba-emblema.status-yellow .ae-luna{ fill:#e0c000; }
.alba-emblema.status-orange .ae-luna{ fill: var(--warn, #f7941d); animation: albaRomboAviso 1.6s ease-in-out infinite; }
.alba-emblema.status-red .ae-luna{ fill: var(--err, #e53935); animation: albaRomboAviso 1s ease-in-out infinite; }
.ae-luna{ transition: fill .3s; }
.alba-banner-ident{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; text-align:left; }
.alba-banner-ident .alba-banner-foot{ margin-top:0; }
.alba-emblema{
  flex:none; width: clamp(120px, 17vw, 168px); aspect-ratio:1;
  cursor:pointer; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 22%, transparent));
}
.ae-svg{ display:block; width:100%; height:100%; overflow:visible; }
/* La letra de la orbita solo sale donde se alcanza a leer: el emblema es su propio contenedor,
   asi que esto vale para cualquier pantalla y cualquier tamano que le toque. */
.alba-emblema{ container-type: inline-size; }
@container (max-width: 112px){
  .ae-texto{ display:none; }
  /* Sin la letra queda un hueco alrededor del planeta que lo despegaba de la orilla: se recorre
     a la izquierda y se va el anillo punteado (la luna sigue: es el semaforo de Odoo). */
  .ae-anillo{ display:none; }
  .ae-svg{ transform: translateX(-15%); }
}

.ae-pl-luz{ stop-color: color-mix(in srgb, var(--accent) 26%, var(--surface-2)); }
.ae-pl-fondo{ stop-color: var(--surface); }
.ae-planeta{ stroke: var(--accent); stroke-width:3; }
.ae-anillo{ fill:none; stroke: var(--border); stroke-width:1.2; stroke-dasharray:2 5; }
.ae-luna{ fill: var(--accent2); }

.ae-texto{
  font-family: inherit; font-size:12.5px; font-weight:800; letter-spacing:1px;
  fill: var(--text-dim);
}
.ae-ini{ font-weight:900; font-size:15px; }
.ae-c1{ fill: var(--accent); }
.ae-c2{ fill: var(--accent2); }
.ae-c3{ fill: var(--accent3); }
.ae-c4{ fill: var(--accent4); }
.ae-sep{ fill: var(--border); }

.ae-l{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ae-letra .ae-l{ stroke: var(--text); }
.ae-sombra .ae-l{ stroke: var(--accent); }

/* Siempre en movimiento, despacio: la órbita en un sentido y la luna en el otro. */
.ae-orbita, .ae-luna-giro{ transform-box: view-box; transform-origin: 50% 50%; }
.ae-orbita{ animation: aeGira 70s linear infinite; }
.ae-luna-giro{ animation: aeGira 20s linear infinite reverse; }
.ae-planeta{ animation: aeRespira 6s ease-in-out infinite; }
@keyframes aeGira{ to{ transform: rotate(360deg); } }
@keyframes aeRespira{
  0%, 100%{ stroke-width:3; }
  50%{ stroke-width:4.5; }
}

/* Al entrar (y al tocarlo): las cuatro letras se dibujan en orden —A, L, B y la última A
   cerrando la punta— y luego aparece la órbita. */
/* Despacio, como si se trazara a mano: cada trazo tarda 1.3 s y empieza cuando el anterior va
   a medias (su --d viene del JS). La sombra va un pelo detrás de la letra. */
.ae-dibuja .ae-l{
  stroke-dasharray:1; animation: aeTrazo 1.3s cubic-bezier(.45,0,.35,1) both;
  animation-delay: calc(var(--d, 0s) + .4s);
}
.ae-dibuja .ae-sombra .ae-l{ animation-delay: calc(var(--d, 0s) + .6s); }
@keyframes aeTrazo{
  from{ stroke-dashoffset:1; }
  to{ stroke-dashoffset:0; }
}
.ae-dibuja .ae-planeta{ animation: aeAparece .5s cubic-bezier(.2,.8,.2,1) both, aeRespira 6s ease-in-out 1s infinite; transform-box: view-box; transform-origin:50% 50%; }
.ae-dibuja .ae-texto, .ae-dibuja .ae-anillo, .ae-dibuja .ae-luna{ animation: aeOrbitaEntra 1.4s ease 7s both; }
@keyframes aeAparece{
  from{ transform: scale(.4); opacity:0; }
  to{ transform: scale(1); opacity:1; }
}
@keyframes aeOrbitaEntra{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* Con un resultado en pantalla el banner se encoge: el emblema queda chico y sin la letra de la
   órbita, que a ese tamaño no se leería; el anillo y la luna siguen girando. */
body:not(.en-inicio) #albaBannerSlot .alba-banner-top{ gap:12px; }
/* El tamano sigue al ancho del renglon: chico en celular y grande en un monitor (fijo en 58 px
   se perdia en la computadora). En % del renglon y NO en vw: ajuste-escala.js le pone zoom al
   <html> y los vw no lo descuentan (medido: con 8vw salia en 83 px en un monitor de 1520). */
body:not(.en-inicio) #albaBannerSlot .alba-emblema{ width: clamp(64px, 16%, 150px); }
body:not(.en-inicio) #albaBannerSlot .alba-banner-ident .alba-banner-foot{ display:none; }

/* Acceso: compite con la tarjeta de entrar, va un poco más chico. */
.login-banner-slot .alba-emblema{ width: clamp(92px, 24vw, 118px); }

@media (max-width:680px){
  /* En celular tambien en el mismo renglon que el buscador (pedido de Manuel): el emblema se
     achica lo justo para que el buscador quepa entero al lado. */
  #albaBannerSlot .alba-emblema{ width:78px; }
  #albaBannerSlot .alba-banner-top{ gap:10px; }
  #albaBannerSlot .alba-banner-top .main-search{ flex-basis:0; }
}

/* Con "reducir animaciones" (Windows con las animaciones apagadas) se detiene lo que gira sin
   parar, pero NO el trazado de entrada del logo: es un dibujo de unos segundos y es la firma de
   A.L.B.A. (pedido de Manuel: en su PC "ya no se hace el trazado"). */
@media (prefers-reduced-motion: reduce){
  .ae-orbita, .ae-luna-giro{ animation:none !important; transform:none; }
}

/* Titulo de la seccion de acciones del inicio. */
.home-title-main{
  font-size:.82rem; letter-spacing:1px; color: var(--text);
  padding-bottom:7px; border-bottom:2px solid var(--border); margin-bottom:12px;
}

/* ---- Ultimas busquedas: renglones con numero y flecha ---- */
.home-recent{ display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:9px; }
.home-recent-item{
  display:flex; align-items:center; gap:11px; width:100%; min-width:0; overflow:hidden;
  padding:11px 13px; cursor:pointer; font-family:inherit; text-align:left;
  background: var(--surface); color: var(--text);
  border:2px solid var(--border); border-radius: var(--radius);
  transition: border-color .12s, transform .1s var(--ease), box-shadow .1s var(--ease);
}
.home-recent-item:hover{
  border-color: var(--accent);
  transform: translate(-2px,-2px); box-shadow: var(--shadow-md);
}
.home-recent-item:active{ transform: translate(1px,1px); box-shadow:none; }
.home-recent-num{
  flex:none; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-2); border:1px solid var(--border);
  font-family:var(--font-code);
  font-size:.66rem; font-weight:800; color: var(--text-dim);
}
.home-recent-item:hover .home-recent-num{ border-color: var(--accent); color: var(--accent); }
.home-recent-body{ flex:1 1 auto; min-width:0; max-width:100%; display:flex; flex-direction:column; gap:3px; overflow:hidden; }
/* Los codigos son larguisimos (40+ caracteres). display:block + width:100% es lo que hace que
   el recorte funcione: en un contenedor flex, un span se estira con su contenido y se sale de
   la caja aunque tenga overflow:hidden. */
.home-recent-code{
  display:block; width:100%;
  font-family:var(--font-code);
  font-size:.8rem; font-weight:700; letter-spacing:.2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.home-recent-time{ display:flex; align-items:center; gap:4px; }
.home-recent-time{ font-size:.67rem; color: var(--text-dim); }
.home-recent-go{
  flex:none; color: var(--border); font-size:1rem; font-weight:900;
  transition: color .12s, transform .12s var(--ease);
}
.home-recent-item:hover .home-recent-go{ color: var(--accent); transform: translateX(2px); }

/* ---- Pantalla de acceso ---- */
/* "Cuenta encontrada": tarjetita bajo el usuario con el correo de la cuenta, para confirmar de
   un vistazo que es la correcta. Entra deslizandose; oculta no ocupa lugar. */
.login-email-hint{
  display:flex; align-items:center; gap:10px;
  margin-top:0; padding:0 12px; border-radius:10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 4%, transparent));
  border:1px solid transparent; border-left:3px solid var(--accent);
  opacity:0; max-height:0; overflow:hidden; transform: translateY(-4px);
  transition: opacity .22s var(--ease), max-height .22s var(--ease), transform .22s var(--ease),
              margin-top .22s var(--ease), padding .22s var(--ease), border-color .22s;
}
.login-email-hint.show{
  opacity:1; max-height:72px; transform:none; margin-top:8px; padding:8px 12px;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent); border-left-color: var(--accent);
}
.leh-icono{
  position:relative; flex:none; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  background: var(--surface-2); border:1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.leh-ok{
  position:absolute; right:-4px; bottom:-4px; width:15px; height:15px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.58rem; font-weight:900; color:#04211c; background: var(--accent);
  border:2px solid var(--surface);
}
.login-email-hint.show .leh-ok{ animation: lehOk .35s .12s var(--ease) both; }
@keyframes lehOk{ from{ transform: scale(0); } 70%{ transform: scale(1.25); } to{ transform: scale(1); } }
.leh-texto{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.leh-label{
  font-size:.6rem; font-weight:900; letter-spacing:.9px; text-transform:uppercase; color: var(--accent);
}
.leh-correo{
  font-family: var(--font-code, 'JetBrains Mono', monospace); font-size:.8rem;
  color: var(--text); overflow-wrap:anywhere; line-height:1.25;
}
.leh-correo strong{ font-weight:800; }
.leh-dominio{ color: var(--text-dim); }
@media (prefers-reduced-motion: reduce){
  .login-email-hint{ transition:none; }
  .login-email-hint.show .leh-ok{ animation:none; }
}

/* El ojo va DENTRO del campo. El input necesita width:100% explicito: al meterlo en el
   contenedor dejo de ser hijo directo del .config-field (que lo estiraba con flex), se quedo
   con su ancho por defecto y el boton terminaba flotando fuera del recuadro. */
.pass-wrap{ position:relative; display:block; width:100%; }
.pass-wrap input{
  width:100%; box-sizing:border-box;
  padding-right:48px !important;
}
.pass-eye{
  position:absolute; top:50%; right:7px; transform:translateY(-50%);
  width:34px; height:34px; padding:0; cursor:pointer; line-height:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--surface); border:2px solid var(--border);
  color: var(--text-dim);
  transition: color .15s, border-color .15s, background .15s, transform .1s var(--ease);
}
.pass-eye:hover{
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.pass-eye:active{ transform: translateY(-50%) scale(.92); }
/* Mientras la contrasena esta a la vista el boton se pinta en ambar: es un aviso de que
   cualquiera que mire la pantalla la esta viendo. */
.pass-eye.viendo{
  color:#12210a; background:#e0a800; border-color:#e0a800;
}
/* Se muestra un icono u otro segun el estado, en vez de dos botones. */
.pass-eye .pass-eye-off{ display:none; }
.pass-eye.viendo .pass-eye-open{ display:none; }
.pass-eye.viendo .pass-eye-off{ display:block; }

/* Por que se cerro la sesion, dentro de la tarjeta de acceso. Misma caja que el aviso del modo
   desarrollador (.login-root-hint) pero en rojo: no es una advertencia de lo que estas por
   hacer, es algo que ya paso. */
.login-aviso-salida{
  font-size:.78rem; font-weight:600; line-height:1.45;
  color:#ffb4b4; background:rgba(248,113,113,0.12); border:1px solid rgba(248,113,113,0.38);
  border-radius:8px; padding:9px 11px; margin:-6px 0 14px;
}
.login-aviso-salida strong{ color:#fff; }
/* Con una tarjeta propia adentro (la de horario), el contenedor se hace a un lado. */
.login-aviso-salida.aviso-sin-marco{
  background:none; border:none; padding:0; color:inherit;
}

@media (max-width:680px){
  /* Una sola columna: con dos, el codigo se recorta tanto que deja de identificarse. */
  .home-recent{ grid-template-columns:1fr; }
}

/* =========================================================================
   Capa de pulido: hovers de color, foco visible y animaciones
   -------------------------------------------------------------------------
   Va al final a propósito, para afinar lo que ya existe sin reescribirlo.
   Dos reglas que se siguen en todo el archivo:
     1) Nada se mueve más de 2px ni dura más de .18s — en una app de trabajo,
        una animación lenta se vuelve una espera.
     2) Todo respeta "reducir movimiento" (ver el bloque del final).
   ========================================================================= */

/* ---- Botones ---- */
.btn{
  transition: transform .1s var(--ease), box-shadow .1s var(--ease),
              border-color .14s, background .14s, color .14s;
}
.btn:hover:not(:disabled){ border-color: var(--accent); }
.btn:active:not(:disabled){ transform: translate(1px,1px); box-shadow:none; }
.btn-primary:hover:not(:disabled){
  filter: brightness(1.08);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* Botón de borrar historial: rojo solo al acercarse, para que no grite estando quieto. */
.home-section-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:9px;
}
.home-section-head .home-section-title{ margin-bottom:0; }

/* Historial del inicio, contraible. El titulo entero es el boton: una flechita sola es un
   blanco muy chico para el dedo, y el renglon ya estaba ahi sin hacer nada. */
/* Es una barra con borde duro, no un titulo con una flecha al lado: asi se lee como algo que
   se toca. Mismo lenguaje plano que las tarjetas del Panel De Control de arriba. */
.home-section-toggle{
  display:flex; align-items:center; gap:10px;
  /* La base de 280px la hace bajar al boton de borrar cuando no caben los dos en el renglon,
     en vez de encogerse hasta partir el titulo en dos lineas. */
  flex:1 1 280px; min-width:0; width:auto;
  padding:11px 14px;
  background: var(--surface-2);
  border:2px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor:pointer; font-family:inherit; text-align:left;
  color: var(--text-dim);
  transition: border-color .14s, background .14s, color .14s, transform .1s var(--ease), box-shadow .1s var(--ease);
}
.home-section-toggle:hover{
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}
.home-section-toggle:hover .home-section-title{ color: var(--accent); }
.home-section-toggle:active{ transform: translate(1px,1px); box-shadow:none; }
/* La franja de la izquierda (abierto o cerrado) la pinta el ::before de mas abajo, con los
   cuatro colores de la marca en movimiento. */
/* La flecha en su propio cuadrito: es la pieza que dice "esto abre y cierra", y suelta sobre el
   fondo se perdia entre el texto. */
.home-section-chevron{
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:3px;
  background: var(--bg); border:1px solid var(--border);
  font-size:.58rem; line-height:1;
  transition: transform .16s var(--ease), border-color .14s;
}
.home-section-toggle:hover .home-section-chevron{ border-color: var(--accent); }
/* Empuja el contador a la orilla derecha de la barra, lejos del titulo. */
.home-section-cuenta{ margin-left:auto; }
/* Sin esto la regla de celular (.btn{width:100%}) manda el boton de borrar a su propio renglon
   estirado, y se veia mas importante que la barra que lo abre. */
.home-section-head .home-clear-btn{ width:auto; }
/* Contraido apunta a la derecha ("hay algo ahi dentro"); abierto, hacia abajo. */
.home-section-colapsable.colapsado .home-section-chevron{ transform: rotate(-90deg); }
.home-section-cuenta{
  font-family:var(--font-code);
  font-size:.66rem; font-weight:700; color: var(--text-dim);
  background: var(--surface-2); border:1px solid var(--border); border-radius:8px;
  padding:1px 7px;
}
.home-section-colapsable.colapsado .home-recent{ display:none; }
/* Contraido tampoco se ofrece borrar: no se ve lo que se borraria, y en celular ese boton se
   estira a todo lo ancho y queda mas grande que el propio titulo que lo abre. */
.home-section-colapsable.colapsado .home-clear-btn{ display:none; }
/* Sin lista debajo, el margen del encabezado deja un hueco suelto al final del inicio. */
.home-section-colapsable.colapsado .home-section-head{ margin-bottom:0; }
.home-clear-btn{
  padding:7px 13px; font-size:.74rem; font-weight:800;
  color: var(--text-dim); border-color: var(--border);
}
.home-clear-btn:hover:not(:disabled){
  color:#ff8a8a; border-color:#a33 !important;
  background: color-mix(in srgb, #a33 14%, var(--surface));
}

/* ---- Foco por teclado ---- */
/* :focus-visible (no :focus) para que el anillo salga al tabular pero no al hacer click, que
   es cuando estorba. */
.btn:focus-visible,
.drawer-item:focus-visible,
.home-tile:focus-visible,
.home-recent-item:focus-visible,
.autocomplete-item:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
  border-color: var(--accent);
}
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ---- Filas de listas y tablas ---- */
.lm-row{ transition: border-color .14s, background .14s, transform .1s var(--ease); }
.lm-row:hover{ border-color: var(--accent); }
table.moves tbody tr{ transition: background .12s; }
table.moves tbody tr:hover{ background: color-mix(in srgb, var(--accent) 7%, transparent); }
.surtido-card{ transition: border-color .14s, transform .1s var(--ease), box-shadow .1s var(--ease); }
.surtido-card:hover{
  border-color: var(--accent);
  transform: translate(-2px,-2px); box-shadow: var(--shadow-md);
}
.loc-card{ transition: border-color .14s, transform .1s var(--ease), box-shadow .1s var(--ease); }
.loc-card:hover{ transform: translate(-1px,-1px); box-shadow: var(--shadow-md); }

/* ---- Entrada de los resultados ---- */
/* El panel aparece subiendo un poco en vez de saltar de golpe: da la sensación de que la
   búsqueda "trajo" algo. Una sola vez, al pintarse. */
@keyframes albaEntra{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}
.result.show{ animation: albaEntra .22s var(--ease) both; }
.home-panel{ animation: albaEntra .22s var(--ease) both; }

/* Las tarjetas del inicio entran escalonadas: se lee como una lista que se acomoda, no como un
   bloque que aparece. El retraso es mínimo, no hay que esperar a que termine para usarlas. */
@keyframes albaEntraTile{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}
.home-tile{ animation: albaEntraTile .2s var(--ease) both; }
.home-tile:nth-child(1){ animation-delay:.01s; }
.home-tile:nth-child(2){ animation-delay:.03s; }
.home-tile:nth-child(3){ animation-delay:.05s; }
.home-tile:nth-child(4){ animation-delay:.07s; }
.home-tile:nth-child(5){ animation-delay:.09s; }
.home-tile:nth-child(6){ animation-delay:.11s; }
.home-tile:nth-child(7){ animation-delay:.13s; }
.home-tile:nth-child(8){ animation-delay:.15s; }
.home-tile:nth-child(n+9){ animation-delay:.17s; }

/* ---- Esquinas animadas de las tarjetas del Panel De Control ----
   Cada esquina lleva uno de los cuatro colores de A.L.B.A. (los mismos del borde del dock) y
   late despacio, cada tarjeta a destiempo de la de al lado para que no pulsen todas juntas.
   Al pasar el mouse las esquinas corren por los bordes hasta cerrar el marco completo.

   Es un anillo (::before) recortado con mask al filo de la tarjeta: así las esquinas siguen la
   curva del border-radius en vez de quedar como escuadras encima. Dentro del anillo hay cuatro
   bloques de color, uno por esquina, de lado --tile-esq: con 16px se ve la esquina, con 51%
   cada bloque cubre su cuarto y el filo queda completo.
   @property para que --tile-esq se pueda animar: una variable sin registrar salta de golpe. */
@property --tile-esq{
  syntax:'<length-percentage>'; inherits:false; initial-value:16px;
}
.home-tile::before{
  content:''; position:absolute; inset:-2px; padding:2px;
  border-radius:inherit; pointer-events:none;
  --tile-esq:16px;
  background:
    linear-gradient(#1cc6a6,#1cc6a6) top left     / var(--tile-esq) var(--tile-esq) no-repeat,
    linear-gradient(#b6dd4f,#b6dd4f) top right    / var(--tile-esq) var(--tile-esq) no-repeat,
    linear-gradient(#ff9f40,#ff9f40) bottom right / var(--tile-esq) var(--tile-esq) no-repeat,
    linear-gradient(#ff4d73,#ff4d73) bottom left  / var(--tile-esq) var(--tile-esq) no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: tileEsquinasLaten 2.8s ease-in-out infinite alternate;
}
/* Desfase por posición: la cuenta con números primos evita que dos vecinas caigan en fase. */
.home-tile:nth-child(3n+2)::before{ animation-delay:-.9s; }
.home-tile:nth-child(3n)::before{ animation-delay:-1.9s; }
.home-tile:nth-child(5n)::before{ animation-delay:-1.3s; }
@keyframes tileEsquinasLaten{
  from{ --tile-esq:12px; opacity:.55; }
  to{ --tile-esq:22px; opacity:1; }
}
.home-tile:hover::before,
.home-tile:focus-visible::before{
  animation: tileEsquinasLlenan .38s var(--ease) forwards;
}
@keyframes tileEsquinasLlenan{
  from{ --tile-esq:16px; opacity:1; }
  to{ --tile-esq:51%; opacity:1; }
}
/* Con el marco de colores encima, el borde de acento del hover ya no se ve: se deja el suyo. */
.home-tile:hover{ border-color: var(--border); }
/* Salir no lleva los colores de la marca: sus esquinas son rojas, como su borde. */
.home-tile-danger::before{
  background:
    linear-gradient(#ff5f5f,#ff5f5f) top left     / var(--tile-esq) var(--tile-esq) no-repeat,
    linear-gradient(#ff5f5f,#ff5f5f) top right    / var(--tile-esq) var(--tile-esq) no-repeat,
    linear-gradient(#ff5f5f,#ff5f5f) bottom right / var(--tile-esq) var(--tile-esq) no-repeat,
    linear-gradient(#ff5f5f,#ff5f5f) bottom left  / var(--tile-esq) var(--tile-esq) no-repeat;
}
.home-tile-danger:hover{ border-color:#a33; }
/* Menos movimiento: las esquinas se quedan quietas, y el hover cierra el marco sin recorrido. */
@media (prefers-reduced-motion: reduce){
  .home-tile::before{ animation:none; }
  .home-tile:hover::before,
  .home-tile:focus-visible::before{ animation:none; --tile-esq:51%; }
}

/* ---- Modales ---- */
/* Las capas decorativas del acceso quedan fuera: albaEntra termina en opacity:1 y con fill-mode
   "both" ese valor se queda fijo, pisando el .16/.17 con el que el degradado y los cuadros
   estan pensados — el fondo salia a todo color en vez de oscuro. Ademas reemplazaba por
   completo las animaciones loginCruza*, asi que los cuadros ni se movian. */
.modal-overlay.show > *:not(.login-bg-gradient):not(.login-bg-blob):not(.login-bg-ring):not(.login-bg-grid){
  animation: albaEntra .2s var(--ease) both;
}

/* ---- Pastillas y etiquetas ---- */
.code-pill{ transition: border-color .14s, background .14s, color .14s; }
.color-badge{ transition: border-color .14s, transform .1s var(--ease); }
.color-badge:hover{ transform: translateY(-1px); }

/* ---- El punto de estado de Odoo late despacio cuando todo va bien ---- */
@keyframes albaLatido{
  0%,100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  50%{ box-shadow: 0 0 0 5px transparent; }
}
header h1 .dot.status-green{ animation: albaLatido 2.4s ease-in-out infinite; }

/* ---- Quien pidió menos movimiento, no lo tiene ----
   Se apagan animaciones y desplazamientos; los cambios de color se quedan, que no marean y son
   los que hacen legible la interfaz. */
@media (prefers-reduced-motion: reduce){
  .result.show,
  .home-panel,
  .home-tile,
  .modal-overlay.show > *,
  header h1 .dot.status-green{ animation:none !important; }
  .btn:active:not(:disabled),
  .surtido-card:hover,
  .loc-card:hover,
  .color-badge:hover{ transform:none !important; }
}

/* Tercera forma de foto: circular. */
.ap-shape-demo-circle{ border-radius:50%; }
body.fotos-circulares .photo-box,
body.fotos-circulares .row-thumb,
body.fotos-circulares .attachment-thumb{ border-radius:50%; }

/* Acciones del modal de apariencia: los predeterminados a la izquierda (es una accion de otro
   tipo) y Cancelar/Guardar juntos a la derecha, que es donde se buscan. */
.ap-actions{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding-top:14px; border-top:2px solid var(--border);
}
.ap-actions-main{ display:flex; gap:8px; margin-left:auto; }
.ap-default-btn{ font-size:.76rem; padding:9px 13px; border-style:dashed; }
.ap-default-btn:hover:not(:disabled){ border-style:solid; }
@media (max-width:520px){
  /* En pantallas chicas cada bloque ocupa su renglon, para que ningun boton quede exprimido. */
  .ap-actions{ flex-direction:column; align-items:stretch; }
  .ap-actions-main{ margin-left:0; }
  .ap-actions-main .btn{ flex:1; justify-content:center; }
}

/* =========================================================================
   Sin barra superior: el banner encabeza y el buscador va debajo
   ========================================================================= */

/* El header se va: su titulo lo reemplaza el banner, y la cuenta y los accesos ya viven en el
   panel lateral y en el Panel De Control. Se deja en el DOM porque sus botones son los que
   reenvian las acciones del menu (ver isUsable en script.js). */
header.alba-topnav{
  position:absolute !important;
  width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip-path: inset(50%); opacity:0; pointer-events:none;
  border:none !important;
}

/* Buscador principal: centrado y con aire, que es lo que mas se usa de la app. */
.main-search{
  width:100%; max-width:760px; margin:0 auto 20px;
  position:relative; z-index:12;
}
.main-search .search-row{ margin:0; }
.main-search .autocomplete-wrap{ position:relative; min-width:0; }
.main-search #codeInput{ font-size:1rem; }

/* Con un resultado en pantalla el banner se encoge: pasa a ser una firma, no una portada, y
   deja el espacio para lo que se esta consultando. */
body:not(.en-inicio) .alba-banner{ margin-bottom:14px; }
body:not(.en-inicio) .alba-banner-body{ padding:10px 16px; flex-direction:row; justify-content:center; gap:14px; }
body:not(.en-inicio) .alba-banner-name{ font-size:clamp(1.1rem, 3vw, 1.5rem); text-shadow:2px 2px 0 var(--accent); }
body:not(.en-inicio) .alba-banner-diamond{ font-size:.9rem; }
body:not(.en-inicio) .alba-banner-words,
body:not(.en-inicio) .alba-banner-foot{ display:none; }
body:not(.en-inicio) .alba-banner-bar{ height:4px; }
body:not(.en-inicio) .main-search{ margin-bottom:16px; }

/* Sin header sticky, el contenido necesita su propio respiro arriba. */
.wrap{ padding-top: clamp(14px, 2vw, 26px); }

@media (max-width:680px){
  .main-search{ margin-bottom:14px; }
  .main-search #codeInput{ font-size:.92rem; }
}

/* =========================================================================
   Buscador dentro del banner
   -------------------------------------------------------------------------
   Deja de ser una caja aparte para formar parte del bloque de identidad. Por
   eso cambia de aspecto: fondo translucido sobre el degradado del banner,
   borde de acento y la lupa como boton solido — antes era una barra gris
   generica que podia estar en cualquier app.
   ========================================================================= */
.alba-banner .main-search{
  width:100%; max-width:640px; margin:14px auto 0;
  /* Por encima del contenido de abajo, para que el autocompletado no quede tapado. */
  position:relative; z-index:14;
}

.alba-banner .main-search #codeInput{
  /* El translucido deja ver la cuadricula del banner: se lee como parte del bloque y no como
     un recuadro pegado encima. */
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border:2px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--radius);
  padding:15px 60px 15px 20px;
  font-size:1rem; letter-spacing:.3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.alba-banner .main-search #codeInput:hover{
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
}
.alba-banner .main-search #codeInput:focus{
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.alba-banner .main-search #codeInput::placeholder{
  color: color-mix(in srgb, var(--text-dim) 85%, transparent);
  letter-spacing:.4px;
}

/* La lupa: cuadrado solido en el acento, con el mismo borde duro del resto de la app. */
.alba-banner .main-search #searchBtn{
  top:7px; right:7px; bottom:7px; width:46px;
  background: var(--accent); color:#04211c;
  border:2px solid var(--accent); border-radius: var(--radius);
  transition: filter .14s, box-shadow .12s var(--ease), transform .1s var(--ease);
}
.alba-banner .main-search #searchBtn:hover:not(:disabled){
  filter: brightness(1.1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}
.alba-banner .main-search #searchBtn:active:not(:disabled){ transform: translate(1px,1px); }

/* Con un resultado en pantalla el banner se encoge, y el buscador se acomoda a su lado en vez
   de bajar a otro renglon: asi la firma y la barra caben en una sola linea. */
body:not(.en-inicio) .alba-banner-body{ flex-wrap:wrap; }
body:not(.en-inicio) .alba-banner .main-search{
  margin:0; flex:1 1 320px; max-width:none; min-width:0;
}
body:not(.en-inicio) .alba-banner .main-search #codeInput{ padding:11px 54px 11px 16px; font-size:.92rem; }
body:not(.en-inicio) .alba-banner .main-search #searchBtn{ top:5px; right:5px; bottom:5px; width:40px; }

@media (max-width:680px){
  .alba-banner .main-search{ margin-top:12px; }
  .alba-banner .main-search #codeInput{ padding:13px 54px 13px 16px; font-size:.94rem; }
  .alba-banner .main-search #searchBtn{ top:6px; right:6px; bottom:6px; width:42px; }
  /* En celular, con resultado, la barra ocupa su propio renglon completo bajo la firma. */
  body:not(.en-inicio) .alba-banner .main-search{ flex-basis:100%; }
}

/* =========================================================================
   Al escribir: el banner se abre y contiene las sugerencias
   -------------------------------------------------------------------------
   La lista deja de flotar encima (position:absolute) y pasa a formar parte
   del banner, asi que el banner CRECE justo lo que midan las sugerencias —
   tres codigos abren tres renglones, no un panel de alto fijo. Mientras
   tanto, lo de abajo se aparta para no competir por la atencion.
   ========================================================================= */

/* El banner recorta su contenido (overflow:hidden) para que la franja de color siga sus
   esquinas; mientras se sugiere hay que soltarlo o la lista quedaria cortada. */
body.sugiriendo .alba-banner{ overflow:visible; }

body.sugiriendo .alba-banner .autocomplete-list{
  /* En el flujo, no flotando: es lo que hace que el banner se estire con ella. */
  position:static;
  margin-top:10px;
  width:100%;
  /* Sin alto fijo: crece con las sugerencias y solo pone scroll si son muchisimas. */
  max-height:min(52vh, 420px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  box-shadow:none;
}
body.sugiriendo .alba-banner .autocomplete-item{
  background:transparent;
}
body.sugiriendo .alba-banner .autocomplete-item:hover,
body.sugiriendo .alba-banner .autocomplete-item.active{
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Lo de abajo se aparta: el panel y el historial dejan de competir con lo que se esta
   escribiendo. Se oculta en vez de atenuarse para que el banner tenga toda la pantalla. */
body.sugiriendo .home-panel,
body.sugiriendo #searchPanelCard{ display:none !important; }

/* La lista del historial (el otro desplegable del buscador) se comporta igual. */
body.sugiriendo .alba-banner .search-history-list{ z-index:20; }

/* =========================================================================
   Avisos dentro del banner
   -------------------------------------------------------------------------
   Antes salian en una cajita blanca abajo del todo, fuera del campo de vision
   de quien esta trabajando. Ahora aparecen sobre el buscador, integrados al
   banner: se despliegan hacia abajo empujando la barra en vez de tapar nada.
   ========================================================================= */
.alba-banner-toast{
  /* Cerrado: no ocupa nada. Al abrirse crece y el banner se estira con el. */
  width:100%; max-width:640px; margin:0 auto;
  max-height:0; opacity:0; overflow:hidden;
  transition: max-height .24s var(--ease), opacity .2s var(--ease), margin .24s var(--ease);
}
.alba-banner-toast.show{
  max-height:90px; opacity:1; margin-top:12px;
}
.alba-banner-toast.show::before{
  /* La barrita de acento a la izquierda lo ata al lenguaje del resto de la app. */
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: var(--accent); border-radius: var(--radius) 0 0 var(--radius);
}
.alba-banner-toast.show{
  position:relative;
  padding:11px 16px 11px 20px; box-sizing:border-box;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  border:2px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  border-radius: var(--radius);
  color: var(--text); font-size:.86rem; font-weight:700; line-height:1.45;
  text-align:left;
}

@media (max-width:680px){
  .alba-banner-toast.show{ font-size:.8rem; padding:10px 13px 10px 17px; }
  .alba-banner-toast.show{ max-height:120px; }
}

@media (prefers-reduced-motion: reduce){
  .alba-banner-toast{ transition:none; }
}

/* La caja del buscador: es el ancla de la lupa y del reloj. Antes esos botones se anclaban al
   contenedor de afuera, que ahora crece con las sugerencias — y la lupa crecia con el. */
.search-box{ position:relative; width:100%; }

/* En celular el banner y el Panel De Control quedaban pegados. */
@media (max-width:680px){
  .alba-banner{ margin-bottom:18px; }
  body.en-inicio .home-panel{ margin-top:18px; }
}

/* =========================================================================
   El rombo del banner como semaforo de la conexion
   -------------------------------------------------------------------------
   Verde: responde rapido. Amarillo: algo lenta. Naranja: lenta, las busquedas
   van a tardar. Rojo: sin conexion (o Odoo caido). Antes este dato solo vivia
   en el punto del header, que ya no se ve.
   ========================================================================= */
.alba-banner-diamond{
  cursor:help; /* tiene title con el detalle y los milisegundos */
  transition: color .3s var(--ease), text-shadow .3s var(--ease);
}
.alba-banner-diamond.status-green{
  color: var(--accent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}
.alba-banner-diamond.status-yellow{
  color:#e0c000;
  text-shadow: 0 0 10px color-mix(in srgb, #e0c000 55%, transparent);
}
.alba-banner-diamond.status-orange{
  color: var(--warn, #f7941d);
  text-shadow: 0 0 10px color-mix(in srgb, var(--warn, #f7941d) 55%, transparent);
  /* A partir de aqui ya no es solo informativo: parpadea para que se note que algo va mal. */
  animation: albaRomboAviso 1.6s ease-in-out infinite;
}
.alba-banner-diamond.status-red{
  color: var(--err, #e53935);
  text-shadow: 0 0 10px color-mix(in srgb, var(--err, #e53935) 55%, transparent);
  animation: albaRomboAviso 1s ease-in-out infinite;
}
@keyframes albaRomboAviso{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}
@media (prefers-reduced-motion: reduce){
  .alba-banner-diamond{ animation:none !important; }
}

/* ---------- Piezas en el autocompletado ---------- */
/* Van debajo de la descripcion, no en una columna a la derecha: en celular esa columna se
   comia el ancho del codigo, que es lo que de verdad se esta leyendo. */
.autocomplete-item .ac-piezas{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:3px;
}
.autocomplete-item .ac-pz{
  font-size:.66rem; font-weight:700; letter-spacing:.2px;
  padding:1px 6px; border-radius: var(--radius);
  border:1px solid transparent; white-space:nowrap;
}
.autocomplete-item .ac-pz-hay{
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}
.autocomplete-item .ac-pz-nada{
  color: var(--err);
  background: color-mix(in srgb, var(--err) 12%, transparent);
  border-color: color-mix(in srgb, var(--err) 35%, transparent);
}
.autocomplete-item .ac-pz-rack{
  color: var(--text-dim);
  background: var(--surface);
  border-color: var(--border);
}

/* ---------- Historial de busqueda como seccion ---------- */
/* Reutiliza .search-history-item del desplegable para que las dos vistas se vean como la
   misma cosa; aqui solo se le da el aire que en el desplegable no cabia. */
#historialPanel .odoo-list-table .search-history-item{
  padding:12px 14px; gap:12px; border-radius: var(--radius);
}
#historialPanel .odoo-list-table .search-history-item:last-child{ border-bottom:none; }
#historialPanel .odoo-list-table .sh-code{ font-size:.9rem; }
#historialPanel .odoo-list-table .sh-time{
  display:inline-flex; align-items:center; gap:4px;
}
#historialPanel .odoo-list-table .sh-time::before{ content:'🕒'; font-size:.7rem; }

/* Filtro + borrar todo: en celular el input se lleva el renglon completo y el boton queda
   debajo, en vez de quedar los dos apretados. */
#historialPanel .surtidos-date-filter{ flex-wrap:wrap; gap:8px; }
#historialFiltro{
  flex:1 1 220px; min-width:0;
  background: var(--bg); color: var(--text);
  border:1px solid var(--border); border-radius: var(--radius);
  padding:8px 12px; font-size:.82rem; outline:none;
  transition: border-color .12s, box-shadow .12s;
}
#historialFiltro::placeholder{ color: var(--text-dim); }
#historialFiltro:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
#historialClearAll:hover{ color:#fff; background: var(--err); border-color: var(--err); }

/* Al entrar a una seccion el banner con el buscador se va (ver ocultarPanelesDeSeccion).
   Esta clase queda por si algun dia hace falta ajustar algo mas del layout desde CSS. */
body.en-seccion .home-panel{ display:none !important; }

/* ---------- Acceso: banner de marca + degradado en movimiento ---------- */

/* El banner del acceso es el mismo componente que encabeza la app, solo que mas compacto:
   aqui compite por espacio con la tarjeta de login y en un celular no puede robarle altura. */
.login-banner-slot{ margin-bottom:16px; position:relative; z-index:1; }
.login-banner-slot .alba-banner{ margin:0; }
.login-banner-slot .alba-banner-body{ padding:16px 18px 14px; }
.login-banner-slot .alba-banner-name{ font-size:clamp(1.5rem, 7vw, 2.1rem); }
.login-banner-slot .alba-banner-words{ font-size:clamp(.6rem, 2.3vw, .72rem); }
.login-banner-slot .alba-banner-foot{ font-size:.58rem; }

/* Degradado de fondo: los cuatro colores de la marca girando despacio.
   - Va en position:fixed y no absolute para cubrir toda la pantalla aunque el overlay
     tenga scroll en pantallas bajas.
   - 26s y un solo keyframe de rotacion: es fondo, no espectaculo. Mas rapido distrae de
     escribir la contrasena, que es lo unico que importa en esta pantalla.
   - Opacidad baja + blur: tiene que leerse como ambiente, no como una imagen encima. */
.login-bg-gradient{
  position:fixed; inset:-30%;
  z-index:0; pointer-events:none;
  background: conic-gradient(
    from 0deg,
    var(--accent)  0deg,
    var(--accent2) 90deg,
    var(--accent3) 180deg,
    var(--accent4) 270deg,
    var(--accent)  360deg
  );
  opacity:.16;
  filter: blur(70px);
  animation: loginGiraDegradado 26s linear infinite;
}
@keyframes loginGiraDegradado{
  from{ transform: rotate(0deg)   scale(1.05); }
  50% { transform: rotate(180deg) scale(1.22); }
  to  { transform: rotate(360deg) scale(1.05); }
}

/* Quien pidio menos animacion en su sistema no deberia recibir un fondo girando: se deja el
   degradado quieto, que sigue viendose bien. Mismo criterio que deberia aplicarse al resto. */
@media (prefers-reduced-motion: reduce){
  .login-bg-gradient{ animation:none; transform: rotate(25deg) scale(1.15); }
}

/* ---------- Chips de rol en Gestor de Cuentas ---------- */
.u-rol-chip{
  display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.3px;
  padding:2px 7px; border-radius: var(--radius); margin-left:4px;
  border:1px solid var(--border); background: var(--surface); color: var(--text-dim);
  vertical-align:middle;
}
.u-rol-admin     { color:#ff5f5f; border-color:#ff5f5f; background: color-mix(in srgb, #ff5f5f 12%, transparent); }
.u-rol-almacen   { color:#a78bfa; border-color:#a78bfa; background: color-mix(in srgb, #a78bfa 12%, transparent); }
.u-rol-surtidor  { color: var(--accent);  border-color: var(--accent);  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.u-rol-laina     { color: var(--accent2); border-color: var(--accent2); background: color-mix(in srgb, var(--accent2) 12%, transparent); }
.u-rol-moderador { color: var(--accent4); border-color: var(--accent4); background: color-mix(in srgb, var(--accent4) 12%, transparent); }
.u-rol-espectador{ color: var(--text-dim); }

/* La marca de plantilla rota se ve distinta del rol a proposito: no es un rol mas, es un aviso
   de que esa cuenta se salio del molde. */
.u-rol-custom{
  color: var(--warn); border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border-style:dashed;
}

.ue-role-hint{ font-size:.68rem; color: var(--text-dim); margin-top:5px; line-height:1.4; }
.rol-edit-inline{ padding:0 4px; }

/* ---------- Código de proveedor (almacenes externos) ---------- */
.prov-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px; border-radius: var(--radius);
  border:1px solid var(--accent2); background: color-mix(in srgb, var(--accent2) 10%, transparent);
  font-size:.74rem;
}
.prov-chip-logo{ width:20px; height:20px; object-fit:contain; border-radius:2px; flex-shrink:0; }
.prov-chip-nombre{ font-weight:800; color: var(--accent2); }
.prov-chip-codigo{
  font-family:var(--font-code);
  color: var(--text); background: var(--surface); padding:1px 6px; border-radius:2px;
}

/* Cuadricula del acceso: la misma que el resto de la app (ver .alba-waves en index.html).
   Antes el login era un color plano y se sentia como otra aplicacion.

   Va ENCIMA del degradado y de las formas, no como fondo del overlay. Si fuera el fondo, el
   degradado (opacity .16 a pantalla completa) le pasaria por encima y la dejaria lavada; asi
   las lineas se leen nitidas igual que adentro y el color queda detras, que es justo el efecto
   que se busca.

   Los valores estan repetidos y no reutilizados a proposito: .alba-waves vive fuera del overlay
   y queda tapado por el. Duplicar tres lineas es preferible a mover un elemento del que depende
   toda la app. Si se cambia la cuadricula alla, hay que cambiarla aqui. */
.login-bg-grid{
  position:fixed; inset:0;
  z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* ---------- Selects: legibles en oscuro ---------- */
/* Sin esto el navegador pinta el <select> y sus <option> con su tema claro por defecto: texto
   blanco sobre blanco en la lista desplegada. color-scheme:dark es lo que hace que el menu
   nativo (que no se puede estilizar por CSS) use la paleta oscura del sistema. */
select,
.config-field select,
#ueRole, #uRole, #provSelect{
  color-scheme: dark;
  background: var(--surface-2);
  color: var(--text);
  border:2px solid var(--border);
  border-radius: var(--radius);
  padding:9px 12px;
  font-size:.85rem; font-family:inherit;
  width:100%; max-width:100%;
  cursor:pointer;
  appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right:36px;
}
select:focus{ outline:none; border-color: var(--accent); }
/* Los <option> tambien, para los navegadores que si dejan pintarlos. */
select option{ background: var(--surface-2); color: var(--text); }

/* ---------- Proveedor bajo la descripcion: logo > codigo ---------- */
.prov-linea{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 10px; padding:7px 12px;
  background: var(--surface-2);
  border:2px solid var(--border); border-left:3px solid #b45309;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  max-width:100%; flex-wrap:wrap;
}
.prov-linea-logo{
  width:26px; height:26px; object-fit:contain; flex-shrink:0;
  border-radius:3px; background:var(--surface);
}
.prov-linea-sinlogo{
  display:inline-flex; align-items:center; justify-content:center; font-size:.95rem;
}
.prov-linea-nombre{ font-size:.78rem; font-weight:800; color:#f59e0b; letter-spacing:.2px; }
.prov-linea-flecha{ color: var(--text-dim); font-weight:900; }
.prov-linea-codigo{
  font-family:var(--font-code);
  font-size:.82rem; font-weight:700; color: var(--text);
  background: var(--bg); padding:3px 9px; border-radius:3px;
  overflow-wrap:anywhere;
}

/* ---------- Mandar código a una cuenta ---------- */
.share-dest-btn{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; }
.share-dest-nombre{ font-weight:800; }
.share-dest-rol{ font-size:.66rem; font-weight:700; color: var(--accent); letter-spacing:.3px; text-transform:none; }
.share-nota-req{
  font-size:.6rem; font-weight:800; color: var(--warn); text-transform:uppercase;
  border:1px solid var(--warn); border-radius:3px; padding:0 5px; margin-left:4px;
}
.share-nota-error{ font-size:.72rem; color: var(--err); margin-top:5px; min-height:1em; }
.share-nota-input-error{ border-color: var(--err) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--err) 25%, transparent); }

/* Logo de proveedor: se puede abrir en grande. */
.prov-logo-zoom{ cursor: zoom-in; transition: transform .12s; }
.prov-logo-zoom:hover{ transform: scale(1.12); }

/* Editar el código de proveedor desde su propia línea. */
.prov-linea-editar{
  background:none; border:1px solid var(--border); border-radius:3px;
  color: var(--text-dim); cursor:pointer; font-size:.8rem; padding:2px 7px; margin-left:2px;
  transition: border-color .12s, background .12s;
}
.prov-linea-editar:hover{ border-color:#b45309; background: color-mix(in srgb, #b45309 18%, transparent); }
.prov-quitar{ color: var(--err); border-color: var(--err); margin-right:auto; }
.prov-quitar:hover{ background: var(--err); color:#fff; }

/* Editar / eliminar el proveedor, debajo de su propio selector. Son acciones sobre el catalogo
   de proveedores, no sobre el codigo del producto, por eso van aqui y no en la fila de botones
   del modal — que es la que guarda o cancela lo que se esta capturando. */
.prov-admin{ display:flex; gap:8px; margin-top:8px; }
/* Se reparten el ancho en vez de ocupar cada uno una linea: son acciones secundarias al lado
   del selector, y apiladas a todo lo ancho pesaban mas que el propio "Guardar" del modal.
   El width:auto anula la regla de celular que estira cualquier .btn a todo el ancho. */
.prov-admin-btn{
  flex:1; width:auto; min-width:0;
  padding:7px 10px; font-size:.7rem; justify-content:center; text-align:center;
}
/* En la fila de botones del modal, .prov-quitar se empuja sola a la izquierda; aqui ya esta
   en su sitio y ese margen dejaria un hueco raro. */
.prov-admin .prov-quitar{ margin-right:0; }

/* ---------- SKU de proveedores externos ---------- */
/* El filtro: una sola caja con el icono dentro, en vez de un input suelto. El borde entero
   reacciona al foco (focus-within) porque quien escribe mira el campo completo, no el borde
   del <input> de adentro, que es transparente. */
.prov-sku-filtro{
  display:flex; align-items:center; gap:9px;
  margin:0 0 12px; padding:9px 12px;
  background: var(--surface-2);
  border:2px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .14s, box-shadow .14s;
}
.prov-sku-filtro:focus-within{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.prov-sku-filtro-icono{ flex-shrink:0; color: var(--text-dim); transition: color .14s; }
.prov-sku-filtro:focus-within .prov-sku-filtro-icono{ color: var(--accent); }
/* El input no se pinta: la caja de arriba ya es el campo. Asi el foco se ve en un solo borde y
   no en dos, uno dentro del otro. */
.prov-sku-filtro input{
  flex:1; min-width:0;
  background:none; border:none; outline:none; padding:0;
  color: var(--text); font-size:.85rem; font-family:inherit;
}
.prov-sku-filtro input::placeholder{ color: var(--text-dim); }
/* El anillo global de foco (input:focus-visible) dibujaba un segundo recuadro turquesa DENTRO
   de la caja. El foco ya lo muestra el borde de ella, asi que aqui sobra. */
.prov-sku-filtro input:focus-visible{ box-shadow:none; }
/* Solo aparece cuando hay algo que limpiar: un boton de borrar sobre un campo vacio no hace
   nada y roba la vista. */
.prov-sku-filtro-limpiar{
  display:none;
  flex-shrink:0; width:20px; height:20px; padding:0;
  align-items:center; justify-content:center;
  background:none; border:none; border-radius:50%;
  color: var(--text-dim); font-size:.72rem; cursor:pointer;
  transition: color .12s, background .12s;
}
.prov-sku-filtro.con-texto .prov-sku-filtro-limpiar{ display:inline-flex; }
.prov-sku-filtro-limpiar:hover{ color: var(--err); background: color-mix(in srgb, var(--err) 16%, transparent); }

/* Un mismo renglón sirve para las dos vistas de la sección (proveedores y sus productos): a la
   izquierda lo que identifica —logo o el código del proveedor—, en medio el texto largo. */
.prov-sku-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 13px;
  border:2px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2);
  cursor:pointer;
  transition: border-color .12s, background .12s, transform .1s var(--ease);
}
.prov-sku-item + .prov-sku-item{ margin-top:8px; }
.prov-sku-item:hover{ border-color: var(--accent); transform: translateX(2px); }
.prov-sku-logo{
  width:34px; height:34px; flex-shrink:0;
  object-fit:contain; border-radius:3px;
  background: var(--bg); border:1px solid var(--border);
}
.prov-sku-logo-vacio{ display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; }
/* El código del proveedor es el dato por el que se busca en esta pantalla, así que va primero
   y en monoespaciada: se compara carácter por carácter contra una etiqueta en la mano. */
.prov-sku-sku{
  flex-shrink:0; max-width:40%;
  font-family:var(--font-code);
  font-size:.78rem; font-weight:700; color: var(--accent);
  background: var(--bg); border:1px solid var(--border); border-radius:3px;
  padding:4px 8px;
  overflow-wrap:anywhere;
}
.prov-sku-main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.prov-sku-nombre{
  font-size:.82rem; font-weight:700; color: var(--text);
  /* La descripción de Odoo puede ser larguísima; dos renglones bastan para reconocerla. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.prov-sku-codigo{
  font-family:var(--font-code);
  font-size:.68rem; color: var(--text-dim); overflow-wrap:anywhere;
}
.prov-sku-flecha{ flex-shrink:0; color: var(--text-dim); font-size:1.15rem; font-weight:900; }

/* ---------- Borrar fotos de un producto ---------- */
/* Se ve lo que hay antes de borrarlo: el código solo no dice qué fotos tiene pegadas, y esto no
   se puede deshacer. */
.bf-ficha{
  padding:14px; margin-top:4px;
  background: var(--surface-2); border:2px solid var(--border); border-radius: var(--radius);
}
.bf-codigo{
  font-family:var(--font-code);
  font-weight:700; font-size:.85rem; color: var(--text); overflow-wrap:anywhere;
}
.bf-nombre{ margin-top:3px; font-size:.8rem; color: var(--text-dim); }
.bf-conteo{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.bf-chip{
  padding:3px 9px; border-radius:8px;
  background: var(--bg); border:1px solid var(--border);
  font-size:.66rem; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  color: var(--text-dim);
}
.bf-miniaturas{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.bf-miniaturas img{
  width:64px; height:64px; object-fit:cover;
  border:1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.bf-aviso{
  margin-top:12px; padding:9px 11px;
  background: color-mix(in srgb, var(--err) 12%, transparent);
  border-left:3px solid var(--err); border-radius: var(--radius);
  font-size:.76rem; font-weight:700; color: var(--text);
}
.bf-borrar{
  width:100%; justify-content:center; margin-top:12px;
  min-height:46px; border-radius:10px;
  background:#7f1d1d; color:#fff !important; border:2px solid rgba(255,255,255,.18);
}
.bf-borrar:hover:not(:disabled){ filter:brightness(1.15); border-color: rgba(255,255,255,.45); }

/* ---------- Marcadores ---------- */
/* Ya guardado: el mismo vino pero aclarado, para ver de un vistazo en cuál de los dos estados
   está sin sacarlo de la fila ni cambiarle el tamaño. */
.act-guardar.activo{ background:#5b0e2d; }
/* Sin fila de acciones (una O.C., una MO, un pedido) va suelto arriba de la tarjeta, y ahí sí
   necesita su propio ancho y separación. */
/* Sin fila de acciones: ya no a todo lo ancho (pedido de Manuel), chico y a la derecha. */
.fav-toggle.fav-suelto{
  display:flex; width:auto; margin:0 0 12px auto; justify-content:center;
  min-height:38px; padding:8px 14px; border-radius:8px; font-size:.82rem;
}
/* Fila de acciones de un documento (albarán): descargas y "Guardar para ver después" en chico. */
.doc-acciones{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:4px 0 14px; }
.doc-acciones:empty{ display:none; }
.doc-acciones .btn{ min-height:38px; padding:8px 14px; font-size:.82rem; border-radius:8px; }
.fav-toggle.fav-chico, .fav-toggle.fav-suelto{ width:auto !important; min-height:38px !important; padding:6px 14px !important; font-size:.8rem !important; }
.fav-toggle.fav-chico{ margin-left:auto; align-self:flex-start; }
.product-head > .fav-toggle.fav-chico{ order:99; }
.fav-toggle.fav-chico .act-ico, .fav-toggle.fav-suelto .act-ico{ width:18px; height:18px; }

/* Qué se está guardando, arriba del modal. */
.fav-modal-que{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.fav-modal-codigo{
  font-family:var(--font-code);
  font-weight:700; font-size:.84rem; color: var(--text); overflow-wrap:anywhere;
}

/* "Recuérdamelo dentro de": pastillas, una sola elegida a la vez. */
.fav-recordatorios{ display:flex; flex-wrap:wrap; gap:6px; }
.fav-recordatorio{
  padding:6px 11px;
  background: var(--surface-2); color: var(--text-dim);
  border:2px solid var(--border); border-radius: var(--radius);
  font-family:inherit; font-size:.73rem; font-weight:700; cursor:pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.fav-recordatorio:hover{ border-color: var(--accent); }
.fav-recordatorio.activo{
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
}
/* "Otro…": cantidad y unidad. Se escribe el numero y se elige la unidad en vez de teclear una
   fecha, que en celular es mas lento y se puede escribir en un formato que no se entienda. */
.fav-custom{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.fav-custom-en{ font-size:.76rem; font-weight:700; color: var(--text-dim); }
.fav-custom input{ width:84px; }
.fav-custom select{ width:auto; min-width:120px; }

/* Confirma en palabras cuándo va a avisar: "en 3 días" solo no dice qué día cae. */
.fav-recordatorio-cuando{
  display:block; margin-top:6px; min-height:1em;
  font-size:.72rem; color: var(--accent);
}

/* La nota del marcador: es el dato que no está en ninguna otra parte, así que se lee como una
   cita y no como un subtítulo más. */
.fav-nota{
  margin-top:3px; font-size:.78rem; font-style:italic;
  color: var(--text); opacity:.9; overflow-wrap:anywhere;
}
.fav-recordar{
  margin-top:3px; font-size:.68rem; font-weight:700;
  color: var(--text-dim);
}
.fav-recordar.vencido{ color: var(--accent4); }
/* Ya venció: el renglón se marca de lado, como las líneas de proveedor, para encontrarlo de
   un vistazo entre los demás. */
.fav-item.vencido{
  border-left:4px solid var(--accent4);
  background: color-mix(in srgb, var(--accent4) 7%, var(--surface-2));
}

/* El tipo de cada marcador, para distinguir un producto de una O.C. sin leer el código. */
.fav-tipo{
  flex-shrink:0; align-self:flex-start;
  padding:3px 8px; border-radius:8px;
  background: var(--bg); border:1px solid var(--border);
  font-size:.6rem; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color: var(--text-dim);
}

/* Alta de proveedor: arriba de la lista y alineada a la derecha, para que no compita con el
   filtro ni con el primer renglón. */
.prov-sku-acciones{ display:flex; justify-content:flex-end; margin:0 0 10px; }
.prov-sku-nuevo{ width:auto; padding:7px 13px; font-size:.74rem; }

/* Editar y eliminar, sobre el propio renglón del proveedor. */
.prov-sku-ops{ display:flex; gap:5px; flex-shrink:0; }
.prov-sku-op{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0;
  background: var(--bg); color: var(--text-dim);
  border:1px solid var(--border); border-radius:3px;
  font-size:.8rem; cursor:pointer;
  transition: border-color .12s, background .12s;
}
.prov-sku-op:hover:not(:disabled){ border-color: var(--accent); }
.prov-sku-op-borrar:hover:not(:disabled){ border-color: var(--err); background: color-mix(in srgb, var(--err) 16%, transparent); }
/* Un proveedor con productos no se puede borrar: el botón se apaga y el title dice cuántos lo
   están deteniendo. La base lo impide igual, esto solo evita el viaje y el error. */
.prov-sku-op:disabled{ opacity:.3; cursor:not-allowed; }

/* Logo dentro del editor de proveedor. */
.prov-ed-logo{ display:flex; align-items:center; gap:10px; }
.prov-ed-logo img{
  width:44px; height:44px; object-fit:contain;
  border:1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}

/* Oferta de notificaciones: abajo, discreta, se va sola al contestar. */
/* Va POR ENCIMA del dock y mas arriba que el: el dock vive en bottom:18px con z-index:70, asi
   que una barra a esa misma altura quedaba debajo de el — se veia a medias y, peor, sus
   botones no se podian presionar porque el dock se comia el toque. Lo cacho una prueba
   automatica al intentar presionar "Activar". */
/* z-index por DEBAJO de los modales (que van en 50): con 75 este aviso quedaba flotando encima
   de cualquier ventana abierta y en el celular tapaba justo los botones de abajo — en el Kardex
   paso a paso se comia el de "Generar e imprimir". Ademas se esconde del todo mientras haya un
   modal abierto, para que no se asome por detras del velo. */
.notif-oferta{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:45;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
  width:min(94vw, 520px); padding:10px 14px;
  background: var(--surface); border:2px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.notif-oferta-txt{ font-size:.82rem; font-weight:700; color: var(--text); flex:1 1 220px; }
body:has(.modal-overlay.show) .notif-oferta{ display:none; }

/* Borrar la foto que se esta viendo: un boton redondo con el bote de basura, DENTRO de la
   esquina de la propia foto. Antes vivia en la banda de arriba y en celular se centraba con
   transform:translateX(-50%); al pasar el mouse, .btn:hover aplica su propio transform y
   reemplazaba el centrado, asi que el boton brincaba media anchura de lado. Aqui no se centra
   con transform, asi que ya no hay nada que pisar.

   Va dentro de .lightbox-img-wrap, que mide exactamente lo que la foto: posicionarlo contra el
   escenario lo dejaba fuera de la imagen, porque el escenario es mas ancho.

   Arranca oculto; lo enciende sincronizarBotonBorrarFoto solo con el permiso y cuando la foto
   se puede identificar. */
.lightbox-img-wrap{ position:relative; display:inline-flex; max-width:100%; }

/* Las dos acciones sobre la foto, en la esquina de la propia imagen. Van dentro de
   .lightbox-img-wrap, que mide exactamente lo que la foto: posicionarlas contra el escenario
   las dejaba fuera de la imagen, porque el escenario es mas ancho.

   Ninguna se centra con transform. Antes el boton de borrar usaba translateX(-50%) y .btn:hover
   aplica su propio transform, que REEMPLAZA al del centrado —no se suman—, asi que al pasar el
   mouse brincaba media anchura de lado. */
.lightbox-acciones{
  position:absolute; top:10px; right:10px; z-index:5;
  display:flex; gap:8px;
}
.lightbox-accion{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border-radius:50%;
  font-size:1.05rem; line-height:1; cursor:pointer;
  background: rgba(0,0,0,0.62); color:#fff;
  border:2px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  transition: background .12s, border-color .12s;
}
.lightbox-accion:disabled{ opacity:.6; cursor:default; }
.lightbox-guardar{ border-color: var(--accent); }
.lightbox-guardar:hover:not(:disabled){ background: var(--accent); color:#04211c; }
.lightbox-titulo{ border-color: var(--accent2); }
.lightbox-titulo:hover:not(:disabled){ background: var(--accent2); color:#04211c; }
.lightbox-borrar{ border-color: var(--err); }
.lightbox-borrar:hover:not(:disabled){ background: var(--err); }

/* ---------- Aviso: celular con "Sitio para ordenador" puesto ---------- */
/* Tapa la app por completo. No es decoracion: con esa opcion el layout se rompe y dejar pasar
   a la persona seria peor que detenerla. La propia pagina no puede apagar esa opcion (la
   controla el navegador), asi que lo unico posible es explicar como quitarla. */
.vista-ordenador-aviso{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background: var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 34px 34px;
}
body.bloqueado-vista-ordenador{ overflow:hidden; }
.voa-caja{
  width:min(92vw, 520px); text-align:center;
  background: var(--surface); border:2px solid var(--accent); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding:26px 22px;
}
.voa-marca{
  font-size:1.5rem; font-weight:900; letter-spacing:.06em; color: var(--accent);
  margin-bottom:14px;
}
.voa-saludo{ font-size:1.05rem; font-weight:800; color: var(--text); margin:0 0 10px; }
.voa-texto{ font-size:.92rem; line-height:1.5; color: var(--text); margin:0 0 10px; }
.voa-tenue{ color: var(--text-dim); font-size:.84rem; }
.voa-pasos{
  font-size:.82rem; line-height:1.5; color: var(--text-dim);
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius);
  padding:10px 12px; margin:14px 0 16px; text-align:left;
}
.voa-pasos strong{ color: var(--text); }

/* Advertencia de borrado de foto: se ve como advertencia, no como un dialogo mas. */
.borrar-foto-modal{ width:min(92vw, 440px); text-align:center; }
.borrar-foto-modal .bf-icono{ font-size:2.1rem; line-height:1; margin-bottom:8px; }
.borrar-foto-modal .config-title{ color: var(--err); justify-content:center; }
.bf-texto{ font-size:.88rem; line-height:1.5; color: var(--text); margin:0 0 10px; }
.bf-tenue{ color: var(--text-dim); font-size:.82rem; }
.bf-codigo{
  font-family:var(--font-code); font-size:.8rem;
  background: var(--surface-2); padding:2px 6px; border-radius:3px; overflow-wrap:anywhere;
}
.borrar-foto-modal .ml-modal-actions{ justify-content:center; }
.bf-confirmar{ background: var(--err); color:#fff; border-color: var(--err); }
.bf-confirmar:hover:not(:disabled){ filter:brightness(1.12); }


/* ---------- Iconos de /iconos dentro de avisos (stock pendiente, proveedor sin logo) ---------- */
/* pointer-events:none: sin esto un arrastre sobre la imagen la "levanta". */
.acc-ico{ width:24px; height:24px; object-fit:contain; display:block; pointer-events:none; }

/* ---------- Dock de secciones (solo PC) ---------- */
/* Sustituye al desplegable ▸ del header. El borde animado va en el contenedor y no en un
   ::before del dock: el dock lleva backdrop-filter, que crea un contexto de apilamiento propio
   y deja un pseudo-elemento con z-index:-1 atrapado detrás de su propio fondo (invisible).
   Con el gradiente en el padre y 2px de padding, lo que se ve es justo el filo. */
.alba-dock-wrap{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:70; display:none; padding:2px; border-radius:18px;
  background: linear-gradient(90deg, var(--accent), var(--accent4), var(--accent2), var(--accent3), var(--accent));
  background-size:300% 100%;
  animation: dockBorde 9s linear infinite;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.alba-dock-wrap.show{ display:block; }
@keyframes dockBorde{ from{ background-position:0 0; } to{ background-position:300% 0; } }
/* Quien pidió menos movimiento no tiene por qué aguantar un borde girando todo el día. */
@media (prefers-reduced-motion: reduce){
  .alba-dock-wrap{ animation:none; }
}

.alba-dock{
  display:flex; align-items:flex-end; gap:18px;
  padding:10px 16px; border-radius:16px;
  background: rgba(18,19,23,.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* transform-origin abajo: al crecer, el icono sube en vez de desbordar el dock por debajo.
   El transform lo escribe el JS en cada mousemove (ver magnificar), por eso aquí no se toca. */
.dock-item{
  position:relative; flex:0 0 auto;
  width:48px; height:48px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px; color:#fff; cursor:pointer;
  transform-origin: bottom center;
  transition: transform .12s linear, background .15s, border-color .15s;
}
.dock-item:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.dock-item:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.dock-item-salir:hover{ background: rgba(248,113,113,.18); border-color: var(--err); color:#ffb4b4; }
/* pointer-events:none: sin esto el e.target del click es el <svg> o el <span>, no el botón. */
.dock-svg{ width:24px; height:24px; display:block; pointer-events:none; }

.dock-sep{
  flex:0 0 auto; width:1px; height:32px; margin:0 2px;
  background: rgba(255,255,255,.18); align-self:center;
}

/* El nombre de la sección, arriba del icono y solo al apuntarlo: el dock se queda limpio y aun
   así ningún icono es una adivinanza. */
.dock-label{
  position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%);
  white-space:nowrap; pointer-events:none;
  padding:5px 10px; border-radius:8px;
  background: rgba(10,11,13,.96); border:1px solid var(--border);
  font-size:.72rem; font-weight:700; color: var(--text);
  opacity:0; transition: opacity .14s;
}
.dock-item:hover .dock-label{ opacity:1; }

.dock-badge{
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; background: var(--accent); color:#04211c;
  font-size:.62rem; font-weight:900; pointer-events:none;
}
.dock-badge-warn{ background: var(--warn); color:#2a1a00; }

/* Con dock, el desplegable ▸ y el botón de Salir del header sobran: sus acciones están todas
   abajo. Los botones siguen en el DOM porque el dock les reenvía el click (y porque de su
   display sale qué secciones puede ver la cuenta, ver isUsable) — se esconde el contenedor,
   no cada botón. */
body.alba-con-dock .alba-menu-wrap{ display:none; }
body.alba-con-dock .alba-logout-btn{ display:none; }
/* Hueco para que el dock no tape el final de la página. */
body.alba-con-dock{ padding-bottom:104px; }

/* Con dock, el menú lateral deslizable sobra: son la misma lista de secciones, y la pestaña
   "Menú" se quedaba flotando contra el borde derecho de la pantalla sin nada que aportar.
   Se esconde la pestaña, el panel y su fondo — no se borran del DOM porque en cuanto la
   ventana se angosta (o se abre en una tablet) el dock desaparece y el menú vuelve a ser la
   única forma de llegar a las secciones. !important porque las reglas de .drawer-handle viven
   dentro de una media query y si no, ganan ellas. */
body.alba-con-dock .drawer-handle,
body.alba-con-dock .mobile-drawer,
body.alba-con-dock .drawer-backdrop{ display:none !important; }

/* Con un modal abierto el dock estorba: va en z-index 70 y los modales en 50, asi que se
   quedaba encima del cuadro de dialogo tapandole el pie (el boton de mandar, el de guardar).
   Subirle el z-index a los modales no bastaba: tambien hay que dejar de poder tocar el dock
   mientras se contesta algo, y el fondo oscuro del modal es justamente para que no haya nada
   mas que atender.
   Se esconde entero y vuelve al cerrarse, sin JS: :has() mira si hay algun .modal-overlay
   visible en la pagina. Todos los modales de A.L.B.A. usan esa misma clase — los del HTML y
   los que se arman desde el codigo — asi que esta regla los cubre a todos, incluidos los que
   se agreguen despues. */
body.alba-con-dock:has(.modal-overlay.show) .alba-dock-wrap{ display:none; }

/* Los tres accesos de arriba de Configuración (Mi cuenta, Apariencia, Transferencias). En
   columna y a todo el ancho: son destinos, no opciones de un formulario, y cada uno tiene que
   poder tocarse sin apuntar. */
/* En computadora los accesos van en rejilla y no en una columna larga: con diez botones, uno
   abajo del otro, la ventana no cabia en la pantalla y habia que desplazarla para llegar a los
   de Admin. auto-fit y no un numero fijo de columnas: asi pone dos o tres segun el ancho que
   tenga, y sigue sirviendo si manana hay doce botones. En celular, una sola columna. */
/* La ventana de Configuracion, mas ancha en computadora para que sus accesos quepan en rejilla.
   Va con su propia clase y no en .config-content porque esa la comparte la tarjeta del acceso,
   que debe seguir angosta. En celular manda el min(92vw, ...) de siempre. */
.config-ventana{ width:min(94vw, 760px); }
@media (max-width:680px){ .config-ventana{ width:min(92vw, 380px); } }

/* "Hay una version nueva": sale mientras la recarga espera a que termines lo que estabas
   haciendo. Tocarla recarga de inmediato. Ver intentar() en actualizar.js. */
.alba-hay-version{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:9998;
  padding:9px 16px; cursor:pointer;
  font-family: var(--font-ui, system-ui); font-size:.76rem; font-weight:800;
  color:#04211c; background: var(--accent, #1cc6a6);
  border:2px solid rgba(0,0,0,.25); border-radius:8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  animation: albaHayVersionEntra .25s ease-out both;
}
.alba-hay-version:hover{ filter: brightness(1.07); }
@keyframes albaHayVersionEntra{
  from{ opacity:0; transform: translate(-50%, 14px); }
  to{   opacity:1; transform: translate(-50%, 0); }
}

/* La misma tarjeta del horario, pero cuando A.L.B.A. SI esta abierta: el mismo dibujo con el
   color de "todo bien" en vez del ambar de "no es hora". Ver relojDeAccesoHtml. */
.horario-cerrado-aviso.abierta{
  border-color: color-mix(in srgb, var(--accent4) 55%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent4) 11%, transparent), transparent 70%),
    var(--surface-2);
}
.horario-cerrado-aviso.abierta .horario-cerrado-titulo,
.horario-cerrado-aviso.abierta .hcv-hora{ color: var(--accent4); }
.horario-cerrado-aviso.abierta .hr-esfera,
.horario-cerrado-aviso.abierta .hr-hora,
.horario-cerrado-aviso.abierta .hr-minuto{ stroke: var(--accent4); }
.horario-cerrado-aviso.abierta .hr-punto{ fill: var(--accent4); }

/* La pastilla del tema va DEBAJO de la version, no a su lado: las dos dicen "que trae esta
   A.L.B.A." y una al lado de la otra se leen como si fueran lo mismo. */
.login-version{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.login-version .alba-tema-chip{ margin:0; }

/* "Que tema trae A.L.B.A. hoy": pegado a la version en computadora, y como tarjeta en el
   Panel De Control en celular. Dice tambien POR QUE esta puesto — un tema que aparece sin
   explicacion se siente como que la app se descompuso. */
.alba-tema-chip{
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  font-size:.64rem; font-weight:700; color: var(--text); white-space:nowrap;
}
.alba-tema-chip-emblema{ font-size:.78rem; line-height:1; }
.alba-tema-chip-porque{ margin-left:auto;
 color: var(--text-dim); font-weight:600; }

.home-tema{
  display:flex; align-items:flex-start; gap:11px; margin:0 0 14px;
  padding:12px 14px; border-radius: var(--radius-lg, 8px);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
}
.home-tema-emblema{ font-size:1.5rem; line-height:1.1; flex:none; }
.home-tema-texto{ min-width:0; }
.home-tema-nombre{ font-size:.86rem; font-weight:700; color: var(--text); line-height:1.35; }
.home-tema-porque{ margin-top:3px; font-size:.74rem; font-weight:600; color: var(--accent); }
/* Quién está adentro, arriba de la versión. En el almacén se comparten tablets: saber de quién
   es la sesión antes de marcar algo como surtido evita el "¿y esto quién lo hizo?" de después. */
.alba-quien{
  --rol: var(--accent);
  display:flex; align-items:center; gap:9px;
  padding:7px 12px 7px 8px;
  border-radius:8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rol) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--rol) 40%, var(--border));
  box-shadow: var(--shadow-sm);
  white-space:nowrap;
}
/* La foto de la cuenta, o sus iniciales. El anillo toma el color del rol: de un vistazo se sabe
   quién está adentro y con qué permisos, que es justo lo que se mira antes de marcar algo. */
.alba-quien-foto{
  flex:none; width:30px; height:30px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rol) 65%, transparent);
}
.alba-quien-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.alba-quien-iniciales{
  font-family: var(--font-ui); font-size:.72rem; font-weight:800;
  color: var(--rol); letter-spacing:.02em;
}
.alba-quien-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.alba-quien-nombre{ font-size:.74rem; font-weight:800; color: var(--text); line-height:1.2; }
.alba-quien-rol{
  display:flex; align-items:center; gap:4px;
  font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color: var(--rol); line-height:1.2;
}
.alba-quien-rol-icono{ font-size:.58rem; line-height:1; }

/* El color de cada rol. Rojo para Administrador — el mismo que ya usa el menú lateral — y los
   demás con los acentos de la propia app, que cambian con el tema. */
.alba-quien.rol-admin{ --rol: var(--accent3, #ff4d73); }
.alba-quien.rol-moderador{ --rol: var(--accent2, #b6dd4f); }
.alba-quien.rol-almacen{ --rol: var(--accent, #1cc6a6); }
.alba-quien.rol-surtidor{ --rol: var(--accent4, #a3d139); }
.alba-quien.rol-laina{ --rol: var(--accent2, #b6dd4f); }
.alba-quien.rol-espectador{ --rol: var(--text-dim); }

/* El emblema dibujado de un tema (la bandera de México). Va en em para que crezca con el texto
   de donde se ponga, sin tener que ajustarlo en cada lugar. */
.alba-emblema-img{
  height:1em; width:auto; display:inline-block; vertical-align:-0.15em;
  border-radius:2px;
}
.tema-card-emblema .alba-emblema-img{ height:1.2em; }
.home-tema-emblema .alba-emblema-img{ height:1.4em; vertical-align:-0.1em; }

/* A.L.B.A. preguntando qué te parece su tema. Va pegada a la tarjeta del tema, como si fuera la
   misma conversación: por eso comparte el borde y no lleva uno propio arriba. */
.tema-pregunta{
  margin:-14px 0 14px; padding:12px 14px;
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-top:none; border-radius:0 0 var(--radius-lg, 8px) var(--radius-lg, 8px);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
}
.home-tema:has(+ .tema-pregunta){ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.tema-pregunta.contestada{
  border-color: color-mix(in srgb, var(--accent4) 45%, var(--border));
  background: color-mix(in srgb, var(--accent4) 8%, var(--surface-2));
}
.tema-pregunta-txt{ font-size:.84rem; line-height:1.5; color: var(--text); }
.tema-pregunta-icono{ font-size:.95rem; }
.tema-pregunta-btns{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.tema-op{
  flex:1 1 auto; padding:8px 12px; cursor:pointer;
  font-family: var(--font-ui); font-size:.78rem; font-weight:700;
  color: var(--text); background: var(--surface);
  border:1px solid var(--border); border-radius:8px;
  transition: border-color .12s, transform .1s var(--ease);
}
.tema-op:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.tema-pregunta-otra{ display:flex; gap:7px; margin-top:9px; }
.tema-pregunta-otra input{
  flex:1 1 auto; min-width:0; padding:8px 11px;
  font-family: var(--font-ui); font-size:.8rem; color: var(--text);
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
}
.tema-pregunta-otra input:focus{ outline:none; border-color: var(--accent); }
.tema-pregunta-otra .btn{ flex:none; width:auto; padding:8px 14px; font-size:.76rem; }

/* "Hay un tema fijado a mano": el aviso que explica por que no cambia solo con la fecha. */
.temas-quien{
  margin:10px 0 2px; padding:10px 13px;
  font-size:.78rem; line-height:1.5; color: var(--text-dim);
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius);
}
.temas-quien.fijado{
  color: var(--text);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface-2));
}
.temas-quien b{ color: var(--warn); }

/* El recuento, dentro de Temas: cómo le fue al tema que está puesto. */
.temas-opi{
  margin:12px 0 2px; padding:11px 13px;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius);
}
.temas-opi-cargando{ margin:12px 0 2px; font-size:.76rem; color: var(--text-dim); }
.temas-opi-cab{ font-size:.78rem; font-weight:700; color: var(--text); }
.temas-opi-cuenta{ display:flex; gap:12px; margin-top:7px; font-size:.9rem; font-weight:800; }
.temas-opi-si{ color: var(--accent4); }
.temas-opi-no{ color: var(--warn); }
.temas-opi-otra{ color: var(--accent); }
.temas-opi-lista{ list-style:none; margin:9px 0 0; padding:0; }
.temas-opi-lista li{
  padding:5px 0; font-size:.78rem; line-height:1.45; color: var(--text-dim);
  border-top:1px solid var(--border);
}
.temas-opi-lista li b{ color: var(--text); }

/* La frase del tema es lo que de verdad se lee de la tarjeta: en blanco y un poco más grande. */
.home-tema-dice{ margin-top:6px; font-size:.84rem; color: var(--text); line-height:1.5; }

.config-accesos{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:8px; margin:4px 0 6px; align-items:stretch;
}
@media (max-width:680px){
  .config-accesos{ grid-template-columns: 1fr; }
}
.config-acceso{
  width:100%; justify-content:flex-start; text-align:left;
  min-height:46px; padding:12px 14px; border-radius:10px;
  font-size:.9rem; font-weight:700;
}
.config-acceso:hover:not(:disabled){ border-color: var(--accent); color: var(--accent); }

/* Mi cuenta, Tamaño y apariencia y Transferencias Internas viven ahora dentro de Configuración.
   Los botones siguen en el DOM porque es a ellos a quienes Configuración les reenvía el click
   (y de ahí sale su comportamiento de siempre), pero ya no se muestran sueltos en el
   desplegable ▸ del header — si no, en una tablet seguirían saliendo por los dos lados. */
#myAccountBtn, #appearanceBtn, #warehouseTransferBtn,
#proveedoresSkuBtn, #accountsMenuBtn{ display:none !important; }

/* El contador de cuentas por aprobar, dentro de su acceso. Va pegado al texto y no en una
   esquina: el boton es un renglon completo y una esquina quedaria lejos de lo que cuenta. */
.config-acceso-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; margin-left:8px;
  border-radius:10px; background: var(--warn); color:#2a1a00;
  font-size:.7rem; font-weight:900;
}

/* ---------- El significado de A.L.B.A. junto al nombre, en el header ---------- */
/* Una palabra a la vez. Las cuatro juntas ("Agilidad · Localización · Búsqueda ·
   Almacenamiento") pasan de cincuenta caracteres y no caben al lado del buscador ni en un
   monitor grande.
   El ancho es fijo (en ch, o sea en anchos de caracter) y no lo decide el texto: si creciera
   con lo escrito, el header entero se estaria moviendo con CADA letra que se teclea. 16ch da
   para "Almacenamiento", que es la mas larga, mas el cursor. */
.alba-significado{
  position:relative; display:none;
  width:16ch; height:1.25em; flex:0 0 auto;
  margin-left:2px; padding-left:12px;
  border-left:1px solid var(--border);
  font-size:.62rem; font-weight:700; letter-spacing:.3px;
  color: var(--text-dim); text-transform:none;
  overflow:hidden;
}
/* Solo cuando de verdad sobra ancho. Abajo de esto el header ya va apretado entre el nombre,
   la sesion y el buscador, y el rotulo seria lo primero que empuje algo fuera de sitio. */
@media (min-width: 1100px){
  .alba-significado{ display:block; }
}

/* El texto que se va escribiendo, y el cursor que lo sigue. Las dos cosas van en el flujo
   normal, una detras de otra, para que el cursor quede pegado a la ultima letra escrita en vez
   de en un sitio fijo. */
.alba-significado-texto{ white-space:nowrap; }
.alba-significado-ini{ font-weight:900; }

/* El cursor es un borde y no el caracter "|": asi mide lo mismo con cualquier tipografia y no
   depende de que la fuente traiga esa barra con el grosor que convenga. */
.alba-significado-cursor{
  display:inline-block; width:0; height:1em; margin-left:2px;
  border-right:2px solid var(--accent);
  vertical-align:-2px;
  animation: albaCursorParpadea 1.05s steps(1) infinite;
}
@keyframes albaCursorParpadea{
  0%, 45%   { opacity:1; }
  50%, 95%  { opacity:0; }
  100%      { opacity:1; }
}

/* Quien pidio menos movimiento no tiene por que aguantar un texto escribiendose y borrandose
   todo el dia: el JS le deja la primera palabra escrita y quieta (ver
   pintarSignificadoDelHeader), y aqui se apaga el parpadeo del cursor. */
@media (prefers-reduced-motion: reduce){
  .alba-significado-cursor{ animation:none; opacity:1; }
}

/* Pie de paginas de "Tus ultimas busquedas", en el inicio. Ocupa el ancho completo de la
   rejilla (no una columna) y va pegado debajo de las tarjetas, sin el borde de arriba que
   lleva el pie de los reportes: aqui ya hay separacion de sobra entre secciones. */
.home-recent-pag{
  grid-column: 1 / -1;
  margin-top:12px; padding-top:0; border-top:0;
}

/* ---------- Recortar la foto antes de subirla ---------- */
.recorte-modal{
  background: var(--surface); border:2px solid var(--border); border-radius: var(--radius-lg);
  padding:18px; width:min(94vw, 420px); max-height:92vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:12px; box-shadow: var(--shadow-lg);
}
.recorte-escenario{ display:flex; justify-content:center; }
/* overflow:hidden es el recorte de verdad en la vista previa: la foto se mueve por debajo y
   solo se ve lo que cae dentro del marco, que es exactamente lo que se va a guardar. */
.recorte-marco{
  position:relative; overflow:hidden; touch-action:none; cursor:grab;
  background:#000; border:2px solid var(--accent); border-radius: var(--radius);
}
.recorte-marco:active{ cursor:grabbing; }
.recorte-img{
  position:absolute; top:0; left:0; transform-origin:0 0;
  max-width:none; user-select:none; -webkit-user-drag:none;
}
/* La mascarilla no recorta nada: solo oscurece lo que se va a quedar fuera, para verlo antes de
   aceptar. El recorte de verdad lo hace el canvas al guardar. box-shadow con un radio enorme
   pinta todo lo de afuera sin tener que dibujar cuatro cajas alrededor. */
.recorte-mascara{
  position:absolute; inset:0; pointer-events:none;
  box-shadow: 0 0 0 9999px rgba(4,4,6,.72);
}
.recorte-escenario[data-forma="circulo"] .recorte-mascara{ border-radius:50%; }
.recorte-escenario[data-forma="circulo"] .recorte-marco{ border-radius:50%; }
.recorte-zoom{ display:flex; align-items:center; gap:10px; color: var(--text-dim); font-weight:800; }
.recorte-zoom input{ flex:1; accent-color: var(--accent); }

/* ---------- Forma de recorte, dentro de Ajustes del producto ---------- */
.po-recorte{ display:flex; flex-direction:column; gap:6px; }
.po-recorte-opciones{ display:flex; flex-wrap:wrap; gap:7px; }
.po-recorte-op{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 12px; border-radius: var(--radius); cursor:pointer;
  background: var(--surface-2); color: var(--text);
  border:2px solid var(--border); font-family:inherit; font-size:.78rem; font-weight:700;
  transition: border-color .12s, color .12s, background .12s;
}
.po-recorte-op:hover{ border-color: var(--accent); }
.po-recorte-op.activo{ border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.po-recorte-icono{ font-size:1rem; }
/* De donde sale la forma cuando nadie eligio: asi se ve que se esta cambiando respecto a que. */
.po-recorte-auto{ font-size:.62rem; font-weight:700; color: var(--text-dim); text-transform:uppercase; letter-spacing:.4px; }
.po-recorte-estado{
  font-size:.76rem; line-height:1.4; padding:8px 10px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text);
}
/* Apagado se ve distinto a proposito: si no, parece que el recorte "no sirve" en vez de estar
   desactivado aqui. */
.po-recorte-estado.apagado{
  background: rgba(255,159,64,.10); border-color: rgba(255,159,64,.38); color:#ffc98a;
}

/* ---------- "A.L.B.A. dice": el asistente ---------- */
/* El rombo de la marca a la izquierda deja claro QUIEN habla: es A.L.B.A. diciendo algo de lo
   que tienes enfrente, no un cartel del sistema. El borde izquierdo grueso es lo mismo que
   hace la app con los avisos, asi que se lee como parte de la familia. */
.alba-dice{
  display:flex; align-items:flex-start; gap:10px;
  margin:0 0 14px; padding:11px 14px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius);
  font-size:.82rem; line-height:1.5; color: var(--text);
  /* La franja de la izquierda la pinta el ::before (ver mas abajo): antes era un borde plano y
     ahora lleva los colores de la marca en movimiento. El padding le deja su sitio. */
  position:relative; overflow:hidden; padding-left:17px;
  animation: albaDiceEntra .34s var(--ease) both;
}
.alba-dice-mark{
  flex-shrink:0; color: var(--accent); font-size:.72rem; line-height:1.6;
}
.alba-dice-texto{ min-width:0; }
.alba-dice strong{ color: var(--accent); }
.alba-dice em{ font-style:italic; color: var(--text-dim); }

/* Cuando lo que dice es "cuidado con esto" cambia de color: un aviso de que no hay existencia
   no puede verse igual que un consejo de como usar la app. */
.alba-dice-alerta{
  background: rgba(255,159,64,.10);
  border-color: rgba(255,159,64,.32); border-left-color: var(--accent2);
}
.alba-dice-alerta .alba-dice-mark,
.alba-dice-alerta strong{ color: var(--accent2); }

/* El saludo del inicio va mas discreto: se lee una vez al entrar y no tiene que competir con
   los atajos que estan debajo. */
.alba-dice-saludo{
  background: var(--surface-2);
  border-color: var(--border); border-left-color: var(--accent);
  color: var(--text-dim);
}
.alba-dice-saludo strong{ color: var(--text); }

@keyframes albaDiceEntra{
  from{ opacity:0; transform: translate(-8px, -3px); }
  to{ opacity:1; transform:none; }
}

/* ==================== Lo que dice A.L.B.A., con su voz ====================
   Eran tres renglones casi iguales: el saludo en gris apagado, el consejo en verde y el aviso
   en ambar, todos quietos. Ahora cada uno se reconoce de un vistazo y el rombo ◆ —que es la
   marca— late despacio, como si A.L.B.A. estuviera ahi.

   Todo va bajito a proposito: son mensajes que salen CADA VEZ que se abre una ficha o una
   seccion. Una animacion llamativa aqui cansaria a la tercera busqueda. */

/* La franja: los cuatro colores de la casa corriendo despacio. */
.alba-dice::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg,
    var(--accent) 0%, #b6dd4f 25%, var(--accent2) 50%, var(--accent3) 75%, var(--accent) 100%);
  background-size: 100% 300%;
  animation: albaDiceFranja 8s linear infinite;
}
@keyframes albaDiceFranja{
  from{ background-position: 0 0; }
  to{ background-position: 0 -300%; }
}

/* El rombo de la marca, latiendo. Es el unico movimiento que se queda despues de entrar: dice
   "esto lo dice A.L.B.A." sin necesidad de escribirlo. */
.alba-dice-mark{
  animation: albaDiceLate 2.8s ease-in-out infinite;
  transform-origin:center;
}
@keyframes albaDiceLate{
  0%, 100%{ opacity:.75; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.22); }
}

/* Un brillo que cruza el renglon UNA sola vez al aparecer: lo justo para que el ojo se vaya
   ahi cuando A.L.B.A. acaba de decir algo. */
.alba-dice::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(100deg, transparent 38%,
    color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: albaDiceBrillo 1.1s .18s var(--ease) 1 both;
}
@keyframes albaDiceBrillo{
  from{ transform: translateX(-100%); }
  to{ transform: translateX(100%); }
}

/* El aviso ("cuidado con esto") va en ambar y con la franja fija de ese color: un aviso no
   debe verse tan de la casa como un consejo, tiene que verse como un aviso. */
.alba-dice-alerta::before{
  background: var(--accent2); animation:none;
}
.alba-dice-alerta::after{
  background: linear-gradient(100deg, transparent 38%,
    color-mix(in srgb, var(--accent2) 16%, transparent) 50%, transparent 62%);
}
.alba-dice-alerta .alba-dice-mark{ animation-duration:1.9s; }

/* El saludo del inicio: ya no en gris muerto. Sigue siendo el mas discreto de los tres —se lee
   una vez al entrar y no compite con los atajos de abajo—, pero ahora se ve de la casa. */
.alba-dice-saludo{
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 11%, var(--surface-2)), var(--surface-2) 60%);
  color: var(--text);
}
.alba-dice-saludo .alba-dice-mark{ color: var(--accent); }

@media (prefers-reduced-motion: reduce){
  .alba-dice, .alba-dice::before, .alba-dice::after, .alba-dice-mark{ animation:none; }
  .alba-dice::after{ display:none; }
}

/* El − y el + del recorte. Cuadrados de 34px: antes eran texto suelto, se veian como botones y
   no hacian nada — ahora lo son, y de ese tamaño se les puede dar con el dedo. */
.recorte-zoom-btn{
  flex-shrink:0; width:34px; height:34px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--surface-2); color: var(--text);
  border:2px solid var(--border); border-radius: var(--radius);
  font-family:inherit; font-size:1.1rem; font-weight:900; line-height:1;
  cursor:pointer; user-select:none; touch-action:manipulation;
  transition: border-color .12s, color .12s;
}
.recorte-zoom-btn:hover{ border-color: var(--accent); color: var(--accent); }
.recorte-zoom-btn:active{ transform: translate(1px,1px); }

/* ---------- Lo que hay en una ubicación ---------- */
/* Agrupado por hueco: uno se para frente a un lugar del rack y quiere ver QUE hay ahi, no un
   revoltijo donde el mismo hueco aparece salteado entre 83 renglones. */
.ubic-hueco{
  margin-bottom:14px; border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; background: var(--surface);
}
.ubic-hueco-titulo{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; background: var(--surface-2); border-bottom:1px solid var(--border);
  font-family: var(--font-code); font-weight:800; font-size:.86rem; color: var(--accent);
}
.ubic-hueco-cuenta{
  margin-left:auto; min-width:22px; height:20px; padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background: var(--surface); border:1px solid var(--border);
  color: var(--text-dim); font-size:.68rem; font-weight:900;
}
.ubic-hueco-lista{ display:flex; flex-direction:column; }
.ubic-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; cursor:pointer; font-family:inherit;
  background:none; color: var(--text); border:0; border-bottom:1px solid var(--border);
  border-left:3px solid transparent;
  transition: background .1s, border-left-color .1s;
}
.ubic-item:last-child{ border-bottom:0; }
.ubic-item:hover{ background: var(--surface-2); border-left-color: var(--accent); }
.ubic-item-codigo{
  font-family: var(--font-code); font-weight:700; font-size:.8rem; color: var(--text);
  overflow-wrap:anywhere; flex:0 1 auto;
}
/* La descripcion se recorta a un renglon: en un hueco con 20 productos, dos lineas por cada uno
   convierten la lista en una pared de texto. El codigo es lo que se viene a leer. */
.ubic-item-nombre{
  flex:1; min-width:0; font-size:.72rem; color: var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ubic-item-cant{
  flex-shrink:0; margin-left:auto; font-weight:900; font-size:.86rem; color: var(--accent4);
}

/* ---------- El rack dibujado ---------- */
.rack-almacenes{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px; }
.rack-almacen-chip{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:7px 11px; border-radius: var(--radius); cursor:pointer; font-family:inherit;
  background: var(--surface-2); color: var(--text); border:2px solid var(--border);
  font-size:.82rem; font-weight:800; line-height:1.15;
  transition: border-color .12s, color .12s;
}
.rack-almacen-chip span{ font-size:.6rem; font-weight:700; color: var(--text-dim); text-transform:uppercase; letter-spacing:.3px; }
.rack-almacen-chip:hover{ border-color: var(--accent); }
.rack-almacen-chip.activo{ border-color: var(--accent); color: var(--accent); }
.rack-almacen-chip.activo span{ color: var(--accent); }
.rack-almacen-nombre{
  display:block; font-size:.62rem; font-weight:700; color: var(--text-dim);
  text-transform:uppercase; letter-spacing:.5px; margin-top:2px;
}

.rack-vista{
  margin:0 0 18px; padding:12px; border:1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface);
}
.rack-barra{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rack-flecha{
  flex-shrink:0; width:36px; height:36px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--surface-2); color: var(--text); border:2px solid var(--border);
  border-radius: var(--radius); font-size:1.3rem; font-weight:900; cursor:pointer;
  font-family:inherit; line-height:1;
}
.rack-flecha:hover:not(:disabled){ border-color: var(--accent); color: var(--accent); }
.rack-flecha:disabled{ opacity:.3; cursor:default; }
.rack-titulo{ flex:1; min-width:0; text-align:center; }
.rack-nombre{ display:block; font-family: var(--font-code); font-weight:900; font-size:1rem; color: var(--accent); }
.rack-sub{ display:block; font-size:.66rem; color: var(--text-dim); text-transform:uppercase; letter-spacing:.4px; font-weight:700; }

/* La rejilla: un renglon por altura y una columna por modulo. La primera columna es el rotulo
   de la altura, por eso el auto de mas. */
.rack-rejilla{
  display:grid; grid-template-columns: auto repeat(var(--cols), minmax(46px, 1fr));
  gap:5px; overflow-x:auto; padding-bottom:4px;
}
.rack-altura{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  padding-right:6px; min-width:58px;
}
.rack-altura-num{ font-weight:900; font-size:.9rem; color: var(--text); }
.rack-altura-txt{ font-size:.58rem; color: var(--text-dim); text-transform:uppercase; letter-spacing:.3px; font-weight:700; text-align:right; }

.rack-celda{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:56px; padding:6px 4px; cursor:pointer; font-family:inherit;
  border:2px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text);
  transition: border-color .12s, transform .08s var(--ease);
}
.rack-celda:hover{ border-color: var(--accent); transform: translateY(-1px); }
.rack-celda.activo{ border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.rack-celda-mod{ font-family: var(--font-code); font-size:.66rem; font-weight:900; color: var(--text-dim); }
.rack-celda-n{ font-size:.9rem; font-weight:900; line-height:1; }
.rack-celda-pz{ font-size:.58rem; color: var(--text-dim); font-weight:700; }
.rack-celda-vacio{ color: var(--text-dim); opacity:.5; font-weight:900; }

/* Tres estados y no un degradado: de un vistazo, a tres metros y con prisa, lo unico que se
   distingue es vacio / algo / lleno. */
.rack-vacio{ background: var(--surface); border-style:dashed; }
.rack-algo{ background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.rack-algo .rack-celda-n{ color: var(--accent); }
.rack-lleno{ background: color-mix(in srgb, var(--accent4) 20%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent4) 55%, var(--border)); }
.rack-lleno .rack-celda-n{ color: var(--accent4); }
/* Un hueco que no esta dado de alta en Odoo pero tiene existencias: se ve, pero distinto. */
.rack-inexistente{ opacity:.75; border-style:dotted; }

.rack-leyenda{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:12px;
  font-size:.66rem; color: var(--text-dim); font-weight:700;
}
.rack-leyenda span{ display:inline-flex; align-items:center; gap:5px; }
.rack-punto{ width:11px; height:11px; border-radius:3px; border:2px solid var(--border); display:inline-block; }

.rack-altura-pill{
  margin-left:8px; padding:2px 7px; border-radius:8px;
  background: var(--surface); border:1px solid var(--border);
  font-size:.6rem; font-weight:800; color: var(--text-dim); text-transform:uppercase; letter-spacing:.3px;
}
.rack-hueco-pie{ margin:-6px 0 14px; font-size:.7rem; color: var(--text-dim); font-weight:700; text-align:right; }

/* Al cambiar de rack entra por el lado hacia el que se fue. */
@keyframes rackEntraDer{ from{ opacity:0; transform: translateX(18px); } to{ opacity:1; transform:none; } }
@keyframes rackEntraIzq{ from{ opacity:0; transform: translateX(-18px); } to{ opacity:1; transform:none; } }
.rack-entra-der{ animation: rackEntraDer .2s var(--ease) both; }
.rack-entra-izq{ animation: rackEntraIzq .2s var(--ease) both; }
@media (prefers-reduced-motion: reduce){
  .rack-entra-der, .rack-entra-izq{ animation:none; }
}

/* Sugerencia de ubicación en el buscador. */
.ac-ubic .ac-code{ font-family: var(--font-code); }


/* Cuantos niveles se dejaron de dibujar por estar vacios: sin decirlo, parece que el rack
   tiene menos niveles de los que tiene. */
.rack-escondidos{
  margin-top:10px; font-size:.68rem; color: var(--text-dim); font-weight:700;
}

/* El boton de copiar la liga va separado de las flechas: no es navegacion. */
.rack-copiar{ font-size:.95rem; }

/* ---------- Versión de A.L.B.A. (login, menú lateral y dock) ---------- */
/* Pastilla: punto verde que late ("esta al dia"), "A.L.B.A." y el numero de version (V2.8.0)
   en su propia etiqueta. La fecha y el commit van en el title. El borde lleva los cuatro colores de la marca, igual que el dock. Es el
   mismo HTML en los tres lugares (albaVersionHtml en script.js). */
.login-version, .drawer-version{ display:flex; justify-content:center; }
.login-version{ margin-top:12px; }
.drawer-version{ padding:6px 12px 12px; }

.alba-ver{
  --ver-borde: linear-gradient(90deg, var(--accent), var(--accent4), var(--accent2), var(--accent3));
  position:relative; display:flex; align-items:center; gap:7px;
  padding:6px 10px; border-radius:8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-family: var(--font-code, 'JetBrains Mono', monospace);
  font-size:.66rem; font-weight:700; letter-spacing:.3px; color: var(--text);
  white-space:nowrap; line-height:1;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
/* Borde degradado de 1.5px con mask: sigue la curva de la pastilla y no pinta el fondo. */
.alba-ver::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background: var(--ver-borde); pointer-events:none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity:.85;
}
.alba-ver-punto{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:#1cc6a6; box-shadow: 0 0 0 0 rgba(28,198,166,.6);
  animation: albaVerLate 2.4s ease-out infinite;
}
@keyframes albaVerLate{
  0%  { box-shadow: 0 0 0 0 rgba(28,198,166,.55); }
  70% { box-shadow: 0 0 0 6px rgba(28,198,166,0); }
  100%{ box-shadow: 0 0 0 0 rgba(28,198,166,0); }
}
.alba-ver-etiqueta{
  font-size:.56rem; font-weight:900; letter-spacing:.9px; text-transform:uppercase;
  color: var(--text-dim);
}
.alba-ver-sha{ margin-left:auto;

  font-size:.72rem; letter-spacing:.4px;
  padding:3px 8px; border-radius:8px;
  background: color-mix(in srgb, #1cc6a6 16%, transparent);
  border:1px solid color-mix(in srgb, #1cc6a6 45%, transparent);
  color:#5eead4; font-weight:800;
}
/* Sin build no hay version publicada: gris y sin latido, para que no parezca la de verdad. */
.alba-ver-dev .alba-ver-punto{ background: var(--text-dim); animation:none; }
.alba-ver-dev::before{ opacity:.35; }

/* Salir es el último del dock: su globo se alinea a su derecha para no salirse de la pantalla. */
.dock-item-salir .dock-label{ left:auto; right:-6px; transform:none; text-align:right; }
/* En PC: la version fija en la esquina inferior derecha, chica y un poco transparente hasta que
   se le pasa el mouse. Solo con el dock activo (PC con sesion); en celular va en el menu. */
.alba-version-esquina{
  position:fixed; right:14px; bottom:14px; z-index:60; display:none;
  opacity:.7; transform: scale(.9); transform-origin: bottom right;
  transition: opacity .15s;
}
.alba-version-esquina:hover{ opacity:1; }
body.alba-con-dock .alba-version-esquina{
  display:flex; flex-direction:column; align-items:stretch; gap:6px;
}
.alba-version-esquina .alba-quien{ order:1; }
.alba-version-esquina .alba-tema-chip{ order:2; }
.alba-version-esquina .alba-ver{ order:3; }
body.alba-con-dock:has(.modal-overlay.show) .alba-version-esquina{ display:none; }

@media (prefers-reduced-motion: reduce){
  .alba-ver-punto{ animation:none; }
}


/* Formas del recorte, elegibles al tomar la foto (Sin recortar / Circular / Cuadrada / Rectangular). */
.recorte-formas{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:2px 0 8px; }
.recorte-forma-btn{
  padding:7px 11px; border-radius:8px; cursor:pointer; font-family:inherit;
  font-size:.76rem; font-weight:800; color: var(--text-dim);
  background: var(--surface-2); border:1.5px solid var(--border);
  transition: border-color .12s, color .12s, background .12s;
}
.recorte-forma-btn:hover{ border-color: var(--accent); color: var(--text); }
.recorte-forma-btn.activo{ color:#04211c; background: var(--accent); border-color: var(--accent); }
/* Sin recortar: la foto se ve completa, sin mascara que tape nada. */
.recorte-escenario[data-forma="ninguno"] .recorte-mascara{ display:none; }
/* Recorte libre: la foto completa y encima un recuadro que se mueve y se estira de sus esquinas.
   Lo de afuera se oscurece con la misma sombra enorme de la mascarilla. */
.recorte-escenario[data-forma="libre"] .recorte-mascara{ display:none; }
.recorte-escenario[data-forma="libre"] .recorte-marco{ cursor:default; }
.recorte-sel{
  position:absolute; box-sizing:border-box; cursor:move; touch-action:none;
  border:2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(4,4,6,.62);
}
.recorte-sel[hidden]{ display:none; }
.recorte-asa{
  /* Por dentro de las esquinas: el marco recorta lo que sale (overflow:hidden), y una asa
     cortada a la mitad en la orilla de la foto no se alcanzaria a agarrar. */
  position:absolute; width:22px; height:22px; border-radius:50%; touch-action:none;
  background: var(--accent); border:2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.recorte-asa[data-asa="nw"]{ left:-3px; top:-3px; cursor:nwse-resize; }
.recorte-asa[data-asa="ne"]{ right:-3px; top:-3px; cursor:nesw-resize; }
.recorte-asa[data-asa="sw"]{ left:-3px; bottom:-3px; cursor:nesw-resize; }
.recorte-asa[data-asa="se"]{ right:-3px; bottom:-3px; cursor:nwse-resize; }
.recorte-escenario[data-forma="ninguno"] .recorte-marco{ cursor:default; }


/* Foto del creador en el acceso: se abre en grande al tocarla. */
.login-creator-zoom{ cursor: zoom-in; transition: transform .15s var(--ease), box-shadow .15s; }
.login-creator-zoom:hover{ transform: scale(1.08); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }

/* Acceso de Admin en el login. Era una linea de texto rojo a secas, colgando debajo del campo:
   se leia como un error ("usuario invalido") cuando en realidad esta confirmando que vas por el
   camino correcto. Ahora es la misma tarjeta que la de "cuenta encontrada" —mismo sitio, misma
   forma— pero en rojo y con un escudo, porque eso es lo que la distingue. */
.login-email-hint.es-admin{
  background: linear-gradient(90deg, color-mix(in srgb, var(--err) 16%, transparent), color-mix(in srgb, var(--err) 4%, transparent));
  border-left-color: var(--err);
}
.login-email-hint.es-admin.show{
  border-color: color-mix(in srgb, var(--err) 35%, transparent);
  border-left-color: var(--err);
}
.login-email-hint.es-admin .leh-label{ color: var(--err); }
.leh-icono-admin{
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 55%, transparent);
  animation: escudoLate 2.4s ease-in-out infinite;
}
@keyframes escudoLate{
  0%, 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--err) 42%, transparent); }
  60%{ box-shadow: 0 0 0 6px transparent; }
}
.leh-admin-nota{ font-size:.75rem; color: var(--text); opacity:.88; line-height:1.3; }
.leh-admin-nota strong{ font-weight:800; color: var(--text); }
@media (prefers-reduced-motion: reduce){ .leh-icono-admin{ animation:none; } }

/* ==================== Encabezado del acceso ====================
   Era "🔒 Iniciar sesion" en un renglon con el estilo de una etiqueta de formulario: el
   emoji metido dentro del texto, sin tamaño propio, y nada que dijera donde estas cuando la
   misma tarjeta sirve para entrar normal, para la contraseña de Admin y para el modo
   desarrollador. Ahora el icono tiene su marco, hay un subtitulo, y el color cambia con el
   modo: verde-agua para entrar normal, rojo para Admin, ambar para desarrollador. */
.login-head{
  --head-color: var(--accent);
  display:flex; align-items:center; gap:12px;
  padding-bottom:14px; margin-bottom:2px;
  border-bottom:2px solid var(--border);
}
.login-head.es-admin{ --head-color: var(--err); }
.login-head.es-root{ --head-color: var(--warn); }

.login-head-icono{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:none; border-radius:12px; font-size:1.15rem;
  background: color-mix(in srgb, var(--head-color) 13%, var(--surface-2));
  border:2px solid color-mix(in srgb, var(--head-color) 55%, transparent);
}
.login-head-textos{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.login-head-titulo{
  font-size:1.02rem; font-weight:800; line-height:1.15; color: var(--text);
  letter-spacing:.2px;
}
.login-head.es-admin .login-head-titulo,
.login-head.es-root .login-head-titulo{ color: var(--head-color); }
.login-head-sub{ font-size:.74rem; color: var(--text-dim); line-height:1.3; }


/* ---------- Tarjeta de la cuenta en el menú lateral ----------
   Franja con los cuatro colores de la marca arriba, aro de la foto con esos mismos colores
   girando despacio (rojo si es Admin), saludo segun la hora, nombre grande, @usuario y el rol
   como pastilla con su punto de color. */
@media (max-width:680px){
  .mobile-drawer-user{
    /* flex:none — el menu es una columna flex y con muchos renglones (Admin) la apretaba
       hasta cortarla. */
    flex:none;
    position:relative; overflow:hidden;
    padding:18px 16px 16px; gap:16px; border-radius:16px;
    background:
      radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
      linear-gradient(160deg, var(--surface-2), var(--surface));
    border:1.5px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
  }
  .mobile-drawer-user::before{
    content:''; position:absolute; left:0; right:0; top:0; height:4px;
    background: linear-gradient(90deg, var(--accent), var(--accent4), var(--accent2), var(--accent3));
  }
  body.role-admin .mobile-drawer-user{
    background:
      radial-gradient(120% 90% at 0% 0%, rgba(255,95,95,.16), transparent 60%),
      linear-gradient(160deg, var(--surface-2), var(--surface));
    border-color: rgba(255,95,95,.35);
  }

  /* Aro degradado: un fondo conic girando detras de la foto, que tapa todo menos el borde. */
  .drawer-avatar-wrap{ padding:3px; border-radius:50%; }
  .drawer-avatar-wrap::before{
    content:''; position:absolute; inset:0; border-radius:50%;
    background: conic-gradient(var(--accent), var(--accent4), var(--accent2), var(--accent3), var(--accent));
    animation: drawerAro 6s linear infinite;
  }
  body.role-admin .drawer-avatar-wrap::before{
    background: conic-gradient(#ff5f5f, #ff9f40, #ff4d73, #ff5f5f);
  }
  @keyframes drawerAro{ to{ transform: rotate(360deg); } }
  .drawer-avatar{
    position:relative; width:66px; height:66px;
    border:3px solid var(--surface); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  }
  body.role-admin .drawer-avatar{ border-color: var(--surface); }
  .drawer-avatar-edit{ z-index:1; right:-2px; bottom:-2px; border-color: var(--surface); }

  .drawer-user-text{ gap:4px; }
  .drawer-user-saludo{
    font-size:.64rem; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color: var(--text-dim);
  }
  .mobile-drawer-user-name{ font-size:1.12rem; font-weight:900; line-height:1.15; }
  .drawer-user-usuario{
    font-family: var(--font-code, 'JetBrains Mono', monospace); font-size:.72rem; color: var(--text-dim);
  }
  .mobile-drawer-user-role{
    align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:3px;
    padding:3px 10px; border-radius:8px; font-size:.64rem; letter-spacing:.8px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .mobile-drawer-user-role.rol-admin{ background: rgba(255,95,95,.14); border-color: rgba(255,95,95,.5); }
  .drawer-rol-punto{
    width:6px; height:6px; border-radius:50%; background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
  }
}
@media (max-width:680px) and (prefers-reduced-motion: reduce){
  .drawer-avatar-wrap::before{ animation:none; }
}

/* ---------- Entrada animada del acceso ----------
   El banner baja, la tarjeta sube, y sus campos y botones van apareciendo uno tras otro; al
   final la tarjeta del creador y la version. Se repite cada vez que se muestra el acceso. */
#loginOverlay.login-entra .login-banner-slot{ animation: loginBaja .5s var(--ease) both; }
#loginOverlay.login-entra .login-card{ animation: loginSube .55s .08s var(--ease) both; }
#loginOverlay.login-entra .login-card > *{ animation: loginAparece .45s var(--ease) both; }
#loginOverlay.login-entra .login-card > *:nth-child(1){ animation-delay:.18s; }
#loginOverlay.login-entra .login-card > *:nth-child(2){ animation-delay:.23s; }
#loginOverlay.login-entra .login-card > *:nth-child(3){ animation-delay:.28s; }
#loginOverlay.login-entra .login-card > *:nth-child(4){ animation-delay:.33s; }
#loginOverlay.login-entra .login-card > *:nth-child(5){ animation-delay:.38s; }
#loginOverlay.login-entra .login-card > *:nth-child(6){ animation-delay:.43s; }
#loginOverlay.login-entra .login-card > *:nth-child(7){ animation-delay:.48s; }
#loginOverlay.login-entra .login-card > *:nth-child(n+8){ animation-delay:.53s; }
#loginOverlay.login-entra .login-creator{ animation: loginAparece .5s .6s var(--ease) both; }
#loginOverlay.login-entra .login-version{ animation: loginAparece .5s .7s var(--ease) both; }
/* El boton de Entrar brilla una vez al terminar de aparecer: ahi es donde se va a tocar. */
#loginOverlay.login-entra #loginSubmitBtn{ position:relative; overflow:hidden; }
#loginOverlay.login-entra #loginSubmitBtn::after{
  content:''; position:absolute; top:0; bottom:0; width:40%; left:-50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  animation: loginBrillo 1s .9s var(--ease) both; pointer-events:none;
}
@keyframes loginBaja{ from{ opacity:0; transform: translateY(-14px); } to{ opacity:1; transform:none; } }
@keyframes loginSube{ from{ opacity:0; transform: translateY(22px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes loginAparece{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes loginBrillo{ to{ left:130%; } }
@media (prefers-reduced-motion: reduce){
  #loginOverlay.login-entra .login-banner-slot,
  #loginOverlay.login-entra .login-card,
  #loginOverlay.login-entra .login-card > *,
  #loginOverlay.login-entra .login-creator,
  #loginOverlay.login-entra .login-version{ animation:none; }
  #loginOverlay.login-entra #loginSubmitBtn::after{ display:none; }
}

/* ---------- Visor de la foto del creador ----------
   Solo para mirar: la foto grande en un aro con los colores de la marca, su nombre y nada mas
   (sin guardar). Encima del acceso. */
.creador-visor{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background: rgba(4,4,6,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: creadorFondo .2s ease both;
}
.creador-visor.sale{ animation: creadorFondoSale .18s ease both; }
.creador-visor-caja{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  animation: creadorCaja .35s var(--ease) both;
}
.creador-visor-aro{
  width:min(78vw, 360px); aspect-ratio:1/1; border-radius:50%; padding:5px;
  background: conic-gradient(var(--accent), var(--accent4), var(--accent2), var(--accent3), var(--accent));
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.creador-visor-aro img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;
  border:4px solid var(--bg); -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none; pointer-events:none;
}
.creador-visor-label{
  margin-top:8px; font-size:.66rem; font-weight:900; letter-spacing:1.2px; text-transform:uppercase;
  color: var(--accent);
}
.creador-visor-nombre{ font-size:1.4rem; font-weight:900; color: var(--text); }
.creador-visor-cerrar{
  position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%;
  background: var(--surface-2); color: var(--text); border:2px solid var(--border);
  font-size:1rem; cursor:pointer;
}
.creador-visor-cerrar:hover{ border-color: var(--accent); }
@keyframes creadorFondo{ from{ opacity:0; } to{ opacity:1; } }
@keyframes creadorFondoSale{ to{ opacity:0; } }
@keyframes creadorCaja{ from{ opacity:0; transform: scale(.85); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .creador-visor, .creador-visor-caja{ animation:none; }
}

/* Significado de A.L.B.A. escribiendose debajo del nombre en el acceso. Alto fijo para que la
   tarjeta no brinque mientras se escribe y se borra. */
.login-banner-slot .alba-banner-body{ flex-wrap:wrap; }
.login-significado{
  /* Renglon propio debajo del nombre: el cuerpo del banner acomoda en fila. */
  flex:1 1 100%; width:100%;
  display:flex; justify-content:center; align-items:center;
  height:1.4em; margin-top:6px;
  font-size:.8rem; font-weight:700; letter-spacing:.6px; color: var(--text-dim);
  white-space:nowrap; overflow:hidden;
}
.login-significado .alba-significado-ini{ font-weight:900; }

/* Significado de A.L.B.A. escribiendose debajo del nombre en el banner de la app, solo en
   celular y tablet (abajo de 1100px, donde el rotulo del header no cabe). Ahi reemplaza a la
   lista fija de las cuatro palabras para no decir lo mismo dos veces. */
.app-significado{
  display:none; justify-content:center; align-items:center;
  height:1.4em; margin-top:-2px;
  font-size:.78rem; font-weight:700; letter-spacing:.6px; color: var(--text-dim);
  white-space:nowrap; overflow:hidden;
}
.app-significado .alba-significado-ini{ font-weight:900; }
@media (max-width: 1099px){
  #albaBannerSlot .app-significado{ display:flex; }
  #albaBannerSlot .alba-banner-words{ display:none !important; }
}

/* Final del significado: las cuatro palabras juntas. Puede ocupar dos renglones en un celular
   angosto, asi que aqui se suelta el alto fijo; entra con un fundido y el cursor se va. */
.login-significado.significado-completo,
.app-significado.significado-completo{
  height:auto; min-height:1.4em; white-space:normal; flex-wrap:wrap; text-align:center;
  line-height:1.45;
}
.significado-completo .alba-significado-texto{ white-space:normal; animation: significadoJunto .5s var(--ease) both; }
.significado-completo .alba-significado-cursor{ display:none; }
.alba-significado-palabra{ white-space:nowrap; }
.alba-significado-punto{ color: var(--border); }
@keyframes significadoJunto{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform:none; } }

/* ==================== Horario de acceso (vista propia) ====================
   Vivia apretado dentro de Configuracion: cinco campos de hora y tres avisos en una columna de
   380px, uno encima de otro, sin que se entendiera que el sabado es OTRO horario y no la
   continuacion del de entre semana. Aqui cada dia es una tarjeta con su rango a la vista, y el
   domingo se ve cerrado de un golpe. Se abre desde Configuracion (solo Admin). */

.horario-modal{
  width:min(94vw, 820px); max-height:90vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:16px; padding:20px;
}

.horario-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.horario-head-title{ display:flex; align-items:center; gap:12px; }
.horario-head-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex-shrink:0; border-radius:12px; font-size:1.3rem;
  border:2px solid var(--border); background: var(--surface-2);
}
.horario-head-nombre{ font-size:1.02rem; font-weight:800; line-height:1.2; }
.horario-head-sub{ font-size:.75rem; color:var(--text-dim); margin-top:2px; }

/* Abierta / cerrada AHORA MISMO. Lo dice el servidor (?horario=1), no el reloj del aparato:
   con la hora del celular cambiada, este chip mentiria. */
.horario-estado{
  flex-shrink:0; padding:5px 11px; border-radius:8px;
  font-size:.68rem; font-weight:900; letter-spacing:.6px; text-transform:uppercase;
  border:2px solid var(--border); color:var(--text-dim); background:var(--surface-2);
  white-space:nowrap;
}
.horario-estado.abierta{ color:var(--ok); border-color:var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.horario-estado.cerrada{ color:var(--err); border-color:var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }

/* Interruptor general. La casilla de verdad se esconde (no se borra: el label la sigue
   accionando, y con teclado tambien). */
.horario-switch{
  display:flex; align-items:center; gap:13px; cursor:pointer;
  padding:13px 14px; border-radius:12px;
  border:2px solid var(--border); background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.horario-switch:hover{ border-color: var(--accent); }
.horario-switch input{ position:absolute; opacity:0; width:0; height:0; }
.horario-switch-pista{
  position:relative; flex-shrink:0; width:46px; height:26px; border-radius:8px;
  background: var(--border); transition: background .18s;
}
.horario-switch-bolita{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background: var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.5); transition: transform .18s;
}
.horario-switch input:checked + .horario-switch-pista{ background: var(--accent); }
.horario-switch input:checked + .horario-switch-pista .horario-switch-bolita{ transform: translateX(20px); }
.horario-switch input:focus-visible + .horario-switch-pista{ outline:2px solid var(--accent); outline-offset:3px; }
.horario-switch-texto{ display:flex; flex-direction:column; gap:2px; line-height:1.3; }
.horario-switch-texto strong{ font-size:.87rem; font-weight:800; }
.horario-switch-texto small{ font-size:.73rem; color:var(--text-dim); }

/* Con el candado apagado, las tarjetas se ven inertes: siguen editables (para dejar las horas
   listas antes de encenderlo) pero ya no parecen estar rigiendo nada. */
/* En computadora los bloques de dias van lado a lado y la ventana se acuesta: era una columna
   de 520 x 756 px, mas alta que ancha, que obligaba a desplazar para llegar a Guardar. En
   celular sigue en columna, que es la unica forma que cabe. */
.horario-dias{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:10px; transition: opacity .18s;
}
.horario-dias.apagado{ opacity:.45; }

.horario-dia{
  border:2px solid var(--border); border-radius:12px; background: var(--surface-2);
  padding:12px 14px; display:flex; flex-direction:column; gap:10px;
}
.horario-dia-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.horario-dia-nombre{ font-size:.85rem; font-weight:800; }
.horario-dia-rango{
  font-family: var(--font-code); font-size:.74rem; font-weight:700; color: var(--accent);
  white-space:nowrap;
}
.horario-dia-campos{ display:flex; align-items:flex-end; gap:10px; }
.horario-campo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.horario-campo label{
  font-size:.66rem; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  color: var(--text-dim);
}
.horario-campo input[type="time"]{
  width:100%; padding:9px 10px; font-size:.92rem; font-weight:700;
  font-family: var(--font-code);
  border:2px solid var(--border); border-radius:8px;
  background: var(--surface); color: var(--text);
}
.horario-campo input[type="time"]:focus{ border-color: var(--accent); outline:none; }
.horario-flecha{ padding-bottom:10px; color: var(--text-dim); font-size:.9rem; flex-shrink:0; }

.horario-dia-cerrado{ border-style:dashed; }
.horario-dia-cerrado .horario-dia-rango{ color: var(--text-dim); }
.horario-dia-nota{ font-size:.75rem; color: var(--text-dim); }

.horario-aviso{
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 13px; border-radius:10px;
  border:2px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  font-size:.76rem; line-height:1.45; color: var(--text);
}
.horario-aviso-icono{ flex-shrink:0; font-size:.95rem; }

/* Pegadas al pie: la vista tiene scroll propio (cinco campos y tres avisos no caben en la
   pantalla de un celular), y con los botones al final del todo habia que bajar hasta abajo
   para guardar — en la primera prueba en 390px ni se veian. */
.horario-acciones{
  position:sticky; bottom:-20px; z-index:1;
  display:flex; gap:10px; justify-content:flex-end;
  margin:0 -20px -20px; padding:14px 20px;
  background: var(--surface); border-top:2px solid var(--border);
}

/* El chip verde/rojo tambien en el boton de Configuracion, para saber como esta el candado sin
   tener que entrar a la vista. */
.config-acceso-chip{
  margin-left:auto; padding:3px 9px; border-radius:8px;
  font-size:.62rem; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
  border:1.5px solid currentColor;
}
.config-acceso-chip.abierta{ color: var(--ok); }
.config-acceso-chip.cerrada{ color: var(--err); }
.config-acceso-chip:empty{ display:none; }

/* En celular los dos campos de hora no caben lado a lado con la flecha en medio. */
@media (max-width:420px){
  .horario-dia-campos{ flex-direction:column; align-items:stretch; gap:8px; }
  .horario-flecha{ display:none; }
  .horario-head{ flex-direction:column; align-items:flex-start; }
}

/* ============ "La app esta cerrada": el aviso de horario en el acceso ============
   Era un renglon de texto rojo debajo de los campos, con la misma pinta que "contrasena
   incorrecta". No es lo mismo: quien llega a las 7 de la manana no se equivoco en nada, solo
   llego antes. Asi que aqui no hay rojo de error, hay un reloj andando y la hora de regreso
   grande, que es el unico dato que esa persona necesita. */

/* La animacion se reinicia en cada aviso nuevo (ver mostrarAvisoDeSalida). */
#loginAvisoSalida.aviso-entra{ animation: avisoEntra .38s cubic-bezier(.2,.9,.25,1) both; }
@keyframes avisoEntra{
  from{ opacity:0; transform: translateY(-8px) scale(.97); }
  to{ opacity:1; transform: none; }
}

.horario-cerrado-aviso{
  display:flex; flex-direction:column; gap:12px;
  padding:15px 16px; border-radius:12px; text-align:left;
  border:2px solid color-mix(in srgb, var(--warn) 50%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--warn) 11%, transparent), transparent 70%),
    var(--surface-2);
}

.horario-cerrado-cab{ display:flex; align-items:flex-start; gap:13px; }
.horario-cerrado-textos{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.horario-cerrado-titulo{
  font-size:.92rem; font-weight:800; line-height:1.25; color: var(--warn);
  letter-spacing:.2px;
}
.horario-cerrado-detalle{ font-size:.79rem; line-height:1.45; color: var(--text); opacity:.85; }

/* El reloj. La manecilla grande da una vuelta cada 3s y la chica cada 36s: no marca una hora
   de verdad, dice "el tiempo esta corriendo, todavia no toca". */
.horario-aviso-reloj{ width:40px; height:40px; flex-shrink:0; }
.hr-esfera{ fill: color-mix(in srgb, var(--warn) 14%, transparent); stroke: var(--warn); stroke-width:2.5; }
.hr-punto{ fill: var(--warn); }
.hr-hora, .hr-minuto{
  stroke: var(--warn); stroke-linecap:round; transform-origin:24px 24px;
}
.hr-hora{ stroke-width:3; animation: relojGira 36s linear infinite; }
.hr-minuto{ stroke-width:2; animation: relojGira 3s linear infinite; }
@keyframes relojGira{ to{ transform: rotate(360deg); } }

/* La hora de regreso: lo unico que hay que leer si se viene con prisa. */
.horario-cerrado-vuelve{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 13px; border-radius:10px;
  background: var(--surface);
  border:2px solid color-mix(in srgb, var(--warn) 35%, var(--border));
}
.hcv-etiqueta{
  font-size:.64rem; font-weight:900; letter-spacing:1px; text-transform:uppercase;
  color: var(--text-dim);
}
.hcv-hora{
  font-family: var(--font-code); font-size:.95rem; font-weight:800; color: var(--warn);
  /* Un latido muy lento, casi imperceptible: llama al ojo sin ponerse a parpadear encima. */
  animation: horaLate 2.6s ease-in-out infinite;
}
@keyframes horaLate{ 0%,100%{ opacity:1; } 50%{ opacity:.62; } }

/* Quien pidio menos movimiento no ve ninguno: ni el reloj, ni el latido, ni la entrada. */
@media (prefers-reduced-motion: reduce){
  #loginAvisoSalida.aviso-entra{ animation:none; }
  .hr-hora, .hr-minuto, .hcv-hora{ animation:none; }
}

/* ==================== El acceso, en dos columnas ====================
   Era una columna de 360px con seis bloques en fila india: titulo, usuario, contrasena,
   mensaje, "Entrar", y los dos enlaces de abajo. En una pantalla de PC eso deja el boton a
   media pantalla de lo ultimo que se escribio, y un monton de aire a los lados.

   Ahora, de 760px para arriba, lo que se ESCRIBE va a la izquierda y lo que se PRESIONA a la
   derecha, con una linea divisoria en medio. El titulo y el aviso siguen cruzando de lado a
   lado: son de toda la tarjeta, no de una columna. En celular no cambia nada (una sola
   columna), que es donde se usa a diario. */

.login-wrap{ position:relative; z-index:1; width:min(92vw, 360px); }

.login-cols{ display:flex; flex-direction:column; gap:14px; }
.login-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }

@media (min-width:760px){
  .login-wrap{ width:min(94vw, 680px); }

  .login-cols{
    flex-direction:row; align-items:stretch; gap:26px;
  }
  .login-col-campos{ flex:1.15; justify-content:flex-start; }
  /* La linea que separa lo que se escribe de lo que se presiona. */
  .login-col-acciones{
    flex:1; justify-content:center; gap:12px;
    padding-left:26px; border-left:2px solid var(--border);
  }
  /* El boton "Entrar" manda en su columna: es lo que se viene a hacer aqui. */
  .login-col-acciones .config-actions .btn-primary{
    min-height:52px; font-size:.95rem; letter-spacing:.5px;
  }
  /* Los dos enlaces de abajo dejan de ser un renglon apretado: uno encima del otro, con aire. */
  .login-col-acciones .login-links{ flex-direction:column; gap:9px; margin-top:2px; }
  .login-col-acciones .login-links .login-alt-btn{ width:100%; justify-content:center; }

  /* La tarjeta se ensancha con el contenedor. */
  .login-card{ max-width:none; }
}

/* En la pantalla ancha, el aviso de horario y el mensaje de error no deben estirarse a lo
   largo de toda la tarjeta: se leen mejor en una medida corta. */
@media (min-width:760px){
  .login-aviso-salida{ max-width:none; }
}

/* ==================== Llaves de acceso (huella / rostro) ==================== */

/* El boton del acceso. Va en el color de la marca pero SIN relleno: "Entrar" sigue siendo el
   camino principal, este es el atajo de quien ya creo su llave. */
.login-passkey-btn{
  width:100%; justify-content:center; gap:9px;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent);
}
.login-passkey-btn:hover:not(:disabled){
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* Mientras el aparato pide la huella, la huella del boton late. */
.login-passkey-btn.esperando svg{ animation: huellaLate 1.1s ease-in-out infinite; }
@keyframes huellaLate{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* La lista dentro de "Mi cuenta". */
.ma-llaves{ display:flex; flex-direction:column; gap:8px; }
.ma-llaves-hint{ font-size:.73rem; color: var(--text-dim); line-height:1.4; margin-top:-4px; }
.ma-llaves-lista{ display:flex; flex-direction:column; gap:6px; }
.ma-llaves-vacio{ font-size:.76rem; color: var(--text-dim); font-style:italic; }
.ma-llave{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:10px;
  border:2px solid var(--border); background: var(--surface-2);
}
.ma-llave-icono{ font-size:1rem; flex:none; }
.ma-llave-texto{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.ma-llave-nombre{ font-size:.82rem; font-weight:800; }
.ma-llave-fecha{ font-size:.68rem; color: var(--text-dim); }
.ma-llave-borrar{ padding:5px 10px; font-size:.72rem; flex:none; }
.ma-llave-borrar:hover{ border-color: var(--err); color: var(--err); }

/* La oferta de la llave de acceso usa la misma barra de abajo que la de notificaciones (misma
   forma, mismo sitio, mismos botones): es el lenguaje que la app ya tiene para "te propongo
   algo, tu decides". Solo cambia que entra deslizandose, porque aparece bastante despues de
   cargar y sin eso parece que estuvo ahi todo el rato. */
.llave-oferta{ animation: ofertaEntra .4s cubic-bezier(.2,.9,.25,1) both; }
@keyframes ofertaEntra{
  from{ opacity:0; transform: translate(-50%, 14px); }
  to{ opacity:1; transform: translate(-50%, 0); }
}
.llave-oferta .notif-oferta-txt strong{ color: var(--accent); }

/* Aviso corto que se va solo (en vez de un alert que congela la pagina). */
.aviso-flotante{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:76;
  max-width:min(94vw, 460px); padding:11px 16px;
  background: var(--surface); border:2px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size:.82rem; font-weight:700; color: var(--text); text-align:center;
  animation: ofertaEntra .35s cubic-bezier(.2,.9,.25,1) both;
}
.aviso-flotante.se-va{ opacity:0; transition: opacity .4s; }
@media (prefers-reduced-motion: reduce){
  .llave-oferta, .aviso-flotante{ animation:none; }
}

/* La vista de llaves de acceso, abierta desde el panel de control. */
.llaves-modal{ max-width:420px; gap:12px; }
.llaves-intro{
  display:flex; gap:11px; align-items:flex-start;
  padding:11px 13px; border-radius:10px;
  border:2px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size:.78rem; line-height:1.45;
}
.llaves-intro-icono{ font-size:1.1rem; flex:none; }

/* ==================== Fondo Aurora ====================
   La aurora que se mueve detras de todo (ver aurora.js: es el shader de React Bits sobre
   WebGL2 pelado, con los colores de la marca). Va pegada al fondo de la ventana, debajo de la
   cuadricula y de todo lo demas, y no se puede tocar: es decoracion, no interfaz.

   El color solido del fondo se pone en el BODY y no en .alba-waves, que antes lo llevaba: ahi
   taparia la aurora. */
body{ background-color:#0d0e10; }

.alba-aurora{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none;
  /* Bajita a proposito: el trabajo de esto es dar profundidad al fondo, no competir con lo que
     se esta leyendo encima. */
  opacity:.62;
}

/* En el acceso se ve entera y mas viva: ahi el fondo ES la pantalla, no hay datos que estorbar.
   Por eso tambien se apagan las formas de colores que habia antes (los blobs y el degradado):
   dos fondos animados a la vez se pelean, y la aurora ya trae los cuatro colores de la marca. */
body.login-active .alba-aurora{ opacity:.95; }
#loginOverlay .login-bg-blob,
#loginOverlay .login-bg-gradient,
#loginOverlay .login-bg-ring{ display:none; }
/* Y el velo del acceso se aclara, que si no la aurora quedaba detras de una cortina gris. */
#loginOverlay{ background: rgba(4,4,6,0.45); }

@media (max-width:680px){
  /* En celular la pantalla es toda contenido: la aurora se queda mas discreta todavia. */
  .alba-aurora{ opacity:.5; }
}

/* ==================== "Tus ultimas busquedas", con la marca puesta ====================
   Era una barra gris plana con un emoji metido dentro del texto: no se distinguia de un titulo
   cualquiera y no invitaba a tocarla, aunque es de lo que mas se usa en el inicio.

   Ahora lleva los cuatro colores de A.L.B.A. en una franja que se mueve despacio a la
   izquierda, el reloj en su propio cuadro, y el contador como pastilla del color de la casa.
   Nada de esto grita: la barra sigue siendo un renglon, solo que ahora se ve viva. */

.home-section-colapsable .home-section-toggle{
  position:relative;
  overflow:hidden;              /* para que el brillo del hover no se salga de la barra */
  padding-left:18px;            /* le deja sitio a la franja */
}

/* La franja de la marca: los mismos cuatro colores de la barra del encabezado y del dock,
   corriendo despacio de arriba abajo. Es lo que ata este renglon al resto de la identidad. */
.home-section-colapsable .home-section-toggle::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg,
    var(--accent) 0%, #b6dd4f 25%, var(--accent2) 50%, var(--accent3) 75%, var(--accent) 100%);
  background-size: 100% 300%;
  animation: franjaMarca 7s linear infinite;
}
@keyframes franjaMarca{
  from{ background-position: 0 0; }
  to{ background-position: 0 -300%; }
}
/* Cerrada, la franja se apaga un poco: dice "aqui hay algo" sin llamar tanto como abierta. */
.home-section-colapsable.colapsado .home-section-toggle::before{ opacity:.55; }

/* Un brillo que cruza la barra al pasar el mouse. Solo al pasar: en reposo no se mueve nada
   mas que la franja. */
.home-section-colapsable .home-section-toggle::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(100deg, transparent 35%,
    color-mix(in srgb, var(--accent) 16%, transparent) 50%, transparent 65%);
  transform: translateX(-100%);
  opacity:0;
}
.home-section-colapsable .home-section-toggle:hover::after{
  opacity:1; animation: brilloBarra .75s var(--ease);
}
@keyframes brilloBarra{
  from{ transform: translateX(-100%); }
  to{ transform: translateX(100%); }
}

/* El reloj, en su cuadro. Antes vivia dentro del texto del titulo y no se le podia dar ni
   tamano ni color propios. */
.home-section-icono{
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:7px; font-size:.82rem;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border:1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transition: border-color .15s, background .15s, transform .18s var(--ease);
}
.home-section-toggle:hover .home-section-icono{
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  transform: rotate(-8deg);
}

/* El titulo, con el color de la casa en vez del gris de siempre. */
.home-section-colapsable .home-section-title{
  color: var(--text); letter-spacing:.9px;
}

/* El contador, como pastilla de la marca. */
.home-section-colapsable .home-section-cuenta{
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  font-weight:800;
  transition: background .15s, border-color .15s;
}
.home-section-toggle:hover .home-section-cuenta{
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  border-color: var(--accent);
}

/* La flecha toma el color de la marca al abrir, y gira con un poco de rebote. */
.home-section-colapsable .home-section-chevron{
  transition: transform .26s cubic-bezier(.34,1.56,.64,1), border-color .14s, color .14s;
}
.home-section-colapsable:not(.colapsado) .home-section-chevron{
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Al abrir, los renglones entran en cascada — uno detras de otro, muy rapido. Le da la
   sensacion de que la lista "cae" del encabezado en vez de aparecer de golpe. */
.home-section-colapsable:not(.colapsado) .home-recent-item{
  animation: renglonEntra .32s var(--ease) both;
}
@keyframes renglonEntra{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform:none; }
}
.home-section-colapsable:not(.colapsado) .home-recent-item:nth-child(1){ animation-delay:.02s; }
.home-section-colapsable:not(.colapsado) .home-recent-item:nth-child(2){ animation-delay:.05s; }
.home-section-colapsable:not(.colapsado) .home-recent-item:nth-child(3){ animation-delay:.08s; }
.home-section-colapsable:not(.colapsado) .home-recent-item:nth-child(4){ animation-delay:.11s; }
.home-section-colapsable:not(.colapsado) .home-recent-item:nth-child(5){ animation-delay:.14s; }
.home-section-colapsable:not(.colapsado) .home-recent-item:nth-child(6){ animation-delay:.17s; }
.home-section-colapsable:not(.colapsado) .home-recent-item:nth-child(7){ animation-delay:.20s; }
.home-section-colapsable:not(.colapsado) .home-recent-item:nth-child(8){ animation-delay:.23s; }
.home-section-colapsable:not(.colapsado) .home-recent-item:nth-child(n+9){ animation-delay:.26s; }

/* Quien pidio menos movimiento no ve ninguno: ni la franja, ni el brillo, ni la cascada. */
@media (prefers-reduced-motion: reduce){
  .home-section-colapsable .home-section-toggle::before{ animation:none; }
  .home-section-colapsable .home-section-toggle:hover::after{ animation:none; opacity:0; }
  .home-section-colapsable:not(.colapsado) .home-recent-item{ animation:none; }
  .home-section-toggle:hover .home-section-icono{ transform:none; }
}

/* ==================== La luz que da la vuelta a los botones ====================
   Los botones del Panel De Control eran cajas con borde gris y un color fijo por esquina.
   Ahora una luz con los cuatro colores de A.L.B.A. recorre el contorno de cada uno, sin
   parar y a distinto tiempo en cada boton — asi el panel "respira" en vez de parpadear todo
   a la vez, que marearia.

   Como esta hecho: un pseudo-elemento con un conic-gradient que gira, recortado con una
   mascara para que SOLO se vea el contorno de 2px y no tape el boton. El angulo se anima con
   @property, que es lo unico que el navegador sabe interpolar; donde no exista (navegadores
   viejos), el borde se queda quieto con los cuatro colores puestos, que tampoco se ve mal. */

@property --alba-giro{
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.home-tile{
  /* El badge de "sin ver" sobresale por la esquina (top:-7px), asi que NADA de overflow:hidden
     aqui: el anillo se recorta con mascara, no cortando la caja. */
  isolation: isolate;
}
.home-tile::before{
  content:''; position:absolute; inset:-2px; z-index:0;
  border-radius: inherit; padding:2px;
  background: conic-gradient(from var(--alba-giro),
    var(--accent), #b6dd4f, var(--accent2), var(--accent3), var(--accent));
  /* La mascara deja ver solo el marco: se pinta todo y se recorta el relleno. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: albaGiroBorde 6s linear infinite;
  opacity:.75;
  transition: opacity .18s;
  pointer-events:none;
}
@keyframes albaGiroBorde{
  to{ --alba-giro: 360deg; }
}
/* Al pasar el mouse la luz se ve entera y da la vuelta mas rapido: responde al dedo. */
.home-tile:hover::before{ opacity:1; animation-duration:2.2s; }

/* El contenido va por encima del anillo. */
.home-tile-icon, .home-tile-title, .home-tile-badge{ position:relative; z-index:1; }

/* Cada boton arranca la vuelta en un momento distinto: juntos parecerian una alarma. */
.home-tile:nth-child(2)::before{ animation-delay:-.8s; }
.home-tile:nth-child(3)::before{ animation-delay:-1.6s; }
.home-tile:nth-child(4)::before{ animation-delay:-2.4s; }
.home-tile:nth-child(5)::before{ animation-delay:-3.2s; }
.home-tile:nth-child(6)::before{ animation-delay:-4.0s; }
.home-tile:nth-child(7)::before{ animation-delay:-4.8s; }
.home-tile:nth-child(8)::before{ animation-delay:-5.6s; }

/* Con el borde de colores ya no hace falta el borde gris de siempre. */
.home-tile{ border-color: transparent; }
.home-tile:hover{ border-color: transparent; }

@media (prefers-reduced-motion: reduce){
  .home-tile::before{ animation:none; }
}

/* ==================== El renglon de estado del buscador ====================
   "Escribe o pega un codigo..." era texto suelto colgando bajo la caja de busqueda, sin nada
   que lo separara del fondo: se leia como si se hubiera quedado ahi de sobra. Ahora es un
   aviso con forma, con el rombo de A.L.B.A. delante y la franja de la casa a un lado, igual
   que los demas mensajes de la app. */
.status-line:not(:empty){
  display:flex; align-items:flex-start; gap:9px;
  padding:9px 13px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-left:3px solid var(--accent);
  color: var(--text);
  animation: statusEntra .22s var(--ease) both;
}
.status-line:not(:empty)::before{
  content:'\25C6';                     /* el rombo de la marca */
  flex-shrink:0; color: var(--accent); font-size:.68rem; line-height:1.7;
}
@keyframes statusEntra{
  from{ opacity:0; transform: translateY(-3px); }
  to{ opacity:1; transform:none; }
}
/* Mientras carga se pone en verde-agua y late (la clase .loading ya existia). */
.status-line.loading:not(:empty){
  border-left-color: var(--accent2);
  background: color-mix(in srgb, var(--accent2) 8%, var(--surface));
}
.status-line.loading:not(:empty)::before{ color: var(--accent2); }

@media (prefers-reduced-motion: reduce){
  .status-line:not(:empty){ animation:none; }
}

/* ===========================================================================
   Pantalla de mantenimiento (la arma actualizar.js, sale en cualquier pagina)
   ===========================================================================
   No es un aviso que se cierre: es la app cerrada por un rato. Tapa todo, con la escala de
   grises de la casa y el engrane girando despacio — se lee "alguien esta trabajando en esto",
   no "algo se rompio". Por eso NO usa el rojo de error en ninguna parte.

   z-index por encima de cualquier modal (los overlays de la app andan en 1000-9999). */
.alba-mant-overlay{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    rgba(6,7,9,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: albaMantEntra .3s var(--ease, ease) both;
}
/* Nada de scroll por debajo: la app sigue ahi, pero no se toca. */
html.alba-mant-puesto, html.alba-mant-puesto body{ overflow:hidden !important; }

.alba-mant-caja{
  width:min(440px, 100%);
  text-align:center;
  padding:30px 26px 26px;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg, 6px);
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  position:relative; overflow:hidden;
}
/* La franja de la marca, solo arriba: los cuatro colores del encabezado y el dock. Va como
   ::before y no como border-image, que pintaba el marco entero y parecia una alarma. */
.alba-mant-caja::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent4), var(--accent2), var(--accent3));
}
.alba-mant-icono{ font-size:2.6rem; line-height:1; margin-bottom:12px; }
.alba-mant-engrane{ display:inline-block; animation: albaMantGira 6s linear infinite; }
/* El empujoncito de cada toque en la puerta de atras del Admin (ver ponerPuertaDeAtras). */
/* La vista de la Zona permitida reusa las clases .mant-* del aviso de mantenimiento; solo el
   recuadro del punto y las notas de ayuda son suyos. */
.alba-mant-icono.alba-mant-toque{ animation: albaMantToque .25s ease-out; }
/* Mientras se aguanta el dedo en el celular, el engrane crece: si se suelta antes de tiempo se
   ve que algo iba pasando. Ver ponerPuertaLarga. */
.alba-mant-overlay.alba-mant-aguantando .alba-mant-icono{
  transform: scale(1.18); transition: transform .9s ease-in;
}
.alba-mant-icono{ transition: transform .18s ease-out; }
@keyframes albaMantToque{
  0%{ transform: scale(1); } 45%{ transform: scale(1.14); } 100%{ transform: scale(1); }
}

.alba-mant-saludo{
  font-family: var(--font-ui);
  font-size:1.35rem; font-weight:700; color: var(--text);
  margin-bottom:10px;
}
.alba-mant-saludo b{ color: var(--accent); font-weight:700; }

.alba-mant-texto{
  font-size:1rem; line-height:1.55; color: var(--text-dim);
  margin:0 auto 20px; max-width:34ch;
}

.alba-mant-espera{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding-top:16px; border-top:1px solid var(--border);
}
.alba-mant-espera-texto{ font-size:.8rem; color: var(--text-dim); margin-left:6px; }
/* Tres puntos latiendo, desfasados: dicen "sigue corriendo" sin una barra de progreso que
   mentiria (nadie sabe cuanto tarda un Admin). */
.alba-mant-punto{
  width:6px; height:6px; border-radius:50%; background: var(--accent);
  animation: albaMantPunto 1.4s ease-in-out infinite;
}
.alba-mant-punto:nth-child(2){ animation-delay:.2s; background: var(--accent4); }
.alba-mant-punto:nth-child(3){ animation-delay:.4s; background: var(--accent2); }

/* La pastilla del Admin: el unico que sigue adentro tiene que ver que lo dejo puesto. */
.alba-mant-chip{
  position:fixed; left:50%; top:10px; transform:translateX(-50%); z-index:2147483000;
  display:flex; align-items:center; gap:7px;
  padding:7px 14px;
  font-family: var(--font-ui); font-size:.78rem; font-weight:700;
  color:#1a1205; background: var(--warn);
  border-radius:8px; box-shadow: 0 6px 18px rgba(0,0,0,.45);
  animation: albaMantChipLate 2.6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes albaMantEntra{ from{ opacity:0; } to{ opacity:1; } }
@keyframes albaMantGira{ to{ transform: rotate(360deg); } }
@keyframes albaMantPunto{
  0%,100%{ opacity:.25; transform: translateY(0); }
  50%{ opacity:1; transform: translateY(-4px); }
}
@keyframes albaMantChipLate{
  0%,100%{ opacity:1; }
  50%{ opacity:.72; }
}
@media (prefers-reduced-motion: reduce){
  .alba-mant-overlay, .alba-mant-engrane, .alba-mant-punto, .alba-mant-chip{ animation:none; }
}

/* ===========================================================================
   Mantenimiento, la vista del Admin (Configuracion -> "Aviso de mantenimiento")
   =========================================================================== */
/* La ventana del mantenimiento, acostada en computadora: a la izquierda lo que se cambia (el
   switch y el mensaje) y a la derecha lo que se mira (como va a quedar y el aviso). El
   encabezado, el mensaje de estado y los botones cruzan las dos columnas. En celular, una sola,
   en el mismo orden de siempre. */
.mant-modal{ width:min(520px, 100%); padding:22px; }
/* Pantalla bajita (un celular acostado): el Aviso de mantenimiento no tiene una sola zona que
   desplace por dentro — es una lista de bloques — así que desplaza la ventana entera y Guardar
   se iba hasta abajo, sin ninguna señal de que estaba ahí. Aquí se aprieta lo que se puede y los
   botones se quedan pegados abajo. El fondo va **sólido**: con uno transparente se alcanza a ver
   el texto corriendo por detrás de los botones, que es justo lo que se ve mal. */
@media (max-height: 560px){
  .mant-modal{ padding:12px 14px; }
  .mant-head{ margin-bottom:8px; }
  .mant-head-icon{ font-size:1.2rem; }
  .mant-head-sub{ display:none; }
  .mant-switch{ padding:8px 10px; margin-bottom:8px; }
  .mant-switch-texto small{ display:none; }
  .mant-nota{ display:none; }
  .mant-campo textarea{ min-height:56px; }
  .mant-acciones{
    position:sticky; bottom:0; z-index:2;
    margin-top:10px; padding:10px 0 0;
    background: var(--surface);
    box-shadow: 0 -10px 14px -8px var(--surface);
  }
}

@media (min-width:860px){
  .mant-modal{
    width:min(94vw, 840px);
    display:grid; grid-template-columns: 1fr 1fr; gap:14px 18px; align-content:start;
  }
  .mant-modal > .mant-head,
  .mant-modal > .config-msg,
  .mant-modal > .mant-acciones{ grid-column:1 / -1; }
  .mant-modal > .mant-campo{ display:flex; flex-direction:column; }
  .mant-modal > .mant-campo textarea{ flex:1 1 auto; min-height:120px; }
}
.mant-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:18px;
}
.mant-head-title{ display:flex; align-items:center; gap:12px; }
.mant-head-icon{ font-size:1.7rem; line-height:1; }
.mant-head-nombre{ font-size:1.1rem; font-weight:700; color: var(--text); }
.mant-head-sub{ font-size:.78rem; color: var(--text-dim); }
.mant-estado{
  flex-shrink:0; padding:5px 11px; border-radius:8px;
  font-size:.72rem; font-weight:700;
  color: var(--text-dim); background: var(--surface-2); border:1px solid var(--border);
}
.mant-estado.puesto{ color:#1a1205; background: var(--warn); border-color: transparent; }
.mant-estado.quitado{ color:#04211c; background: var(--accent); border-color: transparent; }

/* El interruptor, calcado del de Horario de acceso para que no haya dos formas de lo mismo. */
.mant-switch{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px; margin-bottom:16px; cursor:pointer;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-lg, 6px);
}
.mant-switch input{ position:absolute; opacity:0; width:0; height:0; }
.mant-switch-pista{
  flex-shrink:0; position:relative; width:44px; height:24px; margin-top:2px;
  background: var(--border); border-radius:8px; transition: background .18s ease;
}
.mant-switch-bolita{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background: var(--text); transition: transform .18s ease;
}
.mant-switch input:checked + .mant-switch-pista{ background: var(--warn); }
.mant-switch input:checked + .mant-switch-pista .mant-switch-bolita{ transform: translateX(20px); }
.mant-switch input:focus-visible + .mant-switch-pista{ outline:2px solid var(--accent); outline-offset:2px; }
.mant-switch-texto strong{ display:block; font-size:.92rem; color: var(--text); margin-bottom:3px; }
.mant-switch-texto small{ display:block; font-size:.78rem; color: var(--text-dim); line-height:1.45; }

.mant-campo{ margin-bottom:14px; }
.mant-campo label{ display:block; font-size:.78rem; color: var(--text-dim); margin-bottom:6px; }
.mant-campo textarea{
  width:100%; min-height:76px; resize:vertical;
  padding:10px 12px; font-family: var(--font-ui); font-size:.9rem; line-height:1.5;
  color: var(--text); background: var(--surface-2);
  border:1px solid var(--border); border-radius: var(--radius, 4px);
}
.mant-campo textarea:focus{ outline:none; border-color: var(--accent); }

/* Como lo va a ver el equipo, con el mensaje que haya escrito. Asi nadie prende un aviso a
   ciegas: lo lee antes de sacar a medio almacen. */
.mant-previo{
  padding:14px; margin-bottom:16px; text-align:center;
  background: var(--bg); border:1px dashed var(--border); border-radius: var(--radius-lg, 6px);
}
.mant-previo-etiqueta{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-dim); margin-bottom:10px;
}
.mant-previo-saludo{ font-size:1rem; font-weight:700; color: var(--text); margin-bottom:6px; }
.mant-previo-saludo b{ color: var(--accent); }
.mant-previo-texto{ font-size:.85rem; line-height:1.5; color: var(--text-dim); }

.mant-nota{
  display:flex; gap:9px; align-items:flex-start;
  padding:11px 13px; margin-bottom:16px;
  font-size:.8rem; line-height:1.5; color: var(--text-dim);
  background: color-mix(in srgb, var(--warn) 9%, var(--surface));
  border-left:3px solid var(--warn); border-radius: var(--radius, 4px);
}
.mant-acciones{ display:flex; gap:10px; flex-wrap:wrap; }
.mant-acciones .btn{ flex:1 1 150px; }

/* La puerta de atras del aviso: solo sale cuando no hay sesion abierta (ver actualizar.js).
   Discreta a proposito — no es un boton que invite a tocarlo a quien no deba. */
/* (.alba-mant-salida se quitó: el acceso sale con tres clicks en el aviso, sin botón.) */

/* ===========================================================================
   Kardex paso a paso (lo arma openKardexOptionsModal)
   ===========================================================================
   Era una columna larga de campos: en el celular habia que bajar para ver si faltaba algo, y
   se imprimian Kardex a los que se les habia olvidado la ubicacion. Ahora es una pregunta por
   pantalla y las pantallas corren de lado, con su barra de avance y un "Atras" que no pierde
   nada de lo escrito.

   El ancho es mayor que el de los otros modales a proposito: aqui lo que manda es el eje
   horizontal, y una pregunta sola en una caja angosta se ve apretada. */
.ko-wizard{
  max-width:min(94vw, 560px);
  padding:20px 20px 16px;
  gap:0;
  /* De lado se recorta (el carril no debe asomar); hacia abajo NO, que se pueda bajar.
     Con overflow:hidden a secas, en un celular acostado o con la letra grande el paso quedaba
     cortado por abajo y no habia forma de llegar al boton. */
  overflow-x:hidden;
  overflow-y:auto;
  max-height:92vh;
}

.kw-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:10px;
}
.kw-head-titulo{
  font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  color: var(--text);
}
.kw-head-paso{ font-size:.72rem; font-weight:700; color: var(--text-dim); white-space:nowrap; }

/* Barra de avance: cuanto falta, sin tener que contar los pasos. */
.kw-barra{
  height:3px; border-radius:8px; background: var(--border); overflow:hidden; margin-bottom:16px;
}
.kw-barra-llena{
  display:block; height:100%; width:0;
  background: linear-gradient(90deg, var(--accent), var(--accent4));
  transition: width .35s var(--ease, ease);
}

/* La ventana por la que se ven los pasos. El alto lo pone el JS, el del paso que se esta
   viendo: si fuera el del mas alto, los pasos cortos dejarian un hueco debajo del boton. */
/* overflow:clip y no solo hidden: con hidden la pista se puede desplazar por dentro (al enfocar un
   campo el navegador la corre unos pixeles para "enseñarlo") y el paso se veia mordido por la
   izquierda y asomaba el siguiente por la derecha (24 oct 2026). clip no deja desplazar nunca. */
.kw-pista{ overflow:hidden; overflow:clip; transition: height .3s var(--ease, ease); }
.kw-carril{
  display:flex; align-items:flex-start;
  transition: transform .35s var(--ease, ease);
}
.kw-paso{
  flex:0 0 100%; min-width:100%; box-sizing:border-box;
  padding:2px 2px 6px;
  display:flex; flex-direction:column; gap:10px;
  /* Lo que no se esta viendo se apaga: durante el movimiento se nota cual entra y cual sale. */
  opacity:.25; transition: opacity .3s var(--ease, ease);
}
.kw-paso-activo{ opacity:1; }

.kw-paso-icono{ font-size:1.9rem; line-height:1; }
.kw-paso-titulo{
  margin:0; padding:0; border:none;
  font-size:1.02rem; font-weight:800; line-height:1.3; color: var(--text);
}
.kw-paso-ayuda{ margin:-4px 0 0; font-size:.78rem; line-height:1.5; color: var(--text-dim); }
.kw-paso-cuerpo{ display:flex; flex-direction:column; gap:9px; }
/* OJO: aqui NO va una regla generica para los divs de adentro. Habia una
   (.kw-paso-cuerpo > div{ flex-direction:column }) y le ganaba por especificidad a .kw-dos, que
   es justo la que pone la cantidad y su unidad lado a lado: salian una debajo de la otra y
   pegadas a la derecha. Cada bloque pone su propio acomodo. */

/* El contenido entra deslizando desde la derecha — la misma direccion en la que avanza. */
.kw-paso-activo .kw-paso-cuerpo,
.kw-paso-activo .kw-paso-titulo,
.kw-paso-activo .kw-paso-icono{ animation: kwEntra .32s var(--ease, ease) both; }
.kw-paso-activo .kw-paso-titulo{ animation-delay:.03s; }
.kw-paso-activo .kw-paso-cuerpo{ animation-delay:.06s; }
@keyframes kwEntra{
  from{ opacity:0; transform: translateX(14px); }
  to{ opacity:1; transform:none; }
}

/* Dos campos en un renglon (cantidad y su unidad): van juntos porque son una sola pregunta. */
.kw-dos{ display:flex; gap:10px; align-items:flex-end; }
.kw-dos-grande{ flex:2 1 0; display:flex; flex-direction:column; min-width:0; }
.kw-dos-chico{ flex:1 1 0; display:flex; flex-direction:column; min-width:0; }

/* Lo que contesta Odoo en el propio paso (la O.C. existe, el codigo tiene QR...). */
.kw-aviso{ font-size:.78rem; line-height:1.45; }
.kw-aviso:empty{ display:none; }
.kw-aviso-espera{ color: var(--text-dim); }
.kw-aviso-ok{ color: var(--accent); font-weight:700; }
.kw-aviso-ojo{ color: var(--warn); }

/* Resumen final: cada renglon regresa a su paso de un toque. */
.kw-resumen{ display:flex; flex-direction:column; gap:6px; }
.kw-resumen-fila{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  padding:9px 11px;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius, 4px);
  color: var(--text); font-family: var(--font-ui);
  transition: border-color .15s ease, background .15s ease;
}
.kw-resumen-fila:hover{ border-color: var(--accent); background: var(--surface); }
.kw-resumen-etiqueta{
  flex:0 0 38%; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
  color: var(--text-dim);
}
.kw-resumen-valor{
  /* Antes se cortaba con "...": en el ultimo paso, que es justo el de revisar, no se alcanzaba
     a leer la fecha completa ni el proveedor. Mejor que el renglon crezca. */
  flex:1 1 auto; min-width:0; font-size:.85rem; font-weight:700;
  white-space:normal; overflow-wrap:anywhere; line-height:1.35;
}
.kw-resumen-lapiz{ flex:none; color: var(--text-dim); font-size:.8rem; }
.kw-resumen-fila:hover .kw-resumen-lapiz{ color: var(--accent); }

/* Pie: atras y siguiente. "Atras" se ve apagado en el primer paso en vez de desaparecer, para
   que el boton de avanzar no brinque de lugar entre un paso y otro. */
.kw-pie{ display:flex; gap:10px; margin-top:14px; }
.kw-atras{ flex:0 0 38%; }
.kw-atras:disabled{ opacity:.35; cursor:default; }
.kw-siguiente{ flex:1 1 auto; }
.kw-siguiente.kw-generar{ background: var(--accent); color:#04211c; }

/* "Cancelar" tiene forma de boton, pero de los que no invitan a tocarse: contorno y nada de
   relleno, para que no compita con "Siguiente". Al pasar el mouse se tiñe de rojo — es la accion
   que tira lo que llevas escrito, y conviene que lo diga antes de que la toquen. */
.kw-cancelar{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:12px auto 0; padding:8px 20px; cursor:pointer;
  font-family: var(--font-ui); font-size:.76rem; font-weight:700;
  color: var(--text-dim);
  background: transparent;
  border:1px solid var(--border); border-radius:8px;
  transition: color .15s var(--ease, ease), border-color .15s var(--ease, ease),
              background .15s var(--ease, ease);
}
.kw-cancelar::before{ content:'✕'; font-size:.68rem; line-height:1; }
.kw-cancelar:hover{
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 55%, transparent);
  background: color-mix(in srgb, var(--err) 10%, transparent);
}
.kw-cancelar:focus-visible{ outline:2px solid var(--err); outline-offset:2px; }

/* Las dos tarjetas del primer paso (normal / accesorio), ahora con su renglon de abajo. */
.ko-wizard .ko-modo-tabs{ flex-direction:column; gap:9px; margin:0; }
.ko-wizard .ko-modo-tab{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:13px 15px; text-align:left;
}
/* Las opciones de la fecha en un renglon cada una: partida en dos ("Otra / fecha") se leia
   como si fueran dos cosas distintas. */
.ko-wizard .ml-modal-check-row > label{ white-space:nowrap; }
.ko-wizard .ml-modal-check-row{ flex-wrap:wrap; }

.ko-modo-nombre{ font-size:.92rem; font-weight:800; }
.ko-modo-nota{ font-size:.72rem; font-weight:400; opacity:.75; }


/* En celular la caja se abre casi de orilla a orilla y el resumen pone la etiqueta arriba del
   valor: en 390 px, con etiqueta y valor en el mismo renglon, al valor le quedaban 4 palabras. */
@media (max-width: 560px){
  .ko-wizard{ max-width:97vw; padding:16px 14px 12px; }
  .kw-paso-titulo{ font-size:1rem; }
  .kw-paso-icono{ font-size:1.7rem; }
  .kw-resumen-fila{ position:relative; flex-wrap:wrap; row-gap:2px; padding:8px 28px 8px 10px; }
  .kw-resumen-etiqueta{ flex:0 0 100%; font-size:.64rem; }
  .kw-resumen-valor{ flex:1 1 100%; font-size:.88rem; }
  /* El lapiz, fijo en la esquina: en el renglon se iba solo a una linea aparte cuando el texto
     era largo (el proveedor, por ejemplo) y se veia como si fuera otro boton. */
  .kw-resumen-lapiz{ position:absolute; top:8px; right:9px; }
  .kw-pie{ margin-top:12px; }
  .kw-atras{ flex:0 0 34%; }
}

@media (prefers-reduced-motion: reduce){
  .kw-carril, .kw-pista, .kw-barra-llena{ transition:none; }
  .kw-paso{ transition:none; }
  .kw-paso-activo .kw-paso-cuerpo,
  .kw-paso-activo .kw-paso-titulo,
  .kw-paso-activo .kw-paso-icono{ animation:none; }
}

/* ===========================================================================
   Bandeja de fotos adjuntas (la arma pintarBandejaAdjuntas)
   ===========================================================================
   Las fotos que se van tomando esperan aqui hasta que se mandan todas juntas. Lo que importa
   son las miniaturas: hay que poder ver cual salio mal y tirarla ANTES de subirla. */
.bandeja-modal{ max-width:min(94vw, 460px); gap:12px; }
.bandeja-ayuda{ margin:0; font-size:.82rem; line-height:1.5; color: var(--text-dim); }
.bandeja-ayuda strong{ color: var(--accent); }

/* En rejilla y no en fila: con cinco o seis fotos, una tira de lado obliga a arrastrar para
   ver si falta alguna. Asi se ven todas de un vistazo. */
.bandeja-tira{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap:8px;
  max-height:46vh; overflow-y:auto;
  padding:3px;
}
.bandeja-foto{
  position:relative; aspect-ratio:1; border-radius: var(--radius, 4px); overflow:hidden;
  background: var(--surface-2); border:2px solid var(--border);
  animation: bandejaEntra .22s var(--ease, ease) both;
}
.bandeja-foto img{ width:100%; height:100%; object-fit:cover; display:block; }

/* El numero: al mandarlas se suben en este orden, y en una ficha de producto el orden importa
   (la primera adjunta es la que mas se ve). */
.bandeja-foto-num{
  position:absolute; left:4px; bottom:4px;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-ui); font-size:.64rem; font-weight:800;
  color:#04211c; background: var(--accent);
}
.bandeja-foto-quitar{
  position:absolute; top:3px; right:3px; width:22px; height:22px; padding:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:.7rem; line-height:1;
  color:#fff; background: rgba(0,0,0,.72); border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
}
.bandeja-foto-quitar:hover{ background: var(--err); border-color: var(--err); }

.bandeja-mas{ display:flex; gap:8px; }
.bandeja-mas .btn{ flex:1; font-size:.8rem; }

@keyframes bandejaEntra{
  from{ opacity:0; transform: scale(.88); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .bandeja-foto{ animation:none; }
}

/* ===========================================================================
   Temas de temporada (los arma temas.js)
   ===========================================================================
   Un tema solo toca lo decorativo: la franja del encabezado, el brillo del fondo, un emblema
   junto al nombre y unas partículas cayendo. NUNCA toca --accent, --accent2, --accent3 ni
   --accent4: esos colores significan cosas (entrada, salida, cantidad, tipo de documento) y
   tienen que decir lo mismo en diciembre que en mayo. */

/* La franja del encabezado toma los tres colores del tema en vez de los cuatro de la casa. */
html[data-tema] .alba-banner-bar{
  background: repeating-linear-gradient(90deg,
    var(--tema-1) 0 33.33%, var(--tema-2) 33.33% 66.66%, var(--tema-3) 66.66% 100%);
}
/* Y el fondo del propio banner se tiñe un poco, muy poco: debajo va texto que hay que leer. */
html[data-tema] .alba-banner{
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(135deg, color-mix(in srgb, var(--tema-1) 9%, var(--surface)), var(--surface));
  background-size: 26px 26px, 26px 26px, auto;
}

/* El emblema del tema, junto al nombre. Late despacio — es lo único que lo delata si alguien
   no se fijó en los colores. */
.alba-tema-emblema{
  margin-left:10px; font-size:.9em; line-height:1;
  display:inline-block; vertical-align:baseline;
  animation: albaTemaLate 3.6s ease-in-out infinite;
}
@keyframes albaTemaLate{
  0%, 100%{ transform: scale(1) rotate(0deg); }
  50%{ transform: scale(1.12) rotate(-6deg); }
}

/* Las partículas van DETRÁS de todo (igual que la aurora), así que solo se ven por los huecos
   entre tarjetas. Es a propósito: que se noten sin estorbar lo que se está leyendo. */
.alba-tema-particulas{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.alba-tema-particulas span{
  position:absolute; top:-8%;
  opacity:.6; line-height:1;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Tres formas de caer, una por tema (ver `caida` en temas.js). Son animaciones de transform y
   opacity nada mas: el navegador las resuelve en la tarjeta de video y no cuestan recalculo de
   la pagina, que es lo que pondria lento un celular de almacen. */

/* FLOTA: pétalos, copos, papel picado. Baja despacio, se mece y gira. */
.alba-cae-flota span{ animation-name: albaCaeFlota; }
@keyframes albaCaeFlota{
  0%{ transform: translate(0, -10vh) rotate(0deg); opacity:0; }
  10%{ opacity:.55; }
  50%{ transform: translate(26px, 50vh) rotate(140deg); }
  90%{ opacity:.55; }
  100%{ transform: translate(-18px, 110vh) rotate(300deg); opacity:0; }
}

/* LLUVIA: recta, rápida y un poco inclinada. Las rayitas van más tenues porque son muchas. */
.alba-cae-lluvia span{ animation-name: albaCaeLluvia; opacity:.32; }
@keyframes albaCaeLluvia{
  0%{ transform: translate(0, -10vh) rotate(12deg); opacity:0; }
  12%{ opacity:.32; }
  88%{ opacity:.32; }
  100%{ transform: translate(-40px, 110vh) rotate(12deg); opacity:0; }
}

/* BRILLA: chispas y estrellas. Bajan muy despacio y parpadean en el camino. */
.alba-cae-brilla span{ animation-name: albaCaeBrilla; }
@keyframes albaCaeBrilla{
  0%{ transform: translateY(-10vh) scale(.6); opacity:0; }
  15%{ opacity:.7; }
  40%{ transform: translateY(35vh) scale(1.15); opacity:.25; }
  65%{ opacity:.7; }
  100%{ transform: translateY(110vh) scale(.6); opacity:0; }
}

/* El fondo general toma un tinte del tema, apenas perceptible. */
html[data-tema] body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 500px at 12% -5%, color-mix(in srgb, var(--tema-1) 13%, transparent), transparent 70%),
    radial-gradient(800px 460px at 92% 8%, color-mix(in srgb, var(--tema-3) 11%, transparent), transparent 70%);
}

/* Pantalla de acceso: ahí el tema sí se luce, que es donde hay espacio vacío. */
html[data-tema] .login-card{
  border-top:3px solid transparent;
  border-image: linear-gradient(90deg, var(--tema-1), var(--tema-2), var(--tema-3)) 1;
}

@media (prefers-reduced-motion: reduce){
  .alba-tema-emblema{ animation:none; }
  .alba-tema-particulas{ display:none; }
}
/* ===========================================================================
   Temas: su propia vista (Configuración → 🎨 Temas)
   ===========================================================================
   Cada tarjeta se pinta con la paleta y la forma de SU tema: es la única manera honesta de
   enseñar qué hace cada uno antes de ponerlo. El JS (renderTemasGrid) les mete los colores
   inline; aquí va la estructura. */
.temas-modal{
  width:min(1020px, 100%); padding:22px;
  display:flex; flex-direction:column;
  /* La que desplaza es la rejilla (.temas-cuerpo), no la ventana: asi el encabezado, el aviso y
     los botones se quedan donde estan y no hay que ir a buscar Guardar. */
  overflow:hidden;
}
.temas-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;
}
.temas-head-title{ display:flex; align-items:center; gap:12px; }
.temas-head-icon{ font-size:1.7rem; line-height:1; }
.temas-head-nombre{ font-size:1.1rem; font-weight:700; color: var(--text); }
.temas-head-sub{ font-size:.78rem; color: var(--text-dim); }
.temas-estado{
  flex-shrink:0; padding:5px 11px; border-radius:8px;
  font-size:.72rem; font-weight:700; white-space:nowrap;
  color: var(--text-dim); background: var(--surface-2); border:1px solid var(--border);
}
.temas-estado.puesto{ color:#04211c; background: var(--accent); border-color: transparent; }

.temas-switch{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px; margin-bottom:16px; cursor:pointer;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-lg, 6px);
}
.temas-switch input{ position:absolute; opacity:0; width:0; height:0; }
.temas-switch-pista{
  flex-shrink:0; position:relative; width:44px; height:24px; margin-top:2px;
  background: var(--border); border-radius:8px; transition: background .18s ease;
}
.temas-switch-bolita{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background: var(--text); transition: transform .18s ease;
}
.temas-switch input:checked + .temas-switch-pista{ background: var(--accent); }
.temas-switch input:checked + .temas-switch-pista .temas-switch-bolita{ transform: translateX(20px); background:#04211c; }
.temas-switch input:focus-visible + .temas-switch-pista{ outline:2px solid var(--accent); outline-offset:2px; }
.temas-switch-texto strong{ display:block; font-size:.92rem; color: var(--text); margin-bottom:3px; }
.temas-switch-texto small{ display:block; font-size:.78rem; color: var(--text-dim); line-height:1.45; }

/* Apagado, la lista se ve pero no se toca: así se sabe qué hay sin tener que encenderlo. */
.temas-cuerpo{
  transition: opacity .18s ease;
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
}
.temas-cuerpo.apagado{ opacity:.38; }
.temas-cuerpo.apagado .tema-card{ cursor:default; }

.temas-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap:10px;
  padding:3px;
}
.tema-card{
  display:flex; flex-direction:column; gap:9px; align-items:stretch; text-align:left;
  padding:13px; cursor:pointer;
  font-family: var(--font-ui);
  border:2px solid var(--border);
  background: var(--surface-2);
  transition: transform .12s var(--ease, ease), box-shadow .14s var(--ease, ease);
}
.tema-card:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.tema-card.elegida{
  outline:3px solid var(--accent); outline-offset:2px;
}
.tema-card-cab{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tema-card-emblema{ font-size:1.1rem; line-height:1; }
.tema-card-nombre{ font-size:.82rem; font-weight:800; line-height:1.2; color: var(--text); }
.tema-card-hoy{
  padding:2px 7px; border-radius:8px; font-size:.6rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
  color:#04211c; background: var(--accent);
}
/* Los cuatro acentos del tema, en fila: es lo que de verdad lo describe. */
.tema-card-muestra{ display:flex; gap:5px; }
.tema-card-muestra span{ flex:1; height:16px; }
.tema-card-cuando{ font-size:.68rem; line-height:1.35; color: var(--text-dim); }
.tema-card-pie{ font-size:.66rem; color: var(--text-dim); }
.tema-card-auto{ background: var(--surface-2); border-style:dashed; }

.temas-nota{
  display:flex; gap:9px; align-items:flex-start;
  padding:11px 13px; margin-top:14px;
  font-size:.78rem; line-height:1.5; color: var(--text-dim);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-left:3px solid var(--accent); border-radius: var(--radius, 4px);
}
.temas-acciones{ display:flex; gap:10px; margin-top:16px; }
.temas-acciones .btn{ flex:1; }

@media (max-height: 560px){
  .temas-modal{ padding:12px 14px; }
  .temas-head{ margin-bottom:8px; }
  .temas-head-icon{ font-size:1.2rem; }
  .temas-head-sub{ display:none; }
  .temas-switch{ padding:8px 10px; margin-bottom:8px; gap:9px; }
  .temas-switch-texto small{ display:none; }
  .temas-nota{ display:none; }
  .temas-acciones{ margin-top:10px; }
  .tema-card{ padding:9px; gap:6px; }
  .tema-card-cuando, .tema-card-pie{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .tema-card:hover{ transform:none; }
}

/* ===========================================================================
   Cambios y Novedades (lo arma abrirNovedades; la lista vive en novedades.js)
   ===========================================================================
   Sale solo la primera vez que alguien entra con una versión que no había visto. Se lee como
   una lista de versiones: la más nueva abierta, las viejas plegadas, para que no sea un muro. */
.nov-modal{
  width:min(900px, 100%); padding:22px; overflow:hidden;
  display:flex; flex-direction:column; gap:14px;
  /* La caja nunca pasa de la pantalla: lo que sobra se desplaza dentro de la lista. */
  max-height:88vh; min-height:0;
}
.nov-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.nov-head-title{ display:flex; align-items:center; gap:12px; }
.nov-head-icon{ font-size:1.8rem; line-height:1; }
.nov-head-nombre{ font-size:1.1rem; font-weight:700; color: var(--text); }
.nov-head-sub{ font-size:.78rem; color: var(--text-dim); }

.nov-lista{
  display:flex; flex-direction:column; gap:9px; padding:2px;
  /* flex:1 + min-height:0 es lo que de verdad hace que se pueda bajar: sin min-height, un hijo
     de una columna flex se niega a encogerse por debajo de su contenido y el overflow nunca
     llega a aplicarse — se abria una tarjeta y no habia forma de ver el resto. */
  flex:1 1 auto; min-height:0; overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nov-item{
  background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--radius-lg, 6px); overflow:hidden;
  /* flex:none es lo que arregla el deslizar. Sin esto, las tarjetas son hijas de una columna
     flex con alto tope y se APLASTAN para caber: el texto se cortaba dentro de cada una (que
     lleva overflow:hidden) y la lista nunca desbordaba, así que no había nada que deslizar.
     Con flex:none cada tarjeta mide lo que mide, la lista desborda y entonces sí se baja. */
  flex:none;
}
.nov-item.abierta{ border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.nov-item-cab{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%;
  padding:12px 14px; cursor:pointer; text-align:left;
  background:transparent; border:none; font-family: var(--font-ui);
}
.nov-item-ver{
  flex:none; padding:3px 9px; border-radius:8px;
  font-size:.68rem; font-weight:800; letter-spacing:.03em;
  color:#04211c; background: var(--accent);
}
.nov-item-titulo{ flex:1 1 180px; min-width:0; font-size:.92rem; font-weight:700; color: var(--text); }
.nov-item-nuevo{
  flex:none; padding:2px 8px; border-radius:8px;
  font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:#1a1205; background: var(--warn);
}
.nov-item-fecha{ flex:none; font-size:.7rem; color: var(--text-dim); }
.nov-item-flecha{
  flex:none; font-size:.6rem; color: var(--text-dim);
  transition: transform .18s var(--ease, ease);
}
.nov-item.abierta .nov-item-flecha{ transform: rotate(180deg); color: var(--accent); }

.nov-item-cuerpo{ padding:0 14px 14px; }
.nov-puntos{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.nov-puntos li{ font-size:.85rem; line-height:1.55; color: var(--text-dim); }
.nov-puntos li::marker{ color: var(--accent); }

/* Lo de adentro, solo para quien mantiene la app. Se separa a propósito: quien surte no tiene
   por qué leer que algo se movió a PostgREST. */
.nov-tecnico{
  margin-top:14px; padding:12px 14px;
  background: var(--bg); border-radius: var(--radius, 4px);
  border-left:3px solid var(--accent2);
}
.nov-tecnico-cab{
  font-size:.74rem; font-weight:800; color: var(--accent2);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:9px;
}
.nov-tecnico-cab span{
  font-weight:600; text-transform:none; letter-spacing:0; color: var(--text-dim);
  margin-left:6px;
}
.nov-tecnico .nov-puntos li{ font-size:.79rem; }
.nov-tecnico .nov-puntos li::marker{ color: var(--accent2); }

.nov-acciones{ display:flex; flex-direction:column; gap:11px; flex:none; }
.nov-acciones .btn{ width:100%; }

/* El circulo rojo con cuantas novedades hay sin leer. Es el UNICO aviso: la ventana ya no se
   abre sola (pedido de Manuel). El numero lo pone pintarPuntoNovedades en data-nov-cuenta. */
.drawer-item-novedades, .home-tile-novedades{ position:relative; }
.drawer-item-novedades.con-novedad::after,
.home-tile-novedades.con-novedad::after{
  content: attr(data-nov-cuenta); position:absolute; top:6px; right:8px;
  min-width:20px; height:20px; padding:0 5px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; background:#e11d2e; color:#fff;
  font-family: var(--font-ui); font-size:.7rem; font-weight:800; line-height:1;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px color-mix(in srgb, #e11d2e 28%, transparent);
  animation: novLate 2s ease-in-out infinite;
}
@keyframes novLate{
  0%, 100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.25); opacity:.65; }
}
@media (prefers-reduced-motion: reduce){
  .drawer-item-novedades.con-novedad::after,
  .home-tile-novedades.con-novedad::after{ animation:none; }
  .nov-item-flecha{ transition:none; }
}

/* ---- Ubicación manual: la firma de quién la puso y cuándo ----
   Antes era un renglón gris que decía "Agregada por X" y el cuándo ni se enseñaba, aunque estaba
   guardado. Es la mitad del dato: una ubicación puesta a mano hace dos días se cree más que una
   de hace cinco meses. */
.manual-loc-firma{
  display:flex; align-items:center; gap:8px; margin-top:10px;
  padding-top:9px; border-top:1px solid var(--border);
}
.manual-loc-firma-avatar{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-ui); font-size:.62rem; font-weight:800; letter-spacing:.02em;
  color:#04211c; background: var(--accent2);
}
.manual-loc-firma-txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.manual-loc-firma-txt b{ font-size:.74rem; font-weight:700; color: var(--text); }
.manual-loc-firma-txt small{ font-size:.66rem; color: var(--text-dim); }

/* ---- Cantidad + su unidad, que ya no se teclea ---- */
.ml-cant-row{ display:flex; align-items:center; gap:9px; }
.ml-cant-row input{ flex:1; min-width:0; }
.ml-cant-uom{
  flex:none; padding:7px 13px; border-radius:8px; white-space:nowrap;
  font-family: var(--font-ui); font-size:.78rem; font-weight:800;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.ml-cant-nota{ margin-top:5px; font-size:.7rem; color: var(--text-dim); }

/* ---- De dónde sale el total, cuando no todo viene de Odoo ---- */
.total-piezas-desglose{
  margin-top:3px; font-size:.7rem; line-height:1.4; color: var(--text-dim);
}
.total-piezas-desglose b{ color: var(--accent2); }
.total-piezas-ojo{ color: var(--warn); }

/* ===========================================================================
   El QR de "llévatelo al celular" (lo arma abrirQrModal)
   =========================================================================== */
.qr-btn{
  display:inline-flex; align-items:center; gap:6px; vertical-align:middle;
  margin-left:7px; padding:5px 11px; cursor:pointer;
  font-family: var(--font-ui); font-size:.72rem; font-weight:800; letter-spacing:.04em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius:8px;
  transition: color .14s ease, background .14s ease, border-color .14s ease, transform .1s ease;
}
.qr-btn:hover{
  color:#04211c; background: var(--accent); border-color: var(--accent);
  transform: translateY(-1px);
}
.qr-btn-icon{ display:flex; line-height:0; }

/* EL GLOBO: una tarjeta que sale DEL botón, no una ventana. Lo usan el QR y las Etiquetas.
   En computadora se cuelga del botón y crece desde la orilla por la que aparece — eso es lo que
   lo hace leerse como "esto salió de ahí". En celular sale centrado (ver .centrado). */
.alba-globo{
  position:fixed; z-index:120;
  max-height: min(70vh, 420px); padding:12px;
  display:flex; flex-direction:column; gap:8px;
  background: var(--surface); border:2px solid var(--border);
  border-radius: var(--radius-lg, 6px);
  box-shadow: 0 18px 42px rgba(0,0,0,.55);
  overflow:auto; overscroll-behavior: contain;
  animation: globoDespliega .26s cubic-bezier(.2,.9,.3,1) both;
}
/* Mientras se mide (antes de enseñarlo) no puede ir encogido por la animación: se mediría la
   mitad de lo que ocupa y caería en el lugar equivocado. */
.alba-globo.midiendo{ visibility:hidden; animation:none; }
/* Cada lado crece desde su propia orilla: abajo se abre hacia abajo, arriba hacia arriba. */
.alba-globo[data-lado="abajo"]{ transform-origin: var(--globo-flecha, 50%) 0; }
.alba-globo[data-lado="arriba"]{ transform-origin: var(--globo-flecha, 50%) 100%; }
.alba-globo[data-lado="derecha"]{ transform-origin: 0 var(--globo-flecha, 50%); }
.alba-globo[data-lado="izquierda"]{ transform-origin: 100% var(--globo-flecha, 50%); }
@keyframes globoDespliega{
  from{ opacity:0; transform: scale(.52); }
  to{   opacity:1; transform: none; }
}

/* La flechita que apunta al botón del que salió. */
.alba-globo::before{
  content:''; position:absolute; width:11px; height:11px;
  background: var(--surface);
  border-left:2px solid var(--border); border-top:2px solid var(--border);
}
.alba-globo[data-lado="abajo"]::before{ left: calc(var(--globo-flecha, 50%) - 6px); top:-7px; transform: rotate(45deg); }
.alba-globo[data-lado="arriba"]::before{ left: calc(var(--globo-flecha, 50%) - 6px); bottom:-7px; transform: rotate(225deg); }
.alba-globo[data-lado="derecha"]::before{ top: calc(var(--globo-flecha, 50%) - 6px); left:-7px; transform: rotate(-45deg); }
.alba-globo[data-lado="izquierda"]::before{ top: calc(var(--globo-flecha, 50%) - 6px); right:-7px; transform: rotate(135deg); }

/* Fijado de un click: un hilito de color para que se note que ya no se va solo al quitar el
   mouse — si no, parece que a veces se queda y a veces no, sin razón. */
.alba-globo.fijado{ border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }

/* En celular: centrado, con el fondo apagado. No hay mouse con el que salirse del globo, así que
   el toque de afuera tiene que ser evidente. */
.alba-globo.centrado{
  left:50%; top:50%;
  width: min(320px, calc(100vw - 34px));
  max-height: calc(100vh - 90px);
  animation: globoCentrado .24s cubic-bezier(.2,.9,.3,1) both;
}
.alba-globo.centrado::before{ display:none; }
@keyframes globoCentrado{
  from{ opacity:0; transform: translate(-50%, -50%) scale(.72); }
  to{   opacity:1; transform: translate(-50%, -50%) scale(1); }
}
.alba-globo-fondo{
  position:fixed; inset:0; z-index:119;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  animation: globoFondo .2s ease-out both;
}
@keyframes globoFondo{ from{ opacity:0; } to{ opacity:1; } }

.alba-globo-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.alba-globo-titulo{ font-size:.76rem; font-weight:800; color: var(--text); line-height:1.25; }
.alba-globo-x{
  flex:none; width:22px; height:22px; padding:0; cursor:pointer; line-height:1; font-size:.64rem;
  display:flex; align-items:center; justify-content:center;
  color: var(--text-dim); background:transparent;
  border:1px solid var(--border); border-radius: var(--radius, 4px);
}
.alba-globo-x:hover{ color: var(--text); border-color: var(--text-dim); }

/* ---- El globo del QR ---- */
.qr-pop{ width:236px; }
.qr-pop.centrado{ width: min(300px, calc(100vw - 34px)); }
.qr-pop-sub{
  font-family: var(--font-code); font-size:.64rem; font-weight:700; color: var(--accent);
  overflow-wrap:anywhere; line-height:1.3;
}
/* Fondo blanco siempre: un QR sobre fondo oscuro no lo lee ninguna cámara. */
.qr-pop-lienzo{
  --qr-pad: 9px;
  position:relative; width:100%; aspect-ratio:1;
  background:#fff; padding: var(--qr-pad); border-radius: var(--radius, 4px); box-sizing:border-box;
}
.qr-pop-img{ width:100%; height:100%; display:block; image-rendering: pixelated; }

/* Mientras la imagen del QR viene en camino, en vez de un cuadro blanco y quieto se ve un
   esqueleto con un brillo que lo recorre: así se entiende que está cargando y no que se rompió.
   Se quita en cuanto empieza a dibujarse el código. */
.qr-pop-lienzo.cargando::after{
  content:''; position:absolute; inset: var(--qr-pad); border-radius:2px;
  background: linear-gradient(100deg, #f2f2f2 30%, #e0e0e0 45%, #f2f2f2 60%);
  background-size: 300% 100%;
  animation: qrBrilla 1.1s linear infinite;
}
@keyframes qrBrilla{ from{ background-position: 160% 0; } to{ background-position: -60% 0; } }

/* El QR dibujándose cuadro por cuadro: tapas del mismo blanco que el fondo, que se van quitando
   en diagonal. El inset es el mismo padding del lienzo para que caigan justo sobre la imagen. */
.qr-pop-rejilla{
  position:absolute; inset: var(--qr-pad); pointer-events:none;
  display:grid;
  grid-template-columns: repeat(var(--qr-n, 21), 1fr);
  grid-template-rows: repeat(var(--qr-n, 21), 1fr);
}
.qr-pop-rejilla i{ display:block; background:#fff; }
.qr-pop-rejilla.dibuja i{ animation: qrCuadro .15s ease-out both; }
@keyframes qrCuadro{ from{ opacity:1; } to{ opacity:0; } }

.qr-pop-logo{
  position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);
  width:24%; aspect-ratio:1; border-radius:50%;
  background:#fff; box-shadow: 0 0 0 3px #fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.qr-pop-logo img{ width:84%; height:84%; object-fit:contain; display:block; }
/* El logo entra al final: antes no tendría sobre qué ponerse. */
.qr-pop-lienzo.dibujando .qr-pop-logo{ animation: qrLogoEntra .3s ease-out .58s both; }
@keyframes qrLogoEntra{
  from{ opacity:0; transform: translate(-50%, -50%) scale(.5); }
  to{   opacity:1; transform: translate(-50%, -50%) scale(1); }
}
.qr-pop-copiar{
  width:100%; padding:7px 10px; cursor:pointer;
  font-family: var(--font-ui); font-size:.72rem; font-weight:800;
  color:#04211c; background: var(--accent);
  border:none; border-radius: var(--radius, 4px);
}
.qr-pop-copiar:hover{ filter: brightness(1.08); }

/* ---- El globo de las Etiquetas ---- */
.etq-pop{ width: min(300px, calc(100vw - 34px)); }
.etq-pop-lista{ display:flex; flex-wrap:wrap; gap:7px; }
.etq-pop-lista .color-badge{ margin:0; }

@media (prefers-reduced-motion: reduce){
  .alba-globo, .alba-globo-fondo{ animation:none; }
  .qr-btn:hover{ transform:none; }
  .qr-pop-rejilla{ display:none; }
  .qr-pop-lienzo.dibujando .qr-pop-logo{ animation:none; }
  .qr-pop-lienzo.cargando::after{ animation:none; }
}

@media (prefers-reduced-motion: reduce){
  .qr-modal, .qr-lienzo{ animation:none; }
  .qr-btn:hover{ transform:none; }
}

/* ---------- Kardex por lotes ("-lt" / "-lt -all") ----------
   La lista de codigos es la que desplaza por dentro: la fecha arriba y los botones abajo se
   quedan quietos (misma regla que Temas y Novedades). Topes en %, nunca en vw/vh (ver el zoom
   de ajuste-escala.js). */
.lt-modal{
  max-width:560px; max-height:100%;
  overflow:hidden; display:flex; flex-direction:column; gap:10px;
  padding:20px 20px 14px;
}
.lt-modal .kw-head{ margin-bottom:0; }
.lt-modo{
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  padding:2px 9px; border-radius:8px; border:1px solid var(--border); color: var(--text-dim);
}
.lt-modo-completo{ border-color: var(--accent3); color: var(--accent3); }
.lt-ayuda{ margin:0; }
.lt-ayuda strong{ color: var(--text); font-family: var(--font-code); }
.lt-paso{ display:flex; flex-direction:column; gap:8px; }
.lt-paso-lista{ flex:1 1 auto; min-height:0; }
.lt-cuantos-fila{ display:flex; gap:10px; }
.lt-cuantos-fila input{ flex:0 0 90px; text-align:center; font-size:1.1rem; font-weight:800; }
.lt-cuantos-fila .btn{ flex:1 1 auto; }
.lt-etiqueta{
  display:block; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  color: var(--text-dim); margin-bottom:2px;
}
.lt-fecha{ display:flex; flex-direction:column; gap:4px; }
.lt-fecha .ml-modal-check-row > label{ white-space:nowrap; margin:0; }
.lt-fecha #ltFechaOtraInput{ width:96px; padding:6px 10px; }
.lt-lista{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
  padding:2px 4px 2px 0;
}
.lt-renglon{
  display:flex; flex-direction:column; gap:6px;
  padding:9px 10px; border:1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2);
}
.lt-cod-fila{ display:flex; align-items:center; gap:8px; }
.lt-num{
  flex:0 0 26px; height:26px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; background: var(--surface); border:1px solid var(--border);
  font-size:.72rem; font-weight:800; color: var(--text-dim);
}
.lt-cod-wrap{ position:relative; flex:1 1 auto; min-width:0; }
.lt-modal .lt-renglon input, .lt-modal .lt-renglon select{ padding:8px 10px; font-size:.86rem; background: var(--surface); }
.lt-codigo{ font-family: var(--font-code); font-weight:700; }
.lt-estado, .lt-oc-estado{ font-size:.74rem; padding-left:34px; overflow-wrap:anywhere; }
.lt-extra{ display:flex; flex-direction:column; gap:6px; padding-left:34px; }
.lt-extra .ko-sug{ margin-top:0; }
.lt-extra .lt-oc-estado{ padding-left:0; }
.lt-ac{
  display:none; position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:5;
  background: var(--surface); border:2px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); max-height:220px; overflow-y:auto;
}
.lt-ac.show{ display:block; }
.lt-ac-item{ display:flex; flex-direction:column; gap:1px; padding:7px 10px; cursor:pointer; border-bottom:1px solid var(--border); }
.lt-ac-item:last-child{ border-bottom:none; }
.lt-ac-item:hover, .lt-ac-item.activo{ background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.lt-ac-cod{ font-family: var(--font-code); font-weight:700; font-size:.8rem; overflow-wrap:anywhere; }
.lt-ac-nom{ font-size:.7rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lt-pie{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lt-cuenta{ font-size:.74rem; font-weight:700; color: var(--text-dim); }
.lt-agregar{ padding:6px 12px; font-size:.74rem; }
.lt-modal .kw-pie{ margin-top:2px; }
.lt-modal .kw-cancelar{ margin-top:4px; }
@media (max-width: 560px){
  .lt-modal{ padding:14px 12px 10px; }
  .lt-estado, .lt-oc-estado, .lt-extra{ padding-left:0; }
  /* En celular las tres opciones de fecha van en un renglon (o dos): apiladas se comian el
     alto que necesita la lista de codigos. */
  .lt-fecha{ flex-direction:row; flex-wrap:wrap; column-gap:14px; row-gap:4px; align-items:center; }
  .lt-fecha .lt-etiqueta{ flex:0 0 100%; }
  .lt-modal .kw-atras{ font-size:.74rem; }
}
@media (max-height: 560px){
  .lt-modal{ gap:6px; padding-top:12px; }
  .lt-ayuda{ display:none; }
}

/* Kardex por lotes en laptop/PC: a lo ancho (pedido de Manuel). En el rapido los codigos van en
   dos o tres columnas; en el completo cada renglon es una fila: codigo | ubicacion | cantidad |
   O.C., con sus sugerencias debajo de cada campo. El tope sigue en % (ver ajuste-escala.js). */
@media (min-width: 900px){
  .lt-modal{ max-width:860px; }
  .lt-modal-completo{ max-width:1180px; }
  .lt-fecha{ flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:18px; row-gap:4px; }
  .lt-fecha .lt-etiqueta{ margin:0 4px 0 0; }

  .lt-modal:not(.lt-modal-completo) .lt-lista{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-content:start;
  }

  .lt-modal-completo .lt-renglon{
    display:grid; grid-template-columns:minmax(0, 32%) minmax(0, 1fr);
    grid-template-rows:auto 1fr;
    column-gap:12px; row-gap:4px; align-items:start;
  }
  .lt-modal-completo .lt-cod-fila{ grid-column:1; grid-row:1; }
  .lt-modal-completo .lt-estado{ grid-column:1; grid-row:2; }
  .lt-modal-completo .lt-extra{
    grid-column:2; grid-row:1 / span 2; padding-left:0;
    display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:"ubic cant oc" "usug . osug" "usug . oest";
    column-gap:8px; row-gap:4px; align-items:start;
  }
  .lt-modal-completo .lt-ubic{ grid-area:ubic; }
  .lt-modal-completo .lt-ubic-sug{ grid-area:usug; }
  .lt-modal-completo .lt-extra .kw-dos{ grid-area:cant; gap:6px; }
  .lt-modal-completo .lt-oc{ grid-area:oc; }
  .lt-modal-completo .lt-oc-sug{ grid-area:osug; }
  .lt-modal-completo .lt-oc-estado{ grid-area:oest; }
  .lt-modal-completo .lt-ubic-sug:empty, .lt-modal-completo .lt-oc-sug:empty{ display:none; }
  /* La O.C. sugerida no se parte ("P1290 / 0"): su fecha y cantidad bajan de renglon antes. */
  .lt-modal-completo .ko-chip{ flex-wrap:wrap; row-gap:2px; }
  .lt-modal-completo .ko-chip-valor{ white-space:nowrap; overflow-wrap:normal; }
}
@media (min-width: 1200px){
  .lt-modal:not(.lt-modal-completo){ max-width:1080px; }
  .lt-modal:not(.lt-modal-completo) .lt-lista{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* Casilla "Incluir el codigo de proveedor" del Kardex: apagada de inicio, solo sale si hay
   proveedor que ofrecer (ultimo paso del Kardex y arriba en el Kardex por lotes). */
.ko-prov-opcion{
  display:flex; align-items:center; gap:10px; cursor:pointer; margin-top:8px;
  padding:9px 11px; border:1px dashed var(--border); border-radius: var(--radius);
  background: var(--surface-2); text-transform:none; letter-spacing:normal;
}
.ko-prov-opcion:hover{ border-color: var(--accent); }
.ml-modal .ko-prov-opcion input{ width:17px; height:17px; flex:none; accent-color: var(--accent); margin:0; }
.ko-prov-opcion-texto{ display:flex; flex-direction:column; gap:1px; line-height:1.3; }
.ko-prov-opcion-texto strong{ font-size:.82rem; color: var(--text); }
.ko-prov-opcion-texto small{ font-size:.72rem; color: var(--text-dim); font-weight:400; }
.lt-prov-opcion{ margin-top:0; padding:7px 10px; }

/* Atajos: misma ventana que Cambios y Novedades (la lista desplaza por dentro). */
.atajos-modal{ width:min(720px, 100%); }

/* Dispositivos conectados: una tarjeta por cuenta, un renglon por aparato (icono, que es,
   hace cuanto se reporto y el codigo en el que va, que se puede tocar para abrirlo aqui). */
.disp-modal{ width:min(640px, 100%); }
.disp-total{ font-size:.78rem; font-weight:700; color: var(--text-dim); flex:none; }
.disp-cuenta{
  display:flex; flex-direction:column; gap:6px; flex:none;
  padding:10px 12px; background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--radius-lg, 6px);
}
.disp-cuenta + .disp-cuenta{ margin-top:8px; }
.disp-cuenta-cab{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.disp-cuenta-nombre{ font-weight:800; font-size:.92rem; color: var(--text); }
.disp-rol{
  font-size:.66rem; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color: var(--accent); margin-left:4px;
}
.disp-cuenta-num{ font-size:.74rem; color: var(--text-dim); }
.disp-item{
  display:flex; align-items:center; gap:10px; padding:7px 9px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
}
.disp-icono{ font-size:1.3rem; line-height:1; flex:none; }
.disp-info{ flex:1; min-width:0; }
.disp-tipo{ font-weight:700; font-size:.84rem; color: var(--text); }
.disp-este{
  font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  padding:1px 6px; border-radius:8px; margin-left:4px;
  background: var(--accent); color:#04211c;
}
.disp-detalle{ font-size:.72rem; color: var(--text-dim); overflow-wrap:anywhere; }
/* Donde anda el aparato: una busqueda se puede tocar para abrirla aqui; una seccion se lee. */
.disp-donde{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:5px; }
.disp-codigo{
  width:auto; max-width:100%; overflow-wrap:anywhere; text-align:left;
  padding:4px 9px; font-family: var(--font-code); font-size:.72rem; font-weight:800; text-transform:none;
}
.disp-lugar{
  font-size:.74rem; font-weight:700; color: var(--text);
  padding:3px 8px; border:1px dashed var(--border); border-radius: var(--radius);
}
.disp-cuando{ font-size:.68rem; color: var(--text-dim); }
.disp-acciones{ flex:none; display:flex; align-items:center; }
.disp-cerrar{
  width:auto; padding:6px 10px; font-size:.68rem;
  border-color: color-mix(in srgb, var(--err) 55%, var(--border));
  color: var(--err); background: color-mix(in srgb, var(--err) 10%, var(--surface-2));
}
.disp-cerrar.disp-cerrar-seguro{ background: var(--err); color:#fff; }
.disp-espera{ font-size:.66rem; color: var(--text-dim); text-align:right; max-width:92px; line-height:1.3; }
@media (max-width: 460px){
  .disp-item{ flex-wrap:wrap; }
  .disp-acciones{ width:100%; justify-content:flex-end; }
  .disp-espera{ max-width:none; }
}
.atajos-grupo{ display:flex; flex-direction:column; gap:7px; flex:none; }
.atajos-grupo + .atajos-grupo{ margin-top:8px; }
.atajos-grupo-nombre{
  font-size:.72rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color: var(--text-dim);
}
.atajo{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:12px; row-gap:4px; align-items:center;
  padding:10px 12px; background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--radius-lg, 6px); flex:none;
}
.atajo-cmd{
  grid-column:1; justify-self:start;
  font-family: var(--font-code); font-weight:800; font-size:.88rem; color: var(--accent);
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding:3px 8px; overflow-wrap:anywhere;
}
.atajo-que{ grid-column:1; font-size:.8rem; line-height:1.45; color: var(--text); }
.atajo-usar{ grid-column:2; grid-row:1 / span 2; padding:7px 14px; font-size:.74rem; }
@media (max-width: 460px){
  .atajo{ grid-template-columns:1fr; }
  .atajo-usar{ grid-column:1; grid-row:auto; justify-self:start; }
}

/* Atajos propios: los botones de cada renglon (Usar, Editar, Borrar) van juntos en su columna,
   y el asistente de crear uno va en pasos. */
.atajo-botones{ grid-column:2; grid-row:1 / span 2; display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.atajo-botones .atajo-usar{ grid-column:auto; grid-row:auto; }
.atajo-editar, .atajo-borrar{ width:auto; padding:6px 10px; font-size:.68rem; }
.atajo-borrar{ color: var(--err); border-color: color-mix(in srgb, var(--err) 50%, var(--border)); }
.atajo-borrar.atajo-borrar-seguro{ background: var(--err); color:#fff; }
.atajo-antes{ color: var(--text-dim); font-size:.72rem; }
.atajo-nuevo{ border-style:dashed; color: var(--accent); }
@media (max-width: 460px){
  .atajo-botones{ grid-column:1; grid-row:auto; justify-content:flex-start; }
}

.asis{ display:flex; flex-direction:column; gap:12px; }
.asis-pasos{ display:flex; flex-wrap:wrap; gap:6px; }
.asis-paso{
  font-size:.68rem; font-weight:800; letter-spacing:.3px; padding:4px 9px;
  border:1px solid var(--border); border-radius:8px; color: var(--text-dim);
}
.asis-paso.hecho{ color: var(--accent4); border-color: color-mix(in srgb, var(--accent4) 50%, var(--border)); }
.asis-paso.actual{ background: var(--accent); border-color: var(--accent); color:#04211c; }
.asis-pregunta{ font-weight:800; font-size:1rem; color: var(--text); }
.asis-ayuda{ font-size:.76rem; color: var(--text-dim); line-height:1.45; }
.asis-simbolos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.asis-simbolo{
  flex-direction:column; justify-content:center; gap:4px; width:auto; padding:14px 8px; text-transform:none;
}
.asis-simbolo-signo{ font-family: var(--font-code); font-size:2rem; line-height:1; color: var(--accent); }
.asis-simbolo.elegido, .asis-accion.elegido{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.asis-palabra{
  display:flex; align-items:center; gap:4px; padding:4px 10px;
  border:2px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.asis-palabra-signo{ font-family: var(--font-code); font-weight:900; font-size:1.3rem; color: var(--accent); }
.asis-palabra input{
  flex:1; min-width:0; border:none; outline:none; background:transparent; color: var(--text);
  font-family: var(--font-code); font-size:1.2rem; font-weight:800; padding:8px 2px;
}
.asis-previa code{
  font-family: var(--font-code); font-weight:900; font-size:1.1rem; color: var(--accent);
  padding:4px 10px; border:1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.asis-acciones{ display:flex; flex-direction:column; gap:6px; }
.asis-grupo{ font-size:.7rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color: var(--text-dim); margin-top:6px; }
.asis-accion{
  width:100%; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  padding:9px 12px; font-size:.8rem; text-transform:none;
}
.asis-accion small{ font-weight:400; font-size:.7rem; color: var(--text-dim); }
.asis-resumen{
  display:flex; flex-direction:column; gap:8px; padding:12px 14px;
  border:1px solid var(--border); border-radius: var(--radius-lg, 8px); background: var(--surface-2);
}
.asis-resumen .atajo-cmd{ font-size:1.05rem; }
/* .ml-modal label pone mayusculas y bloque a todos los label del modal: aqui no aplica. */
.ml-modal label.ko-prov-opcion{
  display:flex; margin-bottom:0; text-transform:none; letter-spacing:normal;
  font-size:inherit; font-weight:400; color: var(--text);
}

/* Editar el menu (celular): ✕ manda el renglon al Panel de Control, y debajo esta lo que vive
   en el panel para traerlo de vuelta con un toque. */
.dr-quitar{
  flex:none; width:30px; height:30px; margin-left:6px; border-radius:50%; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--err) 55%, var(--border));
  background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err);
  font-size:.8rem; font-weight:900; line-height:1;
}
.dr-panel-titulo{
  margin:14px 4px 4px; font-size:.72rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color: var(--text-dim); display:flex; flex-direction:column; gap:2px;
}
.dr-panel-titulo small{ font-size:.68rem; font-weight:400; letter-spacing:0; text-transform:none; }
.dr-agregar{ border-style:dashed !important; opacity:.85; }
.dr-agregar .dr-label{ flex:1; }
.dr-agregar-mas{ flex:none; color: var(--accent); font-weight:900; font-size:1rem; }

/* -ubp: el nombre del producto y los datos chicos (cantidad, hace cuantos dias) debajo. */
.ubp-nombre{ font-size:.72rem; color: var(--text-dim); margin-top:2px; max-width:340px; }
.ubp-sub{ font-size:.72rem; color: var(--text-dim); margin-top:2px; }

/* ---------- -ubp con diseño: una tarjeta por pendiente ----------
   El movimiento se lee de izquierda a derecha (lo que dice el sistema ➜ donde esta), y el
   color de la orilla dice cuanto lleva esperando: rojo mas de un mes, ambar mas de una semana. */
.ubp-cab{
  display:flex; flex-direction:column; gap:10px; margin-bottom:14px;
  padding:14px 16px; border:1px solid var(--border); border-radius: var(--radius-lg, 8px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), var(--surface-2));
}
.ubp-cab-fila{ display:flex; align-items:center; gap:12px; }
.ubp-cab-icono{ font-size:1.6rem; line-height:1; }
.ubp-cab-fila > div{ flex:1; min-width:0; }
.ubp-cab-titulo{ font-size:1rem; font-weight:800; color: var(--text); }
.ubp-cab-sub{ font-size:.76rem; color: var(--text-dim); line-height:1.45; margin-top:2px; }
.ubp-cab-total{
  flex:none; min-width:46px; height:46px; padding:0 10px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; border-radius:8px;
  font-size:1.3rem; font-weight:900; color:#04211c; background: var(--accent);
}
.ubp-resumen{ display:flex; flex-wrap:wrap; gap:7px; }
.ubp-resumen:empty{ display:none; }
.ubp-res{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:8px;
  font-size:.74rem; color: var(--text); border:1px solid var(--border); background: var(--surface);
}
.ubp-res b{ font-size:.85rem; }
.ubp-res-alta{ border-color: color-mix(in srgb, var(--err) 60%, var(--border)); }
.ubp-res-alta b{ color: var(--err); }
.ubp-res-media{ border-color: color-mix(in srgb, var(--warn) 60%, var(--border)); }
.ubp-res-media b{ color: var(--warn); }
.ubp-res-baja b{ color: var(--ok); }

.ubp-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap:10px; }
.ubp-card{
  display:flex; flex-direction:column; gap:9px; padding:13px 14px 11px;
  background: var(--surface-2); border:1px solid var(--border); border-left:4px solid var(--ok);
  border-radius: var(--radius-lg, 8px);
  transition: transform .12s var(--ease, ease), box-shadow .12s var(--ease, ease);
}
.ubp-card:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.25)); }
.ubp-urg-media{ border-left-color: var(--warn); }
.ubp-urg-alta{ border-left-color: var(--err); }
.ubp-card-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ubp-codigo{
  all:unset; cursor:pointer; min-width:0; overflow-wrap:anywhere;
  font-family: var(--font-code); font-weight:800; font-size:.86rem; color: var(--accent); line-height:1.35;
}
.ubp-codigo:hover{ text-decoration:underline; }
.ubp-codigo:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
.ubp-dias{
  flex:none; padding:3px 9px; border-radius:8px; white-space:nowrap;
  font-size:.68rem; font-weight:900; letter-spacing:.3px; text-transform:uppercase;
  color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.ubp-urg-media .ubp-dias{ color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.ubp-urg-alta .ubp-dias{ color: var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); }
.ubp-card .ubp-nombre{
  max-width:none; margin:0; font-size:.74rem; line-height:1.4; color: var(--text-dim);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.ubp-mov{ display:grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr); align-items:stretch; gap:8px; }
.ubp-lado{
  display:flex; flex-direction:column; gap:5px; padding:8px 10px; min-width:0;
  border-radius: var(--radius, 6px); background: var(--surface); border:1px solid var(--border);
}
.ubp-lado-tit{ font-size:.62rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color: var(--text-dim); }
.ubp-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.ubp-chip{
  display:inline-flex; align-items:center; gap:6px; padding:2px 7px; border-radius: var(--radius, 4px);
  font-family: var(--font-code); font-size:.74rem; font-weight:700; color: var(--text);
  background: var(--surface-2); border:1px solid var(--border);
}
.ubp-chip b{ font-family: var(--font-ui); font-size:.68rem; color: var(--text-dim); }
.ubp-chip-otro{ opacity:.6; font-weight:500; }
.ubp-vacio{ font-size:.74rem; color: var(--text-dim); font-style:italic; }
.ubp-flecha{ align-self:center; font-size:1.1rem; color: var(--accent); }
.ubp-lado-real{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.ubp-ubic{ font-family: var(--font-code); font-weight:900; font-size:1rem; color: var(--accent); overflow-wrap:anywhere; }
.ubp-cant{ font-size:.74rem; font-weight:700; color: var(--text); }
.ubp-pie{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 10px;
  font-size:.72rem; color: var(--text-dim); padding-top:7px; border-top:1px dashed var(--border);
}

/* Celular: el movimiento va de arriba a abajo, con la flecha apuntando hacia abajo. */
@media (max-width: 520px){
  .ubp-mov{ grid-template-columns: 1fr; }
  .ubp-flecha{ justify-self:center; transform: rotate(90deg); line-height:1; }
  .ubp-cab-total{ min-width:40px; height:40px; font-size:1.1rem; }
}

/* -ubp: ANTES (lo que dice el sistema) con el color de salida y AHORA (la ubicacion manual) con
   el de entrada — los mismos acentos que usa toda la app para los movimientos, asi que cambian
   con el tema. La flecha pasa de un color al otro. */
.ubp-etapa{
  display:inline-block; margin-right:6px; padding:1px 7px; border-radius:8px;
  font-size:.6rem; font-weight:900; letter-spacing:.6px; color:#04211c;
}
.ubp-lado-sistema{
  border-color: color-mix(in srgb, var(--accent3) 50%, var(--border));
  background: color-mix(in srgb, var(--accent3) 8%, var(--surface));
}
.ubp-lado-sistema .ubp-lado-tit{ color: var(--accent3); }
.ubp-lado-sistema .ubp-etapa{ background: var(--accent3); }
.ubp-lado-sistema .ubp-chip{ border-color: color-mix(in srgb, var(--accent3) 35%, var(--border)); }
.ubp-lado-real{
  border-color: color-mix(in srgb, var(--accent4) 65%, var(--border));
  background: color-mix(in srgb, var(--accent4) 12%, var(--surface));
}
.ubp-lado-real .ubp-lado-tit{ color: var(--accent4); }
.ubp-lado-real .ubp-etapa{ background: var(--accent4); }
.ubp-lado-real .ubp-ubic{ color: var(--accent4); }
.ubp-flecha{
  background: linear-gradient(90deg, var(--accent3), var(--accent4));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size:1.35rem;
}

/* ---------- Historial de busqueda con forma (pedido de Manuel) ----------
   Tarjetas en rejilla, agrupadas por dia. Cada tipo trae su color (--hs-c): la orilla, el
   circulo del icono y la etiqueta. El codigo va partido en piezas: la familia resaltada. */
#historialList{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap:8px; align-content:start;
}
#historialList .hs-grupo{
  grid-column: 1 / -1; display:flex; align-items:center; gap:10px; margin:6px 2px 0;
  font-size:.7rem; font-weight:900; letter-spacing:.7px; text-transform:uppercase; color: var(--text-dim);
}
#historialList .hs-grupo::after{ content:''; flex:1; height:1px; background: var(--border); }
#historialList .hs-grupo:first-child{ margin-top:0; }

#historialPanel #historialList .search-history-item.hs-card{
  --hs-c: var(--accent);
  position:relative; display:flex; align-items:center; gap:12px;
  padding:11px 12px; border:1px solid var(--border); border-left:4px solid var(--hs-c);
  border-radius: var(--radius-lg, 8px);
  background: linear-gradient(90deg, color-mix(in srgb, var(--hs-c) 8%, var(--surface-2)), var(--surface-2) 60%);
  transition: transform .12s var(--ease, ease), box-shadow .12s var(--ease, ease), border-color .12s;
}
#historialPanel #historialList .search-history-item.hs-card:hover{
  transform: translateY(-1px); border-color: color-mix(in srgb, var(--hs-c) 55%, var(--border));
  border-left-color: var(--hs-c); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.25));
}
.hs-card.hs-oc{ --hs-c: var(--accent2); }
.hs-card.hs-pedido{ --hs-c: var(--accent4); }
.hs-card.hs-mo{ --hs-c: var(--accent3); }
.hs-card.hs-transf{ --hs-c: var(--warn); }
.hs-card.hs-ubic{ --hs-c: var(--ok); }

.hs-icono{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  background: color-mix(in srgb, var(--hs-c) 16%, var(--surface));
  border:1px solid color-mix(in srgb, var(--hs-c) 45%, var(--border));
}
.hs-main{ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.hs-tipo{
  align-self:flex-start; font-size:.6rem; font-weight:900; letter-spacing:.6px; text-transform:uppercase;
  color: var(--hs-c);
}
.hs-codigo{
  font-family: var(--font-code); font-size:.86rem; line-height:1.35; color: var(--text);
  overflow-wrap:anywhere; white-space:normal;
}
.hs-fam{ font-weight:900; color: var(--hs-c); }
.hs-pieza{ font-weight:700; }
.hs-pieza:not(.hs-fam){ color: var(--text); opacity:.85; }
.hs-sep{ margin:0 2px; color: var(--text-dim); opacity:.6; font-weight:400; }
#historialPanel #historialList .hs-hora{ font-size:.7rem; color: var(--text-dim); }
.hs-card .sh-clear{
  flex:none; width:28px; height:28px; border-radius:50%; cursor:pointer;
  border:1px solid transparent; background:transparent; color: var(--text-dim); font-size:.75rem;
  opacity:.55; transition: opacity .12s, color .12s, border-color .12s, background .12s;
}
.hs-card:hover .sh-clear{ opacity:1; }
.hs-card .sh-clear:hover{ color: var(--err); border-color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
@media (hover: none){ .hs-card .sh-clear{ opacity:1; } }
/* "Cuenta encontrada" con el dibujo del tema: la bandera de los temas patrios es una imagen. */
.leh-icono .alba-emblema-img{ width:18px; height:auto; display:block; }

/* "Ya terminó el mantenimiento" (ver avisarFinDeMantenimiento en actualizar.js): arriba, encima
   del acceso, hasta que se cierre o pasen 20 s. */
.alba-fin-mant{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:99999;
  width:min(460px, calc(100% - 24px)); display:grid; grid-template-columns:1fr auto; gap:2px 10px;
  padding:12px 14px; border-radius: var(--radius-lg, 10px);
  background: var(--surface-2); color: var(--text); border:2px solid var(--accent4);
  box-shadow: 0 10px 30px rgba(0,0,0,.45); animation: albaFinMant .4s ease both;
}
.alba-fin-mant strong{ grid-column:1; font-size:.92rem; }
.alba-fin-mant span{ grid-column:1; font-size:.8rem; line-height:1.4; color: var(--text-dim); }
.alba-fin-mant button{
  grid-column:2; grid-row:1 / span 2; align-self:start; background:none; border:none; cursor:pointer;
  color: var(--text-dim); font-size:1rem; padding:2px 4px;
}
@keyframes albaFinMant{ from{ opacity:0; transform:translate(-50%, -10px); } to{ opacity:1; transform:translate(-50%, 0); } }

/* Recorte de varias fotos: "Foto 2 de 5" junto al titulo. Y en la bandeja, el boton de recortar
   cada miniatura (abajo a la izquierda; el de quitar va arriba a la derecha). */
.recorte-progreso{ font-size:.72rem; font-weight:800; color: var(--text-dim); margin-left:6px; white-space:nowrap; }
.bandeja-foto-recortar{
  position:absolute; left:4px; bottom:4px; width:28px; height:28px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; line-height:1;
  background: rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.35); color:#fff;
}

/* Recorte de angulo (correccion de perspectiva): la figura de 4 esquinas sobre la foto, lo de
   afuera oscurecido, y una asa redonda en cada esquina que se mueve por su lado. */
.recorte-escenario[data-forma="perspectiva"] .recorte-mascara{ display:none; }
.recorte-escenario[data-forma="perspectiva"] .recorte-marco{ cursor:default; }
.recorte-persp{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.recorte-persp[hidden]{ display:none; }
/* La guia va en el color del TEMA (pedido de Manuel): dentro de la figura ese color
   semitransparente, el borde solido, y debajo de todo un contorno oscuro para que se siga viendo
   sobre fondo blanco (el producto suele venir preparado sobre blanco). Las esquinas son
   esquineros en L, sin circulos que tapen lo que se acomoda; lo que se agarra es una zona
   invisible de 44 px alrededor de cada esquina (.recorte-pt). */
.recorte-persp-fuera{ fill: rgba(4,4,6,.5); fill-rule: evenodd; }
.recorte-persp-halo{ fill:none; stroke: rgba(0,0,0,.6); stroke-width:5; stroke-linejoin:round; }
.recorte-persp-borde{ fill: color-mix(in srgb, var(--accent) 26%, transparent); stroke: var(--accent); stroke-width:2.5; stroke-linejoin:round; }
.recorte-esq-halo{ fill:none; stroke: rgba(0,0,0,.65); stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
.recorte-esq{ fill:none; stroke: var(--accent); stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; }
.recorte-pt{
  position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
  background:transparent; cursor:grab; touch-action:none; z-index:2;
}
.recorte-pt[hidden]{ display:none; }
.recorte-pt:active{ cursor:grabbing; }

/* Menu flotante editable (PC): el emoji de lo que vino del panel y la ventana de editar. */
.dock-emoji{ font-size:1.25rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; }
.dock-editar{ width:min(560px, 100%); }
.de-titulo{ font-size:.72rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color: var(--text-dim); margin:4px 0 2px; flex:none; }
.de-titulo small{ font-weight:400; letter-spacing:0; text-transform:none; margin-left:6px; }
.de-fila{ display:flex; flex-direction:column; gap:6px; flex:none; }
.de-item{
  display:flex; align-items:center; gap:10px; padding:7px 10px; width:100%;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font:inherit; text-align:left;
}
.de-item .dock-svg{ width:22px; height:22px; flex:none; }
.de-nombre{ flex:1; min-width:0; font-size:.86rem; font-weight:700; }
.de-botones{ display:flex; gap:4px; flex:none; }
.de-btn{
  width:30px; height:30px; border-radius: var(--radius); cursor:pointer; font-weight:900;
  background: var(--surface); border:1px solid var(--border); color: var(--text);
}
.de-btn:disabled{ opacity:.35; cursor:default; }
.de-quitar{ color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, var(--border)); }
.de-agregar{ cursor:pointer; border-style:dashed; }
.de-agregar:hover{ border-color: var(--accent); }
.de-mas{ color: var(--accent); font-weight:900; font-size:1.05rem; }
.nov-acciones.de-acciones{ flex-direction:row; }
.nov-acciones.de-acciones .btn{ flex:1 1 0; width:auto; }

/* Cuadricula de las fotos adjuntas (ver albaCuadriculaAdjuntas): N columnas, cada foto llena su
   columna y se ve completa con su forma (alto automatico). Gana sobre el ancho que les pone el
   ajuste a la forma de la foto, que es para la fila de miniaturas. */
.adj-cuadricula{ margin:2px 0 8px; justify-content:flex-start; }
.attachments-row[data-cols]{ display:grid; gap:8px; align-items:start; }
.attachments-row[data-cols="3"]{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.attachments-row[data-cols="4"]{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.attachments-row[data-cols="5"]{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
.attachments-row[data-cols="6"]{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
.attachments-row[data-cols] .attach-thumb-wrap{ display:block; }
.attachments-row[data-cols] .attach-thumb{
  width:100% !important; height:auto; object-fit:contain; background: var(--surface-2);
}
.attachments-row[data-cols="3"] .attach-thumb{ max-height:240px; }
.attachments-row[data-cols="4"] .attach-thumb{ max-height:180px; }
.attachments-row[data-cols="5"] .attach-thumb{ max-height:150px; }
.attachments-row[data-cols="6"] .attach-thumb{ max-height:125px; }

/* Que es cada foto adjunta: lapiz arriba a la izquierda (el check de borrar va a la derecha) y
   el texto debajo de la foto. En modo de elegir para borrar, el lapiz se esconde. */
.attach-nota-btn{
  position:absolute; top:4px; left:4px; width:26px; height:26px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.72rem; line-height:1; z-index:1;
  background: rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.35); color:#fff;
}
.attach-nota-btn:hover{ background: var(--accent); }
.attachments-row.eligiendo .attach-nota-btn{ display:none; }
.attachments-row[data-cols] .attach-thumb-wrap{ display:flex; flex-direction:column; gap:4px; }
.attach-nota{
  display:block; font-size:.74rem; font-weight:700; line-height:1.3; color: var(--text);
  padding:3px 6px; border-left:3px solid var(--accent); background: var(--surface-2); border-radius:4px;
  overflow-wrap:anywhere;
}
.attach-nota[hidden]{ display:none; }
.nota-foto-modal{ display:flex; flex-direction:column; gap:10px; width:min(440px, 100%); }
.nota-foto-img{ max-height:180px; width:100%; object-fit:contain; border-radius:8px; background: var(--surface-2); }
.nota-foto-modal input{
  font:inherit; font-size:.92rem; color: var(--text); padding:9px 11px;
  background: var(--surface); border:2px solid var(--border); border-radius: var(--radius);
}
.nota-foto-sugeridas{ display:flex; flex-wrap:wrap; gap:6px; }
.nota-foto-sug{
  font:inherit; font-size:.72rem; font-weight:700; cursor:pointer; color: var(--text);
  padding:5px 9px; border-radius:8px; background: var(--surface-2); border:1px solid var(--border);
}
.nota-foto-sug:hover{ border-color: var(--accent); color: var(--accent); }

/* La ventana del titulo se abre ENCIMA de la pantalla completa (el lapiz tambien vive ahi). */
.modal-overlay:has(.nota-foto-modal){ z-index: 100000; }

/* ---------- Historial de movimientos de la ficha: acordeon ----------
   Entradas, Salidas y MO como botones compactos, uno abierto a la vez (ver movAcordeonHtml). */
.mov-acordeon{ display:flex; flex-direction:column; gap:8px; margin:6px 0 14px; }
.mov-acc{
  border:1px solid var(--border); border-radius: var(--radius-lg, 8px);
  background: var(--surface-2); overflow:hidden;
  transition: border-color .15s;
}
.mov-acc-in{ --mov-c: var(--accent); }
.mov-acc-out{ --mov-c: var(--accent3); }
.mov-acc-mo{ --mov-c: var(--warn); }
.mov-acc.abierto{ border-color: color-mix(in srgb, var(--mov-c) 60%, var(--border)); }
.mov-acc-btn{
  all:unset; box-sizing:border-box; width:100%; cursor:pointer;
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:11px 14px;
  border-left:4px solid var(--mov-c);
  font-family: var(--font-ui); color: var(--text);
  transition: background .12s;
}
.mov-acc-btn:hover{ background: color-mix(in srgb, var(--mov-c) 8%, var(--surface-2)); }
.mov-acc-btn:focus-visible{ outline:2px solid var(--mov-c); outline-offset:-2px; }
.mov-acc-btn .flow-tag{ margin:0; }
.mov-acc-titulo{ font-size:.84rem; font-weight:700; }
.mov-acc-badges{ display:inline-flex; flex-wrap:wrap; gap:4px; flex:1 1 auto; }
.mov-acc-badges .qty-badge{ margin:0; }
.mov-acc-flecha{ margin-left:auto; color: var(--mov-c); font-size:.9rem; transition: transform .15s; }
.mov-acc.abierto .mov-acc-btn{ background: color-mix(in srgb, var(--mov-c) 10%, var(--surface-2)); }
.mov-acc-cuerpo{ padding:4px 12px 12px; border-top:1px solid var(--border); }
.mov-acc-cuerpo .history-hint{ margin-top:8px; }

/* ---------- Recortar fotos ya subidas (pedido de Manuel) ----------
   Arriba a la izquierda de cada adjunta: ✏️ recorta y 🔤 le pone titulo. */
.attach-acciones{
  position:absolute; top:4px; left:4px; z-index:1; display:flex; gap:4px;
}
.attach-acciones:empty{ display:none; }
.attach-acciones .attach-nota-btn{ position:static; }
.attach-recortar-btn{
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.72rem; line-height:1;
  background: rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.35); color:#fff;
}
.attach-recortar-btn:hover{ background: var(--accent); }
.attachments-row.eligiendo .attach-acciones{ display:none; }
.lightbox-recortar{ border-color: var(--accent4); }
.lightbox-recortar:hover:not(:disabled){ background: var(--accent4); color:#04211c; }

/* La ventana de recorte: el lienzo se lleva todo el alto que sobre (Cropper.js mide a su
   contenedor al arrancar). Topes en % por el zoom de ajuste-escala.js. */
.modal-overlay.rcf-overlay{ z-index:12000; }
.rcf-modal{
  width:min(860px, 100%); height:min(780px, 100%); padding:16px;
  display:flex; flex-direction:column; gap:10px; overflow:hidden;
}
.rcf-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex:none; }
.rcf-titulo{ font-size:1rem; font-weight:800; }
.rcf-lienzo{
  position:relative; flex:1 1 auto; min-height:220px; border-radius: var(--radius, 6px);
  overflow:hidden; background:#0b0b0b;
}
.rcf-lienzo img{ display:block; max-width:100%; max-height:100%; }
.rcf-cargando{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#ddd; font-size:.85rem; text-align:center; padding:12px;
}
.rcf-barra{ display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:space-between; flex:none; }
.rcf-grupo{ display:flex; flex-wrap:wrap; gap:6px; }
.rcf-chip{
  padding:6px 11px; border-radius:8px; cursor:pointer; font-family:inherit;
  font-size:.76rem; font-weight:700; color: var(--text);
  background: var(--surface-2); border:1px solid var(--border);
  transition: border-color .12s, background .12s, color .12s;
}
.rcf-chip:hover{ border-color: var(--accent); }
.rcf-chip.activo{ color:#04211c; background: var(--accent); border-color: var(--accent); }
.rcf-nota{ margin:0; font-size:.74rem; color: var(--text-dim); flex:none; }
.rcf-nota strong{ color: var(--text); }
.rcf-acciones{ display:flex; gap:10px; justify-content:flex-end; flex:none; }
.rcf-acciones .btn{ min-width:120px; }
@media (max-width: 520px){
  .rcf-modal{ padding:12px; }
  .rcf-barra{ justify-content:flex-start; }
  .rcf-acciones .btn{ flex:1; min-width:0; }
}

/* Formas del recorte: un iconito de la forma en cada boton, y el recuadro de Cropper toma esa
   forma mientras se recorta (lo de afuera se guarda transparente, ver RCF_FORMAS). */
.rcf-formas{ flex:1 1 100%; }
.rcf-chip{ display:inline-flex; align-items:center; gap:6px; }
.rcf-forma-ico{
  display:inline-block; flex:none; width:14px; height:14px;
  border:2px solid currentColor; border-radius:2px; box-sizing:border-box;
}
.rcf-ico-libre{ border-style:dashed; }
.rcf-ico-cuadrado{ width:13px; height:13px; }
.rcf-ico-rectangular{ width:17px; height:12px; }
.rcf-ico-panoramico{ width:20px; height:11px; }
.rcf-ico-vertical{ width:11px; height:15px; }
.rcf-ico-circular{ border-radius:50%; }
.rcf-ico-ovalado{ width:19px; height:12px; border-radius:50%; }
.rcf-ico-redondeado{ width:17px; height:13px; border-radius:5px; }
.cropper-container.rcf-forma-circular .cropper-view-box,
.cropper-container.rcf-forma-circular .cropper-face,
.cropper-container.rcf-forma-ovalado .cropper-view-box,
.cropper-container.rcf-forma-ovalado .cropper-face{ border-radius:50%; }
.cropper-container.rcf-forma-redondeado .cropper-view-box,
.cropper-container.rcf-forma-redondeado .cropper-face{ border-radius:12%; }
.cropper-container.rcf-forma-circular .cropper-view-box,
.cropper-container.rcf-forma-ovalado .cropper-view-box,
.cropper-container.rcf-forma-redondeado .cropper-view-box{
  outline:none; box-shadow: 0 0 0 2px var(--accent);
}

/* Notas internas: "Editar nota" y "Ver nota" lado a lado; la nota sale oculta y se abre entera
   con su boton (pedido de Manuel), en vez de plegada a media altura. */
.notes-botones{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.notes-botones .btn{ margin:0; }
.internal-notes.oculta{ display:none; }
.notes-ver-btn{ display:inline-flex; align-items:center; gap:6px; }
.notes-ver-btn.activo{ border-color: var(--accent); color: var(--accent); }
.notes-ver-cuenta{ font-size:.72rem; font-weight:600; opacity:.75; text-transform:none; letter-spacing:0; }

/* ---------- Directorio de usuarios de Odoo ("-usr" solo) ---------- */
.dir-cab{
  display:flex; flex-direction:column; gap:10px; margin-bottom:12px; padding:14px 16px;
  border:1px solid var(--border); border-radius: var(--radius-lg, 8px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), var(--surface-2));
}
.dir-cab-fila{ display:flex; align-items:center; gap:12px; }
.dir-cab-fila > div{ flex:1; min-width:0; }
.dir-cab-icono{ font-size:1.6rem; line-height:1; }
.dir-cab-titulo{ font-size:1rem; font-weight:800; }
.dir-cab-sub{ font-size:.76rem; color: var(--text-dim); margin-top:2px; }
.dir-cab-sub b{ color: var(--text); font-family: var(--font-code); }
.dir-cab-total{
  flex:none; min-width:46px; height:46px; padding:0 10px; box-sizing:border-box; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:900;
  color:#04211c; background: var(--accent);
}
.dir-filtro{
  width:100%; box-sizing:border-box; padding:9px 12px; font-size:.86rem; outline:none;
  background: var(--bg); color: var(--text); border:1px solid var(--border); border-radius: var(--radius);
}
.dir-filtro:focus{ border-color: var(--accent); }
.dir-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.dir-chip{
  padding:5px 12px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:.76rem; font-weight:700;
  color: var(--text); background: var(--surface); border:1px solid var(--border);
}
.dir-chip b{ margin-left:3px; }
.dir-chip.activo{ color:#04211c; background: var(--accent); border-color: var(--accent); }
.dir-lista{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:8px; }
.dir-persona{
  all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:11px;
  padding:10px 12px; border:1px solid var(--border); border-left:4px solid var(--dir-c, var(--ok));
  border-radius: var(--radius-lg, 8px); background: var(--surface-2);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.dir-persona:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.25)); }
.dir-persona:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.dir-archivado{ --dir-c: var(--text-dim); }
.dir-otra{ --dir-c: var(--warn); }
.dir-avatar{
  flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:900; color:#04211c; background: var(--dir-c, var(--ok));
}
.dir-archivado .dir-avatar{ color: var(--text); background: var(--surface); border:1px solid var(--border); }
.dir-datos{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.dir-nombre{ font-size:.86rem; font-weight:800; color: var(--text); }
.dir-archivado .dir-nombre{ color: var(--text-dim); }
.dir-correo{ font-size:.7rem; color: var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dir-movs{ font-size:.7rem; color: var(--text); opacity:.8; }
.dir-estado{
  flex:none; align-self:flex-start; padding:2px 8px; border-radius:8px; white-space:nowrap;
  font-size:.6rem; font-weight:900; letter-spacing:.4px; text-transform:uppercase;
  color: var(--dir-c, var(--ok)); background: color-mix(in srgb, var(--dir-c, var(--ok)) 14%, transparent);
}

/* "100/Stock" como tarjeta junto a las ubicaciones: punteada y en ambar, porque son piezas que
   ya estan en el sistema pero todavia sin un lugar en el rack. */
.loc-card.loc-card-stock{
  border-style:dashed; border-color: color-mix(in srgb, var(--warn) 65%, var(--border));
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 7%, var(--surface-2));
}
.loc-stock-badge{
  align-self:flex-start; display:inline-block; margin-bottom:4px; padding:2px 8px; border-radius:8px;
  font-size:.62rem; font-weight:900; letter-spacing:.4px; text-transform:uppercase;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent);
}
.loc-qty.loc-qty-stock{ color: var(--warn); }

/* ---------- Prefijo de familia ("-TKM"): lista o cuadricula de 3x3 a 6x6 ---------- */
.fam-cab{
  display:flex; flex-direction:column; gap:10px; margin-bottom:12px; padding:14px 16px;
  border:1px solid var(--border); border-radius: var(--radius-lg, 8px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), var(--surface-2));
}
.fam-cab-fila{ display:flex; align-items:center; gap:12px; }
.fam-cab-fila > div{ flex:1; min-width:0; }
.fam-cab-codigo{
  flex:none; padding:8px 12px; border-radius: var(--radius, 6px); font-family: var(--font-code);
  font-size:1.2rem; font-weight:900; color:#04211c; background: var(--accent);
}
.fam-cab-titulo{ font-size:1rem; font-weight:800; }
.fam-cab-sub{ font-size:.76rem; color: var(--text-dim); margin-top:2px; }
.fam-controles{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fam-filtro{
  flex:1 1 220px; min-width:0; padding:8px 12px; font-size:.84rem; outline:none; box-sizing:border-box;
  background: var(--bg); color: var(--text); border:1px solid var(--border); border-radius: var(--radius);
}
.fam-filtro:focus{ border-color: var(--accent); }
.fam-chip, .fam-vista{
  padding:6px 11px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:.74rem; font-weight:700;
  color: var(--text); background: var(--surface); border:1px solid var(--border);
}
.fam-chip.activo, .fam-vista.activo{ color:#04211c; background: var(--accent); border-color: var(--accent); }
.fam-vistas{ display:flex; gap:4px; flex-wrap:wrap; }

.fam-lista{ display:grid; gap:8px; grid-template-columns: repeat(var(--fam-cols, 1), minmax(0, 1fr)); }
.fam-item{
  display:flex; gap:12px; padding:10px; border:1px solid var(--border); border-radius: var(--radius-lg, 8px);
  background: var(--surface-2); min-width:0;
}
.fam-sin-existencia{ opacity:.6; }
.fam-foto{
  all:unset; box-sizing:border-box; cursor:pointer; flex:none; width:84px; height:84px;
  border-radius: var(--radius, 6px); overflow:hidden; background:#fff;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border);
}
.fam-foto img{ width:100%; height:100%; object-fit:contain; }
.fam-sin-foto{ font-size:1.8rem; opacity:.5; }
.fam-datos{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.fam-codigo{
  all:unset; cursor:pointer; font-family: var(--font-code); font-size:.82rem; line-height:1.35; overflow-wrap:anywhere;
  --hs-c: var(--accent);
}
.fam-codigo:hover{ text-decoration:underline; }
.fam-nombre{
  font-size:.74rem; line-height:1.4; color: var(--text-dim);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fam-cant{ font-size:.85rem; font-weight:900; color: var(--accent); }
.fam-sin-existencia .fam-cant{ color: var(--text-dim); font-weight:700; }
.fam-ubics{ display:flex; flex-wrap:wrap; gap:4px; }
.fam-ubic{
  padding:2px 7px; border-radius: var(--radius, 4px); font-family: var(--font-code); font-size:.68rem; font-weight:700;
  background: var(--surface); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
}
.fam-ubic b{ font-family: var(--font-ui); color: var(--accent); }
.fam-ubic-otra{ opacity:.65; border-color: var(--border); }
.fam-ubic-mano{ border-style:dashed; border-color: var(--accent4); }
/* En cuadricula la foto va arriba, grande, y lo demas debajo. */
.fam-en-cuadricula .fam-item{ flex-direction:column; }
.fam-en-cuadricula .fam-foto{ width:100%; height:auto; aspect-ratio:1 / 1; }
.fam-en-cuadricula[style*="--fam-cols: 5"] .fam-nombre,
.fam-en-cuadricula[style*="--fam-cols: 6"] .fam-nombre{ -webkit-line-clamp:1; }
@media (max-width: 680px){
  .fam-en-cuadricula{ grid-template-columns: repeat(min(var(--fam-cols, 3), 3), minmax(0, 1fr)); }
  .fam-en-cuadricula .fam-ubics, .fam-en-cuadricula .fam-nombre{ display:none; }
  .fam-en-cuadricula .fam-codigo{ font-size:.68rem; }
}
/* Directorio: por que alguien sale "Fuera de la lista" (lo da el servidor, preguntandole a Odoo). */
.dir-motivo{ font-size:.68rem; line-height:1.4; color: var(--warn); margin-top:2px; }

/* ---------- Girar y quitar el fondo de las fotos ---------- */
.recorte-extras{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:6px 0 2px; }
.recorte-extra-btn{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; cursor:pointer;
  font-family:inherit; font-size:.76rem; font-weight:700; color: var(--text);
  background: var(--surface-2); border:1px solid var(--border);
}
.recorte-extra-btn:hover{ border-color: var(--accent); }
.recorte-extra-btn img{ width:18px; height:18px; object-fit:contain; }
.recorte-extra-fondo{ border-color: color-mix(in srgb, var(--accent2) 55%, var(--border)); }
/* La miniatura: el boton de quitar fondo es la imagen de las estrellitas. */
.attach-fondo-btn img{ width:16px; height:16px; object-fit:contain; display:block; }
.lightbox-fondo{ border-color: var(--accent2); }
.lightbox-fondo img{ width:22px; height:22px; object-fit:contain; }
.lightbox-fondo:hover:not(:disabled){ background: var(--accent2); }
.photo-fondo-btn{ display:inline-flex; align-items:center; gap:6px; }
.photo-fondo-ico{ width:18px; height:18px; object-fit:contain; }
/* Las fotos sin fondo (PNG transparente) se ven sobre un cuadriculado claro, como en cualquier
   editor: si no, lo transparente se confundia con el fondo oscuro de la ficha. */
.attach-thumb[src$=".png"], #mainPhotoImg[src$=".png"]{
  background-color:#fff;
  background-image: linear-gradient(45deg,#e8e8e8 25%,transparent 25%), linear-gradient(-45deg,#e8e8e8 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e8e8e8 75%), linear-gradient(-45deg,transparent 75%,#e8e8e8 75%);
  background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0;
}

/* La advertencia y la pantalla de espera (esta tapa TODO: no se puede buscar ni moverse). */
.qf-overlay{ z-index:2147482000; }
.qf-aviso{ max-width:440px; }
.qf-aviso-cab{ display:flex; align-items:center; gap:10px; }
.qf-aviso-cab h3{ margin:0; padding:0; border:none; }
.qf-aviso-ico{ width:34px; height:34px; object-fit:contain; }
.qf-aviso p{ margin:0; font-size:.86rem; line-height:1.5; color: var(--text-dim); }
.qf-aviso p strong{ color: var(--text); }
.qf-espera{
  position:fixed; inset:0; z-index:2147483100; display:flex; align-items:center; justify-content:center;
  padding:24px; box-sizing:border-box; text-align:center; color: var(--text);
  background: color-mix(in srgb, var(--bg, #0d0d0d) 94%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.qf-espera-caja{ width:100%; max-width:380px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.qf-espera-anillo{
  position:relative; width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: conic-gradient(var(--accent2), var(--accent), var(--accent4), var(--accent2));
  animation: qfGira 1.6s linear infinite;
}
.qf-espera-anillo::after{ content:''; position:absolute; inset:6px; border-radius:50%; background: var(--surface, #1a1a1a); }
.qf-espera-anillo img{ position:relative; z-index:1; width:46px; height:46px; object-fit:contain; animation: qfGira 1.6s linear infinite reverse; }
.qf-espera-titulo{ font-size:1.25rem; font-weight:900; }
.qf-espera-texto{ font-size:.84rem; color: var(--text-dim); min-height:1.3em; }
.qf-espera-barra{ width:100%; height:6px; border-radius:8px; overflow:hidden; background: var(--border); }
.qf-espera-barra span{ display:block; height:100%; width:0; background: linear-gradient(90deg, var(--accent2), var(--accent)); transition: width .3s; }
.qf-espera-nota{ font-size:.72rem; color: var(--text-dim); opacity:.85; }
@keyframes qfGira{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .qf-espera-anillo, .qf-espera-anillo img{ animation:none; } }

/* Estrellitas de "quitando el fondo", como las de la IA de Samsung (V2.81.0). Blancas con brillo,
   cada una late a su ritmo y la grande respira con un halo detras. */
.qf-espera{ background: radial-gradient(70% 60% at 50% 42%, #2a2724 0%, #0b0b0b 70%); }
.qf-estrellas{ position:relative; width:190px; height:152px; margin-bottom:6px; }
.qf-estrellas svg{ position:relative; width:100%; height:100%; overflow:visible; }
.qf-halo{ position:absolute; left:58%; top:48%; width:150px; height:150px; transform: translate(-50%, -50%);
  border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 40%, transparent 70%);
  animation: qfHalo 2.4s ease-in-out infinite; }
.qf-e{ fill:#fff; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 6px rgba(255,255,255,.7)); }
/* Con movimiento (V2.81.2, pedido de Manuel): la grande gira un cuarto de vuelta y "respira", la
   mediana gira al reves, las dos chicas dan vueltas alrededor y todo el grupo se mece. Un cuarto de
   vuelta deja a una estrella de 4 puntas igual que empezo, asi que el giro se ve continuo. */
.qf-estrellas svg{ animation: qfMece 4.8s ease-in-out infinite; }
.qf-e-grande{ animation: qfGiraGrande 2.4s cubic-bezier(.65,0,.35,1) infinite; filter: drop-shadow(0 0 14px rgba(255,255,255,.9)); }
.qf-e-mediana{ animation: qfGiraMediana 2.4s cubic-bezier(.65,0,.35,1) .3s infinite; }
.qf-e-chica1{ animation: qfOrbita1 3.2s ease-in-out infinite; }
.qf-e-chica2{ animation: qfOrbita2 3.2s ease-in-out infinite; }
@keyframes qfMece{
  0%, 100%{ transform: rotate(-4deg) translateY(0); }
  50%{ transform: rotate(4deg) translateY(-6px); }
}
@keyframes qfGiraGrande{
  0%{ transform: rotate(0deg) scale(.88); }
  45%{ transform: rotate(90deg) scale(1.12); }
  60%{ transform: rotate(90deg) scale(1.02); }
  100%{ transform: rotate(90deg) scale(.88); }
}
@keyframes qfGiraMediana{
  0%{ transform: rotate(0deg) scale(.9) translate(0, 0); }
  45%{ transform: rotate(-90deg) scale(1.1) translate(-4px, 3px); }
  60%{ transform: rotate(-90deg) scale(1) translate(-2px, 2px); }
  100%{ transform: rotate(-90deg) scale(.9) translate(0, 0); }
}
/* Las chicas: una vuelta alrededor de su lugar, apagandose y prendiendose como chispa. */
@keyframes qfOrbita1{
  0%   { transform: translate(0, 0) scale(.5) rotate(0deg);      opacity:.35; }
  25%  { transform: translate(18px, -10px) scale(1.15) rotate(45deg); opacity:1; }
  50%  { transform: translate(34px, 6px) scale(.7) rotate(90deg);  opacity:.6; }
  75%  { transform: translate(14px, 18px) scale(1) rotate(135deg); opacity:.95; }
  100% { transform: translate(0, 0) scale(.5) rotate(180deg);     opacity:.35; }
}
@keyframes qfOrbita2{
  0%   { transform: translate(0, 0) scale(1) rotate(0deg);        opacity:.95; }
  25%  { transform: translate(-16px, 10px) scale(.6) rotate(-45deg); opacity:.5; }
  50%  { transform: translate(-30px, -6px) scale(1.2) rotate(-90deg); opacity:1; }
  75%  { transform: translate(-12px, -18px) scale(.7) rotate(-135deg); opacity:.55; }
  100% { transform: translate(0, 0) scale(1) rotate(-180deg);     opacity:.95; }
}
@keyframes qfHalo{
  0%, 100%{ opacity:.55; transform: translate(-50%, -50%) scale(.85); }
  50%{ opacity:1; transform: translate(-50%, -50%) scale(1.1); }
}
.qf-espera .qf-espera-titulo{ color:#fff; }
.qf-espera .qf-espera-texto, .qf-espera .qf-espera-nota{ color: rgba(255,255,255,.72); }
.qf-espera .qf-espera-barra{ background: rgba(255,255,255,.14); }
.qf-espera .qf-espera-barra span{ background: linear-gradient(90deg, rgba(255,255,255,.55), #fff); box-shadow: 0 0 10px rgba(255,255,255,.6); }
/* Las estrellitas se mueven siempre, aun con "reducir animaciones": son el aviso de que esta trabajando. */

/* "Solo girar" en la ventana de subir foto: nada de recortar a la vista, solo los botones de
   girar (pedido de Manuel). Un boton deja volver a las formas. */
.recorte-escenario[data-forma="girar"] .recorte-mascara{ display:none; }
.recorte-escenario[data-forma="girar"] .recorte-marco{ cursor:default; }
.recorte-solo-girar .recorte-formas,
.recorte-solo-girar .recorte-extra-fondo{ display:none !important; }
.recorte-solo-girar .recorte-extras{ gap:10px; }
.recorte-solo-girar .recorte-extra-btn{ padding:10px 18px; font-size:.86rem; }
.recorte-forma-girar.activo{ background: var(--accent4); border-color: var(--accent4); }
.recorte-volver-formas{
  align-self:center; padding:6px 12px; border-radius:8px; cursor:pointer; font-family:inherit;
  font-size:.74rem; font-weight:700; color: var(--text-dim); background:transparent; border:1px dashed var(--border);
}
.recorte-volver-formas:hover{ color: var(--text); border-color: var(--accent); }

/* Girar una foto ya subida: la ventanita. */
.gir-modal{ max-width:520px; }
.gir-cab{ display:flex; align-items:center; justify-content:space-between; }
.gir-cab h3{ margin:0; padding:0; border:none; }
.gir-lienzo{
  position:relative; display:flex; align-items:center; justify-content:center; min-height:200px;
  background:#111; border-radius: var(--radius, 6px); overflow:hidden; padding:8px;
}
.gir-lienzo canvas{ max-width:100%; max-height:420px; display:block; }
.gir-cargando{ position:absolute; color:#ccc; font-size:.84rem; }
.gir-botones{ display:flex; gap:10px; justify-content:center; }
.gir-botones .btn{ min-width:130px; }
.lightbox-girar{ border-color: var(--accent4); }
.lightbox-girar:hover:not(:disabled){ background: var(--accent4); color:#04211c; }

/* Bandeja de fotos por subir: el numero de la foto va ARRIBA a la izquierda. Abajo a la izquierda
   estaba tapado por las tijeras (pedido de Manuel); arriba a la derecha va la de quitar. */
.bandeja-foto-num{ top:4px; bottom:auto; left:4px; z-index:1; }

/* En celular los botones de cada foto adjunta (recortar, girar, quitar fondo, titulo) NO van
   encima de la miniatura: tapaban la foto. Salen al abrirla en pantalla completa, donde estan
   los mismos (pedido de Manuel). En computadora siguen en la miniatura. */
@media (max-width: 680px), (hover: none) and (pointer: coarse){
  .attach-acciones{ display:none !important; }
  .lightbox-acciones{ flex-wrap:wrap; justify-content:flex-end; max-width:calc(100% - 20px); }
}

/* "Quitar fondo" dentro de la ventana de recortar una foto ya subida. */
.rcf-chip-fondo img{ width:16px; height:16px; object-fit:contain; }
.rcf-chip-fondo{ border-color: color-mix(in srgb, var(--accent2) 55%, var(--border)); }
/* Sin fondo, lo transparente se ve sobre cuadriculado mientras se recorta. */
.rcf-lienzo .cropper-canvas img[src^="blob:"]{
  background-color:#fff;
  background-image: linear-gradient(45deg,#e8e8e8 25%,transparent 25%), linear-gradient(-45deg,#e8e8e8 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e8e8e8 75%), linear-gradient(-45deg,transparent 75%,#e8e8e8 75%);
  background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0;
}

/* ---------- Movimientos clicables, entradas especiales, dia y perfil (V2.79.0) ---------- */
.flow-tag.flow-especial{ color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); white-space:nowrap; }
table.moves tr.mov-especial td{ background: color-mix(in srgb, var(--warn) 6%, transparent); }
.qty-badge.qty-badge-especial{ background: var(--warn); color:#1a1205; }
/* Fecha y usuario: ligas mas discretas que las de documentos (no son codigos). */
.moves-link.mov-link-fecha, .moves-link.mov-link-user{
  font-family: inherit; font-weight:600; letter-spacing:0; white-space:normal; text-align:left;
  padding:3px 8px; background: transparent; border-style:dashed;
}
.moves-link.mov-link-user:hover span{ color:#04211c !important; }
.moves-link.mov-link-ubic{ padding:3px 8px; }
.act-flecha{ opacity:.6; margin:0 2px; }

.act-cab, .perfil-cab{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg, 14px);
  padding:16px; margin-bottom:14px;
}
.act-cab-fila{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.act-cab-icono{ font-size:1.9rem; }
.act-cab-textos{ flex:1 1 auto; min-width:0; }
.act-cab-eyebrow{ font-size:.7rem; text-transform:uppercase; letter-spacing:.8px; opacity:.7; font-weight:700; }
.act-cab-titulo{ margin:2px 0 0; font-size:1.25rem; }
.act-cab-total{ display:flex; flex-direction:column; align-items:center; padding:6px 14px; border-radius: var(--radius, 10px);
  background: var(--accent2); color:#04211c; }
.act-cab-total b{ font-size:1.4rem; line-height:1; }
.act-cab-total span{ font-size:.7rem; font-weight:700; }

.cal{ max-width:430px; margin:0 auto; transition: opacity .2s; }
.cal.cargando{ opacity:.45; pointer-events:none; }
.cal-cab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cal-mes{ font-weight:800; }
.cal-nav{ width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background: var(--surface-2); color: inherit; font-size:1.2rem; cursor:pointer; }
.cal-nav:disabled{ opacity:.3; cursor:default; }
.cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
.cal-dow{ text-align:center; font-size:.7rem; font-weight:800; opacity:.6; padding-bottom:2px; }
.cal-dia{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:44px; padding:3px 0; border-radius: var(--radius, 8px); cursor:pointer;
  border:1px solid var(--border); background: var(--surface-2); color: inherit; font: inherit;
}
.cal-dia:disabled{ opacity:.3; cursor:default; }
.cal-num{ font-weight:800; font-size:.85rem; }
.cal-n{ font-size:.62rem; font-weight:700; opacity:.85; }
.cal-dia.nivel-1{ background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }
.cal-dia.nivel-2{ background: color-mix(in srgb, var(--accent) 38%, var(--surface-2)); }
.cal-dia.nivel-3{ background: color-mix(in srgb, var(--accent) 62%, var(--surface-2)); color:#04211c; }
.cal-dia.nivel-4{ background: var(--accent); color:#04211c; }
.cal-dia.hoy{ border-color: var(--accent2); border-width:2px; }
.cal-dia.sel{ outline:3px solid var(--accent2); outline-offset:1px; }
.cal-dia:not(:disabled):hover{ transform: translateY(-1px); }

.act-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px; }
.act-chip{
  --act-color: var(--accent);
  border:1px solid color-mix(in srgb, var(--act-color) 55%, transparent); background: transparent; color: inherit;
  padding:5px 11px; border-radius:8px; cursor:pointer; font: inherit; font-size:.8rem;
}
.act-chip b{ margin-left:3px; }
.act-chip.activo{ background: var(--act-color); color:#04211c; border-color: var(--act-color); }
.act-grupo{ --act-color: var(--accent); margin-bottom:14px; border-left:4px solid var(--act-color); padding-left:10px; }
.act-grupo-tit{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:800; margin-bottom:6px; }
.act-grupo-n{ background: var(--act-color); color:#04211c; border-radius:8px; padding:1px 9px; font-size:.78rem; }
.act-dia{ border-left-color: var(--border); }
.act-dia .act-grupo-n{ background: var(--surface-2); color: inherit; border:1px solid var(--border); }
.act-fila{
  --act-color: var(--accent);
  display:flex; align-items:flex-start; gap:10px; padding:9px 10px; margin-bottom:6px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius, 10px);
}
.act-hora{ flex:0 0 auto; min-width:62px; font-family: var(--font-code); font-size:.76rem; font-weight:700; opacity:.8; padding-top:4px; }
.act-cuerpo{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.act-tag{ align-self:flex-start; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  color: var(--act-color); border:1px solid currentColor; padding:1px 7px; border-radius:8px; }
.act-prod{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.act-nombre{ font-size:.78rem; opacity:.75; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.act-ruta{ font-size:.8rem; display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.act-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.8rem; }
.act-cant{ flex:0 0 auto; background: var(--act-color); color:#04211c; }
.moves-link.act-codigo{ white-space:normal; word-break:break-all; text-align:left; }

.perfil-cab{ display:flex; align-items:center; gap:14px; }
.perfil-avatar{
  flex:0 0 auto; width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:900; color:#04211c;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.perfil-datos{ min-width:0; }
.perfil-nombre{ margin:2px 0; font-size:1.3rem; }
.perfil-correo{ font-size:.82rem; opacity:.8; word-break:break-all; }
.perfil-estado{ display:inline-block; margin-top:6px; font-size:.72rem; font-weight:800; padding:2px 10px; border-radius:8px;
  border:1px solid currentColor; }
.perfil-estado.dir-activo{ color: var(--accent4); }
.perfil-estado.dir-archivado{ color: var(--warn); }
.perfil-estado.dir-otra{ color: var(--accent3); }
.perfil-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:8px; margin-bottom:10px; }
.perfil-stat{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius, 10px);
  padding:10px 12px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.perfil-stat b{ font-size:1.25rem; }
.perfil-stat span{ font-size:.74rem; opacity:.75; }
.perfil-mezcla{ display:flex; height:10px; border-radius:8px; overflow:hidden; margin-bottom:12px; border:1px solid var(--border); }
.perfil-acciones{ margin-bottom:6px; }
@media (max-width:560px){
  .act-fila{ flex-wrap:wrap; }
  .act-hora{ min-width:0; order:0; flex:1 1 auto; }
  .act-cant{ order:1; }
  .act-cuerpo{ order:2; flex:1 1 100%; }
  .act-cab-titulo{ font-size:1.05rem; }
  .cal-dia{ min-height:40px; }
}

/* ---------- "⬅ Regresar a..." despues de tocar una liga (V2.79.1) ---------- */
.volver-barra{
  position: sticky; top: 8px; z-index: 30;
  display:flex; align-items:center; gap:10px; width:100%; margin:0 0 12px; padding:10px 14px;
  border:2px solid var(--accent2); border-radius: var(--radius, 10px); cursor:pointer; text-align:left;
  background: var(--surface); color: inherit; font: inherit;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.volver-barra:hover{ background: color-mix(in srgb, var(--accent2) 16%, var(--surface)); }
.volver-flecha{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--accent2); color:#04211c; font-size:1rem; }
.volver-texto{ flex:1 1 auto; min-width:0; font-size:.88rem; }
.volver-texto b{ word-break: break-word; }
.volver-n{ flex:0 0 auto; font-size:.72rem; font-weight:800; padding:2px 8px; border-radius:8px; background: var(--surface-2); border:1px solid var(--border); }

/* ---------- Kardex: "¿lo moviste de lugar?" en el paso de la ubicacion (V2.80.0) ---------- */
.kw-movida{ margin-top:12px; padding:12px; border:2px solid var(--accent3); border-radius: var(--radius, 10px);
  background: color-mix(in srgb, var(--accent3) 8%, var(--surface)); text-align:left; }
.kw-movida[hidden]{ display:none; }
.kw-movida-titulo{ font-weight:900; margin-bottom:4px; }
.kw-movida-texto{ margin:0 0 10px; font-size:.86rem; line-height:1.45; }
.kw-movida-ubic{ font-family: var(--font-code); color: var(--accent4); }
.kw-movida-lista{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.kw-movida-origen{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; cursor:pointer; font: inherit; color: inherit;
  border:1px solid var(--border); border-radius: var(--radius, 10px); background: var(--surface-2); text-align:left; }
.kw-movida-origen:hover{ border-color: var(--accent3); }
.kw-movida-o-ubic{ flex:1 1 auto; font-family: var(--font-code); font-weight:800; }
.kw-movida-o-cant{ background: var(--accent); color:#04211c; font-weight:800; padding:1px 9px; }
.kw-movida-no{ width:100%; padding:8px; cursor:pointer; font: inherit; color: inherit; background: transparent;
  border:1px dashed var(--border); border-radius: var(--radius, 10px); }

/* Kardex: boton "Si, lo movi" (V2.81.1) */
.kw-movida-si{ width:100%; padding:11px 12px; cursor:pointer; font: inherit; font-weight:900; text-align:center;
  border:2px solid var(--accent4); border-radius: var(--radius, 10px); color:#04211c; background: var(--accent4); }
.kw-movida-si:hover{ filter: brightness(1.08); }
.kw-movida-si .kw-movida-o-ubic{ font-family: var(--font-code); }
.kw-movida-de{ font-family: var(--font-code); color: var(--accent3); }

/* ---------- Registro de A.L.B.A. (V2.82.0) ---------- */
.reg-filtros{ display:flex; flex-direction:column; gap:8px; margin:4px 0 8px; }
.reg-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.reg-dia{ margin:12px 0 6px; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; opacity:.75; }
.reg-item{ display:flex; align-items:flex-start; gap:10px; padding:9px 11px; margin-bottom:6px;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius, 10px); }
.reg-icono{ flex:0 0 auto; font-size:1.15rem; line-height:1.3; }
.reg-texto{ flex:1 1 auto; min-width:0; font-size:.86rem; line-height:1.5; }
.reg-persona{ background:none; border:0; padding:0; cursor:pointer; font: inherit; }
.reg-persona:hover{ text-decoration: underline; }
.moves-link.reg-codigo{ white-space:normal; word-break:break-all; padding:2px 8px; font-size:.72rem; }
.reg-det{ font-size:.76rem; opacity:.75; margin-top:2px; }
.reg-hora{ flex:0 0 auto; font-family: var(--font-code); font-size:.72rem; opacity:.75; padding-top:2px; }

/* ---------- ⚙️ Preferencias (V2.83.0) ---------- */
.pref-lista{ display:flex; flex-direction:column; gap:10px; }
.pref-item{ display:flex; align-items:center; gap:12px; padding:14px; cursor:pointer;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius, 10px); }
.pref-icono{ flex:0 0 auto; font-size:1.5rem; }
.pref-texto{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.pref-texto b{ font-size:.95rem; }
.pref-texto small{ font-size:.78rem; line-height:1.45; opacity:.78; }
.pref-switch{ position:relative; flex:0 0 auto; width:50px; height:28px; }
.pref-switch input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.pref-riel{ position:absolute; inset:0; border-radius:8px; background: var(--border); transition: background .2s; }
.pref-riel::after{ content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: transform .2s; }
.pref-switch input:checked + .pref-riel{ background: var(--accent4); }
.pref-switch input:checked + .pref-riel::after{ transform: translateX(22px); }
.pref-switch input:disabled + .pref-riel{ opacity:.5; }
.pref-switch input:focus-visible + .pref-riel{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- Fotos sin fondo: TRANSPARENTES (V2.205.2, pedido de Manuel; antes iban sobre negro) ----------
   Una foto con el fondo quitado (PNG transparente) se veia sobre blanco o sobre el color de la
   tarjeta, con la orilla dentada. Detras de toda foto va negro: en una foto normal no se nota
   (la tapa), y en una sin fondo el producto queda limpio sobre negro. */
.photo-box, .photo-box img,
.attach-thumb, .attach-thumb.attach-thumb-ajustada, .attachments-row[data-cols] .attach-thumb,
.row-thumb, .fam-foto, .fam-foto img,
#lightboxOverlay .lightbox-stage img{ background:transparent !important; }

/* Ajustes de inventario en el historial del producto: + en el color de entrada, − en el de salida. */
.flow-aj{ background: var(--accent3); color:#04211c; }
.aj-mov{ font-weight:900; white-space:nowrap; padding:2px 8px; border-radius:8px; }
.aj-suma{ color: var(--accent4); background: color-mix(in srgb, var(--accent4) 14%, transparent); }
.aj-resta{ color: var(--accent3); background: color-mix(in srgb, var(--accent3) 14%, transparent); }
.aj-ref{ font-weight:700; }

/* El dia que se acaba de tocar en el calendario, mientras llega su informacion. */
[data-cal-dia].cal-elegido{ outline:3px solid var(--accent); outline-offset:1px; }

/* ---------- Calendario de la vista del dia, con diseño (pedido de Manuel) ---------- */
.cal{
  padding:14px; border-radius: var(--radius-lg, 12px);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), var(--surface-2) 55%);
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--shadow-sm);
}
.cal .cal-cab{ margin-bottom:12px; }
.cal-titulo{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.cal .cal-mes{ font-size:1.15rem; font-weight:800; letter-spacing:.3px; }
.cal .cal-mes b{ color: var(--accent); }
.cal-mes-total{ font-size:.7rem; font-weight:700; color: var(--text-dim); }
.cal .cal-nav{
  width:38px; height:38px; font-size:1.3rem; font-weight:900; transition: background .15s, transform .15s;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.cal .cal-nav:not(:disabled):hover{ background: var(--accent); color:#04211c; transform: scale(1.06); }
.cal .cal-grid{ gap:6px; }
.cal .cal-dow{ font-size:.68rem; letter-spacing:.6px; opacity:.75; }
.cal .cal-dow-finde{ color: var(--accent2); opacity:1; }
.cal .cal-dia{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:58px; padding:6px 4px 9px; border-radius: var(--radius, 10px);
  border:1px solid color-mix(in srgb, var(--text) 8%, transparent);
  background: var(--surface); transition: transform .12s, box-shadow .12s, outline-color .12s;
}
.cal .cal-dia.nivel-1{ background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.cal .cal-dia.nivel-2{ background: color-mix(in srgb, var(--accent) 42%, var(--surface)); }
.cal .cal-dia.nivel-3{ background: color-mix(in srgb, var(--accent) 66%, var(--surface)); color:#04211c; }
.cal .cal-dia.nivel-4{ background: linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 80%, var(--accent2))); color:#04211c; }
.cal .cal-dia.finde.nivel-0{ background: color-mix(in srgb, var(--accent2) 7%, var(--surface)); }
.cal .cal-dia:not(:disabled):hover{ transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.cal .cal-num{ font-size:.98rem; font-weight:900; }
.cal .cal-n{ font-size:.64rem; font-weight:800; opacity:.85; }
.cal-barra{ position:absolute; left:8px; right:8px; bottom:5px; height:3px; border-radius:2px; background: rgba(0,0,0,.18); overflow:hidden; }
.cal-barra i{ display:block; height:100%; background: currentColor; opacity:.75; border-radius:2px; }
.cal .cal-dia.nivel-0 .cal-barra{ display:none; }
.cal .cal-dia.hoy{ border:2px solid var(--accent2); }
.cal-hoy{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  font-size:.52rem; font-weight:900; letter-spacing:.4px; text-transform:uppercase;
  padding:1px 6px; border-radius:8px; background: var(--accent2); color:#04211c;
}
.cal-pico{ position:absolute; top:2px; right:4px; font-size:.62rem; }
.cal .cal-dia.sel{
  outline:3px solid var(--accent4); outline-offset:2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent4) 18%, transparent);
}
.cal-pie{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px;
  margin-top:12px; padding-top:10px; border-top:1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  font-size:.74rem; color: var(--text-dim);
}
.cal-pie-pico b{ color: var(--text); }
.cal-leyenda{ display:inline-flex; align-items:center; gap:4px; font-weight:700; }
.cal-leyenda i{ width:14px; height:14px; border-radius:4px; display:inline-block; }
.cal-leyenda i.nivel-1{ background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }
.cal-leyenda i.nivel-2{ background: color-mix(in srgb, var(--accent) 38%, var(--surface-2)); }
.cal-leyenda i.nivel-3{ background: color-mix(in srgb, var(--accent) 62%, var(--surface-2)); }
.cal-leyenda i.nivel-4{ background: var(--accent); }
.cal.cargando .cal-grid{ opacity:.55; transition: opacity .15s; }
@media (max-width: 520px){
  .cal{ padding:10px; }
  .cal .cal-grid{ gap:4px; }
  .cal .cal-dia{ min-height:48px; }
  .cal .cal-num{ font-size:.85rem; }
}

/* Carga con forma al cambiar de dia en el calendario: chips y renglones "esqueleto" con un
   brillo que corre, en los colores del tema. */
.act-esqueleto{ margin-top:16px; display:flex; flex-direction:column; gap:10px; animation: esqEntra .25s ease both; }
@keyframes esqEntra{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
.esq-titulo{ font-size:.9rem; color: var(--text-dim); display:flex; align-items:center; gap:8px; }
.esq-titulo b{ color: var(--text); }
.esq-reloj{ display:inline-block; animation: esqGira 1.4s ease-in-out infinite; }
@keyframes esqGira{ 0%, 100%{ transform: rotate(0); } 50%{ transform: rotate(180deg); } }
.esq-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.esq-chips i{ width:92px; height:30px; border-radius:8px; }
.esq-fila{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius: var(--radius-lg, 10px); background: var(--surface-2);
  border:1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
}
.esq-punto{ width:34px; height:34px; border-radius:50%; flex:none; }
.esq-col{ flex:1; display:flex; flex-direction:column; gap:7px; }
.esq-col i{ height:11px; border-radius:6px; display:block; }
.esq-cant{ width:56px; height:24px; border-radius:8px; flex:none; }
.esq-chips i, .esq-punto, .esq-col i, .esq-cant{
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 10%, var(--surface)) 0%,
    color-mix(in srgb, var(--accent) 32%, var(--surface)) 50%,
    color-mix(in srgb, var(--accent) 10%, var(--surface)) 100%);
  background-size: 200% 100%;
  animation: esqBrillo 1.2s ease-in-out infinite;
}
.esq-fila:nth-child(odd) .esq-col i{ animation-delay: .15s; }
@keyframes esqBrillo{ from{ background-position: 200% 0; } to{ background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce){
  .esq-chips i, .esq-punto, .esq-col i, .esq-cant, .esq-reloj{ animation:none; }
}

/* Con tema, el separador de la orbita es un emoji: sin el gris del borde, a color y un poco mas grande. */
.ae-sep.ae-sep-emoji{ fill: currentColor; font-size:14px; }

/* ---------- Ubicaciones como capsulas (pedido de Manuel, segunda vuelta) ----------
   Solo la ubicacion y la cantidad. El color de cada una sale de su nivel: agotar primero
   (--accent3), en medio (--accent2), donde hay mas (--ok). */
.loc-grid:has(.loc-pill){ grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap:10px; }
.loc-card.loc-pill{
  --tono: var(--accent2);
  display:flex; flex-direction:row; align-items:center; gap:12px; text-align:left; min-height:0;
  padding:8px 18px 8px 8px; border-radius:8px; border:2px solid color-mix(in srgb, var(--tono) 55%, var(--border));
  background: linear-gradient(90deg, color-mix(in srgb, var(--tono) 16%, var(--surface)), var(--surface-2));
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.loc-card.loc-pill.tier-high{ --tono: var(--ok); }
.loc-card.loc-pill.tier-low, .loc-card.loc-pill.principal{ --tono: var(--accent3); }
.loc-card.loc-pill:hover{ transform: translateY(-2px); border-color: var(--tono); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.loc-pill-icono{
  flex:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--tono); color:#04211c; font-size:1.05rem;
}
.loc-pill-icono svg{ width:20px; height:20px; color:#04211c; }
.loc-pill-ubic{ flex:1 1 auto; min-width:max-content; font-weight:800; font-size:1rem; letter-spacing:.3px; color: var(--text); white-space:nowrap; }
.loc-card.loc-pill .loc-qty{ flex:none; margin-left:auto; font-size:1.25rem; font-weight:900; color: var(--tono); white-space:nowrap; }
.loc-card.loc-pill.tier-stock{ --tono: var(--warn, #f7941d); border-style:dashed; }
.loc-pill-nota{ display:block; font-size:.62rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color: var(--tono); }
/* Iconos PNG de Manuel en las capsulas y en el total: sin el circulo de color detras. */
.loc-pill-icono.con-img{ background:none; }
.loc-pill-icono.con-img img{ width:40px; height:40px; object-fit:contain; }
.total-piezas-img{ width:40px; height:40px; object-fit:contain; vertical-align:middle; }
/* Degradado del mismo color en cada capsula (pedido de Manuel): de su tono a un tono oscuro,
   como rojo a rojo vino. La cantidad se aclara para que se lea encima del color. */
.loc-card.loc-pill{
  background: linear-gradient(100deg, color-mix(in srgb, var(--tono) 62%, #000) 0%, color-mix(in srgb, var(--tono) 30%, #12060a) 100%);
  border-color: color-mix(in srgb, var(--tono) 75%, #fff);
}
.loc-card.loc-pill .loc-pill-ubic{ color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.loc-card.loc-pill .loc-qty{ color: color-mix(in srgb, var(--tono) 45%, #fff); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.loc-card.loc-pill .loc-pill-nota{ color: color-mix(in srgb, var(--tono) 40%, #fff); }
/* "Sin acomodar" (stock): azul rey a azul marino (pedido de Manuel). */
.loc-card.loc-pill.tier-stock{
  --tono: #4f7cff;
  background: linear-gradient(100deg, #1f4fd8 0%, #0a1a4a 100%);
  border-color: #7fa2ff;
}
/* Botones de la ficha como las capsulas de ubicacion (pedido de Manuel): redondos y con
   degradado de su propio color hacia uno mas oscuro. */
.act-btn{ --act: #3f6212; border-radius:8px !important; border:2px solid color-mix(in srgb, var(--act) 60%, #fff) !important;
  background: linear-gradient(100deg, color-mix(in srgb, var(--act) 80%, #fff) 0%, var(--act) 45%, color-mix(in srgb, var(--act) 45%, #000) 100%) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.25); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.act-kardex{ --act:#3f6212; } .act-odoo{ --act:#311b92; } .act-guardar{ --act:#9d174d; }
.act-mandar{ --act:#3730a3; } .act-proveedor{ --act:#92400e; } .act-laina{ --act:#155e75; } .act-codif{ --act:#0f766e; }
/* Iconos de Manuel en los botones de la ficha (iconos/btn-*.png). */
.act-btn .act-ico{ width:22px; height:22px; object-fit:contain; flex-shrink:0; vertical-align:middle; pointer-events:none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.btn .act-ico{ width:22px; height:22px; object-fit:contain; flex-shrink:0; vertical-align:middle; pointer-events:none; }
/* Variantes: en que cambia cada una respecto al codigo buscado. */
.variante-por-caja{ display:block; flex-basis:100%; width:100%; margin:6px 0 4px; text-align:left; }
.variante-por{ font-size:.82rem; font-weight:600; color: var(--text); line-height:1.35; }
.variante-por b{ color: var(--accent); font-weight:900; }
/* Fotos adjuntas: su propio espacio debajo de la foto principal, botones arriba (pedido de Manuel).
   Los botones como los de la ficha: capsula con degradado de su color (--act). */
.adj-seccion{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.adj-seccion .attachments-btns{ margin:6px 0 10px; }
.adj-seccion .attachments-btns .btn, .adj-seccion .attach-borrar-barra .btn{
  color:#fff !important; border-radius:8px !important; font-size:.8rem; padding:8px 16px;
  border:2px solid color-mix(in srgb, var(--act) 60%, #fff) !important;
  background: linear-gradient(100deg, color-mix(in srgb, var(--act) 80%, #fff) 0%, var(--act) 45%, color-mix(in srgb, var(--act) 45%, #000) 100%) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.25); text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.adj-seccion .btn{ --act:#0f766e; }
.adj-seccion .attachments-btns .attachment-camera-btn{ --act:#0f766e; }
.adj-seccion .attachments-btns .attachment-add-btn{ --act:#1d4ed8; }
.adj-seccion .attachments-btns .attachment-resend-btn{ --act:#6d28d9; }
.adj-seccion .attach-borrar-barra .btn.btn{ --act:#b91c1c; }
.adj-seccion .attach-borrar-barra .btn.attach-borrar-cancelar{ --act:#475569; }
.adj-seccion .attach-borrar-barra .attach-borrar-ok:disabled{ opacity:.5; }
.adj-seccion .attachments-btns .btn:hover, .adj-seccion .attach-borrar-barra .btn:hover:not(:disabled){ filter:brightness(1.12); }
/* Entre los botones de acciones y Piezas Totales: separacion abajo tambien. */
.adj-seccion{ padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border); }
/* Botones de la foto principal igual que los de adjuntas (pedido de Manuel); Quitar fondo con
   su propio color. */
.photo-upload-btns .btn{
  --act:#0f766e; color:#fff !important; border-radius:8px !important;
  border:2px solid color-mix(in srgb, var(--act) 60%, #fff) !important;
  background: linear-gradient(100deg, color-mix(in srgb, var(--act) 80%, #fff) 0%, var(--act) 45%, color-mix(in srgb, var(--act) 45%, #000) 100%) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.25); text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.photo-upload-btns .btn:hover:not(:disabled){ filter:brightness(1.12); }
.photo-upload-btns .photo-camera-btn{ --act:#0f766e; }
.photo-upload-btns .photo-change-btn{ --act:#1d4ed8; }
.photo-upload-btns .photo-resend-btn{ --act:#6d28d9; }
.photo-upload-btns .photo-fondo-btn{ --act:#a16207; }
/* Iconos legibles sobre cualquier color de boton (pedido de Manuel): un circulito claro detras. */
.photo-upload-btns .btn > img, .photo-upload-btns .btn > svg,
.adj-seccion .btn > img, .adj-seccion .btn > svg, .act-btn > .act-ico{
  box-sizing:content-box; width:18px !important; height:18px !important; padding:3px; border-radius:50%;
  background: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(0,0,0,.35); filter:none !important; object-fit:contain;
}
/* Ubicaciones manuales como capsulas (pedido de Manuel), en su propio color. */
.loc-card.loc-pill.tier-manual{ --tono:#a78bfa; position:relative; }
/* Lapiz y tache DENTRO de la capsula (pedido de Manuel: se salian del borde). */
.loc-card.loc-pill.tier-manual{ padding-right:10px; }
.loc-card.loc-pill.tier-manual .manual-loc-actions{ position:static; flex:none; display:flex; align-items:center; gap:5px; margin-left:4px; }
.loc-card.loc-pill.tier-manual .manual-loc-actions button{ box-sizing:border-box; width:30px; height:30px; padding:0; margin:0; border-radius:50%; font-size:.8rem; }
/* Movimientos De Alba */
.alba-movs-toggle{ margin-top:10px; }
.alba-movs{ display:flex; flex-direction:column; gap:8px; margin:8px 0 4px; }
.alba-mov{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius: var(--radius); background: var(--surface-2); border:1px solid var(--border); }
.alba-mov-ico{ flex:none; font-size:1.2rem; line-height:1.3; }
.alba-mov-txt{ min-width:0; font-size:.88rem; }
.alba-mov-det{ font-size:.8rem; color: var(--text); opacity:.85; margin-top:2px; overflow-wrap:anywhere; }
.alba-mov-cuando{ font-size:.72rem; color: var(--text-dim); margin-top:2px; }
/* Ventana angosta en computadora (pedido de Manuel): la cuadricula de botones escogida es lo
   MAS que se usa; si los botones no caben con su texto en un renglon, bajan solos a menos
   columnas en vez de partir el texto. En celular se respeta tal cual lo que cada quien escogio. */
@media (hover:hover) and (pointer:fine){
  .product-actions-row[data-cols="2"]{ grid-template-columns:repeat(auto-fit, minmax(max(240px, calc((100% - 8px) / 2)), 1fr)); }
  .product-actions-row[data-cols="3"]{ grid-template-columns:repeat(auto-fit, minmax(max(240px, calc((100% - 16px) / 3)), 1fr)); }
  .product-actions-row[data-cols="4"]{ grid-template-columns:repeat(auto-fit, minmax(max(200px, calc((100% - 24px) / 4)), 1fr)); }
  .product-actions-row:not([data-cols="1"]) .btn{ white-space:nowrap; }
  /* Las etiquetas y botones chicos junto a la foto tampoco se parten en dos renglones. */
  .product-info .btn, .product-info button{ white-space:nowrap; }
}
/* Aviso de salida a Odoo (rediseño, pedido de Manuel). */
.glass.odoo-salida{ width:420px; max-width:100%; padding:0; overflow:hidden; text-align:center; border-radius: var(--radius-lg, 16px); }
.odoo-salida-cab{ padding:22px 22px 18px; color:#fff;
  background: radial-gradient(120% 120% at 0% 0%, #7c5cd6 0%, #4c2a9e 45%, #24104f 100%); }
.odoo-salida-camino{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; }
.odoo-salida-nodo{ display:flex; align-items:center; justify-content:center; height:44px; border-radius:8px; font-weight:900; letter-spacing:1px; font-size:.78rem; box-shadow:0 4px 12px rgba(0,0,0,.35); }
.odoo-salida-nodo.alba{ width:44px; padding:0; background: var(--surface); border:2px solid var(--accent); box-sizing:border-box; }
.odoo-salida-nodo.alba svg{ width:100%; height:100%; display:block; }
.odoo-salida-planeta{ fill: var(--surface); }
.odoo-salida-nodo.odoo{ width:44px; background:#fff; }
.odoo-salida-nodo.odoo img{ width:30px; height:30px; object-fit:contain; }
.odoo-salida-flecha{ display:flex; gap:5px; }
.odoo-salida-flecha i{ width:7px; height:7px; border-radius:50%; background:#fff; opacity:.3; animation: odooPaso 1.2s infinite; }
.odoo-salida-flecha i:nth-child(2){ animation-delay:.2s; } .odoo-salida-flecha i:nth-child(3){ animation-delay:.4s; }
@keyframes odooPaso{ 0%,100%{ opacity:.25; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.15);} }
@media (prefers-reduced-motion:reduce){ .odoo-salida-flecha i{ animation:none; opacity:.8; } }
.odoo-salida-titulo{ margin:0; font-size:1.25rem; font-weight:900; text-shadow:0 2px 4px rgba(0,0,0,.35); }
.odoo-salida-sub{ margin:6px 0 0; font-size:.86rem; opacity:.85; }
.odoo-salida-cuerpo{ padding:18px 20px 20px; }
.odoo-salida-nota{ display:flex; gap:10px; align-items:flex-start; text-align:left; padding:12px 14px; border-radius: var(--radius, 10px);
  background: color-mix(in srgb, var(--warn, #f7941d) 10%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--warn, #f7941d) 40%, var(--border));
  font-size:.86rem; line-height:1.45; color: var(--text); }
.odoo-salida-nota b{ color: var(--warn, #f7941d); }
.odoo-salida-nota-ico{ flex:none; font-size:1.1rem; }
.odoo-salida-btns{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.odoo-salida-btns .btn{ flex:1 1 120px; border-radius:8px !important; min-height:46px; font-weight:800; white-space:nowrap; font-size:.82rem; padding:10px 14px; }
.odoo-salida-quedar{ background: var(--surface-2) !important; color: var(--text) !important; border:2px solid var(--border) !important; }
.odoo-salida-ir{ color:#fff !important; border:2px solid #a78bfa !important; box-shadow:0 3px 10px rgba(0,0,0,.3);
  background: linear-gradient(100deg, #7c5cd6 0%, #4c2a9e 50%, #24104f 100%) !important; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.odoo-salida-ir .act-ico{ box-sizing:content-box; width:18px; height:18px; padding:3px; border-radius:50%; background:rgba(255,255,255,.92); object-fit:contain; }
.odoo-salida-btns .btn:hover{ filter:brightness(1.1); }
/* ---------- Ventanas de la ficha con cabecera de color (pedido de Manuel) ----------
   Proveedor, Codificacion, Mandar, Kardex y Guardar: misma idea que el aviso de Odoo. --vc es el
   color del boton que abre cada una. */
.ven-moderna{ --vc:#3730a3; padding:0 20px 20px !important; border-radius: var(--radius-lg, 16px) !important; }
.ven-cab{
  display:flex; align-items:center; gap:12px; margin:0 -20px 16px; padding:18px 20px; color:#fff;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--vc) 65%, #fff) 0%, var(--vc) 45%, color-mix(in srgb, var(--vc) 50%, #000) 100%);
  position:sticky; top:0; z-index:2;
}
.ven-cab-ico{ flex:none; width:48px; height:48px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.35); }
.ven-cab-ico img{ width:30px; height:30px; object-fit:contain; }
.ven-cab-txt{ flex:1 1 auto; min-width:0; text-align:left; }
.ven-cab-titulo{ font-size:1.12rem; font-weight:900; line-height:1.2; text-shadow:0 2px 4px rgba(0,0,0,.35); }
.ven-cab-sub{ font-size:.8rem; opacity:.88; margin-top:3px; line-height:1.35; overflow-wrap:anywhere; }
.ven-cab-cerrar{ flex:none; width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.55); background:rgba(0,0,0,.2); color:#fff; font-size:1rem; cursor:pointer; }
.ven-cab-cerrar:hover{ background:rgba(0,0,0,.35); }
.ven-cab-paso{ flex:none; padding:4px 10px; border-radius:8px; background:rgba(255,255,255,.18); color:#fff !important; font-weight:800; font-size:.75rem; }
/* La que desplaza por dentro (Codificacion) no lleva padding propio: su cuerpo ya lo trae. */
.ven-moderna.nov-modal{ padding:0 !important; }
.ven-moderna.nov-modal .ven-cab{ margin:0; }
/* Botones en capsula: el principal con el color de la ventana, los demas en gris. */
.ven-moderna .btn{ border-radius:8px !important; min-height:42px; font-weight:800; }
.ven-moderna .btn-primary{ color:#fff !important; border:2px solid color-mix(in srgb, var(--vc) 55%, #fff) !important; text-shadow:0 1px 2px rgba(0,0,0,.4);
  background: linear-gradient(100deg, color-mix(in srgb, var(--vc) 75%, #fff) 0%, var(--vc) 50%, color-mix(in srgb, var(--vc) 50%, #000) 100%) !important; }
.ven-moderna .btn:not(.btn-primary):not(.surtido-name-btn){ background: var(--surface-2) !important; color: var(--text) !important; border:2px solid var(--border) !important; }
.ven-moderna .btn:hover:not(:disabled){ filter:brightness(1.1); }
.ven-moderna input[type=text], .ven-moderna input[type=number], .ven-moderna textarea, .ven-moderna select{ border-radius:12px; }
.ven-moderna .share-dest-btn{ border-radius:8px !important; border:2px solid color-mix(in srgb, var(--vc) 45%, var(--border)) !important; }
.ven-moderna.nov-modal > *:not(.ven-cab){ margin-left:14px; margin-right:14px; }
.ven-moderna.nov-modal > *:last-child{ margin-bottom:14px; }
/* Guardar para ver despues: cuerpo rediseñado (pedido de Manuel). */
.fav-bloque{ margin-top:12px; padding:12px; border-radius:14px; background: var(--surface-2); border:1px solid var(--border); }
.fav-bloque-cab{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.fav-bloque-cab label{ margin:0; font-size:.86rem; font-weight:900; text-transform:none; letter-spacing:0; color: var(--text); }
.fav-bloque-ico{ width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background: color-mix(in srgb, var(--vc, #9d174d) 25%, var(--surface)); font-size:1rem; }
.fav-opcional{ margin-left:auto; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:3px 8px; border-radius:8px;
  color: var(--text-dim); border:1px solid var(--border); }
.fav-bloque textarea{ width:100%; box-sizing:border-box; border-radius:12px; }
.ven-moderna .fav-recordatorios{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:8px; }
.ven-moderna .fav-recordatorio{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:62px; padding:8px 6px;
  border-radius:14px; border:2px solid var(--border); background: var(--surface); color: var(--text); font-weight:800; font-size:.76rem; text-align:center; cursor:pointer;
  transition: transform .12s ease, border-color .12s ease; }
.ven-moderna .fav-recordatorio:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--vc, #9d174d) 60%, var(--border)); }
.ven-moderna .fav-recordatorio.activo{ color:#fff; border-color: color-mix(in srgb, var(--vc, #9d174d) 55%, #fff); text-shadow:0 1px 2px rgba(0,0,0,.4);
  background: linear-gradient(135deg, color-mix(in srgb, var(--vc, #9d174d) 75%, #fff), var(--vc, #9d174d) 55%, color-mix(in srgb, var(--vc, #9d174d) 55%, #000)); box-shadow:0 3px 10px rgba(0,0,0,.3); }
.fav-rec-ico{ font-size:1.25rem; line-height:1; }
.fav-rec-txt{ line-height:1.15; }
.ven-moderna .fav-custom{ margin-top:10px; }
.ven-moderna .fav-custom input, .ven-moderna .fav-custom select{ border-radius:12px; }
/* Selector de proveedor en fichas con logo (pedido de Manuel). */
.prov-picker{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; max-height:236px; overflow-y:auto; padding:2px; }
.prov-picker-op{ display:flex; align-items:center; gap:8px; min-height:48px; padding:6px 10px 6px 6px; border-radius:8px; text-align:left; cursor:pointer;
  border:2px solid var(--border); background: var(--surface-2); color: var(--text); font-weight:800; font-size:.8rem; transition: transform .12s ease, border-color .12s ease; }
.prov-picker-op:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--vc, #92400e) 60%, var(--border)); }
.prov-picker-logo{ flex:none; width:34px; height:34px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.prov-picker-logo img{ width:28px; height:28px; object-fit:contain; }
.prov-picker-ini{ font-size:.75rem; font-weight:900; color:#1f2937; }
.prov-picker-nombre{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; line-height:1.15; }
.prov-picker-check{ flex:none; width:20px; height:20px; border-radius:50%; display:none; align-items:center; justify-content:center; font-size:.7rem; background:#fff; color: var(--vc, #92400e); }
.prov-picker-op.activo{ color:#fff; border-color: color-mix(in srgb, var(--vc, #92400e) 55%, #fff); text-shadow:0 1px 2px rgba(0,0,0,.4); box-shadow:0 3px 10px rgba(0,0,0,.3);
  background: linear-gradient(100deg, color-mix(in srgb, var(--vc, #92400e) 75%, #fff), var(--vc, #92400e) 55%, color-mix(in srgb, var(--vc, #92400e) 55%, #000)); }
.prov-picker-op.activo .prov-picker-check{ display:flex; }
.prov-picker-nuevo{ border-style:dashed; }

/* ---------- Historial a la derecha en pantalla muy ancha (V2.91.0, pedido de Manuel) ----------
   body.con-lateral lo pone acomodarHistorialLateral (script.js) solo si de verdad cabe. La ficha
   se recorre a la izquierda y .ficha-historial (que sigue dentro de #resultPanel) se dibuja a su
   derecha, con su propia barra para bajar y pegada arriba al hacer scroll. */
.ficha-historial-titulo{ display:none; }
body.con-lateral .wrap{ margin-left:24px; margin-right:0; width: clamp(820px, 58%, 1320px); }
body.con-lateral #resultPanel .ficha-historial .table-wrap{ overflow-x:auto; }
body.con-lateral #resultPanel .ficha-historial{
  position:absolute; top:0; bottom:0; left: calc(100% + 24px); width: var(--lateral-ancho, 420px);
}
body.con-lateral #resultPanel .ficha-historial-caja{
  position:sticky; top:16px;
  max-height: calc((100dvh / var(--alba-zoom, 1)) - 120px); max-height: calc((100vh / var(--alba-zoom, 1)) - 120px);
  overflow-y:auto; overscroll-behavior:contain;
  background: var(--surface); border:2px solid var(--border); border-radius: var(--radius-lg, 14px);
  padding:16px; box-shadow: var(--shadow-sm);
}
body.con-lateral #resultPanel .ficha-historial-titulo{
  display:block; font-weight:900; font-size:1rem; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--border);
}
/* Ahi va siempre abierto: el boton de abrir/cerrar sobra. */
body.con-lateral #resultPanel .ficha-historial > .ficha-historial-caja > .details-toggle-btn:not(.alba-movs-toggle):not(.entre-alm-toggle){ display:none; }
body.con-lateral #resultPanel .ficha-historial .mov-acordeon{ display:block !important; }
/* En la columna la tabla va compacta: caben mas columnas sin tener que recorrerla de lado. */
body.con-lateral #resultPanel .ficha-historial table.moves{ font-size:.7rem; }
body.con-lateral #resultPanel .ficha-historial table.moves th,
body.con-lateral #resultPanel .ficha-historial table.moves td{ padding:6px 5px; }
body.con-lateral #resultPanel .ficha-historial .moves-link{ padding:2px 6px; font-size:.66rem; }
body.con-lateral #resultPanel .ficha-historial .flow-tag{ font-size:.58rem; padding:1px 5px; margin-right:0; }
body.con-lateral #resultPanel .ficha-historial .history-hint{ font-size:.7rem; }

/* ---------- Prioridad a las fotos (V2.92.0, pedido de Manuel) ----------
   Mientras hay una ventana de fotos abierta o va una foto subiendo, el fondo animado se pausa:
   las particulas del tema se esconden y la aurora deja de redibujarse (aurora.js). Asi el
   telefono no reparte su fuerza entre la foto y los adornos. */
body.alba-con-foto .alba-tema-particulas,
body.alba-subiendo .alba-tema-particulas{ display:none !important; }
/* La foto del recorte se desliza y se acerca con transform: que el navegador la trate como capa. */
.recorte-img{ will-change: transform; }

/* Columna del historial alineada (V2.92.1, pedido de Manuel: "ocupa los espacios vacios y alinea"):
   empieza a la altura del encabezado (--lateral-arriba lo mide script.js) y el cuadro llega hasta
   abajo de la pantalla aunque traiga poco, sin dejar un hueco debajo. */
body.con-lateral #resultPanel .ficha-historial{ top: var(--lateral-arriba, 0px); }
body.con-lateral #resultPanel .ficha-historial-caja{
  min-height: calc((100vh / var(--alba-zoom, 1)) - 110px);
  min-height: calc((100dvh / var(--alba-zoom, 1)) - 110px);
  max-height: calc((100vh / var(--alba-zoom, 1)) - 110px);
  max-height: calc((100dvh / var(--alba-zoom, 1)) - 110px);
  box-sizing: border-box;
}

/* "Preparando la foto…" mientras se lee la foto recien tomada (V2.92.2). */
.recorte-modal-preparando{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:28px 24px; min-width:240px; }
.recorte-prep-ico{ font-size:2.4rem; animation: prepLate 1s ease-in-out infinite; }
.recorte-prep-txt{ font-weight:800; }
.recorte-prep-barra{ width:180px; height:5px; border-radius:8px; overflow:hidden; background: var(--border); }
.recorte-prep-barra span{ display:block; width:40%; height:100%; border-radius:8px; background: var(--accent);
  animation: prepCorre 1s ease-in-out infinite; }
@keyframes prepLate{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.12); } }
@keyframes prepCorre{ 0%{ transform: translateX(-100%); } 100%{ transform: translateX(260%); } }

/* ---------- "¿A quién se lo mandas?" horizontal (V2.92.3, pedido de Manuel) ----------
   Izquierda: el codigo y para que se manda. Derecha: las cuentas en cuadricula. En celular, una
   sola columna (el codigo y la nota arriba, las cuentas abajo). */
.ml-modal.share-horizontal{ width: 900px; max-width: 100% !important; }
.share-cuerpo{ display:grid; grid-template-columns: minmax(240px, 300px) 1fr; gap:18px; align-items:start; }
.share-col-nota{ display:flex; flex-direction:column; gap:8px; position:sticky; top:0; }
.share-codigo-etq{ font-size:.66rem; font-weight:900; letter-spacing:.8px; text-transform:uppercase; opacity:.7; }
.share-codigo{ font-family: var(--font-code); font-weight:900; font-size:.95rem; line-height:1.35; word-break:break-all;
  padding:10px 12px; border-radius: var(--radius, 10px); background: var(--surface-2); border:1px solid var(--border); color: var(--accent); }
.share-col-nota label{ font-size:.8rem; font-weight:700; margin-top:6px; }
.share-paso{ font-size:.74rem; opacity:.7; margin-top:4px; }
.share-col-dest{ min-width:0; max-height: 460px; overflow-y:auto; padding-right:4px; }
.share-dest-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:8px; }
.ven-moderna .share-horizontal .share-dest-btn,
.share-horizontal .share-dest-btn{
  flex-direction:row !important; align-items:center; gap:10px; width:100%; min-height:52px; padding:8px 12px !important;
  border-radius: var(--radius, 12px) !important; text-transform:none; letter-spacing:0;
}
.share-dest-avatar{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:900; color:#fff; background: var(--vc, #3730a3); }
.share-dest-textos{ display:flex; flex-direction:column; gap:1px; min-width:0; text-align:left; }
.share-horizontal .share-dest-nombre{ font-size:.8rem; line-height:1.2; overflow-wrap:anywhere; }
@media (max-width: 700px){
  .share-cuerpo{ grid-template-columns: 1fr; }
  .share-col-nota{ position:static; }
  .share-paso{ display:none; }
  .share-col-dest{ max-height:none; }
  .share-dest-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------- -UDA: Usuarios De Alba (V2.93.0) ---------- */
.uda-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
.uda-tarjeta{ display:flex; align-items:center; gap:12px; padding:12px; cursor:pointer; text-align:left; font: inherit; color: inherit;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius, 12px); }
.uda-tarjeta:hover{ border-color: var(--accent); }
.uda-tarjeta.uda-inactiva{ opacity:.55; }
.uda-avatar{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#04211c; background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.uda-avatar img, .uda-avatar-grande img{ width:100%; height:100%; object-fit:cover; display:block; }
.uda-avatar-grande{ overflow:hidden; }
.uda-datos{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.uda-nombre{ font-weight:800; font-size:.9rem; }
.uda-rol{ font-size:.72rem; font-weight:800; color: var(--accent); }
.uda-cuando{ font-size:.72rem; opacity:.7; }
.uda-cab{ flex-wrap:wrap; }
.uda-cab .perfil-datos{ flex:1 1 auto; }
.uda-odoo{ width:auto; font-size:.76rem; padding:8px 12px; }
.uda-permisos, .uda-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.uda-permiso{ font-size:.74rem; font-weight:700; padding:4px 10px; border-radius:8px; border:1px solid var(--accent4); color: var(--accent4); }
.uda-mandados{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.uda-mandado{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.82rem; padding:8px 10px;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius, 10px); }
.uda-mandado .reg-hora{ margin-left:auto; }

/* ---------- Subida de fotos a la vista (V2.93.2) ---------- */
.alba-chip-subida{
  position:fixed; left:50%; transform:translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index:2147482000;
  display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:8px;
  background: var(--surface); color: var(--text); border:2px solid var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,.45);
  font-weight:800; font-size:.86rem; white-space:nowrap; max-width: calc(100% - 24px);
}
.alba-chip-subida.listo{ border-color: var(--accent4); }
.alba-chip-subida.error{ border-color: var(--err, #e5484d); }
.alba-chip-giro{ width:16px; height:16px; border-radius:50%; border:3px solid var(--border); border-top-color: var(--accent);
  animation: albaGiroChip .8s linear infinite; flex:0 0 auto; }
@keyframes albaGiroChip{ to{ transform: rotate(360deg); } }
/* La foto recien puesta, mientras sube. */
.photo-box.foto-subiendo{ position:relative; }
.photo-box.foto-subiendo::after{
  content:'⏳ Subiendo…'; position:absolute; left:8px; bottom:8px; padding:4px 10px; border-radius:8px;
  background: rgba(0,0,0,.72); color:#fff; font-size:.72rem; font-weight:800;
}

/* Las bolitas del recorte libre: se agarran con el dedo aunque no se le atine exacto (V2.94.1).
   El circulo se ve igual, pero lo que responde al toque es una zona de 46 px alrededor. */
.recorte-asa::before{ content:''; position:absolute; inset:-12px; border-radius:50%; }

/* Kardex: elegir el logo de la hoja (Pleus o Idealux). Fondo blanco: los logos estan hechos para
   papel (letras oscuras) y en el tema oscuro no se verian. */
.ko-marcas{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ko-marca{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:92px;
  padding:12px 10px 8px; background:#fff; color:#1f2937; border:2px solid var(--border); border-radius:var(--radius, 12px);
  cursor:pointer; font:inherit; font-weight:700; font-size:13px; opacity:.72; transition:opacity .15s, box-shadow .15s, border-color .15s; }
.ko-marca img{ height:40px; max-width:100%; object-fit:contain; display:block; pointer-events:none; }
.ko-marca.active{ opacity:1; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.ko-marca:hover{ opacity:1; }
.lt-marca{ margin:10px 0; }
.lt-marca .ko-marca{ min-height:70px; }
.lt-marca .ko-marca img{ height:30px; }

/* -ubp: filtro por dia y por persona (V2.96.0). */
.ubp-filtro-dia{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.82rem; color: var(--text); }
.ubp-filtro-dia button{ border:1px solid var(--border); background: var(--surface); color: var(--text-dim); border-radius:8px;
  padding:3px 10px; font:inherit; font-size:.74rem; cursor:pointer; }
.ubp-filtro-dia button:hover{ color: var(--text); border-color: var(--accent); }
.ubp-quienes{ display:flex; flex-wrap:wrap; gap:7px; }
.ubp-quien{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:8px; cursor:pointer;
  font:inherit; font-size:.78rem; font-weight:700; color: var(--text); background: var(--surface); border:1px solid var(--border); }
.ubp-quien b{ font-size:.72rem; min-width:20px; padding:1px 6px; border-radius:8px; background: var(--surface-2); text-align:center; }
.ubp-quien.activo{ background: var(--accent); border-color: var(--accent); color:#04211c; }
.ubp-quien.activo b{ background: rgba(255,255,255,.55); color:#04211c; }
.ubp-grupo-tit{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; margin:8px 0 0; padding-bottom:6px;
  border-bottom:1px solid var(--border); font-size:.9rem; font-weight:800; color: var(--text); }
.ubp-grupo-tit:first-child{ margin-top:0; }
.ubp-grupo-tit span{ font-size:.72rem; padding:1px 8px; border-radius:8px; background: var(--surface-2); color: var(--text-dim); }
.ubp-ver-todas{ margin-top:10px; }

/* "Fuera de sistema" (muestras, clientes...): rediseno V2.96.1. Tarjeta con encabezado-boton
   (icono, titulo, cuantas, total con unidad, flecha que gira) y una fila por ubicacion. */
.fuera-sis{
  margin-top:12px; border-radius: var(--radius-lg, 12px); overflow:hidden;
  border:1px solid color-mix(in srgb, var(--warn) 35%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 9%, var(--surface-2)), var(--surface-2));
}
.fuera-sis-cab{
  all:unset; box-sizing:border-box; width:100%; cursor:pointer;
  display:flex; align-items:center; gap:12px; padding:12px 14px;
}
.fuera-sis-cab:hover{ background: color-mix(in srgb, var(--warn) 7%, transparent); }
.fuera-sis-cab:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.fuera-sis-icono{
  flex:none; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; background: color-mix(in srgb, var(--warn) 18%, var(--surface));
  border:1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.fuera-sis-titulos{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fuera-sis-titulo{ font-weight:800; font-size:.92rem; color: var(--text); }
.fuera-sis-sub{ font-size:.72rem; color: var(--text-dim); line-height:1.35; }
.fuera-sis-total{
  flex:none; display:inline-flex; align-items:baseline; gap:4px; padding:5px 12px; border-radius:8px;
  font-weight:900; font-size:1.05rem; color:#04211c; background: var(--warn);
}
.fuera-sis-total small, .fuera-sis-cant small{ font-size:.66rem; font-weight:700; opacity:.8; }
.fuera-sis-flecha{
  flex:none; width:9px; height:9px; margin:0 4px 0 2px; border-right:2px solid var(--text-dim); border-bottom:2px solid var(--text-dim);
  transform: rotate(-45deg); transition: transform .2s ease;
}
.fuera-sis[data-collapsed="0"] .fuera-sis-flecha{ transform: rotate(45deg); }
.fuera-sis-lista{ list-style:none; margin:0; padding:0 10px 10px; display:flex; flex-direction:column; gap:6px; }
.fuera-sis-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius: var(--radius, 10px);
  background: var(--surface); border:1px solid var(--border);
}
.fuera-sis-avatar{
  flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:800; letter-spacing:.3px; color: var(--text);
  background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); border:1px solid var(--border);
}
.fuera-sis-datos{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.fuera-sis-nombre{ font-weight:700; font-size:.86rem; color: var(--text); overflow-wrap:break-word; }
.fuera-sis-ruta{ display:flex; flex-wrap:wrap; gap:5px; }
.fuera-sis-ruta:empty{ display:none; }
.fuera-sis-tipo, .fuera-sis-alm{
  font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  padding:1px 7px; border-radius:8px; border:1px solid var(--border); color: var(--text-dim);
}
.fuera-sis-tipo{ color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.fuera-sis-barra{ display:block; height:4px; border-radius:8px; background: var(--surface-2); overflow:hidden; }
.fuera-sis-barra > span{ display:block; height:100%; border-radius:inherit; background: var(--warn); }
.fuera-sis-cant{
  flex:none; display:inline-flex; align-items:baseline; gap:4px;
  font-family: var(--font-code); font-weight:800; font-size:1rem; color: var(--warn);
}

/* Angosto (celular): se mide la tarjeta, no la pantalla — en la ficha a lo ancho ella misma es angosta. */
.fuera-sis{ container-type:inline-size; }
@container (max-width: 420px){
  .fuera-sis-cab{ gap:9px; padding:10px 11px; }
  .fuera-sis-icono{ width:32px; height:32px; font-size:1rem; border-radius:8px; }
  .fuera-sis-total{ font-size:.92rem; padding:4px 10px; }
  .fuera-sis-lista{ padding:0 7px 7px; }
  .fuera-sis-item{ gap:9px; padding:8px 10px; }
  .fuera-sis-avatar{ width:28px; height:28px; font-size:.64rem; }
  .fuera-sis-cant{ font-size:.92rem; }
}
@container (max-width: 300px){
  .fuera-sis-icono, .fuera-sis-avatar{ display:none; }
}
/* Menu del click derecho sobre el registro (solo Admin). */
.alba-reg-menu{ position:fixed; z-index:2147483000; min-width:220px; padding:6px; border-radius:14px; background: var(--surface); border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:4px; }
.alba-reg-menu button{ text-align:left; padding:9px 12px; border-radius:10px; border:none; background:transparent; color: var(--text); font-weight:800; font-size:.84rem; cursor:pointer; }
.alba-reg-menu button:hover{ background: var(--surface-2); }
.alba-reg-menu .alba-reg-menu-borrar{ color: var(--err, #e53935); }
.alba-reg-menu-nota{ padding:4px 12px 6px; font-size:.72rem; color: var(--text-dim); }
/* ---------- Pantalla de baja definitiva (aviso de mantenimiento con [BAJA]) ---------- */
.alba-mant-overlay.alba-baja{ background: radial-gradient(900px 500px at 50% 30%, #1b1b1f, #050506 70%); -webkit-backdrop-filter:none; backdrop-filter:none; }
.alba-baja-caja{ width:min(460px, 100%); text-align:center; color:#d6d3cc; animation: albaBajaEntra 1.2s ease both; }
.alba-baja-logo{ width:110px; height:110px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:3px solid #3a3a40; color:#55555c; font-size:3.2rem; font-weight:900; animation: albaBajaApaga 3s ease forwards; }
.alba-baja-marca{ font-size:.75rem; font-weight:900; letter-spacing:6px; color:#6b6b72; }
.alba-baja-titulo{ margin:8px 0 12px; font-size:2rem; font-weight:900; color:#e7e5df; letter-spacing:.5px; }
.alba-baja-texto{ margin:0 auto; max-width:380px; font-size:.95rem; line-height:1.6; color:#a8a59e; }
.alba-baja-linea{ width:60px; height:2px; margin:22px auto 14px; background:#2e2e33; }
.alba-baja-pie{ font-size:.7rem; letter-spacing:1px; color:#4d4d53; }
.alba-baja-previa{ margin-top:22px; font-size:.75rem; color:#f7941d; }
@keyframes albaBajaEntra{ from{ opacity:0; } to{ opacity:1; } }
@keyframes albaBajaApaga{ 0%{ border-color: var(--accent, #1cc6a6); color: var(--accent, #1cc6a6); box-shadow:0 0 40px color-mix(in srgb, var(--accent, #1cc6a6) 50%, transparent); }
  60%{ border-color:#3a3a40; color:#55555c; box-shadow:none; } 100%{ border-color:#3a3a40; color:#55555c; box-shadow:none; } }
@media (prefers-reduced-motion: reduce){ .alba-baja-caja, .alba-baja-logo{ animation:none; } }
.mant-baja-opcion{ display:flex; gap:10px; align-items:flex-start; margin:12px 0 8px; padding:10px 12px; border-radius:12px; border:1px dashed var(--border); cursor:pointer; }
.mant-baja-opcion small{ display:block; color: var(--text-dim); font-weight:400; margin-top:2px; }
.mant-ver-baja{ width:100%; margin-bottom:10px; }
.alba-baja-logo svg{ width:78%; height:78%; }
.alba-baja-logo .ae-l{ stroke: currentColor !important; }
/* ---------- Bloqueo "Eliminando A.L.B.A." ---------- */
.alba-mant-overlay.alba-elim{ background: radial-gradient(900px 500px at 50% 30%, #2a0b0b, #070405 70%); -webkit-backdrop-filter:none; backdrop-filter:none; }
.alba-elim-caja{ width:min(460px, 100%); text-align:center; color:#e7e5df; }
.alba-elim-anillo{ position:relative; width:110px; height:110px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.4rem;
  background: conic-gradient(#ef4444, #7f1d1d, #ef4444); animation: albaElimGira 1.4s linear infinite; }
.alba-elim-anillo::after{ content:''; position:absolute; inset:7px; border-radius:50%; background:#140708; }
.alba-elim-anillo span{ position:relative; z-index:1; animation: albaElimGira 1.4s linear infinite reverse; }
.alba-elim-marca{ font-size:.75rem; font-weight:900; letter-spacing:6px; color:#ef4444; }
.alba-elim-titulo{ margin:8px 0 10px; font-size:2rem; font-weight:900; }
.alba-elim-texto{ margin:0 auto 18px; max-width:360px; color:#b9b2aa; font-size:.95rem; line-height:1.55; }
.alba-elim-barra{ height:6px; border-radius:8px; overflow:hidden; background:#2b1515; }
.alba-elim-barra span{ display:block; height:100%; width:35%; border-radius:8px; background: linear-gradient(90deg, #7f1d1d, #ef4444); animation: albaElimBarra 1.6s ease-in-out infinite; }
.alba-elim-paso{ margin-top:12px; font-size:.82rem; color:#d6a5a5; min-height:1.2em; }
@keyframes albaElimGira{ to{ transform: rotate(360deg); } }
@keyframes albaElimBarra{ 0%{ transform: translateX(-100%); } 100%{ transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce){ .alba-elim-anillo, .alba-elim-anillo span, .alba-elim-barra span{ animation:none; } }
.elim-texto{ font-size:.88rem; line-height:1.5; color: var(--text); }
.elim-estado{ margin:10px 0; padding:10px 12px; border-radius:12px; background: var(--surface-2); border:1px solid var(--border); font-weight:800; font-size:.86rem; }
.elim-estado.on{ border-color:#ef4444; color:#fca5a5; }
#elimVer{ width:100%; margin-bottom:6px; }
/* Cantidades en negativo, en rojo (pedido de Manuel). */
.fuera-sis-total.neg{ background: linear-gradient(135deg, #f87171, #b91c1c) !important; color:#fff !important; }
.fuera-sis-cant.neg, .loc-card.loc-pill .loc-qty.neg{ color:#f87171 !important; }
.fuera-sis-item.neg{ border-color: color-mix(in srgb, #ef4444 55%, var(--border)) !important; background: color-mix(in srgb, #ef4444 8%, var(--surface)) !important; }
.fuera-sis-item.neg .fuera-sis-barra span{ background:#ef4444 !important; }
.fuera-sis-item.neg .fuera-sis-avatar{ background:#7f1d1d; color:#fff; }
.fuera-sis-aviso-neg{ display:block; margin-top:6px; font-size:.78rem; line-height:1.4; color:#fca5a5; }
.fuera-sis-aviso-neg b{ color:#f87171; }
.fuera-sis-sub-neg{ color:#f87171; }
/* Movimientos de una persona: filtro por fecha (pedido de Manuel). */
.usr-fechas{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 10px; }
.usr-fecha-chip{ padding:7px 12px; border-radius:8px; border:2px solid var(--border); background: var(--surface-2); color: var(--text); font-weight:800; font-size:.78rem; cursor:pointer; }
.usr-fecha-chip.activo{ background: var(--accent); border-color: var(--accent); color:#04211c; }
.usr-fecha-dia{ display:flex; align-items:center; gap:4px; padding:3px 8px; border-radius:8px; border:2px solid var(--border); background: var(--surface-2); font-size:.78rem; }
.usr-fecha-dia input{ border:none; background:transparent; color: var(--text); font:inherit; padding:2px; }
.usr-fecha-cuenta{ margin-left:auto; font-size:.78rem; color: var(--text-dim); font-weight:700; }
tr.usr-dia-sep td{ background: var(--surface-2); color: var(--accent); font-weight:900; font-size:.8rem; letter-spacing:.3px; padding:8px 10px !important; }
tr.usr-fuera-fecha{ display:none !important; }
/* ---------- Acceso rediseñado (pedido de Manuel, 7 de octubre de 2026) ----------
   Mismo lenguaje que las ventanas de la ficha: cabecera en franja de color, campos y botones
   en capsula, cada boton con su color. Solo estilo: los ids y la logica son los de siempre. */
.login-card .login-head{
  margin:0 0 16px; padding:16px 18px; border-radius:18px; border:none; color:#fff;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 70%, #fff) 0%, var(--accent) 40%, color-mix(in srgb, var(--accent) 45%, #000) 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.login-card .login-head-icono{ width:48px; height:48px; border-radius:50%; background:#fff !important; border:none !important; font-size:1.4rem; box-shadow:0 4px 12px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; }
.login-card .login-head-titulo{ color:#fff !important; font-size:1.2rem; text-shadow:0 2px 4px rgba(0,0,0,.35); }
.login-card .login-head-sub{ color:rgba(255,255,255,.9) !important; }
.login-card .horario-cerrado-aviso{ border-radius:18px; border-width:2px; }
.login-card .horario-cerrado-vuelve{ border-radius:8px !important; }
.login-card .config-field label{ font-weight:900; letter-spacing:.5px; }
.login-card .config-field input{ border-radius:14px !important; min-height:48px; border-width:2px !important; transition: border-color .15s ease, box-shadow .15s ease; }
.login-card .config-field input:focus{ border-color: var(--accent) !important; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent) !important; }
.login-card .pass-eye{ border-radius:50%; }
.login-card .login-col-acciones .btn{ border-radius:8px !important; min-height:50px; font-weight:900; text-shadow:0 1px 2px rgba(0,0,0,.35); box-shadow:0 3px 10px rgba(0,0,0,.28); transition: transform .12s ease, filter .12s ease; }
.login-card .login-col-acciones .btn:hover:not(:disabled){ transform: translateY(-1px); filter:brightness(1.08); }
.login-card #loginSubmitBtn{ color:#04211c !important; text-shadow:none; border:2px solid color-mix(in srgb, var(--accent) 60%, #fff) !important;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent) 50%, color-mix(in srgb, var(--accent) 70%, #000)) !important; font-size:1rem; }
.login-card .login-passkey-btn{ color:#fff !important; border:2px solid #5eead4 !important;
  background: linear-gradient(100deg, #14b8a6, #0f766e 55%, #064e3b) !important; }
.login-card .login-alt-create{ color:#fff !important; border:2px solid #c4b5fd !important;
  background: linear-gradient(100deg, #8b5cf6, #6d28d9 55%, #3b0764) !important; }
.login-card .login-alt-reset{ color:#fff !important; border:2px solid #fcd34d !important;
  background: linear-gradient(100deg, #d97706, #a16207 55%, #713f12) !important; }
.login-card .login-col-acciones .btn{ white-space:nowrap; font-size:.84rem; }
.login-card #loginSubmitBtn{ font-size:1rem; }
/* Aviso de horario y aviso de Admin del acceso, con el mismo lenguaje (pedido de Manuel). */
.login-card .horario-cerrado-aviso:not(.abierta){
  border:none !important; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.35);
  background: radial-gradient(120% 140% at 0% 0%, #fbbf24 0%, #d97706 40%, #78350f 100%) !important;
}
.login-card .horario-cerrado-aviso:not(.abierta) .horario-aviso-reloj{ width:48px; height:48px; padding:4px; box-sizing:border-box; border-radius:50%; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.login-card .horario-cerrado-aviso:not(.abierta) .hr-esfera{ fill:#fff7ed; stroke:#d97706; }
.login-card .horario-cerrado-aviso:not(.abierta) .hr-hora, .login-card .horario-cerrado-aviso:not(.abierta) .hr-minuto{ stroke:#92400e; }
.login-card .horario-cerrado-aviso:not(.abierta) .hr-punto{ fill:#92400e; }
.login-card .horario-cerrado-aviso:not(.abierta) .horario-cerrado-titulo{ color:#fff; font-size:1.05rem; font-weight:900; text-shadow:0 2px 4px rgba(0,0,0,.3); }
.login-card .horario-cerrado-aviso:not(.abierta) .horario-cerrado-detalle{ color:#fff; opacity:.92; }
.login-card .horario-cerrado-aviso:not(.abierta) .horario-cerrado-vuelve{ background:#fff !important; border:none !important; box-shadow:0 3px 10px rgba(0,0,0,.25); }
.login-card .horario-cerrado-aviso:not(.abierta) .hcv-etiqueta{ color:#92400e; }
.login-card .horario-cerrado-aviso:not(.abierta) .hcv-hora{ color:#78350f !important; opacity:1 !important; font-size:1.05rem; font-weight:900; }

.login-email-hint.show.es-admin{
  border:none !important; border-radius:16px; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.3);
  background: radial-gradient(120% 140% at 0% 0%, #f87171 0%, #b91c1c 45%, #450a0a 100%) !important;
}
.login-email-hint.es-admin .leh-icono-admin{ width:38px; height:38px; border-radius:50%; background:#fff !important; color:#b91c1c !important; border:none !important; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(0,0,0,.3); }
.login-email-hint.es-admin .leh-label{ color:#fff !important; opacity:.9; }
.login-email-hint.es-admin .leh-admin-nota{ color:#fff !important; }
/* "Se produce" con foto, liga y copiar (pedido de Manuel). */
.mo-target.con-foto{ display:flex !important; flex-direction:row !important; gap:14px; align-items:center !important; }
.mo-target-foto{ flex:none; width:96px; height:96px; object-fit:contain; border-radius:14px; background:#fff; border:2px solid var(--border); cursor:zoom-in; }
.mo-target-cuerpo{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto; }
.mo-target-fila{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mo-target-ir{ text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.mo-target-copiar{ flex:none; width:32px; height:32px; border-radius:50%; border:2px solid var(--border); background: var(--surface-2); cursor:pointer; font-size:.95rem; }
.mo-target-copiar:hover{ border-color: var(--accent4, #a3d139); }
.mo-target-copiar.copied{ background: var(--accent4, #a3d139); }
@media (max-width:600px){ .mo-target-foto{ width:72px; height:72px; } }
/* Consejo de unificar una ubicacion manual chica con la grande. */
.ubic-pendiente.ubic-unificar{ border-color: color-mix(in srgb, #a78bfa 60%, var(--border)) !important; background: color-mix(in srgb, #a78bfa 10%, var(--surface)) !important; }
.ubic-pendiente.ubic-unificar .ubic-pendiente-cab, .ubic-pendiente.ubic-unificar b{ color:#c4b5fd !important; }
/* Reporte de fotos pendientes (-foto, -foto .p, -foto -ad), rediseñado. */
.foto-rep-cab{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:18px; color:#fff; margin-bottom:12px;
  background: radial-gradient(120% 140% at 0% 0%, #60a5fa 0%, #1d4ed8 45%, #172554 100%); box-shadow:0 6px 18px rgba(0,0,0,.3); }
.foto-rep-ico{ flex:none; width:48px; height:48px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.foto-rep-titulo{ font-size:1.15rem; font-weight:900; text-shadow:0 2px 4px rgba(0,0,0,.3); }
.foto-rep-sub{ font-size:.8rem; opacity:.9; margin-top:2px; }
.foto-rep-sub code{ background:rgba(255,255,255,.18); padding:1px 6px; border-radius:6px; font-weight:800; }
.foto-rep-filtros{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.foto-rep-filtro{ padding:8px 14px; border-radius:8px; border:2px solid var(--border); background: var(--surface-2); color: var(--text); font-weight:800; font-size:.8rem; cursor:pointer; }
.foto-rep-filtro b{ margin-left:4px; padding:1px 8px; border-radius:8px; background: var(--surface); }
.foto-rep-filtro.activo{ color:#fff; border-color:#93c5fd; background: linear-gradient(100deg, #3b82f6, #1d4ed8); }
.foto-rep-filtro.activo b{ background:rgba(255,255,255,.25); }
.foto-rep-si, .foto-rep-no{ display:inline-block; padding:3px 10px; border-radius:8px; font-weight:800; font-size:.76rem; white-space:nowrap; }
.foto-rep-si{ background: color-mix(in srgb, var(--ok, #22c55e) 18%, transparent); color: var(--ok, #22c55e); border:1px solid color-mix(in srgb, var(--ok, #22c55e) 45%, transparent); }
.foto-rep-no{ background: color-mix(in srgb, #ef4444 15%, transparent); color:#f87171; border:1px solid color-mix(in srgb, #ef4444 45%, transparent); }
.foto-rep-ubic{ white-space:nowrap; }
.foto-rep-ubic small{ color: var(--text-dim); font-weight:700; }
.foto-rep-mas{ padding:1px 6px; border-radius:8px; background: var(--surface-2); }
/* ---------- Pantalla de carga rediseñada (pedido de Manuel) ---------- */
.alba-loader .alba-loader-centro{
  width:min(440px, calc(100% - 32px)); padding:26px 24px 22px; border-radius:24px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.alba-loader .alba-loader-marca{ letter-spacing:6px; font-size:.78rem; opacity:.85; }
.alba-loader-anillo{ position:relative; width:120px; height:120px; margin:14px auto 16px; border-radius:50%;
  background: conic-gradient(var(--accent), var(--accent2), var(--accent3), var(--accent4), var(--accent));
  animation: albaLoaderGira 1.6s linear infinite; box-shadow:0 0 34px color-mix(in srgb, var(--accent) 45%, transparent); }
.alba-loader-anillo::after{ content:''; position:absolute; inset:8px; border-radius:50%; background: var(--surface); }
.alba-loader-halo{ position:absolute; inset:-10px; border-radius:50%; border:2px solid color-mix(in srgb, var(--accent) 40%, transparent); animation: albaLoaderHalo 2s ease-in-out infinite; }
.alba-loader-emblema{ position:absolute; inset:22px; width:76px; height:76px; z-index:1; animation: albaLoaderGira 1.6s linear infinite reverse; }
.alba-loader-emblema .ae-l{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.alba-loader-emblema .ae-letra .ae-l{ stroke: var(--text); }
.alba-loader-emblema .ae-sombra .ae-l{ stroke: var(--accent); }
@keyframes albaLoaderGira{ to{ transform: rotate(360deg); } }
@keyframes albaLoaderHalo{ 0%,100%{ transform: scale(.94); opacity:.2; } 50%{ transform: scale(1.06); opacity:.8; } }
.alba-loader .alba-loader-text{ font-size:1.5rem; font-weight:900; }
.alba-loader .alba-loader-codigo{ display:inline-block; margin-top:8px; padding:5px 14px; border-radius:8px; font-weight:900;
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); border:1px solid var(--accent); color: var(--accent); }
.alba-loader .alba-loader-paso{ margin-top:10px; font-weight:700; }
.alba-loader .alba-loader-barra{ height:8px; border-radius:8px; overflow:hidden; background: var(--surface-2); margin-top:16px; }
.alba-loader .alba-loader-barra span{ display:block; height:100%; width:40%; border-radius:8px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent4)); animation: albaLoaderBarra 1.4s ease-in-out infinite; }
@keyframes albaLoaderBarra{ 0%{ transform: translateX(-110%); } 100%{ transform: translateX(260%); } }
.alba-loader .alba-loader-reloj{ display:inline-block; margin-top:12px; padding:3px 12px; border-radius:8px; background: var(--surface-2); font-weight:900; font-size:.78rem; }
.alba-loader .alba-loader-reloj:empty{ display:none; }
@media (prefers-reduced-motion: reduce){ .alba-loader-anillo, .alba-loader-emblema, .alba-loader-halo, .alba-loader .alba-loader-barra span{ animation:none; } }
/* Pantalla de carga segun lo que se pidio (pedido de Manuel). */
.alba-loader-hoja, .alba-loader-lista{ display:none; }
.alba-loader-prefijos{ display:none; }
.alba-loader.modo-excel .alba-loader-anillo, .alba-loader.modo-reporte .alba-loader-anillo{ display:none; }
/* Excel: hojita de 4x4 que se llena verde, celda por celda. */
.alba-loader.modo-excel .alba-loader-hoja{ display:grid; grid-template-columns:repeat(4, 22px); gap:4px; width:max-content; margin:16px auto 18px;
  padding:10px; border-radius:12px; background:#fff; box-shadow:0 0 30px rgba(22,163,74,.45); }
.alba-loader-hoja i{ width:22px; height:14px; border-radius:3px; background:#e5e7eb; animation: albaHojaCelda 2.4s ease-in-out infinite; }
.alba-loader-hoja i:nth-child(-n+4){ background:#16a34a; animation:none; }
.alba-loader-hoja i:nth-child(5){ animation-delay:.1s } .alba-loader-hoja i:nth-child(6){ animation-delay:.2s } .alba-loader-hoja i:nth-child(7){ animation-delay:.3s } .alba-loader-hoja i:nth-child(8){ animation-delay:.4s }
.alba-loader-hoja i:nth-child(9){ animation-delay:.5s } .alba-loader-hoja i:nth-child(10){ animation-delay:.6s } .alba-loader-hoja i:nth-child(11){ animation-delay:.7s } .alba-loader-hoja i:nth-child(12){ animation-delay:.8s }
.alba-loader-hoja i:nth-child(13){ animation-delay:.9s } .alba-loader-hoja i:nth-child(14){ animation-delay:1s } .alba-loader-hoja i:nth-child(15){ animation-delay:1.1s } .alba-loader-hoja i:nth-child(16){ animation-delay:1.2s }
@keyframes albaHojaCelda{ 0%,15%{ background:#e5e7eb; } 35%,70%{ background:#86efac; } 100%{ background:#e5e7eb; } }
.alba-loader.modo-excel .alba-loader-barra span{ background: linear-gradient(90deg, #16a34a, #86efac); }
/* Reporte: renglones que entran uno tras otro. */
.alba-loader.modo-reporte .alba-loader-lista{ display:flex; flex-direction:column; gap:7px; width:180px; margin:16px auto 18px; }
.alba-loader-lista i{ height:14px; border-radius:8px; background: linear-gradient(90deg, var(--accent), var(--accent2)); opacity:0; animation: albaListaEntra 2.2s ease-in-out infinite; }
.alba-loader-lista i:nth-child(2){ width:85%; animation-delay:.25s } .alba-loader-lista i:nth-child(3){ width:92%; animation-delay:.5s } .alba-loader-lista i:nth-child(4){ width:70%; animation-delay:.75s }
@keyframes albaListaEntra{ 0%{ opacity:0; transform: translateX(-20px); } 25%,75%{ opacity:1; transform:none; } 100%{ opacity:0; transform: translateX(20px); } }
/* Varios prefijos juntos: sus fichas, que se van encendiendo. */
.alba-loader.modo-excel .alba-loader-prefijos, .alba-loader.modo-reporte .alba-loader-prefijos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; margin-bottom:8px; }
.alp-chip{ padding:4px 12px; border-radius:8px; font-weight:900; font-size:.8rem; background: var(--surface-2); border:2px solid var(--accent); color: var(--accent);
  animation: albaChipLuz 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
.alba-loader.modo-excel .alp-chip{ border-color:#16a34a; color:#4ade80; }
.alp-mas{ font-weight:900; color: var(--text-dim); }
@keyframes albaChipLuz{ 0%,100%{ box-shadow:none; transform:none; } 50%{ box-shadow:0 0 14px currentColor; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce){ .alba-loader-hoja i, .alba-loader-lista i, .alp-chip{ animation:none; opacity:1; } }
/* Tarjeta de "Tu Excel esta listo". */
.excel-listo{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 18px; border-radius:18px; color:#fff;
  background: radial-gradient(120% 140% at 0% 0%, #4ade80 0%, #16a34a 45%, #14532d 100%); box-shadow:0 6px 18px rgba(0,0,0,.3); }
.excel-listo-ico{ width:52px; height:52px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:1.6rem; flex:none; }
.excel-listo-txt{ flex:1 1 200px; min-width:0; }
.excel-listo-titulo{ font-size:1.15rem; font-weight:900; text-shadow:0 2px 4px rgba(0,0,0,.3); }
.excel-listo-sub{ font-size:.82rem; opacity:.92; overflow-wrap:anywhere; }
.excel-listo-btn{ border-radius:8px !important; background:#fff !important; color:#14532d !important; font-weight:900; border:none !important; min-height:46px; padding:10px 20px; text-decoration:none; }
/* -foto -laina con el mismo diseño, en rosa Laina. */
.foto-rep-cab.laina-rep-cab{ background: radial-gradient(120% 140% at 0% 0%, #f472b6 0%, #db2777 45%, #500724 100%); flex-wrap:wrap; }
.foto-rep-cab .foto-rep-txt{ flex:1 1 220px; min-width:0; }
.laina-bulk-cab{ border-radius:8px !important; background:#fff !important; color:#9d174d !important; font-weight:900; border:none !important; min-height:44px; }
.foto-rep-filtro.laina-filtro.activo{ border-color:#f9a8d4; background: linear-gradient(100deg, #ec4899, #be185d); }
.laina-match{ display:inline-block; padding:3px 10px; border-radius:8px; font-weight:900; font-size:.76rem; color:#fff; background: linear-gradient(100deg, #ec4899, #be185d); }
.laina-sin{ color: var(--text-dim); }

/* ===========================================================================
   REDISEÑO GENERAL (pedido de Manuel, 7 de octubre de 2026): todo A.L.B.A. con el mismo
   lenguaje que las piezas ya rediseñadas — capsulas, esquinas grandes, degradados del color de
   cada cosa, sombras suaves y foco de color. Va al FINAL a proposito: pisa lo generico de antes,
   pero lo ya rediseñado (que trae su propio color con !important) se queda como esta.
   =========================================================================== */
:root{ --alba-r-card: 20px; --alba-r-campo: 14px; }

/* Botones: capsula, peso y un poco de relieve. */
.btn{ border-radius:8px; font-weight:800; transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, border-color .12s ease; }
.btn:hover:not(:disabled){ transform: translateY(-1px); filter: brightness(1.08); }
.btn:active:not(:disabled){ transform: translateY(0); filter: brightness(.96); }
.btn:disabled{ opacity:.5; }
.btn-primary{ color:#04211c; border:2px solid color-mix(in srgb, var(--accent) 60%, #fff);
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent) 50%, color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow:0 3px 10px rgba(0,0,0,.25); }
.btn:not(.btn-primary):not(.act-btn):not(.excel-listo-btn):not(.laina-bulk-cab){ box-shadow:0 2px 6px rgba(0,0,0,.18); }

/* Campos: redondos, mas altos y con foco de color. */
input[type=text], input[type=password], input[type=number], input[type=email], input[type=search], input[type=date], input[type=time], select, textarea{
  border-radius: var(--alba-r-campo); transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=email]:focus, input[type=search]:focus,
input[type=date]:focus, input[type=time]:focus, select:focus, textarea:focus{
  outline:none; border-color: var(--accent) !important; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
input[type=checkbox], input[type=radio]{ accent-color: var(--accent); width:18px; height:18px; }
.result-filter-input{ border-radius:8px !important; padding-left:18px !important; }

/* Tarjetas y ventanas. */
.glass{ border-radius: var(--alba-r-card); }
.ml-modal, .config-content{ border-radius: var(--alba-r-card) !important; box-shadow:0 24px 70px rgba(0,0,0,.55); }
.modal-overlay{ -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ml-modal h3, .config-title{ font-weight:900; }
.config-title{ padding:12px 16px; margin:-4px -4px 14px; border-radius:16px; color:#fff;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 70%, #fff) 0%, var(--accent) 40%, color-mix(in srgb, var(--accent) 45%, #000) 100%);
  text-shadow:0 2px 4px rgba(0,0,0,.3); }
.config-field label{ font-weight:900; letter-spacing:.4px; }

/* Titulos de seccion: una pastilla con barrita de color. */
.section-title{ display:flex; align-items:center; gap:8px; font-weight:900; letter-spacing:.8px; }
.section-title::before{ content:''; width:4px; height:1.1em; border-radius:8px; flex:none;
  background: linear-gradient(180deg, var(--accent), var(--accent2)); }

/* Avisos / notas vacias: tarjeta con borde suave. */
.empty-note{ border-radius:16px; border:1px dashed color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); padding:14px 16px; }

/* Tablas: tarjeta redonda, cabecera fija y renglones que se iluminan. */
.table-wrap, div:has(> table.moves){ border-radius:16px; }
table.moves{ border-collapse:separate; border-spacing:0; border-radius:16px; overflow:hidden; background: color-mix(in srgb, var(--surface) 92%, transparent); }
table.moves thead th{ background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); font-weight:900; letter-spacing:.6px; }
table.moves tbody tr{ transition: background .12s ease; }
table.moves tbody tr:hover{ background: color-mix(in srgb, var(--accent) 7%, transparent); }
table.moves td, table.moves th{ border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent); }

/* Chips y cantidades en capsula. */
.code-pill{ border-radius:8px; }
.qty-badge{ border-radius:8px; padding:3px 10px; font-weight:900; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.moves-link{ text-underline-offset:3px; }

/* Desplegables (Historial, Movimientos De Alba...). */
.details-toggle-btn{ border-radius:16px; font-weight:900; transition: background .12s ease, border-color .12s ease; }
.details-toggle-btn:hover{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }

/* Paginas de reportes. */
.report-pagination button{ border-radius:8px; font-weight:800; padding:8px 16px; }

/* Tarjetas del inicio / panel. */
.home-tile{ border-radius:18px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.home-tile:hover{ transform: translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.3); border-color: var(--accent); }
.home-tile-icon{ border-radius:50%; }

/* Fotos: esquinas grandes y sombra. */
.photo-box, .attach-thumb, .row-thumb{ border-radius:16px; }
.photo-box{ box-shadow:0 8px 24px rgba(0,0,0,.35); overflow:hidden; }
.attach-thumb-wrap{ border-radius:16px; overflow:hidden; }

/* Barra de desplazamiento con el color del tema. */
*{ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 55%, var(--border)) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius:8px; border:2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track{ background: transparent; }
.btn{ justify-content:center; text-align:center; }
#codeInput{ border-radius:8px !important; padding-left:20px !important; }
.search-row, .alba-search-wrap, #codeInput + button, .search-btn{ border-radius:8px; }

/* ---------- Surtidos, Mis Surtidos, Recibidos, Marcadores y SKU de proveedores (pedido de Manuel) ----------
   Cabecera en franja de color, filtros en capsula y cada renglon como tarjeta que se levanta,
   con su progreso en barra de degradado. */
.odoo-list-panel .odoo-list-head{
  display:flex; align-items:center; gap:14px; padding:16px 18px; margin-bottom:12px; border-radius:18px; color:#fff;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 70%, #fff) 0%, var(--accent) 40%, color-mix(in srgb, var(--accent) 45%, #000) 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}
#favoritosPanel .odoo-list-head{ background: radial-gradient(120% 140% at 0% 0%, #f472b6 0%, #9d174d 45%, #4a0424 100%); }
#misSurtidosPanel .odoo-list-head{ background: radial-gradient(120% 140% at 0% 0%, #4ade80 0%, #15803d 45%, #052e16 100%); }
.odoo-list-panel .odoo-list-icon{ width:52px; height:52px; border-radius:50%; background:#fff !important; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 4px 12px rgba(0,0,0,.3); flex:none; border:none !important; }
.odoo-list-panel .odoo-list-head h2{ color:#fff !important; margin:0; font-size:1.3rem; font-weight:900; text-shadow:0 2px 4px rgba(0,0,0,.3); }
.odoo-list-panel .odoo-list-count{ display:inline-block; margin-top:4px; padding:2px 10px; border-radius:8px; background:rgba(255,255,255,.2) !important; color:#fff !important; font-weight:800; }
.odoo-list-panel .odoo-list-sub{ border-radius:14px; padding:10px 14px; background: var(--surface-2); border:1px solid var(--border); font-size:.84rem; }
.odoo-list-panel .sections-back-btn{ margin-bottom:10px; }
.surtidos-date-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; background: var(--surface-2); border:1px solid var(--border); margin:10px 0; }
.surtidos-date-filter label{ font-weight:900; font-size:.78rem; }
.surtidos-date-filter input[type=date]{ border-radius:8px !important; }

.odoo-list-panel .surtido-card, .odoo-list-panel .prov-sku-item{
  border-radius:18px !important; border:2px solid var(--border) !important; background: linear-gradient(135deg, var(--surface-2), var(--surface)) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.22); transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; margin-bottom:10px;
}
.odoo-list-panel .surtido-card:hover, .odoo-list-panel .prov-sku-item:hover{ transform: translateY(-2px); border-color: var(--accent) !important; box-shadow:0 8px 20px rgba(0,0,0,.32); }
.surtido-card-pedido{ font-size:1.15rem; font-weight:900; color: var(--accent); }
.surtido-card-badge{ border-radius:8px !important; padding:3px 10px !important; font-weight:900; border-width:2px !important; }
.surtido-card-meta{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.surtido-card-meta span{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:8px; background: var(--surface); border:1px solid var(--border); font-size:.78rem; }
.surtido-progress-bar{ height:10px !important; border-radius:8px !important; background: var(--surface) !important; overflow:hidden; border:1px solid var(--border); }
.surtido-progress-fill{ border-radius:8px; background: linear-gradient(90deg, var(--accent), var(--accent2), var(--ok, #22c55e)) !important; }
.odoo-list-arrow, .prov-sku-flecha{ width:36px; height:36px; border-radius:50%; display:inline-flex !important; align-items:center; justify-content:center; background: var(--surface); border:2px solid var(--border); color: var(--accent) !important; font-weight:900; flex:none; }
.odoo-list-panel .surtido-card:hover .odoo-list-arrow, .odoo-list-panel .prov-sku-item:hover .prov-sku-flecha{ background: var(--accent); color:#04211c !important; border-color: var(--accent); }

#favoritosPanel .fav-item.vencido{ border-color:#f59e0b !important; background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 14%, var(--surface-2)), var(--surface)) !important; }
#favoritosPanel .fav-tipo{ border-radius:8px; padding:4px 10px; font-weight:900; background: linear-gradient(100deg, #ec4899, #9d174d); color:#fff; border:none; }
#favoritosPanel .prov-sku-nombre{ font-weight:900; font-size:1.02rem; }
#favoritosPanel .fav-nota{ display:block; margin-top:4px; padding:6px 10px; border-radius:12px; background: color-mix(in srgb, #ec4899 10%, var(--surface)); border-left:3px solid #ec4899; font-style:italic; }
#favoritosPanel .fav-recordar{ display:inline-block; margin-top:6px; padding:3px 10px; border-radius:8px; background: var(--surface); border:1px solid var(--border); font-weight:800; font-size:.76rem; }
#favoritosPanel .fav-recordar.vencido{ background:#f59e0b; color:#1f1300; border-color:#f59e0b; }
.prov-sku-op{ width:34px; height:34px; border-radius:50% !important; border:2px solid var(--border) !important; background: var(--surface) !important; }
.prov-sku-op:hover{ border-color: var(--accent) !important; }
.prov-sku-op-borrar:hover{ border-color:#ef4444 !important; color:#ef4444; }

/* ---------- Temas y Mantenimiento (ventanas) con la franja de color ---------- */
.temas-head, .mant-head{
  padding:16px 18px !important; margin:-4px -4px 14px !important; border-radius:18px; color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.temas-head{ background: radial-gradient(120% 140% at 0% 0%, #c084fc 0%, #7c3aed 45%, #2e1065 100%); }
.mant-head{ background: radial-gradient(120% 140% at 0% 0%, #fbbf24 0%, #d97706 45%, #78350f 100%); }
.temas-head-icon, .mant-head-icon{ width:48px; height:48px; border-radius:50%; background:#fff !important; display:inline-flex; align-items:center; justify-content:center; font-size:1.4rem; box-shadow:0 4px 12px rgba(0,0,0,.3); border:none !important; }
.temas-head-nombre, .mant-head-nombre{ color:#fff !important; font-weight:900; font-size:1.2rem; text-shadow:0 2px 4px rgba(0,0,0,.3); }
.temas-head-sub, .mant-head-sub{ color:rgba(255,255,255,.9) !important; }
.temas-estado, .mant-estado{ border-radius:8px !important; background:rgba(255,255,255,.2) !important; color:#fff !important; border:1px solid rgba(255,255,255,.4) !important; font-weight:900; }
.temas-switch, .mant-switch{ border-radius:18px !important; border:2px solid var(--border) !important; background: linear-gradient(135deg, var(--surface-2), var(--surface)) !important; }
.tema-card{ border-radius:18px !important; transition: transform .12s ease, box-shadow .12s ease; }
.tema-card:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.tema-card-emblema{ border-radius:50%; }
.mant-previo, .mant-nota, .mant-campo textarea{ border-radius:16px !important; }
.mant-acciones .btn, .temas-modal .btn{ border-radius:8px !important; min-height:44px; }

/* ---------- Pantalla de mantenimiento (la que ve el equipo) ---------- */
.alba-mant-overlay:not(.alba-baja):not(.alba-elim) .alba-mant-caja{
  border-radius:24px !important; border:none !important; padding:0 0 22px !important; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.alba-mant-overlay:not(.alba-baja):not(.alba-elim) .alba-mant-icono{
  margin:0 0 16px; padding:26px 0 22px;
  background: radial-gradient(120% 140% at 0% 0%, #fbbf24 0%, #d97706 45%, #78350f 100%);
}
.alba-mant-overlay:not(.alba-baja):not(.alba-elim) .alba-mant-engrane{
  width:84px; height:84px; margin:0 auto; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:2.6rem; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.alba-mant-overlay:not(.alba-baja):not(.alba-elim) .alba-mant-saludo{ font-size:1.35rem; font-weight:900; padding:0 22px; }
.alba-mant-overlay:not(.alba-baja):not(.alba-elim) .alba-mant-texto{ padding:0 24px; line-height:1.6; }
.alba-mant-overlay:not(.alba-baja):not(.alba-elim) .alba-mant-espera{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; padding:8px 16px; border-radius:8px; background: var(--surface-2); border:1px solid var(--border); }

/* "Transferencias Entre Almacenes" en la ficha (V2.100.0). */
.entre-alm-toggle{ margin-top:10px; }
.entre-alm{ display:flex; flex-direction:column; gap:8px; margin:8px 0 4px; }
/* Rediseno V2.100.1: cifras arriba, rutas tocables con barrita, y linea de tiempo por mes. Cada ruta
   tiene su color (ea-c0..3, los cuatro acentos del tema) y sus traslados lo repiten a la izquierda. */
.entre-alm{ gap:12px; }
.ea-c0{ --ea: var(--accent); } .ea-c1{ --ea: var(--accent2); } .ea-c2{ --ea: var(--accent3); } .ea-c3{ --ea: var(--accent4); }
.ea-vacio{ padding:14px 16px; border-radius: var(--radius, 10px); border:1px dashed var(--border); color: var(--text-dim); font-size:.84rem; }
.ea-cab{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
.ea-cab-dato{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border-radius: var(--radius, 10px);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); border:1px solid var(--border); }
.ea-cab-dato b{ font-size:1.25rem; font-weight:900; color: var(--text); line-height:1.1; }
.ea-cab-dato span{ font-size:.68rem; color: var(--text-dim); text-transform:uppercase; letter-spacing:.4px; text-align:center; }
.ea-rutas{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap:8px; }
.ea-ruta{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:7px; padding:10px 12px;
  border-radius: var(--radius, 10px); background: var(--surface); border:1px solid var(--border); border-top:3px solid var(--ea, var(--border));
  transition: border-color .15s, box-shadow .15s, transform .1s; }
.ea-ruta:hover{ transform: translateY(-1px); border-color: var(--ea, var(--accent)); }
.ea-ruta.activo{ box-shadow: 0 0 0 2px var(--ea, var(--accent)); }
.ea-ruta-todas{ grid-column:1 / -1; padding:7px 12px; border-top-width:1px; flex-direction:row; align-items:center; justify-content:center; gap:8px; font-weight:800; font-size:.86rem; color: var(--text); --ea: var(--text-dim); }
.ea-ruta-todas small{ padding:1px 8px; border-radius:8px; background: var(--surface-2); font-size:.72rem; }
.ea-ruta-par, .ea-par{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ea-ruta-par i, .ea-par i{ font-style:normal; color: var(--ea, var(--accent)); font-weight:900; }
.ea-alm{ padding:3px 9px; border-radius:7px; font-size:.78rem; font-weight:800; color: var(--text); background: var(--surface-2); border:1px solid var(--border); }
.ea-alm-fuera{ border-style:dashed; font-weight:700; color: var(--text-dim); }
.ea-ruta-num{ font-size:.74rem; color: var(--text-dim); }
.ea-ruta-num b{ color: var(--ea, var(--text)); }
.ea-ruta-barra{ display:block; height:4px; border-radius:8px; background: var(--surface-2); overflow:hidden; }
.ea-ruta-barra > span{ display:block; height:100%; border-radius:inherit; background: var(--ea, var(--accent)); }
.ea-nota{ font-size:.72rem; color: var(--text-dim); }
.ea-lista{ display:flex; flex-direction:column; gap:14px; }
.ea-mes{ display:flex; flex-direction:column; gap:7px; }
.ea-mes-tit{ align-self:flex-start; padding:3px 11px; border-radius:8px; font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; color: var(--text); background: var(--surface-2); border:1px solid var(--border); }
.ea-item{ display:flex; align-items:stretch; gap:12px; padding:10px 12px; border-radius: var(--radius, 10px);
  background: var(--surface); border:1px solid var(--border); border-left:4px solid var(--ea, var(--accent)); }
.ea-fecha{ flex:none; width:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-radius:8px; background: color-mix(in srgb, var(--ea, var(--accent)) 14%, var(--surface-2)); padding:6px 2px; }
.ea-fecha b{ font-size:1.25rem; font-weight:900; line-height:1; color: var(--text); }
.ea-fecha span{ font-size:.64rem; font-weight:800; text-transform:uppercase; color: var(--text-dim); }
.ea-fecha small{ font-size:.6rem; color: var(--text-dim); }
.ea-centro{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; justify-content:center; }
.ea-ubic{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-family: var(--font-code); font-size:.76rem; color: var(--text); }
.ea-ubic span{ overflow-wrap:anywhere; }
.ea-ubic i{ font-style:normal; color: var(--text-dim); }
.ea-pie{ display:flex; flex-wrap:wrap; gap:3px 14px; font-size:.7rem; color: var(--text-dim); }
.ea-cant{ flex:none; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; }
.ea-cant b{ font-family: var(--font-code); font-size:1.15rem; font-weight:900; color: var(--ea, var(--accent)); line-height:1.1; }
.ea-cant span{ font-size:.64rem; color: var(--text-dim); text-transform:uppercase; }
@media (max-width: 480px){ .ea-fecha{ width:44px; } .ea-item{ gap:9px; padding:9px 10px; } .ea-cab-dato b{ font-size:1.05rem; } }

/* "Mandar a mi otro aparato" (V2.101.0). */
.mandar-btn span{ font-size:.9rem; line-height:1; }
.mandar-lista{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.mandar-op{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; padding:11px 13px;
  border-radius: var(--radius, 10px); background: var(--surface-2); border:1px solid var(--border); }
.mandar-op:hover, .mandar-op:focus-visible{ border-color: var(--accent); }
.mandar-op-icono{ font-size:1.6rem; line-height:1; }
.mandar-op-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mandar-op-txt b{ color: var(--text); font-size:.95rem; }
.mandar-op-txt small{ color: var(--text-dim); font-size:.74rem; overflow-wrap:anywhere; }
.mandar-recibido{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:1300; max-width:calc(100% - 24px);
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius: var(--radius-lg, 12px);
  background: var(--surface); border:2px solid var(--accent); box-shadow:0 14px 34px rgba(0,0,0,.5); }
.mandar-recibido-icono{ font-size:1.5rem; }
.mandar-recibido-txt{ display:flex; flex-direction:column; min-width:0; }
.mandar-recibido-txt small{ color: var(--text-dim); font-size:.72rem; }
.mandar-recibido-txt b{ color: var(--text); font-size:.86rem; overflow-wrap:anywhere; }
.mandar-recibido-x{ all:unset; cursor:pointer; padding:4px 6px; color: var(--text-dim); }

/* Panel "-sql" del estado de Supabase (V2.102.0). Ventana con zona que desplaza por dentro. */
.sql-modal{ width:min(720px, 100%); overflow:hidden; display:flex; flex-direction:column; }
.sql-cuerpo{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding-bottom:4px; }
.sql-proyecto{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius: var(--radius, 10px);
  background: var(--surface-2); border:1px solid var(--border); }
.sql-proyecto b{ display:block; font-size:1.25rem; font-weight:900; color: var(--text); }
.sql-proyecto small{ color: var(--text-dim); font-family: var(--font-code); font-size:.72rem; overflow-wrap:anywhere; }
.sql-estado-ok{ flex:none; color:#3ecf8e; font-weight:800; font-size:.8rem; padding:4px 10px; border-radius:8px; border:1px solid color-mix(in srgb, #3ecf8e 50%, transparent); }
.sql-seccion-tit{ font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color: var(--text-dim); margin-top:4px; }
.sql-usos{ border-radius: var(--radius, 10px); border:1px solid var(--border); overflow:hidden; }
.sql-uso{ display:flex; align-items:center; gap:10px; padding:10px 13px; background: var(--surface); }
.sql-uso + .sql-uso{ border-top:1px solid var(--border); }
.sql-anillo{ flex:none; width:16px; height:16px; border-radius:50%; position:relative;
  background: conic-gradient(var(--sql-c) calc(var(--p, 0) * 1%), var(--surface-2) 0); }
.sql-anillo::after{ content:''; position:absolute; inset:3px; border-radius:50%; background: var(--surface); }
.sql-bajo{ --sql-c:#3ecf8e; } .sql-medio{ --sql-c: var(--warn); } .sql-alto{ --sql-c: var(--err); }
.sql-nada{ --sql-c: transparent; border:2px solid var(--border); background:none; width:14px; height:14px; }
.sql-nada::after{ display:none; }
.sql-uso-nombre{ flex:1; min-width:0; color: var(--text); font-size:.84rem; }
.sql-uso-valor{ flex:none; color: var(--text-dim); font-size:.82rem; text-align:right; }
.sql-uso-valor b{ color: var(--text); }
.sql-uso-valor small{ font-size:.7rem; }
.sql-uso-liga{ flex:none; font-size:.76rem; font-weight:700; color: var(--accent); text-decoration:none; }
.sql-tarjetas{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap:8px; }
.sql-tarjeta{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius: var(--radius, 10px); background: var(--surface); border:1px solid var(--border); }
.sql-tarjeta-icono{ flex:none; width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  background: var(--surface-2); border:1px solid var(--border); }
.sql-tarjeta-txt{ display:flex; flex-direction:column; min-width:0; }
.sql-tarjeta-txt small{ font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color: var(--text-dim); font-family: var(--font-code); }
.sql-tarjeta-txt b{ color: var(--text); font-size:.9rem; overflow-wrap:anywhere; }
.sql-tarjeta-txt em{ font-style:normal; font-size:.7rem; color: var(--text-dim); }
.sql-db{ border-radius: var(--radius, 10px); border:1px solid var(--border); background: var(--surface); overflow:hidden; }
.sql-db-cab{ display:flex; align-items:center; gap:11px; padding:12px 13px; }
.sql-db-cab > div{ flex:1; min-width:0; display:flex; flex-direction:column; }
.sql-db-cab b{ color: var(--text); font-size:.9rem; }
.sql-db-cab small{ color: var(--text-dim); font-size:.74rem; }
.sql-db-icono{ flex:none; width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:#1f7a52; }
.sql-db-pie{ display:flex; flex-wrap:wrap; gap:4px 16px; padding:9px 13px; border-top:1px solid var(--border); font-size:.76rem; color: var(--text-dim); }
.sql-db-pie b{ color: var(--text); }
.sql-tablas{ display:flex; flex-direction:column; gap:5px; }
.sql-tabla{ display:grid; grid-template-columns: 1fr auto auto; grid-template-areas: "n f p" "b b b"; gap:3px 12px; align-items:center;
  padding:7px 11px; border-radius:8px; background: var(--surface); border:1px solid var(--border); }
.sql-tabla-nombre{ grid-area:n; font-family: var(--font-code); font-size:.78rem; color: var(--text); overflow-wrap:anywhere; }
.sql-tabla-filas{ grid-area:f; font-size:.7rem; color: var(--text-dim); }
.sql-tabla-peso{ grid-area:p; font-weight:800; font-size:.8rem; color: var(--accent); }
.sql-tabla-barra{ grid-area:b; display:block; height:3px; border-radius:8px; background: var(--surface-2); overflow:hidden; }
.sql-tabla-barra > span{ display:block; height:100%; background: var(--accent); }
.sql-nota{ font-size:.72rem; color: var(--text-dim); line-height:1.5; }
.sql-nota .btn{ margin-left:6px; padding:3px 10px; font-size:.72rem; }

/* -sql: que nada dentro de la zona que desplaza se encoja hasta desaparecer, y la ventana mas ancha. */
.sql-cuerpo > *{ flex-shrink:0; }
.ml-modal.sql-modal{ width:720px; max-width:100%; }

/* Pantalla "Enviando / Recibiendo" entre mis aparatos (V2.102.1). */
.mandar-carga{ position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center; padding:16px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 22%, rgba(0,0,0,.72)), rgba(0,0,0,.86));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity:0; transition: opacity .25s ease; }
.mandar-carga.mc-visible{ opacity:1; }
.mc-tarjeta{ width:min(400px, 100%); display:flex; flex-direction:column; align-items:center; gap:10px; padding:26px 22px 20px;
  border-radius: var(--radius-lg, 16px); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 40px color-mix(in srgb, var(--accent) 25%, transparent);
  transform: translateY(12px) scale(.97); transition: transform .3s cubic-bezier(.2,.9,.3,1.2); }
.mc-visible .mc-tarjeta{ transform:none; }
.mc-escena{ width:100%; display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.mc-aparato{ flex:none; width:70px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.mc-aparato span{ width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.9rem;
  background: var(--surface-2); border:1px solid var(--border); }
.mc-aparato small{ font-size:.66rem; color: var(--text-dim); text-align:center; }
.mc-a span{ border-color: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: mcLatido 1.4s ease-out infinite; }
.mc-haz{ flex:1; position:relative; height:6px; border-radius:8px; margin-bottom:18px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 6px, transparent 6px 12px); }
.mc-haz i{ position:absolute; top:50%; left:0; width:12px; height:12px; margin-top:-6px; border-radius:4px; background: var(--accent);
  box-shadow: 0 0 12px var(--accent); animation: mcViaje 1.3s cubic-bezier(.5,0,.5,1) infinite; opacity:0; }
.mc-haz i:nth-child(2){ animation-delay:.32s; } .mc-haz i:nth-child(3){ animation-delay:.64s; } .mc-haz i:nth-child(4){ animation-delay:.96s; }
.mc-ok{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0); width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:900; color:#04211c; background: var(--accent);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.4); }
.mc-listo .mc-haz i{ animation:none; opacity:0; }
.mc-listo .mc-haz{ background: color-mix(in srgb, var(--accent) 60%, transparent); }
.mc-listo .mc-ok{ transform:translate(-50%,-50%) scale(1); }
.mc-listo .mc-a span{ animation:none; }
.mc-titulo{ font-weight:900; font-size:1.08rem; color: var(--text); text-align:center; }
.mc-que{ font-family: var(--font-code); font-size:.78rem; color: var(--accent); text-align:center; overflow-wrap:anywhere; max-width:100%; }
.mc-barra{ width:100%; height:5px; border-radius:8px; overflow:hidden; background: var(--surface-2); margin-top:4px; }
.mc-barra span{ display:block; height:100%; width:40%; border-radius:inherit; background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: mcBarra 1.1s ease-in-out infinite; }
.mc-listo .mc-barra span{ width:100%; animation:none; background: var(--accent); }
.mc-paso{ font-size:.76rem; color: var(--text-dim); min-height:1.2em; }
@keyframes mcViaje{ 0%{ left:0; opacity:0; transform:scale(.6); } 15%{ opacity:1; transform:scale(1); } 85%{ opacity:1; } 100%{ left:calc(100% - 12px); opacity:0; transform:scale(.6); } }
@keyframes mcLatido{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100%{ box-shadow:0 0 0 14px transparent; } }
@keyframes mcBarra{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(260%); } }
@media (prefers-reduced-motion: reduce){ .mc-haz i, .mc-a span, .mc-barra span{ animation-duration:2.6s; } }

/* "Mandar" flotante (V2.102.2): abajo a la derecha, encima del dock, siempre a la vista. */
.mandar-fab{ all:unset; box-sizing:border-box; position:fixed; right:18px; bottom:132px; z-index:900; cursor:pointer;
  display:flex; align-items:center; gap:10px; padding:8px 16px 8px 9px; border-radius:8px; overflow:hidden;
  color:#04211c; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent2)));
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent);
  opacity:0; transform: translateY(16px) scale(.9); pointer-events:none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.9,.3,1.25), box-shadow .2s ease; }
.mandar-fab.mf-visible{ opacity:1; transform:none; pointer-events:auto; }
.mandar-fab:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.25) inset, 0 0 30px color-mix(in srgb, var(--accent) 60%, transparent); }
.mandar-fab:active{ transform: scale(.96); }
.mandar-fab:focus-visible{ outline:3px solid var(--text); outline-offset:3px; }
.mandar-fab::after{ content:''; position:absolute; top:0; bottom:0; width:40%; left:-60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg);
  animation: mfBrillo 5s ease-in-out infinite; }
.mandar-fab.mf-nuevo::after{ animation: mfBrillo .9s ease-out 1, mfBrillo 5s ease-in-out 1.2s infinite; }
.mf-escena{ display:flex; align-items:center; gap:3px; padding:5px 8px; border-radius:8px; background: rgba(4,33,28,.16); }
.mf-ap{ font-size:1.15rem; line-height:1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.mf-flecha{ display:flex; gap:2px; }
.mf-flecha i{ width:4px; height:4px; border-radius:50%; background:#04211c; opacity:.25; animation: mfPunto 1.2s ease-in-out infinite; }
.mf-flecha i:nth-child(2){ animation-delay:.2s; } .mf-flecha i:nth-child(3){ animation-delay:.4s; }
.mf-txt{ display:flex; flex-direction:column; line-height:1.05; }
.mf-txt small{ font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; opacity:.75; }
.mf-txt b{ font-size:.92rem; font-weight:900; }
@keyframes mfPunto{ 0%, 100%{ opacity:.25; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }
@keyframes mfBrillo{ 0%, 70%{ left:-60%; } 100%{ left:130%; } }
@media (max-width: 600px){
  .mandar-fab{ right:8px; bottom:104px; padding:7px 13px 7px 8px; gap:8px; }
  .mf-txt b{ font-size:.84rem; }
}

/* Celular: el boton flotante va compacto (solo los aparatos) para no tapar; el texto se asoma unos
   segundos cuando se abre algo nuevo (.mf-abierto, ver mandarFlotante). */
.mf-txt{ max-width:140px; overflow:hidden; white-space:nowrap; transition: max-width .35s ease, opacity .25s ease; }
@media (max-width: 600px){
  .mandar-fab:not(.mf-abierto){ padding:7px; gap:0; }
  .mandar-fab:not(.mf-abierto) .mf-txt{ max-width:0; opacity:0; }
}

/* Dispositivos: lapiz para ponerle nombre al aparato (V2.103.0). */
.disp-alias-btn{ all:unset; cursor:pointer; margin-left:4px; padding:1px 5px; border-radius:6px; font-size:.8rem; opacity:.65; }
.disp-alias-btn:hover, .disp-alias-btn:focus-visible{ opacity:1; background: var(--surface-2); }

/* -sql: lo que viene de la cuenta de Supabase (V2.104.0). */
.sql-cuenta{ display:flex; flex-direction:column; gap:8px; }
.sql-mal{ color: var(--err) !important; }
.sql-servicios{ display:flex; flex-wrap:wrap; gap:7px; }
.sql-servicio{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:8px; font-size:.78rem; font-weight:700;
  color: var(--text); background: var(--surface); border:1px solid var(--border); }
.sql-servicio i{ width:8px; height:8px; border-radius:50%; background:#3ecf8e; box-shadow:0 0 8px #3ecf8e; }
.sql-servicio.sql-mal i{ background: var(--err); box-shadow:0 0 8px var(--err); }
.sql-sub{ font-size:.72rem; color: var(--text-dim); margin-top:2px; }
.sql-dias{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; padding:10px; border-radius: var(--radius, 10px); background: var(--surface); border:1px solid var(--border); }
.sql-dia{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.sql-dia b{ font-size:.7rem; color: var(--text); }
.sql-dia small{ font-size:.62rem; color: var(--text-dim); white-space:nowrap; }
.sql-dia-barra{ width:100%; max-width:34px; height:70px; display:flex; align-items:flex-end; border-radius:6px; background: var(--surface-2); overflow:hidden; }
.sql-dia-barra > span{ display:block; width:100%; border-radius:6px 6px 0 0; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 50%, transparent)); }
.sql-tabla-nombre small{ color: var(--text-dim); font-size:.66rem; }
.sql-err{ font-style:normal; color: var(--err); }

/* La lupa con la misma forma que el buscador (pedido de Manuel: se veia cuadrada dentro de la
   capsula). Va al final para ganarle a ".alba-banner .main-search #searchBtn" de arriba. */
.alba-banner .main-search #searchBtn{ border-radius:8px; }

/* Celular: el boton de Mandar solo circular y pegado a la esquina (pedido de Manuel). Se queda el
   aparato al que va, con un latido suave; sin texto ni flechita (ya no se estira). */
@media (max-width: 600px){
  .mandar-fab, .mandar-fab.mf-abierto{ width:54px; height:54px; padding:0; gap:0; justify-content:center; border-radius:50%;
    right:12px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .mandar-fab .mf-txt{ display:none; }
  .mandar-fab .mf-escena{ padding:0; background:none; }
  .mandar-fab .mf-flecha, .mandar-fab .mf-escena .mf-ap:first-child{ display:none; }
  .mandar-fab .mf-ap{ font-size:1.6rem; }
  .mandar-fab.mf-visible{ animation: mfLatido 2.6s ease-in-out infinite; }
}
@keyframes mfLatido{ 0%, 100%{ box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50%{ box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 8px transparent; } }

/* ===========================================================================
   RACK VIRTUAL EN 3D (pedido de Manuel): estructura industrial con perspectiva.
   Luz de arriba a la izquierda: caras de arriba (.r3-t) claras, frentes (.r3-f) medios y
   costados (.r3-s) oscuros. Postes amarillos con ranuras, vigas naranjas con pernos y etiqueta
   con codigo de barras, tarimas de madera por listones y carga variada.
   =========================================================================== */
.r3-escena{ position:relative; perspective:1600px; perspective-origin:30% 0%; padding:14px 18px 34px; margin:6px -6px 0; overflow-x:auto; overflow-y:visible;
  border-radius:20px; background:
    radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #15181d, #0b0d10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.r3-rejilla.rack-rejilla{ gap:0 !important; transform-style:preserve-3d; transform: rotateX(8deg) rotateY(16deg); transform-origin:50% 100%;
  grid-template-columns: auto repeat(var(--cols), minmax(92px, 1fr)) !important; padding:0 8px 0 0; overflow:visible; }
.r3-rejilla .rack-altura{ transform: translateZ(26px); padding-right:12px; }
.r3-rejilla .rack-altura-num{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#f59e0b; color:#1c1203 !important; box-shadow:0 3px 8px rgba(0,0,0,.5); }

.rack-celda.r3{ position:relative; display:block; min-height:132px; padding:0; border:none !important; border-radius:0 !important; background:transparent !important;
  transform-style:preserve-3d; overflow:visible; transition:none; }
.rack-celda.r3:hover{ transform:none; }

/* Fondo del tramo: malla de la pared del fondo, para dar profundidad. */
.rack-celda.r3::before{ content:''; position:absolute; inset:0 0 0 0; transform: translateZ(-34px);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 12px), linear-gradient(180deg, #1b1f26, #12151a); }

/* Postes: cubo amarillo (frente + costado) con ranuras de enganche. */
.r3-poste{ position:absolute; top:0; bottom:-2px; width:9px; transform-style:preserve-3d; z-index:3;
  background: repeating-linear-gradient(180deg, #facc15 0 7px, #1f1503 7px 10px, #facc15 10px 14px),
              linear-gradient(90deg, #fde047, #eab308); background-blend-mode:multiply;
  box-shadow: inset -2px 0 0 rgba(0,0,0,.25), inset 2px 0 0 rgba(255,255,255,.35); }
.r3-poste-izq{ left:-1px; } .r3-poste-der{ right:-1px; }
.r3-poste i{ position:absolute; top:0; bottom:0; left:100%; width:26px; transform-origin:left; transform: rotateY(90deg);
  background: repeating-linear-gradient(180deg, #a16207 0 7px, #241703 7px 10px, #a16207 10px 14px); }

/* Viga: frente naranja con metal cepillado, cara de arriba clara, pernos en los extremos. */
.r3-viga{ position:absolute; left:4px; right:4px; bottom:0; height:16px; z-index:4; transform-style:preserve-3d; transform: translateZ(10px);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), linear-gradient(180deg, #fb923c, #ea580c 55%, #c2410c);
  box-shadow: 0 4px 6px rgba(0,0,0,.45); border-radius:2px; }
.r3-viga::before{ content:''; position:absolute; left:0; right:0; top:0; height:26px; transform-origin:top; transform: rotateX(90deg);
  background: linear-gradient(180deg, #fdba74, #f97316); }
.r3-perno{ position:absolute; top:4px; width:7px; height:7px; border-radius:50%; background: radial-gradient(circle at 35% 35%, #f8fafc, #64748b 60%, #1e293b);
  box-shadow: 0 1px 1px rgba(0,0,0,.6); }
.r3-perno-i{ left:3px; } .r3-perno-d{ right:3px; }

/* Etiqueta de la viga (lo que se lee): blanca, texto oscuro, con codigo de barras. */
.r3-etq-viga{ position:absolute; left:50%; bottom:1px; transform: translate(-50%, 0) translateZ(12px); z-index:6; display:flex; align-items:center; gap:4px;
  padding:1px 6px; border-radius:3px; background:#f8fafc; color:#111827; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.5); line-height:1.25; }
.r3-etq-viga .rack-celda-mod{ color:#111827 !important; font-size:.62rem; }
.r3-etq-viga .rack-celda-n{ color:#c2410c !important; font-size:.72rem; }
.r3-etq-viga .rack-celda-pz{ color:#374151 !important; font-size:.56rem; }
.r3-etq-viga .rack-celda-vacio{ color:#6b7280 !important; opacity:1; font-size:.56rem; }
.r3-barras{ width:16px; height:10px; background: repeating-linear-gradient(90deg, #111 0 1px, #fff 1px 2px, #111 2px 4px, #fff 4px 5px); }

/* Tarima de madera: listones con veta y huecos, cara de arriba clara. */
.r3-tarima{ position:absolute; left:12%; right:12%; bottom:16px; height:11px; z-index:2; transform-style:preserve-3d; transform: translateZ(2px);
  transition: transform .2s ease; }
.r3-tarima-f{ position:absolute; inset:0;
  background: repeating-linear-gradient(90deg, #a16207 0 20%, #2b1b07 20% 24%, #b7791f 24% 46%, #2b1b07 46% 50%, #a16207 50% 74%, #2b1b07 74% 78%, #92400e 78% 100%),
              repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px); background-blend-mode:multiply; border-radius:1px; }
.r3-tarima-t{ position:absolute; left:0; right:0; top:0; height:30px; transform-origin:top; transform: rotateX(90deg);
  background: repeating-linear-gradient(90deg, #d4a15a 0 14%, #3b2508 14% 17%, #e0b26a 17% 31%, #3b2508 31% 34%); }
.r3-sombra{ position:absolute; left:6%; right:6%; bottom:12px; height:12px; border-radius:50%; background: rgba(0,0,0,.55); filter: blur(5px); transform: translateZ(-6px); z-index:1; }

/* Carga: cajas en 3D con luz. */
.r3-carga{ position:absolute; left:15%; right:15%; bottom:27px; height:68px; display:flex; align-items:flex-end; gap:4px; z-index:3;
  transform-style:preserve-3d; transform: translateZ(4px); transition: transform .2s ease, filter .2s ease; }
.r3-caja{ position:relative; flex:1 1 0; height:46px; transform-style:preserve-3d; }
.r3-caja.r3-alta{ height:64px; }
.r3-caja i{ position:absolute; display:block; }
.r3-f{ inset:0; }
.r3-t{ left:0; right:0; top:0; height:24px; transform-origin:top; transform: rotateX(90deg); }
.r3-s{ top:0; bottom:0; left:100%; width:24px; transform-origin:left; transform: rotateY(90deg); }
/* Carton */
.r3-carton .r3-f{ background: linear-gradient(180deg, #c99558, #a87138); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.r3-carton .r3-t{ background: linear-gradient(90deg, #e3b57a, #d4a265); }
.r3-carton .r3-s{ background: linear-gradient(90deg, #7c4f22, #5f3b17); }
.r3-cinta{ left:44%; width:12%; top:0; height:40%; background: rgba(214,190,140,.85); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.r3-etq-caja{ right:10%; bottom:16%; width:28%; height:22%; background:
  repeating-linear-gradient(90deg, #111 0 1px, #fff 1px 2px, #111 2px 3px, #fff 3px 5px) 0 60%/100% 45% no-repeat, #fff; border-radius:1px; }
/* Contenedor de plastico con rejilla */
.r3-plastico .r3-f{ background:
  repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, transparent 2px 8px), repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 2px, transparent 2px 8px),
  linear-gradient(180deg, #3b82f6, #1d4ed8); border-radius:3px 3px 1px 1px; }
.r3-plastico .r3-t{ background: linear-gradient(90deg, #93c5fd, #60a5fa); }
.r3-plastico .r3-s{ background: linear-gradient(90deg, #1e3a8a, #172554); }
.r3-rejas{ left:0; right:0; top:0; height:7px; background: linear-gradient(180deg, #60a5fa, #2563eb); border-radius:3px 3px 0 0; }

/* Interaccion: al pasar el mouse la carga y su tarima se levantan con contorno de seleccion. */
.rack-celda.r3:hover .r3-carga, .rack-celda.r3:focus-visible .r3-carga{ transform: translateZ(10px) translateY(-7px); filter: drop-shadow(0 0 6px var(--accent)) brightness(1.08); }
.rack-celda.r3:hover .r3-tarima{ transform: translateZ(6px) translateY(-3px); }
.rack-celda.r3.activo .r3-carga, .rack-celda.r3.activo .r3-tarima{ filter: drop-shadow(0 0 7px var(--accent)) drop-shadow(0 0 2px #fff); }
.rack-celda.r3.activo .r3-etq-viga{ background: var(--accent); }
.rack-celda.r3.activo .r3-etq-viga *{ color:#04211c !important; }
.rack-celda.r3.rack-vacio .r3-tarima{ opacity:.95; }
.rack-celda.r3.rack-inexistente{ opacity:.6; }

/* Piso con sombra para que el rack no flote. */
.r3-piso{ position:absolute; left:4%; right:4%; bottom:10px; height:26px; border-radius:50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%); filter: blur(4px); pointer-events:none; }

@media (max-width:600px){
  .r3-rejilla.rack-rejilla{ transform: rotateX(6deg) rotateY(10deg); grid-template-columns: auto repeat(var(--cols), minmax(78px, 1fr)) !important; }
  .rack-celda.r3{ min-height:118px; }
}
@media (prefers-reduced-motion: reduce){ .r3-carga, .r3-tarima{ transition:none; } }
/* -rack: escoger almacen. */
.rack-elegir{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; margin:4px 0 6px; }
.rack-elegir-op{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:18px; text-align:left; cursor:pointer; font:inherit;
  border:2px solid var(--border); background: linear-gradient(135deg, var(--surface-2), var(--surface)); color: var(--text);
  box-shadow:0 3px 10px rgba(0,0,0,.22); transition: transform .12s ease, border-color .12s ease; }
.rack-elegir-op:hover{ transform: translateY(-2px); border-color:#f97316; }
.rack-elegir-op.vacio{ opacity:.6; }
.rack-elegir-cod{ flex:none; width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.05rem;
  color:#1c1203; background: repeating-linear-gradient(180deg, #facc15 0 7px, #b45309 7px 9px); box-shadow: inset -4px 0 0 rgba(0,0,0,.2); }
.rack-elegir-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rack-elegir-txt b{ font-weight:900; font-size:.88rem; line-height:1.2; }
.rack-elegir-txt small{ color: var(--text-dim); font-weight:700; font-size:.74rem; }
.rack-elegir-flecha{ flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--border); color:#f97316; font-weight:900; }
/* Letrero de hueco libre en el rack 3D. */
.r3-libre{ position:absolute; left:50%; top:42%; z-index:5; transform: translate(-50%, -50%) translateZ(16px); display:flex; flex-direction:column; align-items:center;
  padding:5px 10px; border-radius:12px; border:2px dashed #4ade80; background: rgba(20,83,45,.85); color:#fff; text-align:center; white-space:nowrap;
  box-shadow:0 0 14px rgba(74,222,128,.35); pointer-events:none; animation: r3LibreLuz 2.4s ease-in-out infinite; }
.r3-libre b{ font-size:.78rem; font-weight:900; letter-spacing:2px; }
.r3-libre small{ font-size:.55rem; font-weight:700; opacity:.85; }
.rack-celda.r3:hover .r3-libre{ border-style:solid; background: rgba(22,101,52,.95); }
@keyframes r3LibreLuz{ 0%,100%{ box-shadow:0 0 8px rgba(74,222,128,.25); } 50%{ box-shadow:0 0 18px rgba(74,222,128,.55); } }
@media (prefers-reduced-motion: reduce){ .r3-libre{ animation:none; } }
/* ---------- Rack de frente (plano), pedido de Manuel: sin perspectiva, con tarimas y carga variada ---------- */
.r3-escena{ perspective:none; }
.r3-rejilla.rack-rejilla{ transform:none !important; }
.r3-rejilla .rack-altura{ transform:none; }
.rack-celda.r3::before{ transform:none; }
.r3-poste i, .r3-viga::before, .r3-tarima-t, .r3-sombra, .r3-t, .r3-s{ display:none !important; }
.r3-viga, .r3-tarima, .r3-carga, .r3-etq-viga{ transform:none; }
.r3-etq-viga{ transform: translateX(-50%); }
.r3-carga{ left:12%; right:12%; gap:3px; }
.r3-caja{ box-shadow: 2px 0 0 rgba(0,0,0,.35), 0 -2px 0 rgba(255,255,255,.12) inset; border-radius:2px; }
/* Atado de tubos: circulos grises amarrados. */
.r3-tubos .r3-f{ background: radial-gradient(circle at 50% 50%, #e5e7eb 0 28%, #6b7280 30% 42%, transparent 44%) 0 0/12px 12px, linear-gradient(180deg, #9ca3af, #4b5563); border-radius:4px; }
.r3-amarre{ left:0; right:0; top:42%; height:4px; background:#dc2626; }
/* Cubeta: blanca con tapa y asa. */
.r3-cubeta .r3-f{ left:6%; right:6%; background: linear-gradient(90deg, #cbd5e1, #f8fafc 45%, #94a3b8); border-radius:3px 3px 10px 10px; clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); }
.r3-tapa{ left:0; right:0; top:-3px; height:6px; background: linear-gradient(180deg, #e2e8f0, #64748b); border-radius:3px; }
.r3-asa{ left:25%; right:25%; top:-10px; height:9px; border:2px solid #475569; border-bottom:none; border-radius:10px 10px 0 0; }
.r3-mas{ align-self:center; flex:none; padding:2px 6px; border-radius:8px; background: var(--accent); color:#04211c; font-weight:900; font-size:.62rem; }
/* Letrero LIBRE dentro del hueco, sin salirse ni chocar con el de al lado. */
.r3-libre{ left:10% !important; right:10%; top:38% !important; transform:none !important; max-width:80%; box-sizing:border-box; padding:4px 6px; overflow:hidden; }
.r3-libre b{ font-size:.66rem; letter-spacing:1px; }
.rack-celda.r3:hover .r3-carga{ transform: translateY(-6px); }
.rack-celda.r3:hover .r3-tarima{ transform: translateY(-2px); }
/* Aviso de la migracion a Odoo 19: morado de Odoo, texto blanco sobre la franja y texto del
   tema sobre la superficie (contraste siempre). */











/* Franja de la migracion, arriba de cada pantalla. */






@keyframes franjaMigraLuz{ 0%,100%{ box-shadow:0 4px 14px rgba(0,0,0,.3); } 50%{ box-shadow:0 4px 18px rgba(167,139,250,.55); } }

/* Pantallas que pueden fallar con Odoo 19: en ambar con texto oscuro (contraste). */
.pantallas-fallan{display:inline-block;padding:0 7px;margin:1px 0;border-radius:8px;background:#f59e0b;color:#1c1203;font-weight:900}
/* En el acceso (sobre todo en celular) la tarjeta no se aplasta: la columna del acceso la encogia. */




/* La franja de arriba del aviso sigue la curva de la tarjeta (las esquinas se salian). */


/* Avance de fotos (-foto y -foto -laina). */
.foto-avance{ display:flex; flex-direction:column; gap:10px; margin:0 0 14px; padding:14px 16px; border-radius:18px; background: var(--surface-2); border:1px solid var(--border); }
.foto-avance-txt{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.84rem; margin-bottom:5px; }
.foto-avance-txt b{ font-weight:900; }
.foto-avance-txt span{ color: var(--text-dim); font-weight:700; }
.foto-avance-txt strong{ color: var(--text); font-size:.95rem; }
.foto-avance-barra{ height:14px; border-radius:8px; overflow:hidden; background: var(--surface); border:1px solid var(--border); }
.foto-avance-barra span{ display:block; height:100%; border-radius:8px; min-width:4px; transition: width .6s ease; }
.foto-avance-fila.todo .foto-avance-barra span{ background: linear-gradient(90deg, #16a34a, #4ade80); }
.foto-avance-fila.prin .foto-avance-barra span{ background: linear-gradient(90deg, #1d4ed8, #60a5fa); }
.foto-avance-fila.adj .foto-avance-barra span{ background: linear-gradient(90deg, #7c3aed, #c4b5fd); }



/* Acceso (pedido de Manuel): solo la tarjeta de iniciar sesión. Sin el banner con el logo, sin
   la tarjeta del creador, la versión ni el tema. */
#loginOverlay #loginBannerSlot, #loginOverlay #loginCreatorCard, #loginOverlay #loginVersion,
#loginOverlay .login-banner-slot, #loginOverlay .login-creator, #loginOverlay .login-version{ display:none !important; }
/* Banner mas compacto (pedido de Manuel): emblema mas chico, menos relleno y sin hueco abajo. */
#albaBannerSlot .alba-emblema{ width: clamp(56px, 9%, 92px) !important; }
#albaBannerSlot .alba-banner-body{ padding:10px 14px !important; gap:6px !important; }
#albaBannerSlot .alba-banner-toast:empty{ display:none !important; }
@media (max-width:680px){ #albaBannerSlot .alba-emblema{ width:60px !important; } }
/* Mandar en computadora (pedido de Manuel): circulo con el aparato; al pasar el mouse se abre la
   pastilla con "Mandar al celular". Ya no se abre solo. */
@media (hover:hover) and (pointer:fine){
  .mandar-fab{ transition: padding .25s ease, gap .25s ease, border-radius .25s ease, opacity .2s ease, transform .2s ease, box-shadow .2s ease; }
  .mandar-fab:not(:hover):not(:focus-visible){ padding:8px !important; gap:0 !important; border-radius:8px; }
  .mandar-fab:not(:hover):not(:focus-visible) .mf-txt{ max-width:0 !important; opacity:0 !important; }
  .mandar-fab:not(:hover):not(:focus-visible) .mf-flecha,
  .mandar-fab:not(:hover):not(:focus-visible) .mf-escena .mf-ap:first-child{ display:none; }
  .mandar-fab:not(:hover):not(:focus-visible) .mf-escena{ padding:6px; background:none; }
  .mandar-fab:not(:hover):not(:focus-visible) .mf-ap{ font-size:1.5rem; }
  .mandar-fab:hover .mf-txt, .mandar-fab:focus-visible .mf-txt{ max-width:140px !important; opacity:1 !important; }
}
/* ===========================================================================
   Pantallas de carga por tipo de busqueda (pedido de Manuel). Cada una con su animacion y su
   color; el anillo del emblema queda para lo que no tiene una propia.
   =========================================================================== */
.alba-loader-anim{ display:none; }
.alba-loader[data-tipo="code"], .alba-loader[data-tipo="order"], .alba-loader[data-tipo="po"], .alba-loader[data-tipo="mo"],
.alba-loader[data-tipo="transferencia"], .alba-loader[data-tipo="user"], .alba-loader[data-tipo="ubicacion"], .alba-loader[data-tipo="dia"]{ --la: var(--accent); }
.alba-loader[data-tipo="code"]{ --la:#f59e0b; } .alba-loader[data-tipo="order"]{ --la:#22c55e; } .alba-loader[data-tipo="po"]{ --la:#3b82f6; }
.alba-loader[data-tipo="mo"]{ --la:#a3a3a3; } .alba-loader[data-tipo="transferencia"]{ --la:#06b6d4; } .alba-loader[data-tipo="user"]{ --la:#a78bfa; }
.alba-loader[data-tipo="ubicacion"]{ --la:#f97316; } .alba-loader[data-tipo="dia"]{ --la:#ec4899; }
.alba-loader[data-tipo]:not([data-tipo=""]) .alba-loader-anillo{ display:none; }
.alba-loader[data-tipo]:not([data-tipo=""]) .alba-loader-anim{ display:flex; align-items:center; justify-content:center; height:130px; margin:12px 0 14px; }
.alba-loader[data-tipo]:not([data-tipo=""]) .alba-loader-centro{ border-color: color-mix(in srgb, var(--la) 55%, var(--border)); box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 40px color-mix(in srgb, var(--la) 18%, transparent); }
.alba-loader[data-tipo]:not([data-tipo=""]) .alba-loader-codigo{ color: var(--la); border-color: var(--la); background: color-mix(in srgb, var(--la) 18%, var(--surface-2)); }
.alba-loader[data-tipo]:not([data-tipo=""]) .alba-loader-barra span{ background: linear-gradient(90deg, color-mix(in srgb, var(--la) 50%, #000), var(--la), color-mix(in srgb, var(--la) 50%, #fff)); }

/* Producto: escaner sobre codigo de barras. */
.la-scan{ position:relative; width:170px; height:110px; border-radius:16px; background:#f8fafc; box-shadow:0 0 30px color-mix(in srgb, var(--la) 35%, transparent); overflow:hidden; }
.la-barras{ position:absolute; left:18px; right:18px; top:20px; bottom:30px; background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 4px, #111 4px 7px, #fff 7px 9px, #111 9px 10px, #fff 10px 13px); }
.la-laser{ position:absolute; left:8px; right:8px; height:3px; top:20px; background:#ef4444; box-shadow:0 0 12px 3px rgba(239,68,68,.8); animation: laLaser 1.4s ease-in-out infinite alternate; }
.la-caja-scan{ position:absolute; right:8px; bottom:4px; font-size:1.2rem; }
@keyframes laLaser{ to{ top:76px; } }
/* Pedido: lista que se palomea. */
.la-lista{ display:flex; flex-direction:column; gap:9px; width:190px; padding:14px; border-radius:16px; background: var(--surface-2); border:2px solid color-mix(in srgb, var(--la) 50%, var(--border)); }
.la-renglon{ display:flex; align-items:center; gap:10px; }
.la-renglon span{ flex:1; height:9px; border-radius:8px; background: color-mix(in srgb, var(--la) 25%, var(--surface)); }
.la-check{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:900; font-size:.75rem; color:#fff;
  background: var(--surface); border:2px solid var(--border); animation: laCheck 3.2s infinite; animation-delay: calc(var(--i) * .6s); }
@keyframes laCheck{ 0%,10%{ background: var(--surface); border-color: var(--border); color:transparent; transform:scale(.9); } 20%,85%{ background: var(--la); border-color: var(--la); color:#fff; transform:scale(1); } 100%{ background: var(--surface); color:transparent; } }
/* O.C.: camion llegando. */
.la-camino{ position:relative; width:220px; height:100px; overflow:hidden; }
.la-camion{ position:absolute; bottom:18px; left:-90px; display:flex; align-items:flex-end; font-size:2.4rem; animation: laCamion 2.6s ease-in-out infinite; }
.la-carga{ font-size:1.3rem; margin-right:-6px; margin-bottom:10px; }
.la-cabina{ transform: scaleX(-1); display:inline-block; }
.la-suelo{ position:absolute; left:0; right:0; bottom:14px; height:4px; border-radius:8px; background: repeating-linear-gradient(90deg, var(--la) 0 18px, transparent 18px 30px); animation: laSuelo .6s linear infinite; }
@keyframes laCamion{ 0%{ left:-90px; } 45%,60%{ left:60px; } 100%{ left:240px; } }
@keyframes laSuelo{ to{ background-position:-30px 0; } }
/* M.O.: engranes. */
.la-engranes{ position:relative; width:170px; height:120px; }
.la-eng{ position:absolute; line-height:1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.la-eng.g1{ font-size:4.2rem; left:14px; top:22px; animation: laGira 3s linear infinite; }
.la-eng.g2{ font-size:2.8rem; left:88px; top:6px; animation: laGira 2s linear infinite reverse; }
.la-eng.g3{ font-size:2.4rem; left:96px; top:66px; animation: laGira 1.7s linear infinite reverse; }
@keyframes laGira{ to{ transform: rotate(360deg); } }
/* Transferencia: caja entre almacenes. */
.la-tras{ display:flex; align-items:center; gap:8px; font-size:2.4rem; }
.la-via{ position:relative; width:120px; height:40px; border-bottom:4px dashed color-mix(in srgb, var(--la) 70%, transparent); }
.la-viaja{ position:absolute; bottom:4px; left:0; font-size:1.6rem; animation: laViaja 1.8s ease-in-out infinite; }
@keyframes laViaja{ 0%{ left:0; transform:translateY(0); } 50%{ transform:translateY(-14px); } 100%{ left:90px; transform:translateY(0); } }
/* Persona: radar. */
.la-radar{ position:relative; width:130px; height:130px; display:flex; align-items:center; justify-content:center; }
.la-onda{ position:absolute; inset:0; border-radius:50%; border:3px solid var(--la); opacity:0; animation: laOnda 2.4s ease-out infinite; }
.la-onda.o2{ animation-delay:.8s; } .la-onda.o3{ animation-delay:1.6s; }
.la-persona{ position:relative; z-index:1; width:60px; height:60px; border-radius:50%; background: var(--la); display:flex; align-items:center; justify-content:center; font-size:2rem; box-shadow:0 0 24px var(--la); }
@keyframes laOnda{ 0%{ transform:scale(.4); opacity:.9; } 100%{ transform:scale(1.15); opacity:0; } }
/* Ubicacion: rack con huecos que se encienden. */
.la-rack{ display:grid; grid-template-columns:repeat(4, 34px); gap:6px; padding:10px; border-radius:12px;
  background: repeating-linear-gradient(180deg, transparent 0 28px, #ea580c 28px 32px), linear-gradient(#1b1f26, #12151a); border-left:6px solid #facc15; border-right:6px solid #facc15; }
.la-rack i{ height:28px; border-radius:4px; background:#2a2f38; animation: laHueco 2.4s infinite; }
.la-rack i:nth-child(3n){ animation-delay:.4s } .la-rack i:nth-child(3n+1){ animation-delay:.9s } .la-rack i:nth-child(4n){ animation-delay:1.4s }
@keyframes laHueco{ 0%,100%{ background:#2a2f38; } 40%,60%{ background: var(--la); box-shadow:0 0 12px var(--la); } }
/* Dia: calendario que se va marcando. */
.la-cal{ width:170px; border-radius:14px; overflow:hidden; background: var(--surface-2); border:2px solid color-mix(in srgb, var(--la) 50%, var(--border)); }
.la-cal-cab{ height:22px; background: var(--la); }
.la-cal-dias{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; padding:8px; }
.la-cal-dias i{ height:16px; border-radius:4px; background: var(--surface); animation: laHueco 2.8s infinite; }
.la-cal-dias i:nth-child(2n){ animation-delay:.5s } .la-cal-dias i:nth-child(3n){ animation-delay:1.1s } .la-cal-dias i:nth-child(5n){ animation-delay:1.7s }
@media (prefers-reduced-motion: reduce){ .alba-loader-anim *{ animation:none !important; } }
/* Albaran: hoja que se llena y sello que cae. */
.alba-loader[data-tipo="albaran"]{ --la:#eab308; }
.la-hoja{ position:relative; width:130px; height:118px; padding:10px 12px; border-radius:6px; background:#f8fafc; box-shadow:0 0 28px color-mix(in srgb, var(--la) 35%, transparent), 4px 4px 0 #cbd5e1; display:flex; flex-direction:column; gap:7px; }
.la-hoja-cab{ height:12px; width:60%; border-radius:3px; background:#1f2937; }
.la-hoja-ren{ height:7px; border-radius:8px; background:#94a3b8; transform-origin:left; animation: laRenglon 3s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
.la-hoja-ren:nth-child(odd){ width:85%; }
@keyframes laRenglon{ 0%{ transform:scaleX(0); } 30%,100%{ transform:scaleX(1); } }
.la-sello{ position:absolute; right:-8px; bottom:6px; padding:3px 8px; border:3px solid #dc2626; border-radius:6px; color:#dc2626; font-weight:900; font-size:.8rem; letter-spacing:1px;
  transform: rotate(-14deg) scale(2.2); opacity:0; animation: laSello 3s ease-in infinite; }
@keyframes laSello{ 0%,55%{ opacity:0; transform: rotate(-14deg) scale(2.2); } 65%{ opacity:1; transform: rotate(-14deg) scale(.95); } 70%,95%{ opacity:1; transform: rotate(-14deg) scale(1); } 100%{ opacity:0; } }
/* Animaciones de los reportes con prefijo. */
.alba-loader[data-tipo^="pref-"] .alba-loader-lista{ display:none !important; }
.alba-loader[data-tipo="pref-foto"]{ --la:#3b82f6; } .alba-loader[data-tipo="pref-laina"]{ --la:#ec4899; }
.alba-loader[data-tipo="pref-100"]{ --la:#f59e0b; } .alba-loader[data-tipo="pref-ubp"]{ --la:#ef4444; } .alba-loader[data-tipo="pref-familia"]{ --la:#14b8a6; }
/* Camara con flash y fotos que salen. */
.la-camara{ position:relative; width:170px; height:120px; display:flex; align-items:center; justify-content:center; }
.la-cam{ position:relative; z-index:2; font-size:3.6rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.la-flor{ position:absolute; z-index:3; right:38px; top:20px; font-size:1.3rem; }
.la-flash{ position:absolute; z-index:1; width:40px; height:40px; border-radius:50%; background:#fff; opacity:0; animation: laFlash 2.2s infinite; }
@keyframes laFlash{ 0%,70%{ opacity:0; transform:scale(.5); } 76%{ opacity:1; transform:scale(3); } 100%{ opacity:0; transform:scale(4); } }
.la-foto{ position:absolute; z-index:0; width:34px; height:28px; border-radius:4px; background: linear-gradient(135deg, var(--la), #fff); border:3px solid #fff; opacity:0; animation: laFotoSale 2.2s infinite; }
.la-foto.f1{ --x:-62px; --r:-14deg; } .la-foto.f2{ --x:0px; --r:4deg; animation-delay:.25s; } .la-foto.f3{ --x:62px; --r:14deg; animation-delay:.5s; }
@keyframes laFotoSale{ 0%,72%{ opacity:0; transform: translate(0, 0) rotate(0); } 85%,100%{ opacity:1; transform: translate(var(--x), 40px) rotate(var(--r)); } }
/* Cajas que se apilan con el 100. */
.la-pila{ position:relative; width:150px; height:120px; display:grid; grid-template-columns:repeat(3, 1fr); align-content:end; justify-items:center; }
.la-pila span{ font-size:1.9rem; line-height:1.05; opacity:0; animation: laCae 3s ease-in infinite; animation-delay: calc(var(--i) * .25s); }
.la-pila b{ position:absolute; top:-4px; right:-10px; padding:2px 8px; border-radius:8px; background: var(--la); color:#1c1203; font-weight:900; font-size:.85rem; }
@keyframes laCae{ 0%{ opacity:0; transform: translateY(-60px); } 20%,85%{ opacity:1; transform:none; } 100%{ opacity:0; } }
/* Plano con pines. */
.la-plano{ position:relative; width:180px; height:110px; border-radius:12px; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 22px), #1e293b; border:2px solid color-mix(in srgb, var(--la) 50%, var(--border)); }
.la-pin{ position:absolute; font-size:1.6rem; opacity:0; animation: laPin 2.8s infinite; animation-delay: calc(var(--i) * .45s); }
.la-pin:nth-child(1){ left:20px; top:14px; } .la-pin:nth-child(2){ left:80px; top:44px; } .la-pin:nth-child(3){ left:130px; top:16px; } .la-pin:nth-child(4){ left:46px; top:62px; }
@keyframes laPin{ 0%{ opacity:0; transform: translateY(-40px); } 20%{ opacity:1; transform:none; } 26%{ transform: translateY(-6px); } 32%,85%{ opacity:1; transform:none; } 100%{ opacity:0; } }
/* Familia: fichas que se voltean. */
.la-familia{ display:grid; grid-template-columns:repeat(3, 40px); gap:8px; perspective:400px; }
.la-familia i{ height:40px; border-radius:8px; background: var(--surface-2); border:2px solid color-mix(in srgb, var(--la) 50%, var(--border)); animation: laVoltea 2.6s infinite; }
.la-familia i:nth-child(2n){ animation-delay:.35s; } .la-familia i:nth-child(3n){ animation-delay:.7s; } .la-familia i:nth-child(4n){ animation-delay:1.05s; }
@keyframes laVoltea{ 0%,40%{ transform: rotateY(0); background: var(--surface-2); } 55%,85%{ transform: rotateY(180deg); background: var(--la); } 100%{ transform: rotateY(360deg); } }
/* -foto: galeria que se llena. */
.la-galeria{ position:relative; display:grid; grid-template-columns:repeat(3, 52px); gap:8px; padding:12px; border-radius:16px; background: var(--surface-2);
  border:2px solid color-mix(in srgb, var(--la) 50%, var(--border)); }
.la-marco{ position:relative; height:42px; border-radius:6px; overflow:hidden; background:#fff; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.4);
  opacity:0; transform: scale(.6); animation: laMarco 3.6s infinite; animation-delay: calc(var(--i) * .35s); }
.la-marco::before{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, color-mix(in srgb, var(--la) 55%, #fff), #fff); }
.la-sol{ position:absolute; top:5px; right:7px; width:9px; height:9px; border-radius:50%; background:#facc15; }
.la-monte{ position:absolute; left:-4px; right:-4px; bottom:-2px; height:20px; background: var(--la); clip-path: polygon(0 100%, 30% 25%, 50% 60%, 72% 10%, 100% 100%); }
@keyframes laMarco{ 0%{ opacity:0; transform: scale(.6); } 12%,80%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.la-cam-mini{ position:absolute; right:-16px; top:-18px; font-size:1.9rem; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.la-flash-mini{ position:absolute; left:50%; top:40%; width:16px; height:16px; margin:-8px; border-radius:50%; background:#fff; opacity:0; animation: laFlash .7s infinite; animation-duration:.7s; }
.la-flor-mini{ position:absolute; left:-12px; bottom:-12px; font-size:1.4rem; }
/* -odoo: panel de version. */
.odoover-estado{ margin:0 0 12px; padding:10px 14px; border-radius:14px; background: var(--surface-2); border:1px solid var(--border); font-size:.86rem; }
.odoover-ops{ display:flex; flex-direction:column; gap:8px; }
.odoover-op{ position:relative; display:flex; flex-direction:column; gap:2px; text-align:left; padding:12px 44px 12px 16px; border-radius:16px; cursor:pointer; font:inherit;
  border:2px solid var(--border); background: linear-gradient(135deg, var(--surface-2), var(--surface)); color: var(--text); }
.odoover-op b{ font-weight:900; font-size:1rem; }
.odoover-op small{ color: var(--text-dim); font-size:.78rem; }
.odoover-op:hover{ border-color:#a78bfa; }
.odoover-check{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; display:none; align-items:center; justify-content:center; font-style:normal; font-weight:900; background:#fff; color:#6d28d9; }
.odoover-op.activo{ color:#fff; border-color:#c4b5fd; background: linear-gradient(100deg, #8b5cf6, #6d28d9 55%, #2e1065); }
.odoover-op.activo small{ color:rgba(255,255,255,.88); }
.odoover-op.activo .odoover-check{ display:flex; }

/* Codigo archivado: ventana propia en ambar (V2.106.0). */
.arch-overlay .arch-caja{ width:min(440px, 100%); overflow:hidden; border-radius: var(--radius-lg, 18px); background: var(--surface);
  border:2px solid #e0a800; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(224,168,0,.18); animation: archEntra .32s cubic-bezier(.2,.9,.3,1.2); }
.arch-cab{ position:relative; display:flex; align-items:center; gap:14px; padding:18px 18px 16px;
  background: radial-gradient(130% 160% at 0% 0%, #fde68a 0%, #f59e0b 42%, #92400e 100%); color:#2a1700; }
.arch-dibujo{ flex:none; width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:16px;
  background: rgba(255,255,255,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.arch-dibujo svg rect{ fill:#2a1700; }
.arch-dibujo .arch-cuerpo{ fill:#5b3305; }
.arch-dibujo .arch-asa{ fill:#fde68a; }
.arch-dibujo .arch-tapa{ transform-origin: 8px 22px; animation: archTapa 2.4s ease-in-out infinite; }
.arch-cab-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.arch-etiqueta{ align-self:flex-start; padding:1px 9px; border-radius:8px; font-size:.64rem; font-weight:900; letter-spacing:1px;
  text-transform:uppercase; background:#2a1700; color:#fde68a; }
.arch-cab h3{ margin:0; font-size:1.3rem; font-weight:900; letter-spacing:.3px; }
.arch-x{ all:unset; cursor:pointer; position:absolute; top:10px; right:12px; padding:4px 7px; border-radius:8px; color:#2a1700; font-weight:900; }
.arch-x:hover{ background: rgba(255,255,255,.35); }
.arch-cuerpo-txt{ display:flex; flex-direction:column; gap:12px; padding:16px 18px 18px; }
.arch-codigo{ display:flex; align-items:center; gap:8px; padding:11px 12px; border-radius:12px;
  background: var(--surface-2); border:1px dashed #e0a800; }
.arch-codigo span{ flex:1; min-width:0; font-family: var(--font-code); font-weight:800; font-size:1rem; color: var(--text); overflow-wrap:anywhere; text-align:center; }
.arch-copiar{ all:unset; cursor:pointer; flex:none; padding:5px 8px; border-radius:8px; background: var(--surface); border:1px solid var(--border); }
.arch-copiar:hover{ border-color:#e0a800; }
.arch-nombre{ font-size:.82rem; color: var(--text-dim); line-height:1.45; text-align:center; }
.arch-puntos{ display:flex; flex-direction:column; gap:8px; }
.arch-punto{ display:flex; gap:11px; align-items:flex-start; padding:10px 12px; border-radius:12px; background: var(--surface-2); border:1px solid var(--border);
  font-size:.82rem; line-height:1.45; color: var(--text-dim); }
.arch-punto > span{ flex:none; font-size:1.2rem; line-height:1.2; }
.arch-punto b{ display:block; color: var(--text); font-size:.86rem; margin-bottom:1px; }
.arch-ok{ width:100%; }
@keyframes archEntra{ from{ opacity:0; transform: translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes archTapa{ 0%, 60%, 100%{ transform:none; } 75%{ transform: rotate(-14deg) translateY(-2px); } }
@media (prefers-reduced-motion: reduce){ .arch-dibujo .arch-tapa, .arch-overlay .arch-caja{ animation:none; } }
/* Codigo archivado: el nombre y la descripcion bien a la vista (pedido de Manuel). */
.arch-nombre{ color: var(--text); font-weight:700; font-size:.9rem; }
.arch-desc{ padding:10px 12px; border-radius:12px; background: var(--surface-2); border:1px solid var(--border);
  font-size:.82rem; line-height:1.5; color: var(--text); max-height:140px; overflow-y:auto; }
.arch-desc span{ display:block; font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.8px; color:#e0a800; margin-bottom:3px; }

/* Celular: el boton de Mandar y el de subir al buscador no se encimen (pedido de Manuel). Mandar se
   alinea con el de subir (mismo centro) y, cuando el de subir aparece (al bajar), se sube encima de
   el con su propio espacio; arriba del todo vuelve a la esquina. body.con-subir lo pone script.js. */
@media (max-width: 600px){
  .mandar-fab, .mandar-fab.mf-abierto{ right:18px; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transition: opacity .25s ease, transform .3s cubic-bezier(.2,.9,.3,1.25), bottom .3s cubic-bezier(.2,.9,.3,1.2); }
  body.con-subir .mandar-fab{ bottom: calc(24px + 50px + 14px + env(safe-area-inset-bottom, 0px)); }
}

/* Boton de subir al buscador, redisenado (V2.111.0): redondo, flecha, y un anillo que se llena
   segun cuanto has bajado. Mismo tamaño y lugar de siempre (ver body.con-subir para Mandar). */
.scroll-top-fab{ width:50px; height:50px; border-radius:50%; border:none; padding:0; overflow:visible;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 70%, #000));
  color:#04211c; box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translateY(14px) scale(.8); }
.scroll-top-fab.show{ transform:none; }
.scroll-top-fab:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.5), 0 0 0 6px color-mix(in srgb, var(--accent) 28%, transparent); }
.scroll-top-fab:active{ transform: scale(.94); box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.scroll-top-fab .stf-aro{ position:absolute; inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px); transform: rotate(-90deg); pointer-events:none; }
.scroll-top-fab .stf-fondo{ fill:none; stroke: color-mix(in srgb, var(--bg) 70%, transparent); stroke-width:3; }
.scroll-top-fab .stf-lleno{ fill:none; stroke: var(--text); stroke-width:3; stroke-linecap:round; transition: stroke-dashoffset .12s linear; }
.scroll-top-fab .stf-flecha{ position:relative; display:flex; animation: stfFlota 1.8s ease-in-out infinite; }
.scroll-top-fab.stf-sube .stf-flecha{ animation: stfDespega .45s cubic-bezier(.4,0,.2,1); }
@keyframes stfFlota{ 0%, 100%{ transform: translateY(1px); } 50%{ transform: translateY(-3px); } }
@keyframes stfDespega{ 0%{ transform:none; } 60%{ transform: translateY(-14px); opacity:0; } 61%{ transform: translateY(12px); opacity:0; } 100%{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){ .scroll-top-fab .stf-flecha{ animation:none; } }

/* 🧪 Pruebas de pantallas (V2.112.0). Ventana con la lista que desplaza por dentro. */
.pruebas-modal{ width:min(560px, 100%); max-width:100%; overflow:hidden; display:flex; flex-direction:column; }
.pruebas-filtro{ width:100%; box-sizing:border-box; padding:10px 14px; border-radius:8px; border:1px solid var(--border);
  background: var(--surface-2); color: var(--text); font:inherit; }
.pruebas-cuerpo{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding-right:2px; }
.pruebas-cuerpo > *{ flex-shrink:0; }
.pruebas-grupo-tit{ font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.8px; color: var(--text-dim); margin-bottom:7px; }
.pruebas-lista{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap:7px; }
.pruebas-item{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius: var(--radius, 10px); background: var(--surface-2); border:1px solid var(--border); transition: border-color .15s, transform .1s; }
.pruebas-item:hover, .pruebas-item:focus-visible{ border-color: var(--accent); transform: translateY(-1px); }
.pruebas-ico{ flex:none; width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1rem;
  background: var(--surface); border:1px solid var(--border); }
.pruebas-nombre{ flex:1; min-width:0; font-size:.84rem; font-weight:700; color: var(--text); }
.pruebas-ver{ flex:none; font-size:.7rem; color: var(--accent); }
.prueba-chip{ all:unset; cursor:pointer; position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:2147483600;
  padding:9px 16px; border-radius:8px; font-weight:900; font-size:.8rem; color:#04211c; background: var(--accent);
  box-shadow:0 8px 22px rgba(0,0,0,.5); }

/* Sin existencia = sin fotos (V2.113.0). */
.fotos-bloqueadas{ display:flex; align-items:flex-start; gap:10px; margin-top:10px; padding:11px 13px; border-radius: var(--radius, 12px);
  background: color-mix(in srgb, var(--err) 12%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--err) 45%, var(--border));
  font-size:.8rem; line-height:1.45; color: var(--text-dim); text-align:left; }
/* Que no se salga de la pantalla: el contenedor de botones no parte renglones. */
.fotos-bloqueadas{ box-sizing:border-box; width:100%; max-width:100%; flex:1 1 100%; white-space:normal; overflow-wrap:anywhere; }
.fotos-bloqueadas > div{ min-width:0; flex:1 1 auto; }
.fotos-bloqueadas .fb-ico{ flex:none; font-size:1.3rem; line-height:1.1; }
.fotos-bloqueadas b{ display:block; color: var(--text); font-size:.86rem; margin-bottom:2px; }
.sinstock-caja{ text-align:center; align-items:center; border-color: color-mix(in srgb, var(--err) 60%, var(--text)) !important; }
.sinstock-ico{ position:relative; width:76px; height:76px; border-radius:22px; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--err) 16%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--err) 45%, var(--border)); }
.sinstock-ico span{ font-size:2.2rem; filter: grayscale(.6); }
.sinstock-ico i{ position:absolute; right:-6px; bottom:-6px; font-style:normal; font-size:1.5rem; animation: ssLatido 1.6s ease-in-out infinite; }
.sinstock-caja h3{ margin:4px 0 0; }
.sinstock-cod{ font-family: var(--font-code); font-weight:800; font-size:.86rem; color: var(--text); padding:6px 12px; border-radius:10px;
  background: var(--surface-2); border:1px dashed var(--border); overflow-wrap:anywhere; }
.sinstock-caja p{ margin:0; font-size:.86rem; line-height:1.5; color: var(--text-dim); }
.sinstock-caja .btn{ width:100%; }
@keyframes ssLatido{ 0%, 100%{ transform: scale(1); } 50%{ transform: scale(1.18); } }

/* V2.114.3: el aviso de sin fotos se salia de la ficha porque .photo-panel no se encoge
   (flex-shrink:0) y crecia al ancho del texto en un solo renglon. Con el aviso, si se encoge. */
.photo-panel:has(.fotos-bloqueadas){ flex-shrink:1; min-width:0; max-width:100%; align-self:stretch; }
/* En PC el boton de subir quedaba detras de la esquina (usuario, tema, version): va encima de
   Mandar y por delante de todo. */
@media (min-width: 601px){
  body.alba-con-dock .scroll-top-fab{ bottom:210px; right:24px; z-index:950; }
}

/* Nota de A.L.B.A. en una O.C. (V2.116.0). */
.doc-nota{ display:flex; align-items:flex-start; gap:10px; margin:10px 0; padding:11px 13px; border-radius: var(--radius, 12px);
  background: color-mix(in srgb, var(--accent2) 14%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--accent2) 50%, var(--border)); }
.doc-nota:empty{ display:none; }
.doc-nota.vacia{ background:none; border-style:dashed; padding:6px 10px; }
.doc-nota-ico{ flex:none; font-size:1.3rem; line-height:1.2; }
.doc-nota-txt{ flex:1; min-width:0; font-size:.92rem; line-height:1.45; color: var(--text); overflow-wrap:anywhere; }
.doc-nota-txt b{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.7px; color: var(--accent2); margin-bottom:2px; }
.doc-nota-txt small{ display:block; margin-top:3px; font-size:.72rem; color: var(--text-dim); }
.doc-nota-btn, .doc-nota-agregar{ all:unset; cursor:pointer; flex:none; padding:4px 7px; border-radius:8px; font-size:.82rem; color: var(--text-dim); }
.doc-nota-btn:hover, .doc-nota-agregar:hover{ color: var(--text); background: var(--surface); }

/* Nota de la O.C. con mas diseño (V2.116.1): una notita de papel pegada con cinta, con la esquina
   doblada; y "Agregar una nota" como boton punteado que invita a escribir. */
.doc-nota:not(.vacia){ position:relative; margin:14px 4px 12px; padding:16px 44px 14px 16px; border:none; border-radius:4px 4px 4px 18px;
  background: linear-gradient(170deg, #fff6c9 0%, #fde68a 100%); color:#3b2a05;
  box-shadow: 0 10px 22px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.06); transform: rotate(-.6deg);
  animation: dnEntra .45s cubic-bezier(.2,.9,.3,1.3) both; }
.doc-nota:not(.vacia)::before{ content:''; position:absolute; top:-9px; left:50%; width:86px; height:20px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.06); box-shadow:0 2px 4px rgba(0,0,0,.12); }
.doc-nota:not(.vacia)::after{ content:''; position:absolute; left:0; bottom:0; width:22px; height:22px; border-radius:0 18px 0 0;
  background: linear-gradient(45deg, #e3c766 50%, transparent 51%); box-shadow: 2px -2px 4px rgba(0,0,0,.15); }
.doc-nota:not(.vacia) .doc-nota-ico{ font-size:1.5rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.doc-nota:not(.vacia) .doc-nota-txt{ color:#3b2a05; font-size:1rem; font-weight:700; line-height:1.4; }
.doc-nota:not(.vacia) .doc-nota-txt b{ color:#a16207; letter-spacing:1px; }
.doc-nota:not(.vacia) .doc-nota-txt small{ color:#7c5a14; font-weight:600; font-style:italic; }
.doc-nota:not(.vacia) .doc-nota-btn{ position:absolute; top:10px; right:10px; width:30px; height:30px; padding:0; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background: rgba(255,255,255,.6); color:#3b2a05; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.doc-nota:not(.vacia) .doc-nota-btn:hover{ background:#fff; transform: rotate(-12deg) scale(1.08); }
.doc-nota.vacia{ padding:0; border:none; background:none; }
.doc-nota-agregar{ display:flex !important; align-items:center; justify-content:center; gap:8px; width:100%; box-sizing:border-box; padding:12px 14px !important;
  border-radius: var(--radius, 12px) !important; border:2px dashed color-mix(in srgb, var(--accent2) 55%, var(--border)) !important;
  color: var(--text-dim) !important; font-weight:800; font-size:.86rem !important;
  background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--accent2) 6%, transparent) 10px 20px) !important;
  transition: border-color .15s, color .15s, transform .12s; }
.doc-nota-agregar:hover{ color: var(--text) !important; border-color: var(--accent2) !important; transform: translateY(-1px); }
@keyframes dnEntra{ from{ opacity:0; transform: translateY(-8px) rotate(-3deg) scale(.96); } to{ opacity:1; transform: rotate(-.6deg); } }
@media (prefers-reduced-motion: reduce){ .doc-nota:not(.vacia){ animation:none; } }

/* Nota de la O.C.: se escribe ahi mismo, dentro de la notita (V2.116.2). */
.doc-nota.editando{ position:relative; margin:14px 4px 12px; padding:16px 16px 14px; border:none; border-radius:4px 4px 4px 18px;
  background: linear-gradient(170deg, #fff6c9 0%, #fde68a 100%); color:#3b2a05; box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.doc-nota.editando .doc-nota-txt b{ color:#a16207; letter-spacing:1px; }
.doc-nota-campo{ display:block; width:100%; box-sizing:border-box; margin:4px 0 8px; padding:8px 10px; resize:none; overflow:hidden;
  border:none; border-bottom:2px dashed rgba(161,98,7,.45); border-radius:6px; background: rgba(255,255,255,.55);
  color:#3b2a05; font:inherit; font-size:1rem; font-weight:700; line-height:1.4; outline:none; }
.doc-nota-campo:focus{ background: rgba(255,255,255,.8); border-bottom-color:#a16207; }
.doc-nota-acciones{ display:flex; flex-wrap:wrap; gap:7px; }
.doc-nota-acciones button{ all:unset; cursor:pointer; padding:6px 13px; border-radius:8px; font-size:.8rem; font-weight:800; }
.doc-nota-acciones .doc-nota-guardar{ background:#a16207; color:#fff7e0; box-shadow:0 3px 8px rgba(0,0,0,.2); }
.doc-nota-acciones .doc-nota-guardar:hover{ background:#854d0e; }
.doc-nota-acciones .doc-nota-cancelar{ color:#7c5a14; background: rgba(255,255,255,.5); }
.doc-nota-acciones .doc-nota-quitar{ color:#b91c1c; background: rgba(255,255,255,.5); margin-left:auto; }
.doc-nota.recien{ animation: dnPega .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes dnPega{ 0%{ transform: scale(1.04) rotate(1deg); } 60%{ transform: scale(.98) rotate(-1.2deg); } 100%{ transform: rotate(-.6deg); } }

/* ---------- 🎙️ Dictar en el buscador ---------- */
#dictarBtn{
  position:absolute; top:7px; bottom:7px; right:58px; width:42px; padding:0; justify-content:center;
  border-radius:8px; font-size:1.05rem;
  background: color-mix(in srgb, var(--accent2) 22%, var(--surface-2));
  border:2px solid color-mix(in srgb, var(--accent2) 70%, transparent);
  box-shadow:none; transition: transform .1s, filter .14s;
}
#dictarBtn:hover{ filter:brightness(1.12); }
#dictarBtn:active{ transform:scale(.94); }
#dictarBtn.escuchando{ background:var(--accent3); border-color:var(--accent3); color:#fff; animation:dictarLatido 1.2s ease-in-out infinite; }
@keyframes dictarLatido{ 50%{ box-shadow:0 0 0 6px color-mix(in srgb, var(--accent3) 25%, transparent); } }
/* La ventanita de "te escucho" */
.dictar-pop{ position:fixed; inset:0; z-index:9100; display:flex; align-items:center; justify-content:center; padding:16px;
  background:color-mix(in srgb, #000 55%, transparent); backdrop-filter:blur(4px); animation:dictarEntra .2s ease both; }
@keyframes dictarEntra{ from{ opacity:0; } }
.dictar-card{ width:min(440px,100%); background:var(--surface); color:var(--text); border:2px solid var(--accent2);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:24px 20px 18px; display:flex; flex-direction:column;
  align-items:center; gap:12px; text-align:center; animation:dictarSube .3s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes dictarSube{ from{ transform:translateY(18px) scale(.96); opacity:0; } }
.dictar-mic{ width:74px; height:74px; border-radius:50%; display:grid; place-items:center; font-size:2rem;
  background:var(--accent3); color:#fff; animation:dictarAnillo 1.4s ease-out infinite; }
@keyframes dictarAnillo{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent3) 55%, transparent); } 100%{ box-shadow:0 0 0 22px transparent; } }
.dictar-titulo{ font-size:1.2rem; font-weight:900; }
.dictar-ondas{ display:flex; gap:5px; align-items:center; height:30px; }
.dictar-ondas i{ width:6px; height:30%; border-radius:4px; background:var(--accent); animation:dictarOnda .9s ease-in-out infinite; }
.dictar-ondas i:nth-child(2){ animation-delay:-.15s } .dictar-ondas i:nth-child(3){ animation-delay:-.3s } .dictar-ondas i:nth-child(4){ animation-delay:-.45s }
.dictar-ondas i:nth-child(5){ animation-delay:-.6s } .dictar-ondas i:nth-child(6){ animation-delay:-.75s } .dictar-ondas i:nth-child(7){ animation-delay:-.9s }
@keyframes dictarOnda{ 50%{ height:100%; } }
.dictar-dicho{ font-size:.9rem; color:var(--text-dim); font-style:italic; min-height:1.3em; overflow-wrap:anywhere; }
.dictar-codigo{ font-family:var(--font-code); font-weight:800; color:var(--accent); font-size:1.05rem; min-height:1.3em; overflow-wrap:anywhere; }
.dictar-botones{ display:flex; gap:8px; width:100%; }
.dictar-botones .btn{ flex:1; justify-content:center; }
@media (prefers-reduced-motion: reduce){ .dictar-mic, .dictar-ondas i, #dictarBtn.escuchando{ animation:none; } }
.search-box.con-dictado #codeInput{ padding-right:104px !important; }
body:not(.en-inicio) .alba-banner .main-search #dictarBtn{ top:5px; bottom:5px; right:50px; width:38px; }

/* ---------- 📦 Surtido guiado ---------- */
.sg-inicio{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0 6px; }
.sg-comenzar{ font-weight:800; }
.sg-inicio-nota{ font-size:.82rem; color:var(--text-dim); }
body.sg-abierto{ overflow:hidden; }
.sg-overlay{
  position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:16px;
  background:color-mix(in srgb, #000 62%, transparent); backdrop-filter:blur(4px);
}
.sg-card{
  width:min(560px, 100%); max-height:100%; overflow-y:auto; background:var(--surface); color:var(--text);
  border:2px solid var(--text); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
}
.sg-cab{ display:flex; align-items:center; gap:12px; padding:14px 16px 10px; }
.sg-cab > div{ flex:1; min-width:0; }
.sg-eyebrow{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--accent); }
.sg-cuenta{ font-weight:800; font-variant-numeric:tabular-nums; }
.sg-cerrar{ background:none; border:0; color:var(--text-dim); font-size:1.2rem; cursor:pointer; padding:4px 6px; }
.sg-barra{ height:6px; background:var(--surface-2); }
.sg-barra > div{ height:100%; width:0; background:var(--accent); transition:width .4s; }
.sg-cuerpo{ padding:18px 16px 18px; display:flex; flex-direction:column; gap:12px; }
.sg-paso{ font-size:.8rem; color:var(--text-dim); font-weight:700; }
.sg-codigo{ font-family:var(--font-code); font-size:1.25rem; font-weight:800; overflow-wrap:anywhere; line-height:1.3; }
.sg-nombre{ font-size:.86rem; color:var(--text-dim); }
.sg-cantidad{ font-size:1.05rem; }
.sg-cantidad b{ font-size:1.6rem; color:var(--accent); }
.sg-ubics{ display:flex; flex-wrap:wrap; gap:8px; }
.sg-ubic{ padding:6px 12px; border-radius:8px; border:2px solid var(--border); font-weight:800; font-family:var(--font-code); }
.sg-ubic small{ font-weight:600; color:var(--text-dim); margin-left:4px; }
.sg-ubic-1{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); }
.sg-ubic-sin{ font-family:inherit; color:var(--text-dim); }
.sg-scan{ display:flex; gap:8px; }
.sg-scan input{ flex:1 1 auto; width:auto; min-width:0; padding:12px 14px; font-size:1rem; border:2px solid var(--border); border-radius:var(--radius); background:var(--surface-2); color:var(--text); }
.sg-scan .btn{ flex:0 0 52px; justify-content:center; padding:0; }
.sg-video{ width:100%; max-height:240px; object-fit:cover; border-radius:var(--radius); background:#000; }
.sg-resultado{ min-height:1.4em; font-weight:700; border-radius:var(--radius); }
.sg-resultado.sg-bien{ padding:10px 12px; background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--text); }
.sg-resultado.sg-mal{ padding:10px 12px; background:color-mix(in srgb, var(--accent3) 22%, transparent); color:var(--text); animation:sgSacude .35s; }
@keyframes sgSacude{ 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.sg-acciones{ display:flex; gap:8px; flex-wrap:wrap; }
.sg-acciones .btn{ flex:1; justify-content:center; }
.sg-saltar{ border-color:var(--accent2); }
.sg-aviso{ padding:10px 12px; border-radius:var(--radius); background:color-mix(in srgb, var(--accent2) 22%, transparent); font-weight:700; }
.sg-aviso-ok{ background:color-mix(in srgb, var(--accent) 20%, transparent); }
.sg-faltan{ display:flex; flex-direction:column; gap:6px; }
.sg-falta{ display:flex; flex-direction:column; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius); }
.sg-falta b{ font-family:var(--font-code); overflow-wrap:anywhere; }
.sg-falta span{ font-size:.82rem; color:var(--text-dim); }
.sg-fin{ font-size:3rem; text-align:center; }
@media (max-width:600px){
  .sg-overlay{ padding:0; align-items:stretch; }
  .sg-card{ border-radius:0; border:0; width:100%; }
  .sg-codigo{ font-size:1.1rem; }
}
/* Aviso grande de "no es este producto" en el surtido guiado: sale encima unos segundos y se va. */
.sg-pop-mal{
  position:fixed; left:50%; top:50%; z-index:9200; transform:translate(-50%,-50%);
  width:min(360px, calc(100vw - 32px)); padding:22px 18px; border-radius:var(--radius-lg);
  background:var(--accent3); color:#fff; text-align:center; display:flex; flex-direction:column; gap:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.55); animation:sgPopEntra .35s cubic-bezier(.3,1.6,.5,1) both;
}
.sg-pop-mal b{ font-size:1.35rem; font-weight:900; }
.sg-pop-mal span{ font-size:.9rem; opacity:.95; }
.sg-pop-mal code{ font-family:var(--font-code); font-weight:800; overflow-wrap:anywhere; background:rgba(0,0,0,.18); padding:1px 6px; border-radius:6px; }
.sg-pop-mal-ico{ font-size:3rem; line-height:1; animation:sgSacude .4s .2s; }
.sg-pop-mal.sale{ animation:sgPopSale .4s ease both; }
@keyframes sgPopEntra{ from{ opacity:0; transform:translate(-50%,-50%) scale(.6); } }
@keyframes sgPopSale{ to{ opacity:0; transform:translate(-50%,-50%) scale(.9); } }
/* Permiso de la cámara en el surtido guiado */
.sg-permiso{ display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:var(--radius);
  border:2px solid var(--accent2); background:color-mix(in srgb, var(--accent2) 14%, transparent); font-size:.88rem; }
.sg-permiso b:first-child{ font-size:1rem; }
.sg-permiso ol{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; }
.sg-permiso .btn{ align-self:flex-start; }
.sg-permiso-tip{ padding:10px 12px; border-radius:var(--radius); background:color-mix(in srgb, var(--accent) 14%, transparent); font-size:.85rem; }
.sg-foto{ display:block; align-self:center; width:min(260px, 70%); aspect-ratio:1; padding:6px; border:2px solid var(--border);
  border-radius:var(--radius-lg); background:#fff; cursor:zoom-in; transition:width .25s; }
.sg-foto img{ width:100%; height:100%; object-fit:contain; display:block; }
.sg-foto.grande{ width:100%; cursor:zoom-out; }
/* ✅ Surtidos terminados */
.st-dia{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.st-dia input[type=date]{ padding:8px 10px; border-radius:var(--radius); border:2px solid var(--border); background:var(--surface-2); color:var(--text); }
.st-lista{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.st-fila{ display:grid !important; grid-template-columns:1fr auto; gap:4px 12px; text-align:left; width:100%;
  padding:12px 14px !important; border:2px solid var(--border) !important; border-radius:var(--radius) !important; background:var(--surface) !important; color:var(--text) !important; }
.st-fila:hover{ border-color:var(--accent) !important; }
.st-ped{ font-weight:900; font-size:1rem; }
.st-ped small{ font-weight:600; color:var(--text-dim); margin-left:6px; }
.st-quien{ grid-column:1; font-size:.84rem; color:var(--text-dim); }
.st-hora{ grid-column:2; grid-row:1 / span 2; align-self:center; font-weight:800; color:var(--accent); }
/* Iconos de imagen en el menú, el Panel De Control y los encabezados (ej. Surtidos terminados). */
.alba-ico-img{ width:1.35em; height:1.35em; object-fit:contain; vertical-align:middle; pointer-events:none; }
.home-tile-icon .alba-ico-img{ width:1.6em; height:1.6em; }
.dir-cab-icono .alba-ico-img{ width:1.5em; height:1.5em; }

/* Texto dentro de la foto (ver ponerTextoEnFoto en script.js): sale después del recorte. */
.foto-texto-modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg,16px);padding:18px;width:520px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.foto-texto-tit{font-size:1.1rem;font-weight:700}
.foto-texto-sub{opacity:.7;font-size:.85rem}
.foto-texto-chips{display:flex;flex-wrap:wrap;gap:6px}
.foto-texto-modal textarea{width:100%;box-sizing:border-box;background:var(--surface-2);color:inherit;border:1px solid var(--border);border-radius:10px;padding:10px;font:inherit;resize:vertical}
.foto-texto-vista{flex:1 1 auto;min-height:0;overflow:auto;display:flex;justify-content:center;background:var(--bg);border-radius:10px;padding:6px}
.foto-texto-vista canvas{max-width:100%;height:auto;max-height:340px;object-fit:contain}
.foto-texto-btns{display:flex;gap:8px;justify-content:flex-end}

/* Listas del horario (blanca / negra), ver pintarHorarioListas en script.js. */
.horario-listas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.horario-listas{grid-template-columns:1fr}}
.horario-lista{border:1px solid var(--border);border-radius:var(--radius,12px);padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.horario-lista-blanca{border-color:var(--accent4)}.horario-lista-negra{border-color:var(--accent3)}
.horario-lista-cab{display:flex;flex-direction:column;gap:2px}.horario-lista-cab small{opacity:.7;font-size:.8rem}
.horario-chips{display:flex;flex-wrap:wrap;gap:6px}
.horario-chips-vacio{opacity:.55;font-size:.85rem}
.horario-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:3px 4px 3px 10px;font-size:.85rem}
.horario-chip button{background:none;border:0;color:inherit;cursor:pointer;opacity:.7;padding:0 4px;font-size:.85rem}
.horario-chip button:hover{opacity:1}
.horario-lista select{width:100%;background:var(--surface-2);color:inherit;border:1px solid var(--border);border-radius:10px;padding:7px}

/* Códigos largos (DLX-0040/SE-30K-M9/B080-MLV-NDM-9IN-WHT/PES-MNI): en celular bajan de renglón en vez
   de salirse de la tarjeta (pedido de Manuel). Los botones de código traen nowrap de .moves-link. */
.mo-target-code{ display:inline-block !important; white-space:normal !important; overflow-wrap:anywhere; word-break:break-all; max-width:100%; min-width:0; text-align:left; }
@media (max-width:700px){
  .code-copy-wrap, .code-copy-wrap strong, .code-pill, .ac-code, .order-product-title,
  .moves-link, .oc-numero, .product-info h2{ white-space:normal !important; overflow-wrap:anywhere; word-break:break-word; min-width:0; max-width:100%; }
}
/* Sugerencias del buscador en celular: el código completo, en dos renglones si hace falta (sin "…"). */
@media (max-width:700px){
  .autocomplete-item .ac-code{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:anywhere; word-break:break-all; }
}

/* Segundo botón de Mandar (a otro Admin / Moderador): encima del de siempre, en otro color. */
.mandar-fab.mandar-fab-otros{ bottom:186px; background: linear-gradient(135deg, var(--accent2), color-mix(in srgb, var(--accent2) 60%, #000)); }
@media (max-width:700px){ .mandar-fab.mandar-fab-otros{ bottom:152px; } }

/* "Fulano quiere mandarte un código" (preguntarCodigoRecibido en script.js). */
.codigo-llega{ text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; }
.codigo-llega h3{ margin:0; font-size:1.1rem; }
.codigo-llega-ico{ font-size:2.4rem; line-height:1; }
.codigo-llega-codigo{ font-family:var(--font-code); font-weight:800; font-size:1.05rem; color:var(--accent); overflow-wrap:anywhere; word-break:break-all;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:8px 12px; max-width:100%; }
.codigo-llega-nombre{ font-size:.85rem; opacity:.75; }
.codigo-llega-pregunta{ margin:4px 0 0; font-size:.92rem; }
.codigo-llega .ml-modal-actions{ justify-content:center; flex-wrap:wrap; }
.recibidos-filtro{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.recibido-despues{ background: color-mix(in srgb, var(--accent2) 25%, transparent) !important; color: var(--accent2) !important; }
.mf-ico-otros{ width:30px; height:30px; display:block; background:#fff; border-radius:50%; padding:3px; box-sizing:border-box; }
@media (max-width:700px){ .mf-ico-otros{ width:36px; height:36px; } }
/* Tal cual el ícono (pedido de Manuel): botón blanco, sin círculo encima. */
.mandar-fab.mandar-fab-otros{ background:#fff; color:#1f2a33; }
.mandar-fab.mandar-fab-otros .mf-escena{ background:none; padding:0; }
.mf-ico-otros{ background:none; padding:0; border-radius:0; width:32px; height:32px; }
@media (max-width:700px){ .mf-ico-otros{ width:38px; height:38px; } }
/* La fecha y hora de los movimientos ya no se para en una columna de una letra (pedido de Manuel):
   la columna tiene un ancho mínimo y el texto se parte por palabras, no por letras. La tabla se
   desliza de lado si no cabe. */
table.moves td, table.moves th{ word-break:normal !important; overflow-wrap:normal !important; }
table.moves .mov-link-fecha{ display:inline-block; min-width:150px; white-space:normal; word-break:normal !important; overflow-wrap:normal !important; text-align:left; line-height:1.3; }
table.moves td:has(> .mov-link-fecha){ min-width:160px; }
.table-wrap{ overflow-x:auto !important; }
@media (max-width: 680px){ .table-wrap table.moves{ min-width:560px; } }

/* 📱 Surtir desde el celular (lo del albarán de papel, en cada producto). */
.sc-caja{ margin-top:10px; padding:10px 12px; border:1.5px dashed var(--border); border-radius:var(--radius); display:flex; flex-direction:column; gap:8px; }
.sc-caja.sc-listo{ border-style:solid; border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
.sc-tit{ font-size:.78rem; font-weight:800; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; }
.sc-ubics{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.sc-ubic{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-family:var(--font-code); cursor:pointer; }
.sc-ubic input[type=checkbox], .sc-hecho input{ width:20px; height:20px; accent-color:var(--accent); }
.sc-otra{ font-family:inherit; font-weight:700; }
.sc-otra input[type=text]{ width:130px; padding:6px 8px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface-2); color:var(--text); }
.sc-sin{ color:var(--text-dim); font-style:italic; font-size:.85rem; }
.sc-fila{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; }
.sc-cant{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.88rem; }
.sc-cant input{ width:90px; padding:6px 8px; border-radius:8px; border:1.5px dashed var(--border); background:var(--surface-2); color:var(--text); font-weight:800; }
.sc-hecho{ display:inline-flex; align-items:center; gap:6px; font-weight:800; cursor:pointer; }

/* ---------- 🏭 -P PROVEEDOR: sus O.C. (rediseño, pedido de Manuel) ---------- */
.po-cab{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; margin-bottom:14px; display:flex; flex-direction:column; gap:12px; }
.po-cab-fila{ display:flex; align-items:center; gap:12px; min-width:0; }
.po-cab-ico{ font-size:2rem; flex:none; }
.po-cab-txt{ flex:1 1 auto; min-width:0; }
.po-cab-tit{ font-size:1.15rem; font-weight:900; overflow-wrap:anywhere; }
.po-cab-sub{ font-size:.82rem; color:var(--text-dim); }
.po-cab-total{ flex:none; min-width:52px; height:52px; padding:0 10px; border-radius:8px; display:grid; place-items:center; background:var(--accent2); color:#1a1205; font-weight:900; font-size:1.2rem; }
.po-otros{ font-size:.82rem; color:var(--text-dim); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
/* El filtro con los colores del tema, no una barra blanca. */
.po-buscar{ display:flex; align-items:center; gap:8px; padding:0 14px; border-radius:8px; background:var(--surface-2); border:2px solid var(--border); }
.po-buscar:focus-within{ border-color:var(--accent); }
.po-buscar input{ flex:1; min-width:0; border:0 !important; outline:0; background:transparent !important; color:var(--text) !important; padding:11px 0 !important; font:inherit; box-shadow:none !important; }
.po-buscar input::placeholder{ color:var(--text-dim); }
.po-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.po-chip{ border:1.5px solid var(--border); background:transparent; color:var(--text); border-radius:8px; padding:5px 12px; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; }
.po-chip b{ color:var(--accent2); }
.po-chip.activo{ background:var(--accent); border-color:var(--accent); color:#04211c; }
.po-chip.activo b{ color:#04211c; }
.po-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; }
/* Cada O.C.: nada se sale de la tarjeta, las referencias largas se cortan con "…". */
.po-card{ display:flex !important; flex-direction:column; gap:8px; width:100%; min-width:0; overflow:hidden; text-align:left;
  padding:14px !important; border-radius:var(--radius-lg) !important; border:1px solid var(--border) !important; border-left:5px solid var(--po-c) !important;
  background:var(--surface) !important; color:var(--text) !important; font-family:inherit !important; white-space:normal !important; cursor:pointer; transition:transform .12s, border-color .12s; }
.po-card:hover{ transform:translateY(-2px); border-color:var(--po-c) !important; }
.po-card-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; min-width:0; }
.po-num{ font-weight:900; font-size:1.05rem; white-space:nowrap; }
.po-estado{ flex:none; font-size:.72rem; font-weight:800; padding:3px 10px; border-radius:8px; color:var(--po-c); border:1.5px solid var(--po-c); background:color-mix(in srgb, var(--po-c) 12%, transparent); }
.po-ref{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-code); font-size:.76rem; color:var(--text-dim); }
.po-card-pie{ display:flex; justify-content:space-between; align-items:flex-end; gap:8px; flex-wrap:wrap; font-size:.8rem; color:var(--text-dim); min-width:0; }
.po-card-pie > span{ min-width:0; overflow-wrap:anywhere; }
.po-total{ color:var(--accent2); font-size:.95rem; white-space:nowrap; }
.po-pag{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:14px; font-size:.88rem; }
.po-pag .btn{ min-width:46px; justify-content:center; }
@media (max-width:600px){ .po-grid{ grid-template-columns:1fr; } }

/* ✅ Cuestionario al marcar como surtido */
.cq-opciones{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.cq-op{ justify-content:center; font-weight:800; }
.cq-op.activo{ background:var(--accent) !important; color:#04211c !important; border-color:var(--accent) !important; }
.cq-extra{ display:flex; flex-direction:column; gap:6px; }
.cq-extra[hidden]{ display:none; }
.cq-extra input{ padding:10px 12px; border-radius:var(--radius); border:2px solid var(--border); background:var(--surface-2); color:var(--text); font:inherit; }
.cq-extra input[type=number]{ width:110px; font-weight:800; }
.cq-extra small{ color:var(--text-dim); }
.cq-resumen{ display:flex; flex-direction:column; gap:4px; max-height:40vh; overflow:auto; }
.cq-res{ display:flex; justify-content:space-between; gap:10px; padding:6px 8px; border-bottom:1px solid var(--border); font-size:.85rem; }
.cq-res b{ font-family:var(--font-code); overflow-wrap:anywhere; }
.cq-res span{ flex:none; }
.cq-coment{ display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:.85rem; }
.cq-coment textarea{ padding:10px 12px; border-radius:var(--radius); border:2px solid var(--border); background:var(--surface-2); color:var(--text); font:inherit; resize:vertical; }
/* Detalle en Surtidos terminados */
.st-det{ margin:-4px 0 6px; padding:8px 12px; border:1px dashed var(--border); border-top:0; border-radius:0 0 var(--radius) var(--radius); font-size:.84rem; }
.st-det summary{ cursor:pointer; font-weight:800; }
.st-coment{ margin:8px 0; padding:8px 10px; border-radius:var(--radius); background:color-mix(in srgb, var(--accent2) 14%, transparent); }
.st-lineas{ display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.st-linea{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.st-linea b{ font-family:var(--font-code); overflow-wrap:anywhere; min-width:0; }
.st-si{ color:var(--accent); font-weight:700; } .st-no{ color:var(--accent3); font-weight:700; } .st-otro{ color:var(--accent2); font-weight:700; }

/* Resumen antes de marcar como surtido (rediseño) */
.cqf-head{ display:flex; align-items:center; gap:14px; padding:14px; border-radius:var(--radius-lg); border:1.5px solid var(--border); }
.cqf-head-ok{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.cqf-head-warn{ border-color:var(--accent2); background:color-mix(in srgb, var(--accent2) 12%, transparent); }
.cqf-anillo{ --c: var(--accent); flex:none; width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--text) 12%, transparent) 0); }
.cqf-head-warn .cqf-anillo{ --c: var(--accent2); }
.cqf-anillo span{ width:50px; height:50px; border-radius:50%; display:grid; place-items:center; background:var(--surface); font-weight:900; font-size:.9rem; }
.cqf-head-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cqf-head-txt b{ font-size:1.1rem; }
.cqf-head-txt span{ font-size:.82rem; color:var(--text-dim); }
.cqf-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.cqf-stat{ display:flex; flex-direction:column; align-items:center; padding:10px 6px; border-radius:var(--radius); background:var(--surface-2); border-top:3px solid var(--c); }
.cqf-stat b{ font-size:1.4rem; color:var(--c); line-height:1.1; }
.cqf-stat span{ font-size:.72rem; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.cqf-stat.cqf-si{ --c: var(--accent); } .cqf-stat.cqf-no{ --c: var(--accent3); } .cqf-stat.cqf-otro{ --c: var(--accent2); }
.cqf-sec{ font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); margin-top:2px; }
.cqf-sec small{ text-transform:none; font-weight:600; letter-spacing:0; }
.cqf-lista{ display:flex; flex-direction:column; gap:6px; max-height:32vh; overflow:auto; padding-right:2px; }
.cqf-item{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--radius);
  background:var(--surface-2); border-left:4px solid var(--c); }
.cqf-item:hover{ background:color-mix(in srgb, var(--c) 14%, var(--surface-2)); }
.cqf-item.cqf-si{ --c: var(--accent); } .cqf-item.cqf-no{ --c: var(--accent3); } .cqf-item.cqf-otro{ --c: var(--accent2); }
.cqf-ico{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:.85rem; color:#111; background:var(--c); }
.cqf-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cqf-cod{ font-family:var(--font-code); font-weight:800; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cqf-det{ font-size:.8rem; color:var(--text-dim); overflow-wrap:anywhere; }
.cqf-det b{ color:var(--c); }
.cqf-edit{ flex:none; opacity:.5; font-size:.85rem; }
.cqf-item:hover .cqf-edit{ opacity:1; }
.cqf-pleg summary{ cursor:pointer; font-weight:800; font-size:.85rem; padding:6px 2px; color:var(--accent); }
.cqf-pleg .cqf-lista{ margin-top:4px; }
.cqf-atajos{ display:flex; flex-wrap:wrap; gap:6px; }
.cqf-atajo{ border:1.5px dashed var(--border); background:transparent; color:var(--text); border-radius:8px; padding:5px 11px; font:inherit; font-size:.76rem; font-weight:700; cursor:pointer; }
.cqf-atajo:hover{ border-color:var(--accent2); }
.cqf-atajo.usado{ border-style:solid; border-color:var(--accent2); background:color-mix(in srgb, var(--accent2) 16%, transparent); }
.cqf-coment{ width:100%; box-sizing:border-box; padding:10px 12px; border-radius:var(--radius); border:2px solid var(--border); background:var(--surface-2); color:var(--text); font:inherit; resize:vertical; }
.cqf-coment:focus{ outline:0; border-color:var(--accent); }
.cqf-pie{ position:sticky; bottom:-18px; display:grid; grid-template-columns:1fr 2fr; gap:8px; padding:10px 0 2px; background:var(--surface); }
.cqf-pie .btn{ justify-content:center; }

/* Pregunta de cada producto al marcar como surtido (rediseño) */
.cqp-prod{ display:flex; gap:12px; align-items:center; min-width:0; }
.cqp-foto{ flex:none; width:64px; height:64px; border-radius:12px; object-fit:contain; background:#fff; border:1px solid var(--border); }
.cqp-sinfoto{ display:grid; place-items:center; font-size:1.8rem; background:var(--surface-2); }
.cqp-prod-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cqp-paso{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--accent2); }
.cqp-cod{ font-family:var(--font-code); font-weight:900; font-size:1.02rem; overflow-wrap:anywhere; }
.cqp-nom{ font-size:.8rem; color:var(--text-dim); overflow-wrap:anywhere; }
.cqp-pide{ display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:6px; padding:12px; border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--accent2) 14%, var(--surface-2)); border:1.5px solid color-mix(in srgb, var(--accent2) 55%, transparent); }
.cqp-pide span{ font-weight:700; color:var(--text-dim); }
.cqp-pide b{ font-size:2.2rem; line-height:1; color:var(--accent2); font-weight:900; }
.cqp-pide small{ flex-basis:100%; text-align:center; color:var(--text-dim); font-size:.76rem; }
.cqp-pregunta{ text-align:center; font-weight:800; font-size:1rem; }
.cqp-opciones{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.cqp-op{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px; text-align:center;
  border-radius:var(--radius-lg); border:2px solid var(--border); background:var(--surface-2); transition:transform .1s, border-color .15s, background .15s; }
.cqp-op:hover{ border-color:var(--c); }
.cqp-op:active{ transform:scale(.97); }
.cqp-op b{ font-size:.92rem; }
.cqp-op small{ font-size:.72rem; color:var(--text-dim); }
.cqp-op-ico{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:1.1rem; color:#111; background:var(--c); }
.cqp-si{ --c: var(--accent); } .cqp-no{ --c: var(--accent3); } .cqp-otro{ --c: var(--accent2); }
.cqp-op.activo{ border-color:var(--c); background:color-mix(in srgb, var(--c) 18%, var(--surface-2)); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.cqp-extra{ padding:12px; border-radius:var(--radius); background:var(--surface-2); }
.cqp-extra label{ font-weight:800; font-size:.85rem; }
.cqp-extra input[type=text]{ width:100%; box-sizing:border-box; }
.cqp-cant{ display:flex; align-items:center; gap:10px; }
.cqp-cant input{ width:110px; font-size:1.3rem; font-weight:900; text-align:center; }
.cqp-cant span{ color:var(--text-dim); font-weight:700; }
.cqp-pie{ display:grid; grid-template-columns:1fr 2fr; gap:8px; margin-top:2px; }
.cqp-pie .btn{ justify-content:center; }
@media (max-width:420px){ .cqp-op small{ display:none; } .cqp-pide b{ font-size:1.9rem; } }

/* Acciones del albarán como tarjetas juntas (rediseño) */
.alb-acciones{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin:6px 0 14px; }
.alb-acc{ display:flex; flex-direction:column; justify-content:space-between; gap:10px; padding:12px; border-radius:var(--radius-lg);
  background:var(--surface-2); border:1px solid var(--border); border-top:3px solid var(--c); min-width:0; }
.alb-acc-pdf{ --c: var(--accent2); } .alb-acc-marcar{ --c: var(--accent); } .alb-acc-sg{ --c: #5aa9ff; }
.alb-acc-cab{ display:flex; gap:10px; align-items:flex-start; min-width:0; }
.alb-acc-ico{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:1.2rem; background:color-mix(in srgb, var(--c) 22%, transparent); }
.alb-acc-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.alb-acc-txt b{ font-size:.95rem; }
.alb-acc-txt span{ font-size:.78rem; color:var(--text-dim); overflow-wrap:anywhere; }
.alb-acc-txt span strong{ color:var(--text); }
.alb-acc .btn{ width:100%; justify-content:center; margin:0 !important; }
@media (max-width:600px){ .alb-acciones{ grid-template-columns:1fr; } }
.alb-acc-como{ font-size:.8rem; }
.alb-acc-como summary{ cursor:pointer; font-weight:800; color:var(--c); }
.alb-acc-como ol{ margin:8px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:5px; color:var(--text-dim); line-height:1.4; }
.alb-acc-como b{ color:var(--text); }
.cqp-motivos{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; }
button.alb-acc-como{ all:unset; cursor:pointer; align-self:center; font-size:.82rem; font-weight:800; color:var(--c); padding:4px 8px; border-radius:8px; }
button.alb-acc-como:hover{ background:color-mix(in srgb, var(--c) 16%, transparent); }
.como-card{ width:min(480px, 100%); }
.como-nota{ padding:10px 12px; border-radius:var(--radius); background:color-mix(in srgb, #5aa9ff 16%, transparent); border:1px solid color-mix(in srgb, #5aa9ff 45%, transparent); font-weight:700; font-size:.88rem; }
.como-pasos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.como-pasos li{ display:flex; gap:12px; align-items:flex-start; }
.como-pasos li > span{ flex:none; width:36px; height:36px; border-radius:12px; display:grid; place-items:center; font-size:1.1rem; background:var(--surface-2); }
.como-pasos li div{ display:flex; flex-direction:column; gap:2px; font-size:.85rem; color:var(--text-dim); line-height:1.4; }
.como-pasos li b{ color:var(--text); font-size:.92rem; }
/* Existencia en "Otra cantidad" (rediseño) */
.cqp-exist{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; padding:8px 10px; border-radius:var(--radius);
  background:color-mix(in srgb, #5aa9ff 12%, transparent); border:1px solid color-mix(in srgb, #5aa9ff 40%, transparent); font-size:.82rem; }
.cqp-exist-ico{ font-size:1.05rem; }
.cqp-exist > span{ color:var(--text-dim); font-weight:700; }
.cqp-exist b{ font-size:1.1rem; color:#5aa9ff; font-weight:900; }
.cqp-exist-usar{ all:unset; cursor:pointer; margin-left:auto; padding:4px 12px; border-radius:8px; font-weight:800; font-size:.78rem; color:#0b1d33; background:#5aa9ff; }
.cqp-exist-usar:hover{ filter:brightness(1.1); }

/* Encabezado del albarán (rediseño) */
.product-head.alb-head{ display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--radius-lg);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent2) 14%, var(--surface)), var(--surface));
  border:1px solid color-mix(in srgb, var(--accent2) 35%, var(--border)); margin-bottom:12px; position:relative; }
.alb-head-ico{ flex:none; width:54px; height:54px; border-radius:16px; display:grid; place-items:center; font-size:1.7rem;
  background:color-mix(in srgb, var(--accent2) 22%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent2) 45%, transparent); }
.alb-head .product-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.alb-head-eyebrow{ font-size:.72rem; font-weight:900; letter-spacing:.6px; text-transform:uppercase; color:var(--accent2); }
.alb-head-num{ margin:0 !important; font-size:1.55rem !important; font-weight:900; letter-spacing:.3px; overflow-wrap:anywhere; }
.alb-head-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.alb-head-badges .code-pill, .alb-head-badges > *{ border-radius:8px !important; }
@media (max-width:600px){ .alb-head-ico{ width:44px; height:44px; font-size:1.4rem; } .alb-head-num{ font-size:1.25rem !important; } }

/* Guardar para ver después: solo el ícono; al pasar el mouse se abre como pastilla con su texto. */
.fav-toggle.fav-chico{ padding:6px !important; gap:0; min-height:44px !important; min-width:44px; justify-content:center; border-radius:8px !important;
  transition: padding .25s ease, gap .25s ease; }
.fav-toggle.fav-chico .fav-txt{ display:inline-block; max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .3s ease, opacity .2s ease, margin .3s ease; margin-left:0; }
.fav-toggle.fav-chico:hover, .fav-toggle.fav-chico:focus-visible{ padding:6px 16px 6px 8px !important; }
.fav-toggle.fav-chico:hover .fav-txt, .fav-toggle.fav-chico:focus-visible .fav-txt{ max-width:220px; opacity:1; margin-left:8px; }
.fav-toggle.fav-chico .act-ico{ width:24px !important; height:24px !important; }

/* El de Guardar va flotando en la esquina del encabezado: al abrirse crece hacia la izquierda
   por ENCIMA, sin empujar nada (pedido de Manuel: no se debe mover lo de abajo). */
.product-head{ position:relative; }
.product-head > .fav-toggle.fav-chico{ position:absolute !important; top:12px; right:12px; margin:0 !important; z-index:5;
  box-shadow:0 6px 18px rgba(0,0,0,.35); }
.product-head:has(> .fav-toggle.fav-chico){ padding-right:66px !important; }

/* Tarjetas de acciones del albarán: mismo alto y ancho, sin huecos (pedido de Manuel). */
.alb-acciones{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; align-items:stretch; }
.alb-acc{ justify-content:flex-start !important; gap:12px !important; }
.alb-acc-cab{ position:relative; flex:1; }
.alb-acc-txt b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alb-acc-txt span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; line-height:1.35; }
.alb-acc .btn{ margin-top:auto !important; min-height:46px; white-space:nowrap; font-size:.82rem; }
.alb-acc-cab button.alb-acc-como{ position:absolute; top:-4px; right:-4px; width:26px; height:26px; padding:0; display:grid; place-items:center;
  border-radius:50%; border:1.5px solid var(--c); color:var(--c); font-weight:900; font-size:.85rem; background:transparent; }
.alb-acc-cab button.alb-acc-como:hover{ background:var(--c); color:#0b1d33; }
.alb-acc-sg .alb-acc-txt{ padding-right:24px; }
@media (max-width:760px){ .alb-acciones{ grid-template-columns:1fr !important; } .alb-acc-txt span{ min-height:0; } }
.alb-head-linea{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:.92rem; }
.alb-head-linea small{ color:var(--text-dim); font-weight:700; font-size:.8rem; }
.alb-head-linea b{ font-weight:900; }
.alb-head-linea i{ font-style:normal; color:var(--border); font-weight:900; }
.alb-head-estado.pend{ color:var(--accent2); } .alb-head-estado.hecho{ color:var(--accent); } .alb-head-estado.cancel{ color:var(--accent3); }
.alb-head-num{ font-size:1.3rem !important; }
.alb-head-linea{ font-size:1.05rem !important; gap:6px 12px !important; }
.alb-head-linea b{ font-size:1.1rem; }
.alb-dato{ cursor:pointer; padding:2px 6px; margin:-2px -6px; border-radius:8px; transition:background .15s; }
.alb-dato:hover{ background:color-mix(in srgb, var(--text) 10%, transparent); }

/* Celular: el encabezado del albarán centrado, y Guardar siempre como ícono (pedido de Manuel). */
@media (max-width:600px){
  .product-head.alb-head{ flex-direction:column; align-items:center; text-align:center; gap:10px; padding:16px 14px !important; }
  .alb-head .product-info{ align-items:center; width:100%; }
  .alb-head-linea{ justify-content:center; flex-direction:column; align-items:center; gap:4px !important; }
  .alb-head-linea i{ display:none; }
  .alb-head-badges{ justify-content:center; }
  .product-head:has(> .fav-toggle.fav-chico){ padding-right:14px !important; }
  .product-head > .fav-toggle.fav-chico{ top:10px; right:10px; }
}
@media (hover:none), (max-width:600px){
  .fav-toggle.fav-chico .fav-txt{ display:none !important; }
  .fav-toggle.fav-chico, .fav-toggle.fav-chico:hover{ padding:6px !important; }
}
/* Guardar para ver después: siempre solo el ícono, también al pasar el mouse (pedido de Manuel). */
.fav-toggle.fav-chico .fav-txt{ display:none !important; }
.fav-toggle.fav-chico, .fav-toggle.fav-chico:hover, .fav-toggle.fav-chico:focus-visible{ padding:6px !important; }

/* Surtidos terminados: tarjeta con el pedido y el albarán como ligas y el 👁 para el detalle */
.st-card{ border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius-lg); background:var(--surface); padding:12px 14px; }
.st-card-warn{ border-left-color:var(--accent2); }
.st-card-fila{ display:flex; gap:12px; align-items:center; }
.st-card-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.st-card-docs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-weight:900; }
.st-link{ font-weight:900 !important; font-size:1rem !important; }
.st-link-alb{ font-size:.85rem !important; font-weight:700 !important; }
.st-card .st-quien{ font-size:.84rem; color:var(--text-dim); overflow-wrap:anywhere; }
.st-resumen{ font-size:.78rem; font-weight:700; color:var(--text-dim); }
.st-card-der{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.st-card .st-hora{ font-weight:800; color:var(--accent2); }
.st-ojo{ all:unset; cursor:pointer; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:1.15rem; background:var(--surface-2); border:1.5px solid var(--border); }
.st-ojo:hover, .st-ojo.activo{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.st-card .st-det{ margin:10px 0 0; border:0; border-top:1px dashed var(--border); border-radius:0; padding:10px 0 0; }
.st-card .st-det[hidden]{ display:none; }
/* Mandar a otra persona (Admin/Moderador): el ícono es 👥 (pedido de Manuel). */
.mf-ico-emoji{ display:inline-grid; place-items:center; font-size:1.6rem; line-height:1; width:auto !important; height:auto !important; }
.st-pop{ width:min(520px, 100%); }
.st-pop-quien{ font-size:.85rem; color:var(--text-dim); font-weight:700; }
.st-pop .st-lineas{ max-height:55vh; overflow:auto; gap:6px; }
.st-pop .st-linea{ padding:8px 10px; border-radius:var(--radius); background:var(--surface-2); }
.urg-card{ width:min(440px, 100%); }
.urg-txt{ margin:0; font-size:.9rem; color:var(--text-dim); line-height:1.45; }
.urg-txt b{ color:var(--text); }
.urg-botones{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.urg-botones .btn{ justify-content:center; font-weight:800; min-height:48px; }
.urg-si{ background:#5b5b5b !important; color:#fff !important; border-color:#888 !important; }
/* -P: el estado largo ("Recepción total completada") se pasa a otro renglón, sin salirse de la ficha */
.po-estado{ flex:0 1 auto; min-width:0; max-width:100%; white-space:normal; text-align:center; line-height:1.25; overflow-wrap:anywhere; }
.po-card-top{ flex-wrap:wrap; }
[data-search-code]{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
/* Historial (tabla de movimientos): usuario, O.C. y albarán en una sola línea, sin partirse letra
   por letra en celular (pedido de Manuel). La tabla ya se desliza de lado. */
table.moves .moves-link, table.moves .mov-link-user, table.moves td.oc{ white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; max-width:none !important; }
table.moves .mov-link-fecha{ white-space:normal !important; word-break:normal !important; overflow-wrap:normal !important; }
/* Avisos legales al pie del login */
.login-legal{ margin-top:14px; max-width:520px; text-align:center; display:flex; flex-direction:column; gap:6px; font-size:.72rem; color:var(--text-dim); line-height:1.45; position:relative; z-index:1; }
.login-legal nav a{ color:var(--accent); text-decoration:none; font-weight:700; }
.login-legal nav a:hover{ text-decoration:underline; }
.login-legal-tag{ align-self:center; padding:3px 12px; border-radius:8px; border:1px solid var(--border); background:color-mix(in srgb, var(--surface) 70%, transparent); font-weight:700; }
.login-legal small{ font-size:.68rem; opacity:.85; }
.login-legal{ align-self:center; margin-left:auto; margin-right:auto; width:100%; align-items:center; }
/* La franja de la migración (cuenta regresiva) solo con la sesión iniciada, no en el login (pedido de Manuel). */

/* Avisos legales: hasta abajo de la pantalla principal (ya no en el login). Solo con el inicio a la vista. */
.home-legal{ display:none; margin:26px auto 30px; padding:0 16px; }
#homePanel:not([style*="none"]) + .home-legal{ display:flex; }
/* ---------- Pronóstico / Lista de materiales / -OP ---------- */
.act-pronostico{ --act:#0e7490; } .act-ldm{ --act:#6d28d9; }
.pr-modal{ width:min(980px, 100%) !important; max-width:min(980px, 100%) !important; }
.pr-cuerpo{ display:flex; flex-direction:column; gap:14px; padding:4px 2px; }
.pr-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.pr-stats > div{ background:var(--surface-2, rgba(255,255,255,.04)); border:1px solid var(--border); border-radius:14px; padding:10px 12px; font-size:.9rem; }
.pr-stats b{ font-size:1.35rem; font-weight:900; color:var(--text); }
.pr-stats span{ display:block; font-size:.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; font-weight:800; margin-top:2px; }
.pr-grafica{ width:100%; height:auto; background:var(--surface-2, rgba(255,255,255,.03)); border:1px solid var(--border); border-radius:14px; }
.pr-eje{ stroke:var(--border); stroke-width:1; stroke-dasharray:3 4; }
.pr-txt{ fill:var(--text-dim); font-size:11px; font-family:inherit; }
.pr-area{ fill:color-mix(in srgb, #22d3ee 22%, transparent); }
.pr-linea{ fill:none; stroke:#22d3ee; stroke-width:2.5; stroke-linejoin:round; }
.pr-num{ text-align:right !important; font-variant-numeric:tabular-nums; font-weight:800; white-space:nowrap; }
.pr-total td{ font-weight:900; background:color-mix(in srgb, var(--text) 6%, transparent); }
.pr-tabla small, .pr-ldm small{ color:var(--text-dim); }
.pr-ldm{ border:1px solid var(--border); border-radius:14px; padding:10px 12px; }
.pr-ldm-cab{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.pr-chip{ font-size:.72rem; font-weight:800; padding:2px 10px; border-radius:8px; border:1.5px solid #a78bfa; color:#c4b5fd; }
.op-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; margin-bottom:12px; border:1px solid var(--border); border-radius:var(--radius-lg, 16px); background:var(--surface); }
.op-cab h2{ margin:0 0 4px; font-size:1.15rem; }
.op-sub{ font-size:.85rem; color:var(--text-dim); min-width:0; }
.op-cuenta{ flex:none; min-width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; background:var(--accent2); color:#1c1203; }
.op-tabla td, .op-tabla th{ white-space:nowrap; }
.op-tabla td:nth-child(3){ white-space:normal; min-width:180px; }
.op-fecha.tarde{ color:#ef4444; font-weight:800; } .op-fecha.hoy{ color:#f59e0b; font-weight:800; }
.op-disp{ color:#22c55e; font-weight:700; }
.op-estado{ display:inline-block; padding:2px 10px; border-radius:8px; font-size:.75rem; font-weight:800; background:#64748b; color:#fff; }
.op-estado.op-done{ background:#16a34a; } .op-estado.op-confirmed{ background:#0ea5e9; } .op-estado.op-progress{ background:#f59e0b; color:#1c1203; } .op-estado.op-cancel{ background:#7f1d1d; } .op-estado.op-to_close{ background:#8b5cf6; }
.share-nota-opc{ background:transparent !important; color:var(--text-dim) !important; border:1px solid var(--border) !important; }
/* Sugerencias de atajos en el buscador */
.atajo-sug-cab{ padding:8px 14px; font-size:.74rem; color:var(--text-dim); border-bottom:1px solid var(--border); }
.atajo-sug-cab b{ color:var(--accent); }
.autocomplete-item.atajo-sug{ display:flex !important; flex-direction:column; align-items:flex-start !important; gap:2px; padding:9px 14px !important; }
.atajo-sug-pref{ font-family:var(--font-code, "JetBrains Mono", monospace); font-weight:900; color:var(--accent); }
.atajo-sug-que{ font-size:.78rem; color:var(--text-dim); white-space:normal; line-height:1.35; }
.atajo-sug-que i{ font-style:normal; opacity:.75; font-family:var(--font-code, monospace); }
/* -OP rediseño: encabezado, resumen, casillas y suma de lo seleccionado */
.op-cab{ display:flex !important; align-items:center; gap:14px; padding:16px 18px !important; background:linear-gradient(120deg, color-mix(in srgb, #0ea5e9 16%, var(--surface)), var(--surface) 60%) !important; border:1px solid color-mix(in srgb, #0ea5e9 35%, var(--border)) !important; }
.op-cab-ico{ flex:none; width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.7rem; background:color-mix(in srgb, #0ea5e9 22%, transparent); border:1px solid color-mix(in srgb, #0ea5e9 45%, transparent); }
.op-cab-txt{ min-width:0; flex:1; }
.op-cab-etq{ font-size:.72rem; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; color:#38bdf8; }
.op-cab-cod{ font-size:1.05rem; font-weight:900; margin:2px 0; overflow-wrap:anywhere; }
.op-cab-nom{ font-size:.8rem; color:var(--text-dim); line-height:1.4; }
.op-resumen{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:0 0 12px; }
.op-resumen > div{ padding:10px 14px; border-radius:14px; border:1px solid var(--border); background:var(--surface); }
.op-resumen b{ display:block; font-size:1.45rem; font-weight:900; font-variant-numeric:tabular-nums; }
.op-resumen span{ font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--text-dim); }
.op-resumen .op-res-total{ border-color:color-mix(in srgb, var(--accent2) 60%, var(--border)); background:color-mix(in srgb, var(--accent2) 12%, var(--surface)); }
.op-resumen .op-res-total b{ color:var(--accent2); }
@media (max-width:600px){ .op-resumen{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.op-wrap{ border:1px solid var(--border); border-radius:16px; overflow:auto; background:var(--surface); }
.op-tabla{ margin:0 !important; }
.op-tabla thead th{ position:sticky; top:0; background:var(--surface-2, var(--surface)); z-index:1; font-size:.7rem; letter-spacing:.8px; }
.op-tabla .op-chk{ width:34px; text-align:center !important; }
.op-tabla input[type=checkbox]{ width:18px; height:18px; accent-color:#0ea5e9; cursor:pointer; }
.op-fila{ cursor:pointer; transition:background .15s; }
.op-fila:hover td{ background:color-mix(in srgb, var(--text) 4%, transparent); }
.op-fila.op-marcada td{ background:color-mix(in srgb, #0ea5e9 14%, transparent) !important; }
.op-ref{ display:inline-block; padding:3px 10px; border-radius:8px; font-family:var(--font-code, monospace); font-weight:800; font-size:.78rem; color:var(--accent); border:1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); cursor:pointer; white-space:nowrap; }
.op-ref:hover{ background:color-mix(in srgb, var(--accent) 15%, transparent); }
.op-origen{ font-weight:600; }
.op-disp-chip{ display:inline-block; padding:2px 9px; border-radius:8px; font-size:.74rem; font-weight:800; color:#22c55e; border:1.5px solid #22c55e66; background:#22c55e14; }
.op-tabla td small{ color:var(--text-dim); font-weight:600; }
.op-tabla tfoot td{ border-top:2px solid var(--border); font-weight:800; }
.op-total-fila td{ background:color-mix(in srgb, var(--accent2) 12%, transparent); font-size:.95rem; }
.op-total-fila td b{ color:var(--accent2); font-size:1.15rem; }
.op-sel-fila td{ background:color-mix(in srgb, #0ea5e9 16%, transparent); }
.op-sel-fila td b{ color:#38bdf8; font-size:1.1rem; }
.op-sel-limpiar{ border:1px solid var(--border); background:transparent; color:var(--text-dim); border-radius:8px; padding:3px 12px; font:inherit; font-size:.75rem; font-weight:800; cursor:pointer; }
/* Pronóstico: solo lo pronosticado, con su fórmula */
.pr-formula{ border:1px solid color-mix(in srgb, #22d3ee 40%, var(--border)); border-radius:16px; padding:14px 16px; background:linear-gradient(120deg, color-mix(in srgb, #0e7490 22%, var(--surface)), var(--surface) 70%); }
.pr-formula.negativo{ border-color:#ef444488; background:linear-gradient(120deg, color-mix(in srgb, #ef4444 16%, var(--surface)), var(--surface) 70%); }
.pr-f-res span{ display:block; font-size:.72rem; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; color:#67e8f9; }
.pr-f-res b{ font-size:2.4rem; font-weight:900; font-variant-numeric:tabular-nums; }
.pr-formula.negativo .pr-f-res b, .pr-formula.negativo .res b{ color:#f87171; }
.pr-f-ops{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0 8px; }
.pr-f-ops > div{ padding:6px 12px; border-radius:12px; border:1px solid var(--border); background:color-mix(in srgb, var(--bg) 40%, transparent); text-align:center; min-width:84px; }
.pr-f-ops b{ display:block; font-size:1.15rem; font-weight:900; font-variant-numeric:tabular-nums; }
.pr-f-ops span{ font-size:.66rem; font-weight:800; text-transform:uppercase; color:var(--text-dim); }
.pr-f-ops .entra b{ color:#22c55e; } .pr-f-ops .sale b{ color:#f59e0b; }
.pr-f-ops i{ font-style:normal; font-weight:900; font-size:1.2rem; color:var(--text-dim); }
.pr-f-nota{ margin:0; font-size:.8rem; color:var(--text-dim); line-height:1.45; }
.pr-f-nota b{ color:#f87171; }
/* Pronóstico: movimientos como lista, con lo que queda después de cada uno */
.prl-lista{ display:flex; flex-direction:column; gap:6px; }
.prl{ display:grid; grid-template-columns:130px minmax(0, 1fr) 120px 90px 100px; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; border:1px solid var(--border); border-left:5px solid var(--border); background:var(--surface); }
.prl-entra{ border-left-color:#22c55e; } .prl-sale{ border-left-color:#f59e0b; }
.prl-ini{ border-left-color:#38bdf8; background:color-mix(in srgb, #38bdf8 8%, var(--surface)); }
.prl-fin{ border-left-color:#22d3ee; background:color-mix(in srgb, #22d3ee 12%, var(--surface)); }
.prl-fin.neg{ border-left-color:#ef4444; background:color-mix(in srgb, #ef4444 12%, var(--surface)); }
.prl-tipo{ font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.6px; color:var(--text-dim); }
.prl-entra .prl-tipo{ color:#22c55e; } .prl-sale .prl-tipo{ color:#f59e0b; }
.prl-doc{ min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.prl-doc > span:not(.prl-pill){ font-weight:800; }
.prl-pill{ padding:2px 10px; border-radius:8px; font-family:var(--font-code, monospace); font-weight:800; font-size:.8rem; border:1.5px solid color-mix(in srgb, var(--accent) 50%, transparent); color:var(--accent); white-space:nowrap; }
.prl-doc small{ color:var(--text-dim); font-size:.75rem; }
.prl-fecha{ font-size:.82rem; color:var(--text-dim); white-space:nowrap; }
.prl-cant{ text-align:right; font-weight:900; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.prl-entra .prl-cant{ color:#22c55e; } .prl-sale .prl-cant{ color:#f59e0b; }
.prl-queda{ text-align:right; font-weight:900; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.prl-queda span{ display:block; font-size:.62rem; font-weight:800; text-transform:uppercase; color:var(--text-dim); }
.prl-queda.neg, .prl-fin.neg .prl-queda{ color:#f87171; }
@media (max-width:640px){
  .prl{ grid-template-columns:1fr auto; grid-template-areas:"tipo cant" "doc queda" "fecha queda"; row-gap:4px; }
  .prl-tipo{ grid-area:tipo; } .prl-doc{ grid-area:doc; } .prl-fecha{ grid-area:fecha; } .prl-cant{ grid-area:cant; } .prl-queda{ grid-area:queda; }
}
.op-cab-ico.op-cab-foto{ width:76px; height:76px; padding:4px; background:#fff; overflow:hidden; } .op-cab-foto img{ width:100%; height:100%; object-fit:contain; border-radius:12px; }
/* Lista de materiales: solo códigos y cantidades; varias listas en acordeón */
.ldm-aviso{ font-size:.85rem; color:var(--text-dim); padding:8px 12px; border-radius:12px; border:1px dashed var(--border); }
.ldm-aviso b{ color:#c4b5fd; }
.ldm-bloque{ padding:0 !important; overflow:hidden; }
.ldm-toggle{ width:100%; margin:0 !important; padding:12px 14px; background:transparent; border:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.ldm-toggle:disabled{ cursor:default; }
.ldm-flecha{ margin-left:auto; transition:transform .2s; color:var(--text-dim); }
.ldm-bloque.abierto .ldm-flecha{ transform:rotate(180deg); }
.ldm-comps{ display:none; padding:0 12px 12px; }
.ldm-bloque.abierto .ldm-comps{ display:block; }
.ldm-bloque.abierto{ border-color:color-mix(in srgb, #a78bfa 55%, var(--border)) !important; }
.ldm-fila{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border); }
.ldm-fila:last-child{ border-bottom:none; }
.ldm-enc{ font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.8px; color:var(--text-dim); justify-content:space-between; }
.ldm-cod{ font-family:var(--font-code, monospace); font-weight:800; font-size:.86rem; cursor:pointer; overflow-wrap:anywhere; min-width:0; }
.ldm-cod:hover{ color:var(--accent); text-decoration:underline; }
.ldm-cant{ margin-left:auto; font-weight:900; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ldm-cant small{ color:var(--text-dim); font-weight:600; }
.ldm-sub{ flex:none; border:1.5px solid #a78bfa88; background:#a78bfa1a; color:#c4b5fd; border-radius:8px; padding:2px 10px; font:inherit; font-size:.72rem; font-weight:800; cursor:pointer; }
.op-cab-foto{ position:relative; cursor:zoom-in; overflow:visible !important; } .op-cab-foto img{ transition:transform .15s; } .op-cab-foto:hover img{ transform:scale(1.05); } .op-foto-n{ position:absolute; top:-6px; right:-6px; min-width:22px; height:22px; padding:0 6px; border-radius:8px; background:var(--accent); color:#1c1203; font-size:.72rem; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.op-prod{ max-width:260px; white-space:normal !important; } .op-prod .ldm-cod{ font-size:.78rem; }
/* -OP: la tabla usa todo el ancho; el producto en máximo 2 renglones, sin partirse letra por letra */
.op-tabla{ width:100%; }
.op-tabla td.op-prod{ white-space:normal !important; min-width:300px; max-width:520px; }
.op-prod-cod{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-family:var(--font-code, monospace); font-weight:800; font-size:.8rem; line-height:1.35; word-break:normal !important; overflow-wrap:anywhere !important; cursor:pointer; color:var(--text); }
.op-prod-cod:hover{ color:var(--accent); text-decoration:underline; }
.op-prod-org{ display:block; margin-top:3px; font-size:.76rem; color:var(--text-dim); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.op-tabla td.op-origen{ white-space:normal !important; min-width:200px; }
.op-tabla td, .op-tabla th{ vertical-align:middle; }
.op-disp-chip.no{ color:#f87171; border-color:#f8717166; background:#f8717114; }
.op-fila[hidden]{ display:none !important; }
.op-pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin:14px 0 6px; flex-wrap:wrap; }
.op-pg{ padding:8px 18px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-weight:800; cursor:pointer; }
.op-pg:disabled{ opacity:.35; cursor:default; }
.op-pg-txt{ font-size:.8rem; font-weight:800; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }
.op-pg-txt b{ color:var(--text); }
/* Paginación de -OP */
.op-pager{ flex-direction:column; gap:8px; }
.op-pg-barra{ display:flex; align-items:center; gap:6px; padding:6px; border-radius:8px; border:1px solid var(--border); background:var(--surface); box-shadow:0 4px 14px rgba(0,0,0,.25); flex-wrap:wrap; justify-content:center; }
.op-pg-n, .op-pg-flecha{ min-width:38px; height:38px; padding:0 10px; border-radius:8px; border:none; background:transparent; color:var(--text); font:inherit; font-weight:800; cursor:pointer; transition:background .15s, transform .1s; }
.op-pg-n:hover, .op-pg-flecha:hover:not(:disabled){ background:color-mix(in srgb, var(--text) 8%, transparent); }
.op-pg-n.activa{ background:linear-gradient(135deg, #38bdf8, #0284c7); color:#fff; box-shadow:0 3px 10px #0ea5e955; }
.op-pg-flecha{ font-size:1.4rem; line-height:1; color:#38bdf8; }
.op-pg-flecha:disabled{ opacity:.3; cursor:default; }
.op-pg-dots{ color:var(--text-dim); padding:0 2px; }
.op-pg-info{ font-size:.78rem; color:var(--text-dim); }
.op-pg-info b{ color:var(--text); }
/* Paginación de -OP con los colores del tema */
.op-pg-n.activa{ background:linear-gradient(135deg, var(--accent), var(--accent2)) !important; color:var(--bg, #111) !important; box-shadow:0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent) !important; }
.op-pg-flecha{ color:var(--accent) !important; }
.op-pg-barra{ border-color:color-mix(in srgb, var(--accent) 35%, var(--border)) !important; }
.op-pg-n:hover, .op-pg-flecha:hover:not(:disabled){ background:color-mix(in srgb, var(--accent) 14%, transparent) !important; }
.op-pg-info b{ color:var(--accent) !important; }
.op-sug-org{ white-space:normal; line-height:1.35; }
/* Paginación de -OP arriba de la tabla: indicador a la izquierda, controles a la derecha */
.op-pager.op-pager-top{ flex-direction:row-reverse !important; justify-content:space-between !important; align-items:center; margin:0 0 10px !important; padding:8px 10px 8px 16px; border-radius:16px; border:1px solid var(--border); background:var(--surface); }
.op-pager-top:empty{ display:none; }
.op-pager-top .op-pg-barra{ box-shadow:none; padding:3px; }
.op-pager-top .op-pg-n, .op-pager-top .op-pg-flecha{ min-width:34px; height:34px; }
.op-pg-info{ display:flex; flex-direction:column; gap:1px; }
.op-pg-aqui{ font-size:.92rem; font-weight:800; color:var(--text); }
.op-pg-aqui b{ color:var(--accent); font-size:1.05rem; }
.op-pg-info > span:last-child{ font-size:.74rem; color:var(--text-dim); }
@media (max-width:640px){ .op-pager.op-pager-top{ flex-direction:column !important; gap:8px; padding:10px; } .op-pg-info{ align-items:center; } }
/* Sugerencias de -OP rediseñadas */
.opsug-cab{ padding:9px 14px; font-size:.76rem; color:var(--text-dim); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.opsug-cab span{ font-weight:900; color:var(--text); padding:1px 8px; border-radius:8px; background:color-mix(in srgb, var(--accent) 18%, transparent); }
.opsug-cab b{ color:var(--accent); }
.opsug-grupo{ padding:8px 14px 4px; font-size:.66rem; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); }
.autocomplete-item.opsug{ display:grid !important; grid-template-columns:30px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:8px 14px !important; text-align:left !important; }
.opsug-ico{ width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent) 14%, transparent); font-size:.95rem; }
.opsug-txt{ min-width:0; display:flex; flex-direction:column; }
.opsug-pri{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.opsug-sub{ font-size:.74rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.opsug-chip{ flex:none; font-size:.72rem; font-weight:900; padding:3px 10px; border-radius:8px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); color:var(--accent); white-space:nowrap; }
/* -OP: fecha prevista como chip */
.op-fecha-chip{ display:inline-flex; align-items:baseline; gap:2px; padding:4px 10px; border-radius:10px; border:1px solid var(--border); background:color-mix(in srgb, var(--text) 5%, transparent); font-variant-numeric:tabular-nums; white-space:nowrap; }
.op-fecha-chip b{ font-weight:900; font-size:.9rem; color:var(--text); }
.op-fecha-chip small{ font-size:.74rem; color:var(--text-dim); font-weight:700; }
.op-fecha-ico{ font-size:.8rem; margin-right:4px; align-self:center; }
.op-fecha.hoy .op-fecha-chip{ border-color:#f59e0b88; background:#f59e0b1a; } .op-fecha.hoy .op-fecha-chip b{ color:#f59e0b; }
.op-fecha.tarde .op-fecha-chip{ border-color:#ef444488; background:#ef44441a; } .op-fecha.tarde .op-fecha-chip b{ color:#f87171; }
/* Sugerencias de pedidos / O.C. / M.O. / albaranes: renglón con ícono, número y cliente sin cortarse */
.autocomplete-item.ac-doc{ display:grid !important; grid-template-columns:34px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:9px 14px !important; text-align:left !important; }
.ac-doc .ac-icon{ width:34px; height:34px; border-radius:11px; display:flex !important; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent) 15%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-size:1rem; }
.ac-doc .ac-body{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left !important; }
.ac-doc .ac-code{ font-family:var(--font-code, monospace); font-weight:900; font-size:.95rem; letter-spacing:.3px; white-space:nowrap; }
.ac-doc .ac-name{ max-width:100%; white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; font-size:.76rem; color:var(--text-dim); text-transform:none; font-weight:600; }
.ac-doc .ac-enter{ opacity:.45; font-size:.85rem; }
.ac-doc.active .ac-enter, .ac-doc:hover .ac-enter{ opacity:1; color:var(--accent); }
.op-fecha-chip{ font-weight:700; font-size:.88rem; color:var(--text); } .op-fecha.hoy .op-fecha-chip{ color:#f59e0b; } .op-fecha.tarde .op-fecha-chip{ color:#f87171; }
#albaBannerSlot .alba-emblema{ cursor:pointer; }

/* =========================================================================
   Paginación global: mismo diseño que -OP en todas las pantallas
   ========================================================================= */
.alba-pag-host{ display:block !important; background:none !important; border:none !important; padding:0 !important; margin:14px 0 6px !important; }
.alba-pag-host > :not(.alba-pag){ display:none !important; }
.alba-pag{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:8px 10px 8px 16px; border-radius:16px; border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background:var(--surface); }
.alba-pag .op-pg-barra{ box-shadow:none; padding:3px; }
.alba-pag .op-pg-n, .alba-pag .op-pg-flecha{ min-width:34px; height:34px; }
@media (max-width:640px){ .alba-pag{ flex-direction:column; padding:10px; } }

/* =========================================================================
   Inicio rediseñado (pedido de Manuel): saludo, tema, Panel De Control y
   últimas búsquedas con el mismo lenguaje de tarjetas.
   ========================================================================= */
#homePanel{ display:flex; flex-direction:column; gap:14px; }
#homePanel:not([style*="none"]){ display:flex !important; }
#homePanel .alba-dice{ margin:0 !important; padding:12px 16px !important; border-radius:16px !important; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border)) !important; background:linear-gradient(110deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 65%) !important; font-size:.92rem; }
#homePanel .alba-dice-mark{ color:var(--accent) !important; }
#homePanel .home-tema{ margin:0 !important; border-radius:16px !important; padding:14px 16px !important; border:1px solid var(--border) !important; background:var(--surface) !important; box-shadow:none !important; }
#homePanel .home-tema-nombre{ font-size:1rem; }
#homePanel .home-tema-nombre b{ color:var(--accent); }
#homePanel .home-title-main, #homePanel .home-section-title{ font-size:.74rem !important; font-weight:900 !important; letter-spacing:1.6px !important; text-transform:uppercase; color:var(--text-dim) !important; margin:6px 0 0 !important; }
#homePanel .home-tiles{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)) !important; gap:10px !important; margin:0 !important; }
#homePanel .home-tile{ position:relative; display:flex !important; align-items:center; gap:10px; min-height:58px; padding:10px 14px !important; border-radius:14px !important; border:1px solid var(--border) !important; background:var(--surface) !important; text-align:left !important; box-shadow:none !important; transition:transform .12s, border-color .12s, background .12s !important; }
#homePanel .home-tile:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 60%, var(--border)) !important; background:color-mix(in srgb, var(--accent) 8%, var(--surface)) !important; }
#homePanel .home-tile-icon{ flex:none; width:36px; height:36px; border-radius:11px; display:flex !important; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent) 14%, transparent); font-size:1.05rem; }
#homePanel .home-tile-icon img{ width:22px; height:22px; object-fit:contain; }
#homePanel .home-tile-title{ font-weight:800 !important; font-size:.84rem !important; line-height:1.25; color:var(--text) !important; text-align:left !important; }
#homePanel .home-tile-badge{ position:absolute; top:-6px; right:-6px; }
#homePanel .home-recent{ grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) !important; gap:8px !important; }
#homePanel .home-recent-item{ display:grid !important; grid-template-columns:30px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:10px 12px !important; border-radius:14px !important; border:1px solid var(--border) !important; background:var(--surface) !important; text-align:left !important; transition:border-color .12s, transform .12s; }
#homePanel .home-recent-item:hover{ transform:translateY(-1px); border-color:color-mix(in srgb, var(--accent) 60%, var(--border)) !important; }
#homePanel .home-recent-num{ width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:900; color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); }
#homePanel .home-recent-body{ min-width:0; display:flex; flex-direction:column; gap:2px; }
#homePanel .home-recent-code{ font-family:var(--font-code, monospace); font-weight:800; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
#homePanel .home-recent-time{ font-size:.72rem; color:var(--text-dim); }
#homePanel .home-recent-go{ color:var(--text-dim); transition:color .12s, transform .12s; }
#homePanel .home-recent-item:hover .home-recent-go{ color:var(--accent); transform:translateX(3px); }
#homePanel .home-clear-btn{ border-radius:8px !important; font-size:.74rem !important; }
.home-legal{ margin-top:8px !important; }

/* ---------- Dock: izquierda, derecha o arriba (se elige desde el lápiz) ---------- */
body[data-dock-pos="izq"] .alba-dock-wrap{ left:14px; right:auto; top:50%; bottom:auto; transform:translateY(-50%); }
body[data-dock-pos="der"] .alba-dock-wrap{ right:14px; left:auto; top:50%; bottom:auto; transform:translateY(-50%); }
body[data-dock-pos="arriba"] .alba-dock-wrap{ top:12px; bottom:auto; }
body[data-dock-pos="izq"] .alba-dock, body[data-dock-pos="der"] .alba-dock{ flex-direction:column; align-items:center; padding:14px 10px; gap:12px; max-height:calc(100vh - 40px); overflow-y:auto; overflow-x:visible; scrollbar-width:none; }
body[data-dock-pos="izq"] .dock-sep, body[data-dock-pos="der"] .dock-sep{ width:32px; height:1px; margin:2px 0; }
body[data-dock-pos="izq"] .dock-item{ transform-origin:left center; }
body[data-dock-pos="der"] .dock-item{ transform-origin:right center; }
body[data-dock-pos="arriba"] .dock-item{ transform-origin:top center; }
body[data-dock-pos="izq"] .dock-label{ left:calc(100% + 14px); bottom:auto; top:50%; transform:translateY(-50%); }
body[data-dock-pos="der"] .dock-label{ right:calc(100% + 14px); left:auto; bottom:auto; top:50%; transform:translateY(-50%); }
body[data-dock-pos="arriba"] .dock-label{ top:calc(100% + 12px); bottom:auto; }
/* El contenido le deja su espacio al dock para que no lo tape. */
body.alba-con-dock[data-dock-pos="izq"] .wrap{ padding-left:96px; }
body.alba-con-dock[data-dock-pos="der"] .wrap{ padding-right:96px; }
body.alba-con-dock[data-dock-pos="arriba"] .wrap{ padding-top:92px; }
body.alba-con-dock[data-dock-pos="izq"] .scroll-top-fab, body.alba-con-dock[data-dock-pos="der"] .scroll-top-fab, body.alba-con-dock[data-dock-pos="arriba"] .scroll-top-fab{ bottom:20px; }

/* ---------- Editar el menú flotante: horizontal en PC ---------- */
.de-pos{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 14px; margin:0 0 10px; border-radius:14px; border:1px solid var(--border); background:var(--surface-2); }
.de-pos-titulo{ font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.6px; color:var(--text-dim); margin-right:auto; }
.de-pos-btn{ padding:7px 14px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; }
.de-pos-btn:hover{ border-color:color-mix(in srgb, var(--accent) 60%, var(--border)); }
.de-pos-btn.activo{ background:var(--accent); border-color:var(--accent); color:var(--bg, #111); }
@media (min-width:900px){
  .dock-editar{ width:min(1180px, 96vw) !important; max-width:min(1180px, 96vw) !important; }
  .dock-editar .nov-lista{ display:grid !important; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows:auto 1fr; grid-auto-flow:column; column-gap:18px; row-gap:6px; align-items:start; max-height:min(64vh, 620px); }
  .dock-editar .de-fila{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:6px; align-content:start; overflow-y:auto; max-height:min(58vh, 560px); padding-right:4px; }
  .dock-editar .de-acciones{ justify-content:flex-end; gap:10px; }
  .dock-editar .de-acciones .btn{ min-width:160px; }
}
/* Dock de lado bien acomodado: todo cabe, nada se sale y el efecto de crecer es más suave */
body[data-dock-pos="izq"] .alba-dock, body[data-dock-pos="der"] .alba-dock{ overflow:visible !important; max-height:none !important; gap:8px !important; padding:10px 8px !important; }
body[data-dock-pos="izq"] .dock-item, body[data-dock-pos="der"] .dock-item{ width:var(--dock-tam, 46px); height:var(--dock-tam, 46px); border-radius:11px; }
body[data-dock-pos="izq"] .dock-svg, body[data-dock-pos="der"] .dock-svg{ width:calc(var(--dock-tam, 46px) * .5); height:calc(var(--dock-tam, 46px) * .5); }
body[data-dock-pos="izq"] .dock-sep, body[data-dock-pos="der"] .dock-sep{ width:70%; align-self:center; }
/* Con el dock arriba, la pestaña de la franja se hace a un lado (izquierda) para no quedar detrás. */
body[data-dock-pos="arriba"] .alba-franja-tab{ margin-left:14px !important; margin-right:auto !important; }
body[data-dock-pos="arriba"] .alba-dock-wrap{ transition:top .2s ease; }

/* Indicadores de la esquina en UNA pastilla (pedido de Manuel): se ve solo la del usuario; al
   pasar el mouse se despliegan hacia arriba el tema y la versión. */
body.alba-con-dock .alba-version-esquina{ gap:0 !important; }
.alba-version-esquina .alba-quien{ order:3 !important; }
.alba-version-esquina .alba-tema-chip{ order:1 !important; }
.alba-version-esquina .alba-ver{ order:2 !important; }
.alba-version-esquina .alba-tema-chip, .alba-version-esquina .alba-ver{
  max-height:0; opacity:0; overflow:hidden; margin:0 !important; pointer-events:none;
  transform:translateY(8px); transition:max-height .22s ease, opacity .18s ease, transform .22s ease, margin .22s ease;
}
.alba-version-esquina:hover .alba-tema-chip, .alba-version-esquina:hover .alba-ver,
.alba-version-esquina:focus-within .alba-tema-chip, .alba-version-esquina:focus-within .alba-ver{
  max-height:60px; opacity:1; pointer-events:auto; transform:none; margin:0 0 6px !important;
}
/* Con el dock a la derecha, los indicadores se pasan a la izquierda para no chocar. */
body.alba-con-dock[data-dock-pos="der"] .alba-version-esquina{ right:auto !important; left:14px !important; transform-origin:bottom left; }

/* ---------- Lupa del recorte ---------- */
.recorte-lupa{ position:fixed; z-index:2147483000; width:140px; height:140px; border-radius:50%; pointer-events:none; display:none; border:3px solid var(--accent, #f7a64a); box-shadow:0 10px 28px rgba(0,0,0,.55), 0 0 0 2px rgba(0,0,0,.5); background:#111; }
.recorte-lupa.show{ display:block; }

/* ---------- Cursor según la acción (pedido de Manuel) ---------- */
button, [role="button"], a[href], summary, label[for], select, .moves-link, .home-tile, .home-recent-item,
[data-search-code], [data-op-mo], [data-target], [data-copy], [data-copiar], [data-copiar-todo], [data-pronostico], [data-ldm],
.autocomplete-item, .po-card, .op-fila, .dock-item, .chip, .ko-chip, .rcf-chip, .copy-btn, input[type="checkbox"], input[type="radio"], input[type="range"], input[type="color"], input[type="file"]{ cursor:pointer; }
button:disabled, button[disabled], [aria-disabled="true"], input:disabled, select:disabled, textarea:disabled, .btn:disabled{ cursor:not-allowed !important; }
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input:not([type]), textarea, [contenteditable="true"]{ cursor:text; }
input[type="date"], input[type="time"], input[type="datetime-local"]{ cursor:pointer; }
body:has(#albaLoader.show), body.cargando{ cursor:progress; }
body:has(#albaLoader.show) *{ cursor:progress !important; }
[aria-busy="true"]{ cursor:wait !important; }
[draggable="true"], .recorte-marco, .cropper-move, .rack-3d, .drag-handle{ cursor:grab; }
[draggable="true"]:active, .recorte-marco:active, .cropper-move:active, .rack-3d:active, .drag-handle:active, .dragging, .dragging *{ cursor:grabbing !important; }
.row-thumb, .main-photo img, .photo-main img, .op-cab-foto, .attachment-thumb img, .bandeja-foto img, img[data-gallery-idx]{ cursor:zoom-in; }
.lightbox-content img, #lightboxImg{ cursor:zoom-out; }
.recorte-sel, .recorte-pt, .recorte-asa, .cropper-crop-box, .cropper-face, .cropper-point, .cropper-line{ cursor:crosshair; }
.cropper-point.point-se, .cropper-point.point-nw{ cursor:nwse-resize; } .cropper-point.point-ne, .cropper-point.point-sw{ cursor:nesw-resize; }
.cropper-face.cropper-move{ cursor:move; }
.act-btn[hidden]{ display:none !important; }
/* ---------- Variantes del producto (rediseño) ---------- */
.pv-modal{ width:min(860px, 100%); max-height:min(88vh, 900px); display:flex; flex-direction:column; padding:0 !important; overflow:hidden; border-radius:20px !important; }
.pv-cab{ position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); background:linear-gradient(110deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface) 70%); }
.pv-cab-ico{ flex:none; width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; background:color-mix(in srgb, var(--accent) 20%, transparent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.pv-cab-txt{ min-width:0; flex:1; }
.pv-cab-titulo{ font-size:1.05rem; font-weight:900; }
.pv-cab-sub{ font-size:.82rem; color:var(--text-dim); margin-top:2px; }
.pv-cab-sub b{ color:var(--accent); }
.pv-cab-cod{ font-family:var(--font-code, monospace); font-weight:800; color:var(--text); overflow-wrap:anywhere; }
.pv-cerrar{ flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface-2, rgba(255,255,255,.05)); color:var(--text); font-size:1rem; font-weight:900; cursor:pointer; transition:background .15s, transform .15s, border-color .15s; }
.pv-cerrar:hover{ background:color-mix(in srgb, var(--err, #ef4444) 22%, transparent); border-color:var(--err, #ef4444); transform:rotate(90deg); }
.pv-lista{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:10px; padding:14px; overflow-y:auto; }
.pv-item{ display:flex !important; flex-direction:column; align-items:stretch; gap:8px; text-align:left !important; padding:12px 14px !important; border-radius:16px !important; border:1px solid var(--border) !important; border-left:5px solid var(--text-dim) !important; background:var(--surface) !important; color:var(--text) !important; font:inherit; white-space:normal !important; transition:transform .12s, border-color .12s, box-shadow .12s; }
.pv-item:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.3); }
.pv-item.variant-ok{ border-left-color:#22c55e !important; }
.pv-item.variant-warn{ border-left-color:#f59e0b !important; }
.pv-item.variant-empty{ border-left-color:#ef4444 !important; opacity:.85; }
.pv-item-cab{ display:flex; align-items:center; gap:8px; min-width:0; }
.pv-item-cod{ font-family:var(--font-code, monospace); font-weight:900; font-size:.9rem; overflow-wrap:anywhere; min-width:0; }
.pv-item-suf{ flex:none; padding:2px 9px; border-radius:8px; font-size:.7rem; font-weight:900; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 50%, transparent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.pv-item-ir{ margin-left:auto; color:var(--text-dim); transition:transform .12s, color .12s; }
.pv-item:hover .pv-item-ir{ color:var(--accent); transform:translateX(3px); }
.pv-item .variante-por-caja{ display:block; font-size:.78rem; line-height:1.45; color:var(--text-dim); padding:8px 10px; border-radius:10px; background:color-mix(in srgb, var(--text) 5%, transparent); }
.pv-item .variant-stock{ align-self:flex-start; font-size:.76rem; font-weight:800; padding:3px 10px; border-radius:8px; background:color-mix(in srgb, var(--text) 6%, transparent); }
.pv-item .variant-stock-ok{ color:#22c55e; } .pv-item .variant-stock-warn{ color:#f59e0b; } .pv-item .variant-stock-empty{ color:#f87171; }
/* Variantes: en celular una lista hacia abajo (una variante por renglón, cada una un solo botón);
   en computadora un panel ancho, horizontal, con todas a la vista. */
.pv-lista{ display:flex !important; flex-direction:column; gap:8px; overflow-x:hidden !important; overflow-y:auto; }
.pv-item{ width:100%; }
@media (min-width:900px){
  .pv-modal{ width:min(1320px, 96vw) !important; max-width:min(1320px, 96vw) !important; }
  .pv-lista{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; padding:16px; }
}
/* -S: estados de pedido */
.op-estado.sp-sale{ background:#16a34a; } .op-estado.sp-draft, .op-estado.sp-sent{ background:#0ea5e9; } .op-estado.sp-done{ background:#64748b; } .op-estado.sp-cancel{ background:#7f1d1d; }
.sp-cli{ font-family:inherit !important; font-weight:800 !important; }
.sp-sal{ display:block; width:max-content; margin-top:4px; padding:2px 8px; border-radius:6px; font-size:.72rem; font-weight:800; white-space:nowrap; }
.sp-sal-ok{ color:#22c55e; background:#22c55e1a; border:1px solid #22c55e55; }
.sp-sal-pend{ color:#f59e0b; background:#f59e0b1a; border:1px solid #f59e0b55; }
.sp-sal-nada{ color:var(--text-dim); border:1px solid var(--border); }
/* Barra de desplazamiento a los lados arriba de las tablas anchas */
.scroll-arriba{ overflow-x:auto; overflow-y:hidden; height:14px; margin:0 0 4px; max-width:100%; scrollbar-color:var(--accent) transparent; }
.scroll-arriba > div{ height:1px; }
.scroll-arriba[hidden]{ display:none !important; }
.scroll-arriba::-webkit-scrollbar{ height:10px; }
.scroll-arriba::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--accent) 70%, transparent); border-radius:6px; }
.scroll-arriba::-webkit-scrollbar-track{ background:color-mix(in srgb, var(--text) 8%, transparent); border-radius:6px; }
/* Los dos botones de Mandar cerrados: mismo cuadro y mismo tamaño de ícono (pedido de Manuel). */
.mandar-fab:not(.mf-abierto):not(:hover):not(:focus-visible){ width:54px !important; height:54px !important; padding:0 !important; gap:0 !important; justify-content:center !important; border-radius:12px !important; }
.mandar-fab:not(.mf-abierto):not(:hover):not(:focus-visible) .mf-escena{ width:38px; height:38px; padding:0 !important; display:flex; align-items:center; justify-content:center; background:none !important; }
.mandar-fab:not(.mf-abierto):not(:hover):not(:focus-visible) .mf-ap,
.mandar-fab:not(.mf-abierto):not(:hover):not(:focus-visible) .mf-ico-otros{ width:34px !important; height:34px !important; font-size:1.7rem !important; line-height:34px; display:flex; align-items:center; justify-content:center; }
@media (max-width:700px){
  .mandar-fab:not(.mf-abierto):not(:hover):not(:focus-visible){ width:50px !important; height:50px !important; }
}
/* ---------- Códigos compartidos (rediseño) ---------- */
.rc-card{ position:relative; display:grid; grid-template-columns:44px minmax(0, 1fr) auto; gap:12px; align-items:start; padding:14px 14px 14px 16px; margin:0 0 10px; border-radius:16px; border:1px solid var(--border); border-left:5px solid var(--border); background:var(--surface); cursor:pointer; transition:transform .12s, border-color .12s, box-shadow .12s; }
.rc-card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow:0 8px 20px rgba(0,0,0,.28); }
.rc-card.recibido-nuevo{ border-left-color:var(--accent); background:linear-gradient(110deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 60%); }
.rc-card.rc-despues{ border-left-color:var(--accent2); }
.rc-avatar{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.95rem; color:var(--bg, #111); background:linear-gradient(135deg, var(--accent), var(--accent2)); }
.rc-cuerpo{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.rc-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.rc-cod{ font-family:var(--font-code, monospace); font-weight:900; font-size:1rem; color:var(--accent); overflow-wrap:anywhere; min-width:0; }
.rc-chip{ flex:none; padding:2px 8px; border-radius:6px; font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.4px; }
.rc-nuevo{ background:var(--accent); color:var(--bg, #111); }
.rc-chip-despues{ color:var(--accent2); border:1px solid color-mix(in srgb, var(--accent2) 55%, transparent); background:color-mix(in srgb, var(--accent2) 12%, transparent); text-transform:none; }
.rc-nombre{ font-size:.82rem; line-height:1.4; color:var(--text-dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rc-meta{ display:flex; flex-wrap:wrap; gap:6px; font-size:.76rem; color:var(--text-dim); }
.rc-meta b{ color:var(--text); }
.rc-nota{ display:flex; gap:6px; align-items:flex-start; width:max-content; max-width:100%; padding:7px 11px; border-radius:4px 12px 12px 12px; font-size:.84rem; background:color-mix(in srgb, var(--accent) 12%, var(--surface-2, transparent)); border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); color:var(--text); overflow-wrap:anywhere; }
.rc-acciones{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:10px; align-self:stretch; }
.rc-del{ position:static !important; width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text-dim); cursor:pointer; }
.rc-del:hover{ color:var(--err, #ef4444); border-color:var(--err, #ef4444); }
.rc-ir{ position:static !important; width:34px; height:34px; border-radius:10px; display:flex !important; align-items:center; justify-content:center; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); transform:none !important; }
@media (max-width:600px){ .rc-card{ grid-template-columns:36px minmax(0, 1fr) auto; gap:10px; padding:12px; } .rc-avatar{ width:36px; height:36px; font-size:.82rem; } }
/* Acceso de moderador: amarillo (#E8C547) en vez del rojo de Admin. */
.login-email-hint.show.es-admin.es-mod{ background: radial-gradient(120% 140% at 0% 0%, #f7e08a 0%, #E8C547 45%, #8a6d12 100%) !important; color:#2a2002; }
.login-email-hint.es-admin.es-mod .leh-label, .login-email-hint.es-admin.es-mod .leh-admin-nota, .login-email-hint.es-admin.es-mod .leh-admin-nota strong{ color:#2a2002 !important; opacity:1; }
.login-email-hint.es-admin.es-mod .leh-icono{ width:38px; height:38px; border-radius:50%; background:#fff !important; color:#8a6d12 !important; border:none !important; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(0,0,0,.25); font-weight:900; }
/* Acceso de moderador: naranja #FF9F40 (pedido de Manuel). */
.login-email-hint.show.es-admin.es-mod{ background: radial-gradient(120% 140% at 0% 0%, #ffc58a 0%, #FF9F40 45%, #9a4a00 100%) !important; color:#2a1400; }
.login-email-hint.es-admin.es-mod .leh-label, .login-email-hint.es-admin.es-mod .leh-admin-nota, .login-email-hint.es-admin.es-mod .leh-admin-nota strong{ color:#2a1400 !important; }
.login-email-hint.es-admin.es-mod .leh-icono{ color:#9a4a00 !important; font-size:1.25rem; }
.login-email-hint.es-admin.es-mod .leh-icono{ position:relative; overflow:visible; }
/* "mod": la misma tarjeta de Cuenta encontrada, con el acento naranja #FF9F40. */
.login-email-hint.es-mod:not(.es-admin){ border-left-color:#FF9F40 !important; background:linear-gradient(90deg, color-mix(in srgb, #FF9F40 18%, transparent), color-mix(in srgb, #FF9F40 4%, transparent)) !important; }
.login-email-hint.es-mod:not(.es-admin).show{ border-color:color-mix(in srgb, #FF9F40 40%, transparent) !important; border-left-color:#FF9F40 !important; }
.login-email-hint.es-mod:not(.es-admin) .leh-label{ color:#FF9F40 !important; }
/* Login por alias: Usuario (azul) y Espectador (gris) */
.login-email-hint.es-usr{ border-left-color:#38bdf8 !important; background:linear-gradient(90deg, #38bdf82e, #38bdf80a) !important; }
.login-email-hint.es-usr .leh-label{ color:#38bdf8 !important; }
.login-email-hint.es-esp{ border-left-color:#a1a1aa !important; background:linear-gradient(90deg, #a1a1aa2e, #a1a1aa0a) !important; }
.login-email-hint.es-esp .leh-label{ color:#d4d4d8 !important; }
/* Espectador: solo códigos, piezas y fotos */
:is(html.es-espectador, body.es-espectador) .total-piezas-copy-hint, :is(html.es-espectador, body.es-espectador) .other-locs, :is(html.es-espectador, body.es-espectador) .manual-loc-card,
:is(html.es-espectador, body.es-espectador) .add-manual-location-btn, :is(html.es-espectador, body.es-espectador) .edit-locations-btn, :is(html.es-espectador, body.es-espectador) .product-actions-row,
:is(html.es-espectador, body.es-espectador) .albaSelectorCuadricula, :is(html.es-espectador, body.es-espectador) .product-gear-btn, :is(html.es-espectador, body.es-espectador) .ficha-historial,
:is(html.es-espectador, body.es-espectador) .row-photo-btns, :is(html.es-espectador, body.es-espectador) .photo-upload-btns, :is(html.es-espectador, body.es-espectador) .attachments-btns,
:is(html.es-espectador, body.es-espectador) .notes-edit-btn, :is(html.es-espectador, body.es-espectador) #productVariantsNotice{ display:none !important; }
:is(html.es-espectador, body.es-espectador) .total-piezas-copy{ pointer-events:none; }
/* Aviso breve del login (3 s), con animación de entrada y salida */
.aviso-login-breve{ position:fixed; left:50%; top:22%; z-index:2147483000; width:min(420px, calc(100vw - 32px)); display:flex; align-items:flex-start; gap:12px; padding:16px 18px 18px; border-radius:16px; overflow:hidden;
  background:var(--surface, #1f1a14); color:var(--text, #f3ead8); border:1.5px solid #FF9F40; box-shadow:0 20px 50px rgba(0,0,0,.55);
  opacity:0; transform:translate(-50%, -14px) scale(.92); transition:opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.3); pointer-events:none; }
.aviso-login-breve.entra{ opacity:1; transform:translate(-50%, 0) scale(1); }
.aviso-login-breve.sale{ opacity:0; transform:translate(-50%, -10px) scale(.95); transition:opacity .35s ease, transform .4s ease; }
.alb-ico{ flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background:#FF9F4026; }
.alb-txt{ font-size:.9rem; line-height:1.45; font-weight:600; }
.alb-barra{ position:absolute; left:0; bottom:0; height:4px; width:100%; background:#FF9F40; transform-origin:left; animation:albBarra 3s linear forwards; }
@keyframes albBarra{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
/* Aviso del login, versión inmersiva */
.aviso-login-breve{ inset:0 !important; left:0 !important; top:0 !important; width:auto !important; padding:16px !important; display:flex !important; align-items:center; justify-content:center; background:none !important; border:none !important; box-shadow:none !important; border-radius:0 !important; overflow:visible !important; transform:none !important; }
.aviso-login-breve.entra, .aviso-login-breve.sale{ transform:none !important; }
.alb-fondo{ position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, #ff9f4033, rgba(0,0,0,.72) 60%); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.alb-card{ position:relative; width:min(440px, 100%); padding:30px 26px 26px; border-radius:22px; text-align:center; overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb, #FF9F40 22%, var(--surface, #1f1a14)), var(--surface, #1f1a14) 60%);
  border:1.5px solid #FF9F40aa; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px #ff9f4040;
  transform:translateY(24px) scale(.86); transition:transform .45s cubic-bezier(.2,1.2,.3,1); }
.aviso-login-breve.entra .alb-card{ transform:none; }
.aviso-login-breve.sale .alb-card{ transform:translateY(-18px) scale(.9); filter:blur(2px); transition:transform .4s ease, filter .4s ease; }
.alb-halo{ position:absolute; left:50%; top:-60px; width:220px; height:220px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle, #ff9f4055, transparent 70%); animation:albHalo 2.4s ease-in-out infinite; pointer-events:none; }
@keyframes albHalo{ 0%,100%{ opacity:.6; transform:translateX(-50%) scale(.9); } 50%{ opacity:1; transform:translateX(-50%) scale(1.1); } }
.alb-card .alb-ico{ position:relative; width:72px; height:72px; margin:0 auto 14px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:2.2rem; background:#FF9F40; box-shadow:0 10px 26px #ff9f4066; animation:albLlave 1.1s ease .25s 2; }
@keyframes albLlave{ 0%,100%{ transform:rotate(0); } 20%{ transform:rotate(-16deg); } 40%{ transform:rotate(14deg); } 60%{ transform:rotate(-8deg); } 80%{ transform:rotate(5deg); } }
.alb-titulo{ position:relative; font-size:1.2rem; font-weight:900; margin-bottom:8px; color:#FFB870; }
.alb-card .alb-txt{ position:relative; font-size:.92rem; line-height:1.5; font-weight:600; opacity:.92; }
.alb-card .alb-barra{ height:5px; background:linear-gradient(90deg, #FF9F40, #ffd29a); }
@media (prefers-reduced-motion: reduce){ .alb-halo, .alb-card .alb-ico{ animation:none; } }
/* Espectador (pedido de Manuel): solo el buscador; nada de panel. En el dock, solo Inicio y Salir. */
:is(html.es-espectador, body.es-espectador) #homePanel, :is(html.es-espectador, body.es-espectador) .home-legal, :is(html.es-espectador, body.es-espectador) #sectionsLauncher{ display:none !important; }
:is(html.es-espectador, body.es-espectador) .dock-item:not(.dock-item-salir):not([data-target="albaHomeBtn"]), :is(html.es-espectador, body.es-espectador) .dock-item-editar{ display:none !important; }
:is(html.es-espectador, body.es-espectador) .mobile-drawer [data-target]:not([data-target="logoutBtn"]):not([data-target="albaHomeBtn"]){ display:none !important; }
/* Espectador sin resultado en pantalla: el buscador al centro de la pantalla. */
:is(html.es-espectador, body.es-espectador):not(:has(#resultPanel.show)) #albaBannerSlot{ margin-top:calc(50vh - 140px); transition:margin-top .35s ease; }
:is(html.es-espectador, body.es-espectador) #albaBannerSlot{ transition:margin-top .35s ease; }
/* Espectador: en la ficha solo código, descripción, fotos y cantidades. */
:is(html.es-espectador, body.es-espectador) #resultPanel .alba-dice, :is(html.es-espectador, body.es-espectador) #productBadgesRow, :is(html.es-espectador, body.es-espectador) .acc-cuadricula,
:is(html.es-espectador, body.es-espectador) #resultPanel .qr-btn, :is(html.es-espectador, body.es-espectador) .guardar-fab, :is(html.es-espectador, body.es-espectador) .fav-btn, :is(html.es-espectador, body.es-espectador) [id*="favBtn"],
:is(html.es-espectador, body.es-espectador) .total-piezas-desglose{ display:none !important; }
/* Espectador: sin el letrero de "Sin foto"; el historial de búsqueda sí (dock y su sección). */
:is(html.es-espectador, body.es-espectador) .no-photo-badge, :is(html.es-espectador, body.es-espectador) .photo-panel:has(.no-photo-badge){ display:none !important; }
:is(html.es-espectador, body.es-espectador) .dock-item[data-target="searchHistoryBtn"]{ display:inline-flex !important; }
:is(html.es-espectador, body.es-espectador) .mobile-drawer [data-target="searchHistoryBtn"]{ display:revert !important; }
:is(html.es-espectador, body.es-espectador) .alba-version-esquina .alba-tema-chip, :is(html.es-espectador, body.es-espectador) .alba-version-esquina .alba-ver, :is(html.es-espectador, body.es-espectador) .mobile-drawer .alba-ver, :is(html.es-espectador, body.es-espectador) .mobile-drawer .alba-tema-chip{ display:none !important; }
 :is(html.es-espectador, body.es-espectador) #albaFranjaTab{ display:none !important; }
:is(html.es-espectador, body.es-espectador) .alba-dock .dock-item.dock-item[data-target="searchHistoryBtn"]:not(.x):not(.y){ display:inline-flex !important; }
:is(html.es-espectador, body.es-espectador) .internal-notes, :is(html.es-espectador, body.es-espectador) .notes-botones{ display:none !important; }
/* Espectador: ver fotos sí, guardarlas/editarlas no (ni botón ni mantener presionado ni arrastrar). */
:is(html.es-espectador, body.es-espectador) #lightboxGuardar, :is(html.es-espectador, body.es-espectador) #lightboxRecortar,
:is(html.es-espectador, body.es-espectador) #lightboxGirar, :is(html.es-espectador, body.es-espectador) #lightboxTitulo,
:is(html.es-espectador, body.es-espectador) #lightboxBorrar{ display:none !important; }
:is(html.es-espectador, body.es-espectador) img{ -webkit-touch-callout:none !important; -webkit-user-drag:none !important; user-select:none !important; }
.adj-seccion.adj-al-lado{ margin:0 !important; width:100%; }
.adj-seccion.adj-al-lado .section-title{ margin-top:0 !important; }
:is(html.es-espectador, body.es-espectador) .product-head .product-info{ min-width:0; flex:1; }
/* Espectador: las adjuntas sin título, en collage que se acomoda según cuántas haya. */
:is(html.es-espectador, body.es-espectador) .adj-seccion .section-title, :is(html.es-espectador, body.es-espectador) .adj-seccion .attach-acciones,
:is(html.es-espectador, body.es-espectador) .adj-seccion .attach-check, :is(html.es-espectador, body.es-espectador) .adj-seccion .attach-nota-btn,
:is(html.es-espectador, body.es-espectador) .adj-seccion .attach-borrar-barra, :is(html.es-espectador, body.es-espectador) .acc-cuadricula{ display:none !important; }
:is(html.es-espectador, body.es-espectador) .adj-seccion{ border:none !important; padding:0 !important; }

/* Espectador: adjuntas en una cuadrícula sencilla. Cada foto completa (sin zoom), un cuadro por foto. */
:is(html.es-espectador, body.es-espectador) .adj-seccion .attachments-row{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(150px, 180px)) !important; grid-auto-rows:auto !important; gap:10px !important; justify-content:start; align-items:start; }
:is(html.es-espectador, body.es-espectador) .adj-seccion .attachments-row > .attach-thumb-wrap{ position:relative; display:block !important; width:100% !important; height:auto !important; aspect-ratio:1 / 1; margin:0 !important; padding:0 !important; grid-column:auto !important; grid-row:auto !important; border-radius:12px; overflow:hidden; background:#0b0b0b; border:1px solid var(--border); }
:is(html.es-espectador, body.es-espectador) .adj-seccion .attachments-row > .attach-thumb-wrap > *:not(.attach-thumb){ display:none !important; }
:is(html.es-espectador, body.es-espectador) .adj-seccion .attachments-row .attach-thumb{ position:absolute !important; inset:0; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; margin:0 !important; object-fit:contain !important; border:none !important; border-radius:0 !important; }
:is(html.es-espectador, body.es-espectador) #dictarBtn{ display:none !important; }
:is(html.es-espectador, body.es-espectador) #albaLoader, :is(html.es-espectador, body.es-espectador) #mandarCarga{ display:none !important; } :is(html.es-espectador, body.es-espectador):has(#albaLoader.show), :is(html.es-espectador, body.es-espectador):has(#albaLoader.show) *{ cursor:progress !important; }
/* Espectador buscando: un indicador discreto en el mismo buscador (barra que corre + "Buscando…"). */
:is(html.es-espectador, body.es-espectador) #mainSearch{ position:relative; }
:is(html.es-espectador, body.es-espectador):has(#albaLoader.show) #mainSearch::after{
  content:''; position:absolute; left:12px; right:12px; bottom:-8px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent); background-size:40% 100%; background-repeat:no-repeat;
  animation:espBusca 1s linear infinite; }
:is(html.es-espectador, body.es-espectador):has(#albaLoader.show) #mainSearch::before{
  content:'Buscando el producto…'; position:absolute; left:16px; bottom:-30px; font-size:.78rem; font-weight:700; color:var(--accent);
  animation:espLatido 1.2s ease-in-out infinite; }
:is(html.es-espectador, body.es-espectador):has(#albaLoader.show) #searchBtn{ animation:espLatido 1s ease-in-out infinite; }
@keyframes espBusca{ from{ background-position:-40% 0; } to{ background-position:140% 0; } }
@keyframes espLatido{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
/* El indicador queda DENTRO del buscador (el banner recorta lo de afuera): se hace espacio abajo. */
:is(html.es-espectador, body.es-espectador):has(#albaLoader.show) #mainSearch{ padding-bottom:30px !important; transition:padding .2s ease; }
:is(html.es-espectador, body.es-espectador):has(#albaLoader.show) #mainSearch::after{ bottom:24px !important; }
:is(html.es-espectador, body.es-espectador):has(#albaLoader.show) #mainSearch::before{ bottom:4px !important; line-height:1.2; }
#lightboxImg{ cursor:zoom-in; touch-action:none; will-change:transform; }
#lightboxImg.lb-zoom{ position:relative; z-index:3; }
.lightbox-content:has(#lightboxImg.lb-zoom){ overflow:hidden; }
#homePanel a.home-tile{ text-decoration:none; color:inherit; }
:is(html.es-espectador, body.es-espectador) .home-tile-historia{ display:none !important; }
/* Quitar fondo */
.fondo-espera-caja{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:26px 22px !important; max-width:340px; }
.fondo-espera-ico{ font-size:2.4rem; animation:espLatido 1s ease-in-out infinite; }
.fondo-espera-caja small{ opacity:.75; }
.fondo-vista{ width:min(560px, 100%); }
.fondo-vista-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.fondo-vista-tabs{ display:flex; gap:6px; margin-bottom:10px; }
.fondo-tab{ flex:1; padding:8px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-weight:800; cursor:pointer; }
.fondo-tab.activo{ background:var(--accent); color:var(--bg, #111); border-color:var(--accent); }
.fondo-vista-img{ border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; max-height:60vh;
  background:repeating-conic-gradient(#d9d9d9 0 25%, #ffffff 0 50%) 0 0 / 22px 22px; }
.fondo-vista-img img{ max-width:100%; max-height:60vh; object-fit:contain; }
.recorte-extra-fondo{ font-weight:800; }
.recorte-extra-volver[hidden], .recorte-extra-fondo[hidden]{ display:none !important; }
.fondo-vista-pregunta{ margin:10px 0 4px; font-size:.86rem; text-align:center; opacity:.85; } .fondo-vista .ml-modal-actions{ flex-wrap:wrap; justify-content:center; }

/* ---------- Recortar foto (rediseño) ---------- */
.rcf-modal.rcf-v2{ width:min(1180px, 100%) !important; height:min(820px, 100%) !important; padding:0 !important; gap:0 !important; border-radius:20px !important; }
.rcf-v2 .rcf-cab{ justify-content:flex-start; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); background:linear-gradient(110deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 70%); }
.rcf-cab-ico{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background:color-mix(in srgb, var(--accent) 22%, transparent); flex:none; }
.rcf-cab-txt{ display:flex; flex-direction:column; flex:1; min-width:0; }
.rcf-v2 .rcf-titulo{ font-size:1.08rem; font-weight:900; }
.rcf-sub{ font-size:.76rem; color:var(--text-dim); }
.rcf-cuerpo{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) 300px; }
.rcf-v2 .rcf-lienzo{ border-radius:0 !important; min-height:260px; background:repeating-conic-gradient(#151515 0 25%, #0d0d0d 0 50%) 0 0 / 22px 22px; }
.rcf-panel{ display:flex; flex-direction:column; gap:14px; padding:14px; border-left:1px solid var(--border); overflow-y:auto; background:var(--surface); }
.rcf-seccion-tit{ font-size:.68rem; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px; }
.rcf-formas{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.rcf-forma{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2, transparent); color:var(--text); font:inherit; font-size:.72rem; font-weight:800; cursor:pointer; transition:border-color .12s, background .12s, transform .12s; }
.rcf-forma:hover{ border-color:var(--accent); transform:translateY(-1px); }
.rcf-forma.activo{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); }
.rcf-forma .rcf-forma-ico{ margin:0 !important; }
.rcf-ico-angulo{ font-size:1.05rem; line-height:1; width:auto !important; height:auto !important; border:none !important; background:none !important; }
.rcf-tools{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.rcf-tool{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text); font:inherit; font-size:1.05rem; font-weight:900; cursor:pointer; }
.rcf-tool small{ font-size:.62rem; font-weight:700; color:var(--text-dim); }
.rcf-tool:hover{ border-color:var(--accent); color:var(--accent); }
.rcf-v2 .rcf-nota{ margin:auto 0 0; font-size:.74rem; color:var(--text-dim); line-height:1.4; }
.rcf-v2 .rcf-acciones{ display:grid; grid-template-columns:1fr 1.4fr; gap:8px; }
.rcf-v2 .rcf-acciones .btn{ justify-content:center; }
@media (max-width:800px){
  .rcf-modal.rcf-v2{ height:100% !important; border-radius:0 !important; }
  .rcf-cuerpo{ grid-template-columns:1fr; grid-template-rows:minmax(240px, 1fr) auto; }
  .rcf-panel{ border-left:none; border-top:1px solid var(--border); max-height:46vh; padding:12px; gap:10px; }
  .rcf-formas{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
  .rcf-tools{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .rcf-tool small{ display:none; }
  .rcf-sub{ display:none; }
}
/* Ángulo dentro del recortador */
.rcf-angulo-capa{ position:absolute; inset:0; z-index:5; touch-action:none; cursor:crosshair; }
.rcf-angulo-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.rcf-angulo-fuera{ fill:rgba(0,0,0,.55); fill-rule:evenodd; }
.rcf-angulo-borde{ fill:none; stroke:var(--accent); stroke-width:2.5; stroke-dasharray:7 5; }
.rcf-angulo-pt{ position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:var(--accent); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.6); pointer-events:none; }
.rcf-tool:disabled{ opacity:.35; cursor:not-allowed; }
/* Botones de fotos en cuadrícula 2×2, con Quitar fondo */
.pub-grid{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:8px !important; width:100%; }
.pub-grid .btn{ width:100%; justify-content:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pub-fondo-btn{ --act:#b45309; background:linear-gradient(135deg, #f59e0b, #b45309) !important; color:#fff !important; border-color:#f59e0b88 !important; }
.pub-fondo-ico{ width:22px; height:22px; border-radius:50%; background:#fff3; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; }
.fondo-elige{ width:min(560px, 100%); }
.fondo-elige-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; }
.fondo-elige-foto{ aspect-ratio:1/1; border-radius:10px; border:2px solid var(--border); background:#0b0b0b; padding:0; overflow:hidden; cursor:pointer; }
.fondo-elige-foto:hover{ border-color:var(--accent); }
.fondo-elige-foto img{ width:100%; height:100%; object-fit:contain; }
:is(html.es-espectador, body.es-espectador) .pub-grid{ display:none !important; }
/* Acciones del visor fuera de la foto, arriba a la izquierda, en línea con "Cerrar". */
.lightbox-content > .lightbox-acciones{ position:absolute !important; top:-46px !important; left:0 !important; right:auto !important; bottom:auto !important; transform:none !important;
  display:flex !important; flex-wrap:nowrap !important; gap:6px; max-width:calc(100% - 130px) !important; padding:4px 6px; border-radius:10px; background:rgba(0,0,0,.6); opacity:1 !important; }
.lightbox-content > .lightbox-acciones .lightbox-accion{ position:static !important; }
@media (max-width:600px){ .lightbox-content > .lightbox-acciones{ gap:4px; padding:3px 4px; } .lightbox-content > .lightbox-acciones .lightbox-accion{ width:34px !important; height:34px !important; } }

/* =========================================================================
   Visor de fotos — rediseño completo (pedido de Manuel)
   Arriba: quién la subió (izq.) y Cerrar (der.). Al centro la foto grande.
   A los lados, flechas grandes de vidrio. Abajo: pestañas, puntos y una barra
   con las acciones (con su nombre).
   ========================================================================= */
#lightboxOverlay{ background:radial-gradient(circle at 50% 40%, rgba(30,30,34,.92), rgba(0,0,0,.97)) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
#lightboxOverlay .lightbox-content{ position:fixed !important; inset:0 !important; width:auto !important; height:auto !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center; justify-content:center; background:none !important; border:none !important; box-shadow:none !important; }
#lightboxOverlay .lightbox-stage{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; width:100%; height:100%; padding:78px 96px 150px; box-sizing:border-box; }
#lightboxOverlay .lightbox-img-wrap{ display:flex; align-items:center; justify-content:center; max-width:100%; max-height:100%; }
#lightboxOverlay #lightboxImg{ max-width:100% !important; max-height:calc(100vh - 240px) !important; border-radius:16px !important; box-shadow:0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08) !important; background:#0b0b0b; object-fit:contain; }

#lightboxOverlay .lightbox-close{ position:fixed !important; top:16px !important; right:16px !important; left:auto !important; z-index:10; display:inline-flex; align-items:center; gap:6px; padding:9px 16px !important; border-radius:12px !important;
  background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.18) !important; color:#fff !important; font-weight:900; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
#lightboxOverlay .lightbox-close:hover{ background:rgba(239,68,68,.25) !important; border-color:#ef4444 !important; }

#lightboxOverlay .lightbox-caption{ position:fixed !important; top:16px !important; left:16px !important; right:auto !important; bottom:auto !important; transform:none !important; z-index:10; max-width:min(520px, calc(100vw - 170px));
  margin:0 !important; padding:8px 14px 8px 8px !important; border-radius:14px !important; background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.14) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; flex-wrap:wrap; gap:6px 12px; }

#lightboxOverlay .lightbox-nav{ position:fixed !important; top:50% !important; transform:translateY(-50%); z-index:9; width:58px !important; height:58px !important; border-radius:50% !important; font-size:2rem !important; font-weight:300;
  background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.18) !important; color:#fff !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .15s, transform .15s; }
#lightboxOverlay .lightbox-nav.prev{ left:18px !important; right:auto !important; }
#lightboxOverlay .lightbox-nav.next{ right:18px !important; left:auto !important; }
#lightboxOverlay .lightbox-nav:hover{ background:var(--accent) !important; color:#111 !important; transform:translateY(-50%) scale(1.08); }

#lightboxOverlay .lightbox-tabs{ position:fixed !important; bottom:92px !important; left:50% !important; transform:translateX(-50%); z-index:9; display:flex; gap:0 !important; padding:4px; border-radius:12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); margin:0 !important; }
#lightboxOverlay .lightbox-tab{ padding:7px 16px !important; border-radius:9px !important; border:none !important; background:transparent !important; color:rgba(255,255,255,.75) !important; font-weight:800; font-size:.8rem !important; box-shadow:none !important; }
#lightboxOverlay .lightbox-tab.active{ background:var(--accent) !important; color:#111 !important; }
#lightboxOverlay .lightbox-dots{ position:fixed !important; bottom:136px !important; left:50% !important; transform:translateX(-50%); z-index:9; margin:0 !important; }
#lightboxOverlay .lightbox-dot{ width:8px; height:8px; border-radius:4px !important; transition:width .2s, background .2s; }
#lightboxOverlay .lightbox-dot.active{ width:22px; background:var(--accent) !important; }

#lightboxOverlay .lightbox-content > .lightbox-acciones{ position:fixed !important; top:auto !important; bottom:20px !important; left:50% !important; transform:translateX(-50%) !important; max-width:calc(100vw - 24px) !important;
  gap:4px !important; padding:6px !important; border-radius:16px !important; background:rgba(20,20,22,.78) !important; border:1px solid rgba(255,255,255,.14); box-shadow:0 14px 40px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
#lightboxOverlay .lightbox-content > .lightbox-acciones .lightbox-accion{ width:auto !important; height:auto !important; min-width:62px; padding:7px 10px 6px !important; border-radius:11px !important; border:none !important; background:transparent !important; box-shadow:none !important;
  flex-direction:column; align-items:center; gap:3px; font-size:1.15rem !important; line-height:1; color:#fff; cursor:pointer; transition:background .12s; }
#lightboxOverlay .lightbox-content > .lightbox-acciones .lightbox-accion::after{ display:block; margin-top:3px; font-size:.62rem; font-weight:800; letter-spacing:.3px; color:rgba(255,255,255,.75); }
#lightboxOverlay #lightboxGuardar::after{ content:"Guardar"; }
#lightboxOverlay #lightboxRecortar::after{ content:"Recortar"; }
#lightboxOverlay #lightboxQuitarFondo::after{ content:"Sin fondo"; }
#lightboxOverlay #lightboxGirar::after{ content:"Girar"; }
#lightboxOverlay #lightboxTitulo::after{ content:"Título"; }
#lightboxOverlay #lightboxBorrar::after{ content:"Borrar"; color:#fca5a5; }
#lightboxOverlay .lightbox-content > .lightbox-acciones .lightbox-accion:hover{ background:rgba(255,255,255,.1) !important; }
#lightboxOverlay #lightboxBorrar:hover{ background:rgba(239,68,68,.22) !important; }

@media (max-width:640px){
  #lightboxOverlay .lightbox-stage{ padding:70px 10px 170px; }
  #lightboxOverlay #lightboxImg{ max-height:calc(100vh - 260px) !important; }
  #lightboxOverlay .lightbox-nav{ width:44px !important; height:44px !important; font-size:1.5rem !important; top:auto !important; bottom:140px !important; transform:none; }
  #lightboxOverlay .lightbox-nav:hover{ transform:none; }
  #lightboxOverlay .lightbox-nav.prev{ left:10px !important; }
  #lightboxOverlay .lightbox-nav.next{ right:10px !important; }
  #lightboxOverlay .lightbox-tabs{ bottom:96px !important; }
  #lightboxOverlay .lightbox-dots{ bottom:150px !important; }
  #lightboxOverlay .lightbox-caption{ max-width:calc(100vw - 130px); font-size:.8rem; }
  #lightboxOverlay .lightbox-content > .lightbox-acciones .lightbox-accion{ min-width:50px; padding:6px 6px 5px !important; }
}
#lightboxOverlay .lightbox-dots{ bottom:156px !important; }
@media (max-width:640px){ #lightboxOverlay .lightbox-dots{ bottom:162px !important; } #lightboxOverlay .lightbox-nav{ bottom:180px !important; } #lightboxOverlay .lightbox-stage{ padding-bottom:196px; } #lightboxOverlay #lightboxImg{ max-height:calc(100vh - 290px) !important; } }

/* Visor de fotos en celular (pedido de Manuel): todo acomodado sin encimarse. */
@media (max-width:640px){
  /* Arriba: quién la subió a la izquierda (compacto) y solo la ✕ a la derecha. */
  #lightboxOverlay .lightbox-close{ top:calc(10px + env(safe-area-inset-top, 0px)) !important; right:10px !important; width:44px !important; min-width:0 !important; height:44px !important; max-width:44px !important; padding:0 !important; justify-content:center; font-size:0 !important; border-radius:12px !important; }
  #lightboxOverlay .lightbox-close::before{ content:"✕"; font-size:1.1rem; font-weight:900; }
  #lightboxOverlay .lightbox-caption{ top:calc(10px + env(safe-area-inset-top, 0px)) !important; left:10px !important; right:auto !important; width:auto !important; max-width:calc(100vw - 74px) !important; min-height:44px; box-sizing:border-box;
    padding:5px 10px 5px 5px !important; gap:2px 8px !important; font-size:.72rem !important; flex-wrap:wrap; align-items:center; }
  #lightboxOverlay .lightbox-caption img{ width:30px !important; height:30px !important; }
  #lightboxOverlay .lightbox-caption *{ font-size:inherit; }
  /* La foto: todo el espacio entre la barra de arriba y los controles de abajo. */
  #lightboxOverlay .lightbox-stage{ padding:calc(70px + env(safe-area-inset-top, 0px)) 8px 200px !important; }
  #lightboxOverlay #lightboxImg{ max-height:calc(100vh - 290px) !important; max-height:calc(100dvh - 290px) !important; max-width:100% !important; border-radius:12px !important; }
  /* Abajo, de arriba hacia abajo: flechas + puntos en una fila, pestañas y acciones. */
  #lightboxOverlay .lightbox-nav{ top:auto !important; bottom:150px !important; width:42px !important; height:42px !important; font-size:1.4rem !important; }
  #lightboxOverlay .lightbox-nav.prev{ left:12px !important; }
  #lightboxOverlay .lightbox-nav.next{ right:12px !important; }
  #lightboxOverlay .lightbox-dots{ bottom:166px !important; }
  #lightboxOverlay .lightbox-tabs{ bottom:96px !important; padding:3px !important; }
  #lightboxOverlay .lightbox-tab{ padding:7px 14px !important; font-size:.74rem !important; white-space:nowrap; }
  #lightboxOverlay .lightbox-content > .lightbox-acciones{ bottom:calc(14px + env(safe-area-inset-bottom, 0px)) !important; padding:4px !important; gap:2px !important; }
  #lightboxOverlay .lightbox-content > .lightbox-acciones .lightbox-accion{ min-width:54px !important; padding:6px 4px 5px !important; font-size:1.05rem !important; }
  #lightboxOverlay .lightbox-content > .lightbox-acciones .lightbox-accion::after{ font-size:.58rem; white-space:nowrap; }
  #lightboxOverlay #lightboxQuitarFondo::after{ content:"Fondo"; }
  /* El botón de "Menú" de la orilla no se mete en el visor. */
  body:has(#lightboxOverlay.show) .mobile-drawer-tab, body:has(#lightboxOverlay.show) .drawer-tab, body:has(#lightboxOverlay.show) [class*="menu-tab"]{ display:none !important; }
}
body:has(#lightboxOverlay.show) #drawerHandle{ display:none !important; }
/* PC: la foto más grande (aunque sea chica de origen, se agranda hasta llenar el alto) y la barra de acciones más grande. */
@media (min-width:641px){
  #lightboxOverlay .lightbox-stage{ padding:74px 90px 168px !important; }
  #lightboxOverlay #lightboxImg{ height:calc(100vh - 250px) !important; width:auto !important; max-height:calc(100vh - 250px) !important; max-width:100% !important; }
  #lightboxOverlay .lightbox-content > .lightbox-acciones{ padding:8px !important; gap:6px !important; border-radius:18px !important; }
  #lightboxOverlay .lightbox-content > .lightbox-acciones .lightbox-accion{ min-width:80px !important; padding:10px 12px 8px !important; font-size:1.45rem !important; border-radius:13px !important; }
  #lightboxOverlay .lightbox-content > .lightbox-acciones .lightbox-accion::after{ font-size:.72rem !important; margin-top:5px; }
  #lightboxOverlay .lightbox-tabs{ bottom:108px !important; }
  #lightboxOverlay .lightbox-tab{ padding:8px 18px !important; font-size:.84rem !important; }
  #lightboxOverlay .lightbox-dots{ bottom:162px !important; }
}
/* Vista de quitar fondo: la foto completa, sin cortarse. */
.fondo-vista{ max-height:calc(100vh - 24px); overflow-y:auto; }
.fondo-vista-img{ flex:none !important; max-height:none !important; overflow:visible !important; padding:6px; }
.fondo-vista-img img{ display:block; width:auto !important; height:auto !important; max-width:100% !important; max-height:52vh !important; object-fit:contain !important; }

/* Botones de fotos: que el texto quepa (se parte en dos renglones si hace falta) también cuando no hay foto. */
.pub-grid .btn{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; line-height:1.15; min-height:42px; font-size:.74rem !important; padding:7px 8px !important; text-align:center; gap:6px; }
.photo-panel:has(.no-photo-badge) .pub-grid{ margin-top:8px; }
.photo-panel:has(.no-photo-badge){ display:flex; flex-direction:column; align-items:stretch; gap:6px; }

/* PRUEBA (pedido de Manuel): sin pantalla de carga a pantalla completa para nadie. Mientras
   busca, el mismo indicador del Espectador: una línea que corre bajo el buscador y
   "Buscando…". Para regresar a las de antes, borrar este bloque. */
#albaLoader{ display:none !important; }
#mainSearch{ position:relative; }
body:has(#albaLoader.show) #mainSearch{ padding-bottom:30px !important; transition:padding .2s ease; }
body:has(#albaLoader.show) #mainSearch::after{
  content:''; position:absolute; left:12px; right:12px; bottom:24px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent); background-size:40% 100%; background-repeat:no-repeat;
  animation:espBusca 1s linear infinite; }
body:has(#albaLoader.show) #mainSearch::before{
  content:'Buscando…'; position:absolute; left:16px; bottom:4px; font-size:.78rem; font-weight:700; color:var(--accent); line-height:1.2;
  animation:espLatido 1.2s ease-in-out infinite; }
body:has(#albaLoader.show) #searchBtn{ animation:espLatido 1s ease-in-out infinite; }
body:has(#albaLoader.show), body:has(#albaLoader.show) *{ cursor:progress !important; }
.adj-seccion .attachments-btns.pub-grid .btn{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; justify-content:center; text-align:center; min-height:42px; }
/* Mientras busca: solo el buscador (al centro) con "Buscando <lo que sea>…"; nada del panel ni
   de lo de antes. Al llegar el resultado todo vuelve y el buscador sube. */
body:has(#albaLoader.show) #mainSearch::before{ content:attr(data-buscando) !important; max-width:calc(100% - 32px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body:has(#albaLoader.show) #homePanel, body:has(#albaLoader.show) .home-legal, body:has(#albaLoader.show) #resultPanel,
body:has(#albaLoader.show) .odoo-list-panel, body:has(#albaLoader.show) #sectionsLauncher, body:has(#albaLoader.show) .mandar-fab,
body:has(#albaLoader.show) #scrollTopFab{ display:none !important; }
body:has(#albaLoader.show) #albaBannerSlot{ margin-top:calc(50vh - 150px) !important; transition:margin-top .3s ease; }
#albaBannerSlot{ transition:margin-top .3s ease; }
/* Más fluidez (pedido de Manuel): el buscador baja y sube suave, la línea corre más suelta y lo
   encontrado entra deslizándose. */
#albaBannerSlot{ transition:margin-top .6s cubic-bezier(.22,1,.36,1) !important; will-change:margin-top; }
body:has(#albaLoader.show) #mainSearch::after{ animation:espBuscaSuave 1.4s cubic-bezier(.45,0,.55,1) infinite !important; background-size:45% 100% !important; }
@keyframes espBuscaSuave{ 0%{ background-position:-45% 0; } 100%{ background-position:145% 0; } }
body:has(#albaLoader.show) #mainSearch::before{ animation:espTexto 1.6s ease-in-out infinite !important; }
@keyframes espTexto{ 0%,100%{ opacity:1; transform:translateY(0); } 50%{ opacity:.55; transform:translateY(-1px); } }
#mainSearch{ transition:padding .35s cubic-bezier(.22,1,.36,1) !important; }
#resultPanel.show{ animation:resultadoEntra .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes resultadoEntra{ from{ opacity:0; transform:translateY(26px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ #albaBannerSlot, #mainSearch{ transition:none !important; } #resultPanel.show{ animation:none; } }
/* Indicador de búsqueda como elemento real, debajo del buscador. */
body:has(#albaLoader.show) #mainSearch::before, body:has(#albaLoader.show) #mainSearch::after{ content:none !important; display:none !important; }
body:has(#albaLoader.show) #mainSearch{ padding-bottom:0 !important; }
.buscando-ind{ display:none; position:relative; align-items:center; gap:10px; margin:10px 4px 2px; padding:8px 12px 12px; border-radius:10px; overflow:hidden;
  background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); color:var(--accent); font-weight:800; font-size:.86rem; }
body.alba-buscando .buscando-ind{ display:flex; animation:biEntra .35s cubic-bezier(.22,1,.36,1) both; }
.bi-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; animation:espTexto 1.6s ease-in-out infinite; }
.bi-spin{ flex:none; width:16px; height:16px; border-radius:50%; border:2.5px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color:var(--accent); animation:biGira .8s linear infinite; }
.bi-barra{ position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, transparent, var(--accent), transparent); background-size:45% 100%; background-repeat:no-repeat; animation:espBuscaSuave 1.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes biGira{ to{ transform:rotate(360deg); } }
@keyframes biEntra{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
body.alba-buscando #homePanel, body.alba-buscando .home-legal, body.alba-buscando #resultPanel, body.alba-buscando .odoo-list-panel, body.alba-buscando .mandar-fab, body.alba-buscando #scrollTopFab{ display:none !important; }
body.alba-buscando #albaBannerSlot{ margin-top:calc(50vh - 160px) !important; }
/* Indicador de búsqueda debajo del banner: arriba el giro y la barra, abajo el texto. */
.buscando-ind{ flex-direction:column !important; align-items:center !important; gap:8px !important; width:min(520px, calc(100% - 32px)); margin:14px auto 0 !important; padding:12px 16px 14px !important; box-sizing:border-box; }
.bi-fila{ display:flex; align-items:center; gap:10px; width:100%; }
.bi-pista{ position:relative; flex:1; height:4px; border-radius:4px; overflow:hidden; background:color-mix(in srgb, var(--accent) 18%, transparent); }
.bi-pista .bi-barra{ position:absolute; inset:0; height:auto; }
.bi-txt{ max-width:100%; text-align:center; font-size:.88rem; }
/* Metros: 1.6 m = 1 m 60 cm */
.total-piezas-metros{ display:block; font-size:.82rem; font-weight:800; color:var(--accent); margin-top:2px; }
.loc-qty-metros{ display:block; font-size:.72rem; font-weight:800; opacity:.85; }
.photo-box{ position:relative; }
#productGearBtn.gear-en-foto{ position:absolute !important; top:10px; right:10px; z-index:3; margin:0 !important; width:40px; height:40px; padding:0 !important; border-radius:50% !important;
  display:flex !important; align-items:center; justify-content:center; font-size:1.2rem; background:rgba(0,0,0,.55) !important; border:1px solid rgba(255,255,255,.35) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 4px 12px rgba(0,0,0,.35); transition:transform .25s ease, background .2s; }
#productGearBtn.gear-en-foto:hover{ transform:rotate(60deg); background:rgba(0,0,0,.75) !important; }
.total-piezas-value.total-piezas-value-metros{ font-size:1.35rem !important; line-height:1.2; }
.cant-metros{ font-size:.86em; line-height:1.2; white-space:normal; }

/* =========================================================================
   "Me acabo de actualizar": ya no a pantalla completa. Un cartel arriba,
   como el de "Buscando…", mientras la app se recarga sola.
   ========================================================================= */
.alba-actualizando{ inset:auto !important; top:14px !important; left:50% !important; right:auto !important; bottom:auto !important; transform:translateX(-50%); width:min(460px, calc(100vw - 24px)) !important;
  padding:12px 16px 16px !important; border-radius:14px !important; background:var(--surface, #1f1a14) !important; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.45) !important; overflow:hidden !important; animation:biEntra .35s cubic-bezier(.22,1,.36,1) both !important; }
.alba-actualizando .aa-chispas, .alba-actualizando .aa-escena, .alba-actualizando .aa-pasos, .alba-actualizando .aa-marca{ display:none !important; }
.alba-actualizando .aa-caja{ flex-direction:row !important; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 10px !important; }
.alba-actualizando .aa-titulo{ font-size:1rem !important; text-shadow:none !important; }
.alba-actualizando .aa-titulo::before{ content:"✨ "; }
.alba-actualizando .aa-version{ padding:3px 10px !important; font-size:.76rem !important; box-shadow:none !important; }
.alba-actualizando .aa-pie{ width:100%; font-size:.74rem !important; }
.alba-actualizando::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, transparent, var(--accent), transparent); background-size:45% 100%; background-repeat:no-repeat; animation:espBuscaSuave 1.4s cubic-bezier(.45,0,.55,1) infinite; }

/* =========================================================================
   Mantenimiento: sin pantalla que bloquee ni cerrar sesiones. Un cartel arriba
   y el buscador y las acciones desactivados mientras dure.
   ========================================================================= */
.alba-mant-overlay{ position:fixed !important; inset:auto !important; top:12px !important; left:50% !important; transform:translateX(-50%); z-index:2147482000 !important;
  width:min(520px, calc(100vw - 24px)) !important; height:auto !important; padding:0 !important; background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.alba-mant-overlay .alba-mant-caja{ display:grid !important; grid-template-columns:auto 1fr; gap:4px 12px; align-items:center; text-align:left !important; padding:12px 14px !important; border-radius:14px !important;
  background:linear-gradient(110deg, #78350f, #1f1a14 70%) !important; border:1px solid #f59e0b88 !important; box-shadow:0 14px 40px rgba(0,0,0,.5) !important; max-width:none !important; width:100% !important; }
.alba-mant-overlay .alba-mant-icono{ grid-row:span 3; width:44px !important; height:44px !important; margin:0 !important; font-size:1.6rem !important; }
.alba-mant-overlay .alba-mant-saludo{ font-size:.82rem !important; margin:0 !important; }
.alba-mant-overlay .alba-mant-texto{ font-size:.9rem !important; font-weight:800; margin:0 !important; }
.alba-mant-overlay .alba-mant-espera{ margin:0 !important; justify-content:flex-start !important; font-size:.72rem; }
html.alba-mant-puesto #mainSearch, html.alba-mant-puesto #homePanel, html.alba-mant-puesto #resultPanel, html.alba-mant-puesto .alba-dock-wrap,
html.alba-mant-puesto .odoo-list-panel, html.alba-mant-puesto .mandar-fab, html.alba-mant-puesto #drawerHandle{ pointer-events:none !important; opacity:.45 !important; filter:grayscale(.6); user-select:none; }
html.alba-mant-puesto body{ overflow:auto !important; }
/* Mantenimiento (corrección): no se ve nada de la app, solo el cartel, centrado. */
html.alba-mant-puesto body > *:not(#albaMantenimiento):not(script):not(style){ visibility:hidden !important; pointer-events:none !important; }
html.alba-mant-puesto body{ background:radial-gradient(circle at 50% 45%, color-mix(in srgb, #f59e0b 14%, var(--bg, #111)), var(--bg, #111) 70%) !important; }
#albaMantenimiento.alba-mant-overlay{ top:50% !important; left:50% !important; transform:translate(-50%, -50%) !important; width:min(440px, calc(100vw - 32px)) !important; visibility:visible !important; }
#albaMantenimiento .alba-mant-caja{ display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; gap:10px !important; padding:26px 22px 22px !important;
  border-radius:20px !important; background:linear-gradient(160deg, color-mix(in srgb, #f59e0b 22%, var(--surface, #1f1a14)), var(--surface, #1f1a14) 65%) !important; border:1.5px solid #f59e0b99 !important; }
#albaMantenimiento .alba-mant-icono{ width:76px !important; height:76px !important; border-radius:50%; display:flex !important; align-items:center; justify-content:center; font-size:2.6rem !important; background:#fff2; position:static !important; }
#albaMantenimiento .alba-mant-engrane{ display:inline-block; animation:biGira 4s linear infinite; }
#albaMantenimiento .alba-mant-saludo{ font-size:.92rem !important; }
#albaMantenimiento .alba-mant-texto{ font-size:1.1rem !important; font-weight:900 !important; line-height:1.35; }
#albaMantenimiento .alba-mant-espera{ justify-content:center !important; padding:8px 12px; border-radius:10px; background:rgba(0,0,0,.25); }
/* Mantenimiento: rediseño del cartel */
#albaMantenimiento .alba-mant-caja{ position:relative; overflow:hidden; gap:12px !important; padding:30px 24px 26px !important; border-radius:22px !important;
  background:linear-gradient(165deg, #3a2410 0%, #1d160f 55%, #120e0a 100%) !important; border:1px solid #f59e0b66 !important; box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset !important; }
#albaMantenimiento .alba-mant-caja::before{ content:"EN MANTENIMIENTO"; order:-1; font-size:.68rem; font-weight:900; letter-spacing:2.5px; color:#1c1203; background:#f59e0b; padding:4px 12px; border-radius:6px; }
#albaMantenimiento .alba-mant-caja::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg, transparent, #f59e0b, transparent); background-size:45% 100%; background-repeat:no-repeat; animation:espBuscaSuave 1.6s cubic-bezier(.45,0,.55,1) infinite; }
#albaMantenimiento .alba-mant-icono{ position:relative !important; width:88px !important; height:88px !important; border-radius:50% !important; background:radial-gradient(circle at 35% 30%, #fbbf24, #b45309) !important; border:none !important;
  box-shadow:0 10px 30px rgba(245,158,11,.45), 0 0 0 6px rgba(245,158,11,.15) !important; animation:mantLatido 2.2s ease-in-out infinite; }
#albaMantenimiento .alba-mant-engrane{ font-size:2.6rem !important; filter:grayscale(1) brightness(3) drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
@keyframes mantLatido{ 0%,100%{ box-shadow:0 10px 30px rgba(245,158,11,.45), 0 0 0 6px rgba(245,158,11,.15); } 50%{ box-shadow:0 10px 30px rgba(245,158,11,.6), 0 0 0 14px rgba(245,158,11,.06); } }
#albaMantenimiento .alba-mant-saludo{ color:rgba(255,255,255,.8) !important; font-size:.95rem !important; }
#albaMantenimiento .alba-mant-saludo b{ color:#fbbf24 !important; }
#albaMantenimiento .alba-mant-texto{ color:#fff !important; font-size:1.15rem !important; font-weight:900 !important; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); width:100%; box-sizing:border-box; }
#albaMantenimiento .alba-mant-espera{ background:none !important; padding:0 !important; color:rgba(255,255,255,.65) !important; gap:6px; }
#albaMantenimiento .alba-mant-punto{ background:#f59e0b !important; }
/* Mantenimiento: etiqueta legible y engrane fijo dibujado (sin animación). */
#albaMantenimiento .alba-mant-caja::before{ position:static !important; inset:auto !important; width:auto !important; height:auto !important; display:inline-block !important; transform:none !important; animation:none !important;
  background:#f59e0b !important; color:#1c1203 !important; font-size:.72rem !important; font-weight:900 !important; letter-spacing:2px !important; padding:5px 14px !important; border-radius:7px !important; opacity:1 !important; }
#albaMantenimiento .alba-mant-icono{ animation:none !important; background:radial-gradient(circle at 35% 30%, #fbbf24, #b45309) !important; }
#albaMantenimiento .alba-mant-engrane{ display:none !important; }
#albaMantenimiento .alba-mant-icono::after{ content:''; width:46px; height:46px; display:block;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19.14 12.94a7.07 7.07 0 0 0 .05-.94 7.07 7.07 0 0 0-.05-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.61-.22l-2.39.96a7.03 7.03 0 0 0-1.63-.94l-.36-2.54A.5.5 0 0 0 13.88 2h-3.84a.5.5 0 0 0-.49.42l-.36 2.54c-.59.24-1.13.56-1.63.94l-2.39-.96a.5.5 0 0 0-.61.22L2.64 8.48a.5.5 0 0 0 .12.64l2.03 1.58a7.07 7.07 0 0 0 0 1.88l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32a.5.5 0 0 0 .61.22l2.39-.96c.5.38 1.04.7 1.63.94l.36 2.54a.5.5 0 0 0 .49.42h3.84a.5.5 0 0 0 .49-.42l.36-2.54c.59-.24 1.13-.56 1.63-.94l2.39.96a.5.5 0 0 0 .61-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58zM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7z'/%3E%3C/svg%3E"); }
/* Mantenimiento: ícono de la computadora con </> en lugar del engrane */
#albaMantenimiento .alba-mant-icono{ width:96px !important; height:96px !important; background:#fff !important; border-radius:22px !important; }
#albaMantenimiento .alba-mant-icono::after{ width:72px !important; height:72px !important; background:no-repeat center/contain url("iconos/mantenimiento.png") !important; }
/* Cartel de "Me acabo de actualizar": en PC abajo al centro; en celular, al centro de la pantalla. */
.alba-actualizando{ top:auto !important; bottom:28px !important; left:50% !important; transform:translateX(-50%) !important; width:min(520px, calc(100vw - 24px)) !important; padding:16px 20px 18px !important; }
.alba-actualizando .aa-titulo{ font-size:1.1rem !important; }
@media (max-width:700px){
  .alba-actualizando{ top:50% !important; bottom:auto !important; transform:translate(-50%, -50%) !important; padding:20px 18px 22px !important; }
  .alba-actualizando .aa-caja{ flex-direction:column !important; }
  .alba-actualizando .aa-titulo{ font-size:1.15rem !important; }
}
.alba-actualizando{ animation:aaAparece .35s ease both !important; }
@keyframes aaAparece{ from{ opacity:0; } to{ opacity:1; } }
/* Aviso de mantenimiento para el Admin: rediseño y abre el menú al tocarlo */
#albaMantChip.alba-mant-chip{ display:grid !important; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:10px; align-items:center; cursor:pointer;
  padding:8px 16px 8px 12px !important; border-radius:12px !important; background:linear-gradient(110deg, #f59e0b, #b45309) !important; color:#1c1203 !important;
  border:1px solid #fde68a !important; box-shadow:0 10px 28px rgba(245,158,11,.4) !important; font-size:.84rem !important; transition:transform .15s, box-shadow .15s; }
#albaMantChip.alba-mant-chip:hover{ transform:translateX(-50%) translateY(-2px) !important; box-shadow:0 14px 34px rgba(245,158,11,.55) !important; }
#albaMantChip .amc-luz{ grid-row:span 2; width:12px; height:12px; border-radius:50%; background:#dc2626; box-shadow:0 0 0 3px #fff6, 0 0 10px #dc2626; animation:espLatido 1.2s ease-in-out infinite; }
#albaMantChip .amc-txt{ font-weight:700; white-space:nowrap; }
#albaMantChip .amc-txt b{ font-weight:900; }
#albaMantChip .amc-sub{ font-size:.66rem; font-weight:700; opacity:.8; white-space:nowrap; }
/* El aviso de mantenimiento del Admin sí se puede tocar y va arriba a la derecha (no encima de la franja morada). */
#albaMantChip.alba-mant-chip{ pointer-events:auto !important; animation:none !important; left:auto !important; right:12px !important; top:12px !important; transform:none !important; z-index:2147483100 !important; }
#albaMantChip.alba-mant-chip:hover{ transform:translateY(-2px) !important; }
#albaMantChip.alba-mant-chip *{ pointer-events:none; }
/* Pestaña de la franja de la migración: a la esquina izquierda. */
#albaFranjaTab.alba-franja-tab, #albaFranjaTab.alba-franja-tab.oculta{ margin-left:14px !important; margin-right:auto !important; }
/* ---------- Categorías ---------- */
.cat-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; border:1px solid color-mix(in srgb, #38bdf8 55%, var(--border)); background:color-mix(in srgb, #38bdf8 12%, transparent); color:#7dd3fc; font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; }
.cat-chip:hover{ background:color-mix(in srgb, #38bdf8 24%, transparent); }
.cat-buscar{ display:flex; gap:8px; margin:0 0 12px; }
.cat-buscar input{ flex:1; min-width:0; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; }
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; }
.cat-card{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px; border-radius:14px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; text-align:left; cursor:pointer; transition:transform .12s, border-color .12s; }
.cat-card:hover{ transform:translateY(-2px); border-color:var(--accent); }
.cat-card.vacia{ opacity:.5; }
.cat-card-ico{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background:color-mix(in srgb, var(--accent) 15%, transparent); }
.cat-card-txt{ display:flex; flex-direction:column; min-width:0; }
.cat-card-txt b{ font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-card-txt small{ font-size:.7rem; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-card-n{ text-align:right; font-weight:900; color:var(--accent); font-size:1.05rem; line-height:1.1; }
.cat-card-n small{ display:block; font-size:.6rem; font-weight:700; color:var(--text-dim); }
.cat-volver{ margin-bottom:10px; }
.cat-prods{ display:flex; flex-direction:column; gap:6px; }
.cat-prod{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 2fr) auto; align-items:center; gap:12px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.cat-prod:hover{ border-color:var(--accent); }
.cat-prod-cod{ font-family:var(--font-code, monospace); font-weight:900; font-size:.82rem; color:var(--accent); overflow-wrap:anywhere; }
.cat-prod-nom{ font-size:.8rem; color:var(--text-dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cat-prod-qty{ font-weight:900; white-space:nowrap; }
.cat-prod-qty.cero{ color:#f87171; }
@media (max-width:640px){ .cat-prod{ grid-template-columns:1fr auto; } .cat-prod-nom{ grid-column:1 / -1; grid-row:2; } }
.cat-card-ico img, .op-cab-ico img{ width:70%; height:70%; object-fit:contain; }
.cat-chip-ico{ width:18px; height:18px; object-fit:contain; }
/* Categoría: encabezado rediseñado */
.cat-cab{ padding:18px 20px !important; gap:16px !important; }
.cat-cab .op-cab-ico{ width:64px !important; height:64px !important; border-radius:18px !important; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, #38bdf8 18%, transparent)) !important; }
.cat-cab .op-cab-etq{ font-size:.66rem !important; letter-spacing:2px !important; }
.cat-cab .op-cab-cod{ font-size:1.6rem !important; font-weight:900 !important; line-height:1.1; margin:2px 0 8px !important; }
.cat-cab-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cat-cab-chips span{ padding:3px 10px; border-radius:7px; font-size:.76rem; font-weight:700; color:var(--text-dim); background:color-mix(in srgb, var(--text) 6%, transparent); border:1px solid var(--border); }
.cat-cab-chips .cat-cab-n{ color:var(--text); border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); }
.cat-cab-chips .cat-cab-n b{ color:var(--accent); font-size:.9rem; }
.cat-prod{ grid-template-columns:56px minmax(0, 1.1fr) minmax(0, 2fr) auto !important; }
.cat-prod-foto{ width:56px; height:56px; border-radius:10px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; }
.cat-prod-foto img{ width:100%; height:100%; object-fit:contain; }
.cat-prod-foto.sin{ background:color-mix(in srgb, var(--text) 6%, transparent); }
.cat-prod-foto.sin img{ width:60%; height:60%; opacity:.75; }
@media (max-width:640px){ .cat-prod{ grid-template-columns:52px minmax(0, 1fr) auto !important; } .cat-prod-foto{ grid-row:span 2; width:52px; height:52px; } .cat-prod-nom{ grid-column:2 / -1 !important; grid-row:2 !important; } }
.cat-filtros{ display:flex; gap:6px; margin:0 0 12px; flex-wrap:wrap; }
.cat-filtro{ padding:7px 14px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; }
.cat-filtro.activo{ background:var(--accent); border-color:var(--accent); color:var(--bg, #111); }
/* Quitar fondo: el botón se bloquea y dice que está trabajando */
.fondo-trabajando{ opacity:.75; cursor:progress !important; }
.fondo-spin{ display:inline-block; width:14px; height:14px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:biGira .8s linear infinite; vertical-align:-2px; }
.fondo-tocado{ transform:scale(.96); filter:brightness(1.2); transition:transform .12s, filter .12s; }
#lightboxQuitarFondo.fondo-trabajando{ animation:espLatido 1s ease-in-out infinite; }
/* Miniaturas de categoría: la foto llena el cuadro, sin franjas blancas */
.cat-prod-foto:not(.sin){ background:#0b0b0b !important; }
.cat-prod-foto:not(.sin) img{ object-fit:cover !important; }
.cat-prod-foto:not(.sin){ cursor:zoom-in; } .cat-volver-ficha{ margin-bottom:12px; }
/* Historial: barra de filtro y Borrar todo rediseñadas */
#historialPanel .surtidos-date-filter{ display:flex !important; align-items:center; gap:8px; padding:6px !important; border-radius:14px !important; border:1px solid var(--border) !important; background:var(--surface) !important; margin:0 0 12px !important; }
#historialFiltro{ flex:1; min-width:0; height:42px; padding:0 14px !important; border-radius:10px !important; border:1px solid transparent !important; background:color-mix(in srgb, var(--text) 5%, transparent) !important; color:var(--text) !important; font:inherit; font-size:.9rem !important; transition:border-color .15s, background .15s; }
#historialFiltro:focus{ outline:none; border-color:var(--accent) !important; background:color-mix(in srgb, var(--accent) 8%, transparent) !important; }
#historialClearAll{ flex:none; height:42px; padding:0 14px !important; border-radius:10px !important; border:1px solid color-mix(in srgb, #ef4444 45%, var(--border)) !important; background:color-mix(in srgb, #ef4444 12%, transparent) !important; color:#fca5a5 !important; font-weight:900 !important; font-size:.76rem !important; white-space:nowrap; }
#historialClearAll:hover{ background:#dc2626 !important; color:#fff !important; border-color:#dc2626 !important; }

/* =========================================================================
   Tus últimas búsquedas — rediseño completo (pedido de Manuel)
   ========================================================================= */
#homePanel .home-section-head{ display:flex !important; align-items:center; gap:10px; padding:10px 12px !important; margin:0 0 10px !important; border-radius:16px !important;
  border:1px solid var(--border) !important; background:linear-gradient(110deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 70%) !important; box-shadow:none !important; }
#homePanel .home-section-toggle{ flex:1; display:flex !important; align-items:center; gap:10px; padding:0 !important; border:none !important; background:none !important; box-shadow:none !important; cursor:pointer; min-width:0; }
#homePanel .home-section-head .home-section-icono{ width:36px !important; height:36px !important; border-radius:11px !important; display:flex !important; align-items:center; justify-content:center; font-size:1.05rem; background:color-mix(in srgb, var(--accent) 18%, transparent) !important; border:none !important; order:0; }
#homePanel .home-section-head .home-section-title{ margin:0 !important; font-size:.82rem !important; letter-spacing:1.4px !important; color:var(--text) !important; order:1; }
#homePanel .home-section-head .home-section-cuenta{ order:2; padding:2px 9px !important; border-radius:7px !important; background:var(--accent) !important; color:var(--bg, #111) !important; font-weight:900; font-size:.74rem !important; border:none !important; }
#homePanel .home-section-head .home-section-chevron{ order:3; margin-left:auto; width:28px; height:28px; border-radius:8px; display:flex !important; align-items:center; justify-content:center; background:color-mix(in srgb, var(--text) 6%, transparent) !important; border:none !important; transition:transform .2s; }
#homePanel .home-section-toggle[aria-expanded="false"] .home-section-chevron{ transform:rotate(-90deg); }
#homePanel .home-clear-btn{ flex:none; height:34px; padding:0 12px !important; border-radius:9px !important; font-size:.72rem !important; font-weight:900 !important; background:transparent !important;
  border:1px solid color-mix(in srgb, #ef4444 40%, var(--border)) !important; color:#fca5a5 !important; box-shadow:none !important; }
#homePanel .home-clear-btn:hover{ background:#dc2626 !important; color:#fff !important; border-color:#dc2626 !important; }
#homePanel .home-recent{ grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)) !important; gap:8px !important; }
#homePanel .home-recent-item{ position:relative; grid-template-columns:minmax(0, 1fr) !important; padding:12px 14px 12px 16px !important; border-radius:14px !important; overflow:hidden;
  background:var(--surface) !important; border:1px solid var(--border) !important; }
#homePanel .home-recent-item::before{ content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--accent); opacity:.55; transition:opacity .15s; }
#homePanel .home-recent-item:hover::before{ opacity:1; }
#homePanel .home-recent-num{ position:absolute; top:8px; right:10px; width:auto !important; height:auto !important; padding:1px 7px; border-radius:6px !important; font-size:.62rem !important; background:color-mix(in srgb, var(--text) 7%, transparent) !important; color:var(--text-dim) !important; }
#homePanel .home-recent-body{ gap:6px !important; padding-right:28px; }
#homePanel .home-recent-code{ white-space:normal !important; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; font-size:.86rem !important; line-height:1.3; }
#homePanel .home-recent-time{ align-self:flex-start; padding:2px 8px; border-radius:6px; background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--text-dim) !important; font-size:.7rem !important; }
#homePanel .home-recent-go{ position:absolute; right:12px; bottom:10px; opacity:0; transition:opacity .15s, transform .15s; color:var(--accent) !important; }
#homePanel .home-recent-item:hover .home-recent-go{ opacity:1; transform:translateX(2px); }
@media (hover:none){ #homePanel .home-recent-go{ opacity:.6; } }
.cat-chip-etq{ font-weight:700; opacity:.8; } .cat-chip b{ font-weight:900; }
/* Tus últimas búsquedas: encabezado (segunda versión) */
#homePanel .home-section-head::before, #homePanel .home-section-head::after, #homePanel .home-section-icono::before, #homePanel .home-section-icono::after,
#homePanel #homeHistorialSection::before{ display:none !important; content:none !important; }
#homePanel .home-section-head{ padding:8px 8px 8px 10px !important; background:var(--surface) !important; border-left:1px solid var(--border) !important; }
#homePanel .home-section-toggle{ gap:12px !important; }
#homePanel .home-section-head .home-section-icono{ width:38px !important; height:38px !important; border-radius:50% !important; background:var(--accent) !important; color:var(--bg, #111) !important; box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); filter:none; }
#homePanel .home-section-head .home-section-title{ font-size:.95rem !important; letter-spacing:.3px !important; text-transform:none !important; font-weight:900 !important; }
#homePanel .home-section-head .home-section-cuenta{ order:2; margin-left:2px; padding:2px 8px !important; border-radius:20px !important; background:color-mix(in srgb, var(--accent) 18%, transparent) !important; color:var(--accent) !important; border:1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important; }
#homePanel .home-section-head .home-section-chevron{ order:3; margin-left:auto; width:34px !important; height:34px !important; border-radius:10px !important; font-size:.9rem !important; color:var(--text) !important; background:color-mix(in srgb, var(--text) 7%, transparent) !important; }
#homePanel .home-section-toggle:hover .home-section-chevron{ background:color-mix(in srgb, var(--accent) 20%, transparent) !important; color:var(--accent) !important; }
/* El saludo del inicio ya no se muestra; los demás mensajes de A.L.B.A. van semitransparentes, en su lugar (sin tapar nada). */
#homePanel .alba-dice-saludo, #homePanel > .alba-dice:first-child{ display:none !important; }
.alba-dice{ background:color-mix(in srgb, var(--surface, #1f1a14) 45%, transparent) !important; border-color:color-mix(in srgb, var(--accent) 22%, transparent) !important;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); box-shadow:none !important; opacity:.85; transition:opacity .2s; }
.alba-dice:hover{ opacity:1; }
/* Esqueleto de carga (estilo Boneyard) */
.alba-esqueleto{ display:none; flex-direction:column; gap:12px; margin:14px auto 0; padding:18px; border-radius:18px; border:1px solid var(--border); background:color-mix(in srgb, var(--surface) 70%, transparent); width:100%; max-width:1180px; box-sizing:border-box; }
body.alba-buscando .alba-esqueleto{ display:flex; animation:aaAparece .25s ease both; }
body.alba-buscando #albaBannerSlot{ margin-top:0 !important; }
.hueso{ position:relative; overflow:hidden; border-radius:10px; background:color-mix(in srgb, var(--text) 8%, transparent); }
.hueso::after{ content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 10%, transparent), transparent); animation:huesoBrilla 1.3s ease-in-out infinite; }
@keyframes huesoBrilla{ to{ transform:translateX(100%); } }
.ae-titulo{ height:46px; width:min(560px, 80%); border-radius:12px; }
.ae-linea{ height:14px; width:100%; }
.ae-linea.corta{ width:60%; }
.ae-fila{ display:flex; gap:16px; margin-top:4px; }
.ae-foto{ flex:none; width:clamp(150px, 28vw, 230px); aspect-ratio:1/1; border-radius:16px; }
.ae-col{ flex:1; display:flex; flex-direction:column; gap:10px; min-width:0; }
.ae-chip{ height:30px; width:140px; border-radius:8px; }
.ae-botones{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:auto; }
.ae-botones .hueso{ height:44px; border-radius:12px; }
.ae-total{ height:86px; border-radius:16px; }
@media (max-width:640px){ .ae-fila{ flex-direction:column; } .ae-foto{ width:100%; max-width:280px; align-self:center; } }
@media (prefers-reduced-motion: reduce){ .hueso::after{ animation:none; } }
/* Quitar la franja de color junto al reloj de "Tus últimas búsquedas" */
#homePanel .home-section-toggle::before, #homePanel .home-section-toggle::after, #homePanel .home-section-colapsable::before{ display:none !important; content:none !important; }
#homePanel #homeHistorialSection, #homePanel .home-section-colapsable{ border-left:none !important; box-shadow:none !important; }
#homePanel .home-section-head{ border-left-width:1px !important; border-left-color:var(--border) !important; }
/* Esqueleto más fiel a la ficha */
.alba-esqueleto{ gap:12px !important; max-width:none !important; width:auto !important; }
.ae-caja{ border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.ae-codigo{ border-color:color-mix(in srgb, var(--accent) 35%, var(--border)); }
.ae-desc{ width:min(560px, 100%); box-sizing:border-box; }
.ae-l{ height:13px; }
.ae-aviso{ height:46px; border-radius:12px; }
.ae-aviso.delgado{ height:40px; }
.ae-izq{ flex:none; display:flex; flex-direction:column; gap:10px; width:clamp(160px, 30%, 240px); }
.ae-izq .ae-foto{ width:100% !important; }
.ae-der{ flex:1; min-width:0; }
.ae-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.ae-chips .hueso{ height:32px; border-radius:8px; }
.ae-g2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.ae-g2 .hueso{ height:42px; border-radius:12px; }
.ae-acciones .hueso{ height:52px; }
.ae-selector{ display:flex; gap:6px; justify-content:flex-end; }
.ae-selector .hueso{ width:52px; height:26px; border-radius:7px; }
.ae-sub{ height:14px; width:160px; margin-top:6px; }
.ae-total{ flex-direction:row !important; align-items:center; gap:14px; padding:16px !important; }
.ae-ubic{ height:64px; border-radius:14px; }
.alba-esqueleto-lateral{ display:none; position:fixed; right:24px; top:24px; bottom:24px; overflow:hidden; flex-direction:column; gap:10px; padding:16px; border-radius:18px; border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 70%, transparent); box-sizing:border-box; z-index:5; }
body.alba-buscando.esq-lateral .alba-esqueleto-lateral{ display:flex; animation:aaAparece .25s ease both; }
body.alba-buscando.esq-lateral .wrap{ margin-left:24px; margin-right:0; width:clamp(820px, 58%, 1320px); }
.ae-lat-fila{ display:flex; align-items:center; gap:10px; padding:14px; border-radius:14px; border:1px solid var(--border); }
.ae-lat-tabla{ display:flex; flex-direction:column; gap:8px; padding:0 4px 6px; }
.ae-lat-tabla .hueso{ height:38px; }
/* Visor: la barra de acciones arriba al centro (entre quién la subió y Cerrar) */
#lightboxOverlay .lightbox-content > .lightbox-acciones{ top:14px !important; bottom:auto !important; }
#lightboxOverlay .lightbox-tabs{ bottom:24px !important; }
#lightboxOverlay .lightbox-dots{ bottom:78px !important; }
@media (min-width:641px){
  #lightboxOverlay .lightbox-stage{ padding:104px 90px 110px !important; }
  #lightboxOverlay #lightboxImg{ height:calc(100vh - 230px) !important; max-height:calc(100vh - 230px) !important; }
  #lightboxOverlay .lightbox-tabs{ bottom:28px !important; }
  #lightboxOverlay .lightbox-dots{ bottom:84px !important; }
}
@media (max-width:640px){
  #lightboxOverlay .lightbox-content > .lightbox-acciones{ top:calc(64px + env(safe-area-inset-top, 0px)) !important; }
  #lightboxOverlay .lightbox-stage{ padding:calc(142px + env(safe-area-inset-top, 0px)) 8px 130px !important; }
  #lightboxOverlay #lightboxImg{ max-height:calc(100vh - 290px) !important; max-height:calc(100dvh - 290px) !important; }
  #lightboxOverlay .lightbox-tabs{ bottom:calc(20px + env(safe-area-inset-bottom, 0px)) !important; }
  #lightboxOverlay .lightbox-dots{ bottom:76px !important; }
  #lightboxOverlay .lightbox-nav{ bottom:72px !important; }
}
@media (min-width:641px){ #lightboxOverlay .lightbox-caption{ max-width:calc(50vw - 270px) !important; } } @media (min-width:641px) and (max-width:1100px){ #lightboxOverlay .lightbox-content > .lightbox-acciones{ top:72px !important; } #lightboxOverlay .lightbox-stage{ padding-top:160px !important; } #lightboxOverlay .lightbox-caption{ max-width:calc(100vw - 150px) !important; } }
/* Miniaturas: brillo de "cargando" hasta que llega la foto */
.cat-prod-foto.hueso img{ opacity:0; }
.cat-prod-foto img.ok{ opacity:1; transition:opacity .25s; }
/* Esqueleto: ficha o lista según lo que se busca */
.alba-esqueleto .ae-lista{ display:none; flex-direction:column; gap:10px; }
.alba-esqueleto[data-tipo="lista"] > :not(.ae-lista){ display:none !important; }
.alba-esqueleto[data-tipo="lista"] .ae-lista{ display:flex; }
.ae-lcab{ flex-direction:row !important; align-items:center; gap:14px; }
.ae-g4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.ae-g4 .hueso{ height:64px; border-radius:14px; }
.ae-renglon{ height:52px; border-radius:12px; }
@media (max-width:640px){ .ae-g4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* Sin hueco arriba mientras carga: el buscador se queda en su lugar. */
html body:has(#albaLoader.show) #albaBannerSlot, html body.alba-buscando #albaBannerSlot{ margin-top:0 !important; }
/* Mensajes de A.L.B.A.: abajo al centro, flotando */
#albaToast{ position:fixed !important; top:auto !important; bottom:calc(24px + env(safe-area-inset-bottom, 0px)) !important; left:50% !important; right:auto !important; transform:translateX(-50%) translateY(16px) !important;
  max-width:min(520px, calc(100vw - 32px)); z-index:2147483000 !important; opacity:0; transition:opacity .25s ease, transform .25s ease !important; pointer-events:none; }
#albaToast.show{ opacity:1 !important; transform:translateX(-50%) translateY(0) !important; }

/* =========================================================================
   Panel De Control con iconos que se transforman (morphicons, ver morph-iconos.js).
   Todo cuelga de html.con-morphicons: si el modulo no carga, se queda el diseño de arriba con
   sus emojis, entero.
   ========================================================================= */
.mi-svg{ width:100%; height:100%; display:block; overflow:visible; }
.mi-mini{ display:inline-flex; width:1.15em; height:1.15em; flex:none; }

/* ---- Tarjeta del tema ---- */
html.con-morphicons #homePanel .home-tema{
  position:relative; overflow:hidden; align-items:center; gap:14px;
  padding:16px 18px !important; border-radius:18px !important;
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    var(--surface) !important;
}
html.con-morphicons #homePanel .home-tema::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(var(--tema-1, var(--accent)), var(--tema-2, var(--accent2)), var(--tema-3, var(--accent3)));
}
html.con-morphicons #homePanel .home-tema-emblema{
  width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; background:color-mix(in srgb, var(--accent) 14%, var(--surface-2, var(--surface)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
html.con-morphicons #homePanel .home-tema:hover .home-tema-emblema{ transform:rotate(-12deg) scale(1.06); }
html.con-morphicons #homePanel .home-tema-nombre{ font-size:1.02rem; font-weight:800; }
html.con-morphicons #homePanel .home-tema-porque{
  display:inline-flex; align-items:center; gap:5px; margin-top:6px;
  padding:3px 10px 3px 7px; border-radius:999px; font-size:.7rem; font-weight:800; letter-spacing:.2px;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
html.con-morphicons #homePanel .home-tema-porque .mi-mini{ width:13px; height:13px; }
html.con-morphicons #homePanel .home-tema-dice{
  margin-top:8px; padding-left:10px; font-style:italic; color:var(--text-dim);
  border-left:2px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* ---- Titulo de la seccion: icono, texto y una raya que llena el renglon ---- */
html.con-morphicons #homePanel .home-title-main{
  display:flex; align-items:center; gap:8px; margin-top:10px !important;
}
html.con-morphicons #homePanel .home-title-main .mi-mini{ width:15px; height:15px; color:var(--accent); }
html.con-morphicons #homePanel .home-title-main::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, var(--border)), transparent);
}

/* ---- Tarjetas ---- */
html.con-morphicons #homePanel .home-tiles{ grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)) !important; gap:10px !important; }
html.con-morphicons #homePanel .home-tile{
  --mi-c: var(--accent);
  min-height:62px; gap:12px; padding:11px 14px 11px 11px !important; border-radius:16px !important;
  border:1px solid color-mix(in srgb, var(--mi-c) 22%, var(--border)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mi-c) 9%, transparent), transparent 60%),
    var(--surface) !important;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), border-color .18s, box-shadow .18s, background .18s !important;
}
/* El marco de luz que gira y las esquinas: con el color por tarjeta ya no hacen falta. */
html.con-morphicons #homePanel .home-tile::before{ display:none !important; }
html.con-morphicons #homePanel .home-tile:hover,
html.con-morphicons #homePanel .home-tile:focus-visible{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--mi-c) 70%, var(--border)) !important;
  box-shadow:0 10px 24px -12px color-mix(in srgb, var(--mi-c) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--mi-c) 30%, transparent) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mi-c) 18%, transparent), transparent 70%),
    var(--surface) !important;
}
html.con-morphicons #homePanel .home-tile:active{ transform:translateY(-1px) scale(.98); }
html.con-morphicons #homePanel .home-tile-icon{
  width:40px; height:40px; border-radius:12px; padding:9px; box-sizing:border-box;
  color:var(--mi-c); font-size:1.1rem;
  background:color-mix(in srgb, var(--mi-c) 15%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mi-c) 35%, transparent);
  transition:background .2s, color .2s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
html.con-morphicons #homePanel .home-tile:hover .home-tile-icon,
html.con-morphicons #homePanel .home-tile:focus-visible .home-tile-icon{
  background:var(--mi-c); color:var(--bg, #111); transform:scale(1.06) rotate(-4deg);
}
html.con-morphicons #homePanel .home-tile-title{ font-size:.85rem !important; }
/* Salir, en rojo, aparte del resto. */
html.con-morphicons #homePanel .home-tile-danger{ --mi-c:#ff6b6b !important; }
html.con-morphicons #homePanel .home-tile-danger .home-tile-title{ color:#ff9a9a !important; }

/* ---- Buscador ---- */
html.con-morphicons #searchBtn .mi-svg{ width:22px; height:22px; margin:auto; stroke-width:2.4; }
html.con-morphicons #searchHistoryBtn .mi-svg,
html.con-morphicons #dictarBtn .mi-svg{ width:19px; height:19px; margin:auto; }

@media (prefers-reduced-motion: reduce){
  html.con-morphicons #homePanel .home-tile,
  html.con-morphicons #homePanel .home-tile-icon,
  html.con-morphicons #homePanel .home-tema-emblema{ transition:none !important; transform:none !important; }
}
/* En celular, dos columnas: una sola hacia el panel larguísimo. */
@media (max-width:560px){
  html.con-morphicons #homePanel .home-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:8px !important; }
  html.con-morphicons #homePanel .home-tile{ min-height:58px; gap:9px; padding:9px 10px 9px 9px !important; }
  html.con-morphicons #homePanel .home-tile-icon{ width:36px; height:36px; padding:8px; border-radius:11px; }
  html.con-morphicons #homePanel .home-tile-title{ font-size:.78rem !important; }
}

/* ---- Rediseño 2 (pedido de Manuel): lanzador de apps ----
   Tarjetas cuadradas con el icono grande arriba y el nombre abajo, una barra de su color que
   crece al pasar el mouse; el tema como franja con la etiqueta a la derecha. */
html.con-morphicons #homePanel .home-tema{ flex-wrap:wrap; padding:12px 16px !important; }
html.con-morphicons #homePanel .home-tema::before{ width:auto; right:0; bottom:auto; height:3px; background:linear-gradient(90deg, var(--tema-1, var(--accent)), var(--tema-2, var(--accent2)), var(--tema-3, var(--accent3))); }
html.con-morphicons #homePanel .home-tema-texto{ flex:1; display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:12px; }
html.con-morphicons #homePanel .home-tema-porque{ grid-column:2; grid-row:1; margin:0; }
html.con-morphicons #homePanel .home-tema-dice{ grid-column:1 / -1; border-left:0; padding-left:0; margin-top:4px; }
html.con-morphicons #homePanel .home-tema-emblema{ width:44px; height:44px; border-radius:14px; }

html.con-morphicons #homePanel .home-title-main{ justify-content:center; }
html.con-morphicons #homePanel .home-title-main::before{ content:''; flex:1; height:1px; background:linear-gradient(270deg, color-mix(in srgb, var(--accent) 45%, var(--border)), transparent); order:-1; }

html.con-morphicons #homePanel .home-tiles{ grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)) !important; gap:10px !important; }
html.con-morphicons #homePanel .home-tile{
  flex-direction:column; justify-content:center; text-align:center !important;
  gap:9px; min-height:112px; padding:16px 10px 14px !important; border-radius:20px !important;
  overflow:hidden;
  background:color-mix(in srgb, var(--surface) 88%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent) !important;
}
html.con-morphicons #homePanel .home-tile::after{
  content:''; position:absolute; left:50%; bottom:0; width:26px; height:3px; border-radius:3px 3px 0 0;
  background:var(--mi-c); transform:translateX(-50%); transition:width .3s cubic-bezier(.34,1.56,.64,1);
}
html.con-morphicons #homePanel .home-tile:hover::after,
html.con-morphicons #homePanel .home-tile:focus-visible::after{ width:100%; border-radius:0; }
html.con-morphicons #homePanel .home-tile:hover,
html.con-morphicons #homePanel .home-tile:focus-visible{
  background:radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--mi-c) 20%, transparent), transparent 70%), var(--surface) !important;
}
html.con-morphicons #homePanel .home-tile-icon{
  width:48px; height:48px; padding:12px; border-radius:50%;
  background:color-mix(in srgb, var(--mi-c) 13%, transparent);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--mi-c) 6%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--mi-c) 40%, transparent);
}
html.con-morphicons #homePanel .home-tile:hover .home-tile-icon{ transform:translateY(-2px) scale(1.08); }
html.con-morphicons #homePanel .home-tile-title{ text-align:center !important; font-size:.8rem !important; line-height:1.2; }
html.con-morphicons #homePanel .home-tile-badge{ top:8px; right:8px; }
/* Novedades usa ::after para su punto rojo: ahí manda el punto, no la barra. */
html.con-morphicons #homePanel .home-tile-novedades.con-novedad::after{ content:attr(data-nov-cuenta); left:auto; bottom:auto; top:8px; right:8px; width:auto; min-width:20px; height:20px; border-radius:8px; background:#e11d2e; transform:none; }
@media (max-width:560px){
  html.con-morphicons #homePanel .home-tiles{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:8px !important; }
  html.con-morphicons #homePanel .home-tile{ min-height:98px; padding:12px 6px 10px !important; gap:7px; }
  html.con-morphicons #homePanel .home-tile-icon{ width:42px; height:42px; padding:10px; }
  html.con-morphicons #homePanel .home-tile-title{ font-size:.72rem !important; }
  html.con-morphicons #homePanel .home-tema-texto{ grid-template-columns:1fr; }
  html.con-morphicons #homePanel .home-tema-porque{ grid-column:1; grid-row:auto; justify-self:start; margin-top:4px; }
}

/* ---- Panel De Control sobre gridstack (ver grid-panel.js) ----
   gridstack pone la posicion de cada tarjeta; el grid de CSS de arriba se apaga. */
#homePanel .home-tiles.grid-stack{ display:block !important; margin:0 -5px !important; }
#homePanel .grid-stack-item-content{ overflow:visible !important; inset:5px; }
#homePanel .grid-stack .home-tile{ width:100%; height:100%; min-height:0 !important; box-sizing:border-box; }
#homePanel .grid-stack:not(.grid-stack-static) .home-tile{ cursor:grab; }
body.gs-arrastrando, body.gs-arrastrando *{ cursor:grabbing !important; }
#homePanel .grid-stack-item.ui-draggable-dragging .home-tile{ transform:scale(1.04) rotate(-1.5deg) !important; box-shadow:0 18px 40px -14px rgba(0,0,0,.7) !important; }
#homePanel .grid-stack-placeholder > .placeholder-content{
  inset:5px; border-radius:20px; border:2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}
@media (max-width:560px){ #homePanel .grid-stack .home-tile{ min-height:0 !important; } }

/* ---- Animaciones del panel (ver animaciones-panel.js) ---- */
html.con-animaciones #homePanel .grid-stack-item{ perspective:700px; }
html.con-animaciones #homePanel .grid-stack-item-content{ transform-style:preserve-3d; will-change:transform; }
/* Spotlight: la luz sigue al cursor dentro de la tarjeta. */
html.con-animaciones #homePanel .home-tile:hover{
  background:
    radial-gradient(160px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--mi-c) 26%, transparent), transparent 70%),
    var(--surface) !important;
}
html.con-animaciones #homePanel .home-tile{ overflow:hidden; }
.ap-onda{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; background:var(--mi-c, var(--accent)); }
/* Texto con brillo que pasa (Shimmering Text) en el titulo del panel. */
html.con-animaciones #homePanel .home-title-main > span:last-child{
  background:linear-gradient(90deg, var(--text-dim) 0%, var(--text-dim) 40%, var(--accent) 50%, var(--text-dim) 60%, var(--text-dim) 100%);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:apBrillo 3.5s linear infinite;
}
@keyframes apBrillo{ from{ background-position:100% 0; } to{ background-position:-150% 0; } }
/* El emblema del tema flota apenas, y el badge late al llegar. */
html.con-animaciones #homePanel .home-tema-emblema{ animation:apFlota 4s ease-in-out infinite; }
@keyframes apFlota{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-3px) rotate(-5deg); } }
html.con-animaciones #homePanel .home-tile-badge{ animation:apBadge .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes apBadge{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* ---- Aviso de Odoo 19: botón flotante minimalista (ver actualizar.js) ----
   Solo en la pantalla de inicio (body.en-inicio, que pone renderHomePanel). */













@keyframes aofTic{ from{ color:#f0abfc; } }
@keyframes aofEntra{ from{ opacity:0; transform:translateY(20px) scale(.8); } }
@keyframes aofPulso{ 0%{ opacity:.9; transform:scale(1); } 100%{ opacity:0; transform:scale(1.6); } }
/* En celular choca con el dock/barra de abajo: sube un poco y solo muestra la cuenta. */



/* =========================================================================
   Rediseño completo (pedido de Manuel): todas las pantallas con el lenguaje del Panel De
   Control nuevo — tarjetas de 20px, bordes suaves en vez de duros, tinte del acento, iconos en
   circulo y entradas con resorte. Va al final para ganarle a las capas de arriba sin tocarlas.
   ========================================================================= */
:root{
  --v3-r: 20px; --v3-r-sm: 12px;
  --v3-borde: color-mix(in srgb, var(--border) 75%, transparent);
  --v3-borde-acento: color-mix(in srgb, var(--accent) 45%, var(--border));
  --v3-sombra: 0 18px 40px -22px rgba(0,0,0,.75);
  --v3-resorte: cubic-bezier(.34,1.56,.64,1);
}

/* ---- Tarjetas (.glass): secciones, ficha, buscador ---- */
html .glass{
  border-radius: var(--v3-r) !important;
  border:1px solid var(--v3-borde) !important;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 94%, transparent) !important;
  box-shadow: var(--v3-sombra) !important;
}
html .odoo-list-panel{ animation: v3Entra .45s var(--v3-resorte) both; }
@keyframes v3Entra{ from{ opacity:0; transform:translateY(14px) scale(.985); } }

/* Encabezado de seccion: icono en circulo con aro, titulo grande y el contador como pastilla. */
html .odoo-list-head{ gap:14px !important; margin:6px 0 12px !important; }
html .odoo-list-icon{
  width:52px !important; height:52px !important; border-radius:50% !important; flex:none;
  display:flex !important; align-items:center; justify-content:center; font-size:1.45rem !important;
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  border:0 !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 6%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent) !important;
}
html .odoo-list-head-text h2{ font-size:1.3rem !important; font-weight:900 !important; letter-spacing:.2px; margin:0 !important; }
html .odoo-list-count{
  display:inline-flex; margin-top:4px; padding:2px 10px; border-radius:999px; font-size:.72rem !important; font-weight:800;
  color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
html .odoo-list-count:empty{ display:none; }
html .odoo-list-sub{ color: var(--text-dim) !important; font-size:.85rem !important; line-height:1.5; margin:0 0 14px !important; }

/* Regresar: pastilla redonda que se recorre tantito al pasar el mouse. */
html .sections-back-btn:not([style*="none"]):not([hidden]), html .volver-barra{
  display:inline-flex !important; align-items:center; gap:8px;
  padding:7px 16px !important; border-radius:999px !important;
  border:1px solid var(--v3-borde) !important; background: var(--surface) !important;
  box-shadow:none !important; font-weight:800 !important; font-size:.8rem !important;
  transition: border-color .15s, transform .2s var(--v3-resorte), color .15s !important;
}
html .sections-back-btn:hover, html .volver-barra:hover{
  border-color: var(--v3-borde-acento) !important; color: var(--accent) !important; transform: translateX(-3px) !important;
}
html .volver-barra .volver-flecha{
  width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}

/* ---- Botones ---- */
html .btn{
  border-radius: var(--v3-r-sm) !important;
  border:1px solid var(--v3-borde) !important;
  box-shadow:none !important;
  font-weight:800;
  transition: transform .2s var(--v3-resorte), border-color .15s, background .15s, box-shadow .15s, filter .15s !important;
}
html .btn:hover:not(:disabled){
  transform: translateY(-2px) !important;
  border-color: var(--v3-borde-acento) !important;
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--accent) 80%, transparent) !important;
}
html .btn:active:not(:disabled){ transform: translateY(0) scale(.97) !important; }
html .btn-primary{ border-color: transparent !important; background: var(--accent) !important; color:#04211c !important; }
html .btn-primary:hover:not(:disabled){ filter: brightness(1.08); }

/* ---- Campos ---- */
html input[type=text], html input[type=password], html input[type=number], html input[type=email],
html input[type=search], html input[type=date], html input[type=time], html select, html textarea{
  border-radius: var(--v3-r-sm) !important;
  border:1px solid var(--v3-borde) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
html input:focus, html select:focus, html textarea:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
html .alba-banner .main-search #codeInput{ border-radius:16px !important; }
html .alba-banner .main-search #searchBtn{ border-radius:12px !important; }

/* Filtros de fecha / persona: una barra con forma, no controles sueltos. */
html .surtidos-date-filter{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; margin-bottom:12px;
  border-radius:16px; border:1px solid var(--v3-borde);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent);
}
html .surtidos-date-filter label{ font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.8px; color: var(--text-dim); }

/* ---- Listas y tablas ---- */
html .odoo-list-table{ border-radius:16px; }
html .table-wrap{ border-radius:16px !important; }
html table tbody tr{ transition: background .12s; }
html table tbody tr:hover{ background: color-mix(in srgb, var(--accent) 7%, transparent) !important; }
html .empty-note{
  border-radius:18px !important; text-align:center; color: var(--text-dim);
  border:1px dashed color-mix(in srgb, var(--accent) 35%, var(--border)) !important;
}

/* Titulos de seccion dentro de la ficha: barrita + linea que llena el renglon. */
html .section-title::after{
  content:''; flex:1; height:1px; margin-left:4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, var(--border)), transparent);
}
html .code-pill, html .qty-badge, html .color-badge{ border-radius:999px !important; }

/* ---- Ventanas ---- */
html .modal-overlay:not(#lightboxOverlay){
  background: color-mix(in srgb, #000 62%, transparent) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important; backdrop-filter: blur(10px) saturate(1.2) !important;
}
html .ml-modal, html .config-content, html .perm-denied-modal{
  border-radius: 24px !important;
  border:1px solid var(--v3-borde-acento) !important;
  background:
    radial-gradient(100% 60% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--surface) !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8) !important;
}
html .modal-overlay.show > .ml-modal, html .modal-overlay.show > .config-content, html .modal-overlay.show > .perm-denied-modal{
  animation: v3Ventana .4s var(--v3-resorte) both;
}
@keyframes v3Ventana{ from{ opacity:0; transform: translateY(18px) scale(.94); } }
html .ml-modal-actions{ gap:8px !important; }
html .config-title{ border-radius:18px !important; }
html .nov-head-icon{ border-radius:50% !important; }
html .po-modal-close{
  border-radius:50% !important;
  transition: transform .25s var(--v3-resorte), background .15s !important;
}
html .po-modal-close:hover{ transform: rotate(90deg) !important; }

/* ---- Menu lateral ---- */
html .drawer-item{ border-radius:14px !important; transition: background .15s, transform .2s var(--v3-resorte) !important; }
html .drawer-item:hover{ transform: translateX(3px); }

/* ---- Sugerencias del buscador ---- */
html .autocomplete-list, html .search-history-list{ border-radius:18px !important; box-shadow: var(--v3-sombra) !important; }
html .autocomplete-item{ border-radius:12px; transition: background .12s; }

/* ---- Acceso (login) ---- */
html #loginCard{
  border-radius: 26px !important;
  border:1px solid var(--v3-borde-acento) !important;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85) !important;
  animation: v3Ventana .55s var(--v3-resorte) both;
}

@media (prefers-reduced-motion: reduce){
  html .odoo-list-panel, html .modal-overlay.show > *, html #loginCard{ animation:none !important; }
  html .btn, html .drawer-item{ transition:none !important; }
}
/* La cuenta del botón de Odoo: los chips blancos eran de la franja vieja (CSS en actualizar.js). */





/* =========================================================================
   Menú lateral rediseñado (pedido de Manuel): vidrio oscuro, tarjeta de la cuenta con
   el color de su rol, renglones con icono en circulo de su color (morph-iconos.js) y
   entrada escalonada al abrir.
   ========================================================================= */
html .mobile-drawer{
  background:
    radial-gradient(120% 50% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg) 88%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-left:1px solid var(--v3-borde-acento) !important;
  box-shadow: -30px 0 80px -30px rgba(0,0,0,.9) !important;
}
html body.drawer-left .mobile-drawer{ border-left:0 !important; border-right:1px solid var(--v3-borde-acento) !important; }
html .drawer-backdrop.show{ -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* Cabecera: "MENÚ" con su raya, y la ✕ redonda que gira. */
html .mobile-drawer-head{ display:flex; align-items:center; gap:10px; }
html .mobile-drawer-title{ font-size:.7rem !important; font-weight:900 !important; letter-spacing:2px !important; color: var(--text-dim) !important; text-transform:uppercase; }
html .mobile-drawer-head::after{ content:''; order:1; flex:1; height:1px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, var(--border)), transparent); }
html .mobile-drawer-close{
  order:2; width:34px !important; height:34px !important; border-radius:50% !important; padding:0 !important;
  border:1px solid var(--v3-borde) !important; background: var(--surface) !important;
  transition: transform .3s var(--v3-resorte), border-color .15s !important;
}
html .mobile-drawer-close:hover{ transform: rotate(90deg); border-color:#ff6b6b !important; }

/* Tarjeta de la cuenta: degradado del rol, foto con aro, nombre grande y el rol como pastilla. */
html .mobile-drawer-user{
  position:relative; overflow:hidden;
  border-radius:22px !important; padding:16px !important; margin-bottom:12px !important;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent) !important;
  background:
    radial-gradient(140% 120% at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    radial-gradient(100% 100% at 100% 100%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 60%),
    var(--surface) !important;
  box-shadow: 0 16px 34px -20px color-mix(in srgb, var(--accent) 70%, transparent) !important;
}
html .drawer-avatar{ border-radius:50% !important; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--accent) 70%, transparent) !important; }
html .drawer-user-saludo{ font-size:.72rem !important; color: var(--text-dim) !important; font-weight:700; }
html .mobile-drawer-user-name{ font-size:1.08rem !important; font-weight:900 !important; }
html .drawer-user-usuario{ font-size:.76rem !important; color: var(--text-dim) !important; }
html .mobile-drawer-user-role{
  display:inline-flex !important; align-items:center; gap:5px; margin-top:6px;
  padding:3px 10px !important; border-radius:999px !important; font-size:.64rem !important; font-weight:900 !important; letter-spacing:1px;
  background: color-mix(in srgb, currentColor 14%, transparent) !important;
  border:1px solid color-mix(in srgb, currentColor 40%, transparent) !important;
}

/* Renglones */
html .mobile-drawer-nav{ display:flex; flex-direction:column; gap:6px !important; }
html .mobile-drawer .drawer-item{
  --mi-c: var(--accent);
  position:relative; display:flex !important; align-items:center; gap:12px !important;
  min-height:50px; padding:7px 14px 7px 7px !important; border-radius:16px !important;
  border:1px solid transparent !important;
  background: color-mix(in srgb, var(--surface) 70%, transparent) !important;
  box-shadow:none !important; font-weight:800 !important; font-size:.86rem !important; color: var(--text) !important;
  transition: background .18s, border-color .18s, transform .25s var(--v3-resorte) !important;
}
html .mobile-drawer .drawer-item::after{
  content:'›'; margin-left:auto; font-size:1.1rem; color: var(--text-dim); opacity:0;
  transform: translateX(-6px); transition: opacity .18s, transform .25s var(--v3-resorte);
}
html .mobile-drawer .drawer-item:hover, html .mobile-drawer .drawer-item:focus-visible{
  transform: translateX(4px) !important;
  border-color: color-mix(in srgb, var(--mi-c) 45%, transparent) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mi-c) 16%, transparent), transparent 80%), var(--surface) !important;
}
html .mobile-drawer .drawer-item:hover::after{ opacity:1; transform:none; color: var(--mi-c); }
html .mobile-drawer .drawer-item:active{ transform: scale(.98) !important; }
html .mobile-drawer .drawer-item-icon{
  flex:none; width:36px !important; height:36px !important; border-radius:50% !important; padding:8px; box-sizing:border-box;
  display:flex !important; align-items:center; justify-content:center; font-size:1rem;
  color: var(--mi-c); background: color-mix(in srgb, var(--mi-c) 14%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mi-c) 35%, transparent);
  transition: background .2s, color .2s, transform .3s var(--v3-resorte);
}
html .mobile-drawer .drawer-item:hover .drawer-item-icon{ background: var(--mi-c) !important; color: var(--bg, #111); transform: rotate(-6deg) scale(1.06); }
html .mobile-drawer .drawer-item-icon img{ width:20px; height:20px; }
html .mobile-drawer .drawer-item-badge{ margin-left:auto; border-radius:999px !important; }
html .mobile-drawer .drawer-item-badge + *{ margin-left:0; }
html .mobile-drawer .drawer-item:has(.drawer-item-badge)::after, html .mobile-drawer .drawer-item-novedades.con-novedad::after{ content:none; }
/* Novedades: su contador vuelve a ser el ::after (lo pinta su propia regla de arriba). */
html .mobile-drawer .drawer-item-novedades.con-novedad::after{ content: attr(data-nov-cuenta) !important; opacity:1 !important; transform:none !important; margin-left:auto; position:static !important; }

/* Salir: separado y en rojo. */
html .mobile-drawer .drawer-item-danger{ --mi-c:#ff6b6b; margin-top:6px; border-color: color-mix(in srgb, #ff6b6b 30%, transparent) !important; color:#ff9a9a !important; }
/* Las preferencias del panel (orden y orilla): más chiquitas, abajo. */
html .mobile-drawer .drawer-side-btn{ min-height:40px; font-size:.76rem !important; color: var(--text-dim) !important; background:transparent !important; border:1px dashed var(--v3-borde) !important; }
html .mobile-drawer .drawer-side-btn .drawer-item-icon{ width:28px !important; height:28px !important; padding:5px; }
html .mobile-drawer .drawer-version{ text-align:center; opacity:.7; margin:6px 0; }

/* Entrada escalonada al abrir. */
html .mobile-drawer.open .drawer-item{ animation: v3Renglon .42s var(--v3-resorte) both; }
html .mobile-drawer.open .drawer-item:nth-child(1){ animation-delay:.03s } html .mobile-drawer.open .drawer-item:nth-child(2){ animation-delay:.06s }
html .mobile-drawer.open .drawer-item:nth-child(3){ animation-delay:.09s } html .mobile-drawer.open .drawer-item:nth-child(4){ animation-delay:.12s }
html .mobile-drawer.open .drawer-item:nth-child(5){ animation-delay:.15s } html .mobile-drawer.open .drawer-item:nth-child(6){ animation-delay:.18s }
html .mobile-drawer.open .drawer-item:nth-child(7){ animation-delay:.21s } html .mobile-drawer.open .drawer-item:nth-child(8){ animation-delay:.24s }
html .mobile-drawer.open .drawer-item:nth-child(9){ animation-delay:.27s } html .mobile-drawer.open .drawer-item:nth-child(n+10){ animation-delay:.3s }
html .mobile-drawer.open .mobile-drawer-user{ animation: v3Ventana .45s var(--v3-resorte) both; }
@keyframes v3Renglon{ from{ opacity:0; transform: translateX(22px); } }
html body.drawer-left .mobile-drawer.open .drawer-item{ animation-name: v3RenglonIzq; }
@keyframes v3RenglonIzq{ from{ opacity:0; transform: translateX(-22px); } }
@media (prefers-reduced-motion: reduce){
  html .mobile-drawer.open .drawer-item, html .mobile-drawer.open .mobile-drawer-user{ animation:none !important; }
}
/* El indicador de Odoo solo se ve: no se toca ni estorba los clics de abajo. */



/* =========================================================================
   Tipografia Raleway (pedido de Manuel; antes Chubbo y Clash Display): cada peso tiene su trabajo.
     200 Extralight · lo grande y de adorno: saludos, numeros de la cuenta regresiva, el nombre del tema
     300 Light      · texto que acompaña: subtitulos, notas, horas, ayudas, la frase del tema
     400 Regular    · el texto de lectura y los campos
     500 Medium     · etiquetas, botones, renglones del menu, titulitos en mayusculas
     600 Semibold   · titulos de seccion y de ventana, nombres
     700 Bold       · codigos de producto, cantidades y el boton principal
   (800 y 900, que el CSS pide en muchos lados, caen en el 700: ver font-synthesis en body.)
   ========================================================================= */
html body{ font-family: var(--font-ui); font-weight:400; letter-spacing:.1px; }
html input, html select, html textarea, html button{ font-family: var(--font-ui); }
html input, html select, html textarea{ font-weight:400 !important; }

/* 700: titulos, nombres, codigos */
html h1, html h2, html h3, html .odoo-list-head-text h2, html .ml-modal h3, html .config-title,
html .nov-head-title, html .mobile-drawer-user-name, html .home-tema-nombre, html .home-tile-title,
html .code-pill, html .qty-badge, html .kf-value, html .op-cab-cod, html .home-recent-code{ font-weight:700 !important; }

/* 500: botones, etiquetas, menu, titulitos en mayusculas */
html .btn, html .drawer-item, html .sections-back-btn, html .volver-barra,
html .config-field label, html .kf-label, html .surtidos-date-filter label,
html .home-title-main, html .section-title, html .mobile-drawer-title, html .odoo-list-count,
html .home-tema-porque, html .mobile-drawer-user-role{ font-weight:500 !important; }
html .btn-primary{ font-weight:700 !important; }
html .home-title-main, html .section-title, html .mobile-drawer-title{ letter-spacing:2px !important; }

/* 300: lo que acompaña */
html .odoo-list-sub, html .nov-head-sub, html .config-hint, html .home-tema-dice, html .home-recent-time,
html .drawer-user-saludo, html .drawer-user-usuario, html .empty-note, html .status-line,
html .alba-banner .main-search #codeInput::placeholder{ font-weight:300 !important; }

/* 200: lo grande */
html .greeting, html .login-head h1, html #loginTitleText{ font-weight:200 !important; letter-spacing:.5px; }
html .greeting{ font-size:clamp(1.6rem, 4vw, 2.4rem); }
html .home-tema-nombre b{ font-weight:200 !important; font-size:1.25em; letter-spacing:.5px; }

html .odoo-list-head-text h2{ letter-spacing:.3px; }

/* =========================================================================
   Dock al estilo Magic UI (ver dock-magic.js): una capsula de vidrio sin el marco de colores
   girando, iconos redondos que crecen de verdad (el tamaño lo pone el JS con un resorte) y se
   recorren para hacerse lugar, nombre en una pastilla arriba y un puntito bajo el que se apunta.
   ========================================================================= */
html.con-dock-magic body[data-dock-pos="abajo"] .alba-dock-wrap,
html.con-dock-magic body:not([data-dock-pos]) .alba-dock-wrap{
  padding:0 !important; background:none !important; animation:none !important; box-shadow:none !important;
}
html.con-dock-magic .alba-dock{
  gap:10px !important; padding:8px 10px !important; border-radius:24px !important;
  align-items:flex-end !important; height:auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    color-mix(in srgb, var(--bg) 70%, transparent) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important; backdrop-filter: blur(20px) saturate(1.4) !important;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
html.con-dock-magic body[data-dock-pos="abajo"] .dock-item,
html.con-dock-magic body:not([data-dock-pos]) .dock-item{
  width:42px; height:42px; border-radius:50% !important;
  transition: background .18s, border-color .18s, color .18s !important;
}
html.con-dock-magic .dock-item{
  background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  color: color-mix(in srgb, var(--text) 85%, transparent) !important;
  border-radius:50% !important;
}
html.con-dock-magic .dock-item .dock-svg{ width:46%; height:46%; transition: color .18s; }
html.con-dock-magic .dock-item:hover{
  background: color-mix(in srgb, var(--accent) 22%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
  color: var(--accent) !important;
}
/* El puntito de abajo, como en el dock de macOS. */
html.con-dock-magic .dock-item::after{
  content:''; position:absolute; left:50%; bottom:-6px; width:4px; height:4px; border-radius:50%;
  background: var(--accent); transform:translateX(-50%) scale(0); transition: transform .25s var(--v3-resorte, ease);
}
html.con-dock-magic .dock-item:hover::after{ transform:translateX(-50%) scale(1); }
html.con-dock-magic .dock-item-salir:hover{ background: rgba(248,113,113,.2) !important; border-color:#ff6b6b !important; color:#ffb4b4 !important; }
html.con-dock-magic .dock-item-salir::after{ background:#ff6b6b; }
html.con-dock-magic .dock-sep{ height:28px !important; background: linear-gradient(transparent, rgba(255,255,255,.25), transparent) !important; align-self:center !important; }

/* Nombre: pastilla que sube con resorte. */
html.con-dock-magic .dock-label{
  border-radius:999px !important; padding:5px 12px !important; font-weight:500 !important; font-size:.74rem !important;
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent) !important;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.8);
  transform: translateX(-50%) translateY(6px) scale(.9) !important;
  transition: opacity .15s, transform .25s var(--v3-resorte, ease) !important;
}
html.con-dock-magic .dock-item:hover .dock-label{ transform: translateX(-50%) translateY(0) scale(1) !important; }
html.con-dock-magic .dock-badge{ border-radius:999px !important; top:-3px !important; right:-3px !important; box-shadow: 0 0 0 2px var(--bg); }

/* ---- Cuenta en el menú: solo la foto en círculo y el nombre (pedido de Manuel) ----
   El aro de la foto es el color del rol: rojo Admin, morado Moderador, turquesa el resto. */
html .mobile-drawer-user{
  --rol-c:#2dd4bf;
  display:flex !important; align-items:center; gap:12px !important;
  padding:8px 4px 14px !important; margin:0 0 10px !important;
  background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  border-bottom:1px solid var(--v3-borde) !important; overflow:visible !important;
}
html .mobile-drawer-user[data-rol="admin"]{ --rol-c:#ff4d5e; }
html .mobile-drawer-user[data-rol="moderador"]{ --rol-c:#a78bfa; }
html .mobile-drawer-user::before, html .mobile-drawer-user::after{ content:none !important; display:none !important; }
html .mobile-drawer-user .drawer-avatar-wrap{ position:relative; flex:none; width:52px !important; height:52px !important; }
html .mobile-drawer-user .drawer-avatar{
  width:52px !important; height:52px !important; border-radius:50% !important; overflow:hidden;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--rol-c), 0 0 18px -2px var(--rol-c) !important;
}
html .mobile-drawer-user .drawer-avatar img{ width:100%; height:100%; object-fit:cover; }
html .mobile-drawer-user .drawer-avatar-edit{
  position:absolute; right:-4px; bottom:-4px; width:22px !important; height:22px !important; border-radius:50% !important;
  font-size:.62rem !important; padding:0 !important; display:flex; align-items:center; justify-content:center;
  background: var(--surface) !important; border:1px solid var(--rol-c) !important;
}
html .mobile-drawer-user .drawer-user-text{ min-width:0; display:flex; flex-direction:column; }
html .mobile-drawer-user .drawer-user-saludo,
html .mobile-drawer-user .drawer-user-usuario,
html .mobile-drawer-user .mobile-drawer-user-role{ display:none !important; }
html .mobile-drawer-user .mobile-drawer-user-name{
  font-size:1.05rem !important; font-weight:700 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html .mobile-drawer.open .mobile-drawer-user{ animation:none !important; }
html.dock-sin-motion .alba-dock .dock-item{ transition: width .18s ease-out, height .18s ease-out, background .18s, border-color .18s, color .18s !important; }

/* ---- Encabezado del menú (pedido de Manuel): "Menú" grande con su icono en cápsula ---- */
html .mobile-drawer-head{ padding:4px 2px 10px !important; }
html .mobile-drawer-head::after{ content:none !important; }
html .mobile-drawer-title{
  display:inline-flex !important; align-items:center; gap:10px; margin-right:auto;
  font-size:1.35rem !important; font-weight:700 !important; letter-spacing:.3px !important;
  text-transform:none !important; color: var(--text) !important;
}
html .mobile-drawer-title::before{
  content:''; width:34px; height:34px; border-radius:11px; flex:none;
  background:
    linear-gradient(var(--accent), var(--accent)) 9px 11px / 16px 2.2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 9px 16px / 11px 2.2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 9px 21px / 16px 2.2px no-repeat,
    color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
html .mobile-drawer-title::after{
  content:'A.L.B.A.'; font-size:.6rem; font-weight:500; letter-spacing:2px; color: var(--accent);
  padding:3px 8px; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ---- Mantenimiento en celular: dentro del menú, arriba de la foto (ver ponerEnMenu en actualizar.js) ---- */
body:not(.alba-con-dock) #albaMantChip{ display:none !important; }
body.alba-con-dock #albaMantMenu{ display:none !important; }
.alba-mant-menu{
  display:flex; align-items:center; gap:10px; width:100%; margin:0 0 10px; padding:10px 12px;
  border-radius:16px; cursor:pointer; text-align:left; font:inherit; color:#2a1a00;
  border:1px solid #f59e0b; background:linear-gradient(110deg, #fbbf24, #f59e0b);
  box-shadow:0 10px 24px -12px rgba(245,158,11,.8);
}
.alba-mant-menu .amc-luz{ flex:none; width:11px; height:11px; border-radius:50%; background:#dc2626; box-shadow:0 0 0 3px #fff6, 0 0 10px #dc2626; animation:espLatido 1.2s ease-in-out infinite; }
.alba-mant-menu .amm-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.alba-mant-menu .amm-txt b{ font-weight:700; font-size:.86rem; }
.alba-mant-menu .amm-txt small{ font-size:.68rem; font-weight:500; opacity:.8; }
.alba-mant-menu .amm-ir{ margin-left:auto; font-size:1.2rem; font-weight:700; }

/* =========================================================================
   Botones flotantes (pedido de Manuel; los iconos los pone flotantes.js): todos de vidrio
   oscuro con el icono de linea en el acento, del mismo tamaño y en la misma columna.
   ========================================================================= */
.fl-svg{ width:100%; height:100%; display:block; }

/* ---- Pestaña del menú lateral: cápsula de vidrio pegada a la orilla ---- */
html .drawer-handle{
  width:34px !important; height:96px !important; gap:8px !important;
  border:1px solid color-mix(in srgb, var(--accent) 50%, transparent) !important; border-right:0 !important;
  border-radius:16px 0 0 16px !important;
  background: color-mix(in srgb, var(--bg) 70%, transparent) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--accent) !important;
  box-shadow: -10px 0 26px -12px rgba(0,0,0,.8), inset 2px 0 0 color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
html body.drawer-left .drawer-handle{ border-radius:0 16px 16px 0 !important; border:1px solid color-mix(in srgb, var(--accent) 50%, transparent) !important; border-left:0 !important; }
html .drawer-handle .drawer-handle-arrow{ width:18px; height:18px; display:block; animation: flAsoma 2.4s ease-in-out infinite; }
html .drawer-handle-text{ font-size:.6rem !important; font-weight:500 !important; letter-spacing:2px !important; color: var(--text-dim) !important; }
html .drawer-handle:hover .drawer-handle-arrow{ animation-duration:.9s; }
@keyframes flAsoma{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(-3px); } }
html body.drawer-left .drawer-handle .drawer-handle-arrow{ transform: rotate(180deg); animation:none; }
html .drawer-handle.has-alerts{ background: color-mix(in srgb, #e0533d 30%, var(--bg)) !important; border-color:#ff6b6b !important; color:#fff !important; height:118px !important; }

/* ---- Mandar (a mis aparatos / a otra persona) ---- */
html .mandar-fab{
  border-radius:999px !important; padding:6px 16px 6px 6px !important; gap:10px !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--bg) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.85), 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent) !important;
}
html .mandar-fab::after{ background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent), transparent) !important; }
html .mandar-fab .mf-escena{ padding:0 !important; background:none !important; }
html .mandar-fab .fl-ico{
  width:38px; height:38px; border-radius:50%; padding:9px; box-sizing:border-box; display:block;
  background: var(--accent); color: var(--bg, #111);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
html .mandar-fab-otros .fl-ico{ background: var(--accent2); }
html .mandar-fab-otros{ border-color: color-mix(in srgb, var(--accent2) 45%, transparent) !important; }
html .mandar-fab:hover .fl-ico{ animation: flVuela .6s ease; }
@keyframes flVuela{ 40%{ transform: translate(3px,-3px) rotate(-8deg); } }
html .mf-txt small{ font-weight:300 !important; letter-spacing:1.5px; color: var(--text-dim); opacity:1 !important; }
html .mf-txt b{ font-weight:700 !important; }
@media (max-width:600px){
  html .mandar-fab:not(.mf-abierto){ padding:5px !important; }
  html .mandar-fab .fl-ico{ width:40px; height:40px; }
}

/* ---- Subir: el mismo vidrio, flecha en el acento y el aro de avance en el acento ---- */
html .scroll-top-fab{
  background: color-mix(in srgb, var(--bg) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--accent) !important;
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent) !important;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.85) !important;
}
html .scroll-top-fab .stf-fondo{ stroke: color-mix(in srgb, var(--accent) 15%, transparent) !important; }
html .scroll-top-fab .stf-lleno{ stroke: var(--accent) !important; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 70%, transparent)); }
html .scroll-top-fab:hover{ background: var(--accent) !important; color: var(--bg, #111) !important; }
html .scroll-top-fab-arrow{ display:none !important; }

/* ---- Barra de desplazamiento: delgadita, redonda, con el degradado de la marca ---- */
html *{ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 60%, transparent) transparent; }
html ::-webkit-scrollbar{ width:8px !important; height:8px !important; }
html ::-webkit-scrollbar-track{ background: transparent !important; }
html ::-webkit-scrollbar-thumb{
  border-radius:999px !important; border:2px solid transparent !important; background-clip: padding-box !important;
  background-color: transparent !important;
  background-image: linear-gradient(180deg, var(--accent), var(--accent2)) !important;
}
html ::-webkit-scrollbar-thumb:hover{ background-image: linear-gradient(180deg, var(--accent2), var(--accent3)) !important; }

@media (prefers-reduced-motion: reduce){
  html .drawer-handle .drawer-handle-arrow, html .mandar-fab:hover .fl-ico{ animation:none !important; }
}

/* Pesos para titulos y nombres (el bloque de arriba los dejaba en 700). */
html h1, html h2, html h3, html .odoo-list-head-text h2, html .ml-modal h3, html .config-title,
html .nov-head-title, html .mobile-drawer-user-name, html .home-tema-nombre, html .home-tile-title,
html .mobile-drawer-title{ font-weight:600 !important; }
html .code-pill, html .qty-badge, html .kf-value, html .op-cab-cod, html .home-recent-code, html .btn-primary{ font-weight:700 !important; }
/* Es una letra de titulares, un poco apretada: al texto corrido se le da aire. */
html body{ letter-spacing:.2px; }

/* =========================================================================
   Mantenimiento puesto (pedido de Manuel): A.L.B.A. en blanco, negro y grises, para todos
   (alba-mant-puesto, la pantalla de espera) y para el Admin que sigue adentro (alba-mant-admin,
   ver mostrarChipAdmin en actualizar.js). Se cambian las variables del tema con !important,
   que le ganan a las que temas.js pone en línea; las fotos y emojis se destiñen con filtro.
   Los avisos de mantenimiento (#albaMantChip, #albaMantMenu) conservan su ámbar: son el recordatorio.
   ========================================================================= */
html:is(.alba-mant-admin, .alba-mant-puesto):not(.alba-decolor){
  --bg:#0a0a0a !important; --surface:#151515 !important; --surface-2:#1e1e1e !important; --border:#333 !important;
  --accent:#f2f2f2 !important; --accent2:#bdbdbd !important; --accent3:#8c8c8c !important; --accent4:#d6d6d6 !important;
  --tema-1:#e6e6e6 !important; --tema-2:#9e9e9e !important; --tema-3:#5c5c5c !important;
  --text:#f2f2f2 !important; --text-dim:#9a9a9a !important;
}

/* El texto oscuro sobre el acento (botones principales) sigue legible sobre el blanco. */
html:is(.alba-mant-admin, .alba-mant-puesto):not(.alba-decolor) .btn-primary{ color:#0a0a0a !important; }

/* La pestaña del menú late en ámbar mientras siga puesto: que no se le olvide al Admin. */
html.alba-mant-admin .drawer-handle{
  border-color:#f59e0b !important; color:#fbbf24 !important;
  animation: mantPestana 1.6s ease-in-out infinite !important;
}
html.alba-mant-admin .drawer-handle .drawer-handle-text{ color:#fbbf24 !important; }
@keyframes mantPestana{
  0%,100%{ box-shadow: -10px 0 26px -12px rgba(0,0,0,.8), 0 0 0 0 rgba(245,158,11,.55); }
  50%{ box-shadow: -10px 0 26px -12px rgba(0,0,0,.8), 0 0 0 9px rgba(245,158,11,0), 0 0 22px rgba(245,158,11,.75); }
}
/* En PC (dock) el mismo latido en el dock. */
html.alba-mant-admin .alba-dock{ animation: mantDock 1.6s ease-in-out infinite; }
@keyframes mantDock{ 50%{ box-shadow: 0 0 0 1px #f59e0b, 0 0 26px rgba(245,158,11,.6); } }
/* Lo que también trae color propio: las hojitas/particulas del tema y los emojis dentro del texto. */
html:is(.alba-mant-admin, .alba-mant-puesto):not(.alba-decolor) :is(#albaTemaParticulas, #homePanel, #resultPanel, .odoo-list-panel, .mobile-drawer-nav, .alba-dock, .ml-modal, .config-content){ filter: grayscale(1) !important; }
html:is(.alba-mant-admin, .alba-mant-puesto):not(.alba-decolor) body{ background:#0a0a0a !important; background-image:none !important; }
html:is(.alba-mant-admin, .alba-mant-puesto):not(.alba-decolor) :is(#albaMantenimiento, #loginOverlay, .alba-waves){ filter: grayscale(1) !important; }

/* ---- Que nada se salga de la ficha (pedido de Manuel) ----
   El código grande ya no es pastilla redonda: con dos renglones se deformaba. Las pastillas y
   chips pueden partirse en renglones y nunca miden más que su caja. */
html .code-pill-main{ border-radius:18px !important; max-width:100%; overflow-wrap:anywhere; word-break:break-word; box-sizing:border-box; }
html .code-pill:not(.code-pill-main){ max-width:100%; overflow-wrap:anywhere; }
html .cat-chip{ flex-wrap:wrap; max-width:100%; box-sizing:border-box; white-space:normal; text-align:left; border-radius:14px !important; row-gap:2px; }
html .cat-chip b{ overflow-wrap:anywhere; }
html #resultPanel{ overflow-wrap:anywhere; max-width:100%; box-sizing:border-box; }
html #resultPanel img{ max-width:100%; }
html #resultPanel .btn{ white-space:normal; max-width:100%; }
html #resultPanel :is(.chip, .oc-chip, .color-badge, .qty-badge, .flow-tag){ max-width:100%; box-sizing:border-box; }
html #resultPanel .meta-grid > *{ min-width:0; }

/* ---- Ficha en dos columnas en PC (body.con-lateral, ver acomodarHistorialLateral) ----
   Ficha técnica a la izquierda, centrada con el historial en el espacio que haya. */
html body.con-lateral .wrap{ width: clamp(680px, 54%, 1100px) !important; margin-left: max(16px, 2vw) !important; }
html body.con-lateral #resultPanel .ficha-historial-caja{
  border-radius: var(--v3-r, 20px) !important; border:1px solid var(--v3-borde-acento) !important;
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--accent2) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 94%, transparent) !important;
  box-shadow: var(--v3-sombra) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: v3Lateral .5s var(--v3-resorte, ease) both;
}
@keyframes v3Lateral{ from{ opacity:0; transform: translateX(24px); } }
html body.con-lateral #resultPanel .ficha-historial-titulo{
  display:flex !important; align-items:center; gap:8px; font-weight:600 !important; font-size:1.05rem !important;
  border-bottom:1px solid var(--v3-borde) !important; position:sticky; top:-16px; z-index:2;
  margin:-16px -16px 12px !important; padding:14px 16px 10px !important;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}
html body.con-lateral #resultPanel .ficha-historial-titulo::before{
  content:''; width:4px; height:1.1em; border-radius:4px; background: linear-gradient(var(--accent), var(--accent2));
}
@media (prefers-reduced-motion: reduce){ html body.con-lateral #resultPanel .ficha-historial-caja{ animation:none !important; } }

/* ---- A.L.B.A. se vuelve a colorear al quitar el mantenimiento (recolorear en actualizar.js) ---- */
html.alba-recolor{ animation: albaRecolor 1.8s cubic-bezier(.2,.7,.2,1) both !important; }
@keyframes albaRecolor{
  0%{ filter: grayscale(1) brightness(.85); }
  45%{ filter: grayscale(.4) saturate(1.5) brightness(1.08); }
  100%{ filter: none; }
}
.alba-recolor-ola{
  position:fixed; left:50%; top:50%; z-index:2147483600; pointer-events:none;
  width:40vmax; height:40vmax; margin:-20vmax 0 0 -20vmax; border-radius:50%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent2), var(--accent3), var(--accent4, var(--accent)), var(--accent));
  filter: blur(40px); mix-blend-mode: screen;
  animation: albaRecolorOla 1.6s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes albaRecolorOla{
  0%{ transform: scale(0) rotate(0deg); opacity:.85; }
  70%{ opacity:.35; }
  100%{ transform: scale(3.2) rotate(140deg); opacity:0; }
}

/* ---- Al ponerse el mantenimiento: el color se va (decolorear en actualizar.js) ----
   El gris ya está puesto por debajo; esta animación arranca con el color y lo va apagando. */
html.alba-decolor{ animation: albaDecolor 1.8s cubic-bezier(.4,0,.2,1) both !important; }
@keyframes albaDecolor{
  0%{ filter: grayscale(0) saturate(1.3) brightness(1.05) hue-rotate(0deg); }
  35%{ filter: grayscale(.25) saturate(1.6) brightness(1.1); }
  100%{ filter: grayscale(1) brightness(.9); }
}
html.alba-decolor :is(#albaMantChip, #albaMantMenu){ animation: albaMantLlega .7s 1.2s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes albaMantLlega{ from{ opacity:0; transform: translateY(14px) scale(.85); } }
.alba-decolor-ola{
  position:fixed; inset:-20vmax; z-index:2147483600; pointer-events:none;
  background: radial-gradient(circle at 50% 50%, transparent 0%, transparent var(--r, 100%), rgba(10,10,10,.85) calc(var(--r, 100%) + 12%));
  animation: albaDecolorOla 1.6s cubic-bezier(.6,0,.3,1) forwards;
}
@property --r{ syntax:'<percentage>'; initial-value:100%; inherits:false; }
@keyframes albaDecolorOla{
  0%{ --r:110%; opacity:1; }
  60%{ --r:0%; opacity:.9; }
  100%{ --r:0%; opacity:0; }
}

/* ---- Etiquetas "Código" y "Descripción" en la ficha (pedido de Manuel) ---- */
html .ficha-campo{ display:flex; flex-direction:column; gap:5px; min-width:0; }
html .ficha-campo + .ficha-campo{ margin-top:10px; }
html .ficha-etq{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-size:.66rem; font-weight:500 !important; letter-spacing:2px; text-transform:uppercase; color: var(--text-dim);
}
html .ficha-etq::before{ content:''; width:3px; height:.95em; border-radius:3px; background: linear-gradient(var(--accent), var(--accent2)); }

/* ---- Ícono junto a "Menú": acceso rápido al mantenimiento, solo Admin (ver flotantes.js) ---- */
html body.role-admin .mobile-drawer-title{ cursor:pointer; }
html body.role-admin .mobile-drawer-title:hover::before{ background-color: color-mix(in srgb, #f59e0b 22%, transparent); box-shadow: inset 0 0 0 1px #f59e0b; }
html.alba-mant-admin body.role-admin .mobile-drawer-title::before{ box-shadow: inset 0 0 0 1px #f59e0b, 0 0 12px rgba(245,158,11,.6); }

/* ---- Código archivado, estilo "rechazado" (showArchivedScreen) ---- */
.arch-caja.arch2{
  --rojo:#ff4d5e;
  position:relative; width:min(380px, 100%); box-sizing:border-box; padding:30px 22px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  border-radius:26px !important; border:1px solid color-mix(in srgb, var(--rojo) 45%, transparent) !important;
  background:
    radial-gradient(110% 70% at 50% 0%, color-mix(in srgb, var(--rojo) 22%, transparent), transparent 65%),
    color-mix(in srgb, var(--surface) 96%, #000) !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.85), 0 0 0 6px color-mix(in srgb, var(--rojo) 8%, transparent) !important;
  animation: arch2Entra .5s cubic-bezier(.34,1.56,.64,1) both, arch2Tiembla .45s .45s ease both;
}
@keyframes arch2Entra{ from{ opacity:0; transform: translateY(24px) scale(.9); } }
@keyframes arch2Tiembla{ 20%{ transform: translateX(-7px); } 40%{ transform: translateX(6px); } 60%{ transform: translateX(-4px); } 80%{ transform: translateX(2px); } }
.arch2-x{ position:absolute; top:12px; right:12px; width:32px; height:32px; padding:7px; box-sizing:border-box; border-radius:50%;
  border:1px solid var(--v3-borde, #333); background: var(--surface); color: var(--text-dim); cursor:pointer; transition: transform .25s, color .15s, border-color .15s; }
.arch2-x:hover{ transform: rotate(90deg); color: var(--rojo); border-color: var(--rojo); }
.arch2-x svg, .arch2-copiar svg{ width:100%; height:100%; display:block; }
.arch2-sello{ position:relative; width:84px; height:84px; border-radius:50%; padding:20px; box-sizing:border-box; margin-bottom:4px;
  color: var(--rojo); background: color-mix(in srgb, var(--rojo) 14%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rojo) 55%, transparent), 0 0 30px -6px var(--rojo);
  animation: arch2Sello .6s .1s cubic-bezier(.34,1.56,.64,1) both; }
.arch2-sello svg{ width:100%; height:100%; display:block; position:relative; }
.arch2-tache{ stroke-width:2.4; stroke-dasharray:26; stroke-dashoffset:26; animation: arch2Tache .4s .55s ease-out forwards; }
@keyframes arch2Sello{ from{ transform: scale(0) rotate(-25deg); } }
@keyframes arch2Tache{ to{ stroke-dashoffset:0; } }
.arch2-onda{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--rojo); animation: arch2Onda 2.2s ease-out infinite; }
.arch2-onda-2{ animation-delay:1.1s; }
@keyframes arch2Onda{ from{ transform: scale(1); opacity:.6; } to{ transform: scale(1.7); opacity:0; } }
.arch2-etiqueta{ font-size:.64rem; font-weight:500; letter-spacing:2px; text-transform:uppercase; color: var(--rojo);
  padding:3px 10px; border-radius:999px; border:1px solid color-mix(in srgb, var(--rojo) 40%, transparent); background: color-mix(in srgb, var(--rojo) 10%, transparent); }
.arch2-titulo{ margin:0; font-size:1.35rem; font-weight:600; }
.arch2-codigo{ width:100%; box-sizing:border-box; display:flex; align-items:center; gap:10px; margin-top:4px; padding:10px 10px 10px 16px;
  border-radius:16px; border:1px dashed color-mix(in srgb, var(--rojo) 45%, transparent); background: color-mix(in srgb, var(--bg) 60%, transparent); }
.arch2-codigo span{ flex:1; min-width:0; overflow-wrap:anywhere; font-weight:700; font-size:.95rem; text-align:left;
  text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--rojo) 70%, transparent); text-decoration-thickness:2px; }
.arch2-copiar{ flex:none; width:34px; height:34px; padding:8px; box-sizing:border-box; border-radius:10px; cursor:pointer;
  border:1px solid var(--v3-borde, #333); background: var(--surface); color: var(--text); transition: color .15s, border-color .15s; }
.arch2-copiar:hover{ color: var(--rojo); border-color: var(--rojo); }
.arch2-quepaso{ margin:2px 0 6px; font-size:.86rem; line-height:1.5; color: var(--text-dim); font-weight:300; }
.arch2-quepaso b{ color: var(--text); font-weight:600; }
.arch2-ok{ width:100%; padding:12px; border-radius:14px; cursor:pointer; font:inherit; font-weight:600; letter-spacing:.5px;
  color:#fff; border:1px solid var(--rojo); background: linear-gradient(110deg, color-mix(in srgb, var(--rojo) 85%, #fff 0%), color-mix(in srgb, var(--rojo) 70%, #000));
  box-shadow: 0 12px 26px -12px var(--rojo); transition: transform .2s cubic-bezier(.34,1.56,.64,1), filter .15s; }
.arch2-ok:hover{ transform: translateY(-2px); filter: brightness(1.08); }

/* =========================================================================
   Ventanas emergentes rediseñadas (pedido de Manuel): todas con la misma caja de vidrio,
   encabezado con su icono de línea en un cuadrito de color (flotantes.js cambia el emoji),
   una raya debajo del encabezado y la ✕ redonda que gira.
   ========================================================================= */
html :is(.ml-modal, .sg-card, .perm-denied-modal, .config-content){
  border-radius:24px !important;
  border:1px solid var(--v3-borde-acento) !important;
  background:
    radial-gradient(110% 55% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, color-mix(in srgb, var(--accent2) 7%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 97%, transparent) !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html .sg-overlay{ -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
html .sg-overlay > .sg-card{ animation: v3Ventana .4s var(--v3-resorte) both; }

/* Encabezados */
html :is(.po-modal-head, .nov-head, .sg-cab, .mant-head){
  padding-bottom:12px !important; margin-bottom:12px !important;
  border-bottom:1px solid var(--v3-borde) !important;
}
html .po-modal-head h3, html .ml-modal > h3{ display:flex; align-items:center; gap:10px; font-weight:600 !important; font-size:1.08rem !important; margin:0; }
html .pop-ico{
  flex:none; width:38px; height:38px; padding:9px; box-sizing:border-box; border-radius:12px;
  display:inline-flex !important; align-items:center; justify-content:center;
  color: var(--accent) !important; font-size:0 !important;
  background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
html .pop-ico svg{ width:100%; height:100%; display:block; }
html .nov-head-icon.pop-ico, html .mant-head-icon.pop-ico{ width:44px !important; height:44px !important; padding:10px; border-radius:14px !important; }
html .perm-denied-icon.pop-ico{ width:64px !important; height:64px !important; padding:16px; border-radius:50% !important; color:#fbbf24 !important;
  background: color-mix(in srgb, #f59e0b 14%, transparent) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f59e0b 50%, transparent), 0 0 26px -6px #f59e0b !important; }
html .sg-eyebrow.pop-con-ico{ display:inline-flex; align-items:center; gap:8px; }
html .sg-eyebrow .pop-ico{ width:28px; height:28px; padding:6px; border-radius:9px; }

/* La ✕ */
html .pop-x{
  width:34px !important; height:34px !important; padding:8px !important; box-sizing:border-box; border-radius:50% !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  border:1px solid var(--v3-borde) !important; background: var(--surface) !important; color: var(--text-dim) !important;
  transition: transform .25s var(--v3-resorte), color .15s, border-color .15s !important;
}
html .pop-x svg{ width:100%; height:100%; display:block; }
html .pop-x:hover{ transform: rotate(90deg) !important; color:#ff6b6b !important; border-color:#ff6b6b !important; }

/* Pie de botones: en fila, el principal a la derecha y más ancho. */
html .ml-modal-actions{ display:flex !important; flex-wrap:wrap; justify-content:flex-end; gap:8px !important; padding-top:12px; border-top:1px solid var(--v3-borde); }
html .ml-modal-actions .btn-primary{ flex:1 1 160px; }


/* ---- Raleway (pedido de Manuel) ----
   Sus numeros vienen "de estilo antiguo" (suben y bajan como minusculas): en codigos y
   cantidades se leen mal, asi que se ponen derechos y del mismo ancho en toda la app.
   Raleway si trae 800 y 900: los titulos van en 700 y los codigos y cantidades en 800. */
html, html body, html input, html select, html textarea, html button{
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
}
html h1, html h2, html h3, html .odoo-list-head-text h2, html .ml-modal h3, html .config-title,
html .nov-head-title, html .mobile-drawer-user-name, html .home-tema-nombre, html .home-tile-title,
html .mobile-drawer-title, html .arch2-titulo{ font-weight:700 !important; }
html .code-pill, html .code-pill-main, html .qty-badge, html .kf-value, html .op-cab-cod, html .home-recent-code{ font-weight:800 !important; }
html .greeting, html .home-tema-nombre b{ font-weight:300 !important; }
html body{ letter-spacing:.15px; }

/* ---- Cuadrícula de los botones de fotos, de 1×1 a 4×4 (albaCuadriculaFotoBtns) ---- */
html .pub-grid[data-cols="1"]{ grid-template-columns:minmax(0, 1fr) !important; }
html .pub-grid[data-cols="2"]{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
html .pub-grid[data-cols="3"]{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
html .pub-grid[data-cols="4"]{ grid-template-columns:repeat(4, minmax(0, 1fr)) !important; }
html .pub-cuadricula{ margin:6px 0 10px; }
/* El borrar va dentro de la cuadrícula como un botón más: su barra no hace caja propia. Al
   elegir fotos, los controles (cuántas, Todas, Borrar, Cancelar) ocupan el renglón entero. */
html .pub-grid > .attach-borrar-barra{ display:contents; }
html .pub-grid > .attach-borrar-barra > .attach-borrar-empezar{ width:100%; margin:0 !important; }
html .pub-grid > .attach-borrar-barra > .attach-borrar-modo{ grid-column:1 / -1; }
html .pub-grid > .attach-borrar-barra.eligiendo > .attach-borrar-modo{ display:flex !important; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; border-radius:14px;
  border:1px solid color-mix(in srgb, #ff4d5e 45%, transparent); background: color-mix(in srgb, #ff4d5e 10%, transparent); }

/* ---- "Código" y "Descripción", más notables (pedido de Manuel): pastilla con el acento ---- */
html .ficha-etq{
  font-size:.76rem !important; font-weight:800 !important; letter-spacing:1.6px !important; color: var(--accent) !important;
  padding:4px 12px 4px 10px; border-radius:999px; gap:7px !important;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
html .ficha-etq::before{ width:7px !important; height:7px !important; border-radius:50% !important; background: var(--accent) !important; box-shadow:0 0 8px var(--accent); }
html .ficha-campo + .ficha-campo .ficha-etq{ color: var(--accent2) !important; background: color-mix(in srgb, var(--accent2) 14%, transparent); border-color: color-mix(in srgb, var(--accent2) 45%, transparent); }
html .ficha-campo + .ficha-campo .ficha-etq::before{ background: var(--accent2) !important; box-shadow:0 0 8px var(--accent2); }

/* ---- Botón de variantes: "Código Con N Variantes · Click para verlos" ---- */
html .product-variants-btn{
  display:flex !important; align-items:center; gap:12px; width:100%; text-align:left !important;
  padding:10px 14px 10px 10px !important; border-radius:16px !important;
  border:1px solid color-mix(in srgb, var(--accent3) 50%, transparent) !important;
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent3) 18%, transparent), transparent 70%), var(--surface) !important;
  color: var(--text) !important; white-space:normal !important;
}
html .product-variants-btn .pvb-ico{ flex:none; width:40px; height:40px; padding:9px; box-sizing:border-box; border-radius:12px; color: var(--accent3);
  background: color-mix(in srgb, var(--accent3) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent3) 45%, transparent); }
html .product-variants-btn .pvb-ico svg{ width:100%; height:100%; display:block; }
html .product-variants-btn .pvb-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
html .product-variants-btn .pvb-txt b{ font-weight:800; font-size:.95rem; }
html .product-variants-btn .pvb-txt small{ font-size:.74rem; font-weight:500; color: var(--text-dim); }
html .product-variants-btn .pvb-ir{ margin-left:auto; font-size:1.4rem; color: var(--accent3); transition: transform .2s var(--v3-resorte); }
html .product-variants-btn:hover .pvb-ir{ transform: translateX(4px); }

/* ---- Código de barras ---- */
.barras-card{ position:relative; width:min(460px, 100%); box-sizing:border-box; padding:20px !important; display:flex; flex-direction:column; gap:12px; }
.barras-card .po-modal-close{ position:absolute; top:12px; right:12px; }
.barras-papel{ background:#fff; border-radius:14px; padding:18px 18px 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.barras-svg{ display:block; width:100%; height:110px; }
.barras-num{ text-align:center; color:#111; font-weight:700; letter-spacing:3px; margin-top:6px; font-size:1rem; }
.barras-de{ font-size:.82rem; color: var(--text-dim); line-height:1.45; overflow-wrap:anywhere; }
.barras-de b{ color: var(--text); }

/* =========================================================================
   QR, Piezas Totales y ubicaciones puestas a mano, rediseñados (pedido de Manuel).
   ========================================================================= */
/* ---- Globo del QR: vidrio, código en pastilla, papel blanco con esquinas de visor y el logo de A.L.B.A. ---- */
html .alba-globo.qr-pop{
  width:260px; padding:14px !important; border-radius:22px !important;
  border:1px solid var(--v3-borde-acento) !important;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 96%, transparent) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.85) !important;
}
html .qr-pop .alba-globo-titulo{ font-size:.86rem !important; font-weight:700 !important; }
html .qr-pop .alba-globo-x{ width:28px !important; height:28px !important; border-radius:50% !important; }
html .qr-pop-sub{
  font-family: var(--font-ui) !important; font-size:.7rem !important; font-weight:800 !important; letter-spacing:.3px;
  padding:6px 10px; margin:8px 0 10px; border-radius:12px; text-align:center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
html .qr-pop-lienzo{ --qr-pad:14px; border-radius:18px !important; box-shadow: 0 10px 30px -14px rgba(0,0,0,.8); }
/* Las cuatro esquinas de visor, como el recuadro de la cámara. */
html .qr-pop-lienzo::before{
  content:''; position:absolute; inset:5px; pointer-events:none; z-index:2; border-radius:14px;
  --c: var(--accent); --l:18px; --g:3px;
  background:
    linear-gradient(var(--c) 0 0) top left / var(--l) var(--g) no-repeat, linear-gradient(var(--c) 0 0) top left / var(--g) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) top right / var(--l) var(--g) no-repeat, linear-gradient(var(--c) 0 0) top right / var(--g) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) bottom left / var(--l) var(--g) no-repeat, linear-gradient(var(--c) 0 0) bottom left / var(--g) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--g) no-repeat, linear-gradient(var(--c) 0 0) bottom right / var(--g) var(--l) no-repeat;
}
html .qr-pop-logo{ width:26% !important; background:#0d0e10 !important; box-shadow: 0 0 0 4px #fff !important; }
html .qr-pop-logo img{ width:100% !important; height:100% !important; }
html .qr-pop-copiar{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:10px; padding:10px; box-sizing:border-box;
  border-radius:14px !important; font:inherit; font-weight:700 !important; cursor:pointer;
  color: var(--bg, #111) !important; background: var(--accent) !important; border:0 !important;
  box-shadow: 0 10px 22px -12px var(--accent) !important; transition: transform .2s var(--v3-resorte), filter .15s;
}
html .qr-pop-copiar svg{ width:16px; height:16px; }
html .qr-pop-copiar:hover{ transform: translateY(-2px); filter: brightness(1.08); }

/* ---- Piezas Totales ---- */
html .total-piezas-card{
  display:flex !important; align-items:center; gap:16px !important;
  padding:16px 18px !important; border-radius:22px !important;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important;
  background:
    radial-gradient(120% 120% at 0% 50%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface) 94%, transparent) !important;
  box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--accent) 80%, transparent) !important;
  transition: transform .2s var(--v3-resorte), border-color .15s !important;
}
html .total-piezas-copy:hover{ transform: translateY(-2px); border-color: var(--accent) !important; }
html .total-piezas-icon{
  flex:none; width:60px !important; height:60px !important; border-radius:50% !important; padding:0 !important;
  background: #0d0e10 !important; border:0 !important;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 24px -4px var(--accent) !important;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
html .total-piezas-img.total-piezas-alba{ width:100% !important; height:100% !important; object-fit:contain; }
html .total-piezas-icon{ animation: piezasLogo 2.8s ease-in-out infinite; }
@keyframes piezasLogo{ 50%{ box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent), 0 0 34px 0 var(--accent); } }
html .total-piezas-label{ font-size:.68rem !important; font-weight:700 !important; letter-spacing:2px !important; text-transform:uppercase; color: var(--text-dim) !important; }
html .total-piezas-value{ font-size:2rem !important; font-weight:800 !important; line-height:1.05 !important; color: var(--accent) !important; }
html .total-piezas-unit{ font-size:.9rem !important; font-weight:600 !important; color: var(--text) !important; text-transform:uppercase; letter-spacing:1px; }
html .total-piezas-desglose{ font-size:.74rem !important; color: var(--text-dim) !important; margin-top:3px; }
html .total-piezas-desglose b{ color: var(--accent2) !important; }
html .total-piezas-copy-hint{
  margin-left:auto; padding:7px 12px !important; border-radius:999px !important; font-size:.72rem !important; font-weight:700 !important;
  border:1px solid var(--v3-borde) !important; background: var(--surface) !important; white-space:nowrap;
}
@media (max-width:560px){ html .total-piezas-copy-hint{ margin-left:0; } }

/* ---- Ubicación puesta a mano: tarjeta morada con su pastilla de "Puesta a mano" ---- */
html .manual-loc-card.loc-pill{
  --mano:#a78bfa;
  display:flex !important; align-items:center; gap:12px !important;
  padding:10px 12px !important; border-radius:18px !important;
  border:1px solid color-mix(in srgb, var(--mano) 50%, transparent) !important;
  background: linear-gradient(110deg, color-mix(in srgb, var(--mano) 20%, transparent), transparent 75%), var(--surface) !important;
  box-shadow: 0 12px 28px -18px var(--mano) !important;
}
html .manual-loc-card .loc-pill-icono{ width:42px !important; height:42px !important; border-radius:12px !important; padding:7px; box-sizing:border-box;
  background: color-mix(in srgb, var(--mano) 18%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mano) 45%, transparent); }
html .manual-loc-card .loc-pill-ubic{ font-weight:800 !important; font-size:1rem !important; display:flex; flex-direction:column; gap:3px; }
html .manual-loc-card .loc-pill-nota{ align-self:flex-start; font-size:.58rem !important; font-weight:700 !important; letter-spacing:1.4px; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; color: var(--mano) !important; background: color-mix(in srgb, var(--mano) 14%, transparent); }
html .manual-loc-card .loc-qty{ margin-left:auto; font-size:1.15rem !important; font-weight:800 !important; padding:4px 12px; border-radius:12px;
  background: color-mix(in srgb, var(--mano) 16%, transparent); }
html .manual-loc-actions button{ width:30px !important; height:30px !important; border-radius:50% !important; }
html .alba-globo.qr-pop{ max-height:none !important; overflow:visible !important; }

/* ---- Elegir entre varios por código de barras (renderBarcodeMultiple) ---- */
.barras-elegir{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; margin-top:12px; }
.barras-elegir-op{
  display:flex; align-items:center; gap:12px; padding:10px; text-align:left; cursor:pointer; font:inherit; color: var(--text);
  border-radius:18px; border:1px solid var(--v3-borde, #333); background: color-mix(in srgb, var(--surface) 92%, transparent);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .15s, box-shadow .15s;
  animation: v3Entra .4s cubic-bezier(.34,1.56,.64,1) both;
}
.barras-elegir-op:nth-child(2){ animation-delay:.04s } .barras-elegir-op:nth-child(3){ animation-delay:.08s } .barras-elegir-op:nth-child(n+4){ animation-delay:.12s }
.barras-elegir-op:hover{ transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 14px 30px -16px var(--accent); }
.barras-elegir-foto{ flex:none; width:64px; height:64px; border-radius:14px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.barras-elegir-foto img{ width:100%; height:100%; object-fit:contain; }
.barras-elegir-sin{ font-size:1.4rem; opacity:.4; filter: grayscale(1); }
.barras-elegir-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.barras-elegir-txt b{ font-weight:800; font-size:.86rem; overflow-wrap:anywhere; }
.barras-elegir-bc{ align-self:flex-start; font-size:.66rem; font-weight:700; letter-spacing:.5px; padding:2px 8px; border-radius:999px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.barras-elegir-nom{ font-size:.72rem; color: var(--text-dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* =========================================================================
   Ventanas de ajustes rediseñadas (pedido de Manuel): Mantenimiento, Temas, Horario y
   Configuración. Cada una con su color (--pop-c), encabezado compacto con icono SVG en cuadrito
   (flotantes.js), estado como pastilla, secciones en tarjeta, switch nuevo y entrada con resorte.
   ========================================================================= */
html .glass:is(.mant-modal, .temas-modal, .horario-modal, .config-ventana){
  --pop-c: var(--accent);
  position:relative; overflow:hidden;
  padding:20px !important; border-radius:26px !important;
  border:1px solid color-mix(in srgb, var(--pop-c) 40%, transparent) !important;
  background:
    radial-gradient(120% 50% at 0% 0%, color-mix(in srgb, var(--pop-c) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 97%, transparent) !important;
  box-shadow: 0 34px 90px -24px rgba(0,0,0,.9), 0 0 0 6px color-mix(in srgb, var(--pop-c) 6%, transparent) !important;
}
html .glass.mant-modal{ --pop-c:#f59e0b; }
html .glass.temas-modal{ --pop-c: var(--accent3); }
html .glass.horario-modal{ --pop-c:#38bdf8; }
html .modal-overlay.show > .glass:is(.mant-modal, .temas-modal, .horario-modal, .config-ventana){ animation: v3Ventana .45s var(--v3-resorte) both; }
/* Franja de luz arriba, del color de la ventana. */
html .glass:is(.mant-modal, .temas-modal, .horario-modal, .config-ventana)::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, transparent, var(--pop-c), transparent);
  animation: ventanaLuz 2.6s ease-in-out infinite;
}
@keyframes ventanaLuz{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

/* Encabezado: sin bloque de degradado, icono + título + subtítulo, y el estado a la derecha. */
html :is(.mant-head, .temas-head, .horario-head){
  display:flex !important; align-items:center; justify-content:space-between; gap:12px;
  background:none !important; padding:0 0 14px !important; margin:0 0 16px !important; border-radius:0 !important;
  border-bottom:1px solid var(--v3-borde) !important; box-shadow:none !important; color: var(--text) !important;
}
html :is(.mant-head-title, .temas-head-title, .horario-head-title){ display:flex; align-items:center; gap:12px; min-width:0; }
html :is(.mant-head-icon, .temas-head-icon, .horario-head-icon).pop-ico{
  width:48px !important; height:48px !important; padding:11px !important; border-radius:15px !important;
  color: var(--pop-c) !important; background: color-mix(in srgb, var(--pop-c) 16%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pop-c) 45%, transparent), 0 0 24px -8px var(--pop-c) !important;
  animation: ventanaIcono .6s .15s var(--v3-resorte) both;
}
@keyframes ventanaIcono{ from{ transform: scale(.4) rotate(-20deg); opacity:0; } }
html :is(.mant-head-nombre, .temas-head-nombre, .horario-head-nombre){ font-size:1.15rem !important; font-weight:700 !important; color: var(--text) !important; text-shadow:none !important; }
html :is(.mant-head-sub, .temas-head-sub, .horario-head-sub){ font-size:.78rem !important; color: var(--text-dim) !important; text-shadow:none !important; }
html :is(.mant-estado, .temas-estado, .horario-estado){
  flex:none; padding:5px 12px !important; border-radius:999px !important; font-size:.7rem !important; font-weight:700 !important;
  border:1px solid color-mix(in srgb, var(--pop-c) 45%, transparent) !important;
  background: color-mix(in srgb, var(--pop-c) 12%, transparent) !important; color: var(--pop-c) !important; box-shadow:none !important;
}
html .mant-estado.puesto{ --pop-c:#ff4d5e; animation: espLatido 1.4s ease-in-out infinite; }
html .mant-estado.quitado{ --pop-c:#2dd4bf; }

/* Configuración: su título como los demás encabezados. */
html .config-ventana .config-title{
  display:flex; align-items:center; gap:12px; background:none !important; color: var(--text) !important; text-shadow:none !important;
  padding:0 0 14px !important; margin:0 0 16px !important; border-radius:0 !important; font-size:1.15rem !important;
  border-bottom:1px solid var(--v3-borde) !important;
}
html .config-ventana .config-title .pop-ico{ width:48px; height:48px; padding:11px; border-radius:15px; }
html .config-acceso.pop-con-ico{ display:flex !important; align-items:center; gap:10px; justify-content:flex-start !important; text-align:left; }
html .config-acceso .pop-ico{ width:32px; height:32px; padding:7px; border-radius:10px; }

/* Switch: pastilla con la bolita que salta. */
html .mant-switch{
  display:flex !important; align-items:center; gap:14px; padding:14px 16px !important; border-radius:18px !important;
  border:1px solid var(--v3-borde) !important; background: color-mix(in srgb, var(--bg) 40%, var(--surface)) !important; cursor:pointer;
  transition: border-color .2s, background .2s;
}
html .mant-switch:has(input:checked){ border-color: color-mix(in srgb, #ff4d5e 55%, transparent) !important; background: color-mix(in srgb, #ff4d5e 10%, var(--surface)) !important; }
html .mant-switch-pista{
  flex:none; position:relative; width:52px !important; height:30px !important; border-radius:999px !important;
  background: color-mix(in srgb, var(--text-dim) 30%, transparent) !important; border:0 !important; transition: background .25s;
}
html .mant-switch-bolita{
  position:absolute; top:3px !important; left:3px !important; width:24px !important; height:24px !important; border-radius:50% !important;
  background:#fff !important; box-shadow: 0 3px 8px rgba(0,0,0,.4) !important; transition: transform .35s var(--v3-resorte) !important;
}
html .mant-switch input:checked + .mant-switch-pista,
html .mant-switch:has(input:checked) .mant-switch-pista{ background:#ff4d5e !important; box-shadow: 0 0 16px -2px #ff4d5e; }
html .mant-switch:has(input:checked) .mant-switch-bolita{ transform: translateX(22px) !important; }

/* Campos, vista previa y nota. */
html .mant-campo label, html .mant-campo > span{ font-size:.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color: var(--text-dim); }
html .mant-previo{
  border-radius:18px !important; border:1px dashed color-mix(in srgb, var(--pop-c) 45%, transparent) !important;
  background: color-mix(in srgb, var(--pop-c) 6%, var(--bg)) !important; padding:16px !important; text-align:center;
}
html .mant-previo-etiqueta{ display:inline-block; font-size:.6rem !important; letter-spacing:2px !important; padding:3px 10px; border-radius:999px; color: var(--pop-c) !important; background: color-mix(in srgb, var(--pop-c) 12%, transparent); margin-bottom:10px; }
html .mant-previo-saludo b{ color: var(--pop-c) !important; }
html .mant-nota{
  display:flex; gap:10px; padding:12px 14px !important; border-radius:16px !important; font-size:.8rem !important; line-height:1.5;
  border:1px solid color-mix(in srgb, #f59e0b 40%, transparent) !important; background: color-mix(in srgb, #f59e0b 9%, transparent) !important;
}
html .mant-acciones{ padding-top:14px; border-top:1px solid var(--v3-borde); }
html .mant-acciones .btn{ flex:1 1 140px; min-height:46px; border-radius:14px !important; }
html .mant-modal .mant-acciones .btn-primary{ background: var(--pop-c) !important; color:#1a1200 !important; box-shadow: 0 12px 24px -12px var(--pop-c) !important; }

/* ---- Preferencia "Animaciones" apagada: A.L.B.A. no se mueve nada ---- */
html.alba-sin-anim *, html.alba-sin-anim *::before, html.alba-sin-anim *::after{
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}

/* ---- Transferencias Internas: conectar la cuenta de Odoo de cada quien (transferencias.js) ---- */
.ti-odoo-caja{
  position:relative; width:min(400px, 100%); box-sizing:border-box; padding:30px 24px 22px !important; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  border-radius:26px !important; border:1px solid color-mix(in srgb, #a78bfa 45%, transparent) !important;
  background: radial-gradient(110% 60% at 50% 0%, color-mix(in srgb, #a78bfa 20%, transparent), transparent 65%), var(--surface) !important;
  box-shadow: 0 34px 90px -24px rgba(0,0,0,.9) !important;
  animation: v3Ventana .45s cubic-bezier(.34,1.56,.64,1) both;
}
.ti-odoo-x{ position:absolute; top:12px; right:12px; width:32px; height:32px; padding:7px; box-sizing:border-box; border-radius:50%; cursor:pointer;
  border:1px solid var(--v3-borde, #333); background: var(--surface); color: var(--text-dim); transition: transform .25s; }
.ti-odoo-x:hover{ transform: rotate(90deg); color:#ff6b6b; }
.ti-odoo-x svg, .ti-odoo-sello svg, .ti-odoo-barra-ico svg{ width:100%; height:100%; display:block; }
.ti-odoo-sello{ width:72px; height:72px; padding:18px; box-sizing:border-box; border-radius:22px; color:#c4b5fd;
  background: color-mix(in srgb, #a78bfa 16%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #a78bfa 50%, transparent), 0 0 30px -8px #a78bfa;
  animation: ventanaIcono .6s .15s cubic-bezier(.34,1.56,.64,1) both; }
.ti-odoo-titulo{ margin:4px 0 0; font-size:1.3rem; font-weight:700; }
.ti-odoo-texto{ margin:0; font-size:.86rem; line-height:1.5; color: var(--text-dim); }
.ti-odoo-texto b{ color: var(--text); }
.ti-odoo-cargando{ font-size:.82rem; color: var(--text-dim); padding:10px; }
.ti-odoo-form{ width:100%; display:flex; flex-direction:column; gap:10px; margin-top:6px; text-align:left; }
.ti-odoo-form[hidden], .ti-odoo-cargando[hidden]{ display:none; }
.ti-odoo-campo{ display:flex; flex-direction:column; gap:5px; }
.ti-odoo-campo span{ font-size:.68rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color: var(--text-dim); }
.ti-odoo-campo input{ width:100%; box-sizing:border-box; padding:12px 14px; font-size:.95rem; }
.ti-odoo-msg{ min-height:1.2em; }
.ti-odoo-ok{ width:100%; min-height:48px; border-radius:14px !important; background:#8b5cf6 !important; color:#fff !important; }
.ti-odoo-nota{ margin:0; font-size:.72rem; line-height:1.45; color: var(--text-dim); text-align:center; }
.ti-odoo-barra{ display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:10px 12px; border-radius:18px;
  border:1px solid color-mix(in srgb, #a78bfa 45%, transparent); background: linear-gradient(110deg, color-mix(in srgb, #a78bfa 16%, transparent), transparent 75%), var(--surface); }
.ti-odoo-barra[hidden]{ display:none; }
.ti-odoo-barra-ico{ flex:none; width:40px; height:40px; padding:9px; box-sizing:border-box; border-radius:50%; color:#c4b5fd; background: color-mix(in srgb, #a78bfa 18%, transparent); }
.ti-odoo-barra-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.ti-odoo-barra-txt b{ font-weight:700; }
.ti-odoo-barra-txt small{ font-size:.72rem; color: var(--text-dim); overflow-wrap:anywhere; }
.ti-odoo-cambiar{ margin-left:auto; font-size:.76rem !important; padding:7px 12px !important; }
/* Hover del Panel De Control, suave (pedido de Manuel): sube tantito y brilla, sin inclinarse ni
   pintarse entera. El circulo del icono se queda con su tinte en vez de rellenarse. */
html.con-morphicons #homePanel .home-tile:hover, html.con-morphicons #homePanel .home-tile:focus-visible{
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--mi-c) 70%, transparent) !important;
}
html.con-morphicons #homePanel .home-tile:hover .home-tile-icon{
  background: color-mix(in srgb, var(--mi-c) 24%, transparent) !important; color: var(--mi-c) !important; transform: scale(1.05) !important;
}

/* =========================================================================
   Tema personal CYBERPUNK — solo la cuenta de Manuel M. (ver CYBERPUNK en temas.js).
   Neon cian / magenta / amarillo, esquinas cortadas en diagonal, lineas de monitor y una
   cuadricula en perspectiva al fondo. Todo cuelga de html[data-tema="cyberpunk"].
   ========================================================================= */
html[data-tema="cyberpunk"]{
  --cp-cian:#05d9e8; --cp-rosa:#ff2a6d; --cp-amarillo:#f9f002; --cp-morado:#b967ff;
  --cp-corte:12px;
  --text:#e6f7ff; --text-dim:#8aa3c2;
}
html[data-tema="cyberpunk"] body{
  background:
    radial-gradient(80% 60% at 15% 0%, rgba(255,42,109,.22), transparent 60%),
    radial-gradient(70% 60% at 100% 10%, rgba(5,217,232,.18), transparent 60%),
    #05040c !important;
}
/* Cuadricula de neon en el piso, en perspectiva, moviendose hacia ti. */
html[data-tema="cyberpunk"] body::before{
  content:''; position:fixed; left:-50%; right:-50%; bottom:-14%; height:38vh; z-index:0; pointer-events:none;
  background:
    linear-gradient(transparent 0 calc(100% - 1px), rgba(255,42,109,.45) 0) 0 0 / 100% 46px,
    linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(5,217,232,.35) 0) 0 0 / 46px 100%;
  transform: perspective(380px) rotateX(62deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%);
  animation: cpPiso 2.4s linear infinite;
}
@keyframes cpPiso{ to{ background-position: 0 46px, 0 0; } }
/* Lineas de monitor. */
html[data-tema="cyberpunk"] body::after{
  content:''; position:fixed; inset:0; z-index:2147483000; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
html[data-tema="cyberpunk"] .wrap{ position:relative; z-index:1; }

/* Tarjetas: esquinas cortadas en diagonal y borde de neon. */
html[data-tema="cyberpunk"] :is(.glass, .home-tile, .home-tema, .total-piezas-card, .ml-modal, .sg-card){
  border-radius:0 !important;
  clip-path: polygon(var(--cp-corte) 0, 100% 0, 100% calc(100% - var(--cp-corte)), calc(100% - var(--cp-corte)) 100%, 0 100%, 0 var(--cp-corte));
  border:1px solid color-mix(in srgb, var(--cp-cian) 55%, transparent) !important;
  background:
    linear-gradient(135deg, rgba(5,217,232,.08), transparent 40%),
    linear-gradient(315deg, rgba(255,42,109,.08), transparent 40%),
    rgba(13,10,28,.92) !important;
  box-shadow: inset 0 0 0 1px rgba(5,217,232,.12), inset 0 0 24px rgba(5,217,232,.06) !important;
}
html[data-tema="cyberpunk"] .home-tile:hover{
  border-color: var(--cp-rosa) !important;
  box-shadow: inset 0 0 0 1px var(--cp-rosa), inset 0 0 30px rgba(255,42,109,.25) !important;
}
/* Iconos en cuadrito de neon, sin redondear. */
html[data-tema="cyberpunk"] :is(.home-tile-icon, .drawer-item-icon, .pop-ico, .total-piezas-icon, .odoo-list-icon){
  border-radius:4px !important;
  box-shadow: 0 0 0 1px currentColor, 0 0 14px -2px currentColor !important;
}

/* Titulos: mayusculas, neon y un glitch de vez en cuando. */
html[data-tema="cyberpunk"] :is(h1, h2, h3, .odoo-list-head-text h2, .home-tema-nombre, .mobile-drawer-title){
  text-transform: uppercase; letter-spacing:2px !important;
  text-shadow: 0 0 6px rgba(5,217,232,.8), 0 0 18px rgba(5,217,232,.35);
}
html[data-tema="cyberpunk"] .home-title-main > span:last-child,
html[data-tema="cyberpunk"] .odoo-list-head-text h2{ animation: cpGlitch 5s steps(1) infinite; }
@keyframes cpGlitch{
  0%, 92%, 100%{ text-shadow: 0 0 6px rgba(5,217,232,.8); transform:none; }
  93%{ text-shadow: -2px 0 var(--cp-rosa), 2px 0 var(--cp-cian); transform: translateX(1px) skewX(-6deg); }
  95%{ text-shadow: 2px 0 var(--cp-rosa), -2px 0 var(--cp-cian); transform: translateX(-1px); }
  97%{ text-shadow: -1px 0 var(--cp-amarillo), 1px 0 var(--cp-rosa); transform: skewX(4deg); }
}

/* Botones: rectangulos con un corte, el principal amarillo electrico. */
html[data-tema="cyberpunk"] .btn{
  border-radius:0 !important; text-transform:uppercase; letter-spacing:1.4px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  border:1px solid color-mix(in srgb, var(--cp-cian) 50%, transparent) !important;
}
html[data-tema="cyberpunk"] .btn:hover:not(:disabled){ box-shadow: 0 0 18px -4px var(--cp-cian) !important; border-color: var(--cp-cian) !important; }
html[data-tema="cyberpunk"] .btn-primary{ background: var(--cp-amarillo) !important; color:#05040c !important; border-color: var(--cp-amarillo) !important; }
html[data-tema="cyberpunk"] .btn-primary:hover:not(:disabled){ box-shadow: 0 0 22px -2px var(--cp-amarillo) !important; }

/* Campos y buscador. */
html[data-tema="cyberpunk"] :is(input, select, textarea){
  border-radius:0 !important; background: rgba(5,4,12,.85) !important;
  border:1px solid color-mix(in srgb, var(--cp-morado) 55%, transparent) !important; color: var(--text) !important;
}
html[data-tema="cyberpunk"] :is(input, select, textarea):focus{ border-color: var(--cp-cian) !important; box-shadow: 0 0 0 1px var(--cp-cian), 0 0 18px -4px var(--cp-cian) !important; }
html[data-tema="cyberpunk"] .alba-banner .main-search #searchBtn{ background: var(--cp-rosa) !important; border-color: var(--cp-rosa) !important; color:#05040c !important; border-radius:0 !important; }

/* Codigo de la ficha: como una pantalla de terminal. */
html[data-tema="cyberpunk"] .code-pill-main{
  border-radius:0 !important; color: var(--cp-cian) !important; background: rgba(5,217,232,.07) !important;
  border:1px solid var(--cp-cian) !important; text-shadow: 0 0 8px rgba(5,217,232,.7);
}
html[data-tema="cyberpunk"] .ficha-etq{ border-radius:0 !important; }

/* Dock y menu lateral. */
html[data-tema="cyberpunk"] .alba-dock{ border-radius:0 !important; border-color: color-mix(in srgb, var(--cp-rosa) 50%, transparent) !important;
  box-shadow: 0 0 30px -10px var(--cp-rosa), inset 0 0 0 1px rgba(255,42,109,.2) !important; }
html[data-tema="cyberpunk"] .dock-item{ border-radius:4px !important; }
html[data-tema="cyberpunk"] .dock-item:hover{ color: var(--cp-amarillo) !important; border-color: var(--cp-amarillo) !important; box-shadow: 0 0 16px -3px var(--cp-amarillo); }
html[data-tema="cyberpunk"] .mobile-drawer .drawer-item{ border-radius:0 !important; }
html[data-tema="cyberpunk"] .mobile-drawer-user .drawer-avatar{ border-radius:4px !important; }

/* Barra de desplazamiento neon. */
html[data-tema="cyberpunk"] ::-webkit-scrollbar-thumb{ border-radius:0 !important; background-image: linear-gradient(var(--cp-rosa), var(--cp-cian)) !important; }

@media (prefers-reduced-motion: reduce){
  html[data-tema="cyberpunk"]:not(.alba-anim-siempre) body::before,
  html[data-tema="cyberpunk"]:not(.alba-anim-siempre) .home-title-main > span:last-child{ animation:none !important; }
}

/* ---- Temas: "Temas Para Todos" y "Mis Temas" (ponerPestanaTemas en script.js) ---- */
.temas-tabs{ display:flex; gap:6px; padding:5px; margin:0 0 16px; border-radius:16px; border:1px solid var(--v3-borde, #333); background: color-mix(in srgb, var(--bg) 50%, var(--surface)); }
.temas-tabs[hidden]{ display:none; }
.temas-tab{ flex:1; padding:10px 12px; border-radius:12px; border:0; cursor:pointer; font:inherit; font-weight:700; font-size:.86rem;
  color: var(--text-dim); background:transparent; transition: background .2s, color .2s, transform .2s cubic-bezier(.34,1.56,.64,1); }
.temas-tab[hidden]{ display:none; }
.temas-tab:hover{ color: var(--text); }
.temas-tab.activa{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45); background: var(--pop-c, var(--accent)); box-shadow: 0 8px 18px -10px var(--pop-c, var(--accent)); }
.temas-mios-sub{ margin:0 0 12px; font-size:.84rem; color: var(--text-dim); line-height:1.5; }
/* Cada pestaña enseña lo suyo. */
.temas-modal:not(.ver-mios) .temas-mios{ display:none; }
.temas-modal.ver-mios > :is(.temas-switch, #temasQuienLoPuso, #temasCuerpo, #temasOpiniones, .temas-acciones){ display:none !important; }
.temas-mios .temas-acciones{ display:flex !important; }
.temas-mios-grid{ max-height:min(52vh, 460px); overflow-y:auto; }

/* ---- Mis Temas: icono SVG y selector Oscuro / Claro (pintarMisTemas) ---- */
.mi-tema-ico{ flex:none; width:34px; height:34px; padding:7px; box-sizing:border-box; border-radius:10px; display:inline-flex;
  color: var(--ic, var(--text)); background: color-mix(in srgb, var(--ic, var(--text)) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic, var(--text)) 40%, transparent); }
.mi-tema-ico svg{ width:100%; height:100%; display:block; }
.mi-tema .tema-card-cab{ gap:10px; }
.mi-tema-variantes{ display:flex; gap:4px; margin-top:10px; padding:3px; border-radius:999px; background: rgba(127,127,127,.18); }
.mi-tema-var{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:5px 8px; border-radius:999px;
  font-size:.7rem; font-weight:700; cursor:pointer; opacity:.7; transition: background .2s, opacity .2s; }
.mi-tema-var svg{ width:13px; height:13px; }
.mi-tema-var.activa{ opacity:1; background: var(--ic, currentColor); color: var(--surface, #fff); }
.mi-tema[style*="#f6f6f6"] .mi-tema-var.activa{ background:#111; color:#fff; }
.mi-tema:not([style*="#f6f6f6"]) .mi-tema-var.activa{ background:#f5f5f5; color:#111; }

/* ---- Minimalist: sin adornos. El claro cambia también el texto (la app está hecha en oscuro) ---- */
html:is([data-tema="minimalist"], [data-tema="minimalist-claro"]) .alba-tema-particulas,
html:is([data-tema="minimalist"], [data-tema="minimalist-claro"]) #albaAurora,
html:is([data-tema="minimalist"], [data-tema="minimalist-claro"]) .alba-waves{ display:none !important; }
html[data-tema="minimalist"] body{ background:#0a0a0a !important; }
html[data-tema="minimalist-claro"]{ --text:#111111; --text-dim:#5f5f5f; color-scheme: light; }
html[data-tema="minimalist-claro"] body{ background:#f6f6f6 !important; color:#111; }
html[data-tema="minimalist-claro"] :is(.glass, .home-tile, .home-tema, .ml-modal, .sg-card, .total-piezas-card, .alba-dock, .mobile-drawer, .alba-banner){
  background:#ffffff !important; border-color:#dcdcdc !important; box-shadow: 0 10px 30px -18px rgba(0,0,0,.25) !important; color:#111;
}
html[data-tema="minimalist-claro"] :is(input, select, textarea){ background:#fff !important; color:#111 !important; border-color:#cfcfcf !important; }
html[data-tema="minimalist-claro"] .btn{ background:#fff !important; color:#111 !important; border-color:#cfcfcf !important; }
html[data-tema="minimalist-claro"] .btn-primary,
html[data-tema="minimalist-claro"] .alba-banner .main-search #searchBtn{ background:#111 !important; color:#fff !important; border-color:#111 !important; }
html[data-tema="minimalist-claro"] .modal-overlay:not(#lightboxOverlay){ background: rgba(240,240,240,.7) !important; }
html[data-tema="minimalist-claro"] :is(.dock-item, .mobile-drawer .drawer-item){ background:#f2f2f2 !important; color:#111 !important; border-color:#e2e2e2 !important; }
html[data-tema="minimalist-claro"] ::-webkit-scrollbar-thumb{ background-image: linear-gradient(#bbb, #888) !important; }

/* ---- Panel De Control compacto: carrusel de 6 a la vista (grid-panel.js) ---- */
html #homePanel .home-tiles.panel-carrusel{
  --gap:10px; --por:6;
  display:grid !important; grid-auto-flow:column; grid-template-columns:none !important; grid-template-rows:auto;
  grid-auto-columns: calc((100% - (var(--por) - 1) * var(--gap)) / var(--por));
  gap: var(--gap) !important; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 2px 8px !important; margin:0 -2px !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fi, 0px), #000 calc(100% - var(--fd, 0px)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fi, 0px), #000 calc(100% - var(--fd, 0px)), transparent 100%);
  cursor:grab;
}
html #homePanel .home-tiles.panel-carrusel::-webkit-scrollbar{ display:none; }
html #homePanel .home-tiles.panel-carrusel.hay-izq{ --fi:28px; }
html #homePanel .home-tiles.panel-carrusel.hay-der{ --fd:28px; }
html #homePanel .home-tiles.panel-carrusel.arrastrando{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
html #homePanel .home-tiles.panel-carrusel.arrastrando .home-tile{ pointer-events:none; }
html #homePanel .home-tiles.panel-carrusel > .home-tile{ scroll-snap-align:start; min-height:108px; }
/* Celular: los 6 en dos renglones de 3, y la tira sigue de lado. */
@media (max-width:640px){
  html #homePanel .home-tiles.panel-carrusel{ --por:3; grid-template-rows: repeat(2, auto); }
  html #homePanel .home-tiles.panel-carrusel > .home-tile{ min-height:96px; }
}

.panel-ver-todos{
  display:flex; align-items:center; gap:8px; margin:10px auto 0; padding:8px 18px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.8rem; font-weight:700; color: var(--text);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .15s, box-shadow .15s;
}
.panel-ver-todos:hover{ transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 22px -14px var(--accent); }
.panel-ver-todos svg{ width:16px; height:16px; color: var(--accent); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.panel-ver-todos.abierto svg{ transform: rotate(180deg); }

/* ---- Iconos de línea de los temas (emblemaDeTema) ---- */
.tema-ico-svg{ display:inline-flex; width:1.1em; height:1.1em; vertical-align:-0.15em; color: var(--accent); }
.tema-ico-svg svg{ width:100%; height:100%; display:block; }
.tema-card .tema-card-emblema .tema-ico-svg{ width:30px; height:30px; padding:6px; box-sizing:border-box; border-radius:9px; vertical-align:middle;
  color: currentColor; background: rgba(127,127,127,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.tema-card .tema-card-emblema{ color: inherit; }
html #homePanel .home-tema-emblema .tema-ico-svg{ width:26px; height:26px; color: var(--accent); }
.alba-tema-chip .tema-ico-svg{ width:13px; height:13px; }

/* ---- Gestor de Cuentas en dos columnas en PC (usuarios.html) ---- */
@media (min-width:1200px){
  .users-columnas{
    display:grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap:22px; align-items:start;
    width:min(96vw, 1760px); margin:0 auto; padding:0 clamp(12px, 1.6vw, 22px) 60px; box-sizing:border-box;
  }
  .users-columnas > .wrap{ width:auto !important; margin:0 !important; padding:0 !important; }
  .users-columnas > .users-col-roles{ position:sticky; top:16px; }
  .users-col-roles > .glass{ max-height: calc(100vh - 32px); overflow-y:auto; overscroll-behavior:contain; }
  .users-cab{ width:min(96vw, 1760px) !important; padding-bottom:0 !important; }
}

/* ---- Gestor de Cuentas: editar en ventana emergente y "← Buscador" siempre a la vista ---- */
.users-col-cuentas .users-toolbar{ position:sticky; top:0; z-index:6; margin:-20px -20px 14px; padding:16px 20px 14px; border-radius:20px 20px 16px 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 14px 24px -20px rgba(0,0,0,.9); }
.ue-overlay{ align-items:center; }
.ue-pop{
  width:min(620px, 100%); max-height: calc(100vh - 32px); display:flex; flex-direction:column; overflow:hidden;
  border-radius:24px; border:1px solid var(--v3-borde-acento, #444);
  background: radial-gradient(110% 50% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--surface);
  box-shadow: 0 34px 90px -24px rgba(0,0,0,.9);
  animation: v3Ventana .4s cubic-bezier(.34,1.56,.64,1) both;
}
.ue-pop-cab{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--v3-borde, #333); }
.ue-pop-foto{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent); }
.ue-pop-inicial{ display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.2rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ue-pop-txt{ display:flex; flex-direction:column; min-width:0; }
.ue-pop-txt b{ font-weight:700; font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ue-pop-txt small{ font-size:.74rem; color: var(--text-dim); }
.ue-pop-x{ margin-left:auto; width:34px; height:34px; padding:8px; box-sizing:border-box; border-radius:50%; cursor:pointer; flex:none;
  border:1px solid var(--v3-borde, #333); background: var(--surface); color: var(--text-dim); transition: transform .25s, color .15s; }
.ue-pop-x svg{ width:100%; height:100%; display:block; }
.ue-pop-x:hover{ transform: rotate(90deg); color:#ff6b6b; }
.ue-pop-cuerpo{ overflow-y:auto; padding:6px 18px 18px; overscroll-behavior:contain; }
.ue-pop-cuerpo > .glass{ margin:0 !important; padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; clip-path:none !important; animation:none !important; }
.ue-pop-cuerpo > .glass, .ue-pop-cuerpo .config-content{ max-height:none !important; overflow:visible !important; width:auto !important; max-width:none !important; }

/* ---- Buscador fijo del Gestor de Cuentas ---- */
.users-toolbar{ flex-wrap:wrap; }
.users-buscar{ position:relative; flex:1 1 100%; display:flex; align-items:center; gap:8px; margin-top:12px; }
.users-buscar-ico{ position:absolute; left:14px; width:18px; height:18px; color: var(--text-dim); pointer-events:none; }
.users-buscar input{ flex:1; min-width:0; padding:12px 14px 12px 42px !important; font-size:.95rem; border-radius:14px !important; }
.users-buscar-btn{ flex:none; width:46px; height:46px; padding:0 !important; display:inline-flex !important; align-items:center; justify-content:center; border-radius:14px !important; }
.users-buscar-btn svg{ width:20px; height:20px; }
.users-buscar input{ background: color-mix(in srgb, var(--bg) 55%, var(--surface)) !important; color: var(--text) !important; border:1px solid var(--v3-borde-acento, #555) !important; -webkit-appearance:none; appearance:none; }
.users-buscar input::placeholder{ color: var(--text-dim); }

/* ---- Gestor de Cuentas: el buscador general de A.L.B.A., fijo arriba de la pagina ---- */
.users-cab{ position:sticky; top:0; z-index:20; padding-top:10px !important; padding-bottom:12px !important; }
.users-cab .users-buscar{ margin:0; padding:10px; border-radius:20px; gap:10px;
  border:1px solid var(--v3-borde-acento, #555);
  background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 36px -22px rgba(0,0,0,.9); }
.users-buscar-logo{ flex:none; width:44px; height:44px; border-radius:50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); }
.users-cab .users-buscar input{ padding-left:16px !important; font-size:1rem; }
.users-cab .alba-topnav{ display:none; }
html body .wrap.users-cab{ position:sticky !important; top:0 !important; z-index:20 !important; }
html .users-col-cuentas .users-toolbar{ top:92px !important; }
@media (min-width:1200px){ html .users-columnas > .users-col-roles{ top:100px !important; } html .users-col-roles > .glass{ max-height: calc(100vh - 116px) !important; } }

/* ---- Gestor de Cuentas: el editor como tercera tarjeta, a un lado de la lista (PC) ---- */
.users-col-editor{ display:none; }
@media (min-width:1200px){
  .users-columnas.con-editor{ grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .85fr); }
  .users-columnas.con-editor > .users-col-editor{ display:block; position:sticky; top:100px; }
  .users-col-editor .ue-pop{ width:auto; max-height: calc(100vh - 116px); animation: v3Lateral .45s cubic-bezier(.34,1.56,.64,1) both; }
}
.lm-row.editando{ outline:2px solid var(--accent); outline-offset:-2px; background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }

/* Sistema A.L.B.A: "Acceso total" y candado en vez de editar/borrar. */
.u-acceso-total{ color:#111 !important; background: linear-gradient(110deg, #fbbf24, #f59e0b) !important; border-color:#f59e0b !important; font-weight:800; }
.u-candado{ display:inline-flex; width:30px; height:30px; padding:7px; box-sizing:border-box; border-radius:50%; color:#f59e0b;
  background: color-mix(in srgb, #f59e0b 14%, transparent); }
.u-candado svg{ width:100%; height:100%; }

/* ---- "Hola, Mi Cuenta No Es Editable" (Sistema A.L.B.A, usuarios.js) ---- */
.lm-row[data-user-id="3"]{ cursor:not-allowed; }
.sne-caja{
  --rojo:#ff4d5e;
  position:relative; width:min(380px, 100%); box-sizing:border-box; padding:30px 22px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  border-radius:26px; border:1px solid color-mix(in srgb, var(--rojo) 45%, transparent);
  background: radial-gradient(110% 70% at 50% 0%, color-mix(in srgb, var(--rojo) 22%, transparent), transparent 65%), var(--surface);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.85), 0 0 0 6px color-mix(in srgb, var(--rojo) 8%, transparent);
  animation: arch2Entra .5s cubic-bezier(.34,1.56,.64,1) both, arch2Tiembla .45s .45s ease both;
}
.sne-sello{ position:relative; width:80px; height:80px; padding:20px; box-sizing:border-box; border-radius:50%; color: var(--rojo);
  background: color-mix(in srgb, var(--rojo) 14%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rojo) 55%, transparent), 0 0 30px -6px var(--rojo);
  animation: arch2Sello .6s .1s cubic-bezier(.34,1.56,.64,1) both; }
.sne-sello svg{ position:relative; width:100%; height:100%; display:block; }
.sne-onda{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--rojo); animation: arch2Onda 2.2s ease-out infinite; }
.sne-etiqueta{ font-size:.64rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color: var(--rojo);
  padding:3px 10px; border-radius:999px; border:1px solid color-mix(in srgb, var(--rojo) 40%, transparent); background: color-mix(in srgb, var(--rojo) 10%, transparent); }
.sne-titulo{ margin:0; font-size:1.3rem; font-weight:700; }
.sne-texto{ margin:0; font-size:.86rem; line-height:1.5; color: var(--text-dim); }
.sne-firma{ margin:0; font-size:.8rem; font-weight:700; color: var(--rojo); align-self:flex-end; }
.sne-ok{ width:100%; padding:12px; border-radius:14px; cursor:pointer; font:inherit; font-weight:700; color:#fff; border:1px solid var(--rojo);
  background: linear-gradient(110deg, var(--rojo), color-mix(in srgb, var(--rojo) 70%, #000)); box-shadow: 0 12px 26px -12px var(--rojo); }

/* Editor y Roles y permisos se despliegan completos (pedido de Manuel): sin tope de alto ni barra
   propia, crecen con lo que traen. Por eso ya no van fijos: una tarjeta mas alta que la pantalla
   fija se cortaria abajo. */
@media (min-width:1200px){
  html .users-columnas > .users-col-roles,
  html .users-columnas.con-editor > .users-col-editor{ position:static !important; }
  html .users-col-roles > .glass{ max-height:none !important; overflow:visible !important; }
  html .users-col-editor .ue-pop{ max-height:none !important; overflow:visible !important; }
  html .users-col-editor .ue-pop-cuerpo{ overflow:visible !important; }
}
/* Con el editor abierto (pedido de Manuel): primero la ficha de la cuenta, luego las demas cuentas
   y al final Roles y permisos. */
@media (min-width:1200px){
  html .users-columnas.con-editor{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .85fr) !important; }
  html .users-columnas.con-editor > .users-col-editor{ order:1; }
  html .users-columnas.con-editor > .users-col-cuentas{ order:2; }
  html .users-columnas.con-editor > .users-col-roles{ order:3; }
}

/* Gestor de Cuentas en PC (pedido de Manuel): cada columna se desliza sola — la que tiene el mouse o
   el dedo encima — y las demas no se mueven. Cada una mide la pantalla menos el buscador fijo. */
@media (min-width:1200px){
  html .users-columnas{ align-items:stretch !important; padding-bottom:16px !important; }
  html .users-columnas > :is(.users-col-cuentas, .users-col-roles, .users-col-editor){
    position:static !important; height: calc(100vh - 104px); overflow-y:auto; overscroll-behavior:contain;
    scrollbar-gutter: stable; border-radius:24px;
  }
  html .users-columnas > .users-col-editor:empty{ display:none !important; }
  html .users-columnas > :is(.users-col-cuentas, .users-col-roles) > .glass{ min-height:100%; box-sizing:border-box; margin:0 !important; }
  html .users-col-editor .ue-pop{ min-height:100%; box-sizing:border-box; }
  /* La barra de Restablecer / Nueva cuenta se pega arriba de SU columna, no de la pagina. */
  html .users-col-cuentas .users-toolbar{ top:0 !important; }
  /* La pagina ya no tiene que bajar: todo cabe en la pantalla. */
  html body:has(.users-columnas){ overflow:hidden; }
}
/* El alto descontando el zoom de ajuste-escala.js: sin esto, con la vista alejada las columnas
   se quedaban a media pantalla (pedido de Manuel: que lleguen hasta abajo). */
@media (min-width:1200px){
  html .users-columnas > :is(.users-col-cuentas, .users-col-roles, .users-col-editor){
    height: calc(100vh / var(--alba-zoom, 1) - 104px) !important;
    height: calc(100dvh / var(--alba-zoom, 1) - 104px) !important;
  }
}
/* La barra de Cuentas (titulo y botones) ya no se queda pegada: tapaba media columna y la lista se
   veia pasar por detras (pedido de Manuel). Se va con la lista; el buscador de arriba sigue fijo. */
html .users-col-cuentas .users-toolbar{ position:static !important; margin:0 0 14px !important; padding:0 !important;
  background:none !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }

/* ---- Cursor propio de cada tema (pedido de Manuel), del color de su acento. Generado de temas.js. ---- */
html[data-tema="anio-nuevo"], html[data-tema="anio-nuevo"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23e8c547%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="anio-nuevo"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23e8c547%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%23e8c547%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="constitucion"], html[data-tema="constitucion"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%232ea36a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="constitucion"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%232ea36a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%232ea36a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="amistad"], html[data-tema="amistad"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23ff9db8%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="amistad"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23ff9db8%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%23ff9db8%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="mujer"], html[data-tema="mujer"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23a86cf0%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="mujer"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23a86cf0%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%23a86cf0%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="semana-santa"], html[data-tema="semana-santa"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%238b5cf6%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="semana-santa"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%238b5cf6%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%238b5cf6%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="primavera"], html[data-tema="primavera"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%231cc6a6%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="primavera"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%231cc6a6%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%231cc6a6%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="nino"], html[data-tema="nino"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%2335d6f0%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="nino"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%2335d6f0%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%2335d6f0%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="trabajo"], html[data-tema="trabajo"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23ff9f40%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="trabajo"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23ff9f40%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%23ff9f40%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="madres"], html[data-tema="madres"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23ff8fab%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="madres"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23ff8fab%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%23ff8fab%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="padres"], html[data-tema="padres"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%231cc6a6%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="padres"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%231cc6a6%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%231cc6a6%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="verano"], html[data-tema="verano"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%234fd6ef%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="verano"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%234fd6ef%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%234fd6ef%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="patrias"], html[data-tema="patrias"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%232ea36a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="patrias"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%232ea36a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%232ea36a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="otonio"], html[data-tema="otonio"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23ff9f40%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="otonio"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23ff9f40%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%23ff9f40%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="muertos"], html[data-tema="muertos"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23ff8c1a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="muertos"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23ff8c1a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%23ff8c1a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="revolucion"], html[data-tema="revolucion"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23d9a441%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="revolucion"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23d9a441%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%23d9a441%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="guadalupe"], html[data-tema="guadalupe"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%232ea36a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="guadalupe"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%232ea36a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%232ea36a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="navidad"], html[data-tema="navidad"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%233fae72%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="navidad"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%233fae72%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%233fae72%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="fin-anio"], html[data-tema="fin-anio"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23e8c547%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="fin-anio"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23e8c547%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%23e8c547%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="cyberpunk"], html[data-tema="cyberpunk"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23fcee0a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="cyberpunk"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23fcee0a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%23fcee0a%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="synthwave"], html[data-tema="synthwave"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23ffb86b%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="synthwave"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23ffb86b%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%23ffb86b%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="matrix"], html[data-tema="matrix"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%2300ff41%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="matrix"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%2300ff41%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%2300ff41%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="minimalist"], html[data-tema="minimalist"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23f5f5f5%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="minimalist"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23f5f5f5%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%23f5f5f5%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema="minimalist-claro"], html[data-tema="minimalist-claro"] body{ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23111111%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto; }
html[data-tema="minimalist-claro"] :is(a[href], button, [role="button"], .home-tile, .dock-item, .drawer-item, label, select, summary, [data-copy]){ cursor:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202l18%209.5-7.6%202L10%2021z%22%20fill%3D%22%23111111%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%224.5%22%20fill%3D%22%23111111%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 3 2, pointer !important; }
html[data-tema] :is(input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input:not([type]), textarea){ cursor:text !important; }
html[data-tema="cyberpunk"]{ --cp-cian:#00f0ff; --cp-rosa:#ff003c; --cp-amarillo:#fcee0a; --cp-morado:#ff4fd8; }
html[data-tema="cyberpunk"] body{ background: radial-gradient(70% 50% at 10% 0%, rgba(252,238,10,.14), transparent 60%), radial-gradient(60% 50% at 100% 10%, rgba(255,0,60,.16), transparent 60%), #070707 !important; }
html[data-tema="cyberpunk"] :is(.glass, .home-tile, .home-tema, .total-piezas-card, .ml-modal, .sg-card){ border-color: color-mix(in srgb, #fcee0a 55%, transparent) !important; }
html[data-tema="cyberpunk"] .btn-primary{ background:#fcee0a !important; color:#070707 !important; }
html[data-tema="cyberpunk"] :is(h1,h2,h3,.home-tema-nombre,.odoo-list-head-text h2){ color:#fcee0a !important; text-shadow: 2px 0 #ff003c, -1px 0 #00f0ff !important; }
.barras-elegir-foto img{ cursor: zoom-in; }
.barras-foto-card{ width:min(440px, 100%); padding:18px !important; display:flex; flex-direction:column; gap:12px; box-sizing:border-box; }
.barras-foto-grande{ width:100%; max-height:60vh; object-fit:contain; background:#fff; border-radius:16px; }
.barras-foto-cod{ font-weight:800; text-align:center; overflow-wrap:anywhere; }
.barras-foto-acc{ display:flex; gap:8px; } .barras-foto-acc .btn{ flex:1; }
[data-code] img, [data-codigo] img, [data-search-code] img{ cursor: zoom-in; }
/* Contador de Odoo 19 dentro del menu lateral (celular): a lo ancho, arriba de la foto. */




/* ---- Visor de fotos en celular (pedido de Manuel): tres zonas que no se estorban ----
   Arriba: quien tomo la foto (con la X a su lado). En medio: la foto. Abajo, levantado de la
   barra de gestos del telefono: los botones de editar y, debajo, Foto Principal / Fotos Extras. */
@media (max-width:700px){
  html #lightboxOverlay .lightbox-caption{
    position:fixed !important; top:calc(12px + env(safe-area-inset-top, 0px)) !important; left:12px !important; right:72px !important;
    bottom:auto !important; transform:none !important; margin:0 !important; z-index:5; max-width:none !important;
  }
  html #lightboxOverlay .lightbox-close{ position:fixed !important; top:calc(12px + env(safe-area-inset-top, 0px)) !important; right:12px !important; z-index:6; }
  html #lightboxOverlay .lightbox-acciones{
    position:fixed !important; top:auto !important; left:12px !important; right:12px !important; transform:none !important;
    bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important; z-index:5;
    display:flex !important; justify-content:space-around; flex-wrap:nowrap; margin:0 !important;
  }
  html #lightboxOverlay .lightbox-tabs{
    position:fixed !important; left:50% !important; transform:translateX(-50%) !important; top:auto !important;
    bottom:calc(36px + env(safe-area-inset-bottom, 0px)) !important; z-index:5; margin:0 !important;
  }
  html #lightboxOverlay .lightbox-dots{
    position:fixed !important; left:0; right:0; top:auto !important; margin:0 !important;
    bottom:calc(84px + env(safe-area-inset-bottom, 0px)) !important; display:flex; justify-content:center; z-index:4;
  }
  /* Con la barra de editar abajo, las flechas suben a media foto y no se enciman con nada. */
  html #lightboxOverlay .lightbox-nav{ top:50% !important; bottom:auto !important; transform:translateY(-50%) !important; }
  html #lightboxOverlay .lightbox-img-wrap img{ max-height: calc(100dvh - 300px) !important; }
}
@media (max-width:700px){
  html body #lightboxOverlay .lightbox-content > .lightbox-acciones{
    top:auto !important; bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    left:12px !important; right:12px !important; transform:none !important;
  }
}
/* El rol debajo del nombre en el menú (pedido de Manuel), del color del aro de su foto. */
html .mobile-drawer-user .mobile-drawer-user-role{
  display:inline-flex !important; align-self:flex-start; margin-top:4px; padding:2px 10px !important; border-radius:999px !important;
  font-size:.66rem !important; font-weight:800 !important; letter-spacing:1.2px; text-transform:uppercase;
  color: var(--rol-c) !important; background: color-mix(in srgb, var(--rol-c) 14%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--rol-c) 45%, transparent) !important;
}
html .mobile-drawer-user .mobile-drawer-user-role .drawer-rol-punto{ width:6px; height:6px; border-radius:50%; background: var(--rol-c); margin-right:6px; }


/* ---- Variantes de este producto: cada una en su tarjeta, el aviso de existencias DENTRO (pedido de Manuel) ---- */
html #productVariantsOverlay .pv-lista{
  display:grid !important; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
  gap:10px !important; padding:14px !important; overflow-y:auto !important; overflow-x:hidden !important;
}
html #productVariantsOverlay .pv-item{
  display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:8px !important;
  width:100% !important; min-width:0 !important; box-sizing:border-box; position:relative !important;
  padding:12px 14px !important; border-radius:16px !important; clip-path:none !important; transform:none;
}
html #productVariantsOverlay .pv-item > *{ position:static !important; width:auto !important; max-width:100% !important; }
html #productVariantsOverlay .pv-item-cab{ display:flex !important; align-items:flex-start !important; gap:8px; flex-wrap:wrap; }
html #productVariantsOverlay .pv-item-cod{ flex:1 1 100%; font-size:.86rem !important; overflow-wrap:anywhere; }
html #productVariantsOverlay .pv-item-ir{ position:absolute !important; top:12px; right:12px; }
html #productVariantsOverlay .pv-item-cab{ padding-right:20px; }
html #productVariantsOverlay .pv-item:hover{ transform: translateY(-2px); }
html #productVariantsOverlay .pv-item{ flex-wrap:nowrap !important; } html #productVariantsOverlay .pv-item .variant-stock{ flex-basis:auto !important; margin-top:2px !important; }

/* =========================================================================
   Pantalla de acceso rediseñada (pedido de Manuel): vidrio, encabezado con candado SVG en circulo
   que late, horario cerrado como tarjeta ambar, campos y botones con icono, y entrada escalonada.
   ========================================================================= */
html #loginCard{
  position:relative; overflow:hidden !important;
  padding:22px !important;
  background:
    radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 94%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
/* Luz que recorre el borde de arriba. */
html #loginCard::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px; z-index:2;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
  background-size:200% 100%; animation: loginLuz 3.5s linear infinite;
}
@keyframes loginLuz{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* Encabezado: sin bloque de color; candado en circulo con aro que late. */
html #loginCard .login-head{
  display:flex !important; align-items:center; gap:14px; padding:4px 0 16px !important; margin:0 0 16px !important;
  background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  border-bottom:1px solid var(--v3-borde, #333) !important;
}
html #loginCard .login-head-icono{
  position:relative; flex:none; width:54px !important; height:54px !important; padding:14px; box-sizing:border-box; border-radius:50% !important;
  display:flex !important; align-items:center; justify-content:center; font-size:1.5rem;
  color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 26px -6px var(--accent) !important;
}
html #loginCard .login-head-icono svg{ width:100%; height:100%; display:block; animation: loginCandado 2.6s ease-in-out infinite; }
html #loginCard .login-head-icono::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid color-mix(in srgb, var(--accent) 60%, transparent); animation: arch2Onda 2.4s ease-out infinite; }
@keyframes loginCandado{ 0%,100%{ transform:none; } 50%{ transform: translateY(-1px) rotate(-4deg); } }
html #loginCard .login-head-titulo{ font-size:1.35rem !important; font-weight:700 !important; color: var(--text) !important; text-shadow:none !important; }
html #loginCard .login-head-sub{ font-size:.8rem !important; color: var(--text-dim) !important; text-shadow:none !important; }
html #loginCard.es-admin .login-head-icono, html #loginCard .login-head.es-admin .login-head-icono{ color:#ff6b6b !important; }

/* Horario cerrado: tarjeta ambar con el reloj y "vuelve" en pastilla. */
html #loginCard .horario-cerrado-aviso{
  border-radius:20px !important; padding:14px !important; margin:0 0 16px !important;
  border:1px solid color-mix(in srgb, #f59e0b 50%, transparent) !important;
  background: linear-gradient(120deg, color-mix(in srgb, #f59e0b 22%, transparent), color-mix(in srgb, #f59e0b 6%, transparent)) !important;
  box-shadow: 0 16px 34px -22px #f59e0b !important; color: var(--text) !important;
}
html #loginCard .horario-cerrado-titulo{ font-weight:700 !important; font-size:1.05rem !important; color: var(--text) !important; }
html #loginCard .horario-cerrado-detalle{ color: var(--text-dim) !important; font-size:.8rem !important; }
html #loginCard .horario-cerrado-vuelve{
  display:flex; align-items:center; gap:10px; margin-top:12px !important; padding:9px 14px !important; border-radius:14px !important;
  background: color-mix(in srgb, var(--bg) 70%, transparent) !important; border:1px solid color-mix(in srgb, #f59e0b 40%, transparent) !important; color: var(--text) !important;
}
html #loginCard .hcv-etiqueta{ font-size:.62rem !important; letter-spacing:2px; color:#fbbf24 !important; font-weight:700 !important; }
html #loginCard .hcv-hora{ font-weight:700 !important; color: var(--text) !important; }

/* Campos. */
html #loginCard .config-field label{ font-size:.68rem !important; letter-spacing:1.6px !important; color: var(--text-dim) !important; font-weight:700 !important; }
html #loginCard .config-field input{ min-height:48px; font-size:1rem !important; border-radius:14px !important; }
html #loginCard .login-email-hint{ border-radius:16px !important; }

/* Botones: Entrar con un brillo que pasa; huella en turquesa; los otros dos, discretos con icono. */
html #loginCard #loginSubmitBtn{ position:relative; overflow:hidden; min-height:50px; font-size:.95rem !important; letter-spacing:2px; border-radius:14px !important; }
html #loginCard #loginSubmitBtn::after{
  content:''; position:absolute; top:0; bottom:0; width:40%; left:-60%; transform: skewX(-20deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); animation: mfBrillo 4s ease-in-out infinite;
}
html #loginCard .login-passkey-btn{
  min-height:48px; border-radius:14px !important; display:flex !important; align-items:center; justify-content:center; gap:10px;
  color:#5eead4 !important; background: color-mix(in srgb, #14b8a6 12%, transparent) !important; border:1px solid color-mix(in srgb, #14b8a6 50%, transparent) !important;
}
html #loginCard .login-passkey-btn:hover{ background: color-mix(in srgb, #14b8a6 22%, transparent) !important; }
html #loginCard .login-alt-btn{
  display:flex !important; align-items:center; justify-content:center; gap:9px; min-height:44px; border-radius:14px !important;
  background: color-mix(in srgb, var(--surface) 70%, transparent) !important; color: var(--text) !important;
  border:1px solid var(--v3-borde, #333) !important; text-transform:none !important; letter-spacing:.3px !important; font-size:.86rem !important;
}
html #loginCard .login-alt-create{ border-color: color-mix(in srgb, #a78bfa 45%, transparent) !important; }
html #loginCard .login-alt-create .login-bt-ico{ color:#c4b5fd; }
html #loginCard .login-alt-reset{ border-color: color-mix(in srgb, #f59e0b 45%, transparent) !important; }
html #loginCard .login-alt-reset .login-bt-ico{ color:#fbbf24; }
.login-bt-ico{ width:18px; height:18px; flex:none; }
html #loginCard .login-alt-btn:hover .login-bt-ico{ animation: flVuela .6s ease; }

/* Entrada escalonada. */
html #loginCard > *{ animation: v3Entra .5s cubic-bezier(.34,1.56,.64,1) both; }
html #loginCard > *:nth-child(2){ animation-delay:.05s } html #loginCard > *:nth-child(3){ animation-delay:.1s }
html #loginCard > *:nth-child(4){ animation-delay:.15s } html #loginCard > *:nth-child(n+5){ animation-delay:.2s }



/* Menu lateral a pantalla completa en celular (pedido de Manuel): sin la franja de la app al lado. */
@media (max-width:1024px){
  html .mobile-drawer{ width:100vw !important; max-width:100vw !important; left:0 !important; right:0 !important;
    border-left:0 !important; border-right:0 !important; border-radius:0 !important; box-sizing:border-box; }
  html .mobile-drawer-nav{ max-width:560px; margin:0 auto; }
  html .mobile-drawer-head, html .mobile-drawer-user{ max-width:560px; margin-left:auto !important; margin-right:auto !important; }
}
@media (max-width:600px){
  html .mobile-drawer-nav, html .mobile-drawer-head, html .mobile-drawer-user{ max-width:none !important; width:auto !important; }
  html .mobile-drawer .drawer-item{ width:100% !important; }
}



/* ---- El menú desde las cuatro orillas (drawerSide en script.js) ---- */
.drawer-lados{ display:flex; align-items:center; gap:6px; margin-top:10px; padding:8px 10px; border-radius:16px; border:1px dashed var(--v3-borde, #333); }
.drawer-lados-txt{ flex:1; font-size:.76rem; font-weight:700; color: var(--text-dim); }
.drawer-lado{ width:38px; height:38px; border-radius:12px; cursor:pointer; font:inherit; font-size:1.05rem; font-weight:800;
  color: var(--text-dim); background: var(--surface); border:1px solid var(--v3-borde, #333); transition: transform .2s, background .15s, color .15s; }
.drawer-lado:hover{ transform: translateY(-2px); color: var(--text); }
.drawer-lado.activo{ background: var(--accent); color: var(--bg, #111); border-color: var(--accent); }
@media (max-width:1024px){
  /* Arriba y abajo: el panel entra en vertical. */
  html body:is(.drawer-top, .drawer-bottom) .mobile-drawer{ left:0 !important; right:0 !important; width:100vw !important; height:100% !important; }
  html body.drawer-top .mobile-drawer{ top:0 !important; bottom:auto !important; transform: translateY(-100%) !important; }
  html body.drawer-bottom .mobile-drawer{ top:auto !important; bottom:0 !important; transform: translateY(100%) !important; }
  html body:is(.drawer-top, .drawer-bottom) .mobile-drawer.open{ transform:none !important; }
  /* La pestaña: centrada arriba o abajo, acostada. */
  html body:is(.drawer-top, .drawer-bottom) .drawer-handle{
    top:auto !important; right:auto !important; left:50% !important; width:120px !important; height:34px !important;
    flex-direction:row !important; transform: translateX(-50%) !important; border:1px solid color-mix(in srgb, var(--accent) 50%, transparent) !important; }
  html body.drawer-top .drawer-handle{ top:0 !important; border-top:0 !important; border-radius:0 0 16px 16px !important; }
  html body.drawer-bottom .drawer-handle{ bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important; border-radius:16px !important; }
  html body.drawer-top .drawer-handle .drawer-handle-arrow{ transform: rotate(-90deg); animation:none; }
  html body.drawer-bottom .drawer-handle .drawer-handle-arrow{ transform: rotate(90deg); animation:none; }
  html body:is(.drawer-top, .drawer-bottom) .drawer-handle-text{ writing-mode:horizontal-tb !important; }
  html body:is(.drawer-top, .drawer-bottom) .drawer-handle.hidden{ opacity:0; pointer-events:none; }
  html body.drawer-top .mobile-drawer.open .drawer-item{ animation-name: v3RenglonArriba; }
  html body.drawer-bottom .mobile-drawer.open .drawer-item{ animation-name: v3RenglonAbajo; }
}
@keyframes v3RenglonArriba{ from{ opacity:0; transform: translateY(-18px); } }
@keyframes v3RenglonAbajo{ from{ opacity:0; transform: translateY(18px); } }

/* ---- Menu lateral sin desplazarse (pedido de Manuel): todo cabe en la pantalla ----
   Celular: renglones en dos columnas y mas bajitos; Salir, la version y lo de editar/orillas a
   todo lo ancho. Los tamaños se ajustan a la altura con clamp(). */
@media (max-width:1024px){
  html .mobile-drawer{ overflow:hidden !important; gap: clamp(6px, 1.2vh, 12px) !important;
    padding-top: clamp(8px, 1.6vh, 18px) !important; padding-bottom: calc(clamp(8px, 1.4vh, 16px) + env(safe-area-inset-bottom, 0px)) !important; }
  html .mobile-drawer-grip{ display:none; }
  html .mobile-drawer-head{ padding-bottom:0 !important; }
  
  html .mobile-drawer-user{ padding:2px 4px clamp(6px, 1vh, 12px) !important; margin:0 !important; }
  html .mobile-drawer-user .drawer-avatar, html .mobile-drawer-user .drawer-avatar-wrap{ width:44px !important; height:44px !important; }
  html .mobile-drawer-nav{ display:grid !important; grid-template-columns:1fr 1fr; gap: clamp(5px, .9vh, 8px) !important; flex:1 1 auto; min-height:0; align-content:start; }
  html .mobile-drawer .drawer-item{
    min-height: clamp(40px, 5.6vh, 52px) !important; padding:5px 8px 5px 5px !important; gap:8px !important;
    font-size: clamp(.72rem, 1.6vh, .84rem) !important; line-height:1.15; border-radius:14px !important; }
  html .mobile-drawer .drawer-item::after{ content:none !important; }
  html .mobile-drawer .drawer-item-icon{ width: clamp(28px, 4vh, 34px) !important; height: clamp(28px, 4vh, 34px) !important; padding:6px !important; }
  html .mobile-drawer .drawer-item-danger, html .mobile-drawer .drawer-version, html .mobile-drawer .drawer-lados,
  html .mobile-drawer .drawer-side-btn{ grid-column:1 / -1; }
  html .mobile-drawer .drawer-item-danger{ margin-top:2px; min-height: clamp(38px, 5vh, 46px) !important; justify-content:center; }
  html .mobile-drawer .drawer-version{ margin:0 !important; }
  /* Editar el menu y las orillas en un solo renglon chiquito. */
  html .mobile-drawer .drawer-side-btn{ min-height:34px !important; margin-top:0 !important; font-size:.72rem !important; }
  html .mobile-drawer .drawer-lados{ margin-top:0 !important; padding:4px 8px !important; }
  html .mobile-drawer .drawer-lado{ width:32px; height:32px; }
}

/* ---- Editar el menu en celular (pedido de Manuel): una columna; lo que esta en verde, lo que se
   puede agregar en gris con su +, y nada se sale de la pantalla. ---- */
@media (max-width:1024px){
  html .mobile-drawer-nav:has(.drawer-item-reorder, .dr-agregar){ display:flex !important; flex-direction:column; overflow-y:auto; min-height:0; }
  html .mobile-drawer:has(.drawer-item-reorder){ overflow:hidden !important; }
  html .mobile-drawer .drawer-item-reorder{
    --mi-c:#22c55e; min-height:46px !important; width:100% !important; box-sizing:border-box;
    border:1px solid color-mix(in srgb, #22c55e 50%, transparent) !important;
    background: linear-gradient(90deg, color-mix(in srgb, #22c55e 16%, transparent), transparent 80%), var(--surface) !important; }
  html .mobile-drawer .drawer-item-reorder .drawer-item-icon{ background: color-mix(in srgb, #22c55e 18%, transparent) !important; }
  html .mobile-drawer .drawer-item-reorder .dr-label,
  html .mobile-drawer .dr-agregar .dr-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html .mobile-drawer .drawer-item-reorder .dr-arrows{ display:flex; gap:4px; flex:none; }
  html .mobile-drawer .drawer-item-reorder .dr-arrow, html .mobile-drawer .drawer-item-reorder .dr-quitar{ width:32px !important; height:32px !important; flex:none; padding:0 !important; }
  html .mobile-drawer .dr-panel-titulo{ margin-top:10px; font-size:.68rem; letter-spacing:1.6px; color: var(--text-dim); }
  html .mobile-drawer .dr-agregar{
    min-height:44px !important; width:100% !important; box-sizing:border-box; opacity:.85;
    filter: grayscale(1); border:1px dashed var(--v3-borde, #444) !important; background: color-mix(in srgb, var(--surface) 60%, transparent) !important; }
  html .mobile-drawer .dr-agregar:hover{ filter:none; opacity:1; }
  html .mobile-drawer .dr-agregar-mas{ flex:none; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    font-weight:800; color:#111; background:#cfcfcf; }
  html .mobile-drawer .drawer-reorder-done{ border-color:#22c55e !important; color:#86efac !important; }
}
html .mobile-drawer .dr-ico-editar svg{ width:100%; height:100%; display:block; } html .mobile-drawer .dr-ico-editar{ color: var(--accent) !important; }

/* ---- Cambios y Novedades con algo sin leer: pulso de color (pedido de Manuel) ---- */
@keyframes novPulso{
  0%,100%{ box-shadow: 0 0 0 0 rgba(225,29,46,.55), 0 0 0 0 rgba(255,159,64,0); }
  50%{ box-shadow: 0 0 0 6px rgba(225,29,46,0), 0 0 26px 2px rgba(255,159,64,.55); }
}
@keyframes novRegalo{ 0%,86%,100%{ transform:none; } 90%{ transform: rotate(-14deg) scale(1.12); } 94%{ transform: rotate(12deg) scale(1.12); } }
html :is(.drawer-item-novedades, .home-tile-novedades).con-novedad{
  border-color: color-mix(in srgb, #ff9f40 70%, transparent) !important;
  background: linear-gradient(110deg, color-mix(in srgb, #ff9f40 20%, transparent), color-mix(in srgb, #e11d2e 10%, transparent) 60%, transparent), var(--surface) !important;
  animation: novPulso 2s ease-in-out infinite !important;
}
html :is(.drawer-item-novedades, .home-tile-novedades).con-novedad :is(.drawer-item-icon, .home-tile-icon){
  color:#ffb05c !important; animation: novRegalo 3.2s ease-in-out infinite;
}
html .dock-item.dock-novedad{ animation: novPulso 2s ease-in-out infinite; border-color:#ff9f40 !important; color:#ffb05c !important; }
/* Con el menu ya abierto un rato, el pulso del menu no se apaga con la entrada (ya-entro). */
html .mobile-drawer.ya-entro .drawer-item-novedades.con-novedad{ animation: novPulso 2s ease-in-out infinite !important; }
/* El numero de novedades sin leer, siempre legible: blanco, gordo y sobre rojo solido. */
html :is(.drawer-item-novedades, .home-tile-novedades).con-novedad::after{
  color:#fff !important; -webkit-text-fill-color:#fff !important; opacity:1 !important; filter:none !important;
  background:#e11d2e !important; font-weight:900 !important; font-size:.78rem !important; text-shadow:0 1px 2px rgba(0,0,0,.45);
  min-width:24px !important; height:24px !important; border-radius:999px !important; display:flex !important; align-items:center; justify-content:center;
}
/* Version junto a "Menu": sin la pastilla A.L.B.A. del titulo, y la X de cerrar redonda con icono. */
html .mobile-drawer-head.con-version .mobile-drawer-title::after{ content:none !important; }
html .mobile-drawer-head.con-version .drawer-version{ margin:0 auto 0 0 !important; transform: scale(.85); transform-origin:left center; grid-column:auto !important; }
html .mobile-drawer-head.con-version .mobile-drawer-title{ margin-right:6px !important; }
html #drawerCloseBtn svg{ width:18px; height:18px; display:block; }
html #drawerCloseBtn{ display:inline-flex !important; align-items:center; justify-content:center; padding:0 !important; }

/* =========================================================================
   Aviso "Me acabo de actualizar" rediseñado (pedido de Manuel): tarjeta flotante de vidrio,
   abajo al centro (y al centro en celular), con el anillo de progreso y el emblema del tema a
   la izquierda, y titulo, version y barra de avance a la derecha. No tapa la app entera.
   ========================================================================= */
html .alba-actualizando{
  position:fixed !important; inset:auto !important; left:50% !important; right:auto !important; top:auto !important;
  bottom:calc(26px + env(safe-area-inset-bottom, 0px)) !important; transform:translateX(-50%) !important;
  width:min(440px, calc(100vw - 24px)) !important; padding:14px 18px 14px 14px !important; display:block !important;
  border-radius:24px !important; overflow:hidden !important; background:
    radial-gradient(120% 120% at 0% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 88%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--accent) 50%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important; backdrop-filter: blur(18px) saturate(1.3) !important;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.85), 0 0 40px -12px var(--accent) !important;
  animation: aaTarjeta .5s cubic-bezier(.34,1.56,.64,1) both !important;
}
@keyframes aaTarjeta{ from{ opacity:0; transform: translate(-50%, 30px) scale(.94); } }
@media (max-width:640px){ html .alba-actualizando{ top:auto !important; bottom:calc(90px + env(safe-area-inset-bottom, 0px)) !important; transform:translateX(-50%) !important; } }
html .alba-actualizando::after{ content:none !important; }
html .alba-actualizando .aa-caja{
  display:grid !important; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; column-gap:14px !important; row-gap:4px !important;
  align-items:center; max-width:none !important; text-align:left !important; flex-direction:initial !important; }
html .alba-actualizando .aa-escena{ display:block !important; grid-row:1 / span 3; width:68px !important; height:68px !important; margin:0 !important; }
html .alba-actualizando .aa-halo{ inset:10px !important; }
html .alba-actualizando .aa-emoji{ font-size:1.6rem !important; }
html .alba-actualizando .aa-calabaza{ width:42px !important; height:42px !important; }
html .alba-actualizando .aa-aro .aa-fondo, html .alba-actualizando .aa-aro .aa-lleno{ stroke-width:10 !important; }
html .alba-actualizando .aa-titulo{ font-size:1.05rem !important; font-weight:700 !important; margin:0 !important; text-shadow:none !important; }
html .alba-actualizando .aa-titulo::before{ content:none !important; }
html .alba-actualizando .aa-version{ justify-self:start; padding:2px 10px !important; border-radius:999px !important; font-size:.72rem !important; box-shadow:none !important; }
html .alba-actualizando .aa-pie{ display:flex; align-items:center; gap:10px; width:auto !important; font-size:.74rem !important; color: var(--text-dim) !important; text-align:left !important; }
html .alba-actualizando .aa-pie::before{ content:''; flex:1; height:5px; border-radius:999px; order:1;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent)); background-size:200% 100%; animation: aaBarra 1.2s linear infinite; }
html .alba-actualizando .aa-pct{ order:2; color: var(--accent) !important; }
@keyframes aaBarra{ to{ background-position:-200% 0; } }
html .alba-actualizando .aa-pasos, html .alba-actualizando .aa-marca, html .alba-actualizando .aa-chispas{ display:none !important; }
html .mobile-drawer-title .menu-ver{ font-size:.82rem; font-weight:500; letter-spacing:.4px; color: var(--text-dim); white-space:nowrap; margin-left:2px; }
/* La pastilla de version junto a "Menú", y su puntito de salud. */
html .mobile-drawer-head.con-version .alba-ver{ transform: scale(.82); transform-origin:left center; }
html .alba-ver.salud-bien .alba-ver-punto{ background:#22c55e !important; box-shadow:0 0 8px #22c55e !important; }
html .alba-ver.salud-medio .alba-ver-punto{ background:#f59e0b !important; box-shadow:0 0 8px #f59e0b !important; }
html .alba-ver.salud-mal .alba-ver-punto{ background:#ef4444 !important; box-shadow:0 0 8px #ef4444 !important; }

/* ---- Mensaje de Mantenimiento al prender / apagar (mantMsgTarjeta) ---- */
html .config-msg.mant-msg{ display:flex !important; align-items:center; gap:12px; padding:12px 14px !important; margin:10px 0 !important; border-radius:18px;
  border:1px solid color-mix(in srgb, var(--mm) 55%, transparent); background: linear-gradient(110deg, color-mix(in srgb, var(--mm) 20%, transparent), transparent 80%);
  color: var(--text) !important; animation: v3Entra .45s cubic-bezier(.34,1.56,.64,1) both; }
.mant-msg-puesto{ --mm:#ff4d5e; } .mant-msg-quitado{ --mm:#22c55e; } .mant-msg-error{ --mm:#f59e0b; }
.mant-msg .mm-ico{ flex:none; width:42px; height:42px; padding:10px; box-sizing:border-box; border-radius:50%; color: var(--mm);
  background: color-mix(in srgb, var(--mm) 16%, transparent); box-shadow: 0 0 20px -6px var(--mm); animation: arch2Sello .55s .1s cubic-bezier(.34,1.56,.64,1) both; }
.mant-msg .mm-ico svg{ width:100%; height:100%; display:block; }
.mant-msg .mm-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mant-msg .mm-txt b{ font-weight:700; color: var(--mm); }
.mant-msg .mm-txt small{ font-size:.8rem; color: var(--text-dim); line-height:1.4; }
.panel-ver-todos{ display:none !important; }

/* =========================================================================
   Codificación rediseñada (pedido de Manuel): encabezado de vidrio con icono de línea, el código
   como piezas de colores que se encienden, y la explicación en una tarjeta con la pieza en grande.
   ========================================================================= */
html #codifOverlay .cod-modal{
  border-radius:26px !important; overflow:hidden; padding:0 !important;
  border:1px solid color-mix(in srgb, #14b8a6 45%, transparent) !important;
  background: radial-gradient(110% 50% at 0% 0%, color-mix(in srgb, #14b8a6 18%, transparent), transparent 60%), var(--surface) !important;
  box-shadow: 0 34px 90px -24px rgba(0,0,0,.9) !important;
}
html #codifOverlay .ven-cab{ background:none !important; padding:18px 18px 14px !important; border-bottom:1px solid var(--v3-borde, #333) !important; gap:14px; }
html #codifOverlay .ven-cab-ico{ width:50px !important; height:50px !important; padding:12px; box-sizing:border-box; border-radius:15px !important;
  color:#5eead4; background: color-mix(in srgb, #14b8a6 16%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #14b8a6 45%, transparent), 0 0 24px -8px #14b8a6 !important; }
html #codifOverlay .ven-cab-ico svg{ width:100%; height:100%; display:block; }
html #codifOverlay .ven-cab-titulo{ font-size:1.2rem !important; font-weight:700 !important; color: var(--text) !important; text-shadow:none !important; }
html #codifOverlay .ven-cab-sub{ font-size:.8rem !important; color: var(--text-dim) !important; text-shadow:none !important; }
html #codifOverlay .ven-cab-cerrar{ width:36px !important; height:36px !important; padding:9px !important; border-radius:50% !important; border:1px solid var(--v3-borde, #444) !important; background: var(--surface) !important; color: var(--text-dim) !important; transition: transform .25s; }
html #codifOverlay .ven-cab-cerrar:hover{ transform: rotate(90deg); color:#ff6b6b !important; }
html #codifOverlay .ven-cab-cerrar svg{ width:100%; height:100%; display:block; }
html #codifOverlay .cod-cuerpo{ padding:16px 18px !important; }

/* El código, pieza por pieza */
html #codifOverlay .cod-chips{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; padding:12px; border-radius:18px;
  background: color-mix(in srgb, var(--bg) 60%, transparent); border:1px solid var(--v3-borde, #333); }
html #codifOverlay .cod-chip{ padding:7px 11px !important; border-radius:12px !important; font-weight:800 !important; font-size:.95rem !important; cursor:pointer;
  color: var(--text) !important; background: color-mix(in srgb, var(--c) 12%, var(--surface)) !important; border:1px solid color-mix(in srgb, var(--c) 45%, transparent) !important;
  box-shadow:none !important; transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s, color .2s; animation: v3Entra .35s cubic-bezier(.34,1.56,.64,1) both; }
html #codifOverlay .cod-chip:hover{ transform: translateY(-2px); }
html #codifOverlay .cod-chip.activa, html #codifOverlay .cod-chip.activo, html #codifOverlay .cod-chip[aria-pressed="true"]{
  background: var(--c) !important; color:#111 !important; transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 22px -10px var(--c) !important; }
html #codifOverlay .cod-chip-sin{ opacity:.55; border-style:dashed !important; }
html #codifOverlay .cod-sep{ color: var(--text-dim); font-weight:700; opacity:.6; }
html #codifOverlay .cod-flechas{ opacity:.55; }

/* La explicación */
html #codifOverlay .cod-tarjeta{ margin-top:14px; padding:18px !important; border-radius:20px !important; text-align:left !important;
  border:1px solid color-mix(in srgb, #14b8a6 40%, transparent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, #14b8a6 12%, transparent), transparent 70%), var(--surface) !important;
  animation: v3Entra .4s cubic-bezier(.34,1.56,.64,1) both; }
html #codifOverlay .cod-tarjeta-pieza{ display:inline-block; font-size:1.7rem !important; font-weight:800 !important; line-height:1; color:#5eead4 !important; margin-bottom:6px; }
html #codifOverlay .cod-tarjeta-que{ display:inline-block; margin-left:8px; padding:3px 10px; border-radius:999px; vertical-align:middle;
  font-size:.64rem !important; font-weight:700 !important; letter-spacing:1.6px; text-transform:uppercase; color:#5eead4 !important; background: color-mix(in srgb, #14b8a6 14%, transparent); }
html #codifOverlay .cod-tarjeta-detalle{ font-size:1.02rem !important; font-weight:700 !important; margin:8px 0 10px !important; text-align:left !important; }
html #codifOverlay .cod-tarjeta-explica{ font-size:.86rem !important; line-height:1.55; color: var(--text-dim) !important; padding-top:10px; border-top:1px solid var(--v3-borde, #333); }
html #codifOverlay .cod-corregir{ margin-top:12px; width:100%; border-radius:14px !important; }

/* Leyenda y botones */
html #codifOverlay .cod-leyenda{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
html #codifOverlay .cod-leyenda > *{ border-radius:12px !important; }
html #codifOverlay .cod-acciones{ padding:12px 18px 18px !important; gap:8px !important; border-top:1px solid var(--v3-borde, #333); }
html #codifOverlay .cod-acciones .btn{ flex:1; min-height:46px; border-radius:14px !important; }
html #codifOverlay .cod-acciones .btn-primary{ background:#14b8a6 !important; color:#031d1a !important; border-color:#14b8a6 !important; }
html #codifOverlay .cod-tarjeta-que{ display:inline-flex !important; width:auto !important; max-width:max-content; }
/* Dock de lado: el nombre sale A UN LADO del icono, no encima (pedido de Manuel). */
html.con-dock-magic body[data-dock-pos="izq"] .dock-label{ left:calc(100% + 14px) !important; right:auto !important; top:50% !important; bottom:auto !important;
  transform: translate(-6px, -50%) scale(.9) !important; }
html.con-dock-magic body[data-dock-pos="der"] .dock-label{ right:calc(100% + 14px) !important; left:auto !important; top:50% !important; bottom:auto !important;
  transform: translate(6px, -50%) scale(.9) !important; }
html.con-dock-magic body:is([data-dock-pos="izq"], [data-dock-pos="der"]) .dock-item:hover .dock-label{ transform: translate(0, -50%) scale(1) !important; }
html.con-dock-magic body:is([data-dock-pos="izq"], [data-dock-pos="der"]) .dock-item::after{ left:auto; bottom:50%; transform: translateY(50%) scale(0); }
html.con-dock-magic body[data-dock-pos="izq"] .dock-item::after{ right:-7px; }
html.con-dock-magic body[data-dock-pos="der"] .dock-item::after{ left:-7px; }
html.con-dock-magic body:is([data-dock-pos="izq"], [data-dock-pos="der"]) .dock-item:hover::after{ transform: translateY(50%) scale(1); }
html #resultPanel .color-badge.etq-muestra{ display:inline-flex !important; align-items:center !important; gap:6px !important; align-self:center !important;
  width:auto !important; height:auto !important; padding:5px 12px 5px 9px !important; font-size:.8rem !important; font-weight:800 !important; line-height:1.2 !important;
  color:#c4b5fd !important; background: color-mix(in srgb, #8b5cf6 16%, transparent) !important; border:1px solid color-mix(in srgb, #8b5cf6 50%, transparent) !important; border-radius:999px !important; }
html #resultPanel .etq-muestra svg{ width:15px !important; height:15px !important; max-width:15px !important; flex:none !important; }
html #resultPanel .qr-btn{ align-self:center !important; height:auto !important; }
.pref-general{ border-color: color-mix(in srgb, #f59e0b 45%, transparent) !important; }
.pref-todos{ font-style:normal; font-size:.62rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:2px 8px; margin-left:6px; border-radius:999px;
  color:#fbbf24; background: color-mix(in srgb, #f59e0b 14%, transparent); }
.pref-qr-fila{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.pref-qr-fila input{ flex:1; accent-color: var(--accent); }
.pref-qr-fila b{ min-width:56px; text-align:right; color: var(--accent); }

/* Avance de fotos rediseñado: anillos Hoy / Antes de A.L.B.A. / Comparar */
html .foto-avance2{ border:1px solid var(--border); border-radius:20px; padding:16px; margin:12px 0; background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface)); }
html .fa-cab{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
html .fa-cab b{ font-size:1.05rem; display:block; }
html .fa-cab small{ color:var(--muted); font-size:.78rem; }
html .fa-vistas{ display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px; }
html .fa-vistas button{ border:0; background:none; color:var(--muted); font:inherit; font-weight:800; font-size:.78rem; padding:7px 12px; border-radius:999px; cursor:pointer; }
html .fa-vistas button.activo{ background:var(--accent); color:#fff; }
html .fa-anillos{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
@media (max-width:640px){ html .fa-anillos{ grid-template-columns:1fr; } }
html .fa-tarjeta{ background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:14px; text-align:center; }
html .fa-anillo{ position:relative; width:130px; margin:0 auto 8px; }
html .fa-anillo svg{ width:100%; transform:rotate(-90deg); display:block; }
html .fa-anillo circle{ fill:none; stroke-width:9; stroke-linecap:round; transition:stroke-dasharray .6s ease; }
html .fa-anillo .fa-fondo{ stroke:color-mix(in srgb, var(--text) 10%, transparent); }
html .fa-todo .fa-hoy{ stroke:#22c55e; } html .fa-prin .fa-hoy{ stroke:#3b82f6; } html .fa-adj .fa-hoy{ stroke:#a855f7; }
html .fa-anillo .fa-antes{ stroke:#9ca3af; stroke-width:5; }
html .fa-anillo .fa-antes.fa-solo{ stroke-width:9; }
html .fa-pct{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
html .fa-pct b{ font-size:1.5rem; }
html .fa-pct small{ font-size:.68rem; color:var(--muted); }
html .fa-nombre{ font-weight:800; font-size:.86rem; }
html .fa-delta{ margin-top:6px; font-size:.8rem; color:var(--muted); }
html .fa-delta b{ color:#22c55e; margin-left:4px; }
html .fa-mas{ font-size:.74rem; color:var(--muted); margin-top:2px; }
html .fa-ley{ display:flex; gap:8px; align-items:center; justify-content:center; font-size:.76rem; color:var(--muted); margin-top:10px; flex-wrap:wrap; }
html .fa-ley span{ width:14px; height:6px; border-radius:3px; display:inline-block; }
html .fa-l-antes{ background:#9ca3af; } html .fa-l-hoy{ background:var(--accent); margin-left:10px; }
html .foto-rep-orden{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:10px 0 4px; font-size:.78rem; }
html .foto-rep-orden span{ color:var(--muted); font-weight:700; margin-right:4px; }
html .foto-rep-orden button{ border:1px solid var(--border); background:var(--surface-2); color:var(--text); border-radius:999px; padding:6px 12px; font:inherit; font-weight:700; cursor:pointer; }
html .foto-rep-orden button.activo{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--surface)); }

/* Kardex por lotes pegado y Kardex pendientes */
html .lt-pegar-etq{ display:block; margin-top:16px; font-weight:700; font-size:.85rem; }
html .lt-pegar{ width:100%; box-sizing:border-box; margin-top:6px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); padding:10px; font:inherit; font-family:ui-monospace,monospace; font-size:.82rem; resize:vertical; }
html .lt-pegar-cuenta{ font-size:.78rem; color:var(--muted); margin:4px 0 8px; min-height:1em; }
html .lt-pegar-btns{ display:flex; gap:8px; flex-wrap:wrap; }
html .lt-pegar-btns .btn{ flex:1 1 180px; }
html .lt-ver-pend{ width:100%; margin-top:12px; }
html [data-kp-cuenta]{ background:var(--accent); color:#fff; border-radius:999px; padding:1px 8px; margin-left:4px; font-size:.75rem; }
html .kp-lista{ display:flex; flex-direction:column; gap:6px; max-height:50vh; overflow:auto; margin:8px 0; }
html .kp-item{ display:flex; align-items:center; gap:10px; border:1px solid var(--border); background:var(--surface-2); border-radius:12px; padding:9px 10px; cursor:pointer; }
html .kp-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
html .kp-txt b{ font-size:.85rem; word-break:break-all; }
html .kp-txt small{ color:var(--muted); font-size:.74rem; }
html .kp-quitar{ border:0; background:none; color:var(--muted); cursor:pointer; font-size:1rem; padding:4px 8px; border-radius:8px; }
html .kp-quitar:hover{ color:#ef4444; background:color-mix(in srgb, #ef4444 12%, transparent); }
html .kp-todos{ display:flex; gap:8px; align-items:center; font-weight:700; font-size:.84rem; margin:6px 0; cursor:pointer; }

/* La foto sin fondo se ve como recortada, flotando sobre la tarjeta: sin caja ni borde de color detras. */
html .photo-box{ background:transparent !important; }
html .photo-box img{ filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }

/* Foto principal suelta (pedido de Manuel): sin recuadro ni borde, solo el producto. El engranaje
   aparece al pasar el mouse; en el celular no se ve y se abre dejando presionada la foto. */
html .photo-box, html .photo-box:hover{ border-color:transparent !important; box-shadow:none !important; transform:none !important; }
html .photo-box .product-gear-btn{ opacity:0; transition:opacity .18s ease; }
html .photo-box:hover .product-gear-btn, html .photo-box .product-gear-btn:focus-visible{ opacity:1; }
@media (hover:none){ html .photo-box .product-gear-btn{ display:none !important; } }
html .photo-box img{ -webkit-touch-callout:none; user-select:none; }

/* Avance de fotos: cuantas veces mas y linea del tiempo */
html .fa-grande{ display:flex; align-items:baseline; justify-content:center; gap:8px; margin-top:6px; }
html .fa-grande b{ font-size:1.7rem; color:#22c55e; line-height:1; }
html .fa-grande span{ font-weight:800; font-size:.86rem; color:var(--text); }
html .fa-titular{ margin-top:12px; padding:12px 14px; border-radius:14px; text-align:center; font-size:.92rem;
  background:color-mix(in srgb, #22c55e 12%, var(--surface-2)); border:1px solid color-mix(in srgb, #22c55e 35%, var(--border)); }
html .fa-titular b{ color:#22c55e; }
html .fa-linea{ margin-top:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:12px 14px; }
html .fa-linea-cab{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:.86rem; margin-bottom:6px; }
html .fa-linea-cab span{ display:flex; gap:12px; flex-wrap:wrap; font-size:.75rem; color:var(--muted); align-items:center; }
html .fa-linea-cab i{ width:12px; height:4px; border-radius:2px; display:inline-block; margin-right:4px; }
html .fa-linea-svg{ width:100%; height:auto; display:block; }
html .fl-rejilla{ stroke:color-mix(in srgb, var(--text) 10%, transparent); stroke-width:1; }
html .fl-inicio{ stroke:var(--accent); stroke-width:1.5; stroke-dasharray:4 4; }
html .fa-linea-svg .fl-eje{ fill:#fff !important; opacity:.85; font-size:12px; font-weight:700; font-family:inherit; }
html .fl-valor{ font-size:12px; font-weight:800; font-family:inherit; }

/* Velocidad del equipo de almacen */
html .fv-cargando{ text-align:center; color:#fff; opacity:.75; font-size:.85rem; }
html .fv-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:6px 0 10px; }
@media (max-width:640px){ html .fv-tiles{ grid-template-columns:1fr; } }
html .fv-tile{ border-radius:14px; padding:10px 12px; background:color-mix(in srgb, var(--c) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--c) 35%, var(--border)); display:flex; flex-direction:column; }
html .fv-tile b{ font-size:1.6rem; color:var(--c); line-height:1.1; }
html .fv-tile span{ font-weight:800; font-size:.84rem; color:#fff; }
html .fv-tile small{ font-size:.72rem; color:#fff; opacity:.7; margin-top:2px; }
html .fv-pie{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.8rem; color:#fff; margin-top:6px; }
html .fv-pie b{ color:#fff; }
html .fv-nota{ display:block; margin-top:6px; font-size:.7rem; color:#fff; opacity:.6; }
html .fa-linea-cab b, html .fa-linea-cab span{ color:#fff; }

/* Avance de fotos compacto + pop-up con todo */
html .fa-compacto{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:10px 0; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); }
html .fac-datos{ display:flex; gap:8px 14px; flex-wrap:wrap; align-items:center; font-size:.8rem; color:#fff; }
html .fac-mini{ display:inline-flex; align-items:center; gap:6px; }
html .fac-mini i{ width:44px; height:6px; border-radius:3px; background:linear-gradient(90deg, var(--c) var(--p), color-mix(in srgb, #fff 15%, transparent) var(--p)); }
html .fac-mini b{ color:var(--c); }
html .fac-veces{ font-weight:800; color:#22c55e; }
html .fac-btn{ border:1px solid var(--accent); background:color-mix(in srgb, var(--accent) 16%, var(--surface)); color:var(--accent); font:inherit; font-weight:800; font-size:.82rem; padding:8px 14px; border-radius:999px; cursor:pointer; }
html .fa-modal{ width:min(1000px, 96vw) !important; max-width:none !important; max-height:92vh; overflow:auto; position:relative; padding:14px !important; }
html .fa-modal .foto-avance2{ margin:0; }
html .fa-cerrar{ position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:var(--surface-2); color:#fff; cursor:pointer; }
html .fa-modal .fa-cab{ padding-right:40px; }

/* ---------- Esqueletos de carga estilo Boneyard (V2.208.0) ---------- */
html .bn-esqueleto{ padding:4px 0; }
html .bn{ display:block; border-radius:12px; position:relative; overflow:hidden;
  background:color-mix(in srgb, var(--text) 9%, transparent); }
html .bn::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 10%, transparent), transparent);
  animation:bnBrillo 1.4s ease-in-out infinite; }
@keyframes bnBrillo{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){ html .bn::after{ animation:none; } }
html .bn-aviso{ display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; color:var(--muted); margin:0 0 12px; }
html .bn-punto{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:bnLatido 1s ease-in-out infinite; }
@keyframes bnLatido{ 50%{ opacity:.3; transform:scale(.7); } }
html .bn-ficha{ display:flex; gap:22px; flex-wrap:wrap; }
html .bn-col-foto{ width:clamp(180px, 34vw, 300px); }
html .bn-col-datos{ flex:1; min-width:240px; }
html .bn-foto{ width:100%; aspect-ratio:1; border-radius:18px; }
html .bn-dos{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
html .bn-btn{ height:40px; border-radius:12px; }
html .bn-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
html .bn-chip{ height:32px; border-radius:999px; }
html .bn-titulo{ height:22px; width:85%; margin:0 0 10px; }
html .bn-codigo{ height:48px; width:100%; margin:6px 0 14px; border-radius:14px; }
html .bn-txt{ height:12px; width:70%; border-radius:6px; }
html .bn-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin:0 0 14px; }
html .bn-tile{ height:74px; border-radius:14px; }
html .bn-banner{ height:76px; border-radius:18px; margin:0 0 12px; }
html .bn-tira{ height:52px; border-radius:14px; margin:0 0 12px; }
html .bn-tabla{ display:flex; flex-direction:column; gap:0; border-radius:14px; overflow:hidden; border:1px solid color-mix(in srgb, var(--text) 8%, transparent); }
html .bn-fila{ display:grid; grid-template-columns:repeat(auto-fit, minmax(60px, 1fr)); gap:14px; padding:14px; border-top:1px solid color-mix(in srgb, var(--text) 6%, transparent); }
html .bn-fila.bn-cabeza{ border-top:0; background:color-mix(in srgb, var(--text) 4%, transparent); }
html .bn-persona{ display:flex; gap:14px; align-items:center; margin:0 0 14px; }
html .bn-avatar{ width:64px; height:64px; border-radius:50%; flex:none; }
html .bn-barras{ display:flex; align-items:flex-end; gap:8px; height:160px; padding:6px 4px 0; }
html .bn-barra{ flex:1; border-radius:6px 6px 3px 3px; }

/* Esqueleto: aviso grande de "Buscando" */
html .bn-buscando{ position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; padding:14px 16px; margin:0 0 16px; border-radius:16px;
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }
html .bn-giro{ width:26px; height:26px; flex:none; border-radius:50%; border:3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color:var(--accent); animation:bnGiro .8s linear infinite; }
@keyframes bnGiro{ to{ transform:rotate(360deg); } }
html .bn-buscando-txt{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; }
html .bn-buscando-txt b{ font-size:1.05rem; color:var(--text); }
html .bn-buscando-cod{ font-family:ui-monospace,monospace; font-weight:800; font-size:.86rem; color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); padding:4px 10px; border-radius:8px; word-break:break-all; }
html .bn-buscando-barra{ position:absolute; left:0; right:0; bottom:0; height:3px; background:color-mix(in srgb, var(--accent) 15%, transparent); }
html .bn-buscando-barra i{ position:absolute; top:0; bottom:0; width:35%; background:var(--accent); border-radius:2px; animation:bnBarra 1.3s ease-in-out infinite; }
@keyframes bnBarra{ from{ left:-35%; } to{ left:100%; } }
@media (prefers-reduced-motion: reduce){ html .bn-giro, html .bn-buscando-barra i{ animation-duration:3s; } }

/* La busqueda esconde el panel al empezar: mientras tenga esqueleto, se ve. */
html #resultPanel:has(> .bn-esqueleto){ display:block !important; opacity:1 !important; visibility:visible !important; }
html body:has(#resultPanel > .bn-esqueleto) #homePanel, html body:has(#resultPanel > .bn-esqueleto) .home-legal{ display:none !important; }

/* Cartel de Odoo 19: cambia de color conforme se acerca el ultimo dia (lo pone actualizar.js). */










@keyframes aofUrge{ 0%,100%{ box-shadow:0 10px 26px -10px rgba(220,38,38,.8); } 50%{ box-shadow:0 0 0 6px rgba(239,68,68,.25), 0 12px 34px -6px rgba(220,38,38,1); } }


/* =========================================================================
   Tema personal E-DAY (inspirado en Gears of War: E-Day, ver 'eday' en temas.js).
   Ceniza, cielo rojo, placas de acero con remaches, franjas de peligro y brasas.
   Todo cuelga de html[data-tema="eday"].
   ========================================================================= */
html[data-tema="eday"]{
  --ed-rojo:#c8102e; --ed-sangre:#7a0a18; --ed-brasa:#ff7a1a; --ed-acero:#8a9bab; --ed-ceniza:#d8cfc4;
  --ed-corte:10px;
  --text:#ece4da; --text-dim:#a39588;
}
html[data-tema="eday"] body{
  background:
    radial-gradient(90% 55% at 50% -10%, rgba(200,16,46,.35), transparent 65%),
    radial-gradient(60% 40% at 0% 100%, rgba(255,122,26,.12), transparent 60%),
    radial-gradient(60% 40% at 100% 100%, rgba(122,10,24,.22), transparent 60%),
    linear-gradient(#0d0907, #070505) !important;
}
/* Tierra abierta: grietas rojas que laten al fondo de la pantalla. */
html[data-tema="eday"] body::before{
  content:''; position:fixed; left:0; right:0; bottom:0; height:30vh; z-index:0; pointer-events:none;
  background:
    linear-gradient(100deg, transparent 18%, rgba(255,74,74,.55) 18.3%, transparent 18.8%),
    linear-gradient(75deg, transparent 41%, rgba(255,122,26,.45) 41.3%, transparent 41.7%),
    linear-gradient(110deg, transparent 63%, rgba(255,74,74,.5) 63.2%, transparent 63.7%),
    linear-gradient(80deg, transparent 84%, rgba(255,122,26,.4) 84.3%, transparent 84.7%),
    radial-gradient(120% 90% at 50% 120%, rgba(200,16,46,.35), transparent 70%);
  -webkit-mask-image: linear-gradient(transparent, #000 75%); mask-image: linear-gradient(transparent, #000 75%);
  animation: edLatido 4s ease-in-out infinite;
}
@keyframes edLatido{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
/* Vineta oscura y grano de ceniza. */
html[data-tema="eday"] body::after{
  content:''; position:fixed; inset:0; z-index:2147483000; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%),
    repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
}
html[data-tema="eday"] .wrap{ position:relative; z-index:1; }

/* Placas de acero: esquinas cortadas, bisel y remaches. */
html[data-tema="eday"] :is(.glass, .home-tile, .home-tema, .total-piezas-card, .ml-modal, .sg-card){
  border-radius:0 !important;
  clip-path: polygon(var(--ed-corte) 0, calc(100% - var(--ed-corte)) 0, 100% var(--ed-corte), 100% calc(100% - var(--ed-corte)), calc(100% - var(--ed-corte)) 100%, var(--ed-corte) 100%, 0 calc(100% - var(--ed-corte)), 0 var(--ed-corte));
  border:1px solid #4a3a33 !important;
  background:
    radial-gradient(circle at 14px 14px, #6b5a50 0 2px, #1a1411 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 14px) 14px, #6b5a50 0 2px, #1a1411 2.5px, transparent 3.5px),
    radial-gradient(circle at 14px calc(100% - 14px), #6b5a50 0 2px, #1a1411 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #6b5a50 0 2px, #1a1411 2.5px, transparent 3.5px),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, #1f1915, #120e0c) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.5), 0 10px 26px -12px rgba(0,0,0,.9) !important;
}
html[data-tema="eday"] .home-tile:hover{
  border-color: var(--ed-rojo) !important;
  box-shadow: inset 0 0 0 1px var(--ed-rojo), inset 0 0 26px rgba(200,16,46,.3) !important;
}
/* Franja de peligro arriba de las tarjetas grandes. */
html[data-tema="eday"] :is(.glass.result, .home-tema, .ml-modal){ position:relative; }
html[data-tema="eday"] :is(.glass.result, .home-tema, .ml-modal)::before{
  content:''; position:absolute; left:var(--ed-corte); right:var(--ed-corte); top:0; height:5px; z-index:2; pointer-events:none;
  background: repeating-linear-gradient(-45deg, var(--ed-rojo) 0 10px, #120d0b 10px 20px); opacity:.85;
}
html[data-tema="eday"] :is(.home-tile-icon, .drawer-item-icon, .pop-ico, .total-piezas-icon, .odoo-list-icon){
  border-radius:2px !important;
  box-shadow: 0 0 0 1px rgba(255,74,74,.5), 0 0 14px -4px var(--ed-brasa) !important;
}
/* Titulos: estarcido militar con sombra de sangre. */
html[data-tema="eday"] :is(h1, h2, h3, .odoo-list-head-text h2, .home-tema-nombre, .mobile-drawer-title){
  text-transform: uppercase; letter-spacing:2.5px !important; font-weight:900 !important;
  text-shadow: 0 2px 0 #000, 0 0 16px rgba(200,16,46,.55);
}
/* Botones: placas con corte; el principal, rojo sangre. */
html[data-tema="eday"] .btn{
  border-radius:0 !important; text-transform:uppercase; letter-spacing:1.5px; font-weight:900 !important;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  border:1px solid #5a463d !important;
}
html[data-tema="eday"] .btn:hover:not(:disabled){ border-color: var(--ed-brasa) !important; box-shadow: 0 0 18px -5px var(--ed-brasa) !important; }
html[data-tema="eday"] .btn-primary{ background: linear-gradient(180deg, #e01b3a, #8f0b1f) !important; color:#fff !important; border-color:#ff4a4a !important; text-shadow:0 1px 0 #000; }
html[data-tema="eday"] .btn-primary:hover:not(:disabled){ box-shadow: 0 0 24px -4px #ff2a3d !important; }
html[data-tema="eday"] :is(input, select, textarea){
  border-radius:0 !important; background: #0b0807 !important; color: var(--text) !important;
  border:1px solid #4a3a33 !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.7) !important;
}
html[data-tema="eday"] :is(input, select, textarea):focus{ border-color: var(--ed-rojo) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 0 0 1px var(--ed-rojo) !important; }
html[data-tema="eday"] .alba-banner .main-search #searchBtn{ background: linear-gradient(180deg, #e01b3a, #8f0b1f) !important; border-color:#ff4a4a !important; color:#fff !important; border-radius:0 !important; }
/* Codigo de la ficha: placa de identificacion grabada. */
html[data-tema="eday"] .code-pill-main{
  border-radius:0 !important; color: var(--ed-ceniza) !important; letter-spacing:1px;
  background: linear-gradient(180deg, #2b2420, #171210) !important; border:1px solid #6b5a50 !important;
  text-shadow: 0 -1px 0 #000, 0 1px 0 rgba(255,255,255,.08);
}
html[data-tema="eday"] .ficha-etq{ border-radius:0 !important; }
html[data-tema="eday"] .alba-dock{ border-radius:0 !important; border-color:#5a463d !important;
  background: linear-gradient(180deg, #221b17, #110d0b) !important;
  box-shadow: 0 -3px 0 var(--ed-rojo) inset, 0 12px 30px -10px #000 !important; }
html[data-tema="eday"] .dock-item{ border-radius:2px !important; }
html[data-tema="eday"] .dock-item:hover{ color: var(--ed-brasa) !important; border-color: var(--ed-brasa) !important; }
html[data-tema="eday"] .mobile-drawer .drawer-item{ border-radius:0 !important; }
html[data-tema="eday"] .bn{ border-radius:0 !important; }
html[data-tema="eday"] .bn-buscando{ border-radius:0 !important; border-color: var(--ed-rojo) !important; }
html[data-tema="eday"] ::-webkit-scrollbar-thumb{ border-radius:0 !important; background-image: linear-gradient(var(--ed-rojo), var(--ed-sangre)) !important; }
html[data-tema="eday"] ::selection{ background: var(--ed-rojo); color:#fff; }
@media (prefers-reduced-motion: reduce){
  html[data-tema="eday"]:not(.alba-anim-siempre) body::before{ animation:none !important; }
}
html[data-tema="eday"] body::before{ top:auto !important; bottom:0 !important; height:32vh !important; inset:auto 0 0 0 !important; }
/* El historial de la ficha va a la derecha, fuera del recuadro: el corte de esquinas lo tapaba. */
html[data-tema="eday"] .glass.result, html[data-tema="cyberpunk"] .glass.result{ clip-path:none !important; }

/* Ubicaciones (pedido de Manuel): una sola ocupa todo el ancho; dos o mas van en cuadricula de 2. */
html .loc-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
html .loc-grid:has(> :only-child){ grid-template-columns:1fr !important; }

/* Con 2 columnas la cantidad no cabe a un lado: va abajo de la ubicacion, dentro del recuadro. */
html .loc-grid:not(:has(> :only-child)) .loc-pill{ display:grid !important; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; row-gap:2px; align-items:center; }
html .loc-grid:not(:has(> :only-child)) .loc-pill > .loc-pill-icono{ grid-row:1 / span 2; }
html .loc-grid:not(:has(> :only-child)) .loc-pill > .loc-pill-ubic{ grid-column:2; min-width:0; overflow-wrap:anywhere; }
html .loc-grid:not(:has(> :only-child)) .loc-pill > .loc-qty{ grid-column:2; justify-self:start; margin:0 !important; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
html .loc-grid:not(:has(> :only-child)) .loc-pill > .loc-qty{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; font-size:clamp(.95rem, 4.2vw, 1.25rem) !important; line-height:1.15; overflow-wrap:anywhere; }
html .loc-grid:not(:has(> :only-child)) .loc-pill > .loc-pill-ubic{ font-size:clamp(.9rem, 4vw, 1.1rem) !important; }

/* "Ajusta la foto" con la misma cara que "Recortar foto" (rcf-v2) */
.recorte-v2.recorte-modal{ max-height:none; overflow:hidden; display:flex; flex-direction:column; padding:0 !important; }
.recorte-v2 .rcf-cab .recorte-progreso{ font-size:.72rem; }
.recorte-v2 .recorte-lienzo{ display:flex; align-items:center; justify-content:center; padding:12px; overflow:hidden; }
.recorte-v2 .recorte-escenario{ width:100%; height:100%; align-items:center; }
.recorte-v2 .recorte-formas.rcf-formas{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin:0; justify-content:stretch; }
.recorte-v2 .recorte-forma-btn.rcf-forma{ padding:10px 4px; border-radius:10px; }
.recorte-v2 .recorte-forma-btn.rcf-forma.activo{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); }
.rcf-ico-ninguno{ position:relative; }
.rcf-ico-ninguno::after{ content:''; position:absolute; left:-2px; right:-2px; top:50%; height:2px; background:currentColor; transform:rotate(-40deg); }
.recorte-v2 .recorte-zoom{ margin-bottom:8px; }
.recorte-v2 .recorte-extras.rcf-tools{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.recorte-v2 .recorte-extra-btn.rcf-tool[hidden]{ display:none !important; }
.recorte-v2 .recorte-volver-formas{ width:100%; }
.recorte-v2 .rcf-acciones-tres{ grid-template-columns:1fr 1fr; }
.recorte-v2 .rcf-acciones-tres .btn-primary{ grid-column:1 / -1; }
.recorte-solo-girar .recorte-sec-formas{ display:none !important; }
@media (max-width:800px){
  .recorte-v2 .recorte-formas.rcf-formas{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .recorte-v2 .recorte-extras.rcf-tools{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .recorte-v2 .rcf-tool small{ display:block; }
}

/* Pendiente de Kardex: botoncito junto a la etiqueta "Codigo" */
.ficha-etq-fila{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ficha-etq-fila .ficha-etq{ margin-bottom:0 !important; }
.kp-mini{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; cursor:pointer; font:inherit; font-size:.7rem; font-weight:800;
  color:var(--text); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background:color-mix(in srgb, var(--accent) 10%, transparent); transition:background .15s, border-color .15s, transform .15s; }
.kp-mini:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 22%, transparent); transform:translateY(-1px); }
.kp-mini span{ color:var(--text-dim); }
@media (max-width:480px){ .kp-mini span{ display:none; } .kp-mini{ padding:3px 7px; } }
:is(html.es-espectador, body.es-espectador) .kp-mini{ display:none !important; }
.kp-mini .kp-mini-ico{ display:inline-flex; width:14px; height:14px; color:var(--accent); }
.kp-mini .kp-mini-ico svg{ width:14px; height:14px; }

/* El pin regresa cuando quitan el codigo de Kardex pendientes */
.kp-mini[hidden]{ display:none !important; }
.kp-mini.kp-vuelve{ animation:kpVuelve .7s cubic-bezier(.34,1.56,.64,1) both, kpBrillo 1.6s ease-out .2s 2; }
@keyframes kpVuelve{ 0%{ opacity:0; transform:scale(.3) rotate(-25deg); } 60%{ opacity:1; transform:scale(1.18) rotate(6deg); } 100%{ transform:none; } }
@keyframes kpBrillo{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 100%{ box-shadow:0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce){ html:not(.alba-anim-siempre) .kp-mini.kp-vuelve{ animation:none; } }

/* La descripcion de la ficha se ve completa siempre, sin "Ver mas" (pedido de Manuel). */
html .product-desc-text{ -webkit-line-clamp:unset !important; line-clamp:unset !important; display:block !important; overflow:visible !important; max-height:none !important; }
html .product-desc-toggle{ display:none !important; }

/* Agregar ubicacion: dice si se detecto de rack o de texto */
.ml-ubic-tipo{ margin-top:6px; font-size:.76rem; font-weight:700; padding:5px 10px; border-radius:8px; }
.ml-ubic-tipo[hidden]{ display:none; }
.ml-ubic-tipo.es-rack{ color:var(--accent4); background:color-mix(in srgb, var(--accent4) 12%, transparent); }
.ml-ubic-tipo.es-texto{ color:var(--accent2); background:color-mix(in srgb, var(--accent2) 12%, transparent); }

/* Comentario corto de una ubicacion */
.loc-pill-ubic{ position:relative; }
.loc-ubic-comentario{ display:block; margin-top:3px; font-size:.72rem; font-weight:700; line-height:1.25; color:#fff; opacity:.92;
  padding:2px 7px; border-radius:6px; background:rgba(0,0,0,.28); width:max-content; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.loc-ubic-nuevo{ animation:locNotaEntra .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes locNotaEntra{ from{ opacity:0; transform:translateY(-4px) scale(.9); } to{ opacity:.92; transform:none; } }
.loc-nota-btn{ display:inline-flex; align-items:center; justify-content:center; margin-top:3px; width:24px; height:22px; padding:0; border-radius:6px; cursor:pointer;
  border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.25); font-size:.7rem; line-height:1; opacity:.75; }
.loc-nota-btn:hover{ opacity:1; background:rgba(0,0,0,.45); }
/* :not([type=checkbox]) — si no, cualquier casilla dentro de .un-modal (como las de -root,
   permisos de una cuenta) se estira a todo el ancho y el texto se va al final del renglón. */
.un-modal input:not([type="checkbox"]){ width:100%; box-sizing:border-box; }
.un-cuenta{ font-size:.72rem; color:var(--text-dim); text-align:right; margin-top:4px; }
html .loc-pill-ubic:has(.loc-nota-btn, .loc-ubic-comentario){ display:flex !important; flex-direction:column; align-items:flex-start; }
/* La ubicacion manual se ve con sus espacios tal cual se escribieron. */
html .manual-loc-card .loc-pill-ubic{ white-space:pre-wrap; }
html .manual-loc-card .loc-pill-ubic > *{ white-space:normal; }

/* Ubicaciones dentro de la columna de datos de la ficha */
html .product-info .ficha-ubic-bloque{ width:100%; margin-top:12px; }
html .product-info .ficha-ubic-bloque .total-piezas-card{ margin-top:0; }
/* "Editar ubicaciones" se abre con clic derecho o presion larga en una ubicacion: el boton ya no se ve. */
html .edit-locations-btn{ display:none !important; }
html div:has(> .edit-locations-btn:only-child){ display:none !important; }

/* Codigo de barras en el globo del QR: las barras salen una por una */
.barras-pop .barras-pop-papel{ background:#fff; border-radius:12px; padding:12px 12px 8px; margin:10px 0; }
.barras-pop .barras-svg{ width:100%; height:86px; display:block; }
.barras-pop .barras-num{ text-align:center; color:#111; font-family:ui-monospace,monospace; font-weight:800; letter-spacing:2px; margin-top:6px; }
.barras-pop .barras-svg g rect{ transform-box:fill-box; transform-origin:50% 100%; animation:barraSale .35s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes barraSale{ from{ transform:scaleY(0); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){ html:not(.alba-anim-siempre) .barras-pop .barras-svg g rect{ animation:none; } }

/* ---------- Editar ubicaciones, rediseño (lm-v2) ---------- */
.lm-modal.lm-v2{ max-width:560px !important; width:min(560px, 100%); padding:0 !important; display:flex; flex-direction:column; max-height:88vh; overflow:hidden; }
.lm2-cab{ display:flex; align-items:center; gap:12px; padding:16px 16px 14px; border-bottom:1px solid var(--border);
  background:linear-gradient(110deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 70%); }
.lm2-cab-ico{ width:42px; height:42px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; background:color-mix(in srgb, var(--accent) 22%, transparent); }
.lm2-cab-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.lm2-cab-tit{ font-weight:900; font-size:1.08rem; }
.lm2-cab-cod{ font-family:ui-monospace,monospace; font-size:.74rem; font-weight:800; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); padding:3px 8px; border-radius:7px; width:max-content; max-width:100%; overflow-wrap:anywhere; }
.lm2-cerrar{ width:34px; height:34px; flex:none; border-radius:50%; border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; }
.lm2-cuerpo{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:16px; }
.lm2-resumen{ display:flex; gap:8px; flex-wrap:wrap; }
.lm2-resumen span{ font-size:.76rem; padding:5px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); }
.lm2-resumen b{ color:var(--text); }
.lm2-resumen .lm2-res-oculta b{ color:var(--warn, #f59e0b); }
.lm2-sec-cab{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.lm2-sec-tit{ font-size:.72rem; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); }
.lm2-sec-n{ font-size:.7rem; font-weight:800; padding:1px 7px; border-radius:999px; background:var(--surface-2); color:var(--text); }
.lm2-lista{ display:flex; flex-direction:column; gap:8px; }
.lm2-tarjeta{ display:flex !important; align-items:center; gap:12px; padding:12px !important; border-radius:14px !important; border:1px solid var(--border) !important;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent4) 10%, var(--surface-2)), var(--surface-2)) !important; }
.lm2-tarjeta.lm2-manual{ background:linear-gradient(135deg, color-mix(in srgb, #8b5cf6 14%, var(--surface-2)), var(--surface-2)) !important; }
.lm2-tarjeta.lm2-oculta{ opacity:1 !important; background:repeating-linear-gradient(-45deg, var(--surface-2) 0 10px, color-mix(in srgb, var(--text) 4%, var(--surface-2)) 10px 20px) !important; }
.lm2-tarjeta.lm2-oculta .lm2-nombre, .lm2-tarjeta.lm2-oculta .lm2-img{ opacity:.55; }
.lm2-img{ width:38px; height:38px; flex:none; object-fit:contain; }
.lm2-datos{ flex:1; min-width:0; }
.lm2-nombre{ font-weight:900; font-size:.98rem; overflow-wrap:anywhere; white-space:pre-wrap; }
.lm2-meta{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:4px; }
.lm2-cant{ font-weight:800; font-size:.8rem; color:var(--accent4); }
.lm2-cant.lm2-sin{ color:var(--text-dim); font-weight:600; }
.lm2-tag{ font-size:.68rem; font-weight:800; padding:2px 7px; border-radius:6px; background:color-mix(in srgb, var(--text) 8%, transparent); color:var(--text-dim); }
.lm2-tag-oculta{ background:color-mix(in srgb, #f59e0b 18%, transparent); color:#fbbf24; }
.lm2-tag-manual{ background:color-mix(in srgb, #8b5cf6 18%, transparent); color:#c4b5fd; }
.lm2-nota{ margin-top:6px; font-size:.74rem; font-weight:700; color:var(--text); background:rgba(0,0,0,.22); padding:4px 8px; border-radius:7px; width:max-content; max-width:100%; overflow-wrap:anywhere; }
.lm2-acciones{ display:flex; gap:6px; flex:none; flex-wrap:wrap; justify-content:flex-end; }
.lm2-btn{ display:inline-flex; align-items:center; gap:4px; padding:7px 10px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-size:.76rem; font-weight:800; cursor:pointer; transition:border-color .15s, background .15s, transform .15s; }
.lm2-btn:hover{ border-color:var(--accent); transform:translateY(-1px); }
.lm2-btn:disabled{ opacity:.5; cursor:wait; }
.lm2-btn-ver{ border-color:color-mix(in srgb, var(--accent4) 60%, var(--border)); color:var(--accent4); }
.lm2-btn-borrar{ color:var(--err, #ef4444); }
.lm2-btn-borrar:hover{ border-color:var(--err, #ef4444); background:color-mix(in srgb, #ef4444 12%, transparent); }
.lm2-vacio{ font-size:.82rem; color:var(--text-dim); padding:12px; border:1px dashed var(--border); border-radius:12px; text-align:center; }
.lm2-agregar{ width:100%; margin-top:10px; justify-content:center; }
.lm2-pie{ padding:12px 16px; border-top:1px solid var(--border); display:flex; }
.lm2-pie .btn{ flex:1; justify-content:center; }
@media (max-width:520px){
  .lm2-tarjeta{ flex-wrap:wrap; }
  .lm2-acciones{ width:100%; justify-content:stretch; }
  .lm2-acciones .lm2-btn{ flex:1; justify-content:center; }
  .lm-modal.lm-v2{ max-height:92vh; }
}

/* Ficha: solo las ubicaciones (sin Piezas totales ni el aviso grande de transferencia) */
html #fichaUbicBloque .total-piezas-card{ display:none !important; }
html #fichaUbicBloque .ubic-pendiente:not(.ubic-unificar){ display:none !important; }
/* Ubicacion puesta a mano: parpadea, porque falta hacer la transferencia en Odoo */
html .manual-loc-card[data-falta-transf]{ animation:faltaTransf 1.8s ease-in-out infinite; }
@keyframes faltaTransf{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,158,11,0); border-color:color-mix(in srgb, #f59e0b 35%, transparent); }
  50%{ box-shadow:0 0 0 4px rgba(245,158,11,.28), 0 0 18px -2px rgba(245,158,11,.7); border-color:#f59e0b; } }
html .manual-loc-card[data-falta-transf] .loc-pill-nota::before{ content:'⚠️ '; }
@media (prefers-reduced-motion: reduce){ html:not(.alba-anim-siempre) .manual-loc-card[data-falta-transf]{ animation:none; border-color:#f59e0b !important; } }

/* IDs FP / FPA rediseño */
.alias-v2{ padding:14px !important; border-radius:16px !important; border:1px solid color-mix(in srgb, var(--accent2) 35%, var(--border)) !important;
  background:linear-gradient(120deg, color-mix(in srgb, var(--accent2) 10%, var(--surface)), var(--surface) 70%) !important; }
.alias-v2-cab{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.alias-v2-ico{ width:38px; height:38px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; background:color-mix(in srgb, var(--accent2) 22%, transparent); }
.alias-v2-txt{ display:flex; flex-direction:column; min-width:0; }
.alias-v2-tit{ font-weight:900; font-size:.95rem; letter-spacing:.5px; }
.alias-v2-sub{ font-size:.74rem; color:var(--text-dim); }
.alias-v2-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.alias-v2-chip{ display:inline-flex !important; align-items:baseline; gap:2px; padding:8px 14px !important; border-radius:10px !important; cursor:pointer;
  font:inherit; font-family:ui-monospace,monospace !important; font-size:1rem !important; font-weight:900 !important; letter-spacing:1px;
  color:var(--text) !important; background:var(--surface-2) !important; border:1px solid color-mix(in srgb, var(--accent2) 45%, var(--border)) !important;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.25); transition:transform .15s, border-color .15s, background .15s; }
.alias-v2-chip:hover{ transform:translateY(-2px); border-color:var(--accent2) !important; background:color-mix(in srgb, var(--accent2) 14%, var(--surface-2)) !important; }
.alias-v2-fp{ color:var(--accent2); font-size:.8em; }
html #fichaUbicBloque .manual-loc-actions{ display:none !important; }
html #fichaUbicBloque .loc-pill{ max-width:100%; box-sizing:border-box; min-width:0; }

/* Ajusta la foto: casilla para decidir si se le pone texto */
.recorte-con-texto{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface-2); transition:border-color .15s, background .15s; }
.recorte-con-texto:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.recorte-con-texto input{ width:18px; height:18px; flex:none; accent-color:var(--accent); }
.recorte-con-texto-ico{ font-size:1.1rem; }
.recorte-con-texto span:last-child{ display:flex; flex-direction:column; line-height:1.25; }
.recorte-con-texto b{ font-size:.84rem; }
.recorte-con-texto small{ font-size:.72rem; color:var(--text-dim); }

/* La foto principal se va al borrarla: se encoge, se tuerce y se desvanece */
#mainPhotoBox.foto-borrandose{ pointer-events:none; animation:fotoSeVa .6s cubic-bezier(.55,0,.45,1) forwards; }
#mainPhotoBox.foto-borrandose img{ animation:fotoSeVaImg .6s ease-in forwards; }
@keyframes fotoSeVa{ 0%{ transform:none; } 30%{ transform:scale(1.04) rotate(-2deg); } 100%{ transform:scale(.4) rotate(8deg) translateY(30px); opacity:0; } }
@keyframes fotoSeVaImg{ to{ filter:grayscale(1) blur(6px); } }
@media (prefers-reduced-motion: reduce){ html:not(.alba-anim-siempre) #mainPhotoBox.foto-borrandose{ animation:fotoSeVaLento .3s linear forwards; } }
@keyframes fotoSeVaLento{ to{ opacity:0; } }

/* Aviso automatico de las ubicaciones puestas a mano */
.ubic-mano-avisos{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.ubic-mano-aviso{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; font-size:.84rem; line-height:1.45;
  color:var(--text); border:1px solid color-mix(in srgb, #f59e0b 45%, var(--border)); background:color-mix(in srgb, #f59e0b 10%, var(--surface)); }
.ubic-mano-aviso b{ color:#fbbf24; }
.ubic-mano-ico{ flex:none; }
.loc-nota-btn, .loc-ubic-comentario{ display:none !important; }
html .ubic-mano-aviso{ text-align:left !important; }
html #fichaUbicBloque .manual-loc-card{ overflow:hidden; }
html #fichaUbicBloque .manual-loc-card .loc-pill-ubic{ flex:1 1 auto; min-width:0; }
html #fichaUbicBloque .manual-loc-card .loc-qty{ flex:0 1 auto; min-width:0; margin-right:0 !important; white-space:nowrap; }

/* IDs FP / FPA como botoncitos junto a "Barras" */
.fp-btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; cursor:pointer; font:inherit; font-size:.78rem; font-weight:800;
  font-family:ui-monospace,monospace; letter-spacing:.5px; color:var(--accent2); border:1px solid color-mix(in srgb, var(--accent2) 45%, var(--border));
  background:color-mix(in srgb, var(--accent2) 10%, transparent); transition:transform .15s, background .15s, border-color .15s; vertical-align:middle; }
.fp-btn:hover{ transform:translateY(-1px); border-color:var(--accent2); background:color-mix(in srgb, var(--accent2) 20%, transparent); }
.fp-btn-ico{ font-size:.85rem; }
.fp-fila{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }

/* Historial: Origen -> Destino */
.mov-ruta{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:150px; }
.mov-ruta-et{ font-size:.62rem; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); }
.mov-ruta-lugar{ font-size:.82rem; color:var(--text-dim); }
.mov-ruta-flecha{ font-weight:900; color:var(--accent); line-height:1; margin:1px 0; transform:rotate(90deg); display:inline-block; }

/* Producto sin foto: el hueco de la foto como esqueleto, con su dibujo de imagen */
html .photo-box.sin-foto-esqueleto{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:10px; cursor:default !important;
  position:relative; overflow:hidden; color:color-mix(in srgb, var(--text) 35%, transparent);
  background:color-mix(in srgb, var(--text) 7%, transparent) !important; border:2px dashed color-mix(in srgb, var(--text) 16%, transparent) !important; border-radius:18px !important; }
html .photo-box.sin-foto-esqueleto svg{ width:34%; height:auto; }
html .photo-box.sin-foto-esqueleto span{ font-size:.8rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; }
html .photo-box.sin-foto-esqueleto::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 9%, transparent), transparent); animation:bnBrillo 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ html .photo-box.sin-foto-esqueleto::after{ animation:none; } }

/* ---------- Configuraciones del producto, rediseño (po-v2, misma base que lm-v2) ---------- */
.po2-aviso{ font-size:.8rem; line-height:1.45; padding:10px 12px; border-radius:12px; border:1px solid color-mix(in srgb, #f59e0b 40%, var(--border)); background:color-mix(in srgb, #f59e0b 9%, var(--surface)); }
.po2-aviso b{ color:#fbbf24; }
.po2-sec{ border:1px solid var(--border); border-radius:16px; padding:14px; background:var(--surface-2); display:flex; flex-direction:column; gap:10px; }
.po2-sec-cab{ display:flex; gap:10px; align-items:flex-start; }
.po2-sec-ico{ width:34px; height:34px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent) 16%, transparent); font-size:1rem; }
.po2-sec-tit{ font-weight:900; font-size:.92rem; }
.po2-sec-ayuda{ font-size:.74rem; color:var(--text-dim); line-height:1.4; margin-top:2px; }
.po2-agregar{ display:flex; gap:8px; }
.po2-agregar input{ flex:1; min-width:0; }
.po2-agregar .btn{ flex:none; }
.po-v2 textarea{ width:100%; box-sizing:border-box; resize:vertical; min-height:80px; }
.po2-switch{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; border:1px solid var(--border); cursor:pointer; font-size:.84rem; font-weight:700; }
.po2-switch:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.po2-switch input{ width:18px; height:18px; accent-color:var(--accent); }
.po2-chips{ flex-direction:row !important; flex-wrap:wrap; gap:6px !important; }
.po2-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); cursor:pointer; font-size:.78rem; font-weight:700; }
.po2-chip:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); }
.po2-chip:not(:has(input:checked)) span{ text-decoration:line-through; opacity:.55; }
.po2-chip input{ accent-color:var(--accent); }
.po-v2 .lm-row{ border-radius:10px !important; }
.po2-pie{ gap:8px; }
.po2-pie .btn{ flex:1; justify-content:center; }
html .po2-agregar{ display:flex !important; flex-direction:row !important; }
html .po2-agregar input{ flex:1 1 auto !important; width:auto !important; min-width:0 !important; }
html .po2-agregar .btn{ flex:0 0 auto !important; width:auto !important; padding-left:14px !important; padding-right:14px !important; }

/* Nota interna como boton de la fila de QR / Barras / FP */
.nota-btn{ color:#7dd3fc; border-color:color-mix(in srgb, #38bdf8 45%, var(--border)); background:color-mix(in srgb, #38bdf8 10%, transparent); font-family:inherit; }
.nota-btn:hover{ border-color:#38bdf8; background:color-mix(in srgb, #38bdf8 20%, transparent); }
.nota-btn.nota-vacia{ opacity:.8; border-style:dashed; }
.nota-pop .nota-pop-texto{ max-height:50vh; overflow:auto; font-size:.86rem; line-height:1.5; padding:10px 12px; border-radius:10px; background:var(--surface-2); margin:6px 0 10px; text-align:left; }
.nota-pop .nota-pop-editar{ width:100%; justify-content:center; }
.nota-editor-txt{ width:100%; box-sizing:border-box; min-height:180px; resize:vertical; }
/* En el celular, la fila de etiquetas y botones va en cuadricula de 2 */
@media (max-width:640px){
  html #productBadgesRow{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  html #productBadgesRow > *{ width:100%; min-width:0; justify-content:center; box-sizing:border-box; margin:0 !important; }
  html #productBadgesRow > .product-gear-btn{ display:none; }
}
@media (max-width:640px){
  html #productBadgesRow > :first-child{ grid-column:1 / -1; }
  html #productBadgesRow > *{ align-self:stretch; height:auto !important; min-height:0 !important; }
}

/* Collage: foto principal grande + adjuntas a un lado */
html .foto-collage{ display:grid; grid-template-columns:minmax(0, 2.2fr) minmax(0, 1fr); gap:8px; width:clamp(240px, 42vw, 420px); max-width:100%; margin:0 auto; }
html .foto-collage > #mainPhotoBox{ width:100% !important; height:auto !important; aspect-ratio:1/1; }
html .foto-collage-lado{ display:grid; grid-template-rows:repeat(3, minmax(0, 1fr)); gap:8px; min-height:0; }
html .foto-collage.collage-1 .foto-collage-lado{ grid-template-rows:1fr; }
html .foto-collage.collage-2 .foto-collage-lado{ grid-template-rows:repeat(2, minmax(0, 1fr)); }
html .foto-collage-mini{ position:relative; padding:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; background:var(--surface-2); min-height:0; transition:transform .15s, border-color .15s; }
html .foto-collage-mini:hover{ transform:translateY(-2px); border-color:var(--accent); }
html .foto-collage-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
html .foto-collage-mas{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:900; color:#fff; background:rgba(0,0,0,.55); }
@media (max-width:640px){ html .foto-collage{ width:100%; } }
html .foto-collage{ align-items:stretch; }
html .foto-collage-lado{ height:100%; }
html .foto-collage-mini img{ position:absolute; inset:0; }

html .foto-collage > .sin-foto-esqueleto{ width:100% !important; height:auto !important; aspect-ratio:1/1; }
html .foto-collage-hueco{ display:flex; align-items:center; justify-content:center; cursor:default; color:color-mix(in srgb, var(--text) 30%, transparent);
  background:color-mix(in srgb, var(--text) 7%, transparent); border:2px dashed color-mix(in srgb, var(--text) 14%, transparent); }
html .foto-collage-hueco:hover{ transform:none; border-color:color-mix(in srgb, var(--text) 14%, transparent); }
html .foto-collage-hueco svg{ width:38%; height:auto; }
html .foto-collage-hueco::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 9%, transparent), transparent); animation:bnBrillo 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ html .foto-collage-hueco::after{ animation:none; } }

/* Collage: hueco que abre la camara de adjuntas y barrita de botones de adjuntas */
html button.foto-collage-hueco{ cursor:pointer; flex-direction:column; gap:4px; font:inherit; }
html button.foto-collage-hueco:hover{ border-color:var(--accent); color:var(--accent); }
.foto-collage-hueco-txt{ font-size:.66rem; font-weight:900; letter-spacing:.5px; text-transform:uppercase; }
/* Barra unica de fotos bajo el collage: icono y una palabra; la seccion de adjuntas de abajo se esconde
   y solo sale mientras se eligen cuales borrar. */
html .foto-collage > .collage-barra{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit, minmax(58px, 1fr)); gap:6px; margin:2px 0 0; }
html .foto-collage > .collage-barra > .btn{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:4px !important;
  width:100% !important; min-width:0; min-height:58px; margin:0 !important; padding:8px 4px !important; border-radius:12px !important;
  background:var(--surface-2) !important; border:1px solid var(--border) !important; color:var(--text) !important; box-shadow:none !important;
  clip-path:none !important; transform:none !important; font-size:.6rem !important; font-weight:800; letter-spacing:.4px; text-transform:uppercase; line-height:1.1; white-space:nowrap; }
html .foto-collage > .collage-barra > .btn::before, html .foto-collage > .collage-barra > .btn::after{ display:none !important; }
html .foto-collage > .collage-barra > .btn:hover:not(:disabled){ border-color:var(--accent) !important; color:var(--accent) !important; }
html .foto-collage > .collage-barra > .btn[hidden]{ display:none !important; }
html .foto-collage > .collage-barra .cb-ico{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; font-size:20px; line-height:1; }
html .foto-collage > .collage-barra .cb-ico img, html .foto-collage > .collage-barra .cb-ico svg{ width:26px !important; height:26px !important; margin:0 !important; vertical-align:middle; }
html .foto-collage > .collage-barra .cb-ico .pub-fondo-ico{ font-size:20px !important; width:auto; height:auto; background:none !important; }
html .foto-collage > .collage-barra .cb-mas{ position:absolute; right:-6px; bottom:-4px; width:15px; height:15px; border-radius:50%; background:var(--accent); color:#04211c;
  font-size:12px; font-weight:900; line-height:15px; text-align:center; }
html .foto-collage > .collage-barra .cb-txt{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.adj-seccion.adj-en-collage{ display:none !important; }
.adj-seccion.adj-en-collage:has(.attachments-row.eligiendo){ display:block !important; }

/* Ficha: categoria y botoncitos a la izquierda, botones de acciones a la derecha, uno debajo de otro */
html .ficha-lados{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; align-items:start; margin:12px 0; }
html .ficha-lados > .color-badges{ display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch !important; gap:8px !important; margin:0 !important; width:auto !important; }
html .ficha-lados > .color-badges > *{ width:100% !important; max-width:none !important; margin:0 !important; justify-content:center; }
html .ficha-lados > .color-badges .cat-chip{ white-space:normal; text-align:center; flex-wrap:wrap; }
html .ficha-lados > .product-actions-row{ display:flex !important; flex-direction:column !important; gap:8px !important; margin:0 !important; width:auto !important; }
html .ficha-lados > .product-actions-row > .btn:not([hidden]){ display:flex !important; width:100% !important; margin:0 !important; min-height:44px; padding:8px 10px !important; font-size:.72rem !important; }
html .ficha-lados > .product-actions-row > [hidden]{ display:none !important; }
html .ficha-lados > .product-actions-row > .btn{ word-break:normal !important; overflow-wrap:normal !important; hyphens:none; letter-spacing:.2px !important; }
html .ficha-lados > #productBadgesRow{ display:flex !important; flex-direction:column !important; }
html .ficha-lados > #productBadgesRow > .product-gear-btn{ display:none !important; }
html .ficha-lados > #productBadgesRow > *{ min-height:38px !important; }
/* Barra de fotos: siempre en una sola linea, los botones se encogen para caber (pedido de Manuel) */
html .foto-collage > .collage-barra{ grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); }
html .foto-collage > .collage-barra > .btn{ padding:8px 2px !important; }
html .foto-collage > .collage-barra .cb-txt{ font-size:clamp(.5rem, 2.4vw, .6rem); white-space:nowrap !important; letter-spacing:.2px; }

/* ---------- ✅ Surtidos terminados, rediseño (V2.221.0) ---------- */
.st2{ display:flex; flex-direction:column; gap:14px; }
.st2-hero{ position:relative; overflow:hidden; padding:18px; border-radius:var(--radius-lg); border:1px solid var(--border);
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), var(--surface); }
.st2-hero-fila{ display:flex; align-items:center; gap:14px; }
.st2-ico{ flex:none; width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 16%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); }
.st2-ico img{ width:34px; height:34px; }
.st2-hero-txt{ min-width:0; }
.st2-eyebrow{ font-size:.7rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.st2-titulo{ font-size:1.45rem; font-weight:900; line-height:1.15; }
.st2-sub{ font-size:.86rem; color:var(--text-dim); margin-top:2px; }
.st2-dia{ display:grid; grid-template-columns:42px minmax(0, 1fr) 42px auto; align-items:center; gap:8px; margin-top:16px; }
.st2-flecha{ all:unset; cursor:pointer; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:1.5rem; font-weight:900;
  background:var(--surface-2); border:1.5px solid var(--border); color:var(--text); transition:border-color .15s, transform .1s; }
.st2-flecha:hover:not([disabled]){ border-color:var(--accent); }
.st2-flecha:active:not([disabled]){ transform:scale(.94); }
.st2-flecha[disabled]{ opacity:.35; cursor:default; }
.st2-fecha{ all:unset; cursor:pointer; position:relative; min-width:0; min-height:42px; padding:0 14px; border-radius:12px; display:flex; align-items:center; gap:10px;
  font-weight:800; background:var(--surface-2); border:1.5px solid var(--border); color:var(--text); box-sizing:border-box; }
.st2-fecha:hover{ border-color:var(--accent); }
.st2-fecha input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; padding:0; pointer-events:none; }
.st2-hoy{ all:unset; cursor:pointer; min-height:42px; padding:0 16px; border-radius:12px; display:inline-flex; align-items:center; font-weight:900; font-size:.85rem;
  background:var(--accent); color:#04211c; }
.st2-hoy-activo{ cursor:default; background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); border:1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); }

.st2-stats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.st2-stat{ all:unset; cursor:pointer; box-sizing:border-box; padding:12px 14px; border-radius:var(--radius-lg); border:1.5px solid var(--border); background:var(--surface);
  display:flex; flex-direction:column; gap:2px; transition:border-color .15s, background .15s, transform .1s; --sc:var(--accent); }
.st2-stat b{ font-size:1.6rem; font-weight:900; line-height:1.1; color:var(--sc); }
.st2-stat span{ font-size:.78rem; font-weight:700; color:var(--text-dim); }
.st2-stat:hover{ border-color:var(--sc); }
.st2-stat:active{ transform:scale(.98); }
.st2-stat.activo{ border-color:var(--sc); background:color-mix(in srgb, var(--sc) 14%, var(--surface)); }
.st2-stat-ok{ --sc:var(--accent); } .st2-stat-falta{ --sc:var(--accent2); } .st2-stat-coment{ --sc:var(--accent4); }
.st2-stat-todos{ --sc:var(--text); }
.st2-cargando{ cursor:default; opacity:.6; }

.st2-herr{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.st2-buscar{ flex:1 1 260px; display:flex; align-items:center; gap:8px; padding:0 14px; min-height:44px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface); }
.st2-buscar:focus-within{ border-color:var(--accent); }
.st2-buscar input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:.92rem; }
.st2-tip{ display:flex; gap:6px; flex-wrap:wrap; font-size:.75rem; font-weight:700; color:var(--text-dim); }
.st2-tip span{ padding:5px 9px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); }

.st2-lista{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:12px; align-items:start; }
.st2-card{ --cc:var(--text-dim); position:relative; display:flex; flex-direction:column; gap:12px; padding:14px 16px 16px; border-radius:var(--radius-lg);
  border:1px solid var(--border); background:var(--surface); overflow:hidden; animation:st2Entra .25s ease both; }
.st2-card::before{ content:''; position:absolute; inset:0 auto 0 0; width:5px; background:var(--cc); }
.st2-ok{ --cc:var(--accent); } .st2-falta{ --cc:var(--accent2); }
@keyframes st2Entra{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.st2-card-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.st2-hora{ font-weight:800; font-size:.85rem; color:var(--text-dim); }
.st2-badge{ font-size:.75rem; font-weight:800; padding:4px 10px; border-radius:999px; color:var(--cc);
  background:color-mix(in srgb, var(--cc) 14%, transparent); border:1px solid color-mix(in srgb, var(--cc) 40%, transparent); }
.st2-docs{ display:grid; grid-template-columns:1fr; gap:8px; }
.st2-doc{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); transition:border-color .15s, background .3s; }
.st2-doc.copied{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }
.st2-doc-lbl{ font-size:.66rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }
.st2-doc-fila{ display:flex; align-items:center; gap:8px; min-width:0; }
.st2 .st2-doc-btn.moves-link{ all:unset; cursor:pointer; flex:1; min-width:0; font-family:var(--font-code); font-weight:900; font-size:1.15rem; color:var(--text);
  overflow-wrap:anywhere; border-radius:8px; padding:2px 4px; margin:-2px -4px; }
.st2-doc-transferencia .st2-doc-btn.moves-link{ font-size:.98rem; }
.st2 .st2-doc-btn.moves-link:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.st2 .st2-doc-btn.moves-link:focus-visible{ outline:2px solid var(--accent); }
.st2 .st2-doc-btn.copied{ color:var(--accent); }
.st2-copiar{ all:unset; cursor:pointer; flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:.95rem;
  background:var(--surface); border:1px solid var(--border); opacity:.8; transition:opacity .15s, border-color .15s; }
.st2-copiar:hover{ opacity:1; border-color:var(--accent); }
.st2-meta{ display:flex; align-items:center; gap:10px; min-width:0; }
.st2-avatar{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:.85rem;
  background:color-mix(in srgb, var(--cc) 22%, var(--surface-2)); color:var(--text); border:1.5px solid color-mix(in srgb, var(--cc) 45%, var(--border)); }
.st2-meta-txt{ min-width:0; display:flex; flex-direction:column; gap:1px; font-size:.82rem; color:var(--text-dim); }
.st2-meta-txt b{ color:var(--text); font-size:.92rem; }
.st2-meta-txt span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st2-coment{ font-size:.84rem; padding:9px 12px; border-radius:10px; background:color-mix(in srgb, var(--accent4) 13%, transparent); border:1px dashed color-mix(in srgb, var(--accent4) 45%, transparent); overflow-wrap:anywhere; }
.st2-ver{ all:unset; cursor:pointer; box-sizing:border-box; width:100%; min-height:42px; padding:0 14px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:8px;
  font-weight:800; font-size:.88rem; background:var(--surface-2); border:1.5px solid var(--border); transition:border-color .15s; }
.st2-ver small{ font-weight:700; color:var(--text-dim); }
.st2-ver:hover{ border-color:var(--cc); }
.st2-card .st-det{ display:none; }
.st2-vacio{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:36px 16px; text-align:center; color:var(--text-dim); font-weight:700;
  border:1.5px dashed var(--border); border-radius:var(--radius-lg); }
.st2-vacio-ico{ font-size:2rem; }
.st2-spin{ width:26px; height:26px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation:st2Gira .8s linear infinite; }
@keyframes st2Gira{ to{ transform:rotate(360deg); } }
@media (max-width:700px){
  .st2-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .st2-lista{ grid-template-columns:1fr; }
  .st2-titulo{ font-size:1.25rem; }
  .st2-tip{ display:none; }
  .st2-dia{ grid-template-columns:42px minmax(0, 1fr) 42px; }
  .st2-hoy{ grid-column:1 / -1; justify-content:center; }
  .st2-fecha{ font-size:.9rem; padding:0 10px; }
}
@media (prefers-reduced-motion:reduce){ .st2-card{ animation:none; } }

/* ---------- ¿Foto principal o adjuntas? antes de Foto/Archivo (V2.222.0) ---------- */
.df-modal{ width:min(440px, 100%); }
.df-modal .lm2-cab{ position:relative; }
.df-cerrar{ all:unset; cursor:pointer; margin-left:auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:900;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); }
.df-cerrar:hover{ color:var(--text); border-color:var(--accent); }
.df-opciones{ display:grid; gap:10px; }
.df-op{ all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px;
  background:var(--surface-2); border:1.5px solid var(--border); transition:border-color .15s, background .15s, transform .1s; --dc:var(--accent); }
.df-adjuntas{ --dc:var(--accent4); }
.df-op:hover, .df-op:focus-visible{ border-color:var(--dc); background:color-mix(in srgb, var(--dc) 12%, var(--surface-2)); }
.df-op:active{ transform:scale(.98); }
.df-op-ico{ flex:none; width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-size:1.5rem;
  background:color-mix(in srgb, var(--dc) 18%, transparent); border:1px solid color-mix(in srgb, var(--dc) 45%, transparent); }
.df-op-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.df-op-txt b{ font-size:1rem; font-weight:900; color:var(--text); }
.df-op-txt small{ font-size:.8rem; color:var(--text-dim); line-height:1.35; }

/* Bandeja de adjuntas vacía: se abre primero y desde ahí se toman las fotos (V2.223.0). */
.bandeja-vacia{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:120px; padding:16px;
  border:2px dashed var(--border); border-radius:14px; color:var(--text-dim); font-weight:700; font-size:.85rem; }
.bandeja-vacia span{ font-size:2rem; opacity:.7; }
.bandeja-mas-grande .btn{ min-height:52px; font-size:.95rem; font-weight:800; justify-content:center; }
.bandeja-modal .btn[disabled]{ opacity:.45; cursor:default; }

/* ---------- ¿Seguro que reemplazas la foto principal? (V2.224.0) ---------- */
.rp-modal{ width:min(480px, 100%); }
.rp-ico{ background:color-mix(in srgb, #f59e0b 22%, transparent) !important; }
.rp-comparar{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:10px; margin-bottom:12px; }
.rp-foto{ margin:0; display:flex; flex-direction:column; gap:6px; }
.rp-foto figcaption{ font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); text-align:center; }
.rp-foto img, .rp-sin{ width:100%; aspect-ratio:1; object-fit:contain; border-radius:12px; background:#fff; border:2px solid var(--border); display:grid; place-items:center; font-size:2rem; box-sizing:border-box; }
.rp-actual img{ border-color:var(--accent); }
.rp-nueva img{ border-color:color-mix(in srgb, #f59e0b 70%, var(--border)); }
.rp-flecha{ font-size:1.4rem; font-weight:900; color:var(--text-dim); }
.rp-aviso b{ color:#fbbf24; }
.rp-pie{ display:grid !important; grid-template-columns:1fr; gap:8px; }
.rp-pie .btn{ justify-content:center; min-height:46px; font-weight:800; }
.rp-reemplazar{ background:color-mix(in srgb, #ef4444 16%, var(--surface-2)) !important; border-color:color-mix(in srgb, #ef4444 55%, var(--border)) !important; color:var(--text) !important; }
html .foto-collage > .collage-barra{ grid-column:1 / -1; display:flex !important; flex-wrap:wrap; gap:6px !important; justify-content:center; margin:0 !important; }
html .foto-collage > .collage-barra .btn{ width:auto !important; flex:1 1 0; min-width:0; padding:8px 6px !important; font-size:.66rem !important; letter-spacing:.3px; gap:4px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html .foto-collage > .collage-barra .btn .act-ico, html .foto-collage > .collage-barra .btn img, html .foto-collage > .collage-barra .btn svg{ width:16px !important; height:16px !important; }
html .foto-collage > .collage-barra .btn{ font-size:0 !important; padding:9px 6px !important; justify-content:center !important; }
html .foto-collage > .collage-barra .btn .act-ico, html .foto-collage > .collage-barra .btn img, html .foto-collage > .collage-barra .btn svg{ width:22px !important; height:22px !important; }
html .foto-collage > .collage-barra .btn .pub-fondo-ico{ font-size:15px !important; width:24px; height:24px; }

/* ---------- Mis ventas (-msv) ---------- */
.mv-venta{ border:1px solid var(--border); border-radius:18px; padding:16px; margin-top:14px; background:linear-gradient(150deg, color-mix(in srgb, var(--accent4) 8%, var(--surface)), var(--surface) 60%); }
.mv-cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.mv-folio{ font-size:.72rem; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); }
.mv-cliente{ font-size:1.12rem; font-weight:900; margin-top:2px; }
.mv-estado{ font-size:.76rem; font-weight:800; padding:6px 12px; border-radius:999px; color:#22c55e; background:color-mix(in srgb, #22c55e 14%, transparent); border:1px solid color-mix(in srgb, #22c55e 40%, transparent); }
.mv-datos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:8px; margin-bottom:12px; }
.mv-dato{ padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); display:flex; flex-direction:column; gap:2px; }
.mv-dato span{ font-size:.68rem; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); }
.mv-dato b{ font-size:.86rem; }
.mv-dato.mv-recoge{ border-color:color-mix(in srgb, #f59e0b 45%, var(--border)); background:color-mix(in srgb, #f59e0b 10%, var(--surface-2)); }
.mv-dato.mv-recoge b{ color:#fbbf24; }
.mv-totales{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-top:12px; font-size:.8rem; color:var(--text-dim); }
.mv-cuentas{ display:flex; flex-direction:column; gap:4px; min-width:220px; }
.mv-cuentas > div{ display:flex; justify-content:space-between; gap:20px; }
.mv-cuentas b{ color:var(--text); }
.mv-total{ border-top:1px solid var(--border); padding-top:6px; font-size:1.05rem; }
.mv-total b{ color:var(--accent4); font-size:1.2rem; }
html #resultPanel:has(.mv-cabecera) > .fav-suelto{ display:none !important; }

/* ---------- Mis ventas, rediseño (mv2) ---------- */
.mv2-tablero{ border-radius:22px; padding:18px; border:1px solid color-mix(in srgb, var(--accent4) 35%, var(--border));
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent4) 22%, var(--surface)) 0%, var(--surface) 60%); }
.mv2-tab-cab{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.mv2-tab-ico{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; background:color-mix(in srgb, var(--accent4) 25%, transparent); }
.mv2-tab-cab h2{ margin:0; font-size:1.25rem; font-weight:900; }
.mv2-tab-cab small{ color:var(--text-dim); font-size:.76rem; }
.mv2-tab-datos{ display:grid; grid-template-columns:2fr repeat(3, 1fr); gap:10px; }
@media (max-width:640px){ .mv2-tab-datos{ grid-template-columns:repeat(3, 1fr); } .mv2-tab-grande{ grid-column:1 / -1; } }
.mv2-tab-dato{ padding:12px 14px; border-radius:14px; background:color-mix(in srgb, var(--surface-2) 85%, transparent); border:1px solid var(--border); display:flex; flex-direction:column; gap:2px; }
.mv2-tab-dato span{ font-size:.66rem; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); }
.mv2-tab-dato b{ font-size:1.25rem; font-weight:900; }
.mv2-tab-grande b{ font-size:1.9rem; color:var(--accent4); }
.mv2-venta{ margin-top:16px; border-radius:20px; padding:18px; border:1px solid var(--border); background:var(--surface); }
.mv2-cab{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--border); }
.mv2-avatar{ width:52px; height:52px; flex:none; border-radius:16px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.1rem; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent3)); box-shadow:0 8px 18px -8px var(--accent); }
.mv2-cab-txt{ flex:1; min-width:200px; display:flex; flex-direction:column; gap:2px; }
.mv2-folio{ font-size:.68rem; font-weight:900; letter-spacing:1.3px; text-transform:uppercase; color:var(--text-dim); }
.mv2-cliente{ margin:0; font-size:1.08rem; font-weight:900; line-height:1.25; }
.mv2-vendio{ font-size:.78rem; color:var(--text-dim); }
.mv2-vendio b{ color:var(--text); }
.mv2-cab-total{ display:flex; flex-direction:column; align-items:flex-end; }
.mv2-cab-total span{ font-size:.66rem; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); }
.mv2-cab-total b{ font-size:1.5rem; font-weight:900; color:var(--accent4); }
.mv2-tiempo{ list-style:none; margin:16px 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
@media (max-width:640px){ .mv2-tiempo{ grid-template-columns:1fr; } }
.mv2-tiempo li{ display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); }
.mv2-tiempo li > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mv2-tiempo li b{ font-size:.86rem; }
.mv2-tiempo li small{ font-size:.74rem; color:var(--text-dim); }
.mv2-punto{ width:28px; height:28px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.8rem; }
.mv2-tiempo li.hecho .mv2-punto{ background:color-mix(in srgb, #22c55e 22%, transparent); color:#22c55e; border:1px solid color-mix(in srgb, #22c55e 50%, transparent); }
.mv2-tiempo li.siguiente{ border-color:color-mix(in srgb, #f59e0b 50%, var(--border)); background:color-mix(in srgb, #f59e0b 10%, var(--surface-2)); }
.mv2-tiempo li.siguiente .mv2-punto{ background:color-mix(in srgb, #f59e0b 25%, transparent); animation:mv2Late 1.6s ease-in-out infinite; }
.mv2-tiempo li.siguiente b{ color:#fbbf24; }
@keyframes mv2Late{ 50%{ box-shadow:0 0 0 6px color-mix(in srgb, #f59e0b 20%, transparent); } }
@media (prefers-reduced-motion: reduce){ html:not(.alba-anim-siempre) .mv2-tiempo li.siguiente .mv2-punto{ animation:none; } }
.mv2-cuenta{ margin-top:4px; font-size:.72rem; font-weight:900; padding:3px 8px; border-radius:999px; width:max-content; background:#f59e0b; color:#1c1203; }
.mv2-cuenta.mv2-ahora{ background:#22c55e; color:#04211c; }
.mv2-cuenta.mv2-paso{ background:var(--surface); color:var(--text-dim); border:1px solid var(--border); }
.mv2-sec-tit{ font-size:.7rem; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); margin:4px 0 8px; }
.mv2-lineas{ display:flex; flex-direction:column; gap:8px; }
.mv2-linea{ display:grid; grid-template-columns:62px minmax(0, 1fr) auto; gap:12px; align-items:center; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:var(--surface-2); transition:border-color .15s, transform .15s; }
.mv2-linea:hover{ border-color:var(--accent); transform:translateY(-1px); }
.mv2-linea-cant{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:52px; border-radius:12px; background:color-mix(in srgb, var(--accent) 14%, transparent); }
.mv2-linea-cant b{ font-size:1.2rem; font-weight:900; color:var(--accent); line-height:1; }
.mv2-linea-cant small{ font-size:.62rem; color:var(--text-dim); font-weight:800; }
.mv2-linea-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.mv2-codigo{ font-family:ui-monospace,monospace; font-size:.78rem; font-weight:800; color:var(--accent); cursor:pointer; overflow-wrap:anywhere; }
.mv2-codigo:hover{ text-decoration:underline; }
.mv2-nombre{ font-size:.8rem; color:var(--text); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mv2-barra{ height:5px; border-radius:3px; background:color-mix(in srgb, var(--text) 10%, transparent); overflow:hidden; margin-top:2px; }
.mv2-barra i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, var(--accent), var(--accent4)); }
.mv2-linea-dinero{ display:flex; flex-direction:column; align-items:flex-end; }
.mv2-linea-dinero b{ font-size:.98rem; font-weight:900; }
.mv2-linea-dinero small{ font-size:.7rem; color:var(--text-dim); }
@media (max-width:520px){ .mv2-linea{ grid-template-columns:52px minmax(0, 1fr); } .mv2-linea-dinero{ grid-column:2; align-items:flex-start; flex-direction:row; gap:8px; } }
.mv2-cuentas{ margin:14px 0 0 auto; max-width:300px; display:flex; flex-direction:column; gap:6px; padding:12px 14px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); }
.mv2-cuentas > div{ display:flex; justify-content:space-between; gap:20px; font-size:.84rem; color:var(--text-dim); }
.mv2-cuentas b{ color:var(--text); }
.mv2-total{ border-top:1px solid var(--border); padding-top:8px; font-size:1rem !important; color:var(--text) !important; }
.mv2-total b{ color:var(--accent4) !important; font-size:1.3rem; }

/* Aviso de ubicacion puesta a mano, rediseño */
html .ubic-mano-aviso.uma2{ display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:16px; text-align:left;
  border:1px solid color-mix(in srgb, #f59e0b 50%, var(--border));
  background:linear-gradient(135deg, color-mix(in srgb, #f59e0b 16%, var(--surface)) 0%, var(--surface) 75%); position:relative; overflow:hidden; }
html .ubic-mano-aviso.uma2::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:repeating-linear-gradient(-45deg, #f59e0b 0 6px, #1c1203 6px 12px); }
.uma2-cab{ display:flex; align-items:center; gap:10px; }
.uma2-ico{ width:38px; height:38px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; background:color-mix(in srgb, #f59e0b 24%, transparent); }
.uma2-tit{ display:flex; flex-direction:column; line-height:1.25; }
.uma2-tit b{ font-size:.92rem; color:#fbbf24; }
.uma2-tit small{ font-size:.74rem; color:var(--text-dim); }
.uma2-ruta{ display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px dashed color-mix(in srgb, #f59e0b 45%, var(--border)); }
.uma2-et{ font-size:.64rem; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); }
.uma2-ubic{ font-size:1.05rem; font-weight:900; overflow-wrap:anywhere; white-space:pre-wrap; }
.uma2-pie{ display:flex; flex-wrap:wrap; gap:6px; }
.uma2-chip{ font-size:.74rem; font-weight:800; padding:4px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); }
.uma2-chip.uma2-paso{ background:#f59e0b; border-color:#f59e0b; color:#1c1203; }

/* =========================================================================
   Tema personal PIXEL CRAFT (inspirado en Minecraft, ver 'pixelcraft' en temas.js).
   Cielo azul con nubes cuadradas, piso de pasto y tierra, tarjetas de piedra con bisel
   pixelado, botones de piedra y letras de bloque. Sin graficos del juego: todo es CSS.
   ========================================================================= */
html[data-tema="pixelcraft"]{
  --pc-pasto:#5fa83a; --pc-pasto-osc:#3f7a26; --pc-tierra:#8b5a2b; --pc-tierra-osc:#5e3b1a;
  --pc-piedra:#7d7d7d; --pc-piedra-clara:#a6a6a6; --pc-piedra-osc:#4a4a4a; --pc-cielo:#79b6ff;
  --pc-oro:#f5c542; --pc-diamante:#4fe3e0;
  --text:#ffffff; --text-dim:#e4e4e4;
}
html[data-tema="pixelcraft"] body{
  background:
    linear-gradient(#5d9df7 0%, #8cc4ff 55%, #b9dcff 100%) !important;
  image-rendering:pixelated;
}
/* Nubes cuadradas que pasan despacio */
html[data-tema="pixelcraft"] body::before{
  content:''; position:fixed; left:0; right:0; top:4vh; height:22vh; z-index:0; pointer-events:none; opacity:.9;
  background:
    linear-gradient(#fff, #fff) 10% 20% / 120px 28px no-repeat,
    linear-gradient(#fff, #fff) calc(10% + 28px) calc(20% - 28px) / 64px 28px no-repeat,
    linear-gradient(#fff, #fff) 55% 60% / 160px 32px no-repeat,
    linear-gradient(#fff, #fff) calc(55% + 32px) calc(60% - 32px) / 90px 32px no-repeat,
    linear-gradient(#fff, #fff) 88% 25% / 100px 24px no-repeat;
  animation:pcNubes 90s linear infinite;
}
@keyframes pcNubes{ from{ transform:translateX(-12%); } to{ transform:translateX(12%); } }
/* Piso: franja de pasto arriba y tierra con piedritas abajo */
html[data-tema="pixelcraft"] body::after{
  content:''; position:fixed; left:0; right:0; bottom:0; height:12vh; z-index:0; pointer-events:none;
  background:
    linear-gradient(var(--pc-pasto) 0 14px, var(--pc-pasto-osc) 14px 20px, transparent 20px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(0,0,0,.12) 24px 26px),
    radial-gradient(circle at 20% 60%, #6d4421 0 3px, transparent 4px) 0 0 / 48px 40px,
    radial-gradient(circle at 70% 30%, #a06a37 0 3px, transparent 4px) 0 0 / 56px 44px,
    var(--pc-tierra);
  box-shadow:0 -4px 0 rgba(0,0,0,.25);
}
html[data-tema="pixelcraft"] .wrap{ position:relative; z-index:1; }

/* Tarjetas: bloque de piedra con bisel claro arriba-izquierda y oscuro abajo-derecha */
html[data-tema="pixelcraft"] :is(.glass, .home-tile, .home-tema, .total-piezas-card, .ml-modal, .sg-card){
  border-radius:0 !important; border:3px solid #1e1e1e !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.06) 0 2px, transparent 3px) 0 0 / 16px 16px,
    radial-gradient(circle at 70% 70%, rgba(0,0,0,.12) 0 2px, transparent 3px) 0 0 / 20px 20px,
    #5a5a5a !important;
  box-shadow: inset 4px 4px 0 var(--pc-piedra-clara), inset -4px -4px 0 var(--pc-piedra-osc), 0 6px 0 rgba(0,0,0,.35) !important;
}
html[data-tema="pixelcraft"] .home-tile:hover{
  box-shadow: inset 4px 4px 0 #c9c9c9, inset -4px -4px 0 var(--pc-piedra-osc), 0 0 0 3px var(--pc-oro) !important;
}
/* Iconos: cuadro de bloque */
html[data-tema="pixelcraft"] :is(.home-tile-icon, .drawer-item-icon, .pop-ico, .total-piezas-icon, .odoo-list-icon){
  border-radius:0 !important; box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.35) !important;
}
/* Letras: de bloque, con sombra dura */
html[data-tema="pixelcraft"] :is(h1, h2, h3, .odoo-list-head-text h2, .home-tema-nombre, .mobile-drawer-title, .section-title, .rcf-titulo, .lm2-cab-tit){
  font-family: ui-monospace, "Courier New", monospace !important; letter-spacing:1px !important; font-weight:900 !important;
  text-shadow:3px 3px 0 #3a3a3a !important; text-transform:none;
}
/* Botones: de piedra; el principal de pasto */
html[data-tema="pixelcraft"] .btn{
  border-radius:0 !important; border:3px solid #1e1e1e !important; text-transform:none; letter-spacing:.5px;
  font-family: ui-monospace, "Courier New", monospace !important; font-weight:900 !important; text-shadow:2px 2px 0 #3a3a3a;
  background:#7d7d7d !important; color:#fff !important;
  box-shadow: inset 3px 3px 0 #b5b5b5, inset -3px -3px 0 #505050 !important;
}
html[data-tema="pixelcraft"] .btn:hover:not(:disabled){ background:#8f8fd6 !important; box-shadow: inset 3px 3px 0 #c2c2ff, inset -3px -3px 0 #5a5aa0 !important; }
html[data-tema="pixelcraft"] .btn:active:not(:disabled){ box-shadow: inset -3px -3px 0 #b5b5b5, inset 3px 3px 0 #505050 !important; }
html[data-tema="pixelcraft"] .btn-primary{ background:var(--pc-pasto) !important; box-shadow: inset 3px 3px 0 #8fd86a, inset -3px -3px 0 var(--pc-pasto-osc) !important; }
/* Campos: como la barra de texto del juego */
html[data-tema="pixelcraft"] :is(input, select, textarea){
  border-radius:0 !important; background:#000 !important; color:#fff !important; border:3px solid #a0a0a0 !important;
  font-family: ui-monospace, "Courier New", monospace !important;
}
html[data-tema="pixelcraft"] :is(input, select, textarea):focus{ border-color:#fff !important; box-shadow:none !important; }
html[data-tema="pixelcraft"] .alba-banner .main-search #searchBtn{ border-radius:0 !important; background:var(--pc-pasto) !important; border:3px solid #1e1e1e !important; }
/* Codigo de la ficha: letrero de madera */
html[data-tema="pixelcraft"] .code-pill-main{
  border-radius:0 !important; color:#2a1a08 !important; text-shadow:none !important; font-family: ui-monospace, "Courier New", monospace !important;
  background:repeating-linear-gradient(0deg, #c79a5b 0 10px, #b5884c 10px 12px) !important; border:3px solid #5e3b1a !important;
  box-shadow: inset 3px 3px 0 #e0b877, inset -3px -3px 0 #8b5a2b !important;
}
/* Ubicaciones: con borde de bloque */
html[data-tema="pixelcraft"] .loc-pill{ border-radius:0 !important; box-shadow: inset 3px 3px 0 rgba(255,255,255,.3), inset -3px -3px 0 rgba(0,0,0,.35) !important; }
html[data-tema="pixelcraft"] .ficha-etq, html[data-tema="pixelcraft"] .qr-btn, html[data-tema="pixelcraft"] .fp-btn, html[data-tema="pixelcraft"] .cat-chip, html[data-tema="pixelcraft"] .color-badge{ border-radius:0 !important; }
/* Dock: barra de inventario de 9 casillas */
html[data-tema="pixelcraft"] .alba-dock{ border-radius:0 !important; background:#8b8b8b !important; border:3px solid #1e1e1e !important;
  box-shadow: inset 3px 3px 0 #c6c6c6, inset -3px -3px 0 #555 !important; }
html[data-tema="pixelcraft"] .dock-item{ border-radius:0 !important; background:#8b8b8b !important; border:2px solid #373737 !important;
  box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff !important; }
html[data-tema="pixelcraft"] .dock-item:hover{ border-color:#fff !important; }
html[data-tema="pixelcraft"] .mobile-drawer .drawer-item{ border-radius:0 !important; }
/* Esqueletos: bloques de piedra */
html[data-tema="pixelcraft"] .bn{ border-radius:0 !important; }
/* Barra de desplazamiento de pasto */
html[data-tema="pixelcraft"] ::-webkit-scrollbar-thumb{ border-radius:0 !important; background:var(--pc-pasto) !important; border:2px solid #1e1e1e; }
html[data-tema="pixelcraft"] ::selection{ background:var(--pc-diamante); color:#000; }
/* La ficha no se recorta (el historial va fuera del recuadro) */
html[data-tema="pixelcraft"] .glass.result{ clip-path:none !important; }
@media (prefers-reduced-motion: reduce){ html[data-tema="pixelcraft"]:not(.alba-anim-siempre) body::before{ animation:none !important; } }

/* ---------- -CAT rediseño (cat2) ---------- */
.cat2-tablero{ border-radius:22px; padding:18px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 20%, var(--surface)) 0%, var(--surface) 60%); }
.cat2-tab-cab{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cat2-tab-ico{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; background:color-mix(in srgb, var(--accent) 24%, transparent); }
.cat2-tab-cab h2{ margin:0; font-size:1.2rem; font-weight:900; }
.cat2-tab-cab small{ font-size:.76rem; color:var(--text-dim); }
.cat2-tab-datos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.cat2-tab-datos > div{ padding:12px 14px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); display:flex; flex-direction:column; }
.cat2-tab-datos b{ font-size:1.5rem; font-weight:900; color:var(--accent); }
.cat2-tab-datos span{ font-size:.68rem; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); }
.cat2-barra-buscar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0 6px; position:sticky; top:0; z-index:2; padding:8px 0; background:var(--surface); }
.cat2-barra-buscar input{ flex:1 1 220px; min-width:0; }
.cat2-orden{ display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px; }
.cat2-orden button{ border:0; background:none; color:var(--text-dim); font:inherit; font-size:.78rem; font-weight:800; padding:7px 12px; border-radius:999px; cursor:pointer; }
.cat2-orden button.activo{ background:var(--accent); color:#fff; }
.cat2-grupo{ margin-top:14px; }
.cat2-grupo-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:0 4px 8px; border-bottom:1px solid var(--border); margin-bottom:10px; }
.cat2-grupo-cab span{ font-size:.8rem; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; }
.cat2-grupo-cab small{ font-size:.74rem; color:var(--text-dim); }
.cat2-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; }
@media (max-width:640px){ .cat2-grid{ grid-template-columns:1fr; } .cat2-tab-datos b{ font-size:1.2rem; } }
.cat2-card{ display:grid; grid-template-columns:44px minmax(0, 1fr) auto; gap:12px; align-items:center; padding:12px; border-radius:16px; cursor:pointer; text-align:left;
  font:inherit; color:var(--text); border:1px solid var(--border); background:var(--surface-2); transition:transform .15s, border-color .15s, box-shadow .15s; }
.cat2-card:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:0 10px 22px -14px var(--accent); }
.cat2-card.vacia{ opacity:.55; }
.cat2-ico{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background:color-mix(in srgb, var(--accent) 14%, transparent); }
.cat2-ico img{ width:30px; height:30px; object-fit:contain; }
.cat2-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cat2-txt b{ font-size:.9rem; font-weight:900; overflow-wrap:anywhere; }
.cat2-txt small{ font-size:.72rem; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat2-barra{ height:5px; border-radius:3px; background:color-mix(in srgb, var(--text) 10%, transparent); overflow:hidden; margin-top:3px; }
.cat2-barra i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, var(--accent), var(--accent2)); }
.cat2-n{ display:flex; flex-direction:column; align-items:flex-end; }
.cat2-n b{ font-size:1.15rem; font-weight:900; }
.cat2-n small{ font-size:.64rem; color:var(--text-dim); }

details.cat2-grupo > summary{ cursor:pointer; list-style:none; }
details.cat2-grupo > summary::-webkit-details-marker{ display:none; }
details.cat2-grupo > summary span::before{ content:'▸ '; color:var(--accent); }
details.cat2-grupo[open] > summary span::before{ content:'▾ '; }
html #resultPanel:has(.cat2-tablero) > .fav-suelto{ display:none !important; }
/* Pixel Craft: cursor de pico de diamante (de cursor.cc, guardado en iconos/). En los campos de texto se deja el de escribir. */
html[data-tema="pixelcraft"], html[data-tema="pixelcraft"] *{ cursor:url("iconos/cursor-pixelcraft.png") 8 14, auto !important; }
html[data-tema="pixelcraft"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, [contenteditable="true"]){ cursor:text !important; }
/* -CAT: iconos de morphicons */
.cat2-ico.cat2-ico-morph{ color:var(--mi-c, var(--accent)); background:color-mix(in srgb, var(--mi-c, var(--accent)) 16%, transparent); }
.cat2-ico.cat2-ico-morph svg{ width:24px; height:24px; }

/* ---------- -FAM: todas las familias ---------- */
html #resultPanel:has(.fam2-tablero) > .fav-suelto{ display:none !important; }
.fam2-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; margin-top:12px; }
@media (max-width:640px){ .fam2-grid{ grid-template-columns:1fr; } }
.fam2-card{ display:flex; gap:12px; align-items:center; padding:12px; border-radius:16px; cursor:pointer; text-align:left; font:inherit; color:var(--text);
  border:1px solid var(--border); background:var(--surface-2); transition:transform .15s, border-color .15s, box-shadow .15s; }
.fam2-card:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:0 10px 22px -14px var(--accent); }
.fam2-cod{ flex:none; width:66px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:ui-monospace,monospace; font-weight:900; font-size:1.05rem; letter-spacing:1px;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.fam2-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.fam2-ej{ font-size:.78rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fam2-barra{ height:5px; border-radius:3px; background:color-mix(in srgb, var(--text) 10%, transparent); overflow:hidden; }
.fam2-barra i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, var(--accent), var(--accent2)); }
.fam2-meta{ font-size:.72rem; color:var(--text-dim); }
.fam2-meta b{ color:var(--text); }

/* -CAT / -FAM: barra de busqueda rediseñada */
html .cat2-barra-buscar{ position:sticky; top:8px; z-index:3; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 8px; padding:8px; border-radius:18px;
  background:color-mix(in srgb, var(--surface) 88%, transparent); border:1px solid var(--border); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 10px 24px -16px rgba(0,0,0,.6); }
html .cat2-barra-buscar input[type="search"]{ flex:1 1 240px; min-width:0; height:44px; box-sizing:border-box; padding:0 14px 0 42px !important; border-radius:12px !important;
  font:inherit; font-size:.92rem; color:var(--text) !important; border:1px solid var(--border) !important; box-shadow:none !important;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center / 18px !important; }
html .cat2-barra-buscar input[type="search"]::placeholder{ color:var(--text-dim); }
html .cat2-barra-buscar input[type="search"]:focus{ outline:none; border-color:var(--accent) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent) !important; }
html .cat2-orden{ height:44px; box-sizing:border-box; align-items:center; border-radius:12px; padding:4px; background:var(--surface-2); }
html .cat2-orden button{ height:100%; border-radius:9px; padding:0 14px; transition:background .15s, color .15s; }
html .cat2-orden button:hover:not(.activo){ color:var(--text); background:color-mix(in srgb, var(--text) 8%, transparent); }
html .cat2-orden button.activo{ background:var(--accent); color:#fff; box-shadow:0 4px 12px -6px var(--accent); }
@media (max-width:640px){ html .cat2-orden{ flex:1 1 100%; } html .cat2-orden button{ flex:1; } }
html .cat2-grupo-cab{ border-bottom:0; padding:6px 4px; }
html .cat2-grupo-cab span{ display:inline-flex; align-items:center; gap:8px; }
html section.cat2-grupo > .cat2-grupo-cab span::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); }
/* Una sola lupa (morphicons) en el buscador de -CAT / -FAM */
html .cat2-barra-buscar{ position:sticky; }
html .cat2-barra-buscar input[type="search"]{ background-image:none !important; }
html .cat2-barra-buscar .cat2-lupa{ position:absolute; left:22px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-dim); pointer-events:none; z-index:1; }
html .cat2-barra-buscar:focus-within .cat2-lupa{ color:var(--accent); }
html .cat2-barra-buscar .cat2-lupa svg{ width:18px; height:18px; }

/* -FAM: barra de letras y separacion por letra */
.fam2-abc{ display:flex; flex-wrap:wrap; gap:4px; margin:12px 0 4px; }
.fam2-abc-l{ min-width:32px; height:32px; padding:0 6px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font:inherit; font-weight:900; font-size:.8rem; cursor:pointer; transition:background .15s, border-color .15s, transform .15s; }
.fam2-abc-l:hover:not(:disabled){ border-color:var(--accent); transform:translateY(-1px); }
.fam2-abc-l.activo{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 4px 12px -6px var(--accent); }
.fam2-abc-l:disabled{ opacity:.28; cursor:default; }
.fam2-letra{ margin-top:14px; }
.fam2-letra-cab{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.fam2-letra-cab span{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.3rem; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent3)); box-shadow:0 6px 14px -8px var(--accent); }
.fam2-letra-cab small{ font-size:.76rem; color:var(--text-dim); font-weight:700; }
.fam2-letra-cab::after{ content:''; flex:1; height:1px; background:var(--border); }
.fam2-letra .fam2-grid{ margin-top:0; }

/* Comparar: el arco de "Antes de A.L.B.A." en un color que se distinga (ambar, punteado y por dentro) */
html .fa-anillo .fa-antes:not(.fa-solo){ stroke:#fbbf24 !important; stroke-width:4 !important; stroke-linecap:butt !important;
  transform:scale(.8); transform-origin:50% 50%; filter:drop-shadow(0 0 3px rgba(251,191,36,.6)); }
html .fa-anillo .fa-antes.fa-solo{ stroke:#fbbf24 !important; }
html .fa-ley .fa-l-antes{ background:#fbbf24 !important; }
html .fa-ley .fa-l-hoy{ background:linear-gradient(90deg, #22c55e, #3b82f6, #a855f7) !important; }
html .fa-delta span:first-child{ color:#fbbf24; font-weight:800; }
/* El arco de antes va DENTRO del mismo carril del anillo (sin achicarse), asi no toca el texto */
html .fa-anillo .fa-antes:not(.fa-solo){ transform:none !important; stroke-width:3.5 !important; filter:none !important; }

/* ---------- 📢 Aviso del día para todos ---------- */
.ad-modal{ width:min(480px, 100%); padding:0 !important; overflow:hidden; display:flex; flex-direction:column; }
.ad-cab{ display:flex; align-items:center; gap:14px; padding:20px 20px 16px;
  background:radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%), var(--surface);
  border-bottom:1px solid var(--border); }
.ad-ico{ flex:none; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:1.6rem;
  background:color-mix(in srgb, var(--accent) 18%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ad-eyebrow{ font-size:.7rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.ad-titulo{ font-size:1.2rem; font-weight:900; line-height:1.2; }
.ad-cuerpo{ padding:16px 20px 4px; overflow-y:auto; }
.ad-cuerpo p{ margin:0 0 12px; font-size:.95rem; line-height:1.55; color:var(--text); }
.ad-cuerpo p b{ color:var(--accent); }
.ad-pie{ padding:8px 20px 20px; }
.ad-pie .btn{ width:100%; justify-content:center; min-height:48px; font-weight:900; }

/* Sin stock: botón a la vista para agregar una ubicación manual (Admin, V2.229.5) */
html .sinstock-agregar{ display:flex !important; width:100%; margin-top:10px; min-height:50px; justify-content:center; align-items:center; gap:8px;
  font-weight:800; border-radius:16px; border:1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border)) !important;
  background:color-mix(in srgb, var(--accent) 10%, var(--surface)) !important; color:var(--text) !important; }
html .sinstock-agregar small{ font-weight:600; color:var(--text-dim); text-transform:none; }
html .sinstock-agregar:hover{ border-style:solid !important; }

/* Kardex: ubicación y cantidad en un solo paso (V2.229.5) */
.ko-wizard .kw-etiqueta{ display:block; font-size:.78rem; font-weight:800; color:var(--text-dim); margin:0 0 6px; }
.ko-wizard .kw-junto-sep{ height:1px; margin:14px 0 12px; background:var(--border); }

/* ---------- 🎬 Videos adjuntos (solo verlos) ---------- */
.vid-lista{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-bottom:14px; }
.vid-item{ all:unset; cursor:pointer; box-sizing:border-box; display:flex; flex-direction:column; border-radius:14px; overflow:hidden;
  background:var(--surface-2); border:1.5px solid var(--border); transition:border-color .15s, transform .1s; }
.vid-item:hover, .vid-item:focus-visible{ border-color:var(--accent); }
.vid-item:active{ transform:scale(.98); }
.vid-mini{ position:relative; display:block; aspect-ratio:16/10; background:#000; }
.vid-mini video{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.vid-play{ position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-size:1.1rem; padding-left:3px; box-sizing:border-box;
  background:color-mix(in srgb, var(--accent) 88%, transparent); color:#04211c; box-shadow:0 4px 16px rgba(0,0,0,.45); }
.vid-txt{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; min-width:0; }
.vid-txt b{ font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.vid-txt small{ font-size:.7rem; color:var(--text-dim); }
.vid-overlay{ background:rgba(0,0,0,.88) !important; }
.vid-modal{ width:min(960px, 100%); max-height:100%; display:flex; flex-direction:column; gap:8px; }
.vid-cab{ display:flex; align-items:center; gap:10px; color:#fff; }
.vid-cab-nombre{ flex:1; min-width:0; font-weight:800; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vid-cerrar{ all:unset; cursor:pointer; flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:900; background:rgba(255,255,255,.14); color:#fff; }
.vid-cerrar:hover{ background:rgba(255,255,255,.26); }
.vid-player{ width:100%; max-height:calc(100% - 60px); min-height:0; border-radius:12px; background:#000; }
.vid-error{ color:#fff; font-size:.85rem; text-align:center; }
.vid-abrir{ all:unset; cursor:pointer; text-decoration:underline; font-weight:800; color:var(--accent); }

/* Gestor de Cuentas: rol Solicitante (Alba Tickets, ver usuarios-tickets.js) */
.u-rol-chip.u-rol-solicitante{ color:#04211c; background:var(--accent2, #ff9f40); border-color:var(--accent2, #ff9f40); }
.sol-sec{ margin-top:22px; }
.sol-perm{ display:flex; align-items:center; gap:6px; margin-top:6px; font-size:.76rem; color:var(--text); }
.sol-clave{ display:flex; gap:6px; margin-top:6px; }
.sol-clave input{ flex:1; min-width:0; }
.sol-deuda{ margin-top:6px; padding:6px 10px; border-radius:10px; font-size:.76rem; background:color-mix(in srgb, #fbbf24 14%, transparent); border:1px solid color-mix(in srgb, #fbbf24 45%, transparent); }
.sol-deuda-mal{ background:color-mix(in srgb, #ef4444 14%, transparent); border-color:color-mix(in srgb, #ef4444 45%, transparent); }

/* ---------- Gestor de Cuentas: tarjeta de solicitante (pensada para celular) ---------- */
#solList.lm-list{ display:flex; flex-direction:column; gap:12px; }
.sol-card{
  display:flex; flex-direction:column; gap:10px; padding:14px;
  border-radius: var(--radius-lg, 16px); background: var(--surface);
  border:1px solid var(--border);
}
.sol-card-pendiente{ border-color: var(--accent2, #ff9f40); box-shadow: 0 0 0 1px var(--accent2, #ff9f40) inset; }
.sol-card-suspendido, .sol-card-rechazado{ opacity:.75; }
.sol-cab{ display:flex; align-items:center; gap:12px; min-width:0; }
.sol-avatar{
  flex:0 0 44px; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.15rem; color:#04211c; background: var(--accent2, #ff9f40);
}
.sol-quien{ display:flex; flex-direction:column; min-width:0; }
.sol-quien strong{ font-size:1rem; line-height:1.25; overflow-wrap:anywhere; }
.sol-quien span{ font-size:.82rem; color: var(--text-dim); overflow-wrap:anywhere; }
.sol-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.sol-chip{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
  font-size:.72rem; font-weight:700; line-height:1.3; white-space:nowrap;
  border:1px solid var(--border); color: var(--text); background: var(--surface-2);
}
.sol-chip-rol{ color:#04211c; background: var(--accent2, #ff9f40); border-color: var(--accent2, #ff9f40); }
.sol-chip-pendiente{ color:#fbbf24; border-color: color-mix(in srgb, #fbbf24 60%, transparent); background: color-mix(in srgb, #fbbf24 12%, transparent); }
.sol-chip-activo{ color:#34d399; border-color: color-mix(in srgb, #34d399 60%, transparent); background: color-mix(in srgb, #34d399 12%, transparent); }
.sol-chip-suspendido, .sol-chip-rechazado{ color:#f87171; border-color: color-mix(in srgb, #f87171 60%, transparent); background: color-mix(in srgb, #f87171 12%, transparent); }
.sol-chip-reg{ white-space:normal; }
.sol-datos{ font-size:.78rem; line-height:1.5; color: var(--text-dim); overflow-wrap:anywhere; }
.sol-perms{ display:flex; flex-direction:column; gap:8px; }
.sol-card .sol-perm{
  display:flex; align-items:flex-start; gap:10px; margin:0; padding:10px 12px;
  border-radius: var(--radius, 12px); background: var(--surface-2); border:1px solid var(--border);
  font-size:.84rem; line-height:1.35; color: var(--text); cursor:pointer;
}
.sol-card .sol-perm input{ flex:0 0 auto; width:20px; height:20px; margin:0; }
.sol-card .sol-clave:empty{ display:none; }
.sol-card .sol-clave{ display:grid; grid-template-columns:minmax(0, 1fr) 110px; gap:8px; align-items:stretch; }
.sol-card .sol-clave input{ width:100%; min-width:0; min-height:52px; box-sizing:border-box; margin:0; }
.sol-card .sol-clave .sol-btn{ min-height:52px; flex-direction:row; gap:6px; }
.sol-acciones{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.sol-acciones-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.sol-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:58px; padding:8px 6px; margin:0; width:100%;
  border-radius: var(--radius, 12px); border:1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size:.78rem; font-weight:700; line-height:1.2; text-align:center;
  cursor:pointer; -webkit-tap-highlight-color: transparent;
}
.sol-btn-ico{ font-size:1.15rem; line-height:1; }
.sol-btn:active{ transform:scale(.97); }
.sol-btn-ok{ color:#04211c; background:#34d399; border-color:#34d399; }
.sol-btn-mal{ color:#f87171; border-color: color-mix(in srgb, #f87171 55%, var(--border)); background: color-mix(in srgb, #f87171 10%, var(--surface-2)); }
.sol-acciones-2 .sol-btn{ flex-direction:row; gap:8px; min-height:52px; font-size:.92rem; }
.sol-btn:disabled{ opacity:.55; cursor:wait; }


/* =============================================================================================
   TEMA AQUAMARINE (pedido de Manuel, 27 oct 2026): azul clarito y aquamarine.
   Fondo: cielo celeste arriba que baja a mar profundo; rayos de luz que se mecen; dos capas de
   olas al pie que corren a distinto paso; burbujas subiendo (caida 'burbuja' en temas.js).
   Todo es transform/opacity o background-position: barato para los celulares del almacén.
   ============================================================================================= */
html[data-tema="aquamarine"]{ --oc-cielo:#9be3ff; --oc-agua:#2a9fd0; --oc-hondo:#063552; --oc-aqua:#5ff5d4; }
html[data-tema="aquamarine"] body{
  background: linear-gradient(180deg, #8fdcff 0%, #4fb8e6 22%, #1f86b8 48%, #0b5a86 72%, #063552 100%) fixed !important;
}
/* Rayos de luz que entran del agua y se mecen */
html[data-tema="aquamarine"] body::before{
  content:''; position:fixed; inset:-10% -20% 0; z-index:0; pointer-events:none; opacity:.55;
  background:
    linear-gradient(100deg, transparent 0 18%, rgba(255,255,255,.16) 20%, transparent 24% 40%, rgba(190,255,245,.14) 43%, transparent 47% 62%, rgba(255,255,255,.12) 65%, transparent 69%),
    radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.45), transparent 60%);
  transform-origin:50% 0; animation:ocRayos 9s ease-in-out infinite alternate;
}
@keyframes ocRayos{ from{ transform:skewX(-6deg) translateX(-3%); opacity:.45; } to{ transform:skewX(6deg) translateX(3%); opacity:.65; } }
/* Olas al pie: dos capas de onda que corren a distinto paso */
html[data-tema="aquamarine"] body::after{
  content:''; position:fixed; left:0; right:0; bottom:0; height:16vh; z-index:0; pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2030%20C50%2010%20100%2050%20150%2030%20S250%2010%20300%2030%20S350%2050%20400%2030%20V60%20H0Z%22%20fill%3D%22%235ff5d4%22%20fill-opacity%3D%22.35%22%2F%3E%3C%2Fsvg%3E") 0 0 / 400px 60px repeat-x,
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2050%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2025%20C40%2040%2080%2010%20150%2025%20S260%2040%20300%2025%20V50%20H0Z%22%20fill%3D%22%23063552%22%20fill-opacity%3D%22.75%22%2F%3E%3C%2Fsvg%3E") 0 100% / 300px 50px repeat-x,
    linear-gradient(transparent 55%, rgba(4,40,64,.85));
  animation:ocOlas 14s linear infinite;
}
@keyframes ocOlas{ from{ background-position:0 0, 0 100%, 0 0; } to{ background-position:-400px 0, 600px 100%, 0 0; } }
html[data-tema="aquamarine"] .wrap{ position:relative; z-index:1; }

/* Tarjetas: vidrio de agua, con brillo arriba */
html[data-tema="aquamarine"] :is(.glass, .home-tile, .home-tema, .total-piezas-card, .sg-card){
  background: linear-gradient(160deg, rgba(20,90,130,.72), rgba(8,52,82,.78)) !important;
  border:1px solid rgba(143,220,255,.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px -12px rgba(2,30,50,.8) !important;
  backdrop-filter: blur(10px);
}
html[data-tema="aquamarine"] .home-tile:hover{ border-color: var(--oc-aqua) !important; box-shadow: 0 0 0 2px rgba(95,245,212,.35), 0 10px 30px -12px rgba(2,30,50,.8) !important; }
html[data-tema="aquamarine"] :is(h1, h2, .section-title){ text-shadow: 0 2px 12px rgba(0,40,70,.55); }

/* BURBUJA: suben desde el fondo, se mecen y se desvanecen arriba */
.alba-cae-burbuja span{ top:auto; bottom:-8%; animation-name: albaSubeBurbuja; opacity:.5; }
@keyframes albaSubeBurbuja{
  0%{ transform: translate(0, 10vh) scale(.6); opacity:0; }
  10%{ opacity:.55; }
  50%{ transform: translate(18px, -50vh) scale(1); }
  90%{ opacity:.45; }
  100%{ transform: translate(-12px, -112vh) scale(1.15); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ html[data-tema="aquamarine"] body::before, html[data-tema="aquamarine"] body::after{ animation:none; } }

/* Complemento compartido: la descripcion es (o dice "compatible con") otro codigo */
.complemento-nota{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;max-width:60ch;padding:10px 14px;border-radius:var(--radius);border:2px dashed var(--accent2,var(--accent));background:color-mix(in srgb,var(--accent2,var(--accent)) 10%,var(--surface-2))}
.complemento-ico{font-size:1.3rem;line-height:1.2}
.complemento-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.complemento-txt b{font-size:.9rem;font-weight:800}
.complemento-txt small{color:var(--text-dim);font-size:.76rem}
.complemento-txt .code-copy-wrap{word-break:break-all}

/* ---------- Pegatina: nota pegada debajo de una ubicación (post-it con cinta) ---------- */
html .loc-pill-ubic:has(.pi-slot:not(:empty)){ display:flex !important; flex-direction:column; align-items:flex-start; }
.pi-slot{ display:block; margin-top:6px; max-width:100%; }
.pi-nota{ position:relative; display:block; margin:8px 2px 4px; padding:11px 10px 7px; max-width:230px; color:#3a2f00; text-align:left;
  background:linear-gradient(165deg,#fff08a 0%,#ffe45c 100%); border-radius:2px 2px 14px 2px; box-shadow:0 5px 12px rgba(0,0,0,.35), inset 0 -10px 14px rgba(190,150,0,.18);
  transform:rotate(-2.2deg); transform-origin:50% 0; font-family:inherit; font-style:normal; line-height:1.25;
  animation:piPega .7s cubic-bezier(.2,1.4,.4,1) both; }
.pi-nota.editable{ cursor:pointer; }
.pi-nota.editable:hover{ transform:rotate(-.6deg) scale(1.03); transition:transform .18s; }
.pi-cinta{ position:absolute; top:-9px; left:50%; width:54px; height:17px; margin-left:-27px; transform:rotate(3deg);
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(235,225,190,.65)); border:1px solid rgba(160,140,90,.35); box-shadow:0 1px 3px rgba(0,0,0,.25);
  clip-path:polygon(3% 0,97% 0,100% 18%,96% 36%,100% 54%,96% 72%,100% 100%,0 100%,4% 78%,0 56%,4% 36%,0 16%); animation:piCinta .35s .45s ease-out both; }
.pi-t{ display:block; font-size:.8rem; font-weight:700; white-space:pre-wrap; word-break:break-word; }
.pi-por{ display:block; margin-top:3px; font-size:.62rem; opacity:.65; font-family:inherit; }
.pi-add{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; padding:3px 9px; font-size:.7rem; font-weight:800; color:inherit; cursor:pointer;
  background:rgba(255,255,255,.12); border:1px dashed rgba(255,255,255,.45); border-radius:999px; opacity:.75; }
.pi-add:hover{ opacity:1; background:rgba(255,230,92,.25); }
@keyframes piPega{ 0%{ opacity:0; transform:translateY(-22px) rotate(-14deg) scale(.7); } 60%{ opacity:1; transform:translateY(2px) rotate(1.5deg) scale(1.04); } 100%{ transform:rotate(-2.2deg); } }
@keyframes piCinta{ from{ opacity:0; transform:rotate(3deg) scaleX(.2); } to{ opacity:1; transform:rotate(3deg) scaleX(1); } }
@media (prefers-reduced-motion:reduce){ .pi-nota,.pi-cinta{ animation:none; } }
.loc-pill-ubic:has(.pi-slot){ min-width:0; flex:1 1 auto; }
.pi-slot{ width:100%; } .pi-nota{ box-sizing:border-box; max-width:100%; width:fit-content; }
.pi-bloque{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 16px; margin:8px 0 2px; }
.pi-bloque:empty{ display:none; }
.pi-bloque .pi-nota{ max-width:260px; width:fit-content; }
.pi-cinta.quitable{ cursor:grab; touch-action:none; pointer-events:auto; }
.pi-cinta.quitable::after{ content:""; position:absolute; inset:-12px -10px; }
.pi-nota.pi-jalando{ transition:none; animation:none; }
.pi-nota.pi-arranca{ animation:piArranca .55s cubic-bezier(.5,0,.9,.4) forwards !important; pointer-events:none; }
@keyframes piArranca{ 0%{ opacity:1; } 25%{ transform:rotate(calc(var(--pi-dir,1) * 18deg)) translate(calc(var(--pi-dir,1) * 8px),-10px); }
  100%{ opacity:0; transform:rotate(calc(var(--pi-dir,1) * 70deg)) translate(calc(var(--pi-dir,1) * 150px),-140px) scale(.6); } }
/* Espectador: solo ve y busca; ningún botón de acciones en la ficha (Codificación, Mandar a una cuenta, Guardar para ver después, Kardex, Pegar nota...). */
:is(html.es-espectador, body.es-espectador) .product-actions-row,
:is(html.es-espectador, body.es-espectador) .act-btn,
:is(html.es-espectador, body.es-espectador) .pi-add,
:is(html.es-espectador, body.es-espectador) #favToggleBtn,
:is(html.es-espectador, body.es-espectador) .fav-btn{ display:none !important; }

/* Miniatura del producto en las sugerencias (en vez de la cajita); tocarla enseña la foto grande. */
.autocomplete-item .ac-icon.ac-mini{ width:42px; height:42px; border-radius:10px; overflow:hidden; padding:0; }
.autocomplete-item .ac-icon.ac-mini.con-foto{ cursor:zoom-in; background:#fff; border-color:var(--accent); }
.autocomplete-item .ac-icon.ac-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:600px){ .autocomplete-item .ac-icon.ac-mini{ width:42px; height:42px; font-size:.9rem; } }
.sug-foto-caja{ display:flex; flex-direction:column; gap:10px; align-items:center; width:min(92%, 480px); padding:14px; }
.sug-foto-caja img{ width:100%; max-height:62vh; object-fit:contain; border-radius:12px; background:#fff; }
.sug-foto-pie{ display:flex; flex-direction:column; gap:2px; text-align:center; max-width:100%; }
.sug-foto-pie span{ font-size:.82rem; color:var(--text-dim); }

/* Tarjeta de error rediseñada (renderError): icono, qué pasó, qué hacer y botones. Sigue el tema. */
.err-card{ --ec: var(--accent2, #f59e0b); display:flex; gap:18px; align-items:flex-start; padding:22px 24px; border-radius:calc(var(--radius-lg, 12px) + 8px);
  background:linear-gradient(135deg, color-mix(in srgb, var(--ec) 14%, var(--surface)), var(--surface) 70%); border:1px solid color-mix(in srgb, var(--ec) 45%, var(--border));
  box-shadow:0 14px 40px -18px color-mix(in srgb, var(--ec) 55%, transparent); animation:errEntra .45s cubic-bezier(.2,.8,.2,1) both; position:relative; overflow:hidden }
.err-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--ec) }
.err-card.err-warn{ --ec: var(--accent2, #f59e0b) } .err-card.err-danger{ --ec: var(--err, #f87171) } .err-card.err-dim{ --ec: var(--accent, #1cc6a6) }
.err-ico{ flex:none; width:64px; height:64px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:2rem;
  background:color-mix(in srgb, var(--ec) 18%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--ec) 50%, transparent) }
.err-ico span{ display:inline-block; animation:errLatido 2.4s ease-in-out infinite }
.err-cuerpo{ min-width:0; flex:1 }
.err-titulo{ font-size:1.25rem; font-weight:900; color:var(--text); line-height:1.2 }
.err-texto{ margin-top:6px; font-size:.95rem; line-height:1.5; color:var(--text-dim) }
.err-ayuda{ margin-top:8px; font-size:.9rem; font-weight:700; color:var(--ec) }
.err-acciones{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px }
.err-btn{ cursor:pointer; border:1px solid var(--border); background:var(--surface-2); color:var(--text); border-radius:calc(var(--radius-lg, 12px) + 4px); padding:11px 16px; font-weight:800; font-size:.92rem;
  transition:transform .15s, box-shadow .15s, border-color .15s }
.err-btn:hover{ transform:translateY(-2px); border-color:var(--ec); box-shadow:0 8px 20px -10px var(--ec) }
.err-btn.err-primario{ background:var(--ec); color:#1a1205; border-color:transparent }
.err-btn kbd{ font-family:inherit; font-size:.72rem; opacity:.7; margin-left:6px; padding:1px 6px; border-radius:6px; border:1px solid currentColor }
.err-detalle{ margin-top:14px; font-size:.78rem; color:var(--text-dim) }
.err-detalle summary{ cursor:pointer; opacity:.8 } .err-detalle code{ display:block; margin-top:6px; padding:8px 10px; border-radius:10px; background:color-mix(in srgb, var(--bg) 70%, transparent); word-break:break-word }
@keyframes errEntra{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } }
@keyframes errLatido{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.12) rotate(-4deg) } }
@media (max-width:560px){ .err-card{ flex-direction:column; padding:18px } .err-acciones .err-btn{ width:100% } }

/* ===== Acceso total: la tarjeta de acceso cuando el usuario es `alba` (cuenta del sistema) ===== */
#loginOverlay .login-card.acceso-total{
  border-color: transparent; position:relative; isolation:isolate;
  background:
    linear-gradient(180deg, rgba(255,207,90,.10), rgba(0,0,0,0) 40%),
    repeating-linear-gradient(0deg, rgba(255,207,90,.045) 0 1px, transparent 1px 4px),
    color-mix(in srgb, var(--surface) 92%, #000);
  box-shadow: 0 0 0 1px rgba(255,207,90,.55), 0 0 42px -6px rgba(255,170,40,.55), 0 28px 70px -20px rgba(0,0,0,.8);
  animation: atLatido 3.2s ease-in-out infinite;
}
#loginOverlay .login-card.acceso-total::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,207,90,.18) 50%, transparent 65%); background-size:250% 100%;
  animation: atBarrido 3.6s linear infinite;
}
.login-head.es-total{ --head-color:#ffcf5a; border-bottom-color: rgba(255,207,90,.55); }
.login-head.es-total .login-head-titulo{ color:#ffcf5a; letter-spacing:1.6px; text-transform:uppercase; }
.login-head.es-total .login-head-icono{ background: radial-gradient(circle, rgba(255,207,90,.30), rgba(255,207,90,.06)); box-shadow:0 0 22px rgba(255,207,90,.55); animation: atAnillo 2.4s ease-in-out infinite; }
.at-insignias{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px; animation: atEntra .5s both; }
.at-insignias span{ font-size:.66rem; font-weight:800; letter-spacing:.9px; text-transform:uppercase; padding:4px 9px; border-radius:999px; color:#ffcf5a;
  background:rgba(255,207,90,.10); border:1px solid rgba(255,207,90,.45) }
#loginOverlay .login-card.acceso-total #loginAvisoSalida,
#loginOverlay .login-card.acceso-total .login-links{ display:none !important; }
#loginOverlay .login-card.acceso-total #loginSubmitBtn{
  background: linear-gradient(90deg,#ffcf5a,#ff9f40); color:#2a1700; text-transform:uppercase; letter-spacing:.7px; font-size:.8rem; font-weight:900; white-space:normal; line-height:1.2;
  box-shadow:0 10px 30px -8px rgba(255,170,40,.8);
}
#loginOverlay .login-card.acceso-total input:focus{ border-color:#ffcf5a; box-shadow:0 0 0 3px rgba(255,207,90,.25); }
@keyframes atLatido{ 0%,100%{ box-shadow:0 0 0 1px rgba(255,207,90,.55), 0 0 30px -8px rgba(255,170,40,.45), 0 28px 70px -20px rgba(0,0,0,.8) } 50%{ box-shadow:0 0 0 1px rgba(255,207,90,.9), 0 0 56px -4px rgba(255,170,40,.75), 0 28px 70px -20px rgba(0,0,0,.8) } }
@keyframes atBarrido{ from{ background-position:150% 0 } to{ background-position:-100% 0 } }
@keyframes atAnillo{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.08) } }
@keyframes atEntra{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* ===== Centro de mando · Acceso total (cuenta del sistema) ===== */
.ct{ --oro:#ffcf5a; --oro2:#ff9f40; --oro-rgb:255,207,90; --oro2-rgb:255,159,64; margin:4px 0 18px; display:flex; flex-direction:column; gap:20px }
.ct-hero{ position:relative; display:flex; align-items:center; gap:20px; padding:26px 28px; border-radius:calc(var(--radius-lg,12px) + 12px); overflow:hidden; isolation:isolate;
  background: linear-gradient(120deg, rgba(var(--oro-rgb),.16), rgba(var(--oro2-rgb),.05) 55%, transparent), repeating-linear-gradient(0deg, rgba(var(--oro-rgb),.05) 0 1px, transparent 1px 4px), color-mix(in srgb, var(--surface) 92%, #000);
  box-shadow:0 0 0 1px rgba(var(--oro-rgb),.55), 0 0 46px -10px rgba(var(--oro2-rgb),.6); animation: ctLatido 3.4s ease-in-out infinite }
.ct-hero::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(115deg, transparent 38%, rgba(var(--oro-rgb),.16) 50%, transparent 62%); background-size:250% 100%; animation: ctBarrido 4.2s linear infinite }
.ct-escudo{ flex:none; width:86px; height:86px; border-radius:26px; display:flex; align-items:center; justify-content:center; color:var(--oro);
  background:radial-gradient(circle, rgba(var(--oro-rgb),.30), rgba(var(--oro-rgb),.06)); border:2px solid rgba(var(--oro-rgb),.7); box-shadow:0 0 34px rgba(var(--oro-rgb),.5); animation: ctAnillo 2.6s ease-in-out infinite }
.ct-escudo svg{ width:52px; height:52px }
.ct-hero-textos{ min-width:0; flex:1 }
.ct-etiqueta{ font-size:.72rem; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--oro2) }
.ct-titulo{ margin:2px 0 6px; font-size:clamp(1.8rem, 4vw, 2.6rem); font-weight:900; letter-spacing:2px; text-transform:uppercase; color:var(--oro); line-height:1.05; text-shadow:0 0 24px rgba(var(--oro-rgb),.4) }
.ct-sub{ margin:0; max-width:640px; font-size:.98rem; line-height:1.5; color:var(--text-dim) }
.ct-reloj{ flex:none; font-size:1.5rem; font-weight:900; color:var(--oro); font-variant-numeric:tabular-nums; padding:8px 14px; border-radius:14px; border:1px solid rgba(var(--oro-rgb),.45); background:rgba(var(--oro-rgb),.08) }
.ct-estado{ display:flex; flex-wrap:wrap; gap:10px }
.ct-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; font-size:.82rem; font-weight:700; color:var(--text); background:var(--surface); border:1px solid var(--border) }
.ct-chip i{ width:9px; height:9px; border-radius:50%; background:var(--text-dim); animation: ctPulso 1.6s ease-in-out infinite } .ct-chip i.ok{ background:#34d399 } .ct-chip i.mal{ background:#f87171 }
.ct-grupo-tit{ display:flex; align-items:center; gap:10px; margin:2px 0 10px; font-size:1.02rem; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:var(--oro) }
.ct-grupo-tit em{ font-style:normal; font-size:.72rem; font-weight:800; padding:2px 9px; border-radius:999px; color:var(--oro2); border:1px solid rgba(var(--oro2-rgb),.5) }
.ct-fichas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px }
.ct-ficha{ position:relative; cursor:pointer; display:flex; align-items:center; gap:12px; text-align:left; padding:14px 14px; min-height:68px; border-radius:calc(var(--radius-lg,12px) + 6px); color:var(--text);
  background:linear-gradient(135deg, color-mix(in srgb, var(--oro) 8%, var(--surface)), var(--surface)); border:1px solid color-mix(in srgb, var(--oro) 26%, var(--border));
  transition:transform .18s, box-shadow .18s, border-color .18s; animation: ctEntra .5s calc(var(--i) * 28ms) both }
.ct-ficha:hover{ transform:translateY(-3px); border-color:var(--oro); box-shadow:0 14px 30px -14px rgba(var(--oro2-rgb),.75) }
.ct-ficha:active{ transform:scale(.97) }
.ct-ficha-ico{ flex:none; width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; background:rgba(var(--oro-rgb),.10); border:1px solid rgba(var(--oro-rgb),.35) }
.ct-ficha-txt{ flex:1; min-width:0; font-size:.9rem; font-weight:800; line-height:1.2 }
.ct-ficha kbd{ position:absolute; right:8px; top:6px; font-family:inherit; font-size:.62rem; font-weight:800; letter-spacing:.5px; color:var(--oro2); opacity:.85 }
@keyframes ctLatido{ 0%,100%{ box-shadow:0 0 0 1px rgba(var(--oro-rgb),.5), 0 0 34px -10px rgba(var(--oro2-rgb),.45) } 50%{ box-shadow:0 0 0 1px rgba(var(--oro-rgb),.9), 0 0 58px -6px rgba(var(--oro2-rgb),.75) } }
@keyframes ctBarrido{ from{ background-position:150% 0 } to{ background-position:-100% 0 } }
@keyframes ctAnillo{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.06) } }
@keyframes ctPulso{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@keyframes ctEntra{ from{ opacity:0; transform:translateY(12px) scale(.97) } to{ opacity:1; transform:none } }
@media (max-width:640px){ .ct-hero{ flex-direction:column; align-items:flex-start; padding:20px } .ct-reloj{ align-self:flex-end } .ct-fichas{ grid-template-columns:repeat(2, 1fr) } }

/* ---- Odoo en falla: el centro de mando se distorsiona (glitch) ---- */
.ct-alerta{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:calc(var(--radius-lg,12px) + 6px); color:#fff; background:linear-gradient(90deg, rgba(255,40,80,.28), rgba(255,40,80,.10));
  border:1px solid rgba(255,70,100,.85); box-shadow:0 0 30px -6px rgba(255,40,80,.7); animation: ctAlertaParpadeo 1.4s steps(2) infinite }
.ct-alerta[hidden]{ display:none }
.ct-alerta-ico{ flex:none; font-size:1.7rem; color:#ff5a7a }
.ct-alerta-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 } .ct-alerta-txt b{ font-size:1.02rem; letter-spacing:.8px; text-transform:uppercase }
.ct-alerta-txt span{ font-size:.86rem; opacity:.9 } .ct-alerta-txt em{ display:block; font-style:normal; font-size:.74rem; opacity:.7; word-break:break-word }
.ct-alerta-txt .ct-motivo{ display:block; margin-top:6px; padding:8px 10px; border-radius:10px; background:rgba(0,0,0,.28); border-left:3px solid #ff5a7a; font-size:.84rem; line-height:1.4; opacity:1 } .ct-motivo b{ display:block; font-size:.72rem; letter-spacing:.8px; text-transform:uppercase; color:#ff8aa0; margin-bottom:2px }
.ct-alerta-btn{ flex:none; cursor:pointer; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.12); color:#fff; border-radius:12px; padding:10px 14px; font-weight:800; font-size:.86rem }
.ct-alerta-btn kbd{ font-family:inherit; font-size:.64rem; opacity:.75; margin-left:6px }
.ct.ct-falla{ --oro:#ff5a7a; --oro2:#4dd8ff }
.ct.ct-falla .ct-hero{ background: linear-gradient(120deg, rgba(255,40,80,.24), rgba(77,216,255,.07) 55%, transparent), repeating-linear-gradient(0deg, rgba(255,60,100,.09) 0 1px, transparent 1px 3px), color-mix(in srgb, var(--surface) 90%, #000);
  box-shadow:0 0 0 1px rgba(255,70,100,.85), 0 0 56px -4px rgba(255,40,80,.75); animation: ctSacude 3s steps(1) infinite }
.ct.ct-falla .ct-escudo{ border-color:rgba(255,90,122,.85); box-shadow:0 0 30px rgba(255,40,80,.6); animation: ctTiembla .5s steps(2) infinite }
.ct.ct-falla .ct-titulo{ position:relative; color:#ff5a7a; text-shadow:2px 0 #4dd8ff, -2px 0 #ff2d6f; animation: ctGlitchTexto 2.2s steps(1) infinite }
.ct.ct-falla .ct-titulo::before, .ct.ct-falla .ct-titulo::after{ content:attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden; pointer-events:none }
.ct.ct-falla .ct-titulo::before{ color:#4dd8ff; transform:translateX(-4px); clip-path:inset(0 0 55% 0); animation: ctCorte1 1.6s steps(1) infinite }
.ct.ct-falla .ct-titulo::after{ color:#ff2d6f; transform:translateX(4px); clip-path:inset(55% 0 0 0); animation: ctCorte2 1.9s steps(1) infinite }
.ct.ct-falla .ct-ficha{ border-color:rgba(255,90,122,.35) }
.ct.ct-falla .ct-ficha:nth-child(3n+1){ animation: ctEntra .5s calc(var(--i) * 28ms) both, ctFichaGlitch 3.4s steps(1) 1s infinite }
.ct.ct-falla .ct-ficha:nth-child(5n+2){ animation: ctEntra .5s calc(var(--i) * 28ms) both, ctFichaGlitch 4.1s steps(1) 2s infinite }
.ct.ct-falla .ct-reloj{ color:#ff5a7a; border-color:rgba(255,90,122,.6); animation: ctTiembla .8s steps(2) infinite }
.ct.ct-falla .ct-chip{ border-color:rgba(255,90,122,.5) }
@keyframes ctAlertaParpadeo{ 0%{ box-shadow:0 0 30px -6px rgba(255,40,80,.7) } 100%{ box-shadow:0 0 52px -2px rgba(255,40,80,1) } }
@keyframes ctSacude{ 0%,100%{ transform:none } 8%{ transform:translate(-3px,1px) skewX(-2deg) } 9%{ transform:translate(4px,-1px) skewX(3deg) } 10%{ transform:none } 55%{ transform:translate(2px,0) } 56%{ transform:none } 78%{ transform:translate(-5px,2px) skewX(-4deg) } 79%{ transform:none } }
@keyframes ctTiembla{ 0%{ transform:translate(0,0) } 50%{ transform:translate(-2px,1px) } 100%{ transform:translate(2px,-1px) } }
@keyframes ctGlitchTexto{ 0%,100%{ transform:none } 12%{ transform:translateX(-5px) skewX(-8deg) } 13%{ transform:none } 40%{ transform:translateX(6px) } 41%{ transform:none } 72%{ transform:translateX(-3px) skewX(6deg) } 73%{ transform:none } }
@keyframes ctCorte1{ 0%{ clip-path:inset(0 0 60% 0) } 20%{ clip-path:inset(30% 0 35% 0) } 40%{ clip-path:inset(10% 0 70% 0) } 60%{ clip-path:inset(55% 0 5% 0) } 80%{ clip-path:inset(0 0 80% 0) } 100%{ clip-path:inset(40% 0 20% 0) } }
@keyframes ctCorte2{ 0%{ clip-path:inset(60% 0 0 0) } 25%{ clip-path:inset(5% 0 75% 0) } 50%{ clip-path:inset(45% 0 25% 0) } 75%{ clip-path:inset(75% 0 0 0) } 100%{ clip-path:inset(20% 0 50% 0) } }
@keyframes ctFichaGlitch{ 0%,100%{ transform:none; filter:none } 6%{ transform:translateX(-4px) skewX(-6deg); filter:hue-rotate(160deg) } 7%{ transform:none; filter:none } 52%{ transform:translateX(5px); filter:saturate(2.4) } 53%{ transform:none; filter:none } }
@media (max-width:640px){ .ct-alerta{ flex-wrap:wrap } .ct-alerta-btn{ width:100% } }

/* Inicio nuevo para todas las cuentas: mismo diseño, con los colores del tema (cian / violeta por defecto) */
.ct.ct-nuevo{ --oro:var(--accent, #22d3ee); --oro2:var(--accent2, #a78bfa); --oro-rgb:34,211,238; --oro2-rgb:167,139,250 }
.ct.ct-nuevo .ct-titulo{ text-transform:none; letter-spacing:.5px; font-size:clamp(1.5rem, 3.2vw, 2.2rem); line-height:1.12 }
.ct.ct-nuevo .ct-ficha:hover{ box-shadow:0 14px 30px -14px var(--oro) }
.ct.ct-nuevo.ct-falla, .ct.ct-falla{ --oro:#ff5a7a; --oro2:#4dd8ff; --oro-rgb:255,90,122; --oro2-rgb:77,216,255 }

.ct-chip-btn{ cursor:pointer; font:inherit; color:inherit } .ct-chip-btn b{ margin-left:4px; color:var(--oro2,#ffd36b) }
.ct-atajos{ display:flex; flex-direction:column; overflow:hidden !important; width:min(520px,100%) } .ct-atajos-cuerpo{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:4px 2px }
.ct-atajos-tit{ margin-top:8px; font-weight:800; font-size:.8rem; letter-spacing:.8px; text-transform:uppercase; opacity:.8 }
.ct-atajo{ display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; padding:10px 12px; border-radius:12px; border:1px solid var(--border,#333); background:var(--surface-2,#222); color:inherit; font:inherit }
.ct-atajo kbd{ flex:none; min-width:84px; font-family:inherit; font-weight:800; font-size:.85rem; color:var(--accent,#5eead4) }