/* Radar — identidad qadRO (alineada con qadro.tech: paleta cian de qadro-doc.css,
   Space Grotesk / Manrope / JetBrains Mono). Tokens compartidos por / y /metricas.
   Valores tomados de los estilos computados del sitio en vivo. */
@import url("/assets/fonts.css");

:root {
  color-scheme: light;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* escala cian de qadRO */
  --s50: #effafc; --s100: #d6f1f6; --s200: #a5e0ea; --s300: #63c7d8;
  --s400: #22a5bd; --s500: #0d87a0; --s600: #0b6d83; --s700: #0a5568; --s900: #062832;

  --bg: #f7f8f9;            /* fondo de la app (bg-subtle del sitio) */
  --panel: #ffffff;
  --ink: #101a1e;           /* títulos */
  --ink-2: #3f454f;         /* texto de cuerpo */
  --muted: #5f6672;
  --line: rgba(16, 26, 30, .10);
  --line-strong: rgba(16, 26, 30, .18);
  --chip: #f1f3f4;          /* fondo "usted recibe" */
  --code: #f1f3f4;
  --tint: #eff6f8;
  --hero: linear-gradient(100deg, #f2fbfd 0%, #eaf7fa 38%, #f1f6f8 66%, #eef4f7 100%);
  --accent: #0b6d83;        /* enlaces, foco, marca */
  --accent-ink: #ffffff;
  --primary: #101a1e;       /* botón principal del sitio */
  --primary-ink: #ffffff;
  --user: #0b6d83; --user-ink: #ffffff;
  --ok: #1a7f4b; --err: #c0362c; --warn: #8a6215;
  --shadow: 0 1px 2px rgba(16, 26, 30, .04);
  --shadow-card: rgba(22, 25, 31, .16) 0 8px 24px -14px;
  --radius: 12px; --radius-sm: 8px;

  /* gráficas (validadas: CVD y separación en claro y oscuro) */
  --s1: #0d87a0; --s2: #eb6834; --s3: #6250d6; --s4: #eda100;
  --grid: #e8ecee; --axis: #c9ccd1;
  --meter-track: #d6f1f6; --meter-fill: #0d87a0;
  --good: #0ca30c; --critical: #d03b3b; --warning: #fab219;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1215; --panel: #121b1f; --ink: #eef3f5; --ink-2: #c7d0d4; --muted: #8b989d;
    --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .18);
    --chip: #1a262b; --code: #1a262b; --tint: #10252b;
    --hero: linear-gradient(100deg, #0e1f24 0%, #0c1a1f 50%, #0b1215 100%);
    --accent: #63c7d8; --accent-ink: #062832; --primary: #effafc; --primary-ink: #062832;
    --user: #0a5568; --user-ink: #effafc;
    --ok: #4cc38a; --err: #f07a6e; --warn: #e3b341;
    --shadow: none; --shadow-card: none;
    --s1: #22a5bd; --s2: #d95926; --s3: #9085e9; --s4: #c98500;
    --grid: #1f2c31; --axis: #2f3f45; --meter-track: #0a5568; --meter-fill: #22a5bd;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1215; --panel: #121b1f; --ink: #eef3f5; --ink-2: #c7d0d4; --muted: #8b989d;
  --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .18);
  --chip: #1a262b; --code: #1a262b; --tint: #10252b;
  --hero: linear-gradient(100deg, #0e1f24 0%, #0c1a1f 50%, #0b1215 100%);
  --accent: #63c7d8; --accent-ink: #062832; --primary: #effafc; --primary-ink: #062832;
  --user: #0a5568; --user-ink: #effafc;
  --ok: #4cc38a; --err: #f07a6e; --warn: #e3b341;
  --shadow: none; --shadow-card: none;
  --s1: #22a5bd; --s2: #d95926; --s3: #9085e9; --s4: #c98500;
  --grid: #1f2c31; --axis: #2f3f45; --meter-track: #0a5568; --meter-fill: #22a5bd;
}

body { font-family: var(--font-sans); color: var(--ink-2); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 600; letter-spacing: -0.02em; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--s300); outline-offset: 2px; }

/* ---------- encabezado compartido ---------- */
.q-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; align-items: center; gap: 18px; min-width: 0;
  height: 60px; padding: 0 20px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.q-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.q-brand img { height: 22px; width: auto; display: block; }
.q-brand .q-logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .q-brand .q-logo-light { display: none; } :root:not([data-theme="light"]) .q-brand .q-logo-dark { display: block; } }
:root[data-theme="dark"] .q-brand .q-logo-light { display: none; }
:root[data-theme="dark"] .q-brand .q-logo-dark { display: block; }
.q-product { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line-strong); }
.q-nav { display: flex; gap: 2px; }
.q-nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; padding: 7px 12px; border-radius: 6px; }
.q-nav a:hover { color: var(--accent); }
.q-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--chip); }

/* ---------- componentes ---------- */
.q-kicker { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.q-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--panel); border: 1px solid var(--s200); border-radius: 999px; padding: 5px 13px; }
.q-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s400); }
.btn { font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); border-radius: var(--radius-sm); padding: 8px 16px; cursor: pointer; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn.primary:hover { filter: brightness(1.25); color: var(--primary-ink); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }

@media (max-width: 900px) {
  .q-header { gap: 10px; padding: 0 12px; }
  .q-product { display: none; }
  .q-nav a { padding: 6px 8px; font-size: 14px; }
}
@media (max-width: 520px) {
  .q-brand .q-logo-light, .q-brand .q-logo-dark { height: 18px; }
}