/* ============================================================
   AP AI Lab Comercial — Design System LIGHT v1
   Fuente única de verdad para páginas-hub. Derivado del home.
   Regla: NO hardcodear colores. Usar SIEMPRE los tokens var(--ap-*).
   Tema: light. Los dashboards profundos (audit, speech, geo/seo,
   commerce) se quedan dark a propósito (paneles de data del híbrido).
   ============================================================ */

:root{
  /* Surfaces */
  --ap-bg:#f4f5f8;
  --ap-surface:#ffffff;
  --ap-surface-2:#fbfbfd;
  --ap-surface-3:#f6f7fb;

  /* Ink / text */
  --ap-ink:#10151e;
  --ap-ink-2:#3b4250;
  --ap-mut:#7b8498;

  /* Lines */
  --ap-line:#e7e9f0;
  --ap-line-2:#d2d6e2;

  /* Brand accents */
  --ap-accent:#1a1aee;        /* AP indigo — acción primaria */
  --ap-accent-ink:#1414c4;
  --ap-accent-tint:#ececfe;
  --ap-teal:#00c2ae;          /* secundario / positivo / live */
  --ap-teal-tint:#dcfaf5;
  --ap-amber:#e08a17;         /* roadmap / warning suave */
  --ap-amber-tint:#fdf0db;
  --ap-slate:#64748b;         /* devs / utilidad técnica */
  --ap-slate-tint:#eef1f6;

  /* Elevation */
  --ap-shadow:0 1px 2px rgba(16,21,30,.06), 0 0 0 1px rgba(16,21,30,.045);
  --ap-shadow-hov:0 12px 26px rgba(16,21,30,.10), 0 0 0 1px rgba(26,26,238,.28);

  /* Shape */
  --ap-r-card:16px;
  --ap-r-pill:999px;
  --ap-r-btn:10px;

  --ap-maxw:1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--ap-bg);
  color:var(--ap-ink);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{ text-decoration:none; color:inherit; }

/* ── Top bar ── */
.ap-topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px;
  padding:14px 30px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--ap-line);
}
.ap-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--ap-ink-2);
  padding:7px 12px; border:1px solid var(--ap-line); border-radius:var(--ap-r-pill);
  background:var(--ap-surface);
  transition:border-color .15s ease, color .15s ease;
}
.ap-back:hover{ border-color:var(--ap-accent); color:var(--ap-accent); }
.ap-back svg{ width:15px; height:15px; stroke:currentColor; fill:none; }
.ap-brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.3px; font-size:15px; }
.ap-brand .ap-mark{
  width:26px; height:26px; border-radius:7px;
  background:linear-gradient(135deg,var(--ap-accent),#5b5bf0);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:900;
  box-shadow:0 2px 8px rgba(26,26,238,.35);
}
.ap-topbar__right{ margin-left:auto; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ap-mut); }

/* ── Page wrap & header ── */
.ap-page{ max-width:var(--ap-maxw); margin:0 auto; padding:30px 30px 70px; }
.ap-header{ margin:6px 0 8px; }
.ap-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ap-accent); font-weight:700;
}
.ap-eyebrow .ap-dot{ width:8px; height:8px; border-radius:50%; background:var(--ap-accent); }
.ap-h1{ font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:-1px; line-height:1.12; margin:10px 0 8px; }
.ap-lede{ font-size:15px; color:var(--ap-ink-2); line-height:1.6; max-width:680px; margin:0; }

/* ── Section label / band ── */
.ap-band{ display:flex; align-items:center; gap:13px; margin:34px 2px 14px; }
.ap-band__txt{ display:inline-flex; align-items:center; gap:9px; font-size:12px; letter-spacing:1.6px; text-transform:uppercase; font-weight:800; color:var(--ap-ink); white-space:nowrap; }
.ap-band__txt .ap-sub{ font-size:12px; color:var(--ap-mut); font-weight:600; text-transform:none; letter-spacing:0; }
.ap-band__dot{ width:9px; height:9px; border-radius:50%; background:var(--ap-accent); }
.ap-band__line{ flex:1; height:1px; background:var(--ap-line); }
.ap-band__count{ font-size:11px; letter-spacing:.5px; color:var(--ap-mut); font-weight:700; }

/* ── Grid + cards ── */
.ap-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.ap-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.ap-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:1080px){ .ap-grid,.ap-grid--4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .ap-grid,.ap-grid--4,.ap-grid--2{ grid-template-columns:1fr; } }

.ap-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--ap-surface); border:1px solid var(--ap-line); border-radius:var(--ap-r-card);
  padding:18px; min-height:150px;
  box-shadow:var(--ap-shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.ap-card:hover{ transform:translateY(-3px); box-shadow:var(--ap-shadow-hov); }
.ap-card__icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; background:var(--ap-accent-tint); }
.ap-card__icon svg{ width:19px; height:19px; stroke:var(--ap-accent); fill:none; }
.ap-card__title{ font-size:16px; font-weight:700; letter-spacing:-.2px; margin:0 0 4px; }
.ap-card__desc{ font-size:12.5px; line-height:1.5; color:var(--ap-mut); margin:0; }
.ap-card__meta{ margin-top:auto; padding-top:12px; display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:700; letter-spacing:.3px; }
/* hero/feature card (1 destacada) */
.ap-card--hero{ min-height:auto; padding:24px; }
.ap-card--hero .ap-card__title{ font-size:22px; }
.ap-card--hero .ap-card__desc{ font-size:13.5px; }

/* stat chips dentro de una card */
.ap-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ap-chip{ display:inline-flex; align-items:baseline; gap:5px; padding:5px 10px; border:1px solid var(--ap-line); border-radius:var(--ap-r-pill); background:var(--ap-surface-3); font-size:11px; color:var(--ap-mut); }
.ap-chip strong{ color:var(--ap-ink); font-weight:800; font-size:12px; }

/* ── Tags / badges ── */
.ap-tag-live{ color:var(--ap-teal); display:inline-flex; align-items:center; gap:5px; }
.ap-tag-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ap-teal); box-shadow:0 0 7px var(--ap-teal); }
.ap-tag-new{ color:#fff; background:var(--ap-accent); padding:2px 8px; border-radius:var(--ap-r-pill); font-size:9px; letter-spacing:1px; text-transform:uppercase; }
.ap-tag-soon{ color:var(--ap-amber); background:var(--ap-amber-tint); border:1px solid rgba(224,138,23,.30); padding:3px 9px; border-radius:var(--ap-r-pill); font-size:9px; letter-spacing:1.4px; text-transform:uppercase; font-weight:800; }

/* ── CTA inside cards ── */
.ap-cta{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--ap-accent); margin-top:auto; padding-top:12px; }
.ap-cta svg{ width:14px; height:14px; stroke:currentColor; fill:none; transition:transform .15s ease; }
.ap-card:hover .ap-cta svg{ transform:translateX(3px); }

/* ── Buttons ── */
.ap-btn{ display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:14px; font-weight:600; padding:11px 18px; border-radius:var(--ap-r-btn); border:1px solid transparent; cursor:pointer; }
.ap-btn--primary{ background:var(--ap-accent); color:#fff; }
.ap-btn--primary:hover{ background:var(--ap-accent-ink); }
.ap-btn--ghost{ background:var(--ap-surface); color:var(--ap-ink); border-color:var(--ap-line); }
.ap-btn--ghost:hover{ border-color:var(--ap-accent); color:var(--ap-accent); }

/* ── Group tints (para variar el icono por sección) ── */
.ap-g-teal .ap-card__icon{ background:var(--ap-teal-tint); }
.ap-g-teal .ap-card__icon svg{ stroke:#079b8b; }
.ap-g-amber .ap-card__icon{ background:var(--ap-amber-tint); }
.ap-g-amber .ap-card__icon svg{ stroke:var(--ap-amber); }
.ap-g-slate .ap-card__icon{ background:var(--ap-slate-tint); }
.ap-g-slate .ap-card__icon svg{ stroke:var(--ap-slate); }

/* ── Dark data panel (el guiño híbrido: dato denso sobre canvas claro) ── */
.ap-panel-dark{
  background:#0c1020; color:#cdd6f0; border-radius:14px; padding:18px 20px;
  box-shadow:0 16px 30px rgba(12,16,32,.28);
}
.ap-panel-dark .ap-pd__head{ display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:#7e8bb5; font-weight:700; margin-bottom:12px; }
.ap-panel-dark .ap-pd__dot{ width:7px; height:7px; border-radius:50%; background:var(--ap-teal); box-shadow:0 0 8px var(--ap-teal); }
.ap-panel-dark .ap-pd__kpi b{ color:#fff; }

/* ── Disabled / roadmap chip (sin link, no lleva a stubs muertos) ── */
.ap-soon{
  border:1px dashed var(--ap-line-2); border-radius:var(--ap-r-card); background:transparent;
  padding:16px 17px; min-height:90px; color:var(--ap-mut); cursor:default;
}
.ap-soon__t{ font-size:14px; font-weight:700; color:var(--ap-ink-2); margin:9px 0 3px; }
.ap-soon__d{ font-size:11.5px; line-height:1.45; color:var(--ap-mut); margin:0; }

/* ── Footer ── */
.ap-footer{ margin-top:46px; text-align:center; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#a3abbd; font-weight:600; }

/* ============================================================
   TEMA OSCURO — toggle. Como todo usa var(--ap-*), redefinir
   los tokens bajo [data-theme="dark"] voltea el sitio entero.
   ============================================================ */
:root[data-theme="dark"]{
  --ap-bg:#0a0e1a;
  --ap-surface:#121829;
  --ap-surface-2:#161d31;
  --ap-surface-3:#161d31;
  --ap-ink:#eaf0ff;
  --ap-ink-2:#b6c2e0;
  --ap-mut:#8492b2;
  --ap-line:#26304a;
  --ap-line-2:#323d5c;
  --ap-accent:#6e6ef8;
  --ap-accent-ink:#8a8afb;
  --ap-accent-tint:#1c2350;
  --ap-teal:#1fd4bf;
  --ap-teal-tint:#0d2d2a;
  --ap-amber:#f0a23a;
  --ap-amber-tint:#2a2010;
  --ap-slate:#94a3c0;
  --ap-slate-tint:#171f33;
  --ap-shadow:0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
  --ap-shadow-hov:0 12px 26px rgba(0,0,0,.6), 0 0 0 1px rgba(110,110,248,.5);
}
:root[data-theme="dark"] .ap-topbar{ background:rgba(10,14,26,.82); }

/* ── Toggle button ── */
.ap-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; cursor:pointer;
  border:1px solid var(--ap-line); border-radius:999px;
  background:var(--ap-surface); color:var(--ap-ink-2);
  transition:border-color .15s ease, color .15s ease;
}
.ap-toggle:hover{ border-color:var(--ap-accent); color:var(--ap-accent); }
.ap-toggle svg{ width:17px; height:17px; stroke:currentColor; fill:none; }
.ap-toggle .i-sun{ display:none; }
.ap-toggle .i-moon{ display:block; }
:root[data-theme="dark"] .ap-toggle .i-sun{ display:block; }
:root[data-theme="dark"] .ap-toggle .i-moon{ display:none; }