/* widget-mercado.css */

/* ---- TABS ---- */
.tabs-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tab-btn {
  padding: 0.5rem 0.85rem;
  border-radius: 0.75rem;
  background: #f2f6f9;
  color: #00313d;
  font-weight: 600;
  border: 1px solid #d6e0ea;
  transition: 0.15s;
}
.tab-btn:hover {
  background: #e9f0f6;
}
.tab-btn.active {
  background: #a2c617;
  color: #00313d;
  border-color: #a2c617;
  box-shadow: 0 0 0 2px rgba(162, 198, 23, 0.25) inset;
}

/* ---- TABLE WRAPPER ---- */
.tbl-wrap {
  width: 100%;
  overflow: auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}
table.market {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 820px;
}
.market thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f5f9;
  color: #00313d;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.55rem;
  border-bottom: 1px solid #e2e8f0;
}
.market tbody tr {
  border-bottom: 1px solid #eef2f6;
}
.market tbody tr:hover {
  background: #f8fafc;
}
.market td {
  padding: 0.45rem 0.55rem;
  font-size: 0.92rem;
  line-height: 1.18;
}

.sym {
  font-weight: 700;
  color: #00313d;
}
.name {
  font-size: 0.8rem;
  color: #4b5563;
}
.last-val {
  color: #00313d;
  font-weight: 700;
}
.val {
  color: #00313d;
}
.pct-up {
  color: #a2c617;
  font-weight: 700;
}
.pct-dn {
  color: #ef4444;
  font-weight: 700;
}
.muted {
  color: #64748b;
}

/* ---- PAGINAÇÃO (namespaced p/ não colidir) ---- */
.market-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.market-pager button {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #00313d;
  border-radius: 0.5rem;
  padding: 0.35rem 0.6rem;
}
.market-pager button:hover {
  background: #f1f5f9;
}
.market-pager button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.market-pager .current {
  background: #a2c617;
  border-color: #a2c617;
  color: #00313d;
}
.market-pager .ellipsis {
  padding: 0 0.4rem;
  color: #94a3b8;
}

/* ---- OVERLAY + DRAWER ---- */
.overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  display: none;
  z-index: 40;
}
.overlay.show {
  display: block;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 680px;
  height: 100vh;
  background: #ffffff;
  color: #00313d;
  border-left: 1px solid #e2e8f0;
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
}
.drawer.show {
  transform: translateX(0);
}
.drawer-header {
  position: sticky;
  top: 0;
  background: #ffffff;
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
  z-index: 1;
}
.drawer-body {
  overflow: auto;
  padding: 1rem;
}
#popupChart {
  min-height: 150px;
  height: 210px;
}
.desc {
  white-space: pre-wrap;
  line-height: 1.35;
  color: #334155;
}

/* ---- MINI RESULT ---- */
.mini-result {
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #ffffff;
}
.mini-result thead th {
  background: #f1f5f9;
  color: #00313d;
  font-size: 0.78rem;
  padding: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}
.mini-result td {
  padding: 0.5rem;
  line-height: 1.18;
  color: #00313d;
}
.tab-btn[data-tab="CONSULTA"] {
  /* Opção 1: Aumentar o espaçamento interno (padding). */
  padding-left: 1.6rem;  /* Espaço à esquerda do texto/ícone */
  padding-right: 1.6rem; /* Espaço à direita do texto/ícone */

  /* Opção 2: Forçar uma largura mínima (alternativa). */
  /* min-width: 160px; */
}

/* =================================== */
/* ==== ESTILOS PARA VERSÃO MOBILE ==== */
/* (Telas com até 768px de largura) */
/* =================================== */
@media (max-width: 768px) {
  /* 1. Abas/Filtros com rolagem horizontal */
  .tabs-wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .tabs-wrap::-webkit-scrollbar {
    display: none;
  }

  /* 2. Remove a rolagem e o fundo do container da tabela */
  .tbl-wrap {
    overflow: visible;
    border: none;
    background: none;
  }

  /* 3. Transforma a tabela em layout de cards */
  table.market {
    min-width: 100%;
  }
  .market thead {
    display: none;
  }
  .market tbody tr {
    display: block;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  /* A primeira célula (Ativo) se comporta como o título do card */
  .market td:first-child {
    padding: 0 0 0.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0.5rem;
  }

  /* Oculta o nome da empresa */
  .market .name {
    display: none;
  }

  /* Aumenta o destaque do Ticker */
  .market .sym {
    font-size: 1.1rem;
  }

  /* Move a célula "Último" para o topo, ao lado do Ticker */
  .market td:nth-child(2) {
    display: inline;
    padding: 0;
    font-size: 1.1rem;
  }

  /* As demais células (Var. Dia e Volume) viram linhas de detalhes */
  .market td {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.95rem;
    border-bottom: none;
    text-align: right;
  }
  .market td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #4b5563;
    text-align: left;
  }
  .market td:nth-child(1)::before,
  .market td:nth-child(2)::before {
    content: "";
  }
  .market td:nth-child(3)::before {
    content: "Var. Dia";
  }
  .market td:nth-child(4)::before {
    content: "Volume";
  }

  /* Ajusta o painel lateral (drawer) */
  .drawer {
    max-width: 92vw;
  }
}