/* erpxtender-tokens.css - sistema de diseño ERPXtender v2 ("claridad")
   Variables y clases base listas para portar a ASP.NET MVC Core (site.css).
   Generado desde los tokens de los prototipos (window.EV). */

:root {
  /* ---- Color ---- */
  --ev-ink: #17132A;          /* texto principal / fondos oscuros */
  --ev-violet: #6B4DF6;       /* primario de marca */
  --ev-violet-deep: #4B2EC9;  /* acento profundo / gradiente */
  --ev-body: #5C5572;         /* texto de cuerpo secundario */
  --ev-line: #E8E4F3;         /* bordes */
  --ev-panel: #EDE8FE;        /* fondo chip/badge violeta claro */
  --ev-soft: #FAF9FE;         /* fondo de sección alterno */
  --ev-blue: #2684FF;         /* acento (Conexión Directa, operación) */
  --ev-violet-deep2: #4B2EC9;
  --ev-orange: #FB5607;       /* acento (MCP, "Próximamente") */
  --ev-pink: #FF63A5;         /* acento (Reportes) */
  --ev-green: #1FA971;        /* acento (Pulso), éxito */
  --ev-wa: #25D366;           /* verde WhatsApp */
  --ev-muted: #6E6A86;        /* texto tenue / placeholders — AA 4.5:1 sobre blanco (a11y) */

  /* Variantes oscuras SOLO para texto pequeño de marca sobre fondos claros (AA 4.5:1).
     Los puntos, bordes, iconos y texto grande siguen usando el color vivo de arriba. */
  --ev-green-text:  #0E744A;
  --ev-orange-text: #B83E00;
  --ev-blue-text:   #1A66CC;
  --ev-redbrown-text: #A84A2E;
  --ev-teal-text:   #0B7A8A;
  --ev-red-text:    #C0392B;

  /* ---- Tipografía ---- */
  --ev-font: 'Hanken Grotesk', system-ui, sans-serif;

  /* ---- Gradiente ---- */
  --ev-grad-violet: linear-gradient(135deg, #8466FF 0%, #6B4DF6 52%, #4B2EC9 100%);

  /* ---- Sombras ---- */
  --ev-shadow-sm: 0 3px 12px rgba(23,19,42,.07);
  --ev-shadow-md: 0 16px 36px -10px rgba(23,19,42,.14);
  --ev-shadow-lg: 0 26px 50px -16px rgba(23,19,42,.22);
  --ev-glow: 0 12px 34px -6px rgba(107,77,246,.45);

  /* ---- Radios ---- */
  --ev-radius-card: 20px;
  --ev-radius-sm: 12px;
  --ev-radius-pill: 100px;

  /* ---- Layout ---- */
  --ev-wrap: 1180px;
  --ev-gutter: 32px;

  /* ---- Escala tipográfica ---- */
  --ev-text-body: 15px;
  --ev-text-sub: 18px;       /* subtítulos de sección */
  --ev-text-h2: 44px;        /* título de sección */
  --ev-text-h1: 54px;        /* hero (50-60 según página) */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--ev-font);
  color: var(--ev-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Contenedor ---- */
.ev-wrap { max-width: var(--ev-wrap); margin: 0 auto; width: 100%; padding-left: var(--ev-gutter); padding-right: var(--ev-gutter); }

/* ---- Tipografía ---- */
.ev-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ev-violet); background: #fff; border: 1px solid var(--ev-line);
  border-radius: var(--ev-radius-pill); padding: 6px 14px; box-shadow: var(--ev-shadow-sm);
}
.ev-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ev-h1 { font-size: var(--ev-text-h1); font-weight: 800; line-height: 1.04; letter-spacing: -0.04em; margin: 0; color: var(--ev-ink); }
.ev-h2 { font-size: var(--ev-text-h2); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; margin: 0; color: var(--ev-ink); }
.ev-h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin: 0; color: var(--ev-ink); }
.ev-sub { font-size: var(--ev-text-sub); line-height: 1.55; color: var(--ev-body); text-wrap: pretty; }
.ev-body { font-size: var(--ev-text-body); line-height: 1.6; color: var(--ev-body); }

/* ---- Botones (pill) ---- */
.ev-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: inherit; font-size: 16px; font-weight: 700;
  border-radius: var(--ev-radius-pill); padding: 16px 28px; text-decoration: none;
  cursor: pointer; border: none; transition: transform .15s ease, filter .15s ease;
}
.ev-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.ev-btn--primary { background: var(--ev-grad-violet); color: #fff; box-shadow: var(--ev-glow); }
.ev-btn--outline { background: #fff; color: var(--ev-ink); border: 1px solid var(--ev-line); box-shadow: var(--ev-shadow-sm); }
.ev-btn--ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); }

/* ---- Chips de disponibilidad ---- */
.ev-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--ev-radius-pill); white-space: nowrap; }
.ev-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ev-chip--uni  { color: var(--ev-green);  background: rgba(31,169,113,.09);  border: 1px solid rgba(31,169,113,.27); }
.ev-chip--soon { color: var(--ev-orange); background: rgba(251,86,7,.09);    border: 1px solid rgba(251,86,7,.27); }
.ev-chip--bind { color: var(--ev-blue);   background: rgba(38,132,255,.09);  border: 1px solid rgba(38,132,255,.27); }

/* ---- Tarjeta ---- */
.ev-card {
  background: #fff; border: 1px solid var(--ev-line); border-radius: var(--ev-radius-card);
  padding: 26px 24px; box-shadow: var(--ev-shadow-sm);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}
.ev-card--hover:hover { transform: translateY(-4px); box-shadow: var(--ev-shadow-lg); }

/* ---- Cuadro de icono ---- */
.ev-icon-box { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }

/* ---- Banda oscura ---- */
.ev-dark { background: var(--ev-ink); color: #fff; }

/* ---- FAQ ---- */
.ev-faq { background: #fff; border: 1px solid var(--ev-line); border-radius: 16px; box-shadow: var(--ev-shadow-sm); }
.ev-faq > summary { list-style: none; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--ev-ink); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ev-faq > summary::-webkit-details-marker { display: none; }
.ev-faq .ev-faq-ic { color: var(--ev-violet); font-size: 20px; font-weight: 700; transition: transform .2s; }
.ev-faq[open] .ev-faq-ic { transform: rotate(45deg); }
.ev-faq p { font-size: 15px; line-height: 1.6; color: var(--ev-body); margin: 0; padding: 0 20px 18px; }