/*
 * Benzax Design System — foundation
 * La marca combina orientación, cercanía y movimiento mediante el turquesa,
 * el violeta y las formas redondeadas del símbolo.
 */
:root {
  --bz-brand-teal-50: #ecfdf9;
  --bz-brand-teal-100: #d2f8ee;
  --bz-brand-teal-300: #65e1c1;
  --bz-brand-teal-500: #22cba4;
  --bz-brand-teal-600: #0fa987;
  --bz-brand-teal-700: #06725e;
  --bz-brand-purple-50: #f5f1ff;
  --bz-brand-purple-100: #ebe2ff;
  --bz-brand-purple-300: #b89af7;
  --bz-brand-purple-500: #7a49e8;
  --bz-brand-purple-600: #6232c9;
  --bz-brand-purple-700: #4c269e;
  --bz-brand-gradient: linear-gradient(112deg, var(--bz-brand-teal-500) 0%, #2abcc1 42%, var(--bz-brand-purple-500) 100%);

  --bz-neutral-0: #ffffff;
  --bz-neutral-25: #fcfbf8;
  --bz-neutral-50: #f7f5ef;
  --bz-neutral-100: #efede6;
  --bz-neutral-200: #dedbd2;
  --bz-neutral-500: #66655f;
  --bz-neutral-700: #3c3e3b;
  --bz-neutral-900: #101512;
  --bz-neutral-950: #090d0b;

  --bz-success: #18835b;
  --bz-success-soft: #e8f7ef;
  --bz-warning: #a85b08;
  --bz-warning-soft: #fff4df;
  --bz-danger: #bc2f2a;
  --bz-danger-soft: #feeeec;
  --bz-info: #2767b1;
  --bz-info-soft: #eaf2fc;

  --bz-space-1: 0.25rem;
  --bz-space-2: 0.5rem;
  --bz-space-3: 0.75rem;
  --bz-space-4: 1rem;
  --bz-space-5: 1.25rem;
  --bz-space-6: 1.5rem;
  --bz-space-8: 2rem;
  --bz-space-10: 2.5rem;
  --bz-space-12: 3rem;

  --bz-radius-sm: 0.625rem;
  --bz-radius-md: 0.875rem;
  --bz-radius-lg: 1.125rem;
  --bz-radius-xl: 1.5rem;
  --bz-radius-pill: 999px;

  --bz-shadow-sm: 0 1px 2px rgb(16 21 18 / 0.05), 0 2px 8px rgb(16 21 18 / 0.04);
  --bz-shadow-md: 0 10px 30px rgb(16 21 18 / 0.08);
  --bz-focus-ring: 0 0 0 3px rgb(34 203 164 / 0.28);
  --bz-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --bz-duration-fast: 140ms;
  --bz-duration-normal: 220ms;
  --bz-control-height: 2.75rem;
}

/* Las superficies operativas usan la marca; las tiendas conservan la identidad de cada comercio. */
body.bz-app--operator,
body.bz-app--panel {
  /* Mismo literal que --bz-fondo/--bz-cabecera del sistema .bz-app (ver
     benzax-design-system.css más abajo y shared/styles.css): antes eran
     tonos distintos (acá un beige verdoso, allá un gris azulado) y se
     notaba como una franja de color distinta entre el fondo de la página
     y el header/sidebar, que sí usan ese otro sistema (confirmado con
     captura real). */
  --bg: #f6f7f9;
  --surface: var(--bz-neutral-0);
  --surface-2: var(--bz-neutral-100);
  --surface-sunken: var(--bz-neutral-25);
  --border: var(--bz-neutral-200);
  --border-soft: #e9e6de;
  --text: var(--bz-neutral-900);
  --text-muted: var(--bz-neutral-500);
  --primary: var(--bz-brand-teal-700);
  --primary-hover: #056451;
  --primary-soft: var(--bz-brand-teal-50);
  --primary-soft-text: var(--bz-brand-teal-700);
  --primary-contrast: #ffffff;
  --accent: var(--bz-brand-purple-500);
  --ring: rgb(34 203 164 / 0.28);
  --radius: var(--bz-radius-lg);
  --radius-sm: var(--bz-radius-sm);
  --shadow-sm: var(--bz-shadow-sm);
  --shadow-md: var(--bz-shadow-md);
}

/* Trazo de marca discreto para cabeceras y navegación activa. */
.bz-brand-accent {
  background: var(--bz-brand-gradient);
}

.bz-brand-text {
  color: var(--bz-brand-teal-700);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .bz-brand-text--gradient {
    background: var(--bz-brand-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

:where(.bz-app) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bz-brand-teal-500);
  outline-offset: 2px;
  box-shadow: var(--bz-focus-ring);
}

:where(.bz-app) :where(button, input, select, textarea) {
  min-height: var(--bz-control-height);
}

:where(.bz-app) :where(button, a, input, select, textarea) {
  transition:
    border-color var(--bz-duration-fast) var(--bz-ease-standard),
    background-color var(--bz-duration-fast) var(--bz-ease-standard),
    color var(--bz-duration-fast) var(--bz-ease-standard),
    box-shadow var(--bz-duration-fast) var(--bz-ease-standard),
    transform var(--bz-duration-fast) var(--bz-ease-standard);
}

:root[data-theme="dark"] body.bz-app--operator,
:root[data-theme="dark"] body.bz-app--panel {
  --bg: #0b0e14;
  --surface: #121815;
  --surface-2: #17211d;
  --surface-sunken: #0d1310;
  --border: #26352f;
  --border-soft: #1c2924;
  --text: #f3f6f4;
  --text-muted: #aab5b0;
  --primary: var(--bz-brand-teal-300);
  --primary-hover: #8aead1;
  --primary-soft: #10362d;
  --primary-soft-text: #86ead0;
  --primary-contrast: #07130f;
  --accent: var(--bz-brand-purple-300);
}

@media (prefers-reduced-motion: reduce) {
  :where(.bz-app) *,
  :where(.bz-app) *::before,
  :where(.bz-app) *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}