/* =========================================================
   TICKER EXPLORER — Getick Dark (Dash Bootstrap safe)
   Put in: /assets/ticker_explorer.css
   ========================================================= */

:root{
  --gx-bg: rgba(0,0,0,.22);
  --gx-card: rgba(0,0,0,.28);
  --gx-border: rgba(255,255,255,.10);
  --gx-text: rgba(255,255,255,.88);
  --gx-text-dim: rgba(255,255,255,.70);

  /* Getick brand */
  --gx-green: #2ecc71;
  --gx-green-soft: rgba(46,204,113,.25);
  --gx-green-strong: rgba(46,204,113,.45);

  --gx-red: #ff5252;
  --gx-yellow: #ffb300;
}

/* =========================
   Page wrap
   ========================= */
.txe-wrap{
  width: 100%;
  padding: 8px 6px;
}

/* =========================
   Top controls
   ========================= */
.txe-controls{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Inputs */
.txe-input .form-control,
.txe-input .form-select{
  background: rgba(0,0,0,.40) !important;
  color: var(--gx-text) !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: 14px !important;
}

.txe-input .form-control:focus,
.txe-input .form-select:focus{
  outline: none !important;
  border-color: var(--gx-green-strong) !important;
  box-shadow: 0 0 0 2px rgba(46,204,113,.25) !important;
}

/* Go button */
.txe-btn{
  background: rgba(0,0,0,.45) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid var(--gx-green-strong) !important;
  border-radius: 14px !important;
  padding: 8px 14px !important;
  font-weight: 800;
}

.txe-btn:hover{
  background: rgba(0,0,0,.60) !important;
  border-color: var(--gx-green) !important;
  box-shadow: 0 0 0 2px rgba(46,204,113,.25) !important;
}

/* Pill with price */
.txe-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--gx-border);
  border-radius: 14px;
  background: var(--gx-bg);
  color: var(--gx-text);
  font-weight: 800;
}

.txe-watchlist-star{
  width:38px; height:38px; flex:0 0 38px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.85); border-radius:12px;
  background:transparent; color:rgba(255,255,255,.92);
  font-size:22px; line-height:1; cursor:pointer;
  transition:color .14s ease,border-color .14s ease,
             background .14s ease,transform .14s ease;
}
.txe-watchlist-star:hover{ transform:translateY(-1px); border-color:#f4c542; }
.txe-watchlist-star.is-selected{
  color:#f4c542; border-color:#f4c542; background:rgba(244,197,66,.10);
}

/* =========================
   Tabs — Stock / Options
   SAME SIZE + STYLE
   ========================= */
.txe-tabs .nav{
  gap: 8px;
  border-bottom: none !important;
}

.txe-tabs .nav-link{
  background: rgba(0,0,0,.45) !important;
  color: rgba(255,255,255,.85) !important;

  border: 1px solid var(--gx-border) !important;
  border-radius: 14px !important;

  padding: 8px 14px !important;
  font-weight: 800 !important;

  min-width: 120px !important;         /* same width */
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;             /* same height */
  line-height: 1 !important;
}

.txe-tabs .nav-link:hover{
  border-color: var(--gx-green-strong) !important;
  box-shadow: 0 0 0 2px rgba(46,204,113,.25) !important;
}

.txe-tabs .nav-link.active{
  background: rgba(0,0,0,.65) !important;
  color: #ffffff !important;
  border-color: var(--gx-green) !important;
  box-shadow:
    0 0 0 2px rgba(46,204,113,.35),
    0 0 18px rgba(46,204,113,.18),
    0 12px 30px rgba(0,0,0,.55) !important;
}

/* =========================
   Cards — match _card() look
   ========================= */


  /* darker overall card + subtle gradient */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.035),
    rgba(0,0,0,.35)
  ) !important;

  /* heavier shadow, no glow */
  box-shadow: 0 18px 55px rgba(0,0,0,.75) !important;
}

.txe-card .card-header{
  padding: 12px 16px !important;
  font-weight: 450 !important;
  letter-spacing: .3px !important;

  color: var(--gx-green) !important;
  background: rgba(0,0,0,.35) !important;

  border-bottom: 1px solid rgba(255,255,255,.10) !important; /* = STROKE */
}

.txe-card .card-body{
  padding: 14px !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(255,255,255,.88) !important;
}

/* subtle vertical rhythm between card rows */
.row + .row{
  margin-top: 20px;
}

/* =========================
   Metrics chips
   ========================= */
.txe-metrics{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.txe-metric{
  border: 1px solid var(--gx-border);
  background: rgba(0,0,0,.22);
  border-radius: 16px;
  padding: 10px 14px;
  min-width: 170px;
}

.txe-metric .k{
  font-size: 12px;
  color: var(--gx-text-dim);
}

.txe-metric .v{
  font-size: 16px;
  font-weight: 900;
  margin-top: 2px;
}

/* =========================
   Helper colors
   ========================= */
.txe-pos{ color: var(--gx-green); font-weight: 800; }
.txe-neg{ color: var(--gx-red); font-weight: 800; }
.txe-dim{ color: var(--gx-text-dim); }

/* =========================
   Expiration Bar
   ========================= */
.txe-expbar-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--gx-border);
  border-radius: 16px;
}

/* pills container */
.txe-expbar{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

/* expiration pill */
.txe-exp-pill{
  padding: 10px 14px;
  min-width: 150px;

  border-radius: 14px;
  border: 1px solid var(--gx-border);

  background: rgba(0,0,0,.45);
  color: rgba(255,255,255,.90);

  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.txe-exp-pill:hover{
  background: rgba(0,0,0,.60);
  border-color: var(--gx-green-strong);
  box-shadow: 0 0 0 2px rgba(46,204,113,.25);
}

.txe-exp-pill.active{
  background: rgba(0,0,0,.65);
  color: #ffffff !important;
  border-color: var(--gx-green);
  box-shadow:
    0 0 0 2px rgba(46,204,113,.35),
    0 0 18px rgba(46,204,113,.18),
    inset 0 0 0 1px rgba(46,204,113,.35) !important;
}

/* =========================================================
   FINAL OVERRIDES (keep at VERY END)
   ========================================================= */

/* ---------- MORE (dbc.DropdownMenu id="txe-exp-more") ---------- */
#txe-exp-more .dropdown-toggle{
  background: rgba(0,0,0,.45) !important;
  color: rgba(255,255,255,.85) !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  outline: none !important;

  height: 40px !important;
  min-width: 200px !important;
  padding: 10px 16px !important;

  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* hover/focus = pill hover */
#txe-exp-more .dropdown-toggle:hover,
#txe-exp-more .dropdown-toggle:focus,
#txe-exp-more .dropdown-toggle:focus-visible{
  background: rgba(0,0,0,.60) !important;
  border-color: var(--gx-green-strong) !important;
  box-shadow: 0 0 0 2px rgba(46,204,113,.25) !important;
  outline: none !important;
}

/* open = pill active */
#txe-exp-more.show .dropdown-toggle,
#txe-exp-more .dropdown-toggle[aria-expanded="true"]{
  background: rgba(0,0,0,.65) !important;
  color: #ffffff !important;
  border-color: var(--gx-green) !important;
  box-shadow:
    0 0 0 2px rgba(46,204,113,.35),
    inset 0 0 0 1px rgba(46,204,113,.35) !important;
}

/* Menu */
#txe-exp-more .dropdown-menu{
  background: #0b0b10 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  min-width: 220px !important;
  box-shadow: 0 20px 45px rgba(0,0,0,.75) !important;
}

/* Items */
#txe-exp-more .dropdown-item{
  color: rgba(255,255,255,.90) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
}

#txe-exp-more .dropdown-item:hover,
#txe-exp-more .dropdown-item:focus{
  background: rgba(46,204,113,.22) !important;
  color: #fff !important;
}

/* ---------- ALL EXPIRATIONS button ---------- */
#txe-exp-all{
  background: rgba(0,0,0,.45) !important;
  color: rgba(255,255,255,.85) !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

#txe-exp-all:hover{
  background: rgba(0,0,0,.60) !important;
  border-color: var(--gx-green-strong) !important;
  box-shadow: 0 0 0 2px rgba(46,204,113,.25) !important;
}

/* active/selected */
#txe-exp-all.active,
#txe-exp-all[aria-pressed="true"]{
  background: rgba(0,0,0,.65) !important;
  color: #ffffff !important;
  border-color: var(--gx-green) !important;
  box-shadow:
    0 0 0 2px rgba(46,204,113,.35),
    inset 0 0 0 1px rgba(46,204,113,.35) !important;
}

/* =========================
   Ticker input — dark grey, NO green, NO glow
   ========================= */
#txe-symbol{
  background: rgba(20,20,20,.85) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 14px !important;
  font-weight: 700;
  box-shadow: none !important;
  outline: none !important;
}

/* Placeholder */
#txe-symbol::placeholder{
  color: rgba(255,255,255,.45) !important;
}

/* Focus / active / clicked */
#txe-symbol:focus,
#txe-symbol:active,
#txe-symbol:focus-visible{
  background: rgba(25,25,25,.95) !important;
  color: #ffffff !important;

  /* ⛔ force neutral border */
  border-color: rgba(255,255,255,.28) !important;

  /* ⛔ kill ALL bootstrap effects */
  box-shadow: none !important;
  outline: none !important;
}

/* =========================
   News list — pill on right
   ========================= */
.txe-news-item{
  background: transparent !important;
  border-color: rgba(255,255,255,.08) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.txe-news-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.txe-news-link{
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 650;
  line-height: 1.25;
}

.txe-news-link:hover{
  color: #ffffff;
  text-decoration: none;
}

/* Fancy sentiment pill */
.txe-news-pill{
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  line-height: 1;
}

/* Variants */
.txe-news-pill-pos{
  color: #d9ffe9;
  background: rgba(46,204,113,.22);
  border-color: rgba(46,204,113,.45);
}

.txe-news-pill-neg{
  color: #ffe1e1;
  background: rgba(255,82,82,.18);
  border-color: rgba(255,82,82,.45);
}

.txe-news-pill-neu{
  color: rgba(255,255,255,.85);
  background: rgba(170,170,170,.14);
  border-color: rgba(255,255,255,.14);
}
/* Header más oscuro */
.txe-heatmap-table thead th{
  background: rgba(0,0,0,0.60) !important;
  color: rgba(255,255,255,0.92);
  border: none !important;
}

/* Eliminar bordes de filas/celdas */
.txe-heatmap-table td,
.txe-heatmap-table th{
  border: none !important;
}

/* Strike column (col=0) más clarito */
.txe-heatmap-table td[data-col="0"]{
  background: rgba(0,0,0,0.60) !important;
  color: rgba(255,255,255,0.92);
}

/* Strike ATM – solo fondo más claro (sin borde) */
.txe-heatmap-table td[data-atm="1"]{
  background: rgba(255,255,255,0.14) !important;
}


/* Hover con alpha SIN tapar los colores del heatmap */
.txe-heatmap-table tbody tr:hover td{
  box-shadow: inset 0 0 0 9999px rgba(217, 217, 217, 0.40) !important; /* gris oscuro con alpha */
}

/* =========================================================
   NETGEX — About modal
   ========================================================= */

.netgex-about-modal .modal-dialog{
  max-height: 92vh;
}

.netgex-about-modal .modal-content{
  max-height: 92vh;
}

.netgex-about-body{
  overflow-y: auto;
  max-height: calc(92vh - 120px);
}

/* Optional image: responsive + capped */
.netgex-about-body img,
.netgex-about-img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 12px auto;
  max-height: 38vh;
  object-fit: contain;
}

/* =========================================================
   TICKER EXPLORER — Heatmaps About label + modal
   (Matches screener "qmomo-label" + modal style)
   ========================================================= */

.txe-wrap .txe-about-row{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 6px 0 10px 0;
}

/* same “label” look as IPO / screeners */
.txe-wrap .txe-about-label{
  font-size: .72rem;
  opacity: .85;
  margin: 0;
  color: rgba(255,255,255,.85);
}

/* clickable label (looks like text label) */
.txe-wrap .txe-about-btn{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(255,255,255,.85) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  opacity: .90;
  text-decoration: none !important;
  box-shadow: none !important;
}

.txe-wrap .txe-about-btn:hover{
  color: #2ecc71 !important;
  text-decoration: underline !important;
  opacity: 1;
}

.txe-wrap .txe-about-btn:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(46,204,113,.12) !important;
  border-radius: 8px;
}
.scr2-about-link{
  opacity: .75;
  font-weight: 700;
}
.scr2-about-link:hover{
  opacity: 1;
  text-decoration: underline;
}
/* =========================================================
   TXE — About link inside card headers (do NOT inherit Stage2 42px line-height)
   ========================================================= */
.txe-card .txe-about-link{
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.70);
  opacity: .75;

  line-height: 1 !important;     /* ✅ key fix */
  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.txe-card .txe-about-link:hover{
  opacity: 1;
  text-decoration: underline;
  color: rgba(255,255,255,.92);
}
/* Override Stage2 about-link height ONLY inside TXE card headers */
.txe-card .scr2-about-link{
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
}
/* Heatmap tables: vertical scroll + sticky header */
.txe-heatmap-scroll{
  /* 31 filas aprox (15 + ATM + 15). Ajustá si tu row height difiere */
  max-height: min(70vh, 820px);
  overflow-y: auto;
  overflow-x: hidden;

  border: none !important;
}

/* Optional: smooth scroll */
.txe-heatmap-scroll{
  scroll-behavior: smooth;
}

/* Sticky header */
.txe-heatmap-scroll table thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(5,6,10,.92);
  backdrop-filter: blur(8px);
}

/* Optional: make scrollbar nicer (webkit) */
.txe-heatmap-scroll::-webkit-scrollbar{ width: 10px; }
.txe-heatmap-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.15);
  border-radius: 999px;
}
.txe-heatmap-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.22);
}
/* Trend label + triangle coloring */
.txe-trend-up   { color: #2ecc71; font-weight: 800; }
.txe-trend-down { color: #ff5c5c; font-weight: 800; }
.txe-trend-flat { color: rgba(255,255,255,.55); font-weight: 800; }
/* mini cards same size */
.econ-mini-kpi, .mini-kpi, .gt-mini-kpi{
  width: 100%;
  height: 100%;
}

/* si internamente es un "card" */
.econ-mini-kpi .card, .mini-kpi .card, .gt-mini-kpi .card{
  height: 100%;
}
/* =========================================================
   Dark scrollbar (Heatmaps / Tables)
   ========================================================= */

/* Chrome, Edge, Safari */
.uw-table-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.uw-table-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}

.uw-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
}

.uw-table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.30);
}

/* Firefox */
.uw-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) rgba(255,255,255,.05);
}
/* =========================================================
   Sticky table headers (Strike + Expirations)
   ========================================================= */

.uw-sticky-head thead th {
  position: sticky;
  top: 0;
  z-index: 5;

  background: linear-gradient(
    180deg,
    rgba(15, 18, 22, 0.96),
    rgba(15, 18, 22, 0.92)
  );

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border-bottom: 1px solid rgba(255,255,255,.12);
}
/* =========================================================
   TXE Heatmap — sticky header visible always
   ========================================================= */

.uw-table-scroll{
  position: relative;
  overflow: auto;
}

/* fuerza thead correcto (por si alguna regla lo rompe) */
.txe-heatmap-table thead{
  display: table-header-group !important;
}

.txe-heatmap-table thead th{
  position: sticky;
  top: 0;
  z-index: 20;                 /* arriba de todo */
  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .2px;

  background: rgba(10,12,16,.96);  /* sólido para que no “desaparezca” */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border-bottom: 1px solid rgba(255,255,255,.14);
}

/* para que la 1ra fila no quede “debajo” del header */
.txe-heatmap-table{
  margin-top: 0 !important;
}
/* HEADER siempre visible */
.txe-heatmap-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(12,14,18,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* BODY */
.txe-heatmap-body td {
  font-size: 12px;
}

/* Scroll oscuro */
.uw-table-scroll::-webkit-scrollbar {
  width: 10px;
}
.uw-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.25);
  border-radius: 8px;
}
.txe-heatmap-table{
  background: rgba(0,0,0,.22) !important;
  color: rgba(255,255,255,.88) !important;
}

.txe-heatmap-table th,
.txe-heatmap-table td{
  background-clip: padding-box;
}
/* =========================================================
   TXE Heatmap — SOLID header (no alpha, no blur)
   ========================================================= */

.txe-heatmap-table thead th{
  position: sticky;
  top: 0;
  z-index: 30;

  /* ⛔ sin transparencia */
  background: #0b0b10 !important;   /* mismo negro que Getick */

  /* ⛔ sin blur */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  color: rgba(255,255,255,.8) !important;
  font-weight: 800;
  letter-spacing: .2px;

  border-bottom: 1px solid rgba(255,255,255,.14);
}
/* =========================================================
   TXE Heatmap — Header = exact Strike column color
   (put at the VERY END)
   ========================================================= */

/* 1) Define ONE single color for both: header + strike col */
:root{
  --txe-strike-bg: rgba(0,0,0,0.60);     /* <— este es tu Strike col actual */
  --txe-strike-fg: rgba(255,255,255,0.92);
}

/* 2) Header background EXACTLY same as Strike column */
.txe-heatmap-table thead th{
  position: sticky;
  top: 0;
  z-index: 30;

  background: var(--txe-strike-bg) !important;  /* ✅ igual a Strike */
  color: rgba(255,255,255,0.92) !important;     /* tu font está ok */

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border: none !important;
}

/* 3) Strike column uses the same bg variable */
.txe-heatmap-table td[data-col="0"]{
  background: var(--txe-strike-bg) !important;  /* ✅ match header */
  color: var(--txe-strike-fg) !important;
}

/* 4) Strike ATM (ONLY in Strike column) slightly lighter */
.txe-heatmap-table td[data-col="0"][data-atm="1"]{
  background: rgba(255,255,255,0.12) !important;  /* ✅ un poco más claro */
  color: rgba(255,255,255,0.95) !important;
}

/* 5) IMPORTANT: don't brighten the whole ATM row everywhere */
.txe-heatmap-table td[data-atm="1"]{
  /* neutralize previous rule that was affecting all columns */
  background: unset !important;
}
/* =========================================================
   TXE Heatmap — FIX transparency on scroll (FINAL)
   ========================================================= */

/* 1) Fondo SOLIDO del contenedor scrolleable */
.uw-table-scroll{
  background: rgba(0,0,0,0.60) !important; /* mismo que Strike */
  isolation: isolate;                      /* ⛔ evita mezcla de capas */
}

/* 2) Tabla sin alpha heredada */
.txe-heatmap-table{
  background: rgba(0,0,0,0.60) !important;
}

/* 3) HEADER 100% SOLIDO + aislado */
.txe-heatmap-table thead th{
  position: sticky;
  top: 0;
  z-index: 50;

  background: rgba(0,0,0,0.60) !important;  /* EXACT Strike bg */
  opacity: 1 !important;                    /* ⛔ nunca alpha */
  mix-blend-mode: normal !important;        /* ⛔ no blending */

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border-bottom: 1px solid rgba(255,255,255,.14);
}

/* 4) Strike column SIEMPRE sólida */
.txe-heatmap-table td[data-col="0"]{
  background: rgba(0,0,0,0.60) !important;
}

/* 5) Strike ATM un poco más claro (solo esa celda) */
.txe-heatmap-table td[data-col="0"][data-atm="1"]{
  background: rgba(104, 96, 100, 0.56) !important;
}

/* 6) Evitar que hover “tiña” el header */
.txe-heatmap-table tbody tr:hover td{
  box-shadow: inset 0 0 0 9999px rgba(217,217,217,.40);
}

.txe-heatmap-table thead tr:hover th{
  box-shadow: none !important;
}

/* =========================================================
   HEATMAP HD — Highlight toggle
   ========================================================= */
.hhd-highlight-area{
  position: relative;
}

.hhd-highlight-area .hhd-metric-tabs{
  padding-right: 550px;
}

.hhd-highlight-controls{
  position: absolute;
  top: 2px;
  right: calc(20% + 10px);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hhd-highlight-btn{
  flex: 0 0 auto;
  min-width: 102px;
  padding: 5px 12px !important;
  border: 1px solid rgba(255, 221, 87, .72) !important;
  border-radius: 7px !important;
  color: #17130a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.hhd-highlight-btn.hhd-highlight-off{
  background: #7a6515 !important;
  color: rgba(255,255,255,.82) !important;
}

.hhd-highlight-btn.hhd-highlight-on{
  background: #ffe477 !important;
  box-shadow: 0 0 0 2px rgba(255,228,119,.15), 0 0 16px rgba(255,214,51,.28);
}

.hhd-highlight-btn:hover{
  background: #fff0a8 !important;
  color: #17130a !important;
  transform: translateY(-1px);
}

.hhd-outliers-btn{
  flex: 0 0 auto;
  min-width: 92px;
  padding: 5px 12px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.hhd-outliers-btn.hhd-outliers-off{
  background: #35363a !important;
  color: rgba(255,255,255,.72) !important;
}

.hhd-outliers-btn.hhd-outliers-on{
  background: #f5f5f5 !important;
  color: #151515 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 0 14px rgba(255,255,255,.18);
}

.hhd-outliers-btn:hover{
  background: #ffffff !important;
  color: #151515 !important;
  transform: translateY(-1px);
}

.hhd-highlight-slider{
  flex: 0 0 300px;
  width: 300px;
  min-width: 300px;
  height: 30px;
  padding: 0 6px;
  position: relative;
  box-sizing: border-box;
}

.hhd-highlight-slider-label{
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.62);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .2px;
  white-space: nowrap;
}

.hhd-highlight-slider-control{
  position: absolute;
  right: 6px;
  bottom: -5px;
  left: 6px;
  height: 14px;
}

.hhd-highlight-slider-control > div,
.hhd-highlight-slider .rc-slider{
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
}

.hhd-highlight-slider .rc-slider-track{
  height: 4px;
  background-color: #ffe477 !important;
}

.hhd-highlight-slider .rc-slider-rail{
  height: 4px;
  background-color: rgba(255,228,119,.32) !important;
}

.hhd-highlight-slider .rc-slider-handle{
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-color: #ffe477 !important;
  background: #ffe477 !important;
  box-shadow: 0 0 0 2px rgba(255,228,119,.16);
}

.hhd-highlight-enabled .txe-heatmap-table tbody td:not([data-col="0"]):not(.hhd-highlight-keep){
  filter: brightness(30%);
  opacity: .70;
  transition: filter .18s ease, opacity .18s ease;
}

.hhd-highlight-enabled .txe-heatmap-table tbody td.hhd-highlight-keep{
  filter: none;
  opacity: 1;
  transition: filter .18s ease, opacity .18s ease;
}

@media (max-width: 720px){
  .hhd-highlight-area .hhd-metric-tabs{
    padding-right: 0;
  }

  .hhd-highlight-controls{
    position: static;
    justify-content: flex-end;
    margin: 8px 0 0 auto;
  }
}

@media (max-width: 1100px){
  .hhd-highlight-area .hhd-metric-tabs{
    padding-right: 0;
  }

  .hhd-highlight-controls{
    position: static;
    justify-content: flex-end;
    margin: 8px 0 0 auto;
  }
}
/* =========================================================
   TXE Heatmap — Sticky header NO transparency (FINAL)
   ========================================================= */

/* 1) Definimos un color OPACO único para Strike + Header */
:root{
  --txe-strike-solid: #000000;   /* opaco, sin alpha */
  --txe-strike-atm:   #808080;   /* un poco más claro para Strike ATM */
}

/* 2) Header sticky: SIEMPRE sólido, sin blur, sin mezcla */
.txe-heatmap-table thead th{
  position: sticky;
  top: 0;
  z-index: 50;

  background-color: var(--txe-strike-solid) !important;
  background-image: none !important;

  opacity: 1 !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* opcional pero ayuda a que no “mezcle” al repintar */
  transform: translateZ(0);
}

/* 3) Strike column: mismo color EXACTO que el header */
.txe-heatmap-table td[data-col="0"]{
  background-color: var(--txe-strike-solid) !important;
  background-image: none !important;
}

/* 4) Strike ATM: un poco más claro (solo esa celda) */
.txe-heatmap-table td[data-col="0"][data-atm="1"]{
  background-color: var(--txe-strike-atm) !important;
}
.txe-strike-link{
  color: rgba(255,255,255,.92);
}
.txe-strike-link:hover{
  color: rgba(0, 255, 255, .85);
  text-decoration: underline;
}
/* =========================
   CONTRACT MODAL — GETICK / UW
   ========================= */

.txe-contract-modal-body{
  padding: 8px 10px 6px 10px;
}

.txe-contract-title-big{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
  margin: 4px 2px 10px 2px;
}

/* KPI grids */
.txe-kpi-grid{
  display: grid;
  gap: 14px;
  margin: 2px 2px 6px 2px;
}

.txe-kpi-grid-top{
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 10px;
}

.txe-kpi-grid-bottom{
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 6px;
}

.txe-kpi{
  padding: 6px 2px;
}

.txe-kpi-label{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  margin-bottom: 2px;
}

.txe-kpi-val{
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,255,255,.88);
}

/* Dividers */
.txe-divider{
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 10px 0;
}

/* Chart wrap */
.txe-contract-chart-wrap{
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}

/* Make plotly feel UW */
.txe-contract-graph{
  width: 100%;
}

/* Table wrap */
.txe-contract-table-wrap{
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

/* If uw_table uses .uw-table or similar, these help.
   Adjust selectors to match your uw_table output. */
.txe-contract-table-wrap table{
  width: 100%;
  border-collapse: collapse;
}

.txe-contract-table-wrap thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.80);
  font-weight: 800;
  font-size: 13px;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.txe-contract-table-wrap tbody td{
  padding: 9px 10px;
  font-size: 13px;
  color: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.txe-contract-table-wrap tbody tr:nth-child(odd) td{
  background: rgba(255,255,255,.02);
}

.txe-contract-table-wrap tbody tr:hover td{
  background: rgba(46,204,113,.08);
}

/* Scroll area inside uw_table if it doesn't do it */
.txe-contract-table-wrap{
  max-height: 260px;
  overflow: auto;
}

/* Responsive */
@media (max-width: 1100px){
  .txe-kpi-grid-top{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .txe-kpi-grid-bottom{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .txe-contract-title-big{ font-size: 28px; }
}
/* ===== Contract modal (Getick) ===== */
.txe-modal-wrap{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.txe-modal-card{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px 12px;
}

.txe-card-title{
  font-weight: 800;
  color: rgba(255,255,255,.88);
  margin: 2px 0 10px 2px;
}

.txe-kpi-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.txe-kpi-grid-2{
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 0;
}

.txe-kpi-label{
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: .2px;
}
.txe-kpi-value{
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,255,255,.88);
  line-height: 1.1;
}
.txe-kpi-strong{ color: rgba(255,255,255,.95); }

.txe-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.04);
}
.txe-pill-brand{
  border-color: rgba(46,204,113,.35);
  background: rgba(46,204,113,.12);
  color: rgba(46,204,113,.95);
}
.txe-pill-call{
  border-color: rgba(46,204,113,.35);
  background: rgba(46,204,113,.10);
}
.txe-pill-put{
  border-color: rgba(255,82,82,.35);
  background: rgba(255,82,82,.10);
}
.txe-pill-gray{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.75);
}

/* Title */
.txe-modal-title-wrap{ display:flex; flex-direction:column; gap:6px; }
.txe-modal-title-main{
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}
.txe-modal-title-sub{ display:flex; flex-wrap:wrap; gap:8px; }

/* UW table look */
.txe-uw-wrap{ width: 100%; }
.txe-uw-table{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
}
.txe-uw-table thead th{
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.txe-uw-table tbody td{
  font-size: 13px;
  color: rgba(255,255,255,.85);
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
.txe-uw-table tbody tr:hover td{
  background: rgba(255,255,255,.03);
}

/* =========================================================
   CONTRACT MODAL — FORCE THEME (PUT AT VERY END)
   ========================================================= */

.txe-contract-modal .modal-dialog{
  max-width: 1200px !important;      /* ajustá si querés más ancho */
}

.txe-contract-modal .modal-content{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.55)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.75) !important;
}

.txe-contract-modal .modal-header{
  background: rgba(0,0,0,.35) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.txe-contract-modal .modal-title{
  color: var(--gx-green) !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
}

.txe-contract-modal .modal-body{
  padding: 14px 14px 10px 14px !important;
  color: var(--gx-text) !important;
}

/* Title inside body */
.txe-contract-modal .txe-contract-title-big{
  font-size: 30px !important;
  font-weight: 950 !important;
  color: rgba(255,255,255,.92) !important;
  margin: 2px 2px 12px 2px !important;
}

/* KPI */
.txe-contract-modal .txe-kpi-label{
  font-size: 12px !important;
  font-weight: 750 !important;
  color: rgba(255,255,255,.55) !important;
}

.txe-contract-modal .txe-kpi-val{
  font-size: 18px !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.90) !important;
}

/* Cards for chart/table feel */
.txe-contract-modal .txe-contract-chart-wrap,
.txe-contract-modal .txe-contract-table-wrap{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
}

/* ===== UW TABLE (works with your uw_table helper) ===== */
.txe-contract-modal table.txe-uw-table{
  width: 100% !important;
  border-collapse: collapse !important;
}

.txe-contract-modal .txe-uw-table thead th{
  background: rgba(0,0,0,.55) !important;
  color: rgba(255,255,255,.80) !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  padding: 10px 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.txe-contract-modal .txe-uw-table tbody td{
  padding: 9px 10px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.82) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

.txe-contract-modal .txe-uw-table tbody tr:nth-child(odd) td{
  background: rgba(255,255,255,.02) !important;
}

.txe-contract-modal .txe-uw-table tbody tr:hover td{
  background: rgba(46,204,113,.08) !important;
}
/* ===== Contract modal: NO transparency ===== */
.txe-contract-modal .modal-content{
  background: #0b0b10 !important;   /* sólido */
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 70px rgba(0,0,0,.85) !important;
}

.txe-contract-modal .modal-header,
.txe-contract-modal .modal-body,
.txe-contract-modal .modal-footer{
  background: #0b0b10 !important;   /* sólido */
}
.txe-kpi-grid-bottom{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#txe-contract-close{ display: none !important; }
.vol-oi-pill-green{
  color: #d9ffe9;
  background: rgba(46,204,113,.18);
  border-color: rgba(46,204,113,.45);
}
/* ===== Contract modal title: ticker bold only ===== */
.txe-ct-title{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.txe-ct-title-ticker{
  font-weight: 900;
  color: var(--gx-green);
}

.txe-ct-title-rest{
  font-weight: 700;
  color: rgba(255,255,255,.92);
}

/* Big title uses same inner spans */
.txe-contract-title-big{
  font-size: 34px;
  letter-spacing: .2px;
  margin: 4px 2px 12px 2px;
}
.txe-contract-title-big .txe-ct-title-ticker{ font-weight: 900; }
.txe-contract-title-big .txe-ct-title-rest{ font-weight: 700; }

/* ===== KPI grids: full width, tidy ===== */
.txe-kpi-grid{
  width: 100%;
  display: grid;
  gap: 18px;
  margin: 0 0 10px 0;
}

.txe-kpi-grid-5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.txe-kpi{
  min-width: 0; /* avoid overflow */
}

@media (max-width: 1100px){
  .txe-kpi-grid-5{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ===== Contract modal KPI rows fill full width ===== */
.txe-kpi-grid{
  display: flex !important;
  flex-wrap: wrap;
  gap: 18px;
  width: 100%;
}

.txe-kpi{
  flex: 1 1 180px;     /* ✅ se estira y llena */
  min-width: 160px;
  padding: 6px 2px;
}

/* opcional: para que se vea más “alineado UW” */
.txe-kpi-label{ white-space: nowrap; }
.txe-kpi-val{ white-space: nowrap; }
/* ===== CALL/PUT pill colors ===== */
.txe-pill-call{
  color: var(--gx-green) !important;
  border-color: rgba(46,204,113,.45) !important;
  background: rgba(46,204,113,.12) !important;
}

.txe-pill-put{
  color: var(--gx-red) !important;
  border-color: rgba(255,82,82,.45) !important;
  background: rgba(255,82,82,.12) !important;
}
/* KPI: dejar que OI Δ pinte verde/rojo */
.txe-kpi-val .txe-pos{ color: var(--gx-green) !important; }
.txe-kpi-val .txe-neg{ color: var(--gx-red) !important; }
.txe-kpi-val .txe-dim{ color: var(--gx-text-dim) !important; }
/* =========================================================
   CONTRACT MODAL — DARK SCROLLBAR (FORCED)
   ========================================================= */

/* Chrome / Edge / Safari */
.txe-contract-table-wrap::-webkit-scrollbar,
.txe-contract-modal ::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

.txe-contract-table-wrap::-webkit-scrollbar-track,
.txe-contract-modal ::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
  border-radius: 10px;
}

.txe-contract-table-wrap::-webkit-scrollbar-thumb,
.txe-contract-modal ::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
  border-radius: 10px;
}

.txe-contract-table-wrap::-webkit-scrollbar-thumb:hover,
.txe-contract-modal ::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.35);
}

/* Firefox */
.txe-contract-table-wrap,
.txe-contract-modal{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.30) rgba(255,255,255,.06);
}

/* =========================
   TXE Trend Table (Stage2/Squeeze backups)
   ========================= */

.txe-trend-wrap{
  max-height: 220px;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}

/* dark scrollbar */
.txe-trend-wrap::-webkit-scrollbar{ width: 10px; height: 10px; }
.txe-trend-wrap::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 10px; }
.txe-trend-wrap::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 10px; }
.txe-trend-wrap::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }
.txe-trend-wrap{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06); }

.txe-trend-table{
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 12px;
}

/* sticky header */
.txe-trend-table thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.78);
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-size: 11px;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* cells */
.txe-trend-table td{
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* zebra */
.txe-trend-table tbody tr:nth-child(odd) td{
  background: rgba(255,255,255,.02);
}

/* hover */
.txe-trend-table tbody tr:hover td{
  background: rgba(46,204,113,.08);
}

/* numeric alignment for stage2/squeeze columns */
.txe-trend-table td:nth-child(3),
.txe-trend-table td:nth-child(4){
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* backup + date subtle */
.txe-trend-table td:nth-child(1),
.txe-trend-table td:nth-child(2){
  color: rgba(255,255,255,.80);
}
/* Make the trend table narrow (not full width) */
.txe-trend-narrow{
  width: fit-content;
  max-width: 520px;          /* ajustá: 420 / 520 / 600 */
}

/* center it (optional) */
.txe-trend-narrow{
  margin-left: 0;            /* left aligned */
  /* margin-left:auto; margin-right:auto;  <- si la querés centrada */
}

/* tighten columns */
.txe-trend-table{
  width: auto !important;    /* override 100% */
  min-width: 420px;          /* evita que colapse demasiado */
}

/* numeric alignment stays */
.txe-trend-table td:nth-child(2),
.txe-trend-table td:nth-child(3){
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
/* Trend block wrapper: real width control */
.txe-trend-narrow-wrap{
  display: inline-block;        /* ✅ container fits content */
  width: auto;
  max-width: 520px;             /* ajustá */
}

/* Optional: table wrapper stays tight */
.txe-trend-wrap{
  width: fit-content;
}
/* Stage2/Squeeze: make panel end where table ends */
.txe-trend-panel{
  display: inline-grid;     /* ✅ width = content (table) */
  gap: 6px;
}

/* Header uses same width as table */
.txe-trend-header{
  width: 100%;
}

/* Table wrapper stays narrow */
.txe-trend-wrap{
  width: fit-content;
}
/* =========================
   TXE Trend block (Stage2/Squeeze) — align + same width
   ========================= */

/* hace que TODO el bloque mida “lo que mide la tabla” */
.txe-trend-panel{
  display: inline-block;     /* ✅ no ocupa todo el ancho de la card */
  width: fit-content;
  max-width: 100%;
}

/* header = mismo ancho que la tabla */
.txe-trend-header{
  width: 100%;
}

/* wrapper del body (el rectángulo negro) */
.txe-trend-wrap{
  width: 100%;
}

/* tabla: fija layout y alinea columnas */
.txe-trend-table{
  width: 100%;
  table-layout: fixed;       /* ✅ clave para alinear Stage2/Squeeze */
  border-collapse: collapse;
}

/* headers */
.txe-trend-table th{
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.78);
  padding: 10px 12px;
}

/* data cells */
.txe-trend-table td{
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(255,255,255,.88);
}

/* alignment por columna: Stage2 + Squeeze a la derecha */
.txe-trend-table th:nth-child(2),
.txe-trend-table td:nth-child(2),
.txe-trend-table th:nth-child(3),
.txe-trend-table td:nth-child(3){
  text-align: right;         /* ✅ números alineados */
}
/* wrapper negro del trend block */
.uw-table-scroll{
  padding: 0 !important;   /* ✅ clave */
}
.txe-trend-table th{
  padding: 10px 12px;
}

.txe-trend-table td{
  padding: 10px 12px;
}
/* ===== Stage2/Squeeze trend block: single box only ===== */
.txe-trend-wrap{
  padding: 0 !important;                 /* ✅ tabla toca el borde */
  width: fit-content !important;         /* ✅ ancho al contenido (no full width) */
  max-width: 560px;                      /* ajustá a gusto */
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  overflow: hidden;                      /* ✅ que header/hover no “se salgan” */
}

/* tabla llena el contenedor */
.txe-trend-table{
  width: 100% !important;
  border-collapse: collapse;
}
/* =========================
   Cards — match _card() look
   ========================= */

.txe-card{
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  overflow: hidden;

  /* darker overall card + subtle gradient */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.035),
    rgba(0,0,0,.35)
  ) !important;

  /* heavier shadow, no glow */
  box-shadow: 0 18px 55px rgba(0,0,0,.75) !important;
}

.txe-card .card-header{
  padding: 12px 16px !important;
  font-weight: 450 !important;
  letter-spacing: .3px !important;

  color: var(--gx-green) !important;
  background: rgba(0,0,0,.35) !important;

  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.txe-card .card-body{
  padding: 14px !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(255,255,255,.88) !important;

/* EXPAND pill = same semantics as UP (green + white text) */
.txe-badge-expand{
  background-color: #2ecc71 !important; /* verde */
  color: #ffffff !important;            /* ✅ texto blanco */
  border: 1px solid rgba(255,255,255,.12) !important;
  font-weight: 900 !important;
}
/* =========================================================
   FINANCIALS INNER TABS — Earnings / Cash Flow / Balance (SMALL)
   ========================================================= */

.txe-tabs-fin{
  margin-bottom: 12px;
}

.txe-tabs-fin .nav-tabs{
  border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 6px;
}

/* tab base */
.txe-tabs-fin .nav-link{
  color: rgba(255,255,255,0.65) !important;
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.10) !important;

  border-radius: 999px !important;
  padding: 6px 12px !important;

  font-weight: 800 !important;
  font-size: 13px !important;

  line-height: 1 !important;
  height: 34px !important;

  display: inline-flex !important;
  align-items: center !important;
}

.txe-tabs-fin .nav-link:hover{
  color: rgba(255,255,255,0.9) !important;
  border-color: rgba(46,204,113,.35) !important;
  box-shadow: 0 0 0 2px rgba(46,204,113,.12) !important;
}

.txe-tabs-fin .nav-link.active{
  color: #2ecc71 !important;
  background: rgba(46,204,113,0.12) !important;
  border-color: rgba(46,204,113,.55) !important;

  box-shadow:
    0 0 0 2px rgba(46,204,113,.18),
    0 0 18px rgba(46,204,113,.10) !important;
}

/* remove focus outline */
.txe-tabs-fin .nav-link:focus{
  box-shadow: none !important;
}

.txe-tabs-fin .tab-content{
  padding-top: 10px;
}
/* FINANCIALS INNER TABS — remove bottom divider line */
.txe-tabs-fin .nav-tabs{
  border-bottom: none !important;
}

.txe-tabs-fin .nav-link{
  border-bottom: none !important;
}
/* =========================================================
   Financials tabs — remove bottom separator line
   ========================================================= */

/* mata la línea del contenedor */
.txe-tabs .nav-tabs{
  border-bottom: none !important;
}

/* por si Dash mete un pseudo-elemento */
.txe-tabs .nav-tabs::after{
  display: none !important;
}

/* seguridad extra: ningún tab individual agrega línea */
.txe-tabs .nav-link{
  border-bottom: none !important;
}
/* =========================================================
   FINANCIALS TABS — kill separator line (txe-tabs-fin)
   Put at VERY END of css
   ========================================================= */

.txe-tabs-fin .nav,
.txe-tabs-fin .nav-tabs,
.txe-tabs-fin .nav-pills{
  border-bottom: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* algunas versiones meten una línea en el contenedor del tab-content */
.txe-tabs-fin .tab-content{
  border-top: none !important;
}

/* por si hay pseudo element */
.txe-tabs-fin .nav-tabs::after,
.txe-tabs-fin .nav::after{
  display: none !important;
  content: none !important;
}

/* evita que el active meta “underline” */
.txe-tabs-fin .nav-link,
.txe-tabs-fin .nav-link.active{
  border-bottom: none !important;
}
.txe-tabs-fin{
  border-bottom: none !important;
}
/* SIC text in Ticker Details: light blue, no underline */
.txe-sic-hover{
  cursor: pointer;
  text-decoration: none;
  color: rgba(90, 190, 255, 0.95); /* light blue */
  font-weight: 800;
}

/* Wider popover */
/* Wider popover — FULL hover width fix */
.popover,
.bs-popover-auto,
.bs-popover-right,
.bs-popover-left,
.bs-popover-top,
.bs-popover-bottom{
  max-width: 1000px !important;   /* ancho real completo */
  width: 1000px !important;
  background: rgba(10,10,10,.98) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
}

/* Header same background as body + white title */
/* ✅ Popover width (hover completo) */
.popover{
  max-width: none !important;         /* mata el límite default bootstrap */
  width: 1100px !important;           /* ancho del hover completo */
}

/* ✅ Header: mismo fondo que el interior + título blanco */
.txe-sic-popover-header{
  background: rgba(10,10,10,.98) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* ✅ Body: mismo fondo (uniforme) */
.txe-sic-popover-body{
  background: rgba(10,10,10,.98) !important;
}

/* Body: mismo fondo que header (uniforme) */
.popover .popover-body,
.txe-sic-popover-body{
  background: rgba(10,10,10,.98) !important;
  color: rgba(255,255,255,.90) !important;
  padding: 12px 14px;
}

/* Table inside popover */
.txe-sic-peers-table th,
.txe-sic-peers-table td{
  border-top: 1px solid rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.88);
  padding: 7px 10px !important;
  font-size: 12px;
  white-space: nowrap;
}

.txe-sic-peers-table thead th{
  border-top: none !important;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .35px;
}

.txe-sic-peers-table tbody tr:hover td{
  background: rgba(255,255,255,.04) !important;
}

/* Make sure the Stage2 pill inside table looks centered */
.txe-sic-peers-table td span{
  vertical-align: middle;
}
/* =========================================================
   TXE — SIC Popover HEADER FIX (put at VERY END)
   ========================================================= */

/* 1) Force Bootstrap popover variables (this fixes the white header) */
.popover{
  --bs-popover-bg: rgba(10,10,10,.98) !important;
  --bs-popover-border-color: rgba(255,255,255,.12) !important;

  --bs-popover-header-bg: rgba(10,10,10,.98) !important;      /* ✅ header dark */
  --bs-popover-header-color: #ffffff !important;              /* ✅ header text white */

  --bs-popover-body-color: rgba(255,255,255,.90) !important;
}

/* 2) Extra hard override just in case */
.popover .popover-header,
.popover-header,
.txe-sic-popover-header{
  background-color: rgba(10,10,10,.98) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}