/* ========== Variables & base ========== */
:root{
--bg:#f6f7fb; --panel:#ffffff; --panel-2:#fbfbfe;
--line:#e6e8ef; --muted:#687089; --text:#111827;
--brand:#f97316; --brand-2:#fb923c; --ok:#059669; --err:#ef4444;
--pager-h:44px;
--topbar-h: 96px; /* altura fija de barra */
--topbar-vpad: 8px; /* margen superior/inferior pequeño */
}
*{box-sizing:border-box}
html,body{height:100%}
html{overflow-y:scroll}
body{
font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
margin:0;background:var(--bg);color:var(--text);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit}
/* ===== TOPBAR: override robusto (variable en el propio elemento) ===== */
/* Ajusta aquí los valores cuando quieras cambiar la barra */
header.topbar, .topbar {
/* CONTROLES */
--topbar-h: 110px; /* ALTURA de la barra */
--topbar-pad-v: 20px; /* padding vertical */
--topbar-pad-h: 24px; /* padding horizontal (sensación de anchura) */
--topbar-logo-h: 60px; /* ALTURA FIJA del logo */
position: sticky; top: 0; z-index: 100;
box-sizing: border-box;
min-height: var(--topbar-h);
height: var(--topbar-h); /* si prefieres solo min-height, puedes quitar esta línea */
padding: var(--topbar-pad-v) var(--topbar-pad-h);
display: flex; align-items: center; justify-content: space-between;
gap: 20px;
background: #fff;
border-bottom: 1px solid var(--line, #e9edf3);
box-shadow: 0 4px 12px rgba(21,24,40,.06);
}
/* Lados */
header.topbar .topbar-left,
.topbar .topbar-left,
header.topbar .topbar-right,
.topbar .topbar-right{
display:flex; align-items:center; gap:16px;
}
/* Logo: tamaño FIJO, no depende de la altura de la barra */
header.topbar .topbar-logo,
.topbar .topbar-logo{
height: var(--topbar-logo-h);
max-height: var(--topbar-logo-h);
width: auto;
object-fit: contain;
display: block;
}
/* Título (ajústalo si necesitas) */
header.topbar .topbar-title,
.topbar .topbar-title{
margin: 0;
font-size: 32px;
line-height: 1.1;
letter-spacing: .2px;
}
.topbar-right #btnFilters{ display:none }
.topbar .user-info {
display: flex;
flex-direction: column;
align-items: flex-end; /* o flex-start si lo quieres a la izquierda */
line-height: 1.2;
font-size: 15px;
}
.topbar .user-info span {
display: block;
}
.topbar {
position: relative;
}
.topbar .topbar-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin: 0;
text-align: center;
width: max-content;
}
/* ========== TOOLBAR (FIJA BAJO TOPBAR) ========== */
/* Barra secundaria fija bajo la topbar */
#subToolbar.subtoolbar {
display: flex !important; /* anula el display:none inline */
align-items: center;
position: fixed;
top: 110px; /* justo debajo de la topbar (110px) */
left: 0;
right: 0;
z-index: 200; /* por encima del contenido */
background: #f48024; /* naranja corporativo */
color: #fff;
border-top: 1px solid #e26f18;
border-bottom: 1px solid #e26f18;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
box-sizing: border-box;
}
/* Contenido alineado con el resto de la app */
#subToolbar .subtoolbar-inner {
max-width: var(--container, 1560px);
margin: 0 auto;
padding: 10px 32px;
display: flex;
align-items: center;
gap: 12px;
}
/* Botones e input dentro de la subtoolbar */
#subToolbar .btn,
#subToolbar select,
#subToolbar input[type="text"] {
background: #fff;
color: #333;
border: 0;
border-radius: 6px;
height: 34px;
padding: 0 12px;
}
/* “Filtrar descripción” más ancho */
#tbFilter {
min-width: 420px;
flex: 1 1 420px; /* crece si hay sitio */
}
/* ========== TITLESBAR (FIJA BAJO SUBTOOLBAR) ========== */
#titlesBar.titlesbar {
display: flex !important;
flex-direction: column;
position: fixed;
top: 170px; /* debajo de la subtoolbar */
left: 0;
right: 0;
z-index: 190;
background: #fafafa;
border-bottom: 1px solid #ddd;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
box-sizing: border-box;
/* muy importante: SIN padding lateral aquí */
padding: 0;
}
/* Botones */
.btn{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:none}
.btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-2));border:1px solid transparent;color:#fff;font-weight:700}
.btn-orange{background:linear-gradient(180deg,#f97316,#fb923c);border:1px solid transparent;color:#fff;font-weight:700}
.btn:hover{transform:none}
/* ========== Layout ========== */
.wrap{max-width:100%; margin:16px auto; padding:0 16px}
.grid-main{display:grid;gap:16px;align-items:stretch;grid-template-columns:560px 1fr;grid-template-areas:'left right'}
.left{grid-area:left;display:grid;gap:16px;grid-template-rows:auto auto 1fr;height:100%}
.right.section{grid-area:right;display:flex;flex-direction:column;min-height:100%}
.section{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}
/* Tarjetas elevadas */
.section.elevated{
background:linear-gradient(180deg,#ffffff 0%, #fbfbfe 100%);
border:1px solid var(--line);
border-radius:16px;
box-shadow:0 8px 24px rgba(21,24,40,.08), inset 0 1px 0 rgba(255,255,255,.8);
padding:16px;
}
h1{margin:0 0 16px;font-size:22px}
h2,h3{margin:0 0 8px}
/* Inputs */
label{display:block;margin-bottom:6px;color:var(--muted);font-size:12px}
input,select{
padding:10px 12px;border-radius:10px;border:1px solid var(--line);
background:#fff;color:#111827;outline:none;transition:none;
}
input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(249,115,22,.2)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;background:#fff}
/* Almacenes pills */
.wh-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wh-pill{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff}
.wh-pill input{accent-color:#fb923c}
/* Familias */
.fam-scroll{height:228px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}
.fam-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fam-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 8px;min-height:36px}
.fam-item:hover{border-color:var(--brand)}
.fam-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Resultados (compacto + cabecera sticky correcta) */
.results{
margin-top:10px;
height:calc(100vh - 330px);
overflow-y:auto; overflow-x:hidden;
border-top:1px solid var(--line); border-radius:8px; background:transparent;
position:relative; contain:layout paint; /* evita ver filas por detrás y microreflows */
}
table{width:100%;border-collapse:separate;border-spacing:0 4px;margin-top:6px;table-layout:fixed}
thead th{
position:sticky; top:0; z-index:3; /* fija cabecera dentro del scroll */
background:#fff; /* fondo sólido para que no se vean filas detrás */
text-align:left; padding:8px 10px; border-bottom:1px solid var(--line);
font-size:12px; box-shadow:0 1px 0 rgba(0,0,0,.06);
}
tbody{font-size:12px; line-height:1.10}
tbody tr{background:#fff;border:1px solid var(--line)}
tbody td{padding:6px 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tbody tr:hover{outline:1px solid rgba(21,24,40,.08)}
tbody tr:nth-child(odd){background:#fcfcff}
img.thumb{width:52px;height:52px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}
.results table img.thumb{width:52px!important;height:52px!important;object-fit:cover!important;display:block;border-radius:10px;border:1px solid var(--line)}
/* Panel flotante (ficha) */
#floatingPanels{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}
.panel{
position:absolute;top:80px;left:80px;width:560px;max-width:92vw;
background:#fff;border:1px solid var(--line);border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.18);pointer-events:auto;
}
.panel.min{height:auto}
.panel-header{
background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;
padding:10px 12px;cursor:move;border-radius:12px 12px 0 0;
display:flex;justify-content:space-between;align-items:center;gap:8px
}
.panel-header h3{margin:0;font-size:14px}
.panel-actions{display:flex;gap:6px}
.panel-btn{cursor:pointer;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.5);color:#fff;font-size:14px;border-radius:8px;padding:2px 8px}
.panel-btn:hover{background:rgba(255,255,255,.25)}
.panel-body{padding:12px;max-height:60vh;overflow:auto;font-size:13px}
.item-grid{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:start}
.item-grid .img-col img{width:100%;height:auto;border-radius:8px;border:1px solid var(--line);display:block;cursor:zoom-in}
.item-grid .info-col{display:grid;gap:6px}
.item-grid .row{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center}
.item-grid .label{color:var(--muted);font-size:12px}
.item-grid .value{font-variant-numeric:tabular-nums}
/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(2px)}
.lightbox img{position:relative;z-index:1;max-width:92vw;max-height:92vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox-close{position:absolute;top:16px;right:16px;z-index:2;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:10px;font-size:24px;line-height:1;padding:4px 10px;cursor:pointer}
/* ===== Login fullscreen ===== */
.login-hero{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0b0e1a url('/img/bg-login.jpg') center/cover no-repeat;z-index:1000}
.login-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55))}
.login-card{position:relative;z-index:1;width:min(480px,92vw);background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:24px 22px;backdrop-filter:saturate(140%) blur(4px);display:flex;flex-direction:column;gap:12px}
.login-logo{width:220px;height:auto;object-fit:contain;display:block;margin:0 auto 6px}
/* ===== Footer ===== */
.site-footer{
margin-top:18px; border-top:1px solid var(--line); background:#fff;
box-shadow:0 -2px 8px rgba(21,24,40,.04); padding:12px 16px;
}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer-left{display:flex;flex-direction:column;gap:4px}
.footer-right{color:var(--muted);font-size:12px;text-align:right}
.footer-right a{text-decoration:none;color:inherit;border-bottom:1px dotted var(--muted)}
/* Responsive base (SIN ocultar tabla) */
@media (max-width:900px){
.grid-main{grid-template-columns:1fr;grid-template-areas:"right";gap:12px}
.left{display:none}
.results{height:auto}
}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--line);background:#fff}
.badge.warn{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px;margin-right:6px}
.pill-soft{background:#f8fafc}
.pill-warn{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.pill-err{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.section-block{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.subttl{font-weight:600;margin:4px 0 6px 0}
.alerts{margin-bottom:8px}
/* --- Ficha: un poco más de altura y menos scroll --- */
.panel{
max-height: 88vh; /* antes ~80vh -> ahora 88vh */
}
.panel .panel-body{
/* resta aprox. la altura de la cabecera del panel */
max-height: calc(88vh - 56px);
overflow: auto; /* conserva scroll si hace falta */
}
/* en pantallas altas, aún un poco más */
@media (min-height: 900px){
.panel{ max-height: 92vh; }
.panel .panel-body{ max-height: calc(92vh - 56px); }
}
/* Botón ancho en la columna de imagen */
.w-full { width: 100%; }
.mt-2 { margin-top: .5rem; }
/* Modal básico */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.modal-card{ position:relative; width:min(780px, 92vw); max-height: 80vh; background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2); display:flex; flex-direction:column; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); }
.modal-body{ padding:12px 16px; overflow:auto; }
.modal-foot{ padding:12px 16px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; }
.modal-close{ background:transparent; border:none; font-size:20px; line-height:1; cursor:pointer; }
.mb-error{ background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:8px 10px; border-radius:8px; margin-bottom:8px; }
/* Tabla con scroll */
.table-wrap{ max-height: 56vh; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.tbl{ width:100%; border-collapse:separate; border-spacing:0; }
.tbl thead th{ position:sticky; top:0; background:#fff; z-index:1; padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; }
.tbl tbody td{ padding:8px 10px; border-bottom:1px dashed var(--line); }
.tbl td.num{ text-align:right; }
/* Botón corporativo (ya lo usas en "Salir") */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:10px; border:1px solid transparent; font-weight:600; cursor:pointer; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.toolbar{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.toolbar-left{ display:flex; gap:12px; flex-wrap:wrap; }
.toolbar-right{ display:flex; gap:8px; align-items:center; }
.ctl{ display:flex; flex-direction:column; gap:4px; font-size:12px; }
#mb-search{ min-width: 220px; }
#mb-whs{ min-width: 220px; }
.tbl thead th.sorted-asc::after{ content:" ▲"; font-size:11px; }
.tbl thead th.sorted-desc::after{ content:" ▼"; font-size:11px; }
.totals{ margin-top:10px; border-top:1px solid var(--line); padding-top:8px; }
.totals .trow{ display:flex; justify-content:space-between; padding:4px 0; }
.totals .trow.grand{ font-weight:700; border-top:1px dashed var(--line); margin-top:4px; padding-top:8px; }
.totals .num{ text-align:right; }
/* Caja única de filtros */
.filters-box{ padding:14px; }
.filters-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap:16px; align-items:start; }
@media (max-width: 1000px){ .filters-grid{ grid-template-columns: 1fr; } }
.f-col .lbl{ display:block; font-weight:700; margin-bottom:6px; }
.search-row{ display:flex; gap:8px; }
#f-search{
flex:1; font-size:16px; padding:10px 12px; border:1px solid var(--line);
border-radius:10px;
}
#f-btn{ padding:10px 14px; font-size:16px; border-radius:10px; }
.checks-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:8px; }
.chk{ display:inline-flex; gap:6px; align-items:center; }
.link-btn{ background:transparent; border:none; color:#2563eb; cursor:pointer; padding:0 4px; }
.whs-row{ display:flex; gap:14px; flex-wrap:wrap; }
/* ==== Caja de filtros compacta, alineada con resultados ==== */
.filters-box{
padding: 12px 14px;
border-radius: 12px;
background: #fff;
border: 1px solid var(--line);
box-shadow: var(--elevated, 0 1px 2px rgba(0,0,0,.06));
display: flex;
flex-direction: column;
gap: 12px;
max-width: 420px; /* ancho comedido para ganar espacio a resultados */
}
.left { max-width: 420px; } /* asegura columna de filtros del mismo ancho */
.filters-row{ display:flex; flex-direction:column; gap:8px; }
.filters-row .lbl{ font-weight:700; }
#search, #famSearch{
width: 100%;
font-size: 16px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 10px;
}
.whs-row{ display:flex; gap:10px; flex-wrap:wrap; }
.wh-pill{
display:inline-flex; align-items:center; gap:8px;
border:1px solid var(--line); border-radius:999px;
padding:6px 10px; background:#fafafa;
}
.wh-pill input{ transform: translateY(1px); }
.chk{ display:inline-flex; align-items:center; gap:8px; }
.checks-row{ display:flex; gap:16px; flex-wrap:wrap; }
/* Familias */
.fam-scroll{ max-height: 220px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:8px; background:#fff; }
#famSummary{ margin-top: 4px; }
/* Acciones al pie de la caja */
.filters-actions{
display:flex; align-items:center; gap:12px; justify-content:flex-start;
margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line);
}
.filters-actions .btn{ padding:10px 14px; border-radius:10px; font-size:16px; }
.link-btn{ background:transparent; border:none; color:#2563eb; cursor:pointer; padding:0 4px; }
/* Alineación con resultados: la derecha ocupa todo */
.grid-main{
display: grid;
grid-template-columns: 420px 1fr; /* filtros + resultados */
gap: 16px;
}
@media (max-width: 1100px){
.grid-main{ grid-template-columns: 1fr; }
.left{ max-width: none; }
.filters-box{ max-width: none; }
}
/* Detalles visuales coherentes */
.muted{ color:#64748b; }
/* === 1) Checks en una sola fila (con scroll horizontal si no caben) === */
.checks-row{
display:flex;
gap:16px;
align-items:center;
flex-wrap:nowrap; /* una sola fila */
overflow-x:auto; /* si no caben, deslizan horizontal */
-webkit-overflow-scrolling:touch;
}
.chk{ white-space:nowrap; }
/* === 2) Más filas visibles en la caja de familias === */
.fam-scroll{
max-height: 360px; /* antes ~220px; sube para ver más filas */
overflow:auto;
border:1px solid var(--line);
border-radius:10px;
padding:8px;
background:#fff;
}
/* === 3) Igualar alturas: filtros y resultados a la misma altura === */
/* La rejilla ya tiene .left y .right como items del mismo row. */
.grid-main{ align-items:stretch; }
.left, .right{ height:100%; }
.filters-box{ height:100%; display:flex; flex-direction:column; }
.right.section.elevated{ height:100%; display:flex; flex-direction:column; }
/* Que el contenido de resultados se estire ocupando el alto disponible */
.pagerbar{ flex:0 0 auto; }
.pagerbar {
display: none !important;
}
.results{ flex:1 1 auto; min-height:0; overflow:auto; }
/* === 4) “Familias seleccionadas” contenido y bonito, sin crecer infinito === */
#famSummary{
margin-top:6px;
max-height: 72px; /* límite visual */
overflow:auto; /* scroll si se llena */
display:flex;
flex-wrap:wrap;
gap:6px;
align-items:flex-start;
padding:6px;
border:1px dashed var(--line);
border-radius:10px;
background:#fafafa;
}
#famSummary .pill{
margin:0; /* ya hay gap arriba */
font-size:12px;
line-height:1.2;
padding:2px 8px;
}
/* === 5) Afinado visual general de la caja compacta === */
.filters-box{
padding:12px 14px;
border-radius:12px;
background:#fff;
border:1px solid var(--line);
box-shadow: var(--elevated, 0 1px 2px rgba(0,0,0,.06));
gap:12px;
max-width:420px;
}
.left{ max-width:420px; } /* cede más ancho a los resultados */
.grid-main{
display:grid;
grid-template-columns: 420px 1fr;
gap:16px;
}
@media (max-width:1100px){
.grid-main{ grid-template-columns: 1fr; }
.left{ max-width:none; }
.filters-box{ max-width:none; }
}
/* Inputs algo más compactos (coherentes con el listado) */
#search, #famSearch{
font-size:16px;
padding:10px 12px;
border:1px solid var(--line);
border-radius:10px;
}
.filters-actions{
display:flex; gap:12px; align-items:center; justify-content:flex-start;
margin-top:4px; padding-top:8px; border-top:1px dashed var(--line);
}
.filters-actions .btn{ padding:10px 14px; border-radius:10px; font-size:16px; }
/* === Forzar checks en UNA fila === */
#filters .checks-row{
display:flex !important;
flex-wrap:nowrap !important; /* no saltar de línea */
gap:16px;
align-items:center;
overflow-x:auto; /* si no caben, scroll horizontal */
-webkit-overflow-scrolling: touch;
white-space:nowrap; /* evita saltos por texto largo */
}
#filters .checks-row .chk{
display:inline-flex !important;
align-items:center;
gap:8px;
white-space:nowrap;
}
/* === Igualar alturas: filtros = resultados === */
/* 1) La rejilla estira ambas columnas a la misma altura */
.grid-main{ align-items:stretch; }
/* 2) La columna izquierda se comporta como contenedor flex vertical */
.left{ display:flex; }
/* 3) La caja de filtros ocupa TODO el alto disponible de la columna */
.left > .filters-box{
flex:1 1 auto;
display:flex;
flex-direction:column;
min-height:0; /* permite que el contenido se contraiga */
}
/* 4) El panel de resultados ya era flex; garantizamos estiramiento */
.right.section.elevated{
display:flex;
flex-direction:column;
min-height:0;
}
.pagerbar{ flex:0 0 auto; }
.results{ flex:1 1 auto; min-height:0; overflow:auto; }
/* 5) Más filas visibles en Familias y el resumen contenido */
.fam-scroll{ max-height: 360px; }
#famSummary{
max-height: 72px; /* no crece infinito */
overflow:auto;
display:flex; flex-wrap:wrap; gap:6px;
padding:6px; border:1px dashed var(--line); border-radius:10px; background:#fafafa;
}
#famSummary .pill{ margin:0; font-size:12px; line-height:1.2; padding:2px 8px; }
/* === Alineación perfecta de los filtros con check === */
#filters .checks-row{
display:flex !important;
flex-wrap:nowrap !important; /* una sola fila */
align-items:center; /* centra verticalmente el texto con el checkbox */
gap: 24px; /* separación entre los dos checks */
margin-top: 6px;
overflow: visible; /* sin scroll aquí */
}
/* Cada check como inline-flex, sin márgenes raros */
#filters .checks-row .chk{
display:inline-flex !important;
align-items:center;
gap:8px;
margin:0;
padding:0;
white-space:nowrap; /* si el texto es largo, evita salto */
}
/* Tamaño y verticalidad del checkbox consistente */
#filters .checks-row .chk input[type="checkbox"]{
width:16px; height:16px;
margin:0; /* evita sangrías del navegador */
transform: translateY(1px); /* micro ajuste para alinear con el texto */
}
/* El texto del check con línea compacta para cuadrar baseline */
#filters .checks-row .chk span{
line-height: 1; /* evita que "baile" respecto al checkbox */
}
@media (max-width: 820px){
#filters .checks-row{ flex-wrap:wrap !important; row-gap:8px; }
}
/* ===== FIX 1: Checks en una sola línea y perfectamente alineados ===== */
#filters .checks-row{
display:flex !important;
flex-wrap:nowrap !important; /* fuerzo 1 fila */
align-items:center !important;
gap:24px !important;
margin-top:6px;
}
label.chk{ /* anula margen global de label */
margin-bottom:0 !important;
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
white-space:nowrap !important;
}
label.chk input[type="checkbox"]{
width:16px; height:16px;
margin:0 !important; /* sin sangría */
transform:translateY(1px); /* microalineación con el texto */
}
label.chk span{ line-height:1; } /* misma línea que el checkbox */
/* ===== FIX 2: Igualar alto entre filtros y resultados ===== */
/* la izquierda (filtros) se estira como columna flex */
.left{ display:flex !important; }
.left > .filters-box{
flex:1 1 auto !important;
display:flex; flex-direction:column; min-height:0;
}
/* la derecha (resultados) también se estira; quito la altura fija previa */
.right.section.elevated{
display:flex !important; flex-direction:column; min-height:0;
}
.results{
height:auto !important; /* anula calc(100vh - 330px) */
flex:1 1 auto; min-height:0; overflow:auto;
}
/* ===== Extra: más filas visibles en Familias y resumen contenido ===== */
.fam-scroll{ max-height:360px !important; }
#famSummary{
max-height:72px !important; overflow:auto;
display:flex; flex-wrap:wrap; gap:6px; padding:6px;
border:1px dashed var(--line); border-radius:10px; background:#fafafa;
}
#famSummary .pill{ margin:0; font-size:12px; line-height:1.2; padding:2px 8px; }
/* Opcional: si en móviles quieres que los checks se partan en 2 líneas */
@media (max-width: 820px){
#filters .checks-row{ flex-wrap:wrap !important; row-gap:8px; }
}
/* === PATCH: alinear los dos checks en una sola línea === */
#filters .checks-row{
display: flex !important; /* asegura flex */
flex-direction: row !important; /* anula el column heredado de .filters-row */
align-items: center !important; /* texto centrado con el checkbox */
gap: 20px; /* separación entre los dos */
flex-wrap: nowrap; /* no saltar de línea */
margin-top: 6px;
}
#filters .checks-row .chk{
display: inline-flex !important; /* anula label{display:block} */
align-items: center !important;
gap: 8px;
margin: 0 !important; /* anula label{margin-bottom:6px} */
white-space: nowrap;
}
#filters .checks-row .chk input[type="checkbox"]{
width: 16px; height: 16px;
margin: 0; /* sin sangría del navegador */
}
#filters .checks-row .chk span{
line-height: 1; /* evita “bailes” verticales */
}
/* (opcional) en pantallas estrechas, permitir que se partan en dos líneas */
@media (max-width: 820px){
#filters .checks-row{ flex-wrap: wrap !important; row-gap: 8px; }
}
/* === MOVER EL SCROLL AL PANEL DE RESULTADOS (y fijar filtros) === */
/* 1) Que la página NO scrollee; scrolleará el panel de resultados */
html, body { height: 100%; }
body { overflow: hidden; } /* <- clave: el body deja de scrollear */
/* 2) La zona de la app ocupa toda la altura visible */
.wrap { height: 100vh; overflow: hidden; }
/* 3) La rejilla principal también ocupa todo y no scrollea */
.grid-main { height: 100%; overflow: hidden; align-items: stretch; }
/* 4) La columna derecha se estira en alto y SOLO scrollea su contenido */
.right.section.elevated {
display: flex; flex-direction: column; min-height: 0; height: 100%;
}
.pagerbar { flex: 0 0 auto; }
.results { flex: 1 1 auto; min-height: 0; overflow: auto; } /* <- aquí va el scroll */
/* 5) Filtros “pegados” (no se mueven al scrollear resultados) */
#filters.filters-box { position: sticky; top: 12px; z-index: 3; }
/* 6) Asegura que ningún ancestro corte el sticky de filtros */
.left { overflow: visible; }
/* ===== Página con scroll normal + cabecera y filtros sticky ===== */
/* 0) Altura aproximada de la topbar (ajústala si tu barra es más alta/baja) */
:root { --topbar-h: 64px; }
/* 1) Restaura scroll global en la página */
body{ overflow:auto !important; }
.wrap{ height:auto !important; overflow:visible !important; }
.grid-main{ height:auto !important; overflow:visible !important; align-items:stretch; }
/* 2) El panel de resultados ya no hace scroll interno: scrollea la página */
.right.section.elevated{ height:auto !important; }
.results{ flex:unset !important; min-height:0 !important; overflow:visible !important; }
/* 4) Caja de filtros sticky debajo de la topbar */
#filters.filters-box{
position: sticky;
top: calc(var(--topbar-h) + 12px); /* margen bajo la topbar */
z-index: 10;
}
/* 5) Asegura que ningún ancestro corte el sticky de filtros */
.left{ overflow: visible !important; }
/* ========= Drawer de filtros (off-canvas) ========= */
:root{ --topbar-h: 64px; } /* ajusta si tu topbar es más alta/baja */
/* La rejilla: resultados a ancho completo (la col izquierda queda a 0px) */
.grid-main{ grid-template-columns: 0 1fr !important; }
/* El contenedor de filtros (#filters) pasa a ser un drawer fijo */
#filters.as-drawer{
position: fixed;
top: var(--topbar-h);
left: 0;
width: min(460px, 92vw);
height: calc(100vh - var(--topbar-h));
overflow: auto;
background: #fff;
border-right: 1px solid var(--line);
border-radius: 0 12px 12px 0;
box-shadow: 0 10px 24px rgba(0,0,0,.18);
transform: translateX(-110%);
transition: transform .24s ease;
z-index: 60;
padding: 12px 14px; /* preserva tu look actual */
}
/* Cabecera dentro del drawer (añadida por JS) */
#filters.as-drawer .drawer-head{
position: sticky; top: 0; z-index: 1;
display:flex; align-items:center; justify-content:space-between;
background:#fff; padding:8px 0 10px 0; margin:-2px 0 10px 0;
border-bottom:1px solid var(--line);
}
#filters.as-drawer .drawer-title{ font-weight:700; }
/* Estados */
#filters.as-drawer.open{ transform: translateX(0); }
/* Backdrop del drawer */
#filters-backdrop{
position: fixed; inset: var(--topbar-h) 0 0 0;
background: rgba(0,0,0,.35);
display: none;
z-index: 50;
}
#filters-backdrop.show{ display:block; }
/* En móviles, ocupa toda la pantalla */
@media (max-width: 820px){
#filters.as-drawer{
width: 100vw;
border-radius: 0;
}
#filters-backdrop{ inset: var(--topbar-h) 0 0 0; }
}
/* ===== Fila editable (caja/palet/unidades) ===== */
.rowline td{ vertical-align: top; }
.col-pack .pack{
display:grid; grid-template-columns: auto 1fr; gap:4px 10px; align-items:center;
}
.col-pack .lbl{ color:#64748b; font-size:11px; }
.col-pack .val{ font-variant-numeric: tabular-nums; }
.qty-box, .qty-pallet, .qty-units{
width: 120px; max-width: 100%;
padding:6px 8px;
border:1px solid var(--line);
border-radius:8px;
font-variant-numeric: tabular-nums;
}
.col-actions .btn{ margin-right:6px; }
.col-props .pill{ margin:2px 6px 2px 0; font-size:11px; padding:2px 8px; }
/* === Ajustes de tabla: código estrecho + descripción a 2 líneas === */
/* Hacemos que las anchuras de columnas se respeten mejor */
.results table{ table-layout: fixed; }
/* 1) Columna CÓDIGO más estrecha y en negrita */
.results thead th:nth-child(1),
.results tbody td:nth-child(1){
width: 96px !important; /* antes 110px */
}
.results tbody td:nth-child(1) .code{
font-weight: 700;
letter-spacing: .2px;
}
/* 2) Columna DESCRIPCIÓN más contenida y con 2 líneas (ellipsis) */
.results thead th:nth-child(2),
.results tbody td:nth-child(2){
width: 380px !important; /* ajusta a tu gusto (340–420) */
}
/* Si en renderTable usas …
*/
.results tbody td:nth-child(2) .desc2{
display: -webkit-box;
-webkit-line-clamp: 2; /* exactamente 2 líneas */
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
line-height: 1.25;
max-height: calc(1.25em * 2);
}
/* Un poco más compacto el padding de celdas para ganar aire */
.results tbody td{ padding-top:8px; padding-bottom:8px; }
/* === Columnas más compactas y descripción a 3 líneas === */
.results table{ table-layout: fixed; }
/* Código aún más estrecho (1ª columna) y en negrita */
.results thead th:nth-child(1),
.results tbody td:nth-child(1){
width: 84px !important;
}
.results tbody td:nth-child(1) .code{
font-weight: 700;
letter-spacing: .2px;
}
/* Descripción (2ª columna): permite hasta 3 líneas con ellipsis */
.results thead th:nth-child(2),
.results tbody td:nth-child(2){
width: 420px !important; /* ajusta si lo ves necesario */
}
.results tbody td:nth-child(2) .desc2{
display: -webkit-box;
-webkit-line-clamp: 3; /* ← ahora 3 líneas */
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
line-height: 1.25;
max-height: calc(1.25em * 3);
}
/* Almacén (4ª col) aún más estrecha */
.results thead th:nth-child(4),
.results tbody td:nth-child(4){
width: 72px !important;
}
/* Cantidades (5ª col) en 4 filas limpias, alineadas */
.qty-grid{ display:flex; flex-direction:column; gap:2px; }
.qrow{
display:flex; justify-content:space-between; align-items:center;
font-size: 13px;
}
.qrow .qlbl{ color:#64748b; }
.qrow .qval{ font-variant-numeric: tabular-nums; font-weight:600; }
/* === Miniatura algo mayor y columna más estrecha === */
.results thead th:nth-child(3),
.results tbody td:nth-child(3){
width: 76px !important; /* columna imagen estrecha */
}
.thumb{
width: 76px !important;
height: 76px !important;
object-fit: cover;
border-radius: 10px;
border: 1px solid var(--line);
margin: 0 auto; /* centrada en su celda */
}
/*=== Columna Almacén un poco más estrecha === */
.results thead th:nth-child(4),
.results tbody td:nth-child(4){
width: 64px !important;
}
/* === Cantidades: valor pegado a la etiqueta (menos ancho) === */
.results thead th:nth-child(5),
.results tbody td:nth-child(5){
width: 130px !important; /* antes 210px aprox */
}
.qty-grid{ display: flex; flex-direction: column; gap: 2px; }
.qrow{
display: inline-flex; /* no ocupar toda la fila */
align-items: center;
gap: 6px; /* valor pegado al texto */
font-size: 13px;
}
.qrow .qlbl{ color: #64748b; }
.qrow .qval{
font-variant-numeric: tabular-nums;
font-weight: 600;
/* mismo tono que el texto principal para mejor lectura */
}
/* === Columna descripción fija a 380px, con 3 líneas === */
.results thead th:nth-child(2),
.results tbody td:nth-child(2){
width: 280px !important;
max-width: 280px !important;
}
.results tbody td:nth-child(2) .desc2{
display: -webkit-box;
-webkit-line-clamp: 3; /* máximo 3 líneas */
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
line-height: 1.25;
max-height: calc(1.25em * 3);
}
/* === Columnas Caja / Palet / Unidades más compactas === */
.results thead th:nth-child(6),
.results tbody td:nth-child(6),
.results thead th:nth-child(7),
.results tbody td:nth-child(7),
.results thead th:nth-child(8),
.results tbody td:nth-child(8){
width: 120px !important; /* mucho más estrecho */
}
.qtycol{
display: flex;
flex-direction: column;
gap: 4px;
}
.qtycol .top{
display:flex;
justify-content: space-between;
align-items:center;
font-size: 12px;
}
.qtycol .qlbl{ color:#64748b; }
.qtycol .qval{
font-weight:700;
font-variant-numeric: tabular-nums;
}
.qtycol input{
width: 100%;
padding: 4px 6px;
border:1px solid var(--line);
border-radius:6px;
font-size:13px;
font-variant-numeric: tabular-nums;
text-align:right;
}
/* === Compactar columna Unidades === */
.results thead th:nth-child(8),
.results tbody td:nth-child(8){
width: 100px !important; /* aún más estrecho */
}
.col-pack .qtycol input.qty-units{
max-width: 80px; /* más estrecho */
padding: 2px 4px; /* caja más pequeña */
height: 26px; /* altura reducida */
font-size: 12px;
text-align: right;
}
/* === Compactación fuerte: Caja / Palet / Unidades (cols 6–8) === */
.results thead th:nth-child(6),
.results tbody td:nth-child(6),
.results thead th:nth-child(7),
.results tbody td:nth-child(7),
.results thead th:nth-child(8),
.results tbody td:nth-child(8){
width: 88px !important; /* antes 120/100 -> más estrecho */
padding-top: 6px !important;
padding-bottom: 6px !important;
}
/* Bloque vertical: línea superior + input mini */
.col-pack .qtycol{
display: flex;
flex-direction: column;
gap: 2px; /* menos aire */
min-width: 0;
}
/* Línea superior: etiqueta + valor pegados, sin salto de línea */
.col-pack .qtycol .top{
display: inline-flex;
align-items: baseline;
justify-content: flex-start;
gap: 4px;
white-space: nowrap; /* evita doble línea */
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.col-pack .qtycol .qlbl{
color:#64748b;
font-size: 11px; /* pequeño para ganar sitio */
line-height: 1.1;
}
.col-pack .qtycol .qval{
font-weight: 700;
font-size: 12px;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
/* Input ultra-compacto y alineado a la derecha */
.col-pack .qtycol input{
width: 70px; /* más estrecho */
height: 24px; /* bajito */
padding: 2px 4px;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 12px;
text-align: right;
font-variant-numeric: tabular-nums;
align-self: flex-start; /* no ocupa todo el ancho del td */
}
/* (opcional) centra encabezados de estas columnas para que respiren */
.results thead th:nth-child(6),
.results thead th:nth-child(7),
.results thead th:nth-child(8){
text-align: left;
}
}
/* La tabla respeta el colgroup */
.results table{ table-layout: fixed; }
/* Que el contenido no fuerce la celda */
.results td{ overflow: hidden; }
/* Bloques de Caja/Palet/Unidades súper compactos */
.col-pack .qtycol{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.col-pack .qtycol .top{
display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.col-pack .qtycol .qlbl{ color:#64748b; font-size:11px; line-height:1.1; }
.col-pack .qtycol .qval{ font-weight:700; font-size:12px; line-height:1.1; font-variant-numeric:tabular-nums; }
.col-pack .qtycol input{
width:68px; height:22px; padding:2px 4px; text-align:right;
border:1px solid var(--line); border-radius:6px; font-size:12px; box-sizing:border-box;
}
/* Miniatura */
.thumb{ width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid var(--line); margin:0 auto; }
/* Descripción a 3 líneas (fijada ya a 380px por el colgroup) */
.results tbody td:nth-child(2) .desc2{
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
overflow:hidden; white-space:normal; line-height:1.25; max-height:calc(1.25em * 3);
}
/* === Tabla de stock: respetar colgroup y compactar nuevas columnas === */
.results table{ table-layout: fixed; } /* respeta anchos del */
.results td{ overflow:hidden; text-overflow:ellipsis; }
/* Descripción: exactamente 3 líneas (ya tenemos ancho 380px por colgroup) */
.results tbody td:nth-child(2) .desc2{
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
overflow:hidden; white-space:normal; line-height:1.25; max-height:calc(1.25em * 3);
}
/* Miniatura algo mayor para cuadrar alturas */
.thumb{
width:64px; height:64px; object-fit:cover;
border-radius:10px; border:1px solid var(--line); margin:0 auto;
}
/* Cantidades (columna 5) en 4 filas compactas */
.qty-grid{ display:flex; flex-direction:column; gap:2px; }
.qrow{ display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.qrow .qlbl{ color:var(--muted); }
.qrow .qval{ font-variant-numeric:tabular-nums; font-weight:600; }
/* Caja / Palet / Unidades (cols 6–8) súper compactas */
.col-pack .qtycol{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.col-pack .qtycol .top{ display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.col-pack .qlbl{ color:var(--muted); font-size:11px; line-height:1.1; }
.col-pack .qval{ font-weight:700; font-size:12px; line-height:1.1; font-variant-numeric:tabular-nums; }
.col-pack .qtycol input{
width:68px; height:22px; padding:2px 4px; text-align:right;
border:1px solid var(--line); border-radius:6px; font-size:12px; box-sizing:border-box;
}
/* (opcional) Refuerzo por clase si quieres fijar anchos también vía CSS */
.results th.col-box, .results td.col-box,
.results th.col-pallet,.results td.col-pallet,
.results th.col-units, .results td.col-units{
width:92px; min-width:92px; max-width:92px;
}
/* === Alinear tabla de 11 columnas y compactar === */
.results table{ table-layout:fixed; width:100%; }
.results td{ overflow:hidden; text-overflow:ellipsis; }
/* Descripción: 3 líneas (ancho 380px por colgroup) */
.results tbody td:nth-child(2) .desc2{
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
overflow:hidden; white-space:normal; line-height:1.25; max-height:calc(1.25em * 3);
}
/* Miniatura */
.thumb{
width:64px; height:64px; object-fit:cover;
border:1px solid var(--line); border-radius:10px; margin:0 auto;
}
/* Cantidades (col 5) en 4 filas */
.qty-grid{ display:flex; flex-direction:column; gap:2px; }
.qrow{ display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.qrow .qlbl{ color:#64748b; }
.qrow .qval{ font-variant-numeric:tabular-nums; font-weight:600; }
/* Caja / Palet / Unidades (cols 7–9) súper compactas */
.col-pack .qtycol{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.col-pack .qtycol .top{ display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.col-pack .qlbl{ color:#64748b; font-size:11px; line-height:1.1; }
.col-pack .qval{ font-weight:700; font-size:12px; line-height:1.1; font-variant-numeric:tabular-nums; }
.col-pack .qtycol input{
width:68px; height:22px; padding:2px 4px; text-align:right;
border:1px solid var(--line); border-radius:6px; font-size:12px; box-sizing:border-box;
}
/* Columna propiedades: pills en bloque vertical */
.col-props{
min-width: 140px; /* o el ancho que prefieras */
}
.col-props .pill{
display:block; /* cada pill ocupa toda la línea */
margin:2px 0; /* espacio vertical */
text-align:left;
}
/* === 14 columnas: maquetación compacta y estable === */
.results table{ table-layout:fixed; width:100%; }
.results td{ overflow:hidden; text-overflow:ellipsis; }
/* Descripción a 3 líneas (ancho fijado por colgroup) */
.results tbody td:nth-child(2) .desc2{
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
overflow:hidden; white-space:normal; line-height:1.25; max-height:calc(1.25em * 3);
}
/* Miniatura */
.thumb{ width:64px; height:64px; object-fit:cover; border:1px solid var(--line); border-radius:10px; margin:0 auto; }
/* Col 5: bloque de cantidades (4 filas) */
.qty-grid{ display:flex; flex-direction:column; gap:2px; }
.qrow{ display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.qrow .qlbl{ color:#64748b; }
.qrow .qval{ font-variant-numeric:tabular-nums; font-weight:600; }
/* Cols 7–9: unidad + input + subprecio */
.col-pack{ }
.col-pack .qtycol{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.col-pack .qtycol .top{ display:flex; align-items:baseline; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.col-pack .qlbl{ color:#64748b; font-size:11px; line-height:1.1; }
.col-pack .qval{ font-weight:700; font-size:12px; line-height:1.1; font-variant-numeric:tabular-nums; }
.col-pack .price-sub{ color:#64748b; font-size:11px; line-height:1.1; }
.col-pack input{
width:68px; height:22px; padding:2px 4px; text-align:right;
border:1px solid var(--line); border-radius:6px; font-size:12px; box-sizing:border-box;
}
/* Cols 10–12: precios totales */
.col-money{ text-align:right; font-variant-numeric:tabular-nums; }
.col-money .num{ font-weight:600; }
.col-money .muted{ color:#64748b; }
/* Propiedades en vertical */
.col-props .pill{ display:block; margin:2px 0; }
/* Acciones: botones horizontales */
.col-actions .btn{ margin-right:6px; }
/* === Acciones: botones apilados y compactos === */
.col-actions{
display:flex;
flex-direction:column;
gap:6px;
align-items:stretch; /* que ocupen todo el ancho de la celda */
}
.btn-sm{
padding:6px 10px;
font-size:13px;
border-radius:8px;
}
/* Paleta complementaria (gama coherente) */
.btn-sky{
background:#0ea5e9; /* sky-500 */
color:#fff; border-color:transparent;
}
.btn-sky:hover{ filter:brightness(0.95); }
.btn-amber{
background:#f59e0b; /* amber-500 */
color:#fff; border-color:transparent;
}
.btn-amber:hover{ filter:brightness(0.95); }
.btn-emerald{
background:#10b981; /* emerald-500 */
color:#fff; border-color:transparent;
}
.btn-emerald:hover{ filter:brightness(0.95); }
/* Familia: multilínea, que no se corte si hay altura disponible */
.col-fam{
white-space: normal !important;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
/* Ajuste leve de altura de fila */
.results thead th, .results tbody td{ padding-top:8px; padding-bottom:8px; }
/* Caja/Palet: dos líneas compactas con iconos */
.col-packinfo .packinfo{ display:flex; flex-direction:column; gap:2px; }
.col-packinfo .line{ display:flex; align-items:center; gap:6px; font-size:13px; }
.col-packinfo .lbl{ color:#64748b; }
.col-packinfo .val{ font-weight:600; font-variant-numeric:tabular-nums; }
/* iconitos minimalistas (sin depender de emojis) */
.ico{
display:inline-block; width:14px; height:14px; border-radius:3px; border:1px solid var(--line); background:#e5e7eb;
}
.ico-box{ background:linear-gradient(180deg,#e5e7eb,#cbd5e1); }
.ico-pallet{
background:repeating-linear-gradient(90deg, #eab308 0 4px, #fef3c7 4px 8px);
border-color:#f59e0b;
}
/* Pedido: tres filas (Unidades, Cajas, Palets) con precio a la derecha */
.col-order .ordergrid{ display:flex; flex-direction:column; gap:4px; }
.col-order .row{ display:grid; grid-template-columns: 68px 1fr auto; align-items:center; gap:6px; }
.col-order .olbl{ color:#64748b; font-size:12px; text-align:right; }
.col-order input{
width:78px; height:24px; padding:2px 6px; text-align:right;
border:1px solid var(--line); border-radius:6px; font-size:12px; box-sizing:border-box;
}
.col-order .oprice{ color:#64748b; font-size:12px; white-space:nowrap; }
/* Acciones: dos arriba en línea, abajo “Pedir” ancho */
.col-actions{ display:flex; flex-direction:column; gap:6px; }
.col-actions .actions-top{ display:flex; gap:8px; }
.col-actions .actions-bottom{ display:flex; }
.btn-xs{ padding:4px 8px; font-size:12px; border-radius:8px; }
/* Colores ya definidos antes; por si acaso: */
.btn-sky{ background:#0ea5e9; color:#fff; border-color:transparent; }
.btn-amber{ background:#f59e0b; color:#fff; border-color:transparent; }
.btn-emerald{ background:#10b981; color:#fff; border-color:transparent; }
.btn-sky:hover,.btn-amber:hover,.btn-emerald:hover{ filter:brightness(0.95); }
/* --- Columna 8: Pedido (alineación compacta) --- */
.col-order .ordergrid{ display:flex; flex-direction:column; gap:4px; }
/* Cada línea: label + input juntos, precio a la derecha */
.col-order .row{
display:flex;
align-items:center;
gap:6px;
}
/* Label estrecho, pegado a input */
.col-order .olbl{
color:#64748b;
font-size:12px;
width:auto;
min-width:68px; /* ajusta si lo quieres más corto/largo */
text-align:right;
}
/* Input compacto */
.col-order input{
width:90px; /* si necesitas más/menos ancho, cambia aquí */
height:24px;
padding:2px 6px;
text-align:right;
border:1px solid var(--line);
border-radius:6px;
font-size:12px;
box-sizing:border-box;
}
/* Precio pegado a la derecha de la celda */
.col-order .oprice{
margin-left:auto;
white-space:nowrap;
text-align:right;
font-size:12px;
color:#64748b;
}
/* Selector de modo de pedido */
.ordmode{ display:flex; gap:6px; margin-bottom:4px; }
.ordmode .seg{
padding:4px 8px; font-size:12px; border-radius:999px;
border:1px solid var(--line); background:#f8fafc; color:#334155;
}
.ordmode .seg.active{ background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
/* Campos en modo lectura */
input.readonly{
background:#f1f5f9; color:#64748b; pointer-events:none; opacity:.9;
}
/* Columna 9: Resumen (multilínea) */
.col-summary .sum{ display:flex; flex-direction:column; gap:6px; }
.col-summary .sum-total{
display:flex; gap:6px; align-items:baseline;
font-variant-numeric: tabular-nums;
}
.col-summary .sum-label{ color:#64748b; font-size:12px; }
.col-summary .sum-units{ font-weight:600; }
.col-summary .sum-break{ display:flex; flex-direction:column; gap:2px; }
.col-summary .sum-line{ font-size:12px; color:#334155; }
.col-summary .sum-line b{
font-weight:600; font-variant-numeric: tabular-nums;
}
/* Mezcla: barra de toggles */
.mixbar{ display:flex; gap:6px; margin-bottom:4px; }
.mixbar .mix{
padding:4px 8px; font-size:12px; border-radius:999px;
border:1px solid var(--line); background:#f8fafc; color:#334155;
}
.mixbar .mix.on{ background:#10b981; color:#fff; border-color:#10b981; } /* activo (verde) */
/* Campos en lectura cuando el tipo no está activo */
input.readonly{
background:#f1f5f9; color:#64748b; pointer-events:none; opacity:.9;
}
/* Columna 8: layout compacto (como ya tenías) */
.col-order .ordergrid{ display:flex; flex-direction:column; gap:4px; }
.col-order .row{ display:flex; align-items:center; gap:6px; }
.col-order .olbl{ color:#64748b; font-size:12px; min-width:68px; text-align:right; }
.col-order input{ width:90px; height:24px; padding:2px 6px; text-align:right; border:1px solid var(--line); border-radius:6px; font-size:12px; box-sizing:border-box; }
.col-order .oprice{ margin-left:auto; white-space:nowrap; text-align:right; font-size:12px; color:#64748b; }
/* Botones rápidos junto a los inputs */
.qty-quick{ display:flex; gap:4px; margin-left:4px; }
.qbtn{
min-width:32px; height:24px; padding:0 8px;
border:1px solid var(--line); border-radius:6px;
background:#f8fafc; color:#334155; font-size:12px; line-height:22px;
}
.qbtn:disabled{ opacity:.5; cursor:not-allowed; }
/* Cuando un tipo está apagado (toggle mix off), input y quicks quedan en lectura */
input.readonly{ background:#f1f5f9; color:#64748b; pointer-events:none; opacity:.9; }
input.readonly ~ .qty-quick .qbtn{ opacity:.5; pointer-events:none; }
/* Sin flechas en number (WebKit) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
/* Sin flechas en Firefox */
input[type=number]{ -moz-appearance: textfield; }
/* Evitar scroll del ratón cambiando el valor */
input[type=number]:focus{ outline: none; }
/* Unidades-only: layout compacto */
.ordergrid.units-only{ display:flex; flex-direction:column; gap:6px; }
.ordergrid.units-only .row{ display:flex; align-items:center; gap:8px; }
.ordergrid.units-only .olbl{ color:#64748b; font-size:12px; min-width:72px; text-align:right; }
.ordergrid.units-only .qty-units{
width:110px; height:28px; padding:2px 8px; text-align:right;
border:1px solid var(--line); border-radius:6px; font-size:13px; box-sizing:border-box;
}
.ordergrid.units-only .dist{ font-size:12px; color:#334155; line-height:1.25; }
.ordergrid.units-only .dist .muted{ color:#64748b; }
.ordergrid.units-only .dist-line b{ font-variant-numeric: tabular-nums; }
/* Ocultar flechas en number */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
input[type=number]{ -moz-appearance: textfield; }
/* Diseño en línea para el pedido */
.ordergrid.units-line {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.ordergrid.units-line .qty-units {
width: 120px;
height: 28px;
padding: 2px 8px;
text-align: right;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 13px;
box-sizing: border-box;
}
.ordergrid.units-line .dist-inline {
font-size: 12px;
color: #334155;
white-space: nowrap;
}
.ordergrid.units-line .dist-inline span {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: #0f172a;
}
.ordergrid.units-line .prices.tiny {
font-size: 11px;
color: #64748b;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* Ocultar flechas */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number]{ -moz-appearance:textfield; }
/* ==== Tabla de resultados ancha y adaptable ==== */
.results {
width: 100%;
overflow-x: auto; /* Permite scroll horizontal si hace falta */
-webkit-overflow-scrolling: touch; /* Suaviza en móviles */
}
.results table {
width: max-content; /* Se adapta al contenido total */
min-width: 100%; /* Pero nunca menos que el ancho del contenedor */
border-collapse: collapse;
}
.results th,
.results td {
white-space: nowrap; /* Evita que las celdas se partan en varias líneas */
}
.col-actions {
width: 160px; /* Espacio fijo para los tres botones */
text-align: center;
}
.col-desc {
white-space: normal; /* Pero permitimos multilínea solo en descripción */
max-width: 380px;
}
/* ===== Tabla: adaptable y sin scroll cuando no hace falta ===== */
.results { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.results table {
width: 100%; /* por defecto ocupa el contenedor, sin scroll */
min-width: 100%;
border-collapse: collapse;
table-layout: auto;
}
.results.is-wide table {
width: max-content; /* solo si hace falta: deja crecer y aparece scroll */
min-width: 100%;
}
.results th, .results td { white-space: nowrap; }
.col-desc, .col-fam { white-space: normal; }
/* anchos mínimos para que no se “aplasten” controles */
.col-actions { width: 180px; text-align: center; }
.col-order { min-width: 280px; }
.col-pack { min-width: 160px; }
/* Contenido y footer con el mismo ancho centrado */
.wrap,
.site-footer .footer-inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 16px;
}
/* Separaciones para que “respire” como en tus fotos */
.wrap { margin-top: 18px; }
.site-footer { margin-top: 20px; }
/* === Tabla: evitar scroll si cabe; activarlo solo cuando no quepa === */
.results { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.results table { width: 100%; min-width: 100%; border-collapse: collapse; table-layout: auto; }
.results.is-wide table { width: max-content; min-width: 100%; }
.results th, .results td { white-space: nowrap; }
.col-desc, .col-fam { white-space: normal; }
/* — Anchos pensados para ganar espacio en Descripción — */
/* Descripción con 3 líneas reales antes de elipsis para aprovechar el nuevo ancho */
.col-desc .desc2{
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 520px; /* aumenta si aún quieres más */
line-height: 1.25;
}
/* Modal de filtros: tamaño cómodo y por encima de cabecera/tabla */
#modal-filtros { z-index: 1300; } /* > thead sticky, > topbar */
#modal-filtros .modal-card.modal-filtros-card {
width: 920px;
max-width: calc(100vw - 48px);
max-height: 82vh;
display: flex;
flex-direction: column;
}
#modal-filtros .modal-body { overflow: auto; }
/* Modo minimizado: se pliega la tarjeta */
#modal-filtros.min .modal-card {
height: 44px;
overflow: hidden;
cursor: pointer;
}
#modal-filtros .modal-head { display:flex; justify-content:space-between; align-items:center; }
#modal-filtros .modal-actions .btn { margin-left: 8px; }
/* === Fix: filtros en una sola columna y sin overflow === */
/* El panel de filtros no debe crear scroll horizontal */
#filters,
#filters.filters-box {
max-width: min(1100px, 96vw);
overflow-x: hidden;
}
/* Fuerza la rejilla del panel a una sola columna (todo apilado) */
#filters .filters-grid {
display: grid;
grid-template-columns: 1fr; /* <— una única columna */
grid-auto-rows: auto;
gap: 16px;
align-items: start;
}
/* Asegura que "Almacenes" ocupa el ancho disponible y no ensancha el panel */
#filters .f-warehouses {
max-width: 100%;
}
/* Las pastillas de almacén se adaptan al ancho, sin romper el layout */
#filters .f-warehouses .whs-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* Por si algún estilo previo fija anchuras, neutralizamos */
#filters .f-col,
#filters .f-search,
#filters .f-warehouses {
width: 100%;
min-width: 0;
}
.unit-net-inline {
font-size: 0.9rem;
font-weight: 600;
color: #333;
}
.unit-net-inline .muted {
color: #888;
margin-right: 2px;
}
/* columna 8: input más estrecho y en línea */
.col-order .units-line .qty-units{
width: 6.2rem; /* antes era muy ancho */
display: inline-block; /* evita salto de línea */
}
/* bloque del precio pegado al input */
.col-order .unit-net-inline{
margin-left: .6rem;
white-space: nowrap;
vertical-align: middle;
display: flex !important;
}
/* porcentaje en azul */
.col-order .pct-badge{
color: #2563eb; /* azul (tailwind blue-600) */
font-weight: 600;
}
/* cuando el cliente es tipo 104: ocultar % y base */
.col-order .unit-net-inline.is-104 .pct-badge,
.col-order .unit-net-inline.is-104 .base-wrap{ display: none; }
.unit-net-inline .pct-badge { color:#2563eb; font-weight:600; }
.unit-net-inline.is-104 .pct-badge,
.unit-net-inline.is-104 .base-wrap { display:none; }
/* === Ajuste pantalla de login === */
.login-card {
width: min(340px, 90vw); /* más estrecha */
padding: 22px 20px; /* margenes proporcionados */
align-items: center; /* centra el contenido dentro */
text-align: center; /* centra texto y botones */
}
/* Logo ligeramente más grande para compensar el nuevo ancho */
.login-logo {
width: 240px;
margin-bottom: 12px;
}
/* Centrar título "Acceso" */
.login-card h2 {
text-align: center;
margin: 6px 0 16px 0;
}
/* === Campo de clave con botón ojo === */
.password-wrapper {
position: relative;
display: flex;
align-items: center;
}
.password-wrapper input {
flex: 1;
padding-right: 36px; /* deja espacio al icono */
}
.toggle-pass {
position: absolute;
right: 8px;
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: #64748b;
opacity: 0.7;
transition: opacity .2s;
}
.toggle-pass:hover {
opacity: 1;
}
/* === Login más compacto y alineado a la izquierda === */
.login-card {
width: min(340px, 90vw);
padding: 20px;
text-align: left; /* alinea texto a la izquierda */
align-items: flex-start; /* alinea contenido al inicio */
gap: 8px; /* menos espacio entre elementos */
}
.login-logo {
width: 220px;
margin: 0 auto 8px auto; /* logo centrado, resto a la izquierda */
display: block;
}
.login-card h2 {
margin: 4px 0 10px 0; /* menos separación arriba y abajo */
font-size: 20px;
font-weight: 700;
}
.login-card label {
margin-bottom: 4px;
}
.login-card input {
margin-bottom: 10px;
}
/* compacta el bloque del botón */
.login-card button {
margin-top: 4px;
}
/* campo de clave con el ojo */
.password-wrapper {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.password-wrapper input {
width: 100%;
padding-right: 36px;
}
.toggle-pass {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: #64748b;
opacity: 0.7;
transition: opacity .2s;
}
.toggle-pass:hover {
opacity: 1;
}
/* === Login compacto y equilibrado === */
.login-card {
width: min(340px, 90vw);
padding: 20px;
text-align: left; /* inputs alineados a la izquierda */
align-items: flex-start;
gap: 8px;
}
/* Logo centrado */
.login-logo {
width: 220px;
display: block;
margin: 0 auto 8px auto;
}
/* Título centrado */
.login-card h2 {
width: 100%;
text-align: center;
margin: 6px 0 14px 0;
font-size: 22px;
font-weight: 700;
}
/* Etiquetas más pegadas al input */
.login-card label {
display: block;
margin-bottom: 2px; /* más cerca del input */
font-weight: 500;
color: #444;
}
/* Inputs más compactos */
.login-card input {
margin-bottom: 10px;
width: 100%;
}
/* Campo de clave con ojo centrado verticalmente */
.password-wrapper {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.password-wrapper input {
width: 100%;
padding-right: 38px; /* espacio para el icono */
}
.toggle-pass {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%); /* centra el ojo verticalmente */
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: #64748b;
opacity: 0.7;
transition: opacity .2s;
}
.toggle-pass:hover {
opacity: 1;
}
/* Botón de entrar más integrado */
.login-card button {
margin-top: 8px;
}
/* === Campo de clave con icono ajustado === */
.password-wrapper {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.password-wrapper input {
width: 100%;
padding-right: 38px; /* deja hueco para el icono */
}
.toggle-pass {
position: absolute;
right: 8px;
top: 26%; /* antes 50%, lo subimos ligeramente */
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: #64748b;
opacity: 0.75;
transition: opacity .2s, transform .1s;
line-height: 1;
}
.toggle-pass:hover {
opacity: 1;
transform: translateY(-50%) scale(1.1); /* sutil aumento al pasar */
}
/* === Código clicable: mano y subrayado al pasar === */
.results tbody td:nth-child(1) .code {
cursor: pointer;
}
.results tbody td:nth-child(1) .code:hover {
text-decoration: underline;
filter: brightness(0.95);
}
/* === Imagen NO clicable: cursor normal === */
.results tbody td:nth-child(3) img.thumb {
cursor: default !important; /* quita la mano */
}
/* === Modal Lotes con estilo de ficha === */
.modal-card {
background:#fff;
border:1px solid var(--line);
border-radius:16px;
box-shadow:0 20px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.8);
overflow:hidden;
display:flex;
flex-direction:column;
width:min(760px, 92vw); /* tamaño similar al modal-lotes-card */
}
/* Cabecera degradada igual que la ficha */
.modal-card .modal-head {
background:linear-gradient(180deg,var(--brand),var(--brand-2));
color:#fff;
padding:10px 14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.modal-card .modal-head h4 {
margin:0;
font-size:16px;
font-weight:700;
}
.modal-card .modal-close {
background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.5);
color:#fff;
border-radius:8px;
font-size:18px;
line-height:1;
padding:2px 10px;
cursor:pointer;
}
.modal-card .modal-close:hover {
background:rgba(255,255,255,.25);
}
/* Cuerpo */
.modal-card .modal-body {
padding:14px 16px;
overflow:auto;
max-height:72vh;
background:#fff;
}
/* Toolbar coherente */
.modal-card .toolbar {
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:12px;
margin-bottom:12px;
flex-wrap:wrap;
}
.modal-card .toolbar-left {
display:flex;
gap:12px;
flex-wrap:wrap;
}
.modal-card .ctl {
display:flex;
flex-direction:column;
gap:4px;
font-size:12px;
}
.modal-card .toolbar-right {
display:flex;
gap:8px;
align-items:center;
}
/* Tabla interna igual que ficha */
.modal-card .table-wrap {
max-height:56vh;
overflow:auto;
border:1px solid var(--line);
border-radius:10px;
}
.modal-card .tbl {
width:100%;
border-collapse:separate;
border-spacing:0;
}
.modal-card .tbl thead th {
position:sticky;
top:0;
background:#fff;
z-index:1;
padding:8px 10px;
border-bottom:1px solid var(--line);
text-align:left;
}
.modal-card .tbl tbody td {
padding:8px 10px;
border-bottom:1px dashed var(--line);
}
.modal-card .tbl td.num {
text-align:right;
}
/* Totales coherentes */
.modal-card .totals {
margin-top:10px;
border-top:1px solid var(--line);
padding-top:8px;
}
.modal-card .totals .trow {
display:flex;
justify-content:space-between;
padding:4px 0;
}
.modal-card .totals .trow.grand {
font-weight:700;
border-top:1px dashed var(--line);
margin-top:4px;
padding-top:8px;
}
/* Modal movible: posicionamiento y feedback */
.modal-card{
position: fixed; /* imprescindible para moverlo */
left: 50%; top: 50%; /* posición inicial centrada */
transform: translate(-50%, -50%);
}
.modal-card .modal-head{
cursor: move; /* icono de “mover” */
user-select: none; /* evita seleccionar texto al arrastrar */
}
/* Estilo “ficha” + tamaño para Compras */
.modal-card{
background:#fff;
border:1px solid var(--line);
border-radius:16px;
box-shadow:0 20px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.8);
overflow:hidden;
display:flex; flex-direction:column;
position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
}
.modal-card .modal-head{
background:linear-gradient(180deg,var(--brand),var(--brand-2));
color:#fff; padding:10px 14px;
display:flex; align-items:center; justify-content:space-between; gap:8px;
cursor:move; user-select:none; /* arrastrable */
}
.modal-card .modal-close{
background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.5);
color:#fff; border-radius:8px; font-size:18px; line-height:1; padding:2px 10px; cursor:pointer;
}
.modal-card .modal-body{ padding:14px 16px; overflow:auto; max-height:72vh; }
/* ancho recomendado para compras */
.modal-compras-card{ width:min(900px,92vw); }
/* Oculta versiones antiguas del total si existieran */
.total-inline, .line-total{ display:none !important; }
.col-order .qty-units{ vertical-align:middle; }
.total-top{
display:inline-block;
vertical-align:middle;
font-weight:700;
margin-left:8px;
white-space:nowrap;
}
.col-order .qty-units{ vertical-align:middle; }
.total-inline, .line-total{ display:none !important; }
/* --- Columna TOTAL --- */
td.col-total {
text-align: right;
vertical-align: middle;
white-space: nowrap;
font-size: 1.1em;
padding-right: 12px;
/* ancho fijo y no expandible */
width: 120px;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis; /* muestra ... si el texto se pasa */
}
/* Estilo del total */
td.col-total .line-total {
display: inline-block !important;
font-weight: 700;
color: #222;
letter-spacing: 0.3px;
padding: 0 12px;
}
/* =========================================================
MODAL v2 — 2 columnas (Familias / Marcas) + barra naranja
========================================================= */
.modal2 {
position: fixed;
inset: 0;
display: none; /* lo muestras en JS poniendo display:flex */
align-items: center;
justify-content: center;
z-index: 9999;
}
.modal2-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
}
.modal2-window {
position: relative;
background: #fff;
border-radius: 12px;
width: 82%;
max-width: 1120px; /* más compacto que antes */
max-height: 104vh;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,.3);
display: flex;
flex-direction: column;
}
/* ===== Cabecera naranja + movimiento (drag en JS) ===== */
.modal2-header {
user-select: none;
cursor: move;
background: #f27c22;
color: #fff;
padding: 10px 14px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal2-header h3 {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
}
.modal2-header .btn-close {
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.35);
color: #fff;
border-radius: 8px;
padding: 2px 8px;
cursor: pointer;
}
/* ===== Cuerpo del modal ===== */
.modal2-body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 12px;
overflow: auto;
}
/* ===== Grid principal (2 columnas lado a lado) ===== */
.mf2-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* Familias | Marcas */
gap: 14px 18px;
}
.col { display: flex; flex-direction: column; min-width: 0; }
/* ===== Inputs y labels ===== */
.lbl { font-weight: 600; margin-bottom: 6px; }
.in {
width: 100%;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 6px 9px;
font-size: 0.9rem;
margin-bottom: 6px;
}
/* ===== Listas compactas (altura reducida) ===== */
.scroll-box {
border: 1px solid #e5e5e5;
border-radius: 10px;
padding: 4px;
overflow-y: auto;
background: #fafafa;
min-height: 28vh; /* más bajas para que quepan propiedades y botones */
max-height: 28vh;
}
.scroll-box .row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 8px;
border-radius: 8px;
background: #fff;
border: 1px solid #ececec;
margin: 3px 0;
font-size: 0.86rem;
}
.scroll-box .row:hover { background: #f7f7f7; }
.row .name {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
}
.row input[type="checkbox"] { margin-left: 10px; }
/* ===== Resumen (chips) ===== */
.summary {
font-size: .86rem;
color: #444;
margin-top: 6px;
background: #f8f8f8;
padding: 6px 8px;
border-radius: 8px;
border: 1px solid #eee;
}
.summary .pill {
display: inline-block;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 999px;
padding: 3px 9px;
margin: 4px 6px 0 0;
font-size: .78rem;
}
/* ===== Chips Propiedades ===== */
.section { margin-top: 6px; }
.checks.horizontal {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
justify-content: flex-start;
}
.checks .chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid #e5e7eb;
background: #f3f4f6;
cursor: pointer;
font-size: .9rem;
transition: all .15s ease;
}
.checks .chip input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.checks .chip.active {
background: #ffe6d3;
border-color: #f27c22;
box-shadow: inset 0 0 0 1px rgba(242,124,34,.25);
}
/* ===== Texto de lógica ===== */
#mf2-logic {
background: #fff8f0;
border: 1px dashed #f27c22;
color: #6a3a12;
padding: 7px 9px;
border-radius: 8px;
font-size: .9rem;
}
/* ===== Acciones (siempre visibles) ===== */
.actions {
position: sticky;
bottom: 0;
background: #fff;
padding-top: 8px;
margin-top: 6px;
border-top: 1px solid #eee;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.btn {
padding: 6px 12px;
border-radius: 6px;
border: 1px solid #ccc;
cursor: pointer;
font-size: .9rem;
}
.btn-orange { background: #f27c22; border: none; color: #fff; }
/* Scrollbar estética (sutil) */
.scroll-box::-webkit-scrollbar { width: 8px; }
.scroll-box::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 8px; }
.scroll-box::-webkit-scrollbar-thumb:hover { background: #b0b0b0; }
/* === Filtros superiores === */
.row-search {
display: flex;
gap: 6px;
align-items: center;
}
.row-search .in {
flex: 1;
}
.section {
margin-top: 4px;
margin-bottom: 10px;
}
/* Espacio fijo dentro del área de scroll principal
para que el contenido no quede oculto detrás de las barras */
.wrap {
padding-top: 160px; /* reserva espacio dentro del área scrolleable */
margin-top: 0; /* quitamos el margin externo */
box-sizing: border-box;
}
/* ==========================================================
LAYOUT PRINCIPAL FIJO - GESTIONA MATTERIA
(Topbar + Subtoolbar + Titlesbar + Área central + Footer)
========================================================== */
/* ----- VARIABLES DE ALTURA (ajusta fácilmente aquí) ----- */
:root {
--topbar-h: 60px; /* altura cabecera superior */
--subtoolbar-h: 112px; /* barra de herramientas (botones filtros/exportar/etc) */
--titlesbar-h: 30px; /* barra de títulos de columnas */
--footer-h: 80px; /* pie de página */
}
/* ----- CONFIGURACIÓN BASE DE PANTALLA ----- */
html, body {
margin: 0;
padding: 0;
height: 100vh; /* toda la altura de la ventana */
overflow: hidden; /* el scroll se limita al área central */
box-sizing: border-box;
background: #fff;
font-family: system-ui, sans-serif;
}
/* ==========================================================
1️⃣ CABECERA SUPERIOR (TOPBAR)
========================================================== */
header.topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--topbar-h);
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
background: #fff;
border-bottom: 1px solid #e9edf3;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
/* ==========================================================
2️⃣ BARRA DE HERRAMIENTAS (SUBTOOLBAR)
========================================================== */
#subToolbar.subtoolbar {
position: fixed;
top: var(--topbar-h);
left: 0;
right: 0;
height: var(--subtoolbar-h);
background: #f48024;
color: #fff;
display: flex !important;
align-items: center; /* centra verticalmente el hijo interno */
z-index: 95;
border-bottom: 1px solid #e26f18;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#subToolbar .subtoolbar-inner {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end; /* 👈 los baja hacia el fondo de la barra */
gap: 12px;
padding: 0 24px 12px 24px; /* 👈 añade 12px de margen inferior */
box-sizing: border-box;
}
#subToolbar .btn,
#subToolbar input[type="text"],
#subToolbar select {
background: #fff;
color: #333;
border: 0;
border-radius: 6px;
height: 40px; /* antes 36px -> un pelín más cómodo */
line-height: 40px; /* centrado vertical del texto */
padding: 0 12px;
font-size: 14px;
}
/* “Filtrar descripción” más ancho */
#tbFilter {
min-width: 420px;
flex: 1 1 420px;
}
/* ==========================================================
3️⃣ BARRA DE TÍTULOS (TITLESBAR)
========================================================== */
#titlesBar.titlesbar {
position: fixed;
top: calc(var(--topbar-h) + var(--subtoolbar-h));
left: 0;
right: 0;
height: 44px;
background: #fff;
display: flex;
align-items: center;
padding: 0 24px;
box-sizing: border-box;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
box-shadow: none;
z-index: 200;
}
#titlesBar .titlesbar-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
#titlesBar .titles-row {
width: 100%;
height: 100%;
display: grid;
grid-template-columns:
84px /* Código */
250px /* Descripción */
66px /* Imagen */
80px /* ✓ / Catálogo */
130px /* Cantidades */
130px /* Familia */
240px /* Marca */
170px /* Caja/Palet */
200px /* Condiciones */
280px /* Unidades/Distribución/Precio */
140px /* Total */
160px /* Propiedades */
130px; /* Acciones */
gap: 4px;
align-items: center;
font-weight: 600;
font-size: 13px; /* 🔹 Un poco más compacto */
line-height: 1.3;
color: #333; /* 🔹 Color más neutro */
background: transparent;
box-sizing: border-box;
}
/* columnas individuales */
#titlesBar .tcol {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
/* ==========================================================
4️⃣ ÁREA CENTRAL (APPBOX) CON SCROLL INTERNO
========================================================== */
#appBox.wrap {
position: fixed !important; /* <- Fijo entre cabecera y footer */
top: calc(var(--topbar-h) + var(--subtoolbar-h) + var(--titlesbar-h)) !important;
left: 0 !important;
right: 0 !important;
bottom: var(--footer-h) !important;
overflow-y: auto !important; /* scroll vertical solo aquí */
overflow-x: hidden;
background: #fff;
padding: 0px;
box-sizing: border-box;
scroll-behavior: smooth;
}
/* Asegura que las tablas y secciones internas usen todo el ancho */
#appBox .right.section {
width: 100%;
box-sizing: border-box;
}
/* ==========================================================
CONTENEDOR PRINCIPAL DE RESULTADOS SIN BORDES REDONDEADOS
========================================================== */
/* Elimina radios y sombras del área principal */
.right.section,
.right.section.elevated,
.card,
.filters-box {
border-radius: 0 !important;
box-shadow: none !important;
}
/* Asegura que los resultados ocupen todo el ancho útil */
.right.section {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
border: none !important;
}
/* ==========================================================
5️⃣ PIE DE PÁGINA (FOOTER)
========================================================== */
footer.site-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--footer-h);
background: #fff;
border-top: 1px solid #e9edf3;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #555;
z-index: 80;
box-shadow: 0 -2px 4px rgba(0,0,0,0.06);
}
footer .footer-inner {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
box-sizing: border-box;
}
/* Oculta el bloque de búsqueda dentro del modal filtros v2 */
#modal-filtros-v2 .section .row-search,
#modal-filtros-v2 .section label[for="mf2-search"] {
display: none !important;
}
tr.selected-for-catalog {
background-color: #e0f7fa !important;
}
/* =====================================================
BLOQUE DE CATÁLOGO (rótulo + contador)
===================================================== */
#catalogCounterBox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 16px;
font-family: inherit;
}
/* Rótulo "Catálogo" */
.catalog-label {
font-size: 0.75em;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #ffffff; /* 🔥 Blanco */
margin-bottom: 2px;
}
/* Contador */
#catalogCounter {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.9em;
font-weight: 500;
border-radius: 999px;
padding: 4px 10px;
background-color: #f3f4f6;
color: #374151;
min-width: 120px;
text-align: center;
transition: all 0.25s ease;
}
/* Estado activo */
#catalogCounter.active {
background-color: #10b981;
color: #fff;
box-shadow: 0 0 0 2px #065f46 inset;
}
/* Efecto flash al cambiar */
#catalogCounter.flash {
animation: flashHighlight 0.4s ease;
}
@keyframes flashHighlight {
from { transform: scale(1.1); opacity: 0.8; }
to { transform: scale(1); opacity: 1; }
}
#catalogCounterBox, #catalogCounter {
user-select: none;
}
#catalogCounterBox:hover #catalogCounter,
#catalogCounter:hover {
filter: brightness(0.95);
transform: translateY(-1px);
}
#catalogCounterBox:active #catalogCounter,
#catalogCounter:active {
transform: translateY(0);
}
/* ==========================================================
MÓDULO OBJETIVOS (tablero común)
========================================================== */
.objetivos-panel {
max-width: 1200px;
margin: 16px auto 80px auto;
padding: 16px 20px 24px;
box-sizing: border-box;
}
.obj-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.obj-header h2 {
margin: 0;
font-size: 20px;
}
.obj-kanban {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 960px) {
.objetivos-panel {
padding-inline: 12px;
}
.obj-kanban {
grid-template-columns: 1fr;
}
}
.obj-col {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 10px 10px 12px;
min-height: 220px;
box-sizing: border-box;
}
.obj-col h3 {
margin: 0 0 8px 0;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #374151;
}
.obj-col-body {
display: flex;
flex-direction: column;
gap: 8px;
/* ✔ 4 tarjetas completas visibles */
max-height: 504px;
overflow-y: auto;
padding-right: 4px;
}
/* Tarjetas */
.obj-card {
background: #ffffff;
border-radius: 10px;
border: 1px solid #e5e7eb;
padding: 10px 12px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
font-size: 13px;
cursor: pointer;
transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
/* ✔ altura estándar para 4 tarjetas perfectas */
min-height: 120px;
max-height: 120px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.obj-card:hover {
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
transform: translateY(-1px);
border-color: #f97316;
}
.obj-card-title {
font-weight: 600;
margin-bottom: 4px;
color: #111827;
}
.obj-card-body {
color: #374151;
font-size: 12px;
max-height: 4.2em;
overflow: hidden;
}
.obj-card-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-top: 4px;
}
.obj-tag {
border-radius: 999px;
padding: 2px 8px;
font-size: 11px;
border: 1px solid rgba(148, 163, 184, 0.7);
background: #f9fafb;
color: #475569;
}
.obj-tag.prio-alta {
border-color: #b91c1c;
background: #fef2f2;
color: #b91c1c;
}
.obj-tag.prio-media {
border-color: #92400e;
background: #fffbeb;
color: #92400e;
}
.obj-tag.prio-baja {
border-color: #15803d;
background: #ecfdf3;
color: #166534;
}
.obj-card-footer {
margin-top: 4px;
font-size: 11px;
color: #6b7280;
display: flex;
justify-content: space-between;
gap: 6px;
}
/* Botón objetivos activo */
#btnObjetivos.is-active {
background: #111827;
color: #ffffff;
}
/* Modal de objetivo */
#objModal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.55);
z-index: 950;
}
.obj-modal-window {
background: #ffffff;
border-radius: 14px;
padding: 16px 18px 14px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.45);
width: min(620px, 96vw);
max-height: 92vh;
overflow: auto;
position: relative;
box-sizing: border-box;
}
.obj-modal-window h2 {
margin: 0 0 10px 0;
font-size: 18px;
}
.obj-modal-close {
position: absolute;
right: 10px;
top: 8px;
cursor: pointer;
font-size: 20px;
line-height: 1;
color: #6b7280;
}
.obj-modal-close:hover {
color: #111827;
}
.obj-modal-window label {
display: block;
font-size: 13px;
margin-top: 6px;
margin-bottom: 2px;
font-weight: 500;
}
.obj-modal-window .input-full,
.obj-modal-window textarea,
.obj-modal-window select {
width: 100%;
box-sizing: border-box;
font-size: 13px;
padding: 6px 8px;
border-radius: 6px;
border: 1px solid #d1d5db;
}
.obj-modal-window textarea {
resize: vertical;
min-height: 70px;
}
/* Comentarios */
.obj-comments {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid #e5e7eb;
}
.obj-comments h3 {
margin: 0 0 8px 0;
font-size: 14px;
}
.obj-comment {
padding: 6px 8px;
border-radius: 8px;
background: #f3f4f6;
font-size: 12px;
margin-bottom: 6px;
}
.obj-comment-head {
display: flex;
justify-content: space-between;
font-weight: 500;
margin-bottom: 2px;
color: #4b5563;
}
.obj-comment-body {
white-space: pre-wrap;
color: #111827;
}
.obj-new-comment {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.obj-new-comment textarea {
min-height: 60px;
}
.obj-new-comment .btn {
align-self: flex-end;
padding-inline: 14px;
}
/* ==========================================================
MODO OBJETIVOS: ocultar barras fijas y listado
========================================================== */
/* Ocultar barra naranja, cabecera y listado cuando estamos en modo objetivos */
body.objetivos-mode #subToolbar.subtoolbar,
body.objetivos-mode #titlesBar.titlesbar,
body.objetivos-mode #appBox.wrap {
display: none !important;
}
body.objetivos-mode #objetivosPanel {
display: block !important;
position: relative;
max-width: 1300px;
/* 👇 bajamos el panel para que quede debajo de la topbar fija */
margin: 130px auto 40px auto;
min-height: calc(100vh - 220px);
}
.obj-color-pill {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 999px;
margin-right: 6px;
}
.obj-card-comments {
font-size: 11px;
color: #555;
background: #e5e7eb;
padding: 2px 6px;
border-radius: 12px;
margin-left: auto;
display: flex;
align-items: center;
gap: 4px;
}
.obj-card-comments .bubble {
font-size: 13px;
}
.obj-card-comments.has-new {
background: #fee2e2; /* rojo suave */
color: #b91c1c;
}
.obj-card-comments .new-count {
font-weight: 600;
}
.obj-cal-box {
margin-top: 24px;
padding: 12px;
background: #f3f4f6;
border-radius: 10px;
border: 1px solid #e5e7eb;
}
.obj-cal-box h3 {
font-size: 16px;
margin-bottom: 10px;
color: #374151;
}
.objetivos-panel {
padding-bottom: 80px; /* espacio para que no lo tape el footer */
}
/* Contenedor común para pvp... y el mensaje de umbral */
.prices-hint-wrap{
min-height: 2.5rem; /* ajusta si quieres un pelín más o menos */
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.prices-hint-wrap .prices.tiny{
margin-top: 0; /* que no meta margen extra */
}
.prices-hint-wrap .umbral-hint{
margin-top: 0.15rem;
}
/* Bloque de pedido (columna de unidades / precios) */
td.col-order .ordergrid {
display: flex;
flex-direction: column;
justify-content: flex-start;
row-gap: 2px;
}
/* Contenedor que reserva el sitio de la última línea
(pvp/picking... ó "A partir de X uds...") */
td.col-order .prices-hint-wrap {
margin-top: 2px;
min-height: 1.6em; /* una línea de texto, suficiente para ambos casos */
}
/* Por defecto: se ven los pvp y el hint está oculto */
td.col-order .prices-hint-wrap .umbral-hint {
display: none;
}
td.col-order .prices-hint-wrap .prices.tiny {
display: block;
}
/* Cuando hay umbral: se muestra el hint y se ocultan los pvp */
td.col-order .prices-hint-wrap.show-hint .umbral-hint {
display: block;
}
td.col-order .prices-hint-wrap.show-hint .prices.tiny {
display: none;
}
.modal.hidden { display:none; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; justify-content:center; align-items:center; }
.modal-window { background:white; padding:20px; border-radius:8px; width:600px; max-height:80vh; overflow:auto; }
.alt-row { padding:8px 0; border-bottom:1px solid #ddd; cursor:pointer; }
.alt-row:hover { background:#f5f5f5; }