/* ── Grid de cards do hub (compartilhado: hub.html + analista.html) ── */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 460px;
  margin: 0 auto;
}

/* Grupo de planilhas (links externos) */
.hub-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hub-section-label {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hub-section-label::before,
.hub-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.hub-grid--planilhas {
  grid-template-columns: repeat(2, 1fr);
  max-width: 300px;
}

.hub-grid--analista {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 760px;
  align-items: stretch;
}

.hub-grid--analista .hub-card {
  aspect-ratio: auto;
  min-height: 168px;
}

.hub-grid--analista .hub-card-icon svg {
  width: 38px;
  height: 38px;
}

.hub-grid--analista .hub-card-title {
  font-size: 10px;
  line-height: 1.35;
}

.hub-grid--analista .hub-card-desc {
  overflow: visible;
  font-size: 9px;
}

@media (max-width: 480px) {
  .hub-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  .hub-grid { grid-template-columns: 1fr; }
}

.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  aspect-ratio: 1 / 1;
  padding: 16px 14px 14px;
  gap: 8px;
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg) 100%);
  border: none;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 2px 4px rgba(0,0,0,0.26),
    0 10px 20px rgba(0,0,0,0.28);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.22s;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .hub-card {
    background: linear-gradient(160deg, var(--panel) 0%, var(--panel2) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      0 2px 4px rgba(40,28,18,0.08),
      0 10px 20px rgba(40,28,18,0.12);
  }
}
:root[data-theme="light"] .hub-card {
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 4px rgba(40,28,18,0.08),
    0 10px 20px rgba(40,28,18,0.12);
}

.hub-card:hover,
.hub-card:focus-visible {
  outline: none;
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 3px 6px rgba(0,0,0,0.30),
    0 14px 26px rgba(0,0,0,0.34),
    0 18px 34px rgba(204,120,92,0.12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .hub-card:hover,
  :root:not([data-theme]) .hub-card:focus-visible {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.6),
      0 3px 6px rgba(40,28,18,0.10),
      0 14px 26px rgba(40,28,18,0.14),
      0 18px 34px rgba(182,95,63,0.10);
  }
}
:root[data-theme="light"] .hub-card:hover,
:root[data-theme="light"] .hub-card:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 3px 6px rgba(40,28,18,0.10),
    0 14px 26px rgba(40,28,18,0.14),
    0 18px 34px rgba(182,95,63,0.10);
}

/* Top tag (número discreto, alinhado à esquerda) */
.hub-card-num {
  align-self: flex-start;
  font-size: 9px;
  color: var(--accent);
  background: rgba(204,120,92,0.1);
  border: 1px solid rgba(204,120,92,0.22);
  padding: 1px 6px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.hub-card-badge {
  position: absolute;
  top: 13px;
  right: 12px;
  max-width: calc(100% - 62px);
  padding: 2px 6px;
  border: 1px solid rgba(224,185,92,0.28);
  border-radius: 2px;
  background: rgba(224,185,92,0.09);
  color: var(--text-dim);
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.hub-card-badge--danger {
  border-color: rgba(220,53,69,0.35);
  background: rgba(220,53,69,0.12);
  color: #dc3545;
}

/* Indicador de link externo (canto superior direito) */
.hub-card-ext {
  position: absolute;
  top: 11px;
  right: 11px;
  font-size: 12px;
  line-height: 1;
  color: var(--text-dim);
  transition: color 0.18s, transform 0.18s;
}
.hub-card:hover .hub-card-ext,
.hub-card:focus-visible .hub-card-ext {
  color: var(--accent);
  transform: translate(1px, -1px);
}

/* Ícone centralizado */
.hub-card-icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent2);
  transition: color 0.18s, transform 0.2s;
}
.hub-card-icon svg {
  width: 44px;
  height: 44px;
  display: block;
}
.hub-card:hover .hub-card-icon,
.hub-card:focus-visible .hub-card-icon {
  color: var(--accent);
  transform: scale(1.05);
}

/* Rodapé: título + subtítulo, separador sutil */
.hub-card-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.hub-card-title {
  font-size: 10px;
  color: var(--text);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.hub-card-desc {
  font-size: 8.5px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
  line-height: 1.3;
}