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

/* padres de la tabla */
.market_table .card-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.table-container {
  flex: 1;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto; 
}

/*  */
.financial-table {
  width: max-content;   /* 👈 clave */
  min-width: 100%;      
  border-collapse: separate;
  border-spacing: 0;           /* para no romper el diseño */
  font-size: 14px;
  font-family: 'IBM Plex Mono', monospace;
}

.financial-table th {
  background: var(--bg);
  color: #e6e6e6;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}

/* sticky header */
.financial-table thead th {
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 20;
}
.financial-table thead th:first-child { /* intersección (top-left corner) */
  position: sticky;
  top: 0;
  left: 0;          
  z-index: 40;      
}

.financial-table thead th:first-child { background: var(--bg);}

/* celdas */
.financial-table td {
  text-align: right;
  white-space: nowrap;
}

.financial-table th,
.financial-table td {
    text-align: left;
    padding: 10px 12px;
    vertical-align: middle;
}

/* filas */
.financial-table tbody tr {
  --row-bg: var(--surface);
  --row-bg-solid: var(--surface);
}

.financial-table tbody tr:nth-child(even) {
  --row-bg: var(--surface-2);
  --row-bg-solid: var(--surface-2);
}

/* hover */
.financial-table tbody tr:hover {
  --row-bg: var(--accent-dim);
  --row-bg-solid: var(--surface-2); 
}

/* celdas normales */
.financial-table tbody td {
  background: var(--row-bg);
}

/* sticky SIEMPRE usa fondo sólido */
.financial-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 10;

  background: var(--row-bg-solid); /* 👈 separado */
}

/* Separadores verticales suaves */
.financial-table td + td,
.financial-table th + th {
  border-left: 1px solid rgba(255,255,255,0.05);
}

.sortable::after {
  content: " ⇅";
  font-size: 10px;
  opacity: 0.6;
}

.sortable.asc::after { content: " ↑"; }
.sortable.desc::after { content: " ↓"; }