/* =============================================================================
   KortiQ — sistema de diseño (panel y sitio)
   Mismo lenguaje que el sitio y el acceso: blanco, tinta y azul, Inter 800 apretada para
   títulos, botones en pastilla y el prisma del logo (azul → celeste → verde agua) como acento.
   ============================================================================= */

:root {
  color-scheme: light;
  --kq-azul: #2F49F5;
  --kq-azul-hover: #2338D6;
  --kq-azul-suave: #EEF1FF;
  --kq-azul-borde: #C9D1FF;
  --kq-sinapsis: #00C2A8;
  --kq-sinapsis-suave: #E3F8F5;
  --kq-celeste: #3D7BFF;
  --kq-chispa: #7FF5E3;
  --kq-prisma: linear-gradient(135deg, #2F49F5 0%, #3D7BFF 58%, #00C2A8 100%);

  --kq-tinta: #0E1325;
  --kq-texto: #2A3042;
  --kq-gris: #5D6475;
  --kq-gris-claro: #8E95A8;
  --kq-borde: #E2E6F3;
  --kq-borde-fuerte: #CFD6EA;
  --kq-fondo: #FFFFFF;
  --kq-fondo-suave: #F5F7FF;
  --kq-fondo-hundido: #EDF0FA;

  --kq-ok: #12A05C;
  --kq-ok-suave: #E7F7EE;
  --kq-alerta: #C27400;
  --kq-alerta-suave: #FFF4E0;
  --kq-error: #D93B3F;
  --kq-error-suave: #FDECEC;

  --kq-radio-s: 10px;
  --kq-radio: 14px;
  --kq-radio-l: 22px;
  --kq-sombra-s: 0 1px 2px rgb(14 19 37 / .04);
  --kq-sombra: 0 16px 40px -24px rgb(47 73 245 / .35), 0 1px 3px rgb(14 19 37 / .05);
  --kq-sombra-l: 0 30px 80px -20px rgb(14 19 37 / .35);

  --kq-fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kq-mono: ui-monospace, "SF Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--kq-fuente);
  font-size: 15px;
  line-height: 1.5;
  color: var(--kq-texto);
  background: var(--kq-fondo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--kq-tinta); line-height: 1.15; margin: 0; letter-spacing: -0.025em; font-weight: 700; }
h1, h2 { font-weight: 800; letter-spacing: -0.035em; }
p { margin: 0; }
a { color: var(--kq-azul); }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--kq-azul); outline-offset: 3px; }

.kq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.kq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px; border-radius: 99px;
  border: 1px solid var(--kq-borde-fuerte); background: var(--kq-fondo); color: var(--kq-tinta);
  font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.kq-btn:hover { background: var(--kq-fondo-suave); }
.kq-btn:disabled { opacity: .55; cursor: not-allowed; }
.kq-btn--prim { background: var(--kq-azul); border-color: var(--kq-azul); color: #fff; box-shadow: 0 8px 20px -8px rgb(47 73 245 / .55); }
.kq-btn--prim:hover { background: var(--kq-azul-hover); border-color: var(--kq-azul-hover); box-shadow: 0 10px 24px -8px rgb(47 73 245 / .65); }
.kq-btn--fantasma { border-color: transparent; background: transparent; color: var(--kq-gris); }
.kq-btn--fantasma:hover { background: var(--kq-fondo-hundido); color: var(--kq-tinta); }
.kq-btn--peligro { color: var(--kq-error); }
.kq-btn--s { min-height: 32px; padding: 0 12px; font-size: 13px; }
.kq-btn--l { min-height: 50px; padding: 0 26px; font-size: 15.5px; }
.kq-btn--icono { width: 36px; min-height: 36px; padding: 0; }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.kq-campo { display: flex; flex-direction: column; gap: 6px; }
.kq-campo > span:first-child { font-size: 13px; font-weight: 600; color: var(--kq-tinta); }
.kq-ayuda { font-size: 12.5px; color: var(--kq-gris); }
.kq-input, .kq-textarea, .kq-select {
  width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--kq-radio-s);
  border: 1px solid var(--kq-borde-fuerte); background: var(--kq-fondo); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.kq-textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.kq-input:focus, .kq-textarea:focus, .kq-select:focus { border-color: var(--kq-azul); box-shadow: 0 0 0 3px var(--kq-azul-suave); }
.kq-input:user-invalid { border-color: var(--kq-error); }
.kq-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 14px; }
.kq-switch input { appearance: none; width: 38px; height: 22px; border-radius: 99px; background: var(--kq-borde-fuerte); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.kq-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--kq-sombra-s); transition: transform .15s; }
.kq-switch input:checked { background: var(--kq-azul); }
.kq-switch input:checked::after { transform: translateX(16px); }

/* ── Tarjetas, chips, insignias ──────────────────────────────────────────── */
.kq-card { background: var(--kq-fondo); border: 1px solid var(--kq-borde); border-radius: 18px; box-shadow: var(--kq-sombra-s); }
.kq-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--kq-fondo-hundido); color: var(--kq-gris); white-space: nowrap; }
.kq-chip--azul { background: var(--kq-azul-suave); color: var(--kq-azul); }
.kq-chip--ok { background: var(--kq-ok-suave); color: var(--kq-ok); }
.kq-chip--alerta { background: var(--kq-alerta-suave); color: var(--kq-alerta); }
.kq-chip--sinapsis { background: var(--kq-sinapsis-suave); color: #00806F; }
.kq-punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.kq-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; flex: none; }

/* ── Diálogos (nativos, <dialog>) ────────────────────────────────────────── */
.kq-dialog { border: 0; padding: 0; border-radius: var(--kq-radio-l); box-shadow: var(--kq-sombra-l); width: min(520px, calc(100vw - 32px)); color: var(--kq-texto); }
.kq-dialog::backdrop { background: rgb(14 19 37 / .45); backdrop-filter: blur(4px); }
.kq-dialog > form, .kq-dialog > div { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.kq-dialog h2 { font-size: 22px; }
.kq-dialog footer { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Avisos (toast) ──────────────────────────────────────────────────────── */
.kq-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--kq-tinta); color: #fff; padding: 11px 20px; border-radius: 99px; font-size: 14px; font-weight: 500; box-shadow: var(--kq-sombra-l); z-index: 1000; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.kq-chip--error { background: var(--kq-error-suave); color: var(--kq-error); }

/* ¿Cuánto te rinde el saldo? (marca/rinde.js) */
.rinde { display: grid; gap: 16px; min-width: 0; }
.rinde h2 { margin: 0; }
.rinde-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rinde-si { color: var(--kq-gris); font-weight: 600; margin-inline-end: 4px; }
.rinde-chip { font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--kq-borde-fuerte); background: transparent; color: var(--kq-texto); cursor: pointer; }
.rinde-chip[aria-pressed="true"] { background: var(--kq-azul); border-color: var(--kq-azul); color: #fff; }
.rinde-chip:focus-visible, .rinde-desliz:focus-visible { outline: 2px solid var(--kq-azul); outline-offset: 2px; }
.rinde-desliz { inline-size: 100%; accent-color: var(--kq-azul); margin: 0; }
.rinde-hero { display: grid; gap: 2px; padding: 18px 20px; border-radius: 16px; background: var(--kq-azul-suave); border: 1px solid var(--kq-azul-borde); }
.rinde-aprox, .rinde-que { color: var(--kq-gris); }
.rinde-que { color: var(--kq-texto); font-weight: 600; }
.rinde-num { font-size: clamp(2.6rem, 8vw, 3.6rem); line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--kq-tinta, var(--kq-texto)); }
.rinde-otros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rinde-otros li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--kq-borde); border-radius: 12px; min-width: 0; }
.rinde-otros .rinde-num { font-size: 1.5rem; }
.rinde-otros span { color: var(--kq-gris); font-size: .875rem; }
.rinde-dura { display: grid; gap: 8px; }
.rinde-dura p { margin: 0; line-height: 1.9; }
.rinde-ritmo { display: inline-block; inline-size: 5.5em; padding: 4px 8px; margin: 0 2px; }
.rinde-barra { position: relative; block-size: 12px; border-radius: 999px; background: var(--kq-fondo-hundido); overflow: hidden; }
.rinde-barra i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 999px; transition: inline-size .42s cubic-bezier(.2,.7,.2,1); }
.rinde-barra-llena { background: var(--kq-azul-borde); z-index: 0; }
.rinde-barra-actual { background: var(--kq-azul); z-index: 1; }
.rinde-escala { display: flex; justify-content: space-between; font-size: .75rem; color: var(--kq-gris); }
.rinde-actual { color: var(--kq-gris); font-size: .9rem; }
.rinde-nota { margin: 0; color: var(--kq-gris); font-size: .85rem; }
.rinde-cargar { justify-self: start; }