@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg: #0d0e14;
  --panel: #171a24;
  --panel-light: #1f2330;
  --hairline: rgba(212, 175, 55, 0.18);
  --gold: #d4af37;
  --gold-hover: #e8c158;
  --text: #e8e8ec;
  --text-muted: #8b8b98;
  --green: #3ddc84;
  --red: #ff5c5c;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

.mono { font-family: 'IBM Plex Mono', monospace; }

/* ---------- Marca ---------- */
.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.brand-mark {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--gold);
}
.brand-sub {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Login ---------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 60%),
    var(--bg);
}
.login-card {
  width: 340px;
  padding: 36px 32px 32px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-align: center;
}
.login-card .brand { justify-content: center; margin-bottom: 4px; }
.login-card .brand-sub { display: block; margin-bottom: 28px; }
.field { text-align: left; margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 10px 12px;
  background: var(--panel-light);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.field input:focus {
  outline: none;
  border-color: var(--gold);
}
/* Selector desplegable dentro de un campo (ej: modo del Stop Loss): mismo
   aspecto que un input para que el formulario se lea parejo. */
.field select {
  width: 100%;
  padding: 10px 12px;
  background: var(--panel-light);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field select:focus { outline: none; border-color: var(--gold); }
.field select option { background: var(--panel-light); color: var(--text); }
button.primary {
  width: 100%;
  padding: 11px;
  margin-top: 8px;
  background: var(--gold);
  color: #1a1408;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
button.primary:hover { background: var(--gold-hover); }
button.primary:focus-visible { outline: 2px solid var(--gold-hover); outline-offset: 2px; }
.error-msg {
  color: var(--red);
  font-size: 13px;
  min-height: 18px;
  margin-top: 12px;
}

/* ---------- Dashboard ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--hairline);
}
.topbar-right { display: flex; align-items: center; gap: 16px; }
.who { color: var(--text-muted); font-size: 13px; }
.logout-link {
  color: var(--text-muted);
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--hairline);
  padding: 6px 12px;
  border-radius: 6px;
}
.logout-link:hover { color: var(--gold); border-color: var(--gold); }

.layout {
  display: flex;
  align-items: flex-start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px;
  gap: 28px;
}

/* ---------- Panel de control (sidebar) ---------- */
.sidebar {
  width: 200px;
  flex: 0 0 200px;
  position: sticky;
  top: 28px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 10px;
}
.sidebar-title {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 10px 10px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 4px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
}
.nav-item:hover { color: var(--text); background: var(--panel-light); }
.nav-item.active {
  color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
}
.nav-item .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-muted); flex: none;
}
.nav-item .dot.active { background: var(--green); }
.nav-item .dot.stopped { background: var(--text-muted); }
.nav-item .dot.none { background: transparent; }

/* ---------- Selector de idioma (dentro del Panel de control) ---------- */
.nav-lang {
  position: relative;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.lang-btn { justify-content: flex-start; }
.lang-current { margin-left: auto; color: var(--text); font-size: 12.5px; }
.lang-caret { color: var(--text-muted); font-size: 10px; }
.lang-dropdown {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  background: var(--panel-light);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 4px;
  z-index: 40;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.nav-lang.open .lang-dropdown { display: block; }
.lang-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  cursor: pointer;
}
.lang-option:hover { background: rgba(212, 175, 55, 0.12); }
.lang-option.active { color: var(--gold); }

main { flex: 1; min-width: 0; padding: 0; }
.view { display: none; }
.view.active { display: block; }

.account-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.account-tab {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  background: transparent;
}
.account-tab.active {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
}

.summary-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
}
.summary-cell {
  background: var(--panel);
  padding: 16px 18px;
}
.summary-cell .label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.summary-cell .value { font-size: 18px; font-weight: 500; }
/* Segunda línea de una tarjeta (ej: "2 en curso · 3 cerradas", "Flotante:
   -$4.63"): el detalle que se mueve en vivo, sin robarle protagonismo al
   número principal. */
.summary-cell .sub { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.summary-cell .sub.pos { color: var(--green); }
.summary-cell .sub.neg { color: var(--red); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-dot.active { background: var(--green); }
.status-dot.inactive { background: var(--text-muted); }
.status-dot.error { background: var(--red); }

/* ---------- Ledger (el registro de movimientos) ---------- */
.ledger-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ledger-header .section-hint { margin: 0; flex: 1; }
.clear-log-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.clear-log-btn:hover { background: rgba(212, 175, 55, 0.08); }
.clear-log-btn:focus-visible { outline: 2px solid var(--gold-hover); outline-offset: 2px; }
.ledger-title {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  color: var(--gold);
  margin: 0 0 2px;
}
.ledger-hint { color: var(--text-muted); font-size: 12px; margin: 0 0 14px; }

.ledger { border-top: 1px solid var(--hairline); }
.ledger-row {
  display: grid;
  grid-template-columns: 108px 90px 1fr 90px;
  gap: 14px;
  align-items: start;
  padding: 11px 4px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.ledger-row .t { color: var(--text-muted); padding-top: 1px; }
.ledger-row .p { padding-top: 1px; }
.ledger-badge {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  width: fit-content;
}
.ledger-badge.buy { color: var(--green); border-color: var(--green); }
.ledger-badge.sell { color: var(--red); border-color: var(--red); }
.ledger-badge.info { color: var(--text-muted); }
.ledger-msg { color: var(--text); white-space: pre-line; line-height: 1.5; }
.ledger-profit { text-align: right; padding-top: 1px; }
.ledger-profit.pos { color: var(--green); }
.ledger-profit.neg { color: var(--red); }
.pos { color: var(--green); }
.neg { color: var(--red); }

/* ---------- Info en vivo de una operación (dentro de su propia fila) ---------- */
.ledger-live { margin-top: 8px; }
.ledger-live-tag {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
/* Misma mini-tabla, pero para una operación que YA cerró: la etiqueta va
   en gris para que se distinga de un vistazo de las que siguen en curso. */
.ledger-live-tag.closed { color: var(--text-muted); }
/* Mini-tabla de 4 columnas fijas (Precio actual / Profit actual / SL / TP)
   en vez de texto corrido — así no se desalinea al envolver en pantallas
   angostas ni cuando los valores tienen distinta cantidad de dígitos. */
.ledger-live-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 8px 12px;
  margin-top: 6px;
  max-width: 460px;
}
.llg-cell { min-width: 0; }
.llg-label {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.llg-value { font-size: 12.5px; }
.ledger-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 5px;
  line-height: 1.5;
}

/* ---------- Botones grandes Iniciar/Detener ---------- */
.bot-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.bot-btn {
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--panel);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: opacity 0.15s;
}
.bot-btn .ico { font-size: 18px; }
.bot-btn.start { border-color: var(--green); color: var(--green); }
.bot-btn.start:hover:not(:disabled) { background: rgba(61, 220, 132, 0.1); }
.bot-btn.stop { border-color: var(--red); color: var(--red); }
.bot-btn.stop:hover:not(:disabled) { background: rgba(255, 92, 92, 0.1); }
.bot-btn:disabled { opacity: 0.35; cursor: default; }
.bot-controls-hint { color: var(--text-muted); font-size: 12px; margin: -10px 0 24px; }

.section-title {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  color: var(--gold);
  margin: 28px 0 2px;
}
.subsection-title {
  font-family: 'Fraunces', serif;
  font-size: 13.5px;
  color: var(--text);
  margin: 26px 0 2px;
}
.section-hint { color: var(--text-muted); font-size: 12px; margin: 0 0 14px; }
.summary-panel + .section-title { margin-top: 32px; }

/* ---------- Rendimiento mensual (Resumen) ---------- */
.monthly-perf { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }
.monthly-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.monthly-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.monthly-card-month {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  color: var(--text);
  text-transform: capitalize;
}
.monthly-card-pl { font-size: 15px; font-weight: 600; }
.monthly-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 14px;
}
.monthly-stat-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.monthly-stat-value { font-size: 14px; }

/* ---------- Resumen agrupado por fecha ---------- */
.resumen-day { margin-bottom: 22px; }
.resumen-day-header {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  color: var(--gold);
  text-transform: capitalize;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 2px;
}
.resumen-day .ledger { border-top: none; }
.resumen-day-summary {
  display: flex;
  justify-content: space-between;
  padding: 10px 4px 0;
  margin-top: 4px;
  border-top: 1px dashed var(--hairline);
  font-size: 12.5px;
  color: var(--text-muted);
}
.resumen-day-summary .mono { font-size: 13.5px; font-weight: 600; }

/* ---------- Configuración de la cuenta ---------- */
.config-form { max-width: 860px; }
.config-group { margin-bottom: 26px; }
/* Título de cada bloque del formulario ("Credenciales de MetaTrader 5",
   "Parámetros de operación"): tipografía normal de la interfaz (Inter), no
   la serif decorativa — es una etiqueta de formulario, no un titular. */
.config-group h3 {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.config-group .config-group-hint { color: var(--text-muted); font-size: 12px; margin: 0 0 14px; line-height: 1.6; }
.cred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.config-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 20px;
}
.config-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.config-save-msg { font-size: 13px; min-height: 18px; margin-top: 4px; }
.config-save-msg.ok { color: var(--green); }
.config-save-msg.err { color: var(--red); }

/* Botones "?" de ayuda junto a cada campo de Configuración de la cuenta:
   círculo dorado que al pasar el mouse (o enfocar, para touch/teclado)
   muestra una tarjeta flotante encima, sin empujar el resto del formulario. */
.field label { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.field-label-text { flex: 1; }
.help-wrap { position: relative; display: inline-flex; flex: none; }
.help-btn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: default;
}
.help-wrap:hover .help-btn,
.help-wrap:focus-within .help-btn { background: rgba(212, 175, 55, 0.18); }
.help-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 9px);
  right: -8px;
  width: 240px;
  max-width: min(240px, 80vw);
  background: var(--panel-light);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 400;   /* no hereda la negrita del título del grupo */
  line-height: 1.55;
  color: var(--text);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  z-index: 30;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
/* La tarjeta ancha (la del título "Credenciales de MetaTrader 5") se alinea
   por su borde IZQUIERDO con el "?": ese botón está al principio de la
   línea, así que abriéndola hacia la derecha usa el espacio libre del
   formulario en vez de taparse contra el menú lateral. */
.help-tooltip.wide {
  width: 360px;
  max-width: min(360px, 86vw);
  left: -8px;
  right: auto;
}
.help-tooltip.wide::after { left: 12px; right: auto; }
.help-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 12px;
  border: 6px solid transparent;
  border-top-color: var(--gold);
}

/* Cuando no hay lugar arriba (los "?" de la parte alta de la página, como
   el de "Credenciales de MetaTrader 5"), la tarjeta se abre hacia abajo en
   vez de quedar cortada fuera de la pantalla. La clase la pone
   placeTooltip() en dashboard.html, midiendo el espacio real disponible. */
.help-wrap.below .help-tooltip {
  bottom: auto;
  top: calc(100% + 9px);
}
.help-wrap.below .help-tooltip::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--gold);
}
.help-wrap:hover .help-tooltip,
.help-wrap:focus-within .help-tooltip { display: block; }

button.secondary {
  padding: 10px 20px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
button.secondary:hover { background: rgba(212, 175, 55, 0.08); }

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 0;
  font-size: 13px;
}

@media (max-width: 640px) {
  .summary-panel { grid-template-columns: repeat(2, 1fr); }
  .ledger-row { grid-template-columns: 78px 70px 1fr; }
  .ledger-row .p { display: none; }
  .ledger-live-grid { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .layout { flex-direction: column; padding: 16px; gap: 16px; }
  .sidebar { width: 100%; flex: none; position: static; display: flex; flex-wrap: wrap; gap: 6px; overflow-x: auto; }
  .sidebar-title { display: none; }
  .nav-item { white-space: nowrap; }
  .bot-controls { grid-template-columns: 1fr; }
  .config-row { grid-template-columns: 1fr; }
  .cred-grid { grid-template-columns: 1fr; }
  .config-fields-grid { grid-template-columns: 1fr 1fr; }
  .monthly-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-lang { width: 100%; order: 99; border-top: none; margin-top: 0; padding-top: 0; }
  .lang-dropdown { left: auto; right: 0; width: 180px; }
}

/* =====================================================================
   Agregados del roadmap: curva de equity, noticias, status page,
   modales, y panel de administrador.
   ===================================================================== */

/* ---------- Selector de rango / filtros ---------- */
.range-tabs { display: flex; gap: 6px; flex: none; }
.range-tabs button {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  cursor: pointer;
}
.range-tabs button.active { color: var(--gold); border-color: var(--gold); background: rgba(212,175,55,0.08); }

/* ---------- Curva de equity ----------
   Gráfico en SVG dibujado a mano (sin librerías): el dato más importante
   de la cuenta no debería depender de que cargue un CDN externo. */
.equity-panel {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 26px;
}
.equity-chart { width: 100%; }
.equity-svg { width: 100%; height: 220px; display: block; }
.eq-grid { stroke: rgba(212,175,55,0.10); stroke-width: 1; }
.eq-axis { fill: var(--text-muted); font-size: 9px; font-family: 'IBM Plex Mono', monospace; }
.eq-area { fill: rgba(212,175,55,0.10); stroke: none; }
.eq-equity { fill: none; stroke: var(--gold); stroke-width: 1.8; }
.eq-balance { fill: none; stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 4 3; }
.equity-legend { display: flex; gap: 18px; font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.equity-legend .swatch { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; }
.equity-legend .swatch.eq { background: var(--gold); }
.equity-legend .swatch.bal { background: var(--text-muted); }
.equity-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

/* ---------- Noticias ---------- */
.news-list { border-top: 1px solid var(--hairline); }
.news-row {
  display: grid;
  grid-template-columns: 62px 72px 48px 1fr 150px;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.news-time { color: var(--text-muted); font-size: 12px; }
.news-country { color: var(--text-muted); font-size: 12px; }
.news-nums { color: var(--text-muted); font-size: 11.5px; text-align: right; }
.news-impact {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  white-space: nowrap;
}
.news-impact.high { color: var(--red); border-color: var(--red); }
.news-impact.medium { color: var(--gold); border-color: var(--gold); }
.news-impact.holiday { color: var(--text-muted); }
.news-stale {
  color: var(--gold);
  font-size: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}

/* ---------- Status page ---------- */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.status-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.status-card.down { border-left-color: var(--red); }
.status-card .label {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.status-card .value { font-size: 16px; font-weight: 500; }
.status-card .sub { font-size: 11px; color: var(--text-muted); margin-top: 5px; }

.node-list { display: flex; flex-direction: column; gap: 8px; }
.node-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.node-name { font-size: 13.5px; }
.node-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.node-tag {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--hairline);
  color: var(--text-muted); white-space: nowrap;
}
.node-tag.leader { color: var(--green); border-color: var(--green); }
.node-tag.standby { color: var(--gold); border-color: var(--gold); }
.node-tag.off { color: var(--red); border-color: var(--red); }
.kill-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: rgba(255,92,92,0.10);
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 14px;
}

/* ---------- Modales (riesgo, confirmaciones) ---------- */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 100;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal-card {
  width: 100%; max-width: 520px;
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.modal-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 16px; font-weight: 600; color: var(--gold);
  margin: 0 0 12px;
}
.modal-body { font-size: 13px; line-height: 1.65; color: var(--text); margin: 0 0 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.checkbox-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text);
  text-transform: none; letter-spacing: normal;
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }
button.ghost {
  padding: 10px 18px; background: transparent; color: var(--text-muted);
  border: 1px solid var(--hairline); border-radius: 6px; font-size: 13px; cursor: pointer;
}
button.ghost:hover { color: var(--text); }
button.danger {
  padding: 10px 18px; background: transparent; color: var(--red);
  border: 1px solid var(--red); border-radius: 6px;
  font-weight: 600; font-size: 13px; cursor: pointer;
}
button.danger:hover { background: rgba(255,92,92,0.10); }
button.secondary:disabled, button.danger:disabled { opacity: 0.4; cursor: default; }

/* ---------- Notificaciones de Telegram ---------- */
.notif-toggle { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.telegram-link { font-size: 12.5px; color: var(--text-muted); }
.tg-code { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tg-code code {
  font-family: 'IBM Plex Mono', monospace;
  background: var(--panel-light); border: 1px solid var(--gold); color: var(--gold);
  padding: 3px 10px; border-radius: 6px; letter-spacing: 0.12em;
}
.tg-wait { font-size: 11.5px; margin-top: 4px; }
button.linklike {
  background: none; border: none; color: var(--gold);
  font-family: 'Inter', sans-serif; font-size: 12.5px;
  cursor: pointer; padding: 0; text-decoration: underline;
}
button.linklike.danger-link { color: var(--red); }
.field.disabled { opacity: 0.45; }

/* ---------- Panel de administrador ---------- */
.admin-link { text-decoration: none; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 900px; }
.admin-table th {
  text-align: left; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 500;
  padding: 10px 12px; border-bottom: 1px solid var(--hairline);
  background: var(--panel);
  white-space: nowrap;
}
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.admin-table tbody tr:hover { background: rgba(212,175,55,0.04); }
.cell-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.row-actions { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.mini-select, .mini-input {
  background: var(--panel-light); border: 1px solid var(--hairline);
  color: var(--text); border-radius: 5px; padding: 5px 8px;
  font-family: 'Inter', sans-serif; font-size: 12px;
}
.edit-row { display: none; }
.edit-row.open { display: table-row; }
.edit-row td { background: var(--panel-light); }
.inline-editor { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.inline-editor label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.inline-editor input, .inline-editor select {
  background: var(--panel); border: 1px solid var(--hairline); color: var(--text);
  border-radius: 5px; padding: 7px 9px; font-family: 'Inter', sans-serif; font-size: 12.5px;
  min-width: 110px;
}
.btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kill-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.kill-row .section-hint { margin: 0; flex: 1; min-width: 240px; }
.config-form textarea {
  width: 100%; padding: 10px 12px;
  background: var(--panel-light); border: 1px solid var(--hairline); border-radius: 6px;
  color: var(--text); font-family: 'IBM Plex Mono', monospace; font-size: 13px; resize: vertical;
}
.config-form textarea:focus { outline: none; border-color: var(--gold); }
code.apikey {
  display: inline-block; margin-top: 6px; padding: 6px 10px;
  background: var(--panel-light); border: 1px solid var(--gold); border-radius: 6px;
  color: var(--gold); font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  word-break: break-all;
}

/* ---------- Resultado de la prueba de señal ---------- */
.test-result {
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 26px;
}
.test-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.verdict {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; border: 1px solid;
}
.verdict.ok { color: var(--green); border-color: var(--green); }
.verdict.no { color: var(--red); border-color: var(--red); }
.test-head .conf { color: var(--text-muted); font-size: 12px; }
.test-reason { font-size: 13px; line-height: 1.55; }
.sim-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--hairline); }
.sim-title { font-size: 12px; color: var(--gold); margin-bottom: 8px; }
.sim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 14px; margin-bottom: 8px; }
.sim-grid span { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.sim-grid b { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500; }

@media (max-width: 640px) {
  .news-row { grid-template-columns: 52px 60px 1fr; }
  .news-nums, .news-country { display: none; }
  .equity-stats { grid-template-columns: repeat(2, 1fr); }
}

/* El checkbox dentro de un .field no debe heredar el estilo de etiqueta
   de formulario (mayúsculas, separado a los extremos): es una frase que
   se lee de corrido junto a la casilla. */
.field label.checkbox-row {
  display: flex;
  justify-content: flex-start;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 0;
}

/* El panel de administración muestra 13 columnas por cuenta: necesita más
   ancho que el panel del cliente, que está pensado para una sola cuenta. */
.layout.wide { max-width: 1560px; }
.layout.wide .admin-table { min-width: 1180px; font-size: 12px; }
.layout.wide .admin-table td, .layout.wide .admin-table th { padding: 9px 10px; }
.admin-table td.mono, .admin-table th { white-space: nowrap; }