/* Sistema de Señales · identidad Giubi Consulting (solo texto, sin logo)
   Paleta exacta y tipografías del brief. Mobile-first. */

@font-face {
  font-family: "Rajdhani";
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/rajdhani-825b55.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/rajdhani-29b9be.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/jetbrainsmono-530d03.woff2") format("woff2");
}

:root {
  /* Paleta Giubi (exacta) */
  --negro: #000000;
  --negro-profundo: #0A0A0A;
  --gris-oscuro: #1A1A1A;
  --amarillo: #FFD700;
  --amarillo-suave: #FFE875;
  --blanco: #FFFFFF;
  --gris-claro: #F5F5F5;
  --gris-medio: #E5E5E5;
  --texto-atenuado: #4a4a4a;

  --ui: "Rajdhani", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --ok: #4ade80;
  --err: #f87171;
  --radius: 6px;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--negro-profundo);
  color: var(--gris-claro);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.45;
  min-height: 100vh;
}

/* ---------- Layout ---------- */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  padding: .65rem 1rem;
  background: var(--negro);
  border-bottom: 2px solid var(--amarillo);
  position: sticky; top: 0; z-index: 50;
}
.brand {
  font-weight: 700; font-size: 1.15rem; letter-spacing: .06em;
  color: var(--blanco); text-transform: uppercase; text-decoration: none;
}
.brand span { color: var(--amarillo); }
.nav { display: flex; gap: .25rem; flex-wrap: wrap; margin-left: auto; }
.nav a {
  color: var(--gris-medio); text-decoration: none; padding: .35rem .6rem;
  border-radius: var(--radius); font-weight: 500; font-size: .95rem;
}
.nav a:hover, .nav a:focus-visible { color: var(--amarillo-suave); background: var(--gris-oscuro); }
.nav a.active { color: var(--amarillo); border-bottom: 2px solid var(--amarillo); border-radius: 0; }

main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; margin: .5rem 0 1rem; }
.page-title em { color: var(--amarillo); font-style: normal; }

/* ---------- Tarjetas y tablas ---------- */
.card {
  background: var(--gris-oscuro); border: 1px solid #262626;
  border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem;
}
.card h2 { margin: 0 0 .75rem; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gris-medio); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th {
  text-align: left; padding: .5rem .6rem; color: var(--texto-atenuado);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 1px solid #2e2e2e;
}
td { padding: .55rem .6rem; border-bottom: 1px solid #232323; }
tr:hover td { background: #202020; }

.mono, td.num, .ticker { font-family: var(--mono); }
.ticker { color: var(--amarillo); font-weight: 700; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.pos { color: var(--ok); }
.neg { color: var(--err); }

/* ---------- Fuerza / badges ---------- */
.strength {
  font-family: var(--mono); font-weight: 700; padding: .1rem .45rem;
  border-radius: var(--radius); background: var(--negro); display: inline-block;
}
.strength.hi { color: var(--negro); background: var(--amarillo); }
.strength.mid { color: var(--amarillo); border: 1px solid var(--amarillo); }
.strength.lo { color: var(--texto-atenuado); border: 1px solid #333; }

.badge {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .12rem .5rem; border-radius: 999px; font-weight: 700;
}
.badge.ok { background: #123a22; color: var(--ok); }
.badge.err { background: #3a1212; color: var(--err); }
.badge.off { background: #262626; color: var(--texto-atenuado); }
.badge.role-gate { background: #33280a; color: var(--amarillo); }
.badge.role-score { background: #10283a; color: #7cc7ff; }
.badge.role-filter { background: #26123a; color: #c89bff; }

/* ---------- Formularios ---------- */
label { display: block; font-size: .85rem; color: var(--gris-medio); margin-bottom: .25rem; }
input, select, textarea {
  width: 100%; padding: .5rem .6rem; border-radius: var(--radius);
  border: 1px solid #333; background: var(--negro); color: var(--blanco);
  font-family: var(--mono); font-size: .95rem;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--amarillo); outline-offset: 1px;
}
input[type="checkbox"] { width: auto; accent-color: var(--amarillo); }

.btn {
  display: inline-block; padding: .5rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--amarillo); background: var(--amarillo);
  color: var(--negro); font-family: var(--ui); font-weight: 700;
  font-size: .95rem; letter-spacing: .04em; cursor: pointer; text-transform: uppercase;
}
.btn:hover { background: var(--amarillo-suave); }
.btn.secondary { background: transparent; color: var(--amarillo); }
.btn.danger { background: transparent; color: var(--err); border-color: var(--err); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field-row { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-bottom: .75rem; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }

/* ---------- Estados ---------- */
.empty-state, .error-state, .loading-state {
  text-align: center; padding: 2rem 1rem; color: var(--texto-atenuado);
}
.error-state { color: var(--err); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

.flash { padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .95rem; }
.flash.ok { background: #123a22; color: var(--ok); }
.flash.err { background: #3a1212; color: var(--err); }
.flash.warn { background: #33280a; color: var(--amarillo-suave); }

/* ---------- Indicadores (Ajustes) ---------- */
.indicator {
  border: 1px solid #262626; border-radius: var(--radius);
  padding: .75rem; margin-bottom: .6rem; background: var(--negro);
}
.indicator[data-enabled="false"] { opacity: .55; }
.indicator .head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.indicator .desc { font-size: .85rem; color: var(--texto-atenuado); margin: .3rem 0 .5rem; }
.indicator .params { display: flex; gap: .6rem; flex-wrap: wrap; }
.indicator .params > div { min-width: 110px; flex: 1; max-width: 170px; }
.category-title {
  margin: 1.2rem 0 .5rem; font-size: .85rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amarillo);
}

/* ---------- Varios ---------- */
.disclaimer {
  margin: 2rem auto 1rem; max-width: 1100px; padding: .75rem 1rem;
  border-top: 1px solid #262626; color: var(--texto-atenuado); font-size: .82rem;
}
.kpis { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
.kpi { background: var(--negro); border: 1px solid #262626; border-radius: var(--radius); padding: .75rem; }
.kpi .v { font-family: var(--mono); font-size: 1.35rem; font-weight: 700; color: var(--amarillo); }
.kpi .l { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-atenuado); }

.login-box { max-width: 380px; margin: 12vh auto 0; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .72);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal {
  background: var(--gris-oscuro); border: 1px solid var(--amarillo);
  border-radius: var(--radius); padding: 1.25rem; width: 100%; max-width: 420px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
}
.modal h3 { margin: 0 0 .6rem; color: var(--amarillo); font-size: 1.1rem; letter-spacing: .03em; }
.modal p { margin: 0; color: var(--gris-claro); font-size: .95rem; }
.modal .actions {
  display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1.1rem;
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .field-row { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  .field-row { grid-template-columns: repeat(4, 1fr); }
}