/* ============================================================
   VECTOR OS — estilo compartido de las herramientas (Flask)
   Dark / data-first · alineado con el design system Vector.
   Apunta al vocabulario de clases existente en las plantillas
   (dashboard, zona, market, hipotecas, prospeccion, login, backlog)
   para que enlazarlo restile todas de una vez.
   Nota RGPD producción: auto-alojar fuentes.
   ============================================================ */
/* Fuentes AUTO-ALOJADAS (sin transferencia a Google; misma política que la web). */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/Inter-Variable.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-Regular.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexMono-Medium.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2');}

:root{
  --bg:#0A0A0B;--panel:#141418;--panel2:#17171C;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --orange:#F39200;--orange-soft:#FFB23E;--glow:rgba(243,146,0,.5);
  --text:#F4F4F5;--muted:#8A8A93;--dim:#5C5C64;--green:#27D07C;--danger:#FF6B6B;
  --radius:10px;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;
  max-width:1000px;margin:0 auto;padding:34px 24px 60px;-webkit-font-smoothing:antialiased}

/* encabezado de herramienta */
header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:26px}
h1{font-weight:800;letter-spacing:-.025em;font-size:1.7rem;margin:0 0 2px}
.sub{color:var(--muted);margin-top:0;font-size:14px}
a.back{color:var(--muted);font-size:14px;text-decoration:none}
a.back:hover{color:var(--text)}
a.logout{color:var(--danger);text-decoration:none;font-size:14px}
a.logout:hover{text-decoration:underline}
.meta{font-size:13px;color:var(--dim);font-family:var(--mono)}

/* botones / CTA */
button,.cta{background:var(--orange);color:#0A0A0B;font-family:var(--sans);font-weight:700;
  border:none;padding:11px 20px;border-radius:var(--radius);font-size:14.5px;cursor:pointer;
  text-decoration:none;display:inline-block;transition:.18s;box-shadow:0 6px 22px rgba(243,146,0,.22)}
button:hover,.cta:hover{background:var(--orange-soft);transform:translateY(-1px);text-decoration:none}
.cta + .cta{margin-left:10px}
.cta.ghost{background:transparent;color:var(--text);border:1px solid var(--line2);box-shadow:none}
.cta.ghost:hover{border-color:var(--orange);color:var(--orange);background:transparent}

/* hub: rejilla de accesos a herramientas */
.brandmark{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--text);text-decoration:none}
.brandmark .m{width:10px;height:10px;border-radius:2px;background:linear-gradient(140deg,var(--orange),var(--orange-soft))}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 4px}
@media(max-width:720px){.tools-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.tools-grid{grid-template-columns:1fr}}
.tool-link{display:block;border:1px solid var(--line);border-radius:12px;padding:18px;text-decoration:none;
  background:linear-gradient(180deg,var(--panel2),var(--panel));transition:.2s;color:var(--text)}
.tool-link:hover{border-color:rgba(243,146,0,.45);transform:translateY(-3px);color:var(--text)}
.tool-link .n{font-family:var(--mono);font-size:10.5px;color:var(--orange);margin-bottom:9px}
.tool-link b{display:block;font-size:14.5px;margin-bottom:4px}
.tool-link span{font-size:12.5px;color:var(--muted)}

/* formularios de generación */
form.gen{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:14px;padding:22px;margin:24px 0;display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
form.gen label{display:block;font-weight:600;font-size:13px;margin-bottom:6px;color:var(--text)}
form.gen input[type=text],form.gen input[type=number],form.gen select{
  padding:11px 13px;border:1px solid var(--line2);border-radius:9px;font-size:15px;
  background:#0E0E11;color:var(--text);min-width:300px;font-family:var(--sans)}
form.gen input:focus,form.gen select:focus{outline:none;border-color:var(--orange)}

/* mensajes */
.err{background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.35);color:#ffb3b3;
  padding:12px 16px;border-radius:9px;margin:16px 0;font-size:14px}
.cobertura{background:rgba(243,146,0,.07);border:1px solid rgba(243,146,0,.28);color:var(--orange-soft);
  padding:11px 16px;border-radius:9px;font-size:13px;margin:14px 0}

/* KPIs (dashboard) */
.kpi{display:flex;gap:14px;margin:24px 0;flex-wrap:wrap}
.kpi>div{flex:1;min-width:150px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);padding:18px;border-radius:var(--radius)}
.kpi h3{margin:0;font-size:12px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.kpi p{margin:8px 0 0;font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--text)}

/* tarjetas de índice (zona / market) */
.indices{display:flex;gap:16px;flex-wrap:wrap;margin:24px 0}
.idx{flex:1;min-width:240px;border:1px solid var(--line);border-radius:14px;padding:22px;
  background:linear-gradient(180deg,var(--panel2),var(--panel))}
.idx h3{margin:0 0 4px;font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.idx .score{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--orange)}
.idx .tag{display:inline-block;font-size:12px;font-weight:700;padding:4px 11px;border-radius:100px;
  margin-top:10px;background:rgba(243,146,0,.14);color:var(--orange-soft)}
.idx .desc{font-size:13px;color:var(--muted);margin-top:12px}
.latente{font-size:12px;color:var(--orange-soft);background:rgba(243,146,0,.08);
  border:1px solid rgba(243,146,0,.25);padding:2px 9px;border-radius:6px}

h2{margin-top:38px;font-size:1.25rem;font-weight:700;letter-spacing:-.01em;
  border-bottom:1px solid var(--line);padding-bottom:8px}

/* barras comparativas */
.comp{display:flex;align-items:center;gap:12px;margin:11px 0}
.comp .name{width:185px;font-size:14px;font-weight:600}
.comp .name .src{display:block;font-size:11px;color:var(--dim);font-weight:400;font-family:var(--mono)}
.bar{flex:1;height:14px;background:rgba(255,255,255,.06);border-radius:8px;overflow:hidden}
.bar>span{display:block;height:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--orange-soft),var(--orange))}
.comp .val{width:64px;text-align:right;font-size:13px;font-weight:700}

/* heatmap por barrios */
.heatmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:14px}
.cell{border-radius:9px;padding:13px;border:1px solid var(--line);position:relative;
  background:var(--panel2)}
.cell .b-name{font-weight:700;font-size:13px;color:var(--text)}
.cell .b-note{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4}
.cell .b-op{font-size:11px;margin-top:6px;font-weight:700;color:var(--orange-soft)}

/* enlaces */
a{color:var(--orange)}
a:hover{color:var(--orange-soft)}

/* nota de integridad reutilizable */
.integrity{margin-top:20px;border:1px solid rgba(91,155,255,.25);background:rgba(91,155,255,.05);
  border-radius:11px;padding:13px 15px;font-size:12.5px;color:#C9D6F0}
.integrity b{color:#fff}

/* ===== Contrast hardening — selectores propios de las tools que en claro
   usaban texto oscuro sobre fondo transparente (quedarían invisibles en dark).
   Se enlaza después del <style> inline → gana por orden de cascada. ===== */
label{color:var(--text);font-weight:600}
.note{color:var(--muted);font-size:12px}
.disc,.empty{color:var(--muted)}
details summary{color:var(--muted)}
button.ghost{background:transparent;border:1px solid var(--line2);color:var(--text);box-shadow:none}
button.ghost:hover{background:transparent;border-color:var(--orange);color:var(--orange)}
.chip{background:var(--panel2);border:1px solid var(--line);color:var(--text)}
.email a{color:var(--orange)}
/* píldoras/avisos de estado: fondo translúcido sobre dark, texto legible */
.e-nuevo{background:rgba(91,155,255,.14);color:#9DC0FF}
.e-en_backlog{background:rgba(39,208,124,.14);color:#7BE3AC}
.flash.ok{background:rgba(39,208,124,.10);border:1px solid rgba(39,208,124,.3);color:#7BE3AC}
/* KPI destacado de hipotecas: fondo naranja → texto oscuro legible (se respeta) */
.kpi.kpi-highlight{background:linear-gradient(140deg,var(--orange),var(--orange-soft))}
.kpi.kpi-highlight .kpi-val,.kpi.kpi-highlight h3{color:#0A0A0B}

/* ============================================================
   MOBILE (≤560px) — pase de campo: el agente trabaja desde el móvil.
   Formularios a columna y full-width, anchos fijos liberados, tablas con
   scroll horizontal. Las rejillas (.tools-grid/.kpi/.indices/.heatmap) ya
   colapsaban por flex-wrap / minmax.
   ============================================================ */
@media(max-width:560px){
  body{padding:20px 15px 48px}
  h1{font-size:1.4rem}
  header{gap:10px}
  form.gen{flex-direction:column;align-items:stretch;gap:12px;padding:16px}
  form.gen input[type=text],form.gen input[type=number],form.gen select{min-width:0;width:100%}
  form.gen button,form.gen .cta{width:100%;text-align:center}
  .cta + .cta{margin-left:0;margin-top:10px}
  .kpi>div{flex:1 1 calc(50% - 7px);min-width:0}
  .comp{flex-wrap:wrap}
  .comp .name{width:100%}
  .comp .val{width:auto;margin-left:auto}
  .idx .score{font-size:36px}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  pre{overflow-x:auto}
}