/* ===========================
   Página de Guias (/guias)
   =========================== */

/* Grid principal */
.guides-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  padding: 24px 0;
}

/* Sidebar de índice */
.sidebar {
  position: sticky;
  top: 76px;
  height: fit-content;

  /* fundo/borda herdados do group para evitar conflito com main.css */
  background: transparent;
  border: 0;
  padding: 0;
}

/* Agrupador como <details> */
.side-group {
  overflow: hidden;             /* arredonda conteúdo */
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

/* Cabeçalho do grupo */
.side-group > summary {
  display: flex;
  align-items: center;
  gap: 8px;

  list-style: none;             /* remove marker padrão */
  user-select: none;
  cursor: pointer;

  padding: 10px 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

/* Setinha (disclosure) custom */
.side-group > summary::before {
  content: "▸";
  display: inline-block;
  transform: rotate(0deg);
  transition: transform .2s ease;
}
/* Rotaciona ao abrir */
.side-group[open] > summary::before { transform: rotate(90deg); }

/* Remove o marcador default do summary em Safari/Firefox */
.side-group > summary::-webkit-details-marker { display: none; }

/* Links internos do índice (escopo dentro da sidebar) */
.sidebar .side-item,
.side-group .side-item {
  display: block;
  margin: 4px 8px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-dim);
  text-decoration: none;
}
.sidebar .side-item:hover,
.side-group .side-item:hover {
  background: rgba(148,163,184,.12);
  color: var(--text);
}
.sidebar .side-item.active,
.side-group .side-item.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}

/* Leitor/conteúdo da direita */
.reader {
  min-height: 50vh;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.reader h1, .reader h2, .reader h3 { margin-top: 1.1em; }
.reader pre {
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(148,163,184,.08);
}

/* Limites/fluxo da coluna direita (não “estourar” o grid) */
.main-right {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.main-right > section,
.main-right .card,
.main-right .carousel-wrap,
.main-right .logo-carousel {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Destaques (linhas clicáveis) */
.highlight-row:hover { background: rgba(148,163,184,.10); }

/* ===== Carrossel de logos (escopado à área de guias) ===== */
/* Evita conflito com .carousel-wrap global do main.css */
.main-right .carousel-wrap {
  position: relative;
  overflow: hidden;   /* clipa o translateX */
  width: 100%;
}
.main-right .logo-carousel {
  display: flex;
  gap: 12px;
  padding: 8px 2px;
  will-change: transform;
  transition: transform .4s ease;
  max-width: 100%;
  min-width: 0;
}
.logo-pill {
  flex: 0 0 auto;
  min-width: 120px;
  max-width: 180px;   /* limite opcional */
  padding: 10px 14px;
  text-align: center;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.main-right .carousel-controls {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.main-right .carousel-controls button { cursor: pointer; }

/* ===========================
   Página de Guias – responsivo básico
   =========================== */
@media (max-width: 900px) {
  .guides-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

/* ===========================
   Tip / Info / Warning (blockquote)
   (escopo: apenas dentro do conteúdo de guia)
   =========================== */
.reader blockquote {
  position: relative;
  display: block;

  margin: 1.2rem 0;
  padding: 1rem 1.5rem 1rem 3rem; /* espaço p/ ícone */
  border-left: 4px solid #3b82f6;
  border-radius: 6px;

  line-height: 1.6;
  background: rgba(59, 130, 246, 0.1);
}
/* Ícone base */
.reader blockquote::before {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 1.2rem;
  content: ""; /* definido nas variações */
}
/* Variações */
.reader blockquote.info {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}
.reader blockquote.info::before { content: "ℹ️"; }

.reader blockquote.warning {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}
.reader blockquote.warning::before { content: "⚠️"; }

.reader blockquote.tip {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}
.reader blockquote.tip::before { content: "💡"; }

/* ===========================
   Paleta de tabela (variáveis)
   =========================== */
/* Modo claro */
@media (prefers-color-scheme: light) {
  :root {
    --tbl-bg: #ffffff;
    --tbl-head: #f2f2f2;
    --tbl-border: #d4d4d4;
    --tbl-head-text: #111111;
    --tbl-text: #222222;
    --tbl-zebra: #fafafa;
    --tbl-hover: #f1f5f9;
  }
}
/* Modo escuro */
@media (prefers-color-scheme: dark) {
  :root {
    --tbl-bg: #1e1e1e;
    --tbl-head: #2d2d2d;
    --tbl-border: #3a3a3a;
    --tbl-head-text: #f1f1f1;
    --tbl-text: #e5e5e5;
    --tbl-zebra: #252525;
    --tbl-hover: #333333;
  }
}

/* ===========================
   Tabelas (escopo: área de leitura)
   =========================== */
.reader .table-wrap {
  position: relative;          /* contexto p/ z-index */
  width: 100%;
  margin: 1.5rem 0;
  overflow-x: auto;            /* scroll horizontal mantém */
  overflow-y: visible;         /* tooltips podem “sair” */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.reader .table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  background: var(--tbl-bg, #1e1e1e);
}
/* Cabeçalho */
.reader .table-wrap th {
  text-align: left;
  font-weight: 600;
  padding: .9rem 1rem;
  background: var(--tbl-head, #2d2d2d);
  border: 1px solid var(--tbl-border, #3a3a3a);
  color: var(--tbl-head-text, #f1f1f1);
}
/* Células */
.reader .table-wrap td {
  padding: .9rem 1rem;
  border: 1px solid var(--tbl-border, #3a3a3a);
  color: var(--tbl-text, #e5e5e5);
}
/* Zebra */
.reader .table-wrap tr:nth-child(even) td {
  background: var(--tbl-zebra, #252525);
}
/* Hover */
.reader .table-wrap tr:hover td {
  background: var(--tbl-hover, #333333);
  transition: background .2s ease-in-out;
}

/* ===========================
   Tooltip de termos (escopo: leitor)
   =========================== */
.reader .tooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dashed #555; /* opcional */
}
/* Padrão: abre ACIMA do termo (centralizado) */
.reader .tooltip .tooltiptext {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);

  visibility: hidden;
  opacity: 0;
  transition: opacity .3s;

  width: 220px;
  max-width: 80vw;
  padding: 6px;
  border-radius: 6px;

  background-color: #333;
  color: #fff;
  text-align: center;
  pointer-events: none;       /* evita flicker */
  z-index: 9999;              /* acima da tabela */
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
/* Setinha (acima) */
.reader .tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #333;
}
/* Mostrar no hover */
.reader .tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Flip automático p/ BAIXO nas primeiras linhas da tabela */
.reader .table-wrap tbody tr:nth-child(-n+3) .tooltip .tooltiptext {
  top: calc(100% + 8px);
  bottom: auto;
}
.reader .table-wrap tbody tr:nth-child(-n+3) .tooltip .tooltiptext::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #333;
}

/* Forçar posição via atributo */
.reader .tooltip[data-place="bottom"] .tooltiptext {
  top: calc(100% + 8px);
  bottom: auto;
}
.reader .tooltip[data-place="bottom"] .tooltiptext::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #333;
}