/* ═══════════════════════════════════════════════════════════════
   ALTXERA7 · Design System · v1.0 · Junio 2025
   Fuente de verdad para CRM y Landing Page

   Uso:
     <link rel="stylesheet" href="altxera7.css">

   Tokens:   var(--ax-*)
   Clases:   .ax-btn .ax-input .ax-card .ax-badge .ax-nav-item
   Utilidades: .ax-label .ax-caption .ax-display .ax-truncate
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ══════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════ */
:root {

  /* ─── Colores de Marca ──────────────────────────────────────── */
  --ax-navy:       #1B2353;   /* Primario · UI · Estructura        */
  --ax-navy-dk:    #131B3A;   /* Sidebar · Dark surfaces           */
  --ax-navy-lt:    #2D3A6B;   /* Hover states · Active             */
  --ax-navy-xlt:   #3D4E8A;   /* Borders en fondos oscuros         */
  --ax-lime:       #8DC21F;   /* Acento · CTAs · Active states     */
  --ax-lime-dk:    #6EA018;   /* CTA hover · Links                 */
  --ax-lime-lt:    #B8DF5A;   /* Tags · Indicadores suaves         */
  --ax-lime-pale:  #EFF8D0;   /* Backgrounds de acento             */

  /* ─── Escala de Neutros ─────────────────────────────────────── */
  --ax-n0:   #FFFFFF;
  --ax-n50:  #F5F7FA;
  --ax-n100: #E8ECF4;
  --ax-n200: #D0D9E8;
  --ax-n300: #B8C4D8;
  --ax-n400: #A0AFCA;
  --ax-n500: #7B8A9E;
  --ax-n600: #5E6E82;
  --ax-n700: #4A5568;
  --ax-n800: #2D3A50;
  --ax-n900: #1E2D45;
  --ax-n950: #131B2E;

  /* ─── Colores Semánticos ────────────────────────────────────── */
  --ax-success:    #22C55E;
  --ax-success-dk: #16A34A;
  --ax-success-bg: #F0FDF4;
  --ax-warning:    #F59E0B;
  --ax-warning-dk: #D97706;
  --ax-warning-bg: #FFFBEB;
  --ax-error:      #EF4444;
  --ax-error-dk:   #DC2626;
  --ax-error-bg:   #FEF2F2;
  --ax-info:       #3B82F6;
  --ax-info-dk:    #2563EB;
  --ax-info-bg:    #EFF6FF;

  /* ─── Aliases de Superficie ─────────────────────────────────── */
  --ax-bg:            var(--ax-n50);     /* App background          */
  --ax-card:          var(--ax-n0);      /* Card / panel surface    */
  --ax-sidebar-bg:    var(--ax-navy-dk); /* Sidebar background      */
  --ax-overlay:       rgba(19,27,58,.6); /* Modal overlay           */

  /* ─── Aliases de Borde ──────────────────────────────────────── */
  --ax-border:        var(--ax-n200);
  --ax-border-strong: var(--ax-n300);
  --ax-border-focus:  var(--ax-navy);
  --ax-border-brand:  var(--ax-lime);

  /* ─── Aliases de Texto ──────────────────────────────────────── */
  --ax-text:     var(--ax-n900);   /* Texto principal              */
  --ax-text-2:   var(--ax-n500);   /* Texto secundario             */
  --ax-text-3:   var(--ax-n400);   /* Placeholder · Deshabilitado  */
  --ax-text-inv: var(--ax-n0);     /* Texto sobre fondos oscuros   */

  /* ─── Tipografía ────────────────────────────────────────────── */
  --ax-font-display: 'Outfit', system-ui, sans-serif;
  --ax-font-body:    'DM Sans', system-ui, sans-serif;
  --ax-font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Escala tipográfica */
  --ax-text-xs:   11px;
  --ax-text-sm:   12px;
  --ax-text-base: 14px;
  --ax-text-md:   15px;
  --ax-text-lg:   17px;
  --ax-text-xl:   20px;
  --ax-text-2xl:  24px;
  --ax-text-3xl:  30px;
  --ax-text-4xl:  36px;
  --ax-text-5xl:  48px;
  --ax-text-6xl:  64px;

  /* Pesos */
  --ax-light:     300;
  --ax-regular:   400;
  --ax-medium:    500;
  --ax-semibold:  600;
  --ax-bold:      700;
  --ax-extrabold: 800;
  --ax-black:     900;

  /* Interlineado */
  --ax-leading-tight:   1.2;
  --ax-leading-snug:    1.375;
  --ax-leading-normal:  1.5;
  --ax-leading-relaxed: 1.625;
  --ax-leading-loose:   1.75;

  /* Tracking (letter-spacing) */
  --ax-tracking-tight:   -0.025em;
  --ax-tracking-snug:    -0.015em;
  --ax-tracking-normal:   0em;
  --ax-tracking-wide:     0.025em;
  --ax-tracking-wider:    0.06em;
  --ax-tracking-widest:   0.12em;

  /* ─── Espaciado (base 4px) ──────────────────────────────────── */
  --ax-sp-0:   0px;
  --ax-sp-px:  1px;
  --ax-sp-1:   4px;
  --ax-sp-2:   8px;
  --ax-sp-3:   12px;
  --ax-sp-4:   16px;
  --ax-sp-5:   20px;
  --ax-sp-6:   24px;
  --ax-sp-7:   28px;
  --ax-sp-8:   32px;
  --ax-sp-10:  40px;
  --ax-sp-12:  48px;
  --ax-sp-14:  56px;
  --ax-sp-16:  64px;
  --ax-sp-20:  80px;
  --ax-sp-24:  96px;
  --ax-sp-32: 128px;

  /* ─── Radios de Borde ───────────────────────────────────────── */
  --ax-r-sm:   4px;
  --ax-r-md:   8px;
  --ax-r-lg:   10px;
  --ax-r-xl:   14px;
  --ax-r-2xl:  20px;
  --ax-r-3xl:  28px;
  --ax-r-full: 9999px;

  /* ─── Sombras (tono navy) ───────────────────────────────────── */
  --ax-shadow-xs: 0 1px 2px rgba(19,27,58,.06);
  --ax-shadow-sm: 0 2px 6px rgba(19,27,58,.08), 0 1px 2px rgba(19,27,58,.04);
  --ax-shadow-md: 0 4px 12px rgba(19,27,58,.10), 0 2px 4px rgba(19,27,58,.06);
  --ax-shadow-lg: 0 8px 24px rgba(19,27,58,.12), 0 4px 8px rgba(19,27,58,.08);
  --ax-shadow-xl: 0 16px 40px rgba(19,27,58,.14), 0 8px 16px rgba(19,27,58,.08);
  --ax-shadow-2xl:0 24px 64px rgba(19,27,58,.18), 0 12px 24px rgba(19,27,58,.10);
  --ax-shadow-lime: 0 4px 18px rgba(141,194,31,.30); /* Sombra de acción */
  --ax-shadow-inner: inset 0 2px 4px rgba(19,27,58,.08);

  /* ─── Z-Index ───────────────────────────────────────────────── */
  --ax-z-0:        0;
  --ax-z-raised:   10;
  --ax-z-dropdown: 100;
  --ax-z-sticky:   200;
  --ax-z-overlay:  300;
  --ax-z-modal:    400;
  --ax-z-toast:    500;

  /* ─── Transiciones ──────────────────────────────────────────── */
  --ax-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ax-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ax-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ax-dur-fast:    100ms;
  --ax-dur:         180ms;
  --ax-dur-slow:    280ms;
  --ax-dur-slower:  420ms;
  --ax-t:           var(--ax-dur) var(--ax-ease);       /* Default */
  --ax-t-fast:      var(--ax-dur-fast) var(--ax-ease-out);
  --ax-t-slow:      var(--ax-dur-slow) var(--ax-ease);

  /* ─── Layout ────────────────────────────────────────────────── */
  --ax-sidebar-w:         240px;
  --ax-sidebar-collapsed: 64px;
  --ax-topbar-h:          56px;
  --ax-content-max:       1200px;
  --ax-section-gap:       var(--ax-sp-6);
  --ax-card-gap:          var(--ax-sp-4);

  /* ─── Tokens de Componentes ─────────────────────────────────── */
  --ax-btn-h-sm:   32px;
  --ax-btn-h-md:   40px;
  --ax-btn-h-lg:   48px;
  --ax-btn-r:      var(--ax-r-lg);
  --ax-btn-font:   var(--ax-font-display);
  --ax-input-h:    44px;
  --ax-input-r:    var(--ax-r-md);
  --ax-card-r:     var(--ax-r-xl);
  --ax-card-p:     var(--ax-sp-6);
  --ax-nav-h:      40px;
  --ax-nav-r:      var(--ax-r-md);
  --ax-badge-h:    22px;
  --ax-table-row:  48px;
}

/* ══════════════════════════════════════════════════════════════════
   BASE RESET
   ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--ax-font-body);
  font-size: var(--ax-text-base);
  font-weight: var(--ax-regular);
  line-height: var(--ax-leading-normal);
  color: var(--ax-text);
  background: var(--ax-bg);
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }
a { color: var(--ax-navy); text-decoration: none; }
a:hover { color: var(--ax-navy-lt); }

/* ══════════════════════════════════════════════════════════════════
   TIPOGRAFÍA
   ══════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ax-font-display);
  font-weight: var(--ax-bold);
  line-height: var(--ax-leading-tight);
  letter-spacing: var(--ax-tracking-snug);
  color: var(--ax-text);
}
h1 { font-size: var(--ax-text-4xl); font-weight: var(--ax-extrabold); }
h2 { font-size: var(--ax-text-3xl); }
h3 { font-size: var(--ax-text-2xl); font-weight: var(--ax-semibold); }
h4 { font-size: var(--ax-text-xl);  font-weight: var(--ax-semibold); }
h5 { font-size: var(--ax-text-lg);  font-weight: var(--ax-medium); }
h6 { font-size: var(--ax-text-base); font-weight: var(--ax-semibold); }
p  { line-height: var(--ax-leading-relaxed); color: var(--ax-text-2); }

/* Clases de tipografía */
.ax-display {
  font-family: var(--ax-font-display);
  font-weight: var(--ax-extrabold);
  letter-spacing: var(--ax-tracking-tight);
  line-height: var(--ax-leading-tight);
}
.ax-label {
  font-size: var(--ax-text-xs);
  font-weight: var(--ax-semibold);
  letter-spacing: var(--ax-tracking-widest);
  text-transform: uppercase;
  color: var(--ax-text-2);
}
.ax-caption {
  font-size: var(--ax-text-sm);
  color: var(--ax-text-3);
  line-height: var(--ax-leading-normal);
}
.ax-mono {
  font-family: var(--ax-font-mono);
  font-size: 0.9em;
}

/* ══════════════════════════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════════════════════════ */
.ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ax-sp-2);
  height: var(--ax-btn-h-md);
  padding: 0 var(--ax-sp-5);
  border-radius: var(--ax-btn-r);
  font-family: var(--ax-btn-font);
  font-size: var(--ax-text-base);
  font-weight: var(--ax-semibold);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all var(--ax-t);
  text-decoration: none;
  user-select: none;
}
.ax-btn:focus-visible { outline: 2px solid var(--ax-lime); outline-offset: 2px; }

/* Variantes */
.ax-btn-primary {
  background: var(--ax-lime);
  color: var(--ax-navy-dk);
  box-shadow: var(--ax-shadow-lime);
}
.ax-btn-primary:hover {
  background: var(--ax-lime-dk);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(141,194,31,.36);
}
.ax-btn-primary:active { transform: translateY(0); }

.ax-btn-navy {
  background: var(--ax-navy);
  color: var(--ax-n0);
}
.ax-btn-navy:hover { background: var(--ax-navy-lt); }

.ax-btn-ghost {
  background: transparent;
  color: var(--ax-text);
  border: 1.5px solid var(--ax-border);
}
.ax-btn-ghost:hover { background: var(--ax-n50); border-color: var(--ax-n300); }

.ax-btn-danger {
  background: var(--ax-error-bg);
  color: var(--ax-error-dk);
  border: 1px solid rgba(239,68,68,.2);
}
.ax-btn-danger:hover { background: var(--ax-error); color: var(--ax-n0); }

/* Tamaños */
.ax-btn-sm { height: var(--ax-btn-h-sm); padding: 0 var(--ax-sp-3); font-size: var(--ax-text-sm); }
.ax-btn-lg { height: var(--ax-btn-h-lg); padding: 0 var(--ax-sp-7); font-size: var(--ax-text-md); }
.ax-btn-icon { width: var(--ax-btn-h-md); padding: 0; border-radius: var(--ax-r-md); }
.ax-btn-icon.ax-btn-sm { width: var(--ax-btn-h-sm); }
.ax-btn[disabled] { opacity: .45; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════
   INPUTS
   ══════════════════════════════════════════════════════════════════ */
.ax-input {
  display: block;
  width: 100%;
  height: var(--ax-input-h);
  padding: 0 var(--ax-sp-4);
  border: 1.5px solid var(--ax-border);
  border-radius: var(--ax-input-r);
  background: var(--ax-card);
  font-family: var(--ax-font-body);
  font-size: var(--ax-text-base);
  color: var(--ax-text);
  outline: none;
  transition: border-color var(--ax-t), box-shadow var(--ax-t);
}
.ax-input::placeholder { color: var(--ax-text-3); }
.ax-input:hover { border-color: var(--ax-n300); }
.ax-input:focus {
  border-color: var(--ax-navy);
  box-shadow: 0 0 0 3px rgba(27,35,83,.09);
}
.ax-input:disabled { opacity: .5; background: var(--ax-n50); cursor: not-allowed; }
.ax-input-error { border-color: var(--ax-error) !important; }
.ax-input-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important; }

.ax-field { display: flex; flex-direction: column; gap: var(--ax-sp-2); }
.ax-field-label {
  font-size: var(--ax-text-sm);
  font-weight: var(--ax-medium);
  color: var(--ax-text);
}
.ax-field-hint { font-size: var(--ax-text-xs); color: var(--ax-text-3); }
.ax-field-error { font-size: var(--ax-text-xs); color: var(--ax-error-dk); }

.ax-input-wrapper { position: relative; display: flex; align-items: center; }
.ax-input-wrapper .ax-input { padding-left: 38px; }
.ax-input-wrapper .ax-input-icon {
  position: absolute;
  left: 12px;
  color: var(--ax-text-3);
  pointer-events: none;
  display: flex;
}

/* ══════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════ */
.ax-card {
  background: var(--ax-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-card-r);
  padding: var(--ax-card-p);
  box-shadow: var(--ax-shadow-sm);
}
.ax-card-sm { padding: var(--ax-sp-4); }
.ax-card-lg { padding: var(--ax-sp-8); }
.ax-card-flat { box-shadow: none; }
.ax-card-hover { transition: box-shadow var(--ax-t), transform var(--ax-t); }
.ax-card-hover:hover { box-shadow: var(--ax-shadow-md); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════════
   BADGES / ESTADOS
   ══════════════════════════════════════════════════════════════════ */
.ax-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--ax-badge-h);
  padding: 0 var(--ax-sp-2);
  border-radius: var(--ax-r-full);
  font-size: var(--ax-text-xs);
  font-weight: var(--ax-semibold);
  white-space: nowrap;
}
.ax-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ax-badge-success  { background: var(--ax-success-bg); color: var(--ax-success-dk); }
.ax-badge-warning  { background: var(--ax-warning-bg); color: var(--ax-warning-dk); }
.ax-badge-error    { background: var(--ax-error-bg);   color: var(--ax-error-dk); }
.ax-badge-info     { background: var(--ax-info-bg);    color: var(--ax-info-dk); }
.ax-badge-navy     { background: rgba(27,35,83,.08);   color: var(--ax-navy); }
.ax-badge-lime     { background: var(--ax-lime-pale);  color: var(--ax-lime-dk); }
.ax-badge-neutral  { background: var(--ax-n100);       color: var(--ax-n700); }

/* ══════════════════════════════════════════════════════════════════
   NAVEGACIÓN (Sidebar del CRM)
   ══════════════════════════════════════════════════════════════════ */
.ax-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--ax-nav-h);
  padding: 0 var(--ax-sp-3);
  border-radius: var(--ax-nav-r);
  font-family: var(--ax-font-body);
  font-size: var(--ax-text-base);
  font-weight: var(--ax-medium);
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: all var(--ax-t);
  text-decoration: none;
  user-select: none;
}
.ax-nav-item:hover {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.88);
}
.ax-nav-item.active {
  background: rgba(141,194,31,.12);
  color: var(--ax-lime);
  font-weight: var(--ax-semibold);
}
.ax-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--ax-lime);
  border-radius: 0 3px 3px 0;
}

/* ══════════════════════════════════════════════════════════════════
   TABLAS
   ══════════════════════════════════════════════════════════════════ */
.ax-table { width: 100%; border-collapse: collapse; }
.ax-table thead tr { background: var(--ax-n50); }
.ax-table th {
  height: 40px;
  padding: 0 var(--ax-sp-4);
  font-family: var(--ax-font-body);
  font-size: var(--ax-text-xs);
  font-weight: var(--ax-semibold);
  color: var(--ax-text-2);
  letter-spacing: var(--ax-tracking-wider);
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--ax-border);
  white-space: nowrap;
}
.ax-table td {
  height: var(--ax-table-row);
  padding: 0 var(--ax-sp-4);
  font-size: var(--ax-text-base);
  color: var(--ax-text);
  border-bottom: 1px solid var(--ax-n100);
}
.ax-table tbody tr:hover td { background: var(--ax-n50); }
.ax-table tbody tr:last-child td { border-bottom: none; }

/* ══════════════════════════════════════════════════════════════════
   UTILIDADES
   ══════════════════════════════════════════════════════════════════ */
.ax-divider { height: 1px; background: var(--ax-border); }
.ax-divider-v { width: 1px; background: var(--ax-border); align-self: stretch; }
.ax-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-scrollable { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ax-n200) transparent; }
.ax-scrollable::-webkit-scrollbar { width: 5px; }
.ax-scrollable::-webkit-scrollbar-track { background: transparent; }
.ax-scrollable::-webkit-scrollbar-thumb { background: var(--ax-n200); border-radius: 99px; }
.ax-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Focus ring accesible */
:focus-visible { outline: 2px solid var(--ax-lime); outline-offset: 2px; }
*:focus:not(:focus-visible) { outline: none; }