/* WAYNA · F11 UX POS T01.2 — apariencia de las categorías (Cobrar y su configuración en Carta › Categorías). Paleta cerrada y sobria; cada tono tiene variante clara y oscura
   (Filament pone `.dark` en <html> en Oscuro y Sistema-oscuro). Los nombres de tono son los de App\Services\Catalog\CategoryAppearance::ACCENTS. */
.pos-tone-slate { --tone-fg: #475569; --tone-bg: #f1f5f9; --tone-edge: #94a3b8; }
:root.dark .pos-tone-slate { --tone-fg: #cbd5e1; --tone-bg: #1e293b; --tone-edge: #64748b; }
.pos-tone-sky { --tone-fg: #0369a1; --tone-bg: #e0f2fe; --tone-edge: #38bdf8; }
:root.dark .pos-tone-sky { --tone-fg: #bae6fd; --tone-bg: #0c4a6e; --tone-edge: #0ea5e9; }
.pos-tone-teal { --tone-fg: #0f766e; --tone-bg: #ccfbf1; --tone-edge: #2dd4bf; }
:root.dark .pos-tone-teal { --tone-fg: #99f6e4; --tone-bg: #134e4a; --tone-edge: #14b8a6; }
.pos-tone-emerald { --tone-fg: #15803d; --tone-bg: #dcfce7; --tone-edge: #4ade80; }
:root.dark .pos-tone-emerald { --tone-fg: #bbf7d0; --tone-bg: #14532d; --tone-edge: #22c55e; }
.pos-tone-amber { --tone-fg: #b45309; --tone-bg: #fef3c7; --tone-edge: #fbbf24; }
:root.dark .pos-tone-amber { --tone-fg: #fde68a; --tone-bg: #78350f; --tone-edge: #f59e0b; }
.pos-tone-orange { --tone-fg: #c2410c; --tone-bg: #ffedd5; --tone-edge: #fb923c; }
:root.dark .pos-tone-orange { --tone-fg: #fed7aa; --tone-bg: #7c2d12; --tone-edge: #f97316; }
.pos-tone-rose { --tone-fg: #be123c; --tone-bg: #ffe4e6; --tone-edge: #fb7185; }
:root.dark .pos-tone-rose { --tone-fg: #fecdd3; --tone-bg: #881337; --tone-edge: #f43f5e; }
.pos-tone-violet { --tone-fg: #6d28d9; --tone-bg: #ede9fe; --tone-edge: #a78bfa; }
:root.dark .pos-tone-violet { --tone-fg: #ddd6fe; --tone-bg: #4c1d95; --tone-edge: #8b5cf6; }

/* mosaico/ícono/inicial de una categoría */
.pos-tile { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; overflow: hidden; border-radius: .625rem; background: var(--tone-bg); color: var(--tone-fg); }
.pos-tile--sm { width: 2rem; height: 2rem; border-radius: .5rem; }
.pos-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pos-tile__icon { width: 1.375rem; height: 1.375rem; }
.pos-tile--sm .pos-tile__icon { width: 1.125rem; height: 1.125rem; }
.pos-tile__initial { font-size: 1.0625rem; font-weight: 800; line-height: 1; }
.wy-isotype { display: block; width: 100%; height: auto; }

/* ---------- T06.1: selectores compactos y vista previa de la configuración ---------- */
.wy-option { display: inline-flex; align-items: center; gap: .625rem; }
.wy-swatch { flex: none; width: 1.125rem; height: 1.125rem; border-radius: 999px; background: var(--tone-bg); box-shadow: inset 0 0 0 2px var(--tone-edge); }
.wy-option__icon { flex: none; width: 1.25rem; height: 1.25rem; }
.wy-cat-preview { display: inline-flex; align-items: center; gap: .75rem; padding: .5rem .875rem .5rem .5rem; border-radius: .75rem; border: 1px solid var(--wy-border, rgba(148, 163, 184, .4)); }
.wy-cat-preview__name { font-size: .9375rem; font-weight: 700; }
.pos-tile--md { width: 2.5rem; height: 2.5rem; }
.wy-cat-cell { display: flex; align-items: center; }