/* ═══════════════════════════════════════════════════════════════
   BAIREX DIGITAL — Brand System v1.0
   Carga DESPUÉS de kabo-shared.css para overridear sus variables.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tipografía: General Sans desde Fontshare ─── */
@import url("https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap");

/* ─── Paleta completa ─── */
:root {
  /* Verdes (escala OKLCH madre = #369140) */
  --bx-green-50:  #F3FAF3;
  --bx-green-100: #E2F6E4;
  --bx-green-200: #C7EBCA;
  --bx-green-300: #9BDAA1;
  --bx-green-400: #68C071;
  --bx-green-500: #43A44E;
  --bx-green-600: #369140; /* PRIMARY */
  --bx-green-700: #2A6B31;
  --bx-green-800: #26552C;
  --bx-green-900: #214626;
  --bx-green-950: #0D2611;

  /* Grises neutros (Zinc-style) */
  --bx-gray-50:  #FAFAFA;
  --bx-gray-100: #F4F4F5;
  --bx-gray-200: #E4E4E7;
  --bx-gray-300: #D4D4D8;
  --bx-gray-400: #A1A1AA;
  --bx-gray-500: #71717A;
  --bx-gray-600: #52525B;
  --bx-gray-700: #3F3F46;
  --bx-gray-800: #27272A;
  --bx-gray-900: #18181B;
  --bx-gray-950: #09090B;

  /* Estados */
  --bx-error:    #EF4444;
  --bx-error-bg: rgba(239,68,68,.12);
  --bx-warning:  #F59E0B;
  --bx-warning-bg: rgba(245,158,11,.12);
  --bx-info:     #3B82F6;
  --bx-info-bg:  rgba(59,130,246,.12);
  --bx-success:  var(--bx-green-500);

  /* Tokens semánticos (lo que usan los componentes) */
  --bx-bg:           var(--bx-gray-950);
  --bx-bg-elevated:  var(--bx-gray-900);
  --bx-bg-overlay:   var(--bx-gray-800);
  --bx-surface:      #1A1A1D; /* entre 900 y 800, propio */
  --bx-border:       rgba(240,240,240,.07);
  --bx-border-strong: rgba(240,240,240,.14);
  --bx-text:         var(--bx-gray-50);
  --bx-text-muted:   var(--bx-gray-400);
  --bx-text-faint:   var(--bx-gray-500);
  --bx-primary:      var(--bx-green-600);
  --bx-primary-hover: var(--bx-green-500);
  --bx-primary-strong: var(--bx-green-700);
  --bx-primary-tint: rgba(54,145,64,.18);

  /* Tipografía */
  --bx-font: 'General Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Curva del sistema (tipo Railway/Berry: generosa, consistente) */
  --bx-radius-sm: 10px;   /* inputs pequeños, badges grandes */
  --bx-radius-md: 14px;   /* cards, panels, modales internos */
  --bx-radius-lg: 18px;   /* hero cards, sheet modal */
  --bx-radius-xl: 24px;   /* contenedores principales */
  --bx-radius-pill: 100px;
  --bx-radius-circle: 50%;

  /* Frame del sitio (estilo Railway): contenido centrado con padding lateral
     que crece en viewports anchos para dar el "marco". Coincide entre topbar
     y container así el wordmark y el contenido se alinean verticalmente. */
  --bx-frame-max: 1320px;
  --bx-frame-px: max(1.25rem, calc((100vw - 1320px) / 2));
}

/* ─── Override de variables legacy de kabo-shared.css ─── */
:root {
  --green:    var(--bx-primary);
  --gl:       var(--bx-primary-hover);
  --gg:       var(--bx-primary-tint);
  --d:        var(--bx-gray-800);
  --dk:       var(--bx-bg-elevated);
  --dkk:      var(--bx-bg);
  --card:     var(--bx-surface);
  --w:        var(--bx-text);
  --wd:       var(--bx-text-muted);
  --wdd:      var(--bx-text-faint);
  --red:      var(--bx-error);
  --red2:     var(--bx-error-bg);
  --amber:    var(--bx-warning);
  --amber2:   var(--bx-warning-bg);
  --border:   var(--bx-border);
  --border2:  var(--bx-border-strong);
  --input-bg: rgba(255,255,255,.04);
  --serif:    var(--bx-font); /* eliminamos Playfair, General Sans para todo */
  --sans:     var(--bx-font);
}

/* ─── Base de tipografía + background con halo radial ─── */
html, body {
  font-family: var(--bx-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--bx-text);
}
/* Background con halo verde sutil desde top-center (inspirado en Railway y 21st.dev).
   El gradient se posiciona en el body para que ocupe el viewport sin moverse al scrollear.
   !important para ganar al `background: var(--dkk)` que viene del <style> inline. */
body {
  background-color: var(--bx-bg) !important;
  background-image:
    radial-gradient(
      125% 125% at 50% -25%,
      rgba(54, 145, 64, 0.18) 0%,
      rgba(54, 145, 64, 0.06) 30%,
      transparent 65%
    ) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--bx-font);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* em queda como texto normal (sin cursiva ni color verde) — Santino pidió
   sacar las itálicas y NO destacar el em en los headings.
   !important para ganar a los selectores específicos del <style> inline
   (.brand em, .section-head h1 em, .modal-head h2 em, etc.) */
em, h1 em, h2 em, h3 em, h4 em, h5 em, h6 em, .brand em, [class*="head"] em {
  font-style: normal !important;
  color: inherit !important;
  font-weight: inherit !important;
}

/* ─── Tokens de estado para botones / badges existentes ─── */
.btn-primary { background: var(--bx-primary); color: white; }
.btn-primary:hover { background: var(--bx-primary-hover); }
.btn-primary:active { background: var(--bx-primary-strong); }

.btn-amber { background: var(--bx-warning); color: #1a1308; }
.btn-amber:hover { filter: brightness(1.08); }

.btn-danger { background: var(--bx-error); color: white; }
.btn-danger:hover { filter: brightness(1.08); }

/* ─── Wordmark del logo (Bairex Digital) ─── */
.bx-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--bx-font);
  font-size: 1.2rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: letter-spacing 280ms ease;
  user-select: none;
}

/* Las letras son hijas DIRECTAS de .bx-wordmark (sin wrappers internos)
   para que el nth-child del stagger reveal funcione en orden secuencial. */
.bx-wordmark .bx-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(4px);
  animation: bx-reveal 480ms cubic-bezier(.2,.7,.3,1) forwards;
  transition: color 200ms ease;
}
/* "Bairex" en blanco, semibold */
.bx-wordmark .bx-l-name {
  color: var(--bx-text);
  font-weight: 600;
}
/* "Digital" en verde primario, medium */
.bx-wordmark .bx-l-suffix {
  color: var(--bx-primary);
  font-weight: 500;
}
/* Espacio entre las dos palabras (es una letra "fantasma" para que el stagger
   incluya un beat de pausa entre Bairex y Digital). */
.bx-wordmark .bx-l-space {
  width: 0.35em;
}

/* Hover: ligera expansión + "Bairex" se vuelve verde también */
.bx-wordmark:hover { letter-spacing: 0.04em; }
.bx-wordmark:hover .bx-l-name { color: var(--bx-primary-hover); }
.bx-wordmark:hover .bx-l-suffix { color: var(--bx-text); }

/* Stagger reveal: cada letra entra con delay incremental */
.bx-wordmark .bx-letter:nth-child(1)  { animation-delay: 0ms; }
.bx-wordmark .bx-letter:nth-child(2)  { animation-delay: 35ms; }
.bx-wordmark .bx-letter:nth-child(3)  { animation-delay: 70ms; }
.bx-wordmark .bx-letter:nth-child(4)  { animation-delay: 105ms; }
.bx-wordmark .bx-letter:nth-child(5)  { animation-delay: 140ms; }
.bx-wordmark .bx-letter:nth-child(6)  { animation-delay: 175ms; }
.bx-wordmark .bx-letter:nth-child(7)  { animation-delay: 210ms; }
.bx-wordmark .bx-letter:nth-child(8)  { animation-delay: 245ms; }
.bx-wordmark .bx-letter:nth-child(9)  { animation-delay: 280ms; }
.bx-wordmark .bx-letter:nth-child(10) { animation-delay: 315ms; }
.bx-wordmark .bx-letter:nth-child(11) { animation-delay: 350ms; }
.bx-wordmark .bx-letter:nth-child(12) { animation-delay: 385ms; }
.bx-wordmark .bx-letter:nth-child(13) { animation-delay: 420ms; }
.bx-wordmark .bx-letter:nth-child(14) { animation-delay: 455ms; }

@keyframes bx-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Misc: refinamientos sobre el sistema existente ─── */
.nav, nav { background: rgba(0,0,0,.4); backdrop-filter: blur(12px); border-bottom: 1px solid var(--bx-border); }
.card, .invoice-chip { background: var(--bx-surface); border-color: var(--bx-border); }

/* Reduce motion: respetar preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
  .bx-wordmark .bx-letter {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .bx-wordmark { transition: none; }
}