/* legacy: capa de transición del cutover (docs/design-system/CUTOVER.md D4). No agregar reglas aquí. */
@layer legacy {
/* ============================================================
   TÚPOS — V2 Redesign System
   Basado en Claude Design "Híbrida v2"
   Cargado último para máxima prioridad en cascade.
   ============================================================ */

/* Los tokens globales viven solo en tokens/tupos.css (F1 del cutover). */

/* ============================================================
   4. BASE
   ============================================================ */

/* Reset y body: la fuente de verdad es css/base/base.css (@layer base). Estas reglas se mantienen SOLO para el POS v6
   (pos_bandejas/pos_movil), que carga redesign.css pero no base.css; en el resto manda base.css. Se van con el POS en F5. */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-body, 400);
  color: var(--fg-1);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
}

/* ============================================================
   5. TIPOGRAFÍA
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-heading, 600);
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--fg-1);
  margin: 0;
}

h1 { font-size: 32px; letter-spacing: 0; }
h2 { font-size: 22px; letter-spacing: 0; }
h3 { font-size: 18px; }
h4 { font-size: 17px; }

/* Números y datos siempre mono */
.font-mono,
[class*="price"],
[class*="stock"],
[class*="total"]:not([class*="kx-totals"]),
[class*="amount"],
[class*="kpi__val"],
[class*="hero__val"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ============================================================
   6. NAVBAR
   ============================================================ */

.navbar {
  height: var(--navbar-h) !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 0 20px !important;
}

/* Logo: punto terracota en lugar de gradiente amber */

/* Nombre tienda en Poppins */

/* Botones circulares */

/* iOS Safari: clicks don't bubble through SVG/icon children to their parent
   <a> or <button> unless the child has pointer-events:none.
   Global rule — covers all clickable elements in the app. */
a svg, a i,
button svg, button i {
  pointer-events: none !important;
}

/* Same fix for Alpine.js @click divs that contain icons (not <a>/<button>) */

/* User dropdown */
.user-menu .user-dropdown {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.14) !important;
}

.dropdown-header {
  background: var(--surface-2) !important;
  border-radius: var(--r-md) var(--r-md) 0 0 !important;
}

.dropdown-item {
  color: var(--fg-1) !important;
  font-family: var(--font-body) !important;
  border-radius: var(--r-sm) !important;
}

.dropdown-item:hover {
  background: var(--surface-2) !important;
}

.dropdown-item-danger {
  color: var(--bad) !important;
}

.dropdown-item-danger:hover {
  background: color-mix(in srgb, var(--bad) 10%, transparent) !important;
}

.dropdown-divider {
  border-color: var(--border) !important;
}

/* ============================================================
   9. BOTONES
   ============================================================ */

/* Variantes compartidas: `.btn-*` y `.kx-button--*` son el mismo botón (ver components.css «KX BUTTON»).
   El tamaño lo da cada familia por rol; aquí vive TODO lo demás. */
.btn-primary {
  background: var(--accent) !important;
  color: white !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-strong, 600) !important;
  border-radius: var(--r-md) !important;
  border: none !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease) !important;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 32%, transparent) !important;
}

.btn-primary:active:not(:disabled) {
  transform: scale(0.98) !important;
}

.btn-primary:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.btn-secondary {
  background: var(--surface-2) !important;
  color: var(--fg-1) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-strong, 600) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

.btn-secondary:hover {
  background: var(--surface-3) !important;
  border-color: var(--fg-3) !important;
}

/* Destructivo = tinte suave con borde (nunca rojo sólido): mismo lenguaje que los chips de estado. */
.btn-danger {
  background: color-mix(in srgb, var(--bad) var(--tint-bg-amt), var(--surface-1)) !important;
  color: color-mix(in srgb, var(--bad) var(--tint-ink-amt), var(--tint-ink)) !important;
  border: 1px solid var(--bad) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-strong, 600) !important;
  box-shadow: none !important;
}

.btn-danger:hover {
  background: color-mix(in srgb, var(--bad) 30%, var(--surface-1)) !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--fg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-strong, 600) !important;
}

.btn-ghost:hover {
  background: var(--surface-2) !important;
  color: var(--fg-1) !important;
}

/* Icon buttons compactos */
.icon-button-compact {
  background: var(--surface-2) !important;
  color: var(--fg-1) !important;
  border-radius: var(--r-sm) !important;
}

.icon-button-compact:hover {
  background: var(--surface-3) !important;
}

/* ============================================================
   10. CARDS
   ============================================================ */
.card,
.product-card,
.stat-card,
[class*="-card"]:not([class*="__"]):not(.km-catalog-tile):not(.more-card):not([class*="-card-inline-"]):not(.usage-card-title):not(.plans-section-title):not([class*="va-card"]):not([class*="kx-"]):not([class*="eq-"]):not([class*="prov-"]):not([class*="lucide"]) {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  transition: border-color 0.15s, transform 0.15s !important;
}

[class*="-card"]:not([class*="__"]):not(.more-card):not([class*="-card-inline-"]):not(.usage-card-title):not([class*="va-card"]):not([class*="kx-"]):not([class*="eq-"]):not([class*="prov-"]):not([class*="lucide"]):hover:not(:disabled) {
  border-color: var(--fg-1) !important;
  box-shadow: none !important;
}

/* ============================================================
   11. INPUTS Y FORMULARIOS
   ============================================================ */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-body, 400) !important;
  color: var(--fg-1) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--fg-3) !important;
}

/* Barras de búsqueda */
.search-input,
[class*="search"] input,
[class*="scan"] input {
  font-family: var(--font-body) !important;
}

/* ============================================================
   12. BADGES Y TAGS
   ============================================================ */
.badge-success {
  background: color-mix(in srgb, var(--ok) var(--tint-bg-amt), var(--surface-1)) !important;
  color:      color-mix(in srgb, var(--ok) var(--tint-ink-amt), var(--tint-ink)) !important;
  border: 1.5px solid var(--ok) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
[class*="badge-warn"] {
  background: color-mix(in srgb, var(--warn) var(--tint-bg-amt), var(--surface-1)) !important;
  color:      color-mix(in srgb, var(--warn) var(--tint-ink-amt), var(--tint-ink)) !important;
  border: 1.5px solid var(--warn) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.badge-error,
[class*="status-bad"] {
  background: color-mix(in srgb, var(--bad) var(--tint-bg-amt), var(--surface-1)) !important;
  color:      color-mix(in srgb, var(--bad) var(--tint-ink-amt), var(--tint-ink)) !important;
  border: 1.5px solid var(--bad) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* ============================================================
   13. TABLAS
   ============================================================ */

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-body);
}

th {
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-2);
  font-weight: 700;
  border-bottom: 2px solid var(--border);
  padding: 12px;
}

td {
  border-bottom: 1px solid var(--border-weak);
  padding: 12px;
  color: var(--fg-1);
  font-size: 15px;
}

tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   14. MODALES
   ============================================================ */
.modal {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18) !important;
  font-family: var(--font-body) !important;
}

.modal-backdrop,
[class*="backdrop"] {
  background: var(--scrim) !important;
  backdrop-filter: blur(6px) !important;
}

/* ============================================================
   15. TABS / PILLS
   ============================================================ */

/* Tabs de filtro en inventario y otros */
.tab {
  background: var(--surface-2) !important;
  color: var(--fg-2) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s !important;
}

/* ============================================================
   17. SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--fg-3);
}
}