/* © 2026 KoreStock Ledger — un proyecto de Kitsótaro · Código disponible, todos los derechos reservados (ver LICENSE).
 * CONTROLES — segmentado (Resumen | Movimientos), semáforo (forma + color + texto, §24.2),
 * cinta deslizable de productos, autocompletado y esqueletos de carga. */
.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; gap: 3px; border-radius: var(--r-sm); background: var(--superficie-3); }
.segmentado button { border: 0; background: transparent; color: var(--texto-2); min-height: var(--alto-control-sm); border-radius: calc(var(--r-sm) - 3px); font-weight: var(--peso-fuerte); font-size: var(--t-sm); }
.segmentado button[aria-pressed="true"], .segmentado button[aria-checked="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }

/* Semáforo: nunca solo color */
.semaforo { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: var(--peso-fuerte); white-space: nowrap; }
.semaforo .icono { width: 1rem; height: 1rem; }
.semaforo.agotado, .semaforo.critico { color: var(--peligro); }
.semaforo.bajo { color: var(--precaucion); }
.semaforo.bien { color: var(--exito); }
.semaforo.neutro { color: var(--texto-3); }
.fondo-agotado { background: var(--peligro); } .fondo-bajo { background: var(--precaucion-relleno); } .fondo-bien { background: var(--exito); } .fondo-critico { background: var(--peligro); }

/* Cinta de productos (más vendidos, §12.2 punto 1) */
.cinta { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; margin-top: var(--e-3); padding: var(--e-1) 2px var(--e-2); scroll-snap-type: x proximity; }
.cinta::-webkit-scrollbar { display: none; }
.cinta-item {
  flex: 0 0 auto; scroll-snap-align: start; width: 8.5rem; text-align: left;
  border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); padding: var(--e-2) var(--e-3);
  display: grid; gap: 2px;
}
.cinta-item .nombre { font-size: var(--t-sm); font-weight: var(--peso-fuerte); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cinta-item .precio { font-family: var(--fuente-mono); font-size: var(--t-xs); color: var(--texto-2); }
.cinta-item[aria-pressed="true"] { border-color: var(--venta); box-shadow: 0 0 0 2px color-mix(in srgb, var(--venta) 35%, transparent); }

/* Autocompletado (buscadores) */
.buscador { position: relative; }
.desplegable-opciones {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: calc(var(--z-barra) - 2);
  background: var(--superficie-elevada); border: 1px solid var(--borde); border-radius: var(--r-sm); box-shadow: var(--sombra-2);
  max-height: 22rem; overflow-y: auto; padding: var(--e-1);
}
.opcion { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); border-radius: var(--r-xs); cursor: pointer; min-height: 2.75rem; }
.opcion.resaltada, .opcion:hover { background: var(--superficie-2); }
.opcion .sub { font-size: var(--t-xs); color: var(--texto-2); }
.opcion.nuevo { color: var(--primario); font-weight: var(--peso-fuerte); border-top: 1px solid var(--borde); margin-top: var(--e-1); }

/* Carga */
.esqueleto { background: linear-gradient(90deg, var(--superficie-2), var(--superficie-3), var(--superficie-2)); background-size: 200% 100%; animation: brillo 1.4s infinite; border-radius: var(--r-xs); min-height: 1rem; }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.pantalla-carga { min-height: 60dvh; display: grid; place-items: center; text-align: center; gap: var(--e-3); color: var(--texto-2); }
.girador { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 3px solid var(--superficie-3); border-top-color: var(--primario); animation: girar 0.9s linear infinite; margin: 0 auto; }

/* Gráficos */
.contenedor-grafico { position: relative; width: 100%; height: 16rem; }
.contenedor-grafico.alto { height: 20rem; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); font-size: var(--t-sm); margin-bottom: var(--e-2); }
.migas button { border: 0; background: transparent; color: var(--primario); padding: var(--e-1); border-radius: var(--r-xs); font-weight: var(--peso-medio); }
.migas span[aria-current] { font-weight: var(--peso-fuerte); }
.leyenda { display: grid; gap: var(--e-1); margin-top: var(--e-3); }
.leyenda-item { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); border: 0; background: transparent; padding: var(--e-1); border-radius: var(--r-xs); text-align: left; width: 100%; }
.leyenda-item .muestra { width: 0.75rem; height: 0.75rem; border-radius: 3px; flex-shrink: 0; }
.leyenda-item .valor { margin-left: auto; font-family: var(--fuente-mono); color: var(--texto-2); }
/* Campo con sugerencias (reemplaza el <datalist> del navegador) */
.control.con-sugerencias { position: relative; padding-right: var(--e-1); }
.control.con-sugerencias > .desplegable-opciones { left: -1.5px; right: -1.5px; }
.boton-sugerencias { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--texto-3); cursor: pointer; }
.boton-sugerencias:hover { background: var(--superficie-2); color: var(--texto); }
.control.con-sugerencias:has(input[aria-expanded="true"]) .boton-sugerencias { transform: rotate(180deg); }
/* «Precios por presentación» oculto por ahora (auditoría 2026-10-23: confunde; se busca mejor solución).
   Las presentaciones ya guardadas se siguen usando al vender. */
[data-accion="editar-presentaciones"], [data-accion="presentaciones-entrada"], #ed-presentaciones { display: none !important; }
/* Leyenda con color editable: el cuadrito abre el selector de color de la app */
.leyenda-fila { display: flex; align-items: center; gap: var(--e-1); }
.leyenda-fila .leyenda-item { flex: 1; min-width: 0; }
.muestra-color { width: 1.1rem; height: 1.1rem; flex: none; padding: 0; border: 0; border-radius: 4px; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 15%, transparent); }
.muestra-color:hover, .muestra-color:focus-visible { outline: 2px solid var(--borde-fuerte); outline-offset: 2px; }

/* Ventana flotante anclada (selector de color, modos de color) */
.flotante { position: fixed; z-index: var(--z-dialogo); width: min(17.5rem, calc(100vw - 24px)); padding: var(--e-3); border-radius: var(--r-lg); border: 1px solid var(--borde); background: var(--superficie-elevada); color: var(--texto); box-shadow: var(--sombra-3); display: grid; gap: var(--e-3); opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva); }
.flotante.visible { opacity: 1; transform: none; }
.flotante-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); font-size: var(--t-sm); }
.flotante-cuerpo { display: grid; gap: var(--e-3); }
.grupo-muestras { display: grid; gap: var(--e-1); }
.muestras { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.muestra-opcion { aspect-ratio: 1; width: 100%; padding: 0; border: 0; border-radius: 6px; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 12%, transparent); }
.muestra-opcion:hover { transform: scale(1.08); }
.muestra-opcion[aria-pressed="true"] { outline: 2px solid var(--texto); outline-offset: 2px; }
.acciones-color .boton { position: relative; white-space: nowrap; }
.opcion-modo-color { display: flex; align-items: center; text-align: left; gap: var(--e-2); width: 100%; min-height: 2.5rem; padding: 0 var(--e-2); border: 1px solid var(--borde); border-radius: var(--r-sm); background: transparent; color: var(--texto); font-weight: var(--peso-medio); cursor: pointer; }
.opcion-modo-color + .opcion-modo-color { margin-top: -6px; }
.opcion-modo-color[aria-pressed="true"] { border-color: var(--texto); background: var(--superficie-2); font-weight: var(--peso-fuerte); }
.tira-colores { display: flex; }
.tira-colores span { width: 0.9rem; height: 0.9rem; border-radius: 50%; margin-left: -3px; box-shadow: 0 0 0 1.5px var(--superficie-elevada); }
/* Encabezado de grupo en las listas desplegables (Entrada: compra individual / por mayor) */
.opcion-grupo { padding: var(--e-2) var(--e-3) var(--e-1); font-size: var(--t-xs); font-weight: var(--peso-fuerte); color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.04em; }
.opcion-grupo:not(:first-child) { border-top: 1px solid var(--borde); margin-top: var(--e-1); }
/* Leyenda: unidades · valor · % en columnas para que los puntos queden alineados */
.columnas-leyenda { display: inline-grid; grid-template-columns: 5ch 1ch 10ch 1ch 6.5ch; align-items: baseline; text-align: right; }
.columnas-leyenda .sep { text-align: center; color: var(--texto-3); }
/* Leyenda: columnas fijas (los puntos quedan alineados) y encabezados con ⓘ */
.columnas-leyenda { grid-template-columns: 6.5ch 2ch 10ch 2ch 7ch; }
.leyenda-cabecera { display: flex; align-items: center; gap: var(--e-1); padding: 0 var(--e-1) var(--e-1) calc(1.1rem + var(--e-2)); border-bottom: 1px solid var(--borde); margin-bottom: var(--e-1); }
.leyenda-cabecera button { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; border: 0; background: transparent; padding: 0; color: var(--texto-2); font: inherit; font-size: var(--t-xs); font-weight: var(--peso-fuerte); cursor: help; white-space: nowrap; }
.leyenda-cabecera button .icono { width: 0.85rem; height: 0.85rem; }
.leyenda-cabecera .columnas-leyenda { font-family: var(--fuente); }
.fila-migas { margin-bottom: var(--e-1); }
.boton-paleta { width: 2rem; min-width: 2rem; min-height: 2rem; }
/* Columnas en rem (no en ch): encabezados y cifras usan fuentes distintas y deben coincidir */
.columnas-leyenda { grid-template-columns: 4.6rem 1rem 5.6rem 1rem 3.9rem; }