/* A barra da área de membros (markup em casca.js). Tudo em px de propósito: o "Aa" do Vocab
   aumenta a letra da página inteira (rem) e não pode mexer na barra. */

.casca {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(120deg, #E26B2D, #C9281C);
  color: #FFF3E9;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  font: 600 14px/1 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
.casca-in {
  max-width: 1240px; margin: 0 auto; box-sizing: border-box;
  height: 56px; padding: 0 16px;
  display: flex; align-items: center; gap: 8px;
}
.casca a { text-decoration: none; }
.casca-logo { display: inline-flex; align-items: center; height: 30px; color: #FFF3E9; flex-shrink: 0; --logo-accent: #2A1812; }
.casca-logo svg { height: 30px; width: auto; display: block; }

.casca-nav { display: flex; gap: 4px; margin-left: 16px; align-items: center; min-width: 0; }
.casca-nav a {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 999px;
  color: rgba(255,243,233,.82); font: 600 14px/1 Inter, system-ui, sans-serif; white-space: nowrap;
  transition: background .15s, color .15s;
}
.casca-nav a:hover { color: #fff; background: rgba(255,255,255,.1); }
.casca-nav a.on { color: #fff; background: rgba(255,255,255,.2); }
.casca-nav svg { width: 18px; height: 18px; flex: 0 0 auto; }

.casca-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.casca-btn {
  height: 36px; min-width: 36px; padding: 0 12px; border-radius: 999px; box-sizing: border-box;
  border: 1px solid rgba(255,243,233,.4); background: transparent; color: #FFF3E9;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
.casca-btn:hover { border-color: #fff; color: #fff; }
.casca-btn.on { background: rgba(255,255,255,.2); border-color: #fff; }
.casca-btn[data-casca="tema"] { padding: 0; width: 36px; }
.casca-btn svg { width: 18px; height: 18px; }
.casca-avatar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.22); color: #fff; font: 700 15px/1 Inter, sans-serif; cursor: pointer; }

.casca-conta { position: relative; }
.casca-menu {
  position: absolute; right: 0; top: 44px; min-width: 230px; z-index: 60;
  background: var(--surface, #181D26); border: 1px solid var(--border-medium, #3A4252); border-radius: 10px;
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4); color: var(--text-primary, #F5EFE3);
}
.casca-menu[hidden] { display: none; }
.casca-menu small { padding: 8px 10px; font: 400 12px/1.4 Inter, sans-serif; color: var(--text-muted, #6B7280); word-break: break-all; }
.casca-menu a, .casca-menu button {
  padding: 10px; border-radius: 6px; font: 500 14px/1.2 Inter, sans-serif; color: inherit;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.casca-menu a:hover, .casca-menu button:hover { background: var(--card, #232934); }

/* segunda linha, só dentro de uma ferramenta: as abas dela (no Vocab: Hoy, Progreso, Consulta, Práctica).
   Fica por cima da faixa flutuante da Consulta (z-index 4 no Vocab), que se esconde atrás dela. */
.casca-sub {
  position: relative; z-index: 45;
  background: var(--surface, #181D26);
  border-bottom: 1px solid var(--border-subtle, #2A3140);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.35);
}
.casca-sub-in {
  max-width: 1240px; margin: 0 auto; box-sizing: border-box; height: 48px; padding: 0 16px;
  display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.casca-sub-in::-webkit-scrollbar { display: none; }
.casca-sub button, .casca-sub a {
  appearance: none; border: 0; background: transparent; cursor: pointer; box-sizing: border-box;
  color: var(--text-secondary, #B8B4A8); font: 600 14px/1 Inter, system-ui, sans-serif;
  height: 36px; padding: 0 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.casca-sub button i { font-size: 18px; }
.casca-sub button:hover { color: var(--text-primary, #F5EFE3); }
.casca-sub button.on { color: var(--orange, #E26B2D); background: color-mix(in srgb, var(--orange, #E26B2D) 15%, transparent); }
.casca-sub .direita { margin-left: auto; display: flex; gap: 4px; }

@media (max-width: 760px) {
  .casca-in { padding: 0 12px; gap: 6px; }
  .casca-nav { margin-left: 6px; gap: 2px; }
  .casca-nav a { padding: 0 10px; }
  .casca-nav a span { display: none; }
  .casca-nav a.on span { display: inline; }
  .casca-btn span { display: none; }
  .casca-btn { padding: 0; width: 36px; }
  .casca-sub-in { padding: 0 12px; }
}
@media (max-width: 420px) {
  .casca-logo svg { height: 24px; }
  .casca-nav a.on span { display: none; }
  .casca-nav a { padding: 0 9px; }
}