/* Entre Corazones · Panel de tiendas (inventario, pedidos, traslados, mostrador, promociones, configuración y reportes).
   Usa los mismos colores, tipografías y componentes de la tienda (tienda.css). */

body.modo-panel { background: #F6F4F7; }

/* ---------- Marco ---------- */
.panel { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.panel__lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px; padding: 18px 14px;
  background: var(--tinta); color: #EAE5EE;
}
.panel__marca { display: flex; align-items: center; gap: 10px; padding: 2px 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.panel__marca a { line-height: 0; }
.panel__marca img { height: 44px; width: auto; }
.panel__marca span { font-family: var(--f-display); font-weight: 800; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #D3CADB; line-height: 1.2; }
.panel__cerrar { display: none; margin-left: auto; color: #fff; }
.panel__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.panel__nav a {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 12px; border-radius: 10px;
  color: #EAE5EE; font-weight: 650; font-size: 15px; text-decoration: none;
}
.panel__nav a:hover { background: rgba(255, 255, 255, .09); text-decoration: none; }
.panel__nav a[aria-current="page"] { background: var(--morado); color: #fff; }
.panel__nav a:focus-visible, .panel__enlace:focus-visible, .panel__marca a:focus-visible { outline-color: #fff; }
.panel__contador {
  margin-left: auto; display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: #fff; color: var(--tinta); font-family: var(--f-display); font-size: 12px; font-weight: 800;
}
.panel__usuario { margin-top: auto; display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
.panel__persona { display: flex; align-items: center; gap: 10px; padding: 0 8px 8px; }
.panel__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--morado-200); color: var(--morado-800); font-family: var(--f-display); font-weight: 800; }
.panel__nombre { font-weight: 750; font-size: 14px; color: #fff; }
.panel__rol { font-size: 13px; color: #D3CADB; }
.panel__enlace { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 10px; color: #EAE5EE; font-size: 14px; text-decoration: none; }
.panel__enlace:hover { background: rgba(255, 255, 255, .09); text-decoration: none; color: #fff; }
.panel__fondo { display: none; }

.panel__cuerpo { min-width: 0; display: flex; flex-direction: column; }
.panel__barra {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 32px;
  background: rgba(246, 244, 247, .95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--gris-200);
}
.panel__abrir { display: none; }
.panel__titulos { flex: 1; min-width: 0; }
.panel__titulos h1 { font-size: 26px; font-weight: 850; overflow-wrap: anywhere; }
.panel__migas { font-size: 14px; font-weight: 650; }
.panel__migas a::after { content: ' ›'; color: var(--gris-600); }
.panel__contexto { flex: none; }
.panel__selector { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.panel__selector select { min-width: 240px; }
.panel__tienda-fija { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--gris-200); font-weight: 750; font-size: 14px; }
.panel__tienda-fija .icono { color: var(--morado); }
.panel__contenido { width: 100%; max-width: 1440px; padding: 24px 32px 56px; display: grid; gap: 20px; align-content: start; }

/* ---------- Ingreso ---------- */
.panel-acceso .acceso__caja { max-width: 460px; }

/* ---------- Piezas ---------- */
.panel-saludo { font-size: 17px; color: var(--carbon); }
.panel-intro { color: var(--carbon); max-width: 82ch; }
.panel-sutil { font-size: 13px; color: var(--gris-700); }
.panel-vacio { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--gris-700); }
.panel-vacio .icono { color: var(--exito); }
.panel-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.panel-acciones-fila { display: flex; align-items: center; gap: 6px; }
.panel-lista-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-conteo { font-size: 14px; font-weight: 650; color: var(--gris-700); }
.panel-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--gris-700); }
.panel-leyenda .nivel + .nivel { margin-left: 8px; }
.panel-fijo { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 14px; border-radius: 10px; background: var(--gris-100); font-weight: 650; }
.panel-fijo .icono { color: var(--morado); }
input.entrada--chica { padding-right: 10px; }
.entrada--precio { width: 112px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.kpi { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: var(--radio); background: #fff; border: 1px solid var(--gris-200); min-width: 0; }
.kpi--destacado { box-shadow: inset 0 3px 0 var(--morado); }
.kpi__titulo { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--gris-700); }
.kpi__titulo .icono { color: var(--morado); }
.kpi__valor { font-family: var(--f-display); font-weight: 850; font-size: 30px; line-height: 1.1; color: var(--tinta); overflow-wrap: anywhere; }
.kpi__valor--texto { font-size: 17px; line-height: 1.45; font-weight: 750; }
.kpi__detalle { font-size: 13px; line-height: 1.45; color: var(--gris-700); }
.kpi__enlace { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-family: var(--f-display); font-weight: 800; font-size: 14px; color: var(--morado); }

.panel-caja { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; padding: 18px 20px; border-radius: var(--radio); background: #fff; border: 1px solid var(--gris-200); }
.panel-caja__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-caja__cabeza h2 { font-size: 18px; font-weight: 850; }
.panel-caja__n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--morado-100); color: var(--morado-800); font-family: var(--f-display); font-weight: 800; font-size: 13px; }
.panel-caja__ayuda { font-size: 14px; color: var(--gris-700); }
.panel-seccion { display: grid; gap: 12px; }
.panel-seccion__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-seccion__cabeza h2 { font-size: 20px; font-weight: 850; }
.panel-seccion__dato { font-size: 15px; color: var(--carbon); }

.panel-columnas { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.panel-columnas--mitad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-columnas__principal, .panel-columnas__lateral, .panel-columnas__pila { display: grid; gap: 20px; min-width: 0; }

/* Estados, tiendas y existencias */
.estado { white-space: nowrap; }
.chip-tienda {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 8px; border-radius: 6px; vertical-align: middle; white-space: nowrap;
  font-family: var(--f-display); font-weight: 800; font-size: 12px; background: var(--gris-100); color: var(--carbon); border: 1px solid var(--gris-300);
}
.chip-tienda--bga { background: var(--morado-100); border-color: var(--morado-200); color: var(--morado-800); }
.chip-tienda--flo { background: #E3ECFB; border-color: #C9D8F5; color: #1F3A8A; }
.chip-tienda--pie { background: var(--exito-fondo); border-color: #C6E5D2; color: #155C39; }
.chip-tienda--marca { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.lista-panel__estado .chip-tienda, td > .chip-tienda:first-child, th > .chip-tienda:first-child { margin-left: 0; }
.nivel { display: inline-block; min-width: 32px; padding: 2px 8px; border-radius: 6px; text-align: center; font-family: var(--f-display); font-weight: 750; }
.nivel--bajo { background: var(--aviso-fondo); color: var(--aviso); }
.nivel--agotado { background: var(--error-fondo); color: var(--error); }
.inv-num { font-family: var(--f-display); font-weight: 850; font-size: 17px; }
.inv-otras { display: block; font-size: 12px; color: var(--gris-700); white-space: nowrap; }
.etiqueta-inactivo { display: inline-block; font-size: 12px !important; font-weight: 700; color: var(--aviso) !important; }
.mov { font-family: var(--f-display); font-weight: 850; white-space: nowrap; }
.mov--mas { color: var(--exito); }
.mov--menos { color: var(--error); }
.panel-nota { color: var(--gris-700); font-style: italic; }

/* Tablas */
.panel-tabla { background: #fff; }
.panel-tabla .tabla { font-size: 14px; }
.panel-tabla .tabla th, .panel-tabla .tabla td { padding: 10px 12px; vertical-align: middle; }
.panel-tabla .tabla tbody th { font-weight: 650; }
.panel-tabla .tabla tbody tr:hover { background: #FBFAFC; }
.tabla td small, .tabla th small { display: block; font-size: 13px; font-weight: 500; color: var(--gris-700); }
.tabla .num { text-align: right; white-space: nowrap; }
.panel-tabla__vacio { padding: 28px 12px !important; text-align: center; color: var(--gris-700); }
.panel-tabla td > .estado + .estado { margin-left: 4px; }
.panel-tabla td a:not(.boton) { text-decoration: underline; text-underline-offset: 3px; }
.panel-tabla .pildora--codigo { padding: 3px 10px; }
.sin-corte { white-space: nowrap; }
.panel-enlaces { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.celda-producto { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.celda-producto__img { flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--morado-50); }
.celda-producto__img svg { display: block; width: 100%; height: 100%; }
.celda-producto__texto { display: grid; gap: 1px; min-width: 0; font-weight: 500; }
.celda-producto__nombre { font-weight: 700; line-height: 1.3; }
.celda-producto__nombre a { color: var(--tinta); }
.celda-producto__nombre a:hover { color: var(--morado); }
.celda-producto small { font-size: 13px; color: var(--gris-700); }
.celda-producto__sku { letter-spacing: .02em; }

/* Filtros */
.panel-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; padding: 14px 16px; border-radius: var(--radio); background: #fff; border: 1px solid var(--gris-200); }
.panel-filtros__item { display: grid; gap: 4px; min-width: 150px; }
.panel-filtros__item > label { font-family: var(--f-display); font-weight: 700; font-size: 13px; }
.panel-filtros__item--buscar { flex: 1 1 260px; }
.panel-filtros__linea { display: flex; gap: 8px; }
.panel-filtros__buscar { position: relative; flex: 1; min-width: 0; }
.panel-filtros__buscar .icono { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--gris-600); pointer-events: none; }
.panel-filtros__buscar input { width: 100%; min-height: 40px; padding: 8px 12px 8px 36px; border: 1.5px solid var(--gris-300); border-radius: 8px; background: #fff; font-size: 15px; }
.panel-filtros__buscar input:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 3px rgba(94, 37, 144, .18); }
.panel-filtros__acciones { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.panel-filtros select { min-height: 40px; }

.panel-rapidos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.panel-rapidos a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--gris-300); background: #fff; color: var(--tinta); font-family: var(--f-display); font-weight: 750; font-size: 14px;
}
.panel-rapidos a:hover { border-color: var(--morado); text-decoration: none; }
.panel-rapidos a[aria-current] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.panel-rapidos__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--gris-100); color: var(--tinta); font-size: 12px; font-weight: 800; }
.panel-rapidos a[aria-current] .panel-rapidos__n { background: #fff; }

/* Listas del tablero */
.lista-panel { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-panel__item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gris-200); }
.lista-panel__item:first-child { border-top: 0; padding-top: 2px; }
.lista-panel__principal { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.lista-panel__titulo { font-family: var(--f-display); font-weight: 800; }
.lista-panel__texto { flex-basis: 100%; font-size: 14px; color: var(--carbon); }
.lista-panel__meta { font-size: 13px; color: var(--gris-700); }
.lista-panel__estado { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 8px; flex: none; max-width: 52%; }
.lista-panel .celda-producto { min-width: 0; }
.lista-panel__estado--pila { flex-direction: column; align-items: flex-end; }
.lista-panel--compacta .lista-panel__item { padding: 9px 0; }
.lista-panel--compacta .lista-panel__item:first-child { padding-top: 2px; }
.panel-nota-grafico { font-size: 14px; color: var(--carbon); }

/* Gráficas */
.grafico { margin: 0; display: grid; gap: 10px; min-width: 0; }
.grafico__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.grafico__titulo { font-family: var(--f-display); font-weight: 800; font-size: 15px; }
.grafico__leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--carbon); }
.grafico__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico__leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.grafico__tabla-btn { margin-left: auto; font-size: 14px; }
.grafico__lienzo { position: relative; }
.grafico__svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-rejilla { stroke: #ECE8EE; stroke-width: 1; }
.g-base { stroke: #CFC8D2; stroke-width: 1; }
.g-eje { font-family: var(--f-texto); font-size: 12px; fill: #6B6566; }
.g-resalte { fill: transparent; }
.g-columna.activa .g-resalte { fill: rgba(94, 37, 144, .07); }
.g-zona { fill: transparent; cursor: default; outline: none; }
.g-zona:focus-visible { fill: transparent; stroke: var(--morado); stroke-width: 2; }
.grafico__tooltip {
  position: absolute; top: 4px; z-index: 3; min-width: 176px; padding: 10px 12px; border-radius: 10px; pointer-events: none;
  background: #fff; border: 1px solid var(--gris-200); box-shadow: var(--sombra); font-size: 13px; color: var(--carbon);
}
.grafico__tip-total { font-family: var(--f-display); font-weight: 850; font-size: 17px; color: var(--tinta); }
.grafico__tip-fecha { margin-bottom: 4px; color: var(--gris-700); }
.grafico__tip-fila { display: flex; align-items: center; gap: 6px; }
.grafico__tip-fila i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.grafico__tip-fila strong { margin-left: auto; padding-left: 14px; color: var(--tinta); }
.grafico__tabla .panel-tabla { max-height: 340px; overflow-y: auto; }
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.barras li { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 14px; }
.barras__etiqueta { color: var(--carbon); }
.barras__pista { height: 14px; }
.barras__barra { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #6B35A3; }
.barras__valor { text-align: right; white-space: nowrap; font-weight: 750; color: var(--tinta); }
.barras__valor small { display: block; font-size: 12px; font-weight: 500; color: var(--gris-700); }

/* Detalle de pedido y traslado */
.panel-detalle__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--gris-700); }
.panel-detalle { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr); gap: 20px; align-items: start; }
.panel-detalle__principal, .panel-detalle__lateral { display: grid; gap: 20px; min-width: 0; }
.panel-detalle--una { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.panel-detalle__lateral .panel-caja p + p { margin-top: -6px; }
.panel-accion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 18px; padding: 16px; border-radius: 12px; background: var(--morado-50); border: 1px solid var(--morado-200); }
.panel-accion > div { flex: 1 1 280px; display: grid; gap: 4px; }
.panel-accion__titulo { font-family: var(--f-display); font-weight: 850; font-size: 16px; }
.panel-accion p:not(.panel-accion__titulo) { font-size: 14px; color: var(--carbon); }
[data-foco-accion]:focus { outline: none; }
.panel-cancelar { font-size: 14px; }
.pasos-panel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pasos-panel li { display: grid; justify-items: start; align-content: start; gap: 4px; padding-top: 10px; border-top: 3px solid var(--gris-200); font-size: 14px; color: var(--gris-700); }
.pasos-panel li.hecho, .pasos-panel li.actual { border-top-color: var(--morado); color: var(--tinta); }
.pasos-panel__punto { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gris-200); color: var(--carbon); font-family: var(--f-display); font-weight: 800; font-size: 13px; }
.pasos-panel li.hecho .pasos-panel__punto, .pasos-panel li.actual .pasos-panel__punto { background: var(--morado); color: #fff; }
.pasos-panel__nombre { font-family: var(--f-display); font-weight: 800; }
.pasos-panel small { font-size: 12px; color: var(--gris-700); }
.panel-lineas { list-style: none; margin: 0; padding: 0; display: grid; }
.panel-linea { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--gris-200); }
.panel-linea:first-child { border-top: 0; padding-top: 0; }
.panel-linea .celda-producto { min-width: 0; }
.panel-linea__cant { font-size: 14px; color: var(--gris-700); white-space: nowrap; }
.panel-linea__total { font-weight: 750; white-space: nowrap; }
.panel-totales { display: grid; gap: 6px; margin: 0; padding-top: 12px; border-top: 1px solid var(--gris-200); }
.panel-totales > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.panel-totales dt { color: var(--carbon); }
.panel-totales dt small { color: var(--gris-700); }
.panel-totales dd { margin: 0; font-weight: 700; white-space: nowrap; }
.panel-totales__total { font-family: var(--f-display); font-size: 18px; font-weight: 850; }
.panel-totales__total dt { color: var(--tinta); }
.panel-guia { display: flex; align-items: center; gap: 8px; }
.panel-guia .icono { color: var(--morado); }
.panel-nota-cliente { padding: 10px 12px; border-radius: 10px; background: var(--aviso-fondo); color: #5A3D00; font-size: 14px; }
.panel-historial { list-style: none; margin: 0 0 0 7px; padding: 0 0 0 20px; display: grid; gap: 14px; border-left: 2px solid var(--gris-200); }
.panel-historial li { position: relative; }
.panel-historial li::before { content: ''; position: absolute; left: -28px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--morado); }
.panel-historial__texto { font-weight: 650; font-size: 15px; }
.panel-historial__meta { font-size: 13px; color: var(--gris-700); }
.panel-nota-form { display: grid; gap: 10px; justify-items: start; }
.panel-nota-form .campo { width: 100%; }
.panel-nota-form textarea { min-height: 84px; }
.panel-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.panel-notas li { padding: 10px 12px; border-radius: 10px; background: var(--gris-100); font-size: 14px; }
.panel-notas small { display: block; margin-top: 4px; font-size: 12px; color: var(--gris-700); }

/* Ficha de inventario */
.ficha-inv { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--radio); background: #fff; border: 1px solid var(--gris-200); }
.ficha-inv__img { flex: none; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--morado-50); }
.ficha-inv__img svg { display: block; width: 100%; height: 100%; }
.ficha-inv__datos { display: grid; gap: 4px; font-size: 14px; color: var(--carbon); min-width: 0; }
.ficha-inv__opcion { font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--tinta); }

/* Documentos: entradas, salidas, traslados y mostrador */
.panel-doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.panel-doc__form { gap: 16px; }
.panel-doc__tiendas { margin-bottom: 4px; }
.armador__buscar { display: grid; gap: 6px; }
.armador__buscar > label { font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.armador__buscar .panel-filtros__buscar input { min-height: 48px; font-size: 16px; }
.armador__resultados { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.armador__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--gris-200); }
.armador__item .celda-producto { min-width: 0; }
.armador__precio { font-weight: 750; white-space: nowrap; }
.armador__nada { padding: 12px 0; color: var(--gris-700); }
.armador__vacio { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; border: 1.5px dashed var(--gris-300); border-radius: 12px; text-align: center; color: var(--gris-700); }
.armador__vacio .icono { color: var(--morado); }
.armador__tabla .celda-producto { min-width: 170px; }
.armador__resumen { font-size: 14px; color: var(--carbon); }
.armador__error { display: flex !important; align-items: center; gap: 4px; color: var(--error) !important; font-weight: 650 !important; }
.cantidad--panel { height: 38px; }
.cantidad--panel input {
  width: 46px; height: 100%; border: 0; background: transparent; text-align: center;
  font-family: var(--f-display); font-weight: 800; font-size: 15px; -moz-appearance: textfield; appearance: textfield;
}
.cantidad--panel input::-webkit-outer-spin-button, .cantidad--panel input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad--panel input:focus-visible { outline: 3px solid var(--morado); outline-offset: 0; border-radius: 6px; }
.pos__pagos { margin: 0; padding: 0; border: 1px solid var(--gris-200); border-radius: 12px; overflow: hidden; }
.pos__pagos legend { margin-left: 12px; padding: 0 6px; font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.pos__pagos .radio-fila { padding: 11px 16px; }
.pos__pagos .campo__ayuda { padding: 10px 16px 12px; border-top: 1px solid var(--gris-200); }
.panel-venta-ok { font-size: 16px; }
.panel-venta-ok:focus { outline: 3px solid var(--exito); outline-offset: 2px; }

/* Formularios del panel */
.panel-form__producto { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 14px; padding: 12px; border-radius: 12px; background: var(--gris-100); }
.panel-form__producto .celda-producto { min-width: 0; }
.panel-form__nota { font-size: 14px; color: var(--carbon); }
.casilla__ayuda { display: block; font-size: 13px; color: var(--gris-700); }
.panel-config__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.panel-config { gap: 14px; }
.tabla--config th, .tabla--config td { vertical-align: middle; padding: 8px !important; }
.tabla--config th small { font-weight: 500; }
.tabla--config input[type="time"] { min-width: 112px; }
.tabla--config select { min-width: 132px; }
.tabla--config .entrada--precio { width: 96px; }
.tabla--config .casilla { align-items: center; white-space: nowrap; }
.panel-config__pagos { margin: 0; padding: 0; border: 0; display: grid; gap: 12px; }
.panel-config__pagos small { display: block; font-size: 13px; color: var(--gris-700); }
.panel-config__sub { font-size: 16px; font-weight: 800; }
.promo-fila { display: flex; align-items: center; gap: 10px; }
.promo-mini { flex: none; width: 10px; height: 38px; border-radius: 4px; }
.promo-mini--morado { background: var(--morado); }
.promo-mini--negro { background: var(--tinta); }
.promo-mini--lavanda { background: var(--morado-200); }
.promo-celda { display: grid; gap: 2px; min-width: 200px; }
.top-fila { display: flex; align-items: center; gap: 10px; }
.ranking { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--morado-100); color: var(--morado-800); font-family: var(--f-display); font-weight: 800; font-size: 13px; }
.panel-elegir { display: grid; justify-items: center; gap: 14px; padding: 40px 20px; border-radius: var(--radio-l); background: #fff; border: 1px solid var(--gris-200); text-align: center; }
.panel-elegir .icono { color: var(--morado); }
.panel-elegir__texto { font-size: 17px; font-weight: 650; }
.panel-elegir__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- Crear y editar productos ---------- */
.panel-intro-accion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; }
.panel-intro-accion .panel-intro { flex: 1 1 420px; }
.etiqueta-nuevo { display: inline-block; font-size: 12px !important; font-weight: 700; color: var(--morado) !important; }
.pf { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.pf__principal, .pf__resto { display: grid; gap: 20px; min-width: 0; }
.pf__lateral { position: sticky; top: 92px; min-width: 0; }
.pf-seccion .panel-caja__cabeza h2 { display: flex; align-items: center; gap: 10px; }
.pf-num {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--morado); color: #fff; font-size: 14px; font-weight: 800;
}
.pf textarea { min-height: 96px; }
.pf-bloque { display: grid; gap: 14px; }
.pf-grupo { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pf-grupo legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; }
.pf-grupo legend + * { clear: both; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px; border-radius: 999px;
  border: 1.5px solid var(--gris-300); background: #fff; font-size: 14px; font-weight: 650; cursor: pointer; line-height: 1.2;
}
.pf-chip:hover { border-color: var(--gris-500); }
.pf-chip input {
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--gris-500); border-radius: 5px; background: #fff; cursor: pointer;
}
.pf-chip input:checked { background: var(--morado); border-color: var(--morado); }
.pf-chip input:checked::after { content: ''; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.pf-chip:has(input:checked) { border-color: var(--morado); background: var(--morado-50); color: var(--morado-800); }
.pf-chip__muestra { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, .18); }
.pf-principal { font-size: 14px; font-weight: 650; color: var(--carbon); }
.pf-principal:empty { display: none; }

.pf-fotos { display: grid; gap: 12px; }
.pf-fotos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pf-foto { display: grid; gap: 6px; align-content: start; min-width: 0; }
.pf-foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: #fff; border: 1px solid var(--gris-200); border-radius: 12px; }
.pf-foto__etiqueta { font-family: var(--f-display); font-weight: 800; font-size: 13px; }
.pf-foto__acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-fotos__subir { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pf-archivo { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pf-archivo:focus-visible + label { outline: 3px solid var(--morado); outline-offset: 2px; }
.pf-subir--lleno { opacity: .45; cursor: not-allowed; }
.pf-ref { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--gris-200); }
.pf-ref legend { float: left; width: 100%; padding: 0; font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.pf-ref legend + * { clear: both; }
.pf-ref__opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.pf-ref__op { position: relative; display: grid; align-content: start; gap: 6px; padding: 6px; border-radius: 12px; border: 1.5px solid var(--gris-200); background: #fff; cursor: pointer; font-size: 13px; line-height: 1.3; }
.pf-ref__op:hover { border-color: var(--gris-500); }
.pf-ref__op input { position: absolute; top: 8px; left: 8px; width: 1px; height: 1px; opacity: 0; }
.pf-ref__op:has(input:checked) { border-color: var(--morado); box-shadow: inset 0 0 0 1.5px var(--morado); background: var(--morado-50); }
.pf-ref__op:has(input:focus-visible) { outline: 3px solid var(--morado); outline-offset: 2px; }
.pf-ref__img { display: block; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--morado-50); }
.pf-ref__img svg { display: block; width: 100%; height: 100%; }
.pf-ref__nombre { font-weight: 650; overflow-wrap: anywhere; }
.pf-ref__op:has(input:checked) .pf-ref__nombre { color: var(--morado-800); }
.pf-ref__mas summary { display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; font-family: var(--f-display); font-weight: 800; font-size: 14px; color: var(--morado); }
.pf-ref__mas[open] summary { margin-bottom: 8px; }

.pf-po { display: grid; gap: 10px; justify-items: start; }
.pf-po .tabla-envoltura { width: 100%; }
.pf-po td { vertical-align: top !important; }
.pf-po .campo { gap: 4px; }
.pf-po [data-po-nombre] { width: 100%; min-width: 150px; }
.pf-variantes .tabla { font-size: 14px; }
.pf-variantes th[scope="row"] { font-weight: 700; }
.pf-cant { width: 76px; text-align: right; }
.tabla .pf-sku { font-size: 12px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }

.pf-dest { display: grid; gap: 8px; }
.pf-dest__lista { margin-top: 2px; }
.pf-dest__agregar { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-dest__agregar input { flex: 1 1 240px; min-width: 0; padding-right: 10px; }
.pf-sugeridos { display: grid; gap: 6px; }
.pf-sugeridos:empty { display: none; }
.pf-sugeridos__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pf-sug {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 12px 4px 8px; border-radius: 999px;
  border: 1.5px dashed var(--morado-300); background: #fff; color: var(--morado-800); font-size: 13px; font-weight: 700;
}
.pf-sug:hover { border-style: solid; border-color: var(--morado); background: var(--morado-50); }

.pf-vista { gap: 14px; }
.pf-vista h2 { font-size: 16px; font-weight: 850; }
.pf-tarjeta { display: grid; gap: 4px; }
.pf-tarjeta__img { aspect-ratio: 4 / 5; margin-bottom: 6px; border-radius: var(--radio); overflow: hidden; background: var(--lavanda); }
.pf-tarjeta__img svg { display: block; width: 100%; height: 100%; }
.pf-tarjeta__vacia { display: grid; place-items: center; align-content: center; gap: 10px; height: 100%; padding: 20px; text-align: center; font-size: 13px; color: var(--gris-700); }
.pf-tarjeta__img .pf-tarjeta__vacia svg { width: 56px; height: 56px; color: var(--morado-300); }
.pf-tarjeta__marca { font-family: var(--f-display); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-700); }
.pf-tarjeta__nombre { font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.pf-tarjeta__precio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--f-display); font-weight: 850; font-size: 17px; }
.pf-tarjeta__precio s { font-family: var(--f-texto); font-weight: 500; font-size: 14px; color: var(--gris-700); }
.pf-tarjeta__dato { font-size: 13px; color: var(--gris-700); }
.pf-vista__enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 14px; font-weight: 700; }
.pf-creado > div { display: grid; gap: 4px; }
.pf-creado__enlaces { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 700; }

/* ---------- Adaptación ---------- */
@media (max-width: 1360px) {
  .panel-config__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1240px) {
  .panel-columnas, .panel-columnas--mitad { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .panel-detalle, .panel-doc, .pf { grid-template-columns: minmax(0, 1fr); }
  .pf__lateral { position: static; }
  .pf-tarjeta { grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; align-items: start; align-content: start; }
  .pf-tarjeta__img { grid-row: 1 / span 5; margin: 0; }
  .pf-tarjeta > :not(.pf-tarjeta__img) { grid-column: 2; }
}
@media (max-width: 1023px) {
  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel__lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 90; width: min(300px, 86vw); height: 100%;
    transform: translateX(-102%); visibility: hidden; transition: transform .25s ease, visibility .25s ease;
  }
  .panel__lateral.abierto { transform: none; visibility: visible; }
  .panel__fondo { display: block; }
  .panel__cerrar { display: inline-grid; }
  .panel__abrir { display: inline-flex; }
  .panel__barra { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; }
  .panel__titulos h1 { font-size: 22px; }
  .panel__contexto { width: 100%; }
  .panel__selector { width: 100%; }
  .panel__selector select { flex: 1; min-width: 0; }
  .panel__tienda-fija { display: inline-flex; }
  .panel__contenido { padding: 16px 16px 40px; gap: 16px; }
}
@media (max-width: 640px) {
  /* Opciones del producto nuevo: cada opción en su propio bloque, con las tres tiendas a la vista */
  .pf-variantes { overflow: visible; border: 0; border-radius: 0; }
  .pf-variantes .tabla thead { display: none; }
  .pf-variantes .tabla, .pf-variantes tbody { display: block; }
  .pf-variantes tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 12px 0; border-top: 1px solid var(--gris-200); }
  .pf-variantes tr:first-child { border-top: 0; padding-top: 0; }
  .pf-variantes tbody tr:hover { background: transparent; }
  .pf-variantes .tabla th, .pf-variantes .tabla td { display: block; padding: 0; border: 0; text-align: left; }
  .pf-variantes th[scope="row"], .pf-variantes .pf-precio-celda { grid-column: 1 / -1; }
  .pf-variantes .pf-precio-celda::before { content: 'Precio: '; color: var(--gris-700); }
  .pf-variantes td[data-tienda-nombre]::before { content: attr(data-tienda-nombre); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--gris-700); }
  .pf-cant { width: 100%; }
}
@media (max-width: 767px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; }
  .kpi__valor { font-size: 24px; }
  .panel-caja { padding: 16px; }
  .panel-filtros { padding: 12px; }
  .panel-filtros__item { min-width: 0; flex: 1 1 140px; }
  .panel-filtros__item--buscar { flex-basis: 100%; }
  .pasos-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista-panel__item { flex-wrap: wrap; }
  .lista-panel__estado { max-width: none; justify-content: flex-start; }
  .barras li { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) auto; gap: 8px; }
  .panel-linea { grid-template-columns: minmax(0, 1fr) auto; }
  .panel-linea__cant { grid-column: 1; grid-row: 2; padding-left: 56px; }
  .ficha-inv { align-items: flex-start; }
  .ficha-inv__img { width: 64px; height: 64px; }
  .armador__item { grid-template-columns: minmax(0, 1fr) auto; }
  .armador__item .armador__precio { grid-column: 1; grid-row: 2; padding-left: 56px; }
  .armador__item .boton { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 420px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
}