/* FARO Markets v2 -- estilos base (tokens de marca: navy + teal + Poppins).
   Minimo y decente para F1 (Cimientos); el diseno de verdad llega en F3. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --bg: #091321;
  --bg-elevated: #0E192A;
  --card: #14253C;
  --border: #223A55;
  --text: #E2E8F0;
  --text-sec: #7A8FA6;
  --accent: #12A192;
  --accent-hover: #0E8C80;
  --error: #F87171;
  --error-bg: rgba(248, 113, 113, 0.12);
  --info: #7DD3FC;
  --info-bg: rgba(125, 211, 252, 0.12);
  --success: #34D399;
  --success-bg: rgba(52, 211, 153, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.marca img { height: 34px; }

.marca .nombre {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.marca .nombre span { color: var(--accent); }

.tarjeta {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 34px 30px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.tarjeta.ancha { max-width: 520px; }

h1 {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 6px 0;
}

.subtitulo {
  font-size: 13px;
  color: var(--text-sec);
  margin: 0 0 22px 0;
  line-height: 1.5;
}

label {
  display: block;
  font-size: 12px;
  color: var(--text-sec);
  margin: 14px 0 6px 0;
}

label:first-of-type { margin-top: 0; }

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
}

input:focus { border-color: var(--accent); }

.ayuda {
  font-size: 11px;
  color: var(--text-sec);
  margin-top: 6px;
}

button, .boton {
  display: inline-block;
  width: 100%;
  margin-top: 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

button:hover, .boton:hover { background: var(--accent-hover); }

.boton.secundario {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.boton.secundario:hover { border-color: var(--accent); background: transparent; }

.enlaces {
  margin-top: 18px;
  font-size: 13px;
  text-align: center;
  color: var(--text-sec);
}

.enlaces a { color: var(--accent); text-decoration: none; }
.enlaces a:hover { text-decoration: underline; }

.mensajes { margin-bottom: 16px; }

.mensaje {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 10px;
  line-height: 1.5;
}

.mensaje.error { background: var(--error-bg); border: 1px solid var(--error); color: var(--error); }
.mensaje.info { background: var(--info-bg); border: 1px solid var(--info); color: var(--info); }
.mensaje.success { background: var(--success-bg); border: 1px solid var(--success); color: var(--success); }

.resultado {
  text-align: center;
}

.resultado .icono {
  font-size: 36px;
  margin-bottom: 12px;
}

.pie-legal {
  margin-top: 24px;
  font-size: 11px;
  color: var(--text-sec);
  text-align: center;
  max-width: 400px;
  line-height: 1.5;
}

.panel-usuario {
  font-size: 13px;
  color: var(--text-sec);
  margin-bottom: 18px;
  line-height: 1.6;
}

.panel-usuario strong { color: var(--text); }

form.inline { display: inline; }

/* ============================================================
   F3.1 -- Design system de la app autenticada (Inicio + Mercado).
   Namespace `fx-` completo (variables y clases nuevas) para NO
   tocar ni chocar con los tokens/clases de arriba, que ya usan las
   paginas de auth (login/registro/etc) -- esas quedan intactas.
   ============================================================ */

:root {
  --fx-bg: #091321;
  --fx-tarjeta: #0E192A;
  --fx-elevado: #132036;
  --fx-borde: rgba(255, 255, 255, 0.06);
  --fx-teal: #12A192;
  --fx-teal-hover: #17B8A6;
  --fx-ganancia: #22C55E;
  --fx-perdida: #EF4444;
  --fx-texto: #F7F7F7;
  --fx-texto-sec: #8FA3B8;
}

/* ── Shell: body completo cuando hay sesion (nav_activo, ver base.html) ──── */

body.fx-app {
  display: block;
  min-height: 100vh;
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  background: var(--fx-bg);
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
}

.fx-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.fx-sidebar {
  display: none;
}

.fx-marca {
  margin-bottom: 8px;
}

.fx-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fx-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--fx-texto-sec);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  margin: 0;
}

.fx-nav-link:hover {
  background: var(--fx-elevado);
  color: var(--fx-texto);
}

.fx-nav-link.fx-nav-activo {
  background: rgba(18, 161, 146, 0.14);
  color: var(--fx-teal);
}

.fx-logout-form {
  margin-top: auto;
  padding-top: 16px;
}

.fx-logout-btn {
  font-size: 14px;
}

.fx-main {
  flex: 1;
  min-width: 0;
  padding: 20px 16px 96px 16px;
}

.fx-mensajes {
  max-width: 720px;
  margin: 0 auto 16px auto;
}

.fx-content {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fx-pie-legal {
  max-width: 720px;
  margin: 24px auto 0 auto;
}

/* ── Nav inferior (movil, <1024px) ─────────────────────────────────────── */

.fx-bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--fx-tarjeta);
  border-top: 1px solid var(--fx-borde);
  z-index: 20;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) 4px;
}

.fx-bottomnav-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  color: var(--fx-texto-sec);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  border-radius: 10px;
}

.fx-bottomnav-link.fx-nav-activo {
  color: var(--fx-teal);
}

/* ── Escritorio >=1024px: barra lateral fija, sin nav inferior ───────────── */

@media (min-width: 1024px) {
  .fx-shell {
    flex-direction: row;
  }

  .fx-sidebar {
    display: flex;
    flex-direction: column;
    width: 220px;
    flex-shrink: 0;
    background: var(--fx-tarjeta);
    border-right: 1px solid var(--fx-borde);
    padding: 24px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
  }

  .fx-bottomnav {
    display: none;
  }

  .fx-main {
    padding: 32px 40px 40px 40px;
  }

  .fx-mensajes,
  .fx-content,
  .fx-pie-legal {
    max-width: 880px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── Tarjetas, tipografia y numeros ───────────────────────────────────────── */

.fx-encabezado {
  margin-bottom: 4px;
}

.fx-titulo-saludo {
  font-size: 22px;
  font-weight: 600;
  color: var(--fx-texto);
  margin: 0 0 4px 0;
}

.fx-fecha {
  font-size: 13px;
  color: var(--fx-texto-sec);
  margin: 0;
}

.fx-card {
  background: var(--fx-tarjeta);
  border: 1px solid var(--fx-borde);
  border-radius: 14px;
  padding: 20px;
}

.fx-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}

.fx-card-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--fx-texto);
  margin: 0;
}

.fx-ver-todo {
  font-size: 13px;
  font-weight: 500;
  color: var(--fx-teal);
  text-decoration: none;
  white-space: nowrap;
}

.fx-ver-todo:hover {
  color: var(--fx-teal-hover);
  text-decoration: underline;
}

.fx-chip-etiqueta {
  font-size: 11px;
  font-weight: 600;
  color: var(--fx-texto-sec);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.fx-numero-grande {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 32px;
  font-weight: 600;
  color: var(--fx-texto);
  letter-spacing: -0.5px;
  line-height: 1.15;
}

.fx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.fx-chip {
  flex: 1 1 110px;
  background: var(--fx-elevado);
  border-radius: 10px;
  padding: 12px 14px;
}

.fx-chip .fx-chip-etiqueta {
  margin-bottom: 6px;
}

.fx-chip-valor {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--fx-texto);
}

.fx-ganancia,
.fx-perdida {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 15px;
  font-weight: 600;
}

.fx-ganancia { color: var(--fx-ganancia); }
.fx-perdida { color: var(--fx-perdida); }

.fx-piloto-vacio {
  font-size: 13px;
  color: var(--fx-texto-sec);
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.fx-comision-nota {
  font-size: 12px;
  color: var(--fx-texto-sec);
  margin: 12px 0 0 0;
}

/* ── Mercado: grid de tarjetas, filtros, sparkline ────────────────────────── */

.fx-filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fx-filtro-btn {
  background: var(--fx-elevado);
  border: 1px solid var(--fx-borde);
  color: var(--fx-texto-sec);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin: 0;
  width: auto;
}

.fx-filtro-btn:hover {
  color: var(--fx-texto);
}

.fx-filtro-btn.fx-filtro-activo {
  background: var(--fx-teal);
  border-color: var(--fx-teal);
  color: #fff;
}

.fx-mercado-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .fx-mercado-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .fx-mercado-grid { grid-template-columns: repeat(4, 1fr); }
}

.fx-mercado-grid-preview {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .fx-mercado-grid-preview { grid-template-columns: repeat(4, 1fr); }
}

.fx-activo-card {
  display: block;
  background: var(--fx-elevado);
  border: 1px solid var(--fx-borde);
  border-radius: 14px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

.fx-activo-card:hover {
  border-color: var(--fx-teal);
}

.fx-activo-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.fx-activo-symbol {
  font-size: 14px;
  font-weight: 600;
  color: var(--fx-texto);
}

.fx-activo-nombre {
  font-size: 11px;
  color: var(--fx-texto-sec);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 110px;
}

.fx-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.fx-badge-cripto {
  background: rgba(18, 161, 146, 0.16);
  color: var(--fx-teal);
}

.fx-badge-accion {
  background: rgba(143, 163, 184, 0.16);
  color: var(--fx-texto-sec);
}

.fx-badge-cerrado {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fx-texto-sec);
  margin-top: 8px;
}

/* Insignia permanente de "dinero de practica" junto al saldo (Inicio y
   Cartera) -- 12 del gate legal: que quede claro de un vistazo que el saldo
   es virtual, no solo en el texto de pie de pagina. Tono ambar de aviso. */
.fx-badge-practica {
  background: rgba(245, 185, 66, 0.18);
  color: var(--fx-warn);
}

.fx-card-saldo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fx-activo-precio {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 17px;
  font-weight: 600;
  color: var(--fx-texto);
  margin-top: 10px;
}

.fx-activo-cambio {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--fx-texto-sec); /* respaldo sin dato */
  margin-top: 2px;
}
.fx-activo-cambio.fx-ganancia { color: var(--fx-ganancia); }
.fx-activo-cambio.fx-perdida { color: var(--fx-perdida); }

.fx-sparkline {
  margin-top: 10px;
  line-height: 0;
}

.fx-sparkline-svg {
  display: block;
  width: 100%;
  height: 32px;
}

/* ── Placeholders (Piloto/Cartera/Mas/Activo -- "siguiente fase") ────────── */

.fx-placeholder {
  text-align: center;
  padding: 56px 20px;
}

.fx-placeholder-icono {
  color: var(--fx-teal);
  margin-bottom: 14px;
  display: flex;
  justify-content: center;
}

.fx-placeholder h1 {
  color: var(--fx-texto);
}

.fx-placeholder p {
  color: var(--fx-texto-sec);
  font-size: 13px;
}

/* ── Estado deshabilitado generico (F3.2: panel Comprar con mercado cerrado,
   botones "vendiendo/comprando..." mientras esperan al servidor) ────────── */

button:disabled,
.boton:disabled,
input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Aviso de exito/error (F3.2: Detalle de activo, Piloto, Cartera) ─────── */

.fx-aviso {
  display: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
}

.fx-aviso.fx-aviso-visible {
  display: block;
}

.fx-aviso-exito {
  background: var(--success-bg);
  border: 1px solid var(--fx-ganancia);
  color: var(--fx-ganancia);
}

.fx-aviso-error {
  background: var(--error-bg);
  border: 1px solid var(--fx-perdida);
  color: var(--fx-perdida);
}

/* ── Detalle de activo (F3.2) ─────────────────────────────────────────────── */

.fx-encabezado-activo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.fx-activo-precio-grande {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 34px;
  font-weight: 600;
  color: var(--fx-texto);
  letter-spacing: -0.5px;
  margin-top: 4px;
}

.fx-activo-cambio-grande {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--fx-texto-sec);
  margin-top: 4px;
}

.fx-activo-cambio-grande.fx-ganancia { color: var(--fx-ganancia); }
.fx-activo-cambio-grande.fx-perdida { color: var(--fx-perdida); }

.fx-grafica-wrap {
  position: relative;
  margin-top: 18px;
  padding-right: 56px;
}

.fx-grafica-svg {
  line-height: 0;
}

.fx-grafica-etiquetas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 11px;
  color: var(--fx-texto-sec);
  text-align: right;
  padding: 2px 0;
}

.fx-operacion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .fx-operacion-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.fx-posiciones-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fx-posicion-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--fx-elevado);
  border-radius: 10px;
  padding: 12px 14px;
  flex-wrap: wrap;
}

.fx-posicion-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  flex: 1 1 auto;
}

.fx-posicion-campo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--fx-texto);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.fx-posicion-campo .fx-chip-etiqueta {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  margin-bottom: 0;
}

.fx-btn-vender {
  width: auto;
  margin-top: 0;
  background: transparent;
  border: 1px solid var(--fx-perdida);
  color: var(--fx-perdida);
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
  flex-shrink: 0;
}

.fx-btn-vender:hover {
  background: rgba(239, 68, 68, 0.12);
}

.fx-btn-vender.fx-btn-confirmar {
  background: var(--fx-perdida);
  color: #fff;
}

/* ── Piloto FARO (F3.2) ───────────────────────────────────────────────────── */

.fx-explicacion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .fx-explicacion-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fx-explicacion-card {
  background: var(--fx-tarjeta);
  border: 1px solid var(--fx-borde);
  border-radius: 14px;
  padding: 16px;
}

.fx-explicacion-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(18, 161, 146, 0.16);
  color: var(--fx-teal);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.fx-explicacion-card p {
  font-size: 13px;
  color: var(--fx-texto);
  margin: 0;
  line-height: 1.5;
}

.fx-subtitulo-tabla {
  font-size: 13px;
  font-weight: 600;
  color: var(--fx-texto);
  margin: 18px 0 10px 0;
}

.fx-tabla {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13px;
}

.fx-tabla th {
  text-align: left;
  color: var(--fx-texto-sec);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0 10px 8px 10px;
  border-bottom: 1px solid var(--fx-borde);
}

.fx-tabla td {
  padding: 10px;
  border-bottom: 1px solid var(--fx-borde);
  color: var(--fx-texto);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.fx-tabla td:first-child {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
}

.fx-tabla tbody tr:last-child td {
  border-bottom: none;
}

.fx-perfiles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .fx-perfiles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fx-perfil-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--fx-elevado);
  border: 1px solid var(--fx-borde);
  border-radius: 12px;
  padding: 14px;
  width: 100%;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.fx-perfil-card:hover {
  border-color: var(--fx-teal);
}

.fx-perfil-card.fx-perfil-activo {
  border-color: var(--fx-teal);
  background: rgba(18, 161, 146, 0.1);
}

.fx-perfil-nombre {
  font-size: 14px;
  font-weight: 600;
  color: var(--fx-texto);
}

.fx-perfil-desc {
  font-size: 12px;
  color: var(--fx-texto-sec);
  line-height: 1.4;
}

/* ── Mi cartera (F3.2): pestanas ─────────────────────────────────────────── */

.fx-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--fx-borde);
  margin-bottom: 16px;
}

.fx-tab {
  width: auto;
  margin: 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--fx-texto-sec);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 4px;
  margin-right: 18px;
  cursor: pointer;
}

.fx-tab:hover {
  color: var(--fx-texto);
}

.fx-tab.fx-tab-activo {
  color: var(--fx-teal);
  border-bottom-color: var(--fx-teal);
}

.fx-tab-panel-oculto {
  display: none;
}

.fx-tabla-wrap {
  overflow-x: auto;
}

/* ============================================================
   F3.3 -- Zona publica (landing + auth re-estilizado) y panel de
   administracion. Namespace `fx-` nuevo, solo ANEXADO: nada de lo
   de arriba se toca ni se borra.
   ============================================================ */

/* ── Inputs/selects oscuros reutilizables (fx-input/fx-select) ───────────────
   Usados en el formulario "Agregar activo nuevo"/"Configuracion" del panel de
   administracion Y en los inputs de auth (registro/login/olvide/restablecer)
   -- fondo #132036 (var(--fx-elevado)) en vez del fondo por defecto, mas
   arreglo de autofill de Chrome (el autofill pinta el campo blanco/amarillo
   por encima de cualquier CSS de fondo si no se anula explicitamente -- esa
   es la causa mas probable de "los inputs se ven blancos brillantes"). Regla
   completa (no solo un override de color) para que funcione igual en
   type=text/email/password/number, que no comparten una regla base comun. */

input.fx-input,
select.fx-select {
  width: 100%;
  background: var(--fx-elevado);
  border: 1px solid var(--fx-borde);
  border-radius: 10px;
  color: var(--fx-texto);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
}

input.fx-input:focus,
select.fx-select:focus {
  border-color: var(--fx-teal);
}

select.fx-select {
  cursor: pointer;
}

input.fx-input:-webkit-autofill,
input.fx-input:-webkit-autofill:hover,
input.fx-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fx-texto);
  -webkit-box-shadow: 0 0 0px 1000px var(--fx-elevado) inset;
  box-shadow: 0 0 0px 1000px var(--fx-elevado) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* ── Panel de administracion: badges de estado + grid de metricas ─────────── */

.fx-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .fx-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fx-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.fx-status-active {
  background: var(--success-bg);
  color: var(--fx-ganancia);
}

.fx-status-pending_verification {
  background: var(--info-bg);
  color: var(--info);
}

.fx-status-suspended {
  background: var(--error-bg);
  color: var(--fx-perdida);
}

/* ── Landing publica (fx-lp-*): pagina independiente, NO extiende base.html
   (necesita un layout de secciones a ancho completo que el body centrado de
   arriba no da) -- reusa los mismos tokens de marca (var(--bg)/var(--fx-*)). */

body.fx-lp-body {
  display: block;
  padding: 0;
  align-items: initial;
  justify-content: initial;
  background: var(--bg);
}

.fx-lp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  max-width: 1120px;
  margin: 0 auto;
}

.fx-lp-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fx-texto);
  font-size: 18px;
  font-weight: 700;
}

.fx-lp-nav-brand img {
  height: 30px;
}

.fx-lp-nav-brand em {
  color: var(--fx-teal);
  font-style: normal;
}

.fx-lp-nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.fx-lp-nav-links a {
  color: var(--fx-texto-sec);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.fx-lp-nav-links a:hover {
  color: var(--fx-texto);
}

.fx-lp-nav-cta {
  width: auto;
  margin: 0;
  padding: 10px 18px;
  font-size: 14px;
}

.fx-lp-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 60px 24px;
  text-align: center;
}

.fx-lp-badge {
  display: inline-block;
  background: rgba(18, 161, 146, 0.12);
  border: 1px solid rgba(18, 161, 146, 0.3);
  color: var(--fx-teal);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 20px;
  margin-bottom: 24px;
}

.fx-lp-hero h1 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 18px 0;
  color: var(--fx-texto);
  font-weight: 700;
}

@media (min-width: 640px) {
  .fx-lp-hero h1 {
    font-size: 48px;
  }
}

.fx-lp-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fx-texto-sec);
  margin: 0 auto 32px auto;
  max-width: 560px;
}

.fx-lp-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fx-lp-cta-primaria,
.fx-lp-cta-secundaria {
  width: auto;
  margin: 0;
  padding: 14px 28px;
  font-size: 15px;
}

.fx-lp-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 44px 24px;
}

.fx-lp-titulo-seccion {
  font-size: 25px;
  font-weight: 600;
  color: var(--fx-texto);
  text-align: center;
  margin: 0 0 36px 0;
  letter-spacing: -0.3px;
}

.fx-lp-sub-centrada {
  text-align: center;
  color: var(--fx-texto-sec);
  font-size: 14px;
  margin: -22px 0 28px 0;
}

.fx-lp-pasos-grid,
.fx-lp-perfiles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .fx-lp-pasos-grid,
  .fx-lp-perfiles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fx-lp-paso,
.fx-lp-perfil-card {
  background: var(--fx-tarjeta);
  border: 1px solid var(--fx-borde);
  border-radius: 16px;
  padding: 28px 24px;
}

.fx-lp-paso-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(18, 161, 146, 0.14);
  color: var(--fx-teal);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.fx-lp-paso h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fx-texto);
  margin: 0 0 8px 0;
}

.fx-lp-paso p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fx-texto-sec);
  margin: 0;
}

.fx-lp-perfil-card {
  text-align: center;
}

.fx-lp-perfil-card.fx-lp-perfil-destacado {
  border-color: var(--fx-teal);
  background: rgba(18, 161, 146, 0.06);
}

.fx-lp-perfil-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--fx-texto);
  margin: 0 0 10px 0;
}

.fx-lp-perfil-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fx-texto-sec);
  margin: 0;
}

.fx-lp-mercados-franja {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.fx-lp-mercado-chip {
  background: var(--fx-elevado);
  border: 1px solid var(--fx-borde);
  border-radius: 10px;
  padding: 10px 16px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--fx-texto);
}

.fx-lp-mercado-chip em {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  color: var(--fx-texto-sec);
  margin-left: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.fx-lp-legal {
  text-align: center;
  border-top: 1px solid var(--fx-borde);
}

.fx-lp-legal p {
  color: var(--fx-texto-sec);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 28px auto;
}

.fx-lp-footer {
  border-top: 1px solid var(--fx-borde);
  padding: 28px 24px 44px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}

.fx-lp-footer-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fx-texto-sec);
  font-size: 13px;
  font-weight: 600;
}

.fx-lp-footer-marca img {
  height: 20px;
}

.fx-lp-footer-marca em {
  color: var(--fx-teal);
  font-style: normal;
}

.fx-lp-footer-links {
  display: flex;
  gap: 20px;
}

.fx-lp-footer-links a {
  color: var(--fx-texto-sec);
  font-size: 13px;
  text-decoration: none;
}

.fx-lp-footer-links a:hover {
  color: var(--fx-teal);
  text-decoration: underline;
}

/* ── F4.1 Análisis: radiografía + chat Asesor FARO ── */
.fx-radiografia-resultado { margin-top: 16px; }
.fx-radio-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fx-radio-subtitulo { font-size: 14px; font-weight: 600; color: var(--fx-texto); margin: 14px 0 6px; }
.fx-radio-lista { margin: 0; padding-left: 18px; color: var(--fx-texto-sec); font-size: 13px; line-height: 1.7; }
.fx-chat { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto;
  padding: 12px; background: #0B1626; border: 1px solid rgba(255,255,255,.06); border-radius: 12px;
  min-height: 80px; margin-bottom: 10px; }
.fx-burbuja { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; }
.fx-burbuja-usuario { align-self: flex-end; background: rgba(18,161,146,.18); border: 1px solid rgba(18,161,146,.35); color: var(--fx-texto); }
.fx-burbuja-asesor { align-self: flex-start; background: #132036; border: 1px solid rgba(255,255,255,.06); color: var(--fx-texto); }
.fx-chat-controles { display: flex; gap: 8px; }
.fx-chat-controles .fx-input { flex: 1; }
.fx-nota-legal { font-size: 11px; color: var(--fx-texto-sec); margin-top: 10px; }

/* ── F4.2: Explorador + Reportes + vitrina "Estrategia FARO" ──────────────── */

:root {
  --fx-warn: #F5B942;
  --fx-naranja: #F08A3C;
}

/* .fx-texto-sec como CLASE (la variable --fx-texto-sec ya existia y se usaba
   en varios lugares; esta regla faltaba -- se agrega aqui, de forma aditiva,
   sin tocar ninguna regla existente). */
.fx-texto-sec { color: var(--fx-texto-sec); font-size: 13px; }

/* Badges de riesgo honestos (bajo->muy alto), reusan .fx-badge como base. */
.fx-badge-riesgo-bajo { background: rgba(34, 197, 94, 0.16); color: var(--fx-ganancia); }
.fx-badge-riesgo-medio { background: rgba(245, 185, 66, 0.16); color: var(--fx-warn); }
.fx-badge-riesgo-alto { background: rgba(240, 138, 60, 0.16); color: var(--fx-naranja); }
.fx-badge-riesgo-muy-alto { background: rgba(239, 68, 68, 0.16); color: var(--fx-perdida); }

/* Explorador: formulario (checkboxes de categoria) + grid de tarjetas. */
.fx-exp-categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 6px 0 16px 0;
}

.fx-exp-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fx-texto);
  font-weight: 400;
  cursor: pointer;
}

.fx-exp-checkbox input { accent-color: var(--fx-teal); width: 16px; height: 16px; }

.fx-exp-resultado { margin-top: 4px; }

.fx-exp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.fx-exp-card {
  background: var(--fx-tarjeta);
  border: 1px solid var(--fx-borde);
  border-radius: 14px;
  padding: 16px;
}

.fx-exp-card-encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.fx-exp-card-nombre {
  font-size: 15px;
  font-weight: 600;
  color: var(--fx-texto);
}

.fx-exp-card-categoria {
  font-size: 12px;
  color: var(--fx-texto-sec);
  margin-top: 2px;
}

.fx-exp-card-monto {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--fx-teal);
  margin-top: 10px;
}

.fx-exp-card-razon {
  font-size: 13px;
  color: var(--fx-texto-sec);
  line-height: 1.5;
  margin-top: 8px;
}

.fx-exp-card-enlace {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--fx-teal);
  text-decoration: none;
}

.fx-exp-card-enlace:hover { text-decoration: underline; }

/* Reportes: curva de equity (SVG servido por reports.generator, ver reportes.js). */
.fx-reporte-resultado { margin-top: 16px; }

.fx-reporte-equity {
  margin-top: 8px;
  background: var(--fx-elevado);
  border-radius: 12px;
  padding: 12px;
}

.fx-reporte-equity svg { width: 100%; height: auto; display: block; }

/* Landing: seccion "Resultados de la estrategia" (vitrina publica). */
.fx-lp-resultados-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .fx-lp-resultados-grid { grid-template-columns: repeat(2, 1fr); }
}

.fx-lp-resultado-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--fx-borde);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}

.fx-lp-resultado-etiqueta {
  font-size: 12px;
  color: var(--fx-texto-sec);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

.fx-lp-resultado-valor {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--fx-texto);
}

.fx-lp-equity-wrap {
  max-width: 880px;
  margin: 24px auto 0 auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--fx-borde);
  border-radius: 14px;
  padding: 16px;
}

.fx-lp-equity-wrap svg { width: 100%; height: auto; display: block; }

/* ============================================================
   F5 -- App usuario: onboarding (/app/configurar), medidor de
   tokens, badges de sugerencia (comprar/vender/mantener/evitar),
   estado de corridas, informe embebido, y la franja de disclaimer
   dentro del footer de la landing. Namespace `fx-` (solo ANEXADO).
   ============================================================ */

/* ── Badges de sugerencia (mismo tamaño/peso que .fx-badge; solo cambia el
   color) -- comprar/vender/mantener/evitar deben verse con el mismo peso
   visual, sin que "vender"/"evitar" luzcan menores o menos importantes. ── */
.fx-badge-comprar { background: rgba(34, 197, 94, 0.16); color: var(--fx-ganancia); }
.fx-badge-vender,
.fx-badge-evitar { background: rgba(239, 68, 68, 0.16); color: var(--fx-perdida); }
.fx-badge-mantener { background: rgba(143, 163, 184, 0.16); color: var(--fx-texto-sec); }

/* ── Estado de una corrida de análisis (tabla /app/analisis + detalle) ──── */
.fx-status-corrida-completada { background: var(--success-bg); color: var(--fx-ganancia); }
.fx-status-corrida-en_proceso { background: var(--info-bg); color: var(--info); }
.fx-status-corrida-fallida { background: var(--error-bg); color: var(--fx-perdida); }
.fx-status-corrida-omitida { background: rgba(255, 255, 255, 0.08); color: var(--fx-texto-sec); }

/* ── Medidor de tokens FARO (Inicio + Consumo) ───────────────────────────── */
.fx-medidor-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--fx-elevado);
  overflow: hidden;
  margin: 8px 0;
}

.fx-medidor-relleno {
  height: 100%;
  background: var(--fx-teal);
  border-radius: 999px;
}

.fx-medidor-texto {
  font-size: 12px;
  color: var(--fx-texto-sec);
}

/* ── Informe embebido (detalle de análisis) -- iframe sandbox con srcdoc ─── */
.fx-informe-iframe {
  width: 100%;
  min-height: 1600px;
  border: 0;
  border-radius: 12px;
  background: #0E192A;
  display: block;
}

/* ── Onboarding /app/configurar (4 pasos) ────────────────────────────────── */
.fx-onboarding-pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.fx-onboarding-paso {
  font-size: 12px;
  font-weight: 600;
  color: var(--fx-texto-sec);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.fx-onboarding-paso.fx-onboarding-paso-activo {
  color: var(--fx-teal);
}

.fx-onboarding-panel.fx-step-oculto,
.fx-step-oculto {
  display: none;
}

.fx-onboarding-contador {
  font-size: 12px;
  color: var(--fx-texto-sec);
  margin: 10px 0 4px 0;
}

.fx-onboarding-lista {
  max-height: 420px;
  overflow-y: auto;
  margin-top: 6px;
}

.fx-onboarding-grupo {
  margin-bottom: 14px;
}

.fx-onboarding-item {
  display: flex;
  padding: 6px 4px;
  border-radius: 8px;
}

.fx-onboarding-item:hover {
  background: var(--fx-elevado);
}

.fx-onboarding-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.fx-onboarding-nav .boton,
.fx-onboarding-nav button {
  width: auto;
  margin: 0;
}

/* ── Landing: grid de 4 dimensiones del analisis (reusa .fx-lp-paso) ─────── */
.fx-lp-dimensiones-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .fx-lp-dimensiones-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .fx-lp-dimensiones-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Landing: disclaimer dentro del footer (pequeño, neutro, nunca popup) ── */
.fx-lp-footer-disclaimer {
  flex-basis: 100%;
  text-align: center;
  color: var(--fx-texto-sec);
  font-size: 12px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 18px auto;
}

/* ── Enlaces dentro de tablas ──────────────────────────────────────────────
   Sin esto, el navegador los pinta con su azul/morado por defecto y rompe la
   paleta (se vio en la lista de análisis, 2026-08-28). */
.fx-tabla a {
  color: var(--fx-teal, #12A192);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.fx-tabla a:hover,
.fx-tabla a:focus-visible {
  border-bottom-color: var(--fx-teal, #12A192);
}
.fx-tabla a:visited {
  color: var(--fx-teal, #12A192);
}

/* ============================================================
   F6 -- Panel de administracion: operacion del dia (Resumen),
   filtros de Corridas, formularios de alta (Activos/Precios de
   IA/Invitaciones) y el codigo de invitacion mostrado una sola
   vez. Namespace `fx-` (solo ANEXADO, ninguna regla existente
   se toca).
   ============================================================ */

/* Relleno rojo del medidor (.fx-medidor-barra/.fx-medidor-relleno, ya
   existente) cuando el gasto de IA del dia llega al 80% del tope. */
.fx-medidor-relleno-alerta { background: var(--fx-perdida); }

/* Aviso estatico (no depende de JS, a diferencia de .fx-aviso/.fx-aviso-
   visible que las paginas activan por fetch) -- mismo tratamiento visual que
   .fx-aviso-error/.fx-aviso-exito pero en tono ambar, para advertencias que
   no son un fallo (80% del tope, corridas degradadas). */
.fx-aviso-advertencia {
  display: block;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
  background: rgba(245, 185, 66, 0.12);
  border: 1px solid var(--fx-warn);
  color: var(--fx-warn);
}

.fx-badge-degradada { background: rgba(245, 185, 66, 0.16); color: var(--fx-warn); }

/* Filtros de la tabla de Corridas -- fila de controles compactos. */
.fx-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.fx-filtros .fx-input,
.fx-filtros select.fx-select {
  margin: 0;
  min-width: 160px;
  width: auto;
}

/* Formularios de alta (Activos/Precios de IA/Invitaciones) -- grid de 2
   columnas en pantallas medianas o mas, 1 columna en movil. */
.fx-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 16px;
}

@media (min-width: 640px) {
  .fx-form-grid { grid-template-columns: repeat(2, 1fr); }
}

.fx-form-grid .fx-input,
.fx-form-grid select.fx-select {
  width: 100%;
}

/* Codigo de invitacion recien generado -- se muestra UNA sola vez, en claro,
   para copiarlo (el panel solo guarda su hash). */
.fx-codigo-nuevo {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 14px;
  background: var(--fx-elevado);
  border: 1px solid var(--fx-borde);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 4px 0;
  word-break: break-all;
}

/* ── Enlaces dentro de tarjetas y del panel ────────────────────────────────
   Complementa la regla de .fx-tabla a: cualquier enlace suelto dentro de una
   tarjeta también debe usar la paleta, no el azul/morado del navegador. */
.fx-card a:not(.fx-btn),
.fx-stat a:not(.fx-btn),
.fx-admin a:not(.fx-btn):not(.fx-nav-item) {
  color: var(--fx-teal, #12A192);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.fx-card a:not(.fx-btn):hover,
.fx-stat a:not(.fx-btn):hover,
.fx-admin a:not(.fx-btn):not(.fx-nav-item):hover {
  border-bottom-color: var(--fx-teal, #12A192);
}
.fx-card a:visited:not(.fx-btn),
.fx-stat a:visited:not(.fx-btn),
.fx-admin a:visited:not(.fx-btn):not(.fx-nav-item) {
  color: var(--fx-teal, #12A192);
}

/* ── Centro de recarga (F8) -- lista de "que respalda cada analisis" ──────── */
.fx-lista-respaldo {
  margin: 10px 0 14px;
  padding-left: 20px;
  color: var(--fx-texto-sec, var(--text-sec));
  font-size: 13px;
  line-height: 1.6;
}
.fx-lista-respaldo li { margin-bottom: 8px; }
.fx-lista-respaldo li:last-child { margin-bottom: 0; }
.fx-lista-respaldo strong { color: var(--text); }

/* ── Paquetes de recarga: tarjeta con boton al pie ─────────────────────────── */
.fx-paquete-card { display: flex; flex-direction: column; }
.fx-paquete-card .boton { margin-top: auto; }