/* UXM-002 (fila #168): cabeçalho no celular e no tablet.
   Marca visível quando o menu lateral está recolhido e alvos de toque de 44 px.
   No computador (acima de 1024 px) nada muda. */

.header-brand-mobile,
.breadcrumb-more-btn {
    display: none;
}

/* No computador o agrupador não existe para o layout: os botões seguem na barra. */
.breadcrumb-more-panel {
    display: contents;
}

/* Mantém a ordem de sempre na barra: histórico, liga, doação, QR. */
.breadcrumb-more-panel > .breadcrumb-history-dropdown,
.breadcrumb-actions-group > .breadcrumb-cdv-home-btn,
.breadcrumb-actions-group > .breadcrumb-league-btn {
    order: -1;
}

@media (max-width: 1024px) {
    .header-actions-no-breadcrumb {
        padding-left: 62px !important; /* botão do menu fixo: 44 px + margens */
    }

    /* O botão "Voltar" ficava escondido atrás do botão do menu (medido em 390x844). */
    .rival-header .rival-breadcrumbs {
        padding-left: 62px;
    }

    .header-brand-mobile {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px;
        min-width: 0;
        flex: 1 1 auto;
        margin-right: auto;
        color: var(--color-text-primary);
        text-decoration: none;
    }

    .header-brand-mobile:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: 8px;
    }

    .header-brand-mobile-logo {
        width: 28px;
        height: 28px;
        object-fit: contain;
        flex-shrink: 0;
    }

    /* Nome em até duas linhas: cabe inteiro em 390 px sem empurrar os botões. */
    .header-brand-mobile-name {
        min-width: 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        line-height: 1.15;
        font-weight: 800;
        font-size: 0.8rem;
        letter-spacing: 0.02em;
    }
}

@media (max-width: 768px) {
    .rival-header .breadcrumb-back-btn,
    .rival-header .breadcrumb-home-btn,
    .rival-header .breadcrumb-history-btn,
    .rival-header .breadcrumb-league-btn,
    .rival-header .breadcrumb-donation-btn,
    .rival-header .breadcrumb-qr-btn,
    .rival-header .breadcrumb-cdv-home-btn,
    .rival-header .breadcrumb-more-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    .rival-header .breadcrumb-league-btn {
        width: auto;
        padding: 0 0.35rem;
    }

    .rival-header .breadcrumb-back-btn:hover,
    .rival-header .breadcrumb-home-btn:hover,
    .rival-header .breadcrumb-history-btn:hover,
    .rival-header .breadcrumb-league-btn:hover,
    .rival-header .breadcrumb-donation-btn:hover,
    .rival-header .breadcrumb-qr-btn:hover {
        transform: none; /* sem salto ao tocar */
    }

    .header-actions-no-breadcrumb {
        gap: 0.35rem !important;
        padding-right: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .header-brand-mobile-name {
        font-size: 0.72rem;
    }

    /* A barra deixa de recortar para o painel "Mais ações" poder abrir abaixo dela. */
    .rival-header .rival-breadcrumbs {
        overflow: visible;
        position: relative;
    }

    .rival-header .rival-breadcrumbs ol {
        flex-wrap: nowrap;
    }

    /* O botão "Início" já está na barra: a trilha mostra só a página atual. */
    .rival-header .rival-breadcrumbs ol li:not(:last-child) {
        display: none;
    }

    .rival-header .rival-breadcrumbs ol li {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .breadcrumb-more-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(var(--color-accent-rgb), 0.2);
        color: var(--color-accent);
        border-radius: 8px;
        cursor: pointer;
        order: 2;
    }

    .breadcrumb-more-btn[aria-expanded="true"] {
        background: rgba(var(--color-accent-rgb), 0.15);
        border-color: var(--color-accent);
    }

    .breadcrumb-more-panel {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0.5rem;
        z-index: 1040;
        gap: 0.5rem;
        padding: 0.5rem;
        background: rgba(21, 21, 26, 0.98);
        border: 1px solid rgba(var(--color-accent-rgb), 0.3);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }

    .breadcrumb-more-panel.is-open {
        display: flex;
    }

    .breadcrumb-more-panel > .breadcrumb-history-dropdown {
        order: 0;
        position: static; /* a lista do histórico alinha pelo painel e não sai da tela */
    }

    .breadcrumb-more-panel .breadcrumb-history-menu {
        top: calc(100% + 6px);
        right: 0;
        left: auto;
        min-width: 0;
        width: min(372px, calc(100vw - 1rem));
        max-height: 70vh;
        overflow-y: auto;
    }

    .breadcrumb-more-panel .history-clear-btn {
        min-width: 44px;
        min-height: 44px;
    }
}