<?php
// KONTROL — Build Cred (v2.0)
// B-lite: guardamos solo lead + diagnóstico + puntajes. NO guardamos cupos/saldos por tarjeta.
// Herramienta educativa. No es asesoría financiera.
?>
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>KONTROL — Build Cred</title>

  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="./styles.css?v=20" />
</head>

<body class="bg-slate-950 text-slate-100">
  <!-- Topbar -->
  <header class="border-b border-slate-800 bg-slate-950/85 backdrop-blur sticky top-0 z-40">
    <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between gap-3">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 rounded-2xl bg-white/10 border border-white/10 grid place-items-center font-black tracking-tight text-lg">K</div>
        <div class="leading-tight">
          <div class="text-xl font-semibold">KONTROL</div>
          <div class="text-sm text-slate-400">Diagnóstico → Acciones → Seguimiento. Donde se juega el score.</div>
        </div>
      </div>

      <div class="flex items-center gap-2">
        <button id="btnTextSize"
          class="px-3 py-2 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/10 text-sm font-semibold">
          Letra: <span id="textSizeLabel">Grande</span>
        </button>

        <button id="btnExportICS"
          class="px-3 py-2 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/10 text-sm font-semibold">
          Exportar calendario (.ics)
        </button>
      </div>
    </div>

    <!-- Stepper -->
    <div class="max-w-6xl mx-auto px-4 pb-3">
      <div class="rounded-2xl border border-white/10 bg-white/5 p-2 flex flex-wrap items-center gap-2">
        <button id="stepBtn1" class="stepbtn stepbtn-active">1) Inicio</button>
        <button id="stepBtn2" class="stepbtn">2) Datos</button>
        <button id="stepBtn3" class="stepbtn">3) Diagnóstico y Plan</button>

        <div class="ml-auto text-sm text-slate-400 pr-2">
          <span class="hidden sm:inline">Guardamos:</span> contacto + diagnóstico + puntajes. <span class="hidden sm:inline">No guardamos cupos/saldos por tarjeta.</span>
        </div>
      </div>
    </div>
  </header>

  <main class="max-w-6xl mx-auto px-4 py-6 space-y-6">

    <!-- STEP 1 -->
    <section id="step1" class="space-y-6">
      <!-- Verdad operativa + disclaimer -->
      <div class="rounded-3xl border border-slate-800 bg-slate-900/30 p-5">
        <div class="flex items-start gap-3">
          <!-- bulb icon -->
          <div class="mt-1 shrink-0">
            <svg class="w-7 h-7 text-yellow-300/90" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M9 21h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              <path d="M10 17h4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              <path d="M8.5 14.2c-.5-1.2-2.5-2.8-2.5-5.2A6 6 0 0 1 18 9c0 2.4-2 4-2.5 5.2-.3.7-.5 1.6-.5 2.8h-5c0-1.2-.2-2.1-.5-2.8Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
            </svg>
          </div>

          <div class="grow">
            <div class="text-base sm:text-lg font-semibold">Verdad operativa</div>
            <div class="mt-1 text-sm sm:text-base text-slate-200 leading-relaxed">
              El “pago mínimo” evita morosidad, pero la foto que pesa en el score es lo que se reporta cerca del corte.
              El juego se gana dejando la utilización dentro del objetivo <span class="font-semibold">antes</span> del corte.
            </div>

            <div class="mt-3 text-sm sm:text-base text-slate-300 leading-relaxed">
              <span class="font-semibold text-slate-100">Herramienta educativa, no asesoría financiera.</span>
              Los resultados dependen de la veracidad y exactitud de los datos ingresados.
              Revisa la guía PDF de lectura del reporte antes de completar el diagnóstico.
            </div>
          </div>
        </div>
      </div>

      <!-- Ruta + links + captura -->
      <section class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <!-- Instrucciones -->
        <div class="rounded-3xl border border-slate-800 bg-slate-900/30 p-5 space-y-4">
          <h2 class="text-lg font-semibold">Instrucciones iniciales</h2>

          <div class="space-y-2 text-sm sm:text-base text-slate-200">
            <div class="font-semibold text-slate-100">Paso 1: descarga tus reportes</div>
            <div class="text-slate-300">
              Tienes derecho a consultar tu historial. Sin el reporte, terminas aplicando o pagando a ciegas.
            </div>

            <div class="grid gap-2">
              <a id="linkReports" href="#" class="btnlink">Link para descargar tus historiales (editar en app.js)</a>
              <a id="linkGuide" href="#" class="btnlink">Guía PDF: cómo leer el reporte (editar en app.js)</a>
            </div>
          </div>

          <div class="rounded-2xl border border-slate-800 bg-slate-950/40 p-4 text-sm sm:text-base text-slate-300">
            Si no sabes qué mirar en el reporte, terminas pagando o aplicando a ciegas.
            Este sistema existe para cortar eso.
          </div>
        </div>

        <!-- Captura + ruta -->
        <div class="lg:col-span-2 rounded-3xl border border-slate-800 bg-slate-900/30 p-5">
          <div class="flex items-start justify-between gap-3">
            <div>
              <h2 class="text-lg font-semibold">Primero: guarda tu diagnóstico</h2>
              <div class="text-sm sm:text-base text-slate-300 mt-1">
                No pedimos SSN. Guardamos contacto + diagnóstico + puntajes para tu seguimiento.
              </div>
            </div>
            <button id="btnClearAll" class="text-sm text-slate-300 hover:text-white underline underline-offset-4">
              Reiniciar todo
            </button>
          </div>

          <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <label class="block text-sm text-slate-300 mb-1">Nombre</label>
              <input id="firstName" type="text" placeholder="Tu nombre"
                class="inp"/>
            </div>
            <div>
              <label class="block text-sm text-slate-300 mb-1">Apellido</label>
              <input id="lastName" type="text" placeholder="Tu apellido"
                class="inp"/>
            </div>
            <div>
              <label class="block text-sm text-slate-300 mb-1">Email</label>
              <input id="email" type="email" placeholder="tu@email.com"
                class="inp"/>
            </div>
            <div>
              <label class="block text-sm text-slate-300 mb-1">Teléfono / WhatsApp (opcional)</label>
              <input id="phone" type="text" placeholder="+1..."
                class="inp"/>
            </div>
          </div>

          <div class="mt-4 rounded-2xl border border-slate-800 bg-slate-950/35 p-4">
            <div class="text-sm sm:text-base font-semibold">Registra tus puntajes (si los tienes)</div>
            <div class="text-sm text-slate-400 mt-1">Esto alimenta el seguimiento mensual y la gráfica.</div>

            <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
              <div>
                <label class="block text-sm text-slate-300 mb-1">Experian</label>
                <input id="scoreExperian" type="number" min="300" max="850" placeholder="—" class="inp"/>
              </div>
              <div>
                <label class="block text-sm text-slate-300 mb-1">Equifax</label>
                <input id="scoreEquifax" type="number" min="300" max="850" placeholder="—" class="inp"/>
              </div>
              <div>
                <label class="block text-sm text-slate-300 mb-1">TransUnion</label>
                <input id="scoreTransUnion" type="number" min="300" max="850" placeholder="—" class="inp"/>
              </div>
            </div>
          </div>

          <div class="mt-4">
            <div class="text-sm sm:text-base font-semibold">Selecciona tu ruta</div>
            <div class="text-sm text-slate-400 mt-1">
              No usamos etiquetas ni drama. Solo ruta operativa.
            </div>

            <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
              <button id="routeHistory" class="routebtn">
                <div class="text-base font-semibold">CON HISTORIAL</div>
                <div class="text-sm text-slate-300 mt-1">Si ya has tenido experiencia crediticia.</div>
              </button>

              <button id="routeBuild" class="routebtn">
                <div class="text-base font-semibold">HISTORIAL POR CONSTRUIR</div>
                <div class="text-sm text-slate-300 mt-1">Si vas a construir tu crédito desde base.</div>
              </button>
            </div>

            <div id="routeHint" class="mt-3 text-sm text-slate-300"></div>

            <div class="mt-4 flex items-center justify-end gap-2">
              <button id="btnGoStep2" class="btnprimary">
                Continuar a Datos →
              </button>
            </div>

            <div id="step1Msg" class="mt-3 text-sm text-red-200 hidden"></div>
          </div>
        </div>
      </section>
    </section>

    <!-- STEP 2 -->
    <section id="step2" class="hidden space-y-6">
      <div class="rounded-3xl border border-slate-800 bg-slate-900/30 p-5">
        <div class="flex items-start justify-between gap-3">
          <div>
            <h2 class="text-lg font-semibold">Datos mínimos (sin inventos)</h2>
            <div class="text-sm sm:text-base text-slate-300 mt-1">
              Si no puedes medir, no puedes controlar. Esto es triage, no terapia.
            </div>
          </div>
          <button id="btnBack1" class="btnsecondary">← Volver</button>
        </div>

        <div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-4">
          <!-- Income + Flags -->
          <div class="rounded-3xl border border-slate-800 bg-slate-950/35 p-5 space-y-4">
            <div class="text-base font-semibold">Ingresos y banderas</div>

            <div>
              <label class="block text-sm text-slate-300 mb-1">Ingreso bruto mensual (USD)</label>
              <input id="monthlyIncome" type="number" min="0" step="1" placeholder="Ej: 3500" class="inp"/>
              <div class="text-sm text-slate-400 mt-1">
                Internamente lo anualizamos para cálculo de exposición. Si lo inventas, el plan queda basura.
              </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div class="rounded-2xl border border-slate-800 bg-slate-950/40 p-4">
                <div class="text-sm text-slate-300">¿Pago tarde 30+ días reciente?</div>
                <div class="mt-2 flex gap-2">
                  <button data-flag="late" data-val="yes" class="flagbtn">Sí</button>
                  <button data-flag="late" data-val="no" class="flagbtn">No</button>
                </div>
              </div>

              <div class="rounded-2xl border border-slate-800 bg-slate-950/40 p-4">
                <div class="text-sm text-slate-300">¿Collections / cobranzas?</div>
                <div class="mt-2 flex gap-2">
                  <button data-flag="collections" data-val="yes" class="flagbtn">Sí</button>
                  <button data-flag="collections" data-val="no" class="flagbtn">No</button>
                </div>
              </div>

              <div class="rounded-2xl border border-slate-800 bg-slate-950/40 p-4">
                <div class="text-sm text-slate-300">Hard inquiries (últimos 6 meses)</div>
                <div class="mt-2 flex flex-wrap gap-2">
                  <button data-flag="inq" data-val="0-1" class="flagbtn">0–1</button>
                  <button data-flag="inq" data-val="2-4" class="flagbtn">2–4</button>
                  <button data-flag="inq" data-val="5+" class="flagbtn">5+</button>
                </div>
              </div>

              <div class="rounded-2xl border border-slate-800 bg-slate-950/40 p-4">
                <div class="text-sm text-slate-300">Edad de cuenta más vieja</div>
                <div class="mt-2 flex flex-wrap gap-2">
                  <button data-flag="age" data-val="<6" class="flagbtn">&lt; 6m</button>
                  <button data-flag="age" data-val="6-24" class="flagbtn">6–24m</button>
                  <button data-flag="age" data-val=">24" class="flagbtn">&gt; 24m</button>
                </div>
              </div>
            </div>
          </div>

          <!-- Debt totals -->
          <div class="rounded-3xl border border-slate-800 bg-slate-950/35 p-5 space-y-4">
            <div class="text-base font-semibold">Deudas totales (saldos)</div>
            <div class="text-sm text-slate-400">
              Esto no es para juzgar. Es para medir exposición y escoger el plan correcto.
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div>
                <label class="block text-sm text-slate-300 mb-1">Tarjetas: cupo total (USD)</label>
                <input id="ccLimitTotal" type="number" min="0" step="1" placeholder="Ej: 8000" class="inp"/>
              </div>
              <div>
                <label class="block text-sm text-slate-300 mb-1">Tarjetas: saldo total actual (USD)</label>
                <input id="ccBalanceTotal" type="number" min="0" step="1" placeholder="Ej: 4200" class="inp"/>
              </div>

              <div>
                <label class="block text-sm text-slate-300 mb-1">Auto: saldo (USD)</label>
                <input id="autoBalance" type="number" min="0" step="1" placeholder="0" class="inp"/>
              </div>
              <div>
                <label class="block text-sm text-slate-300 mb-1">Casa: saldo (USD)</label>
                <input id="mortBalance" type="number" min="0" step="1" placeholder="0" class="inp"/>
              </div>

              <div>
                <label class="block text-sm text-slate-300 mb-1">Préstamos personales: saldo (USD)</label>
                <input id="plBalance" type="number" min="0" step="1" placeholder="0" class="inp"/>
              </div>
              <div>
                <label class="block text-sm text-slate-300 mb-1">Otros: saldo (USD)</label>
                <input id="otherBalance" type="number" min="0" step="1" placeholder="0" class="inp"/>
              </div>
            </div>

            <div class="rounded-2xl border border-slate-800 bg-slate-950/40 p-4">
              <div class="text-sm font-semibold">Tarjetas (opcional): tablero KONTROL</div>
              <div class="text-sm text-slate-400 mt-1">
                Si tienes tarjetas, aquí sí se juega la utilización al corte. Esto NO se guarda en servidor.
              </div>

              <div class="mt-3 flex flex-wrap items-center gap-2">
                <button id="btnAddCard" class="btnprimary">+ Añadir tarjeta</button>
                <button id="btnResetCards" class="btnsecondary">Reset tarjetas</button>

                <div class="ml-auto flex items-center gap-2">
                  <label class="text-sm text-slate-300">Objetivo %</label>
                  <input id="targetPercent" type="number" min="1" max="99" value="30" class="inp small"/>
                  <label class="text-sm text-slate-300">Colchón días</label>
                  <input id="bufferDays" type="number" min="0" max="14" value="3" class="inp small"/>
                </div>
              </div>

              <div class="mt-3 overflow-x-auto">
                <table class="min-w-full text-sm">
                  <thead class="text-xs text-slate-400">
                    <tr class="border-b border-slate-800">
                      <th class="text-left py-2 pr-3">Tarjeta</th>
                      <th class="text-right py-2 px-3">Cupo</th>
                      <th class="text-right py-2 px-3">Saldo</th>
                      <th class="text-right py-2 px-3">Util%</th>
                      <th class="text-left py-2 px-3">Próx corte</th>
                      <th class="text-left py-2 px-3">Pagar antes</th>
                      <th class="text-right py-2 pl-3">Pagar</th>
                      <th class="text-right py-2 pl-3">Editar</th>
                    </tr>
                  </thead>
                  <tbody id="cardsTbody"></tbody>
                </table>
              </div>

              <div id="cardsEmpty" class="mt-3 text-sm text-slate-400 hidden">
                No hay tarjetas añadidas.
              </div>
            </div>

            <div class="flex items-center justify-end gap-2 pt-2">
              <button id="btnBackTo1" class="btnsecondary">← Volver</button>
              <button id="btnGoStep3" class="btnprimary">Ver Diagnóstico →</button>
            </div>

            <div id="step2Msg" class="mt-3 text-sm text-red-200 hidden"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- STEP 3 -->
    <section id="step3" class="hidden space-y-6">
      <div class="rounded-3xl border border-slate-800 bg-slate-900/30 p-5">
        <div class="flex items-start justify-between gap-3">
          <div>
            <h2 class="text-lg font-semibold">Diagnóstico y Plan</h2>
            <div class="text-sm sm:text-base text-slate-300 mt-1">
              Resultado: En control vs Sin control. Luego acciones y seguimiento.
            </div>
          </div>
          <div class="flex items-center gap-2">
            <button id="btnBack2" class="btnsecondary">← Volver</button>
            <button id="btnSaveServer" class="btnprimary">Guardar diagnóstico</button>
          </div>
        </div>

        <div class="mt-5 grid grid-cols-1 md:grid-cols-4 gap-3">
          <div class="kpi">
            <div class="kpi-label">Estado</div>
            <div id="kpiStatus" class="kpi-value">—</div>
            <div id="kpiStatusNote" class="kpi-note">—</div>
          </div>
          <div class="kpi">
            <div class="kpi-label">Utilización total</div>
            <div id="kpiUtil" class="kpi-value">—</div>
            <div id="kpiUtilNote" class="kpi-note">—</div>
          </div>
          <div class="kpi">
            <div class="kpi-label">Exposición deuda/ingreso</div>
            <div id="kpiExposure" class="kpi-value">—</div>
            <div id="kpiExposureNote" class="kpi-note">—</div>
          </div>
          <div class="kpi">
            <div class="kpi-label">Próximo evento crítico</div>
            <div id="kpiNext" class="kpi-value">—</div>
            <div id="kpiNextNote" class="kpi-note">—</div>
          </div>
        </div>

        <div class="mt-4 grid grid-cols-1 lg:grid-cols-2 gap-4">
          <div class="rounded-3xl border border-slate-800 bg-slate-950/35 p-5">
            <div class="text-base font-semibold">Semáforo de utilización</div>
            <div id="utilTraffic" class="mt-3"></div>
          </div>

          <div class="rounded-3xl border border-slate-800 bg-slate-950/35 p-5">
            <div class="text-base font-semibold">Acciones (lo que toca hacer)</div>
            <div id="actionsBox" class="mt-3 text-sm sm:text-base text-slate-200 leading-relaxed"></div>
          </div>
        </div>

        <div class="mt-4 rounded-3xl border border-slate-800 bg-slate-950/35 p-5">
          <div class="flex items-center justify-between gap-3">
            <div>
              <div class="text-base font-semibold">Seguimiento mensual (puntajes)</div>
              <div class="text-sm text-slate-400 mt-1">Registra 1 vez al mes. Aquí se ve si de verdad tomaste el KONTROL.</div>
            </div>
            <button id="btnAddMonthly" class="btnsecondary">+ Registrar mes</button>
          </div>

          <div class="mt-4 overflow-x-auto">
            <table class="min-w-full text-sm">
              <thead class="text-xs text-slate-400">
                <tr class="border-b border-slate-800">
                  <th class="text-left py-2 pr-3">Fecha</th>
                  <th class="text-right py-2 px-3">Experian</th>
                  <th class="text-right py-2 px-3">Equifax</th>
                  <th class="text-right py-2 px-3">TransUnion</th>
                  <th class="text-right py-2 pl-3">Eliminar</th>
                </tr>
              </thead>
              <tbody id="monthlyTbody"></tbody>
            </table>
          </div>

          <div class="mt-4">
            <canvas id="scoresChart" height="120"></canvas>
          </div>

          <div id="serverMsg" class="mt-3 text-sm text-slate-300"></div>
        </div>
      </div>

      <div class="rounded-2xl border border-slate-800 bg-slate-950/40 p-3">
        <div class="text-sm text-slate-200">
          <span class="font-semibold">Build Cred — KONTROL.</span>
          <span class="neon">Tu score es tuyo: lo construyes con las manos o lo destruyes con los pies.</span>
        </div>
      </div>
    </section>

    <footer class="text-xs text-slate-500 pt-2">
      KONTROL v2.0 (B-lite). Herramienta educativa. No sustituye consejo profesional.
    </footer>
  </main>

  <!-- Modal tarjetas -->
  <div id="modalOverlay" class="fixed inset-0 bg-black/60 hidden z-50"></div>
  <div id="modal" class="fixed inset-0 hidden z-50">
    <div class="min-h-full flex items-center justify-center p-4">
      <div class="w-full max-w-xl rounded-3xl border border-slate-800 bg-slate-950 p-5">
        <div class="flex items-start justify-between gap-3">
          <div>
            <div id="modalTitle" class="text-lg font-semibold">Añadir tarjeta</div>
            <div class="text-sm text-slate-400 mt-1">Esto se queda en tu navegador. Tú lo actualizas cada mes.</div>
          </div>
          <button id="btnCloseModal" class="text-slate-300 hover:text-white text-xl leading-none">✕</button>
        </div>

        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
          <div class="md:col-span-2">
            <label class="block text-sm text-slate-300 mb-1">Nombre / apodo</label>
            <input id="fName" type="text" placeholder="Ej: Chase / Capital One"
              class="inp"/>
          </div>

          <div>
            <label class="block text-sm text-slate-300 mb-1">Cupo (limit)</label>
            <input id="fLimit" type="number" min="0" step="1" placeholder="Ej: 3000" class="inp"/>
          </div>

          <div>
            <label class="block text-sm text-slate-300 mb-1">Saldo actual (balance)</label>
            <input id="fBalance" type="number" min="0" step="1" placeholder="Ej: 1200" class="inp"/>
          </div>

          <div>
            <label class="block text-sm text-slate-300 mb-1">Día de corte (1–31)</label>
            <input id="fCutDay" type="number" min="1" max="31" placeholder="Ej: 18" class="inp"/>
            <div class="text-sm text-slate-500 mt-1">Este es el “día que importa”.</div>
          </div>

          <div>
            <label class="block text-sm text-slate-300 mb-1">Objetivo % (opcional)</label>
            <input id="fTarget" type="number" min="1" max="99" placeholder="Ej: 10" class="inp"/>
            <div class="text-sm text-slate-500 mt-1">Si vacío, usa el objetivo global.</div>
          </div>

          <div class="md:col-span-2">
            <label class="block text-sm text-slate-300 mb-1">Día límite de pago (opcional)</label>
            <input id="fDueDay" type="number" min="1" max="31" placeholder="Ej: 25" class="inp"/>
            <div class="text-sm text-slate-500 mt-1">Esto es para NO caer en pago tarde.</div>
          </div>
        </div>

        <div id="modalError" class="mt-3 text-sm text-red-300 hidden"></div>

        <div class="mt-5 flex items-center justify-between gap-3">
          <!-- Eliminar al lado, no arriba -->
          <button id="btnDelete" class="px-3 py-2 rounded-2xl bg-red-500/10 text-red-200 border border-red-500/30 hover:bg-red-500/15 hidden">
            Eliminar
          </button>

          <div class="ml-auto flex items-center gap-2">
            <button id="btnCancel" class="btnsecondary">Cancelar</button>
            <button id="btnSave" class="btnprimary">Guardar</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="./app.js?v=20"></script>
</body>
</html>
/* --- FIX botones invisibles (dark UI) --- */
button, .btn {
  color: rgb(226, 232, 240);                 /* slate-200 */
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
}

button:hover, .btn:hover {
  background: rgba(255,255,255,0.12);
}

button:disabled, .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary{
  background: rgb(99,102,241); /* indigo-500 */
  border-color: rgba(99,102,241,0.9);
  color: white;
}
.btn-primary:hover{
  background: rgb(79,70,229); /* indigo-600 */
}
/* ===========================
   KONTROL: Inputs "azul pez" + texto negro (solo formularios)
   =========================== */

/* Azul pez (ajústalo si quieres más/menos intenso) */
:root{
  --fish-blue: #2EC5FF;        /* azul pez */
  --fish-blue-2: #0EA5E9;      /* borde/hover (sky-500 aprox) */
  --fish-blue-3: #0369A1;      /* borde fuerte */
}

/* Inputs generales del sistema: mejor legibilidad */
input, select, textarea{
  color: #0B1220 !important;                 /* texto negro/azul muy oscuro */
  background-color: rgba(255,255,255,0.06);  /* mantiene estética dark */
  border-color: rgba(148,163,184,0.25);
}

/* Inputs específicos de puntajes (para que NO queden “blanco sobre blanco”) 
   Si tus inputs de score tienen ids (ej: scoreEX, scoreEQ, scoreTU), esto los atrapa. */
#scoreEX, #scoreEQ, #scoreTU,
input[data-score="experian"], input[data-score="equifax"], input[data-score="transunion"]{
  background: var(--fish-blue) !important;
  border: 1px solid var(--fish-blue-3) !important;
  color: #000 !important;
  font-weight: 700 !important;
}

/* Placeholders legibles */
#scoreEX::placeholder, #scoreEQ::placeholder, #scoreTU::placeholder,
input[data-score="experian"]::placeholder, input[data-score="equifax"]::placeholder, input[data-score="transunion"]::placeholder{
  color: rgba(0,0,0,0.55) !important;
  font-weight: 600 !important;
}

/* Focus visible (accesibilidad) */
#scoreEX:focus, #scoreEQ:focus, #scoreTU:focus,
input[data-score="experian"]:focus, input[data-score="equifax"]:focus, input[data-score="transunion"]:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(46,197,255,0.35) !important;
}

