/* ═══════════════════════════════════════════════════
   PINGO — folha de estilos global
   Paleta:
     #173148  azul marinho escuro   topo das telas
     #0F6971  teal                  botões de ação
     #92A5B3  cinza                 fundo das telas
     #ffffff  branco                texto no topo
   ═══════════════════════════════════════════════════ */

/* ── Fundo geral ────────────────────────────────── */
body, .mud-main-content {
    background-color: #92A5B3 !important;
    padding: 0 !important;
    margin: 0;
}


/* ── Altura mínima do conteúdo ──────────────────── */
/* Garante que o card nunca fique pequeno demais quando há poucos elementos.
   O seletor "+" captura o div de conteúdo imediatamente após o cabeçalho escuro.
   100svh = "small viewport height": desconta a barra de endereços do celular.
   120px cobre: header (~50px) + margens do MudContainer (~70px). */
.pingo-header + div {
    min-height: calc(100vh - 120px);   /* fallback para navegadores mais antigos */
    min-height: calc(100svh - 120px);  /* mobile-aware: desconta a barra do browser */
}

/* ── Barra de topo escura ───────────────────────── */
.pingo-header {
    background-color: #173148;
    padding: 10px 20px;
}

/* Todos os ícones dentro do topo ficam brancos */
.pingo-header .mud-icon-root {
    color: #ffffff !important;
}

/* Texto (MudText, h6, etc.) dentro do topo fica branco */
.pingo-header .mud-typography {
    color: #ffffff !important;
}

/* Label dos botões (MudButton Variant=Text) dentro do topo */
.pingo-header .mud-button-label {
    color: #ffffff !important;
}

/* Hover suave no ícone dentro do topo */
.pingo-header .mud-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

/* ── Card-botões do menu principal ──────────────── */
/* O MudButton envolve o conteúdo em um elemento .mud-button-label.
   Aqui fazemos esse elemento virar coluna para empilhar ícone e texto. */
.card-opcao .mud-button-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 4px;
}

/* ── Tagline animada (Login) ────────────────────── */
/* fade-in: opacidade 0→1 em 0.6s */
@keyframes tagline-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0);   }
}
/* fade-out: opacidade 1→0 em 0.6s */
@keyframes tagline-out {
    from { opacity: 1; transform: translateY(0);   }
    to   { opacity: 0; transform: translateY(-4px); }
}
.tagline-in  { animation: tagline-in  0.6s ease forwards; }
.tagline-out { animation: tagline-out 0.6s ease forwards; }

/* ── Abas da tela de login (Login / Criar conta) ── */
/* Oculta os botões de rolagem < > que o MudBlazor renderiza
   quando as abas não cabem horizontalmente. */
.pingo-tabs-full .mud-tab-slider-prev,
.pingo-tabs-full .mud-tab-slider-next {
    display: none !important;
}
/* Força o container interno a ocupar toda a largura disponível
   (sem os botões de rolagem, o espaço é totalmente das abas). */
.pingo-tabs-full .mud-tabs-tabbar-inner {
    width: 100% !important;
}
/* Cada aba cresce igualmente e divide os 50% do espaço. */
.pingo-tabs-full .mud-tab {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* ── Popover do menu hamburguer ─────────────────── */
.pingo-menu {
    background-color: #E1DFD7;
    min-width: 180px;
}
.pingo-menu .mud-list-item-text span {
    color: #2e2e2e;
    font-size: 0.85rem;
}
.pingo-menu .mud-list-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
}