/* Editor de codigos de barras / etiquetas -- asistente guiado de 4
   etapas. Reusa .encargos-panel-titulo-fila conventions, .categoria-card
   (inventory.css) y los tokens --pos-*/--brand-color del resto del
   admin. El tamano de cada etiqueta impresa es inline
   (barcode-labels.js), nunca clases CSS aqui. */

.etiqueta-wizard-shell{
 display:flex;
 flex-direction:column;
 gap:20px;
 color:var(--pos-text,#172033);
}

/* --- Header + dots de progreso --- */
.etiqueta-wizard-header{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 justify-content:space-between;
 gap:16px;
 padding-bottom:14px;
 border-bottom:1px solid var(--pos-line,#dbe3ef);
}
.etiqueta-wizard-header h2{ margin:0; font-size:22px; font-weight:800; letter-spacing:-.02em; }
.etiqueta-wizard-header p{ margin:4px 0 0; color:var(--pos-muted,#687386); font-weight:600; font-size:13px; }

.etiqueta-wizard-dots{ display:flex; gap:4px; }
.etiqueta-dot{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:4px;
 padding:6px 14px;
 border:0;
 background:transparent !important;
 cursor:pointer;
 opacity:.55;
}
.etiqueta-dot-num{
 width:26px;
 height:26px;
 display:grid;
 place-items:center;
 border-radius:50%;
 background:var(--pos-line,#dbe3ef);
 color:var(--pos-text,#172033);
 font-weight:800;
 font-size:12px;
}
.etiqueta-dot-label{ font-size:11px; font-weight:700; color:var(--pos-muted,#687386); white-space:nowrap; }
.etiqueta-dot.activa{ opacity:1; }
.etiqueta-dot.activa .etiqueta-dot-num{ background:var(--brand-color,#0d6efd); color:#fff; }
.etiqueta-dot.activa .etiqueta-dot-label{ color:var(--pos-text,#172033); }
.etiqueta-dot.completada{ opacity:1; }
.etiqueta-dot.completada .etiqueta-dot-num{ background:rgba(13,110,253,.16); color:var(--brand-color,#0d6efd); }

.etiqueta-etapa{ min-height:320px; }

.etiqueta-wizard-nav{
 display:flex;
 justify-content:space-between;
 gap:12px;
 padding-top:10px;
 border-top:1px solid var(--pos-line,#dbe3ef);
}
.etiqueta-wizard-nav button{ min-height:44px; padding:0 20px; }

/* --- Etapa 1: grid selector + mi lista --- */
.etiqueta-selector-grid{
 display:grid;
 grid-template-columns:1.6fr 1fr;
 gap:18px;
 align-items:start;
}
.etiqueta-selector-catalogo{ display:flex; flex-direction:column; gap:12px; min-width:0; }

.etiqueta-buscador-hero{
 display:flex;
 align-items:center;
 gap:10px;
 padding:4px 4px 4px 14px;
 border:1.5px solid var(--pos-line,#dbe3ef);
 border-radius:14px;
 background:var(--pos-surface-strong,#fff);
}
.etiqueta-buscador-hero:focus-within{ border-color:var(--brand-color,#0d6efd); }
.etiqueta-buscador-icono{ display:flex; color:var(--pos-muted,#687386); flex-shrink:0; }
.etiqueta-buscador-icono .ui-icon{ width:20px; height:20px; }
.etiqueta-buscador-hero input{
 flex:1;
 min-height:46px;
 border:0;
 background:transparent;
 color:var(--pos-text,#172033);
 font-size:15px;
 outline:none;
}
.etiqueta-explorar-toggle{
 flex-shrink:0;
 display:flex;
 align-items:center;
 gap:6px;
 min-height:38px;
 padding:0 14px;
 border:0;
 border-radius:10px;
 background:var(--pos-surface,#f8fafc) !important;
 color:var(--pos-text,#172033) !important;
 font-weight:700;
 font-size:12px;
 white-space:nowrap;
 cursor:pointer;
}
.etiqueta-explorar-toggle .ui-icon{ width:15px; height:15px; }
.etiqueta-explorar-toggle.activo{ background:var(--brand-color,#0d6efd) !important; color:#fff !important; }

.etiqueta-catalogo-area{ min-height:220px; }
.etiqueta-catalogo-vacio{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:10px;
 padding:48px 20px;
 text-align:center;
 color:var(--pos-muted,#687386);
 border:1.5px dashed var(--pos-line,#dbe3ef);
 border-radius:14px;
}
.etiqueta-catalogo-vacio-icono{ opacity:.5; }
.etiqueta-catalogo-vacio-icono .ui-icon{ width:34px; height:34px; }
.etiqueta-catalogo-vacio p{ margin:0; font-size:13px; font-weight:600; max-width:360px; }

.etiqueta-categorias-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
 gap:8px;
 margin:0 0 12px;
}

/* --- Tarjetas de producto (catalogo visual) --- */
.etiqueta-productos-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
 gap:10px;
}
.etiqueta-producto-card{
 display:flex;
 flex-direction:column;
 gap:8px;
 padding:10px;
 border:1.5px solid var(--pos-line,#dbe3ef);
 border-radius:14px;
 background:var(--pos-surface-strong,#fff);
 transition:border-color .12s ease;
}
.etiqueta-producto-card.en-lista{ border-color:var(--brand-color,#0d6efd); background:rgba(13,110,253,.05); }
.etiqueta-producto-card-img{
 width:100%;
 aspect-ratio:1/1;
 display:grid;
 place-items:center;
 border-radius:10px;
 background:var(--pos-surface,#f8fafc);
 overflow:hidden;
}
.etiqueta-producto-card-img-el{ width:100%; height:100%; object-fit:cover; }
.etiqueta-producto-card-img .producto-mini-icon{ font-size:34px; }
.etiqueta-producto-card-cuerpo{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.etiqueta-producto-card-nombre{
 font-size:13px;
 line-height:1.25;
 display:-webkit-box;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 overflow:hidden;
}
.etiqueta-producto-card-meta{ font-size:11px; color:var(--pos-muted,#687386); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.etiqueta-producto-card-codigo{ font-size:11px; color:var(--pos-muted,#687386); font-variant-numeric:tabular-nums; }
.etiqueta-producto-card-precio{ font-size:14px; font-weight:800; color:var(--pos-text,#172033); }
.etiqueta-producto-card-accion{ margin-top:2px; }
.etiqueta-btn-agregar-card{ width:100%; min-height:34px; font-size:12px; }

.etiqueta-stepper{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:8px;
 border:1px solid var(--pos-line,#dbe3ef);
 border-radius:10px;
 padding:2px 4px;
}
.etiqueta-stepper button{
 width:28px;
 height:28px;
 border:0;
 border-radius:8px;
 background:var(--pos-surface,#f8fafc) !important;
 color:var(--pos-text,#172033) !important;
 font-weight:800;
 font-size:16px;
 cursor:pointer;
}
.etiqueta-stepper span{ flex:1; text-align:center; font-weight:800; font-size:14px; }
.etiqueta-stepper-compacto{ flex-shrink:0; padding:2px; }
.etiqueta-stepper-compacto button{ width:22px; height:22px; font-size:13px; }
.etiqueta-stepper-compacto input{
 width:34px;
 border:0;
 background:transparent;
 text-align:center;
 font-weight:800;
 font-size:13px;
 color:var(--pos-text,#172033);
}

/* --- Mi lista de impresion --- */
.etiqueta-mi-lista-panel{
 position:sticky;
 top:12px;
 display:flex;
 flex-direction:column;
 gap:12px;
 padding:16px;
 border:1px solid var(--pos-line,#dbe3ef);
 border-radius:14px;
 background:var(--pos-surface-strong,#fff);
}
.etiqueta-mi-lista-header h3{ margin:0 0 2px; font-size:15px; font-weight:800; }
.etiqueta-mi-lista-header p{ margin:0; font-size:12px; color:var(--pos-muted,#687386); font-weight:700; }
.etiqueta-mi-lista-items{ display:flex; flex-direction:column; gap:6px; max-height:360px; overflow-y:auto; }

.etiqueta-mi-lista-fila{
 display:flex;
 align-items:center;
 gap:8px;
 padding:6px;
 border:1px solid var(--pos-line,#dbe3ef);
 border-radius:10px;
 background:var(--pos-surface,#f8fafc);
}
.etiqueta-mi-lista-fila-rota{ opacity:.65; }
.etiqueta-mi-lista-img{ flex-shrink:0; width:34px; height:34px; border-radius:8px; overflow:hidden; display:grid; place-items:center; background:var(--pos-surface-strong,#fff); }
.etiqueta-mi-lista-img-el{ width:100%; height:100%; object-fit:cover; }
.etiqueta-mi-lista-img .producto-mini-icon{ font-size:18px; }
.etiqueta-mi-lista-datos{ flex:1; min-width:0; display:flex; flex-direction:column; }
.etiqueta-mi-lista-datos strong{ font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.etiqueta-mi-lista-datos small{ font-size:11px; color:var(--pos-muted,#687386); }
.etiqueta-mi-lista-datos small a{ color:var(--brand-color,#0d6efd); font-weight:700; text-decoration:none; }

.etiqueta-mi-lista-acciones{ display:flex; gap:8px; }
.etiqueta-mi-lista-acciones button{ flex:1; min-height:36px; font-size:12px; }
.etiqueta-btn-vaciar{
 border:1px solid rgba(220,38,38,.3) !important;
 border-radius:10px;
 background:transparent !important;
 color:#dc2626 !important;
 font-weight:700;
 font-size:12px;
 cursor:pointer;
}

.etiqueta-mis-listas-bloque h4{ margin:4px 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--pos-muted,#687386); }
.etiqueta-mis-listas-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.etiqueta-chip-lista{ display:inline-flex; align-items:center; gap:6px; font-size:12px; min-height:30px; padding:0 12px; }
.etiqueta-chip-lista-conteo{ padding:1px 6px; border-radius:999px; background:var(--pos-line,#dbe3ef); font-weight:800; font-size:10px; }

/* "Guardar como..." (lista en Etapa 1, plantilla en Etapa 2) -- una
   tarjeta propia en vez de un label+input+boton sueltos, para que no
   se sienta como un formulario aparte pegado al final del panel. */
.etiqueta-guardar-fila{
 display:flex;
 align-items:end;
 gap:10px;
 margin-top:16px;
 padding:14px;
 border:1px solid var(--pos-line,#dbe3ef);
 border-radius:12px;
 background:var(--pos-surface,#f8fafc);
}
.etiqueta-guardar-fila label{
 flex:1;
 min-width:0;
 display:grid;
 gap:6px;
 color:var(--pos-text,#172033);
 font-size:12.5px;
 font-weight:700;
}
.etiqueta-guardar-fila input{
 min-height:42px;
 border:1.5px solid var(--pos-line,#dbe3ef);
 border-radius:10px;
 padding:0 14px;
 background:var(--pos-surface-strong,#fff);
 color:var(--pos-text,#172033);
 font-size:14px;
 transition:border-color .12s ease;
}
.etiqueta-guardar-fila input:focus{
 outline:none;
 border-color:var(--brand-color,#0d6efd);
}
.etiqueta-guardar-fila button{ flex-shrink:0; min-height:42px; }

/* --- Etapa 2: plantillas + acordeon --- */
.etiqueta-etapa2-layout{ display:flex; flex-direction:column; gap:20px; }
.etiqueta-plantillas-bloque h3{ margin:0 0 10px; font-size:15px; font-weight:800; }
.etiqueta-mis-plantillas-bloque{ margin-top:18px; padding-top:16px; border-top:1px solid var(--pos-line,#dbe3ef); }
.etiqueta-mis-plantillas-bloque h4{ margin:0 0 10px; font-size:13px; font-weight:800; color:var(--pos-muted,#687386); }

.etiqueta-plantillas-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
 gap:10px;
}
.etiqueta-plantilla-card{
 position:relative;
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:8px;
 padding:12px 8px;
 border:1.5px solid var(--pos-line,#dbe3ef);
 border-radius:14px;
 background:var(--pos-surface-strong,#fff);
 cursor:pointer;
 text-align:center;
}
.etiqueta-plantilla-card.activa{ border-color:var(--brand-color,#0d6efd); background:rgba(13,110,253,.05); }
.etiqueta-plantilla-card strong{ font-size:12px; }
.etiqueta-plantilla-card small{ font-size:10px; color:var(--pos-muted,#687386); margin-top:-4px; }
.etiqueta-plantilla-card-preview{
 display:flex;
 align-items:center;
 justify-content:center;
 width:100%;
 height:56px;
 overflow:hidden;
 pointer-events:none;
}
.etiqueta-plantilla-card-preview-personalizada{ color:var(--pos-muted,#687386); }
.etiqueta-plantilla-card-preview-personalizada .ui-icon{ width:26px; height:26px; }
.etiqueta-plantilla-card-guardada{ padding:0; border:1.5px solid var(--pos-line,#dbe3ef); border-radius:14px; overflow:hidden; }
.etiqueta-plantilla-card-guardada.activa{ border-color:var(--brand-color,#0d6efd); }
.etiqueta-plantilla-card-cuerpo{ width:100%; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border:0; background:transparent !important; cursor:pointer; }
.etiqueta-plantilla-card-quitar{
 position:absolute;
 top:4px;
 right:4px;
 z-index:1;
 width:20px;
 height:20px;
 border:0;
 border-radius:50%;
 background:rgba(220,38,38,.12) !important;
 color:#dc2626 !important;
 font-size:14px;
 line-height:1;
 cursor:pointer;
}

.etiqueta-acordeon-grupo{ display:flex; flex-direction:column; gap:10px; }
.etiqueta-seccion-colapsable{
 border:1px solid var(--pos-line,#dbe3ef);
 border-radius:14px;
 background:var(--pos-surface-strong,#fff);
 overflow:hidden;
}
.etiqueta-seccion-header{
 width:100%;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:14px 16px;
 border:0;
 background:transparent !important;
 color:var(--pos-text,#172033) !important;
 font-weight:800;
 font-size:14px;
 cursor:pointer;
}
.etiqueta-seccion-chevron{ transition:transform .15s ease; color:var(--pos-muted,#687386); font-size:18px; }
.etiqueta-seccion-colapsable[data-colapsado="0"] .etiqueta-seccion-chevron{ transform:rotate(90deg); }
.etiqueta-seccion-contenido{ padding:0 16px 16px; }

.etiqueta-diseno-checks{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px 16px;
 margin:2px 0 18px;
}
.etiqueta-diseno-checks label{
 display:flex;
 align-items:center;
 gap:8px;
 font-size:13px;
 font-weight:600;
 color:var(--pos-text,#172033);
}
.etiqueta-diseno-checks input[type="checkbox"]{
 width:18px;
 height:18px;
 accent-color:var(--brand-color,#0d6efd);
 cursor:pointer;
}

.etiqueta-papel-opciones{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
.etiqueta-papel-boton{
 min-height:34px;
 padding:0 14px;
 border:1px solid var(--pos-line,#dbe3ef) !important;
 border-radius:999px;
 background:transparent !important;
 color:var(--pos-text,#172033) !important;
 font-weight:700;
 font-size:12px;
 cursor:pointer;
}
.etiqueta-papel-boton.activo{ background:var(--brand-color,#0d6efd) !important; color:#fff !important; border-color:transparent !important; }
.etiqueta-filas-indicador{ margin:6px 0 0; padding:10px 12px; border-radius:10px; background:var(--pos-surface,#f8fafc); color:var(--pos-muted,#687386); font-size:12px; font-weight:700; }

/* --- Etapa 3: vista previa paginada + zoom --- */
.etiqueta-preview-toolbar{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 margin-bottom:14px;
 padding:10px 14px;
 border:1px solid var(--pos-line,#dbe3ef);
 border-radius:12px;
 background:var(--pos-surface,#f8fafc);
}
.etiqueta-preview-paginacion,
.etiqueta-preview-zoom{ display:flex; align-items:center; gap:8px; }
.etiqueta-preview-paginacion button,
.etiqueta-preview-zoom button{
 width:32px;
 height:32px;
 display:grid;
 place-items:center;
 border:1px solid var(--pos-line,#dbe3ef) !important;
 border-radius:8px;
 background:var(--pos-surface-strong,#fff) !important;
 color:var(--pos-text,#172033) !important;
 cursor:pointer;
}
.etiqueta-preview-paginacion button:disabled,
.etiqueta-preview-zoom button:disabled{ opacity:.4; cursor:not-allowed; }
.etiqueta-preview-paginacion button .ui-icon,
.etiqueta-preview-zoom button .ui-icon{ width:16px; height:16px; }
.etiqueta-preview-paginacion span{ font-size:12px; font-weight:700; color:var(--pos-muted,#687386); min-width:90px; text-align:center; }
.etiqueta-preview-zoom input[type="range"]{ width:110px; }
#etiquetaZoomTexto{ font-size:12px; font-weight:700; color:var(--pos-muted,#687386); min-width:38px; }
.etiqueta-preview-papel-badge{
 padding:4px 12px;
 border-radius:999px;
 background:rgba(13,110,253,.12);
 color:var(--brand-color,#0d6efd);
 font-weight:800;
 font-size:11px;
 text-transform:uppercase;
 letter-spacing:.03em;
}

.etiqueta-preview-scroll{
 max-height:600px;
 overflow:auto;
 padding:24px;
 border:1px dashed var(--pos-line,#dbe3ef);
 border-radius:14px;
 background:var(--pos-surface,#f8fafc);
 display:flex;
 justify-content:center;
}
.etiqueta-preview-hoja{
 flex-shrink:0;
 background:#fff;
 box-shadow:0 4px 20px rgba(15,23,42,.12);
 transform-origin:top center;
}
body.oscuro .etiqueta-preview-hoja{ background:#fff; }

/* --- Etapa 4: resumen final --- */
.etiqueta-resumen-final{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:32px 16px; text-align:center; }
.etiqueta-resumen-final h3{ margin:0; font-size:20px; font-weight:800; }
.etiqueta-resumen-tarjetas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; width:100%; max-width:560px; }
.etiqueta-resumen-tarjeta{
 display:flex;
 flex-direction:column;
 gap:2px;
 padding:16px 10px;
 border:1px solid var(--pos-line,#dbe3ef);
 border-radius:14px;
 background:var(--pos-surface-strong,#fff);
}
.etiqueta-resumen-tarjeta strong{ font-size:20px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.etiqueta-resumen-tarjeta span{ font-size:11px; color:var(--pos-muted,#687386); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.etiqueta-resumen-aviso{ margin:0; padding:10px 16px; border-radius:10px; background:rgba(217,119,6,.12); color:#b45309; font-size:12px; font-weight:700; }
.etiqueta-btn-imprimir-final{
 display:flex;
 align-items:center;
 gap:8px;
 min-height:52px;
 padding:0 32px;
 border:0;
 border-radius:14px;
 background:var(--brand-color,#0d6efd) !important;
 color:#fff !important;
 font-weight:800;
 font-size:16px;
 cursor:pointer;
}
.etiqueta-btn-imprimir-final .ui-icon{ width:20px; height:20px; }

/* --- Etiqueta individual (mayormente inline, esto es solo respaldo) --- */
.hoja-etiquetas{ background:#fff; }
.etiqueta-producto{ background:#fff; color:#111827; }
.etiqueta-barcode svg{ max-width:100%; }
.etiqueta-fila-agarradera{ flex-shrink:0; width:16px; text-align:center; color:var(--pos-muted,#687386); cursor:grab; user-select:none; }

@media (max-width:900px){
 .etiqueta-selector-grid{ grid-template-columns:1fr; }
 .etiqueta-mi-lista-panel{ position:static; }
 .etiqueta-buscador-hero{ flex-wrap:wrap; }
 .etiqueta-explorar-toggle{ width:100%; justify-content:center; }
 .etiqueta-wizard-dots{ flex-wrap:wrap; }
 .etiqueta-dot-label{ display:none; }
}