/*
 * 2.8.701 — correção final de centralização/contraste dos ícones no drawer mobile.
 *
 * Causa corrigida: regras históricas de frontend.css usam `span:not(...)` com
 * !important e especificidade suficiente para vencer parte do componente
 * universal, fazendo o span do ícone voltar a `display:block` e herdando texto
 * escuro mesmo quando o item estava ativo sobre fundo azul.
 *
 * Esta camada é intencionalmente pequena, carregada por último e limitada a
 * <= 768px. Não altera markup, ações, rotas, estado ativo, dados ou regras de
 * negócio. Os seletores com filho direto igualam/superam a especificidade
 * histórica sem atingir spans de outros componentes.
 */
@media (max-width: 768px) {
    .mas-member-mobile-tab-option,
    .mas-member-mobile-tab-option.is-active {
        align-items: center !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
    }

    .mas-member-mobile-tab-option.mas-member-external-nav-item,
    .mas-member-mobile-tab-option.mas-member-external-nav-item.is-active {
        grid-template-columns: 30px minmax(0, 1fr) auto !important;
    }

    .mas-member-mobile-tab-option > span.mas-member-mobile-tab-option-icon,
    .mas-member-mobile-tab-option.is-active > span.mas-member-mobile-tab-option-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        justify-self: center !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #0f172a !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        font-variant-emoji: text !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        text-indent: 0 !important;
        vertical-align: middle !important;
    }

    .mas-member-mobile-tab-option.is-active > span.mas-member-mobile-tab-option-icon {
        background: rgba(255, 255, 255, .14) !important;
        color: #ffffff !important;
    }

    .mas-member-mobile-tab-option > span.mas-member-mobile-tab-option-icon > .mas-member-mobile-tab-option-icon-svg,
    .mas-member-mobile-tab-option.is-active > span.mas-member-mobile-tab-option-icon > .mas-member-mobile-tab-option-icon-svg {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        color: inherit !important;
        fill: none !important;
        stroke: currentColor !important;
    }

    .mas-member-mobile-tab-option > span.mas-member-mobile-tab-option-copy,
    .mas-member-mobile-tab-option.is-active > span.mas-member-mobile-tab-option-copy {
        display: grid !important;
        align-self: center !important;
        gap: 2px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-right: 0 !important;
        color: #334155 !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        letter-spacing: 0 !important;
    }

    .mas-member-mobile-tab-option.is-active > span.mas-member-mobile-tab-option-copy {
        color: #ffffff !important;
    }

    .mas-member-mobile-tab-option > span.mas-member-mobile-tab-option-copy > strong,
    .mas-member-mobile-tab-option.is-active > span.mas-member-mobile-tab-option-copy > strong {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-right: 0 !important;
        color: #0f172a !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    .mas-member-mobile-tab-option.is-active > span.mas-member-mobile-tab-option-copy > strong {
        color: #ffffff !important;
    }

    .mas-member-mobile-tab-option > span.mas-member-mobile-tab-option-copy > small,
    .mas-member-mobile-tab-option.is-active > span.mas-member-mobile-tab-option-copy > small {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-right: 0 !important;
        color: #64748b !important;
        font-size: 11.5px !important;
        font-weight: 650 !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
    }

    .mas-member-mobile-tab-option.is-active > span.mas-member-mobile-tab-option-copy > small {
        color: rgba(255, 255, 255, .90) !important;
    }
}

@media (max-width: 480px) {
    .mas-member-mobile-tab-option.mas-member-external-nav-item,
    .mas-member-mobile-tab-option.mas-member-external-nav-item.is-active {
        grid-template-columns: 28px minmax(0, 1fr) minmax(54px, auto) !important;
    }

    .mas-member-mobile-tab-option.mas-member-external-nav-item > span.mas-member-mobile-tab-option-icon,
    .mas-member-mobile-tab-option.mas-member-external-nav-item.is-active > span.mas-member-mobile-tab-option-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
}