de fila,
* tarjeta de producto, etc).
* 2. Clase `kx-hover-reveal__target` en el bloque de acciones dentro de ese contenedor.
* Agregar `kx-hover-reveal__target--rise` si el contenedor es una tarjeta (grid) en vez
* de una fila de tabla/lista — cambia la direccion de entrada de horizontal a vertical.
*
* Revela con mouse (:hover) y con teclado (:focus-within) — nunca solo en click, para que
* Tab no dañe foco invisible (WCAG 2.4.7). En touch (sin hover) queda siempre visible via
* `@media (hover:none)`. `prefers-reduced-motion` ya lo cubre a11y.css globalmente (pisa
* transition-duration en `*`).
*
* Ejemplo (fila de tabla):
*
* | ... |
* ...botones... |
*
*
* Ejemplo (tarjeta de grid):
*
*
* El layout interno (display, gap, justify-content, tamaños de boton) sigue siendo
* responsabilidad de la vista — este componente solo resuelve el show/hide.
*/
.kx-hover-reveal__target {
opacity: 0;
transform: translateX(8px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.kx-hover-reveal:hover .kx-hover-reveal__target,
.kx-hover-reveal:focus-within .kx-hover-reveal__target {
opacity: 1;
transform: translateX(0);
}
.kx-hover-reveal__target--rise {
transform: translateY(4px);
}
.kx-hover-reveal:hover .kx-hover-reveal__target--rise,
.kx-hover-reveal:focus-within .kx-hover-reveal__target--rise {
transform: translateY(0);
}
@media (hover: none) {
.kx-hover-reveal__target {
opacity: 1;
transform: none;
}
}
/* ===== KX SCROLL STRIP — subtle prev/next arrows for horizontal-scroll rows ===== */
/*
* Usage:
*
* Requires src/static/js/v4/scroll-strip.js (registers the `scrollStrip` Alpine component).
*/
.kx-scroll-wrap {
position: relative;
}
.kx-scroll-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 27px;
height: 27px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-1);
border: 1px solid var(--border);
color: var(--fg-2);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
cursor: pointer;
z-index: 2;
-webkit-tap-highlight-color: transparent;
}
.kx-scroll-arrow i,
.kx-scroll-arrow svg {
width: 14px !important;
height: 14px !important;
stroke-width: 2.5 !important;
}
.kx-scroll-arrow--left {
left: -2px;
}
.kx-scroll-arrow--right {
right: -2px;
}
/* ===== KX BATCHBAR — barra flotante de selección múltiple =====
* Pill oscura centrada que aparece solo cuando hay elementos
* seleccionados. Reemplaza barras fijas de ancho completo por un
* componente flotante con la misma animación de entrada/salida en
* todas partes: slide-up + fade (220ms). Nace en Alertas (batchbar
* de reposición) y es el patrón por defecto para cualquier flujo de
* selección múltiple nuevo (pickers, tablas con acciones batch, etc).
*
* Usage:
*
* Mismo patrón Alpine de clases con nombre que .kx-sheet-start/.kx-sheet-end
* (shell.css) — el elemento con x-show lleva la transition CSS, las clases
* start/end solo aportan el estado inicial/final de opacity + transform.
*/
.kx-batchbar {
position: fixed; left: 0; right: 0; bottom: calc(var(--footer-h, 76px) + 12px); z-index: 150;
display: flex; justify-content: center; padding: 0 16px; pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.2, .8, .2, 1);
}
.kx-batchbar__inner {
pointer-events: auto;
background: var(--fg-1); color: var(--surface-1);
border-radius: var(--r-lg, 18px);
box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .45);
display: flex; align-items: center; gap: 14px;
padding: 10px 12px 10px 18px;
max-width: 640px; width: 100%;
}
.kx-batchbar__count {
font-family: var(--font-mono); font-weight: 700; font-size: 18px;
background: color-mix(in srgb, currentColor 14%, transparent); min-width: 38px; height: 38px; padding: 0 6px;
border-radius: var(--r-sm, 10px); display: grid; place-items: center; flex-shrink: 0;
}
.kx-batchbar__label { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.3; min-width: 0; overflow: hidden; }
.kx-batchbar__label strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-batchbar__label span { display: block; color: color-mix(in srgb, currentColor 58%, transparent); font-size: 11.5px; font-weight: 500; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-batchbar__clear {
border: none; background: none; font-size: 12.5px; font-weight: 600; cursor: pointer;
color: color-mix(in srgb, currentColor 65%, transparent); padding: 8px 10px; border-radius: var(--r-sm, 10px);
transition: background .12s, color .12s; white-space: nowrap;
}
.kx-batchbar__clear:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: currentColor; }
.kx-batchbar__cta {
background: var(--accent); color: #fff; border: none; cursor: pointer;
padding: 12px 18px; border-radius: var(--r-md, 14px); font-weight: 700; font-size: 14px;
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
text-decoration: none; transition: background .15s;
}
.kx-batchbar__cta:disabled { opacity: .5; cursor: not-allowed; }
.kx-batchbar__cta:hover:not(:disabled) { background: var(--accent-dark); }
.kx-batchbar__cta i,
.kx-batchbar__cta svg { width: 16px !important; height: 16px !important; }
/* Tokens de transición Alpine — mismo lenguaje que kx-sheet-start/kx-sheet-end */
.kx-batchbar-start { opacity: 0; transform: translateY(16px) scale(.97); }
.kx-batchbar-end { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
.kx-batchbar { transition: none !important; }
}
@media (max-width: 480px) {
.kx-batchbar__inner { gap: 10px; padding: 8px 8px 8px 14px; }
.kx-batchbar__label span { display: none; }
.kx-batchbar__cta { padding: 10px 14px; font-size: 13px; }
}