/* =========================================================

   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;

}



/* =========================

   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;

}

/* =========================================================

   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;

}

/* Prevent Safari / Keychain weird label focus */
.txe-wrap .card-header {
  pointer-events: none;
}