@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fuentes/Geist-Variable.woff2) format('woff2');}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fuentes/GeistMono-Variable.woff2) format('woff2');}
/* Sistema de diseño del Coloca CRM, aplicado a los bots de trading.
   Tokens copiados de coloca-crm/src/app/globals.css el 7-oct-2026. NO se
   inventa paleta: si algo cambia allá, se vuelve a copiar de allá.

     <- ensamblar.py inserta aquí las @font-face de Geist en base64.
   Van INCRUSTADAS, no enlazadas: una tarjeta que enlaza una fuente externa
   falla en silencio y se ve con la tipografía del sistema, que parece una
   decisión de diseño en vez de un error. */

:root{
  /* --- marca Coloca Payments --- */
  --brand-50:#eff8ff;  --brand-100:#dbeefe; --brand-200:#bfe2fe;
  --brand-300:#93d0fd; --brand-400:#60b5fa; --brand-500:#3b96f6;
  --brand-600:#046bd2; --brand-700:#0a56a8; --brand-800:#0f4887;
  --brand-900:#123d6f;

  /* --- estados de dominio (ui-standards §2): seis, y sustituyen a la paleta
         cruda. El hue no cambia entre temas; cambia la derivación. --- */
  --state-neutral:#94a3b8; --state-info:#60b5fa;   --state-progress:#fbbf24;
  --state-success:#34d399; --state-warning:#fb923c; --state-danger:#f87171;

  /* --- superficie y texto (claro) --- */
  --background:#ffffff; --foreground:#0f172a;
  --card:#ffffff; --card-foreground:#0f172a;
  --primary:#046bd2; --primary-foreground:#ffffff;
  --secondary:#f1f5f9; --secondary-foreground:#0f172a;
  --muted:#f1f5f9; --muted-foreground:#5a677d;
  --accent:#eff8ff; --accent-foreground:#0f172a;
  --destructive:#dc2626;
  --border:#e2e8f0; --input:#8492a5; --ring:#3b96f6;
  --radius:0.625rem;

  --font-sans:"Geist",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;
}

@media (prefers-color-scheme:dark){
  :root{
    --background:#0f172a; --foreground:#f8fafc;
    --card:#1e293b; --card-foreground:#f8fafc;
    --primary:#60b5fa; --primary-foreground:#0f172a;
    --secondary:#334155; --secondary-foreground:#f8fafc;
    --muted:#334155; --muted-foreground:#a9b6c8;
    --accent:#0f4887; --accent-foreground:#f8fafc;
    --destructive:#f87171;
    --border:#334155; --input:#6b7d94; --ring:#60b5fa;
  }
}
:root[data-theme="dark"]{
  --background:#0f172a; --foreground:#f8fafc;
  --card:#1e293b; --card-foreground:#f8fafc;
  --primary:#60b5fa; --primary-foreground:#0f172a;
  --secondary:#334155; --secondary-foreground:#f8fafc;
  --muted:#334155; --muted-foreground:#a9b6c8;
  --accent:#0f4887; --accent-foreground:#f8fafc;
  --destructive:#f87171;
  --border:#334155; --input:#6b7d94; --ring:#60b5fa;
}
:root[data-theme="light"]{
  --background:#ffffff; --foreground:#0f172a;
  --card:#ffffff; --card-foreground:#0f172a;
  --primary:#046bd2; --primary-foreground:#ffffff;
  --secondary:#f1f5f9; --secondary-foreground:#0f172a;
  --muted:#f1f5f9; --muted-foreground:#5a677d;
  --accent:#eff8ff; --accent-foreground:#0f172a;
  --destructive:#dc2626;
  --border:#e2e8f0; --input:#8492a5; --ring:#3b96f6;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--background); color:var(--foreground);
  font-family:var(--font-sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.num,.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

.wrap{max-width:1180px; margin:0 auto; padding:28px 20px 64px}
.top{
  display:flex; flex-wrap:wrap; gap:16px; align-items:baseline;
  justify-content:space-between; padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
h1{margin:0; font-size:22px; font-weight:600; letter-spacing:-0.02em; text-wrap:balance}
h1 span{color:var(--muted-foreground); font-weight:400}
.meta{display:flex; gap:18px; flex-wrap:wrap; color:var(--muted-foreground); font-size:12px}
.meta b{color:var(--foreground); font-weight:550}

.lede{
  margin:18px 0 24px; max-width:64ch; color:var(--muted-foreground);
  background:var(--accent); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 14px;
}
.lede strong{color:var(--foreground); font-weight:550}

.panel{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.panel + .panel{margin-top:20px}
.panel-h{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--border);
}
.panel-h h2{margin:0; font-size:13px; font-weight:600; color:var(--foreground)}
.panel-b{padding:16px}

/* Insignias de estado: usan los seis tokens de dominio, no la paleta cruda.
   `.state-soft` deriva el fondo del mismo hue, que es lo que fija el estandar
   para que no se improvise un color por sitio. */
.chip{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  font-weight:550; padding:2px 8px; border-radius:calc(var(--radius) * 0.6);
  white-space:nowrap; border:1px solid transparent;
}
.chip.ok{background:color-mix(in srgb,var(--state-success) 16%,transparent);
  color:color-mix(in srgb,var(--state-success) 72%,var(--foreground));
  border-color:color-mix(in srgb,var(--state-success) 30%,transparent)}
.chip.warn{background:color-mix(in srgb,var(--state-warning) 16%,transparent);
  color:color-mix(in srgb,var(--state-warning) 72%,var(--foreground));
  border-color:color-mix(in srgb,var(--state-warning) 30%,transparent)}
.chip.crit{background:color-mix(in srgb,var(--state-danger) 16%,transparent);
  color:color-mix(in srgb,var(--state-danger) 72%,var(--foreground));
  border-color:color-mix(in srgb,var(--state-danger) 32%,transparent)}
.chip.mute{background:var(--secondary); color:var(--muted-foreground);
  border-color:var(--border)}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}

.live{display:grid; grid-template-columns:repeat(auto-fit,minmax(122px,1fr));
  gap:1px; background:var(--border)}
.cellv{background:var(--card); padding:12px 14px}
.cellv .lab{font-size:11px; color:var(--muted-foreground); font-weight:500}
.cellv .val{font-size:20px; font-weight:600; margin-top:4px; letter-spacing:-0.02em}
.cellv .sub{font-size:11.5px; color:var(--muted-foreground); margin-top:2px}
.val.neg{color:var(--destructive)}
.val.pos{color:color-mix(in srgb,var(--state-success) 78%,var(--foreground))}

.scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13px}
th{font-size:11.5px; color:var(--muted-foreground); font-weight:550; text-align:left;
  padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap}
td{padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
.sym{font-weight:600}
.neg{color:var(--destructive)}
.pos{color:color-mix(in srgb,var(--state-success) 78%,var(--foreground))}

/* --- formulario (pantalla de parametros) --- */
.row{display:grid; grid-template-columns:1fr auto; gap:5px 16px;
  padding:13px 0; border-bottom:1px solid var(--border)}
.row:last-child{border-bottom:0}
.row .k{font-weight:550}
.row .k em{display:block; font-style:normal; font-size:12px;
  color:var(--muted-foreground); font-weight:400; margin-top:2px}
.field{display:flex; align-items:center; gap:8px; justify-self:end}
.field input{
  width:80px; text-align:right; padding:6px 9px;
  border:1px solid var(--input); border-radius:calc(var(--radius) * 0.6);
  background:var(--background); color:var(--foreground);
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:14px;
}
.field input:focus{outline:2px solid var(--ring); outline-offset:1px}
.unit{color:var(--muted-foreground); font-size:12px; min-width:62px}
.xlate{grid-column:1/-1; font-size:12px; color:var(--muted-foreground);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.xlate .mono{color:var(--foreground)}
.arrow{color:var(--primary)}

.verdict{margin:14px 0; border:1px solid; border-radius:var(--radius); overflow:hidden}
.verdict{border-color:color-mix(in srgb,var(--state-danger) 38%,transparent)}
.verdict.w{border-color:color-mix(in srgb,var(--state-warning) 38%,transparent)}
.verdict.g{border-color:color-mix(in srgb,var(--state-success) 38%,transparent)}
.verdict .stripe{display:none}
.verdict .body{padding:12px 14px;
  background:color-mix(in srgb,var(--state-danger) 10%,transparent)}
.verdict.w .body{background:color-mix(in srgb,var(--state-warning) 10%,transparent)}
.verdict.g .body{background:color-mix(in srgb,var(--state-success) 10%,transparent)}
.verdict h3{margin:0 0 5px; font-size:13px; font-weight:600; color:var(--foreground)}
.verdict p{margin:0; font-size:12.5px; color:var(--muted-foreground); line-height:1.5}
.verdict p + p{margin-top:6px}
.calc{display:block; margin-top:8px; padding:9px 11px; background:var(--card);
  border:1px solid var(--border); border-radius:calc(var(--radius) * 0.6);
  font-family:var(--font-mono); font-size:12px; color:var(--muted-foreground);
  white-space:pre; overflow-x:auto}

.missing{list-style:none; margin:0; padding:0}
.missing li{display:flex; gap:10px; align-items:flex-start; padding:10px 0;
  border-bottom:1px solid var(--border); font-size:13px}
.missing li:last-child{border-bottom:0}
.missing .mark{color:var(--state-warning); font-weight:700; flex:none; width:12px}
.missing b{font-weight:550}
.missing em{font-style:normal; display:block; color:var(--muted-foreground);
  font-size:12px; margin-top:2px}

.diff{font-size:12.5px}
.diff div{display:flex; gap:12px; padding:7px 0; border-bottom:1px solid var(--border)}
.diff div:last-child{border-bottom:0}
.diff .nm{flex:1; color:var(--muted-foreground)}
.was{color:var(--muted-foreground); text-decoration:line-through}
.now{color:var(--primary); font-weight:600}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; align-items:center}
button{font:inherit; font-family:var(--font-sans); font-weight:550; font-size:13px;
  padding:8px 16px; border-radius:calc(var(--radius) * 0.6);
  border:1px solid var(--border); background:var(--card);
  color:var(--foreground); cursor:pointer}
button.primary{background:var(--primary); border-color:var(--primary);
  color:var(--primary-foreground)}
button[disabled]{opacity:.5; cursor:not-allowed}
button:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
.hint{font-size:12px; color:var(--muted-foreground)}

footer{margin-top:30px; padding-top:16px; border-top:1px solid var(--border);
  font-size:12px; color:var(--muted-foreground); max-width:72ch}