/* «Kuadero Tasas», la web (C6 F2). Hoja PROPIA: otra marca, sin Bootstrap ni fuentes de fuera (abre rápido con mala
   señal). El color se pide por su nombre (tokens), y el tema oscuro solo cambia sus valores según el teléfono. */
:root {
  --kt-acento: #1A56DB;
  --kt-acento-suave: #e8effc;
  --kt-fondo: #f6f7f9;
  --kt-superficie: #ffffff;
  --kt-texto: #14171f;
  --kt-texto-2: #5b6170;
  --kt-borde: #e3e6ec;
  --kt-borde-fuerte: #b9bfcc;
  --kt-sube: #b42318;
  --kt-baja: #067647;
  --kt-radio: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --kt-acento: #6f9cf7;
    --kt-acento-suave: #1c2740;
    --kt-fondo: #0f1115;
    --kt-superficie: #181b22;
    --kt-texto: #eceef3;
    --kt-texto-2: #a3a9b6;
    --kt-borde: #2a2f3a;
    --kt-borde-fuerte: #4a5160;
    --kt-sube: #f97066;
    --kt-baja: #47cd89;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--kt-fondo); color: var(--kt-texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--kt-acento); }
.kt-ancho { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.kt-cifra, .kt-valor, .kt-flechas, table td { font-variant-numeric: tabular-nums; }

/* Cabecera */
.kt-cabecera { background: var(--kt-superficie); border-bottom: 1px solid var(--kt-borde); position: sticky; top: 0; z-index: 2; }
.kt-cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.kt-marca { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.1rem; color: var(--kt-texto); text-decoration: none; white-space: nowrap; }
.kt-marca-k { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--kt-acento); color: #fff; font-weight: 900; }
.kt-marca-tasas { color: var(--kt-acento); font-weight: 700; }
.kt-pestanas { display: flex; gap: 4px; }
.kt-pestanas a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--kt-texto-2); font-weight: 600; }
.kt-pestanas a[aria-current="page"] { background: var(--kt-acento-suave); color: var(--kt-acento); }

main { padding-top: 16px; padding-bottom: 8px; }
.kt-titulo { font-size: 1.5rem; margin: 8px 0 0; }
.kt-fecha { color: var(--kt-texto-2); margin: 0 0 16px; }
.kt-nota { color: var(--kt-texto-2); font-size: .85rem; margin: 4px 0 0; }
h2 { font-size: 1rem; margin: 0 0 8px; }
section { margin-bottom: 20px; }

/* Tarjetas de tasas */
.kt-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kt-tarjeta { background: var(--kt-superficie); border: 1px solid var(--kt-borde); border-radius: var(--kt-radio); padding: 12px; min-width: 0; }
.kt-tarjeta h2, .kt-tarjeta h3 { font-size: .85rem; color: var(--kt-texto-2); font-weight: 600; margin: 0; }
.kt-valor { font-size: 1.35rem; font-weight: 800; margin: 2px 0 0; overflow-wrap: anywhere; }
.kt-valor small { font-size: .75rem; font-weight: 600; color: var(--kt-texto-2); }
@media (max-width: 420px) {
  .kt-tarjetas { grid-template-columns: 1fr; }
  .kt-tarjeta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; column-gap: 8px; }
  .kt-tarjeta .kt-nota { flex-basis: 100%; margin-top: 0; }
}

/* Brecha y la de mañana */
.kt-brecha, .kt-manana, .kt-calculadora, .kt-grafico, .kt-una-fecha, .kt-tabla {
  background: var(--kt-superficie); border: 1px solid var(--kt-borde); border-radius: var(--kt-radio); padding: 14px;
}
.kt-flechas { display: flex; gap: 24px; font-size: 1.4rem; font-weight: 800; margin: 0; flex-wrap: wrap; }
.kt-manana p { margin: 0; }
.kt-sube { color: var(--kt-sube); }
.kt-baja { color: var(--kt-baja); }

/* Calculadora */
.kt-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--kt-borde); }
.kt-fila:first-of-type { margin-top: 10px; }
.kt-fila-nombre { font-weight: 600; font-size: .95rem; }
.kt-fila-campo { display: flex; align-items: center; gap: 6px; flex: 0 1 220px; min-width: 0; }
.kt-simbolo { color: var(--kt-texto-2); width: 1.6em; text-align: right; flex: none; }
.kt-fila input {
  width: 100%; min-width: 0; font: inherit; font-size: 1.1rem; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums; padding: 8px 10px; border: 1px solid var(--kt-borde-fuerte);
  border-radius: 10px; background: var(--kt-fondo); color: var(--kt-texto);
}
.kt-fila input:focus { outline: 2px solid var(--kt-acento); outline-offset: 1px; border-color: var(--kt-acento); }
.kt-fila input[aria-invalid="true"] { border-color: var(--kt-sube); }
.kt-error { color: var(--kt-sube); font-size: .9rem; margin: 8px 0 0; }
code { background: var(--kt-acento-suave); padding: 0 4px; border-radius: 4px; font-size: .85em; }
.kt-botones { display: flex; gap: 10px; margin-top: 12px; }
.kt-boton {
  font: inherit; font-weight: 700; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--kt-borde-fuerte);
  background: var(--kt-superficie); color: var(--kt-texto); cursor: pointer;
}
.kt-boton-principal { background: var(--kt-acento); border-color: var(--kt-acento); color: #fff; }
.kt-compartir { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--kt-borde-fuerte); }
.kt-compartir .kt-botones { margin-top: 6px; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { .kt-boton-principal { color: #0f1115; } }

/* Historial */
.kt-selector { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 8px; }
.kt-selector a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--kt-borde-fuerte); text-decoration: none; color: var(--kt-texto); font-weight: 600; font-size: .9rem; }
.kt-selector a[aria-current="true"] { background: var(--kt-acento); border-color: var(--kt-acento); color: #fff; }
@media (prefers-color-scheme: dark) { .kt-selector a[aria-current="true"] { color: #0f1115; } }
.kt-selector-chico a { font-size: .8rem; padding: 4px 10px; }
.kt-variacion { font-size: 1.05rem; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.kt-linea { display: block; width: 100%; height: auto; overflow: visible; }
.kt-eje { stroke: var(--kt-borde-fuerte); stroke-width: 1; }
.kt-guia { stroke: var(--kt-borde); stroke-width: 1; stroke-dasharray: 3 3; }
.kt-texto-eje { fill: var(--kt-texto-2); font-size: 13px; }
/* El SVG se encoge con la pantalla, y su letra con él: en un teléfono, 13 unidades quedan en ~7 px. */
@media (max-width: 520px) { .kt-texto-eje { font-size: 22px; } }
.kt-anterior { fill: none; stroke: var(--kt-borde-fuerte); stroke-width: 1.5; stroke-dasharray: 5 4; }
.kt-area { fill: var(--kt-acento); fill-opacity: .12; stroke: none; }
.kt-actual { fill: none; stroke: var(--kt-acento); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.kt-punto { fill: var(--kt-acento); stroke: var(--kt-superficie); stroke-width: 1.5; opacity: 0; }
.kt-punto:hover { opacity: 1; }
.kt-form-fecha { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.kt-form-fecha input { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--kt-borde-fuerte); background: var(--kt-fondo); color: var(--kt-texto); }
.kt-tabla table { width: 100%; border-collapse: collapse; }
.kt-tabla th, .kt-tabla td { padding: 6px 4px; border-bottom: 1px solid var(--kt-borde); text-align: right; }
.kt-tabla th:first-child, .kt-tabla td:first-child { text-align: left; }
.kt-tabla th { color: var(--kt-texto-2); font-size: .85rem; }

/* Pie */
.kt-pie { color: var(--kt-texto-2); font-size: .85rem; padding-top: 8px; padding-bottom: 32px; }
.kt-pie p { margin: 6px 0; }