/* =====================================================================
   c-modern.css  —  Camada de modernização visual (REDE MATCHFIT)
   ---------------------------------------------------------------------
   Objetivo: dar aspecto moderno e fluido ao portal SEM trocar o
   framework (Bootstrap 3 / Metronic). Carregada POR ÚLTIMO em
   StyleSheetUsc.ascx, sobrescrevendo apenas os componentes-chave do
   fluxo de login e das telas iniciais (academia e aluno).

   Consome as variáveis já existentes em :root (StyleSheetUsc) e
   adiciona tokens de marca + raio + sombra + transição.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS DE MARCA  (verde + preto + magenta)
   --------------------------------------------------------------------- */
:root {
    /* Marca */
    --brand-green: var(--theme-color, #00B242);
    --brand-green-soft: rgba(0, 178, 66, 0.14);
    --brand-magenta: #E6007E;
    --brand-magenta-soft: rgba(230, 0, 126, 0.16);
    --brand-ink: #06120B;            /* preto esverdeado de fundo  */
    --brand-surface: var(--theme-tile-backcolor, #0B1A12);

    /* Sistema de design */
    --m-radius: 14px;
    --m-radius-lg: 20px;
    --m-radius-pill: 999px;
    --m-gap: 16px;
    --m-shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.28);
    --m-shadow-glow: 0 0 0 1px var(--brand-green),
                     0 8px 28px rgba(0,178,66,.28);
    --m-shadow-glow-magenta: 0 0 0 1px var(--brand-magenta),
                     0 8px 28px rgba(230,0,126,.28);
    --m-ease: cubic-bezier(.22,.61,.36,1);
    --m-dur: .22s;
}

/* ---------------------------------------------------------------------
   2. TRANSIÇÕES GLOBAIS — origem do "fluido" que falta hoje
   --------------------------------------------------------------------- */
a,
.c-btn,
.tile-theme,
.frame-theme,
.link-report,
.notifybutton-theme-menu,
.subtitle-text,
.popup-image-close,
.modal-content {
    transition: color var(--m-dur) var(--m-ease),
                background-color var(--m-dur) var(--m-ease),
                border-color var(--m-dur) var(--m-ease),
                box-shadow var(--m-dur) var(--m-ease),
                transform var(--m-dur) var(--m-ease);
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------
   3. TILES (cards do painel)  — núcleo da modernização
   ---------------------------------------------------------------------
   Problemas resolvidos:
   - hover trocava border 1px->3px (causava "pulo"). Agora usamos
     box-shadow + transform, sem reflow.
   - largura fixa 359px -> largura fluida (o grid .center-content
     vira flex-wrap com largura responsiva).
   - adiciona profundidade, raio e faixa de marca lateral.
   --------------------------------------------------------------------- */
.center-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--m-gap);
    max-width: 1180px;
    margin: 0 auto;
    padding: 6px 10px;
}

/* O <a> que envolve cada tile não deve esticar; o tile controla o tamanho */
.center-content > a { display: contents; }

.tile-theme {
    /* reset do legado */
    float: none !important;
    width: clamp(280px, 30%, 360px) !important;
    height: auto !important;
    min-height: 116px;
    margin: 0 !important;
    border: 1px solid color-mix(in srgb, var(--brand-green) 35%, transparent) !important;
    border-radius: var(--m-radius) !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--brand-green) 7%, transparent),
            transparent 60%),
        var(--brand-surface) !important;
    box-shadow: var(--m-shadow-1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 18px 18px 20px !important;
}

/* faixa de marca à esquerda */
.tile-theme::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--brand-green), var(--brand-magenta));
    opacity: .9;
    transform: scaleY(.55);
    transform-origin: center;
    transition: transform var(--m-dur) var(--m-ease);
}

.tile-theme:hover,
.center-content > a:focus-visible .tile-theme {
    border-color: var(--brand-green) !important;
    box-shadow: var(--m-shadow-glow);
    transform: translateY(-3px);
}
.tile-theme:hover::before { transform: scaleY(1); }

/* ícone do tile */
.tile-theme .c-icon-wrapper { margin: 0 0 4px 0 !important; }
.tile-theme .c-icon-wrapper img {
    margin: 0 !important;
    width: 46px !important; height: 46px !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
    transition: transform var(--m-dur) var(--m-ease);
}
.tile-theme:hover .c-icon-wrapper img { transform: scale(1.06); }

.tile-theme .c-title,
.tile-theme h3.c-title {
    font-size: 18px !important;
    letter-spacing: .02em;
    margin: 8px 0 2px 0 !important;
    line-height: 1.15;
}
.tile-theme p {
    opacity: .72;
    font-size: 13px !important;
    margin: 0 !important;
}

/* ---------------------------------------------------------------------
   4. BARRA DE SUBTÍTULO ("PAINEL / AQUI")
   ---------------------------------------------------------------------
   Remove os margins negativos frágeis, dá respiro e cantos suaves.
   --------------------------------------------------------------------- */
.c-layout-breadcrumbs-1 {
    height: auto !important;
    min-height: 48px;
    display: flex;
    align-items: center;
    border-radius: var(--m-radius) !important;
    background:
        linear-gradient(90deg,
            var(--brand-green-soft),
            transparent 65%),
        var(--brand-surface);
    border: 1px solid color-mix(in srgb, var(--brand-green) 22%, transparent);
    padding: 6px 4px;
}
.c-layout-breadcrumbs-1 .container { width: 100%; }
.subtitle-title-position {
    margin-top: 0 !important;
    width: auto !important;
}
.subtitle-title {
    font-size: 18px !important;
    letter-spacing: .04em;
}
.subtitle-link-position { margin-top: 0 !important; }
.subtitle-separator,
.subtitle-text { opacity: .65; }
.subtitle-text:hover {
    color: var(--brand-green) !important;
    opacity: 1;
}

.subtitle-shell {
    position: relative;
    z-index: 1;
    padding: 15px 5px 0;
}

/* Com o cabeçalho compacto, painéis sem subtítulo ficam corretos com 40px.
   Páginas internas que possuem SubTitleUsc precisam de uma pequena folga
   adicional para a faixa nunca encostar nem entrar sob a barra fixa. */
@media (max-width: 991px) {
    .subtitle-shell {
        margin-top: 12px !important;
    }
}

.subtitle-shell .subtitle-title-position {
    position: static !important;
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
}

.subtitle-shell .subtitle-title {
    margin: 0 0 4px !important;
    line-height: 1.25 !important;
}

.subtitle-shell .c-page-breadcrumbs {
    float: none !important;
    clear: both;
    margin: 0 !important;
}

/* ---------------------------------------------------------------------
   4b. PAINEL DO ALUNO — destaques (hero) + títulos de grupo
   --------------------------------------------------------------------- */
/* Linha de destaques: Treino + Check-in lado a lado, inclusive no celular */
.hero-content {
    gap: 12px;
}
.hero-content > .tile-link { display: block; flex: 1 1 0; min-width: 0; max-width: none; }

.tile-hero {
    width: 100% !important;
    min-height: 150px !important;
    padding: 18px !important;
    border: none !important;
    color: #fff;
}
.tile-hero::before { display: none; }
.tile-hero .c-title { font-size: 20px !important; }
.tile-hero p { opacity: .9 !important; color: #fff !important; }
.tile-hero .c-icon-wrapper img {
    width: 42px !important; height: 42px !important;
    padding: 8px;
    background: rgba(255,255,255,.16);
    border-radius: 11px;
}

.tile-hero-primary {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--brand-green) 85%, transparent),
        color-mix(in srgb, var(--brand-green) 45%, transparent) 70%),
        var(--brand-surface) !important;
    box-shadow: 0 6px 22px rgba(0,178,66,.30);
}
.tile-hero-primary:hover { box-shadow: 0 12px 30px rgba(0,178,66,.42); transform: translateY(-3px); }

.tile-hero-secondary {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--brand-magenta) 60%, transparent),
        color-mix(in srgb, var(--brand-magenta) 30%, transparent) 70%),
        var(--brand-surface) !important;
    box-shadow: 0 6px 22px rgba(230,0,126,.28);
}
.tile-hero-secondary:hover { box-shadow: 0 12px 30px rgba(230,0,126,.40); transform: translateY(-3px); }

/* Títulos de grupo: menores e mais discretos que os títulos de seção antigos */
.group-title { padding-top: 26px; }
.group-title h3 {
    font-size: 14px !important;
    letter-spacing: .14em;
    opacity: .92;
}

/* ---------------------------------------------------------------------
   5. ATALHOS SUGERIDOS (link-report) — viram "chips" modernos
   --------------------------------------------------------------------- */
.link-report {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: none !important;
    border: 1px solid color-mix(in srgb, var(--brand-green) 45%, transparent) !important;
    border-radius: var(--m-radius-pill) !important;
    padding: 9px 18px !important;
    font-size: 15px !important;
    background: var(--brand-green-soft);
    margin: 6px 8px 6px 0 !important;
}
.link-report:hover {
    background: var(--brand-green);
    color: #04150B !important;
    border-color: var(--brand-green) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,178,66,.32);
}
.link-report:hover i { color: #04150B !important; }

/* Opções das páginas de relatório: cards uniformes em uma grade responsiva. */
.report-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    padding: 8px 0;
}

.report-grid .link-report {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 82px;
    margin: 0 !important;
    padding: 16px 42px 16px 16px !important;
    border: 1px solid rgba(0, 178, 66, .32) !important;
    border-radius: 12px !important;
    background: rgba(4, 21, 11, .72);
    color: #f2f7f4 !important;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    transition: background-color .18s ease, border-color .18s ease,
        box-shadow .18s ease, transform .18s ease;
}

.report-grid .link-report i {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0, 178, 66, .13);
    color: var(--brand-green) !important;
    font-size: 17px;
}

.report-grid .link-report label {
    min-width: 0;
    margin: 0;
    color: inherit !important;
    font-weight: inherit;
    line-height: inherit;
}

.report-grid .link-report::after {
    content: "\f105";
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-green);
    font-family: FontAwesome;
    font-size: 18px;
}

.report-grid .link-report:hover,
.report-grid .link-report:focus {
    background: rgba(0, 178, 66, .12);
    color: #fff !important;
    border-color: var(--brand-green) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 178, 66, .20);
    text-decoration: none;
}

.report-grid .link-report:hover i,
.report-grid .link-report:focus i {
    background: var(--brand-green);
    color: #04150B !important;
}

.report-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 178, 66, .22);
}

.report-actions .buttons-theme {
    float: none;
    margin: 0;
}

.report-output-field {
    display: inline-flex;
    align-items: center;
    margin: 0;
    vertical-align: middle;
}

.report-output-control {
    position: relative;
    width: 190px;
}

.report-format-mobile {
    display: none;
}

.report-format-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.report-format-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #f2f7f4;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.report-format-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.report-format-check {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border: 2px solid var(--brand-green);
    border-radius: 50%;
    background: rgba(0, 178, 66, .04);
}

.report-format-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-green);
    opacity: 0;
}

.report-format-option input:checked + .report-format-check {
    background: rgba(0, 178, 66, .10);
    box-shadow: 0 0 0 3px rgba(0, 178, 66, .12);
}

.report-format-option input:checked + .report-format-check::after {
    opacity: 1;
}

.report-format-option input:focus-visible + .report-format-check {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.report-actions #divSintetico {
    display: flex;
    align-items: center;
}

.report-actions #divSintetico .c-checkbox {
    float: none !important;
    margin: 0 !important;
}

.report-actions #divSintetico .c-checkbox label {
    min-height: 24px;
    margin: 0;
    padding-left: 32px;
    color: #f2f7f4;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 24px;
}

.report-param-grid {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 14px 12px;
    width: 100%;
}

.report-param-field {
    min-width: 0;
}

.report-param-field > .form-group {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.report-param-period {
    flex: 0 0 312px;
}

.report-param-period .g3-between-table {
    width: 100%;
    table-layout: fixed;
}

.report-param-period .g3-between-cell {
    width: 140px;
}

.report-param-period .g3-between-textbox input.form-control {
    box-sizing: border-box;
    width: 140px !important;
}

.report-param-period .g3-between-separator {
    width: 32px;
    padding: 0 !important;
    text-align: center;
}

.report-param-date {
    flex: 0 0 150px;
}

.report-param-month {
    display: flex;
    flex: 1 1 310px;
    gap: 12px;
}

.report-param-month > .form-group {
    flex: 1 1 0;
}

.report-param-filter {
    flex: 1 1 260px;
}

.report-param-filter input.form-control {
    width: 100% !important;
}

.report-param-company {
    flex: 1 1 0;
    min-width: 220px;
}

.report-param-company .g3-combobox,
.report-param-company .g3-select {
    width: 100% !important;
}

.report-actions #divSintetico .c-checkbox label > .inc {
    display: none;
}

.report-actions #divSintetico .c-checkbox label > .box {
    top: 0;
    width: 24px;
    height: 24px;
    border: 2px solid var(--brand-green);
    border-radius: 8px !important;
    background: rgba(0, 178, 66, .04);
    z-index: 1 !important;
    transition: background-color .16s ease, box-shadow .16s ease;
}

.report-actions #divSintetico .c-checkbox label > .check {
    top: 3px;
    left: 8px;
    width: 7px;
    height: 13px;
    border: 2px solid #04150b;
    border-top: 0;
    border-left: 0;
    z-index: 2 !important;
    transition: none;
}

.report-actions #divSintetico .c-checkbox input:checked ~ label > .box {
    opacity: 1;
    background: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(0, 178, 66, .12);
    transform: none;
}

.report-actions #divSintetico .c-checkbox input:checked ~ label > .check {
    opacity: 1;
    transform: rotate(45deg);
}

.report-output-select {
    width: 100%;
    height: 42px;
    padding: 0 40px 0 15px;
    border: 1px solid var(--brand-green);
    border-radius: 12px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background: #06180d;
    color: #f2f7f4;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.report-output-select:hover,
.report-output-select:focus {
    box-shadow: 0 0 0 3px rgba(0, 178, 66, .14);
}

.report-output-select option {
    background: #06180d;
    color: #f2f7f4;
}

.report-output-arrow {
    position: absolute;
    top: 50%;
    right: 17px;
    width: 9px;
    height: 9px;
    border-right: 2px solid #dce7e0;
    border-bottom: 2px solid #dce7e0;
    pointer-events: none;
    transform: translateY(-70%) rotate(45deg);
}

@media (max-width: 639px) {
    .report-output-field {
        display: inline-flex;
        align-items: center;
        width: auto;
        margin: 0;
    }

    .report-output-control {
        width: 180px;
    }

    .report-format-desktop {
        display: none;
    }

    .report-format-mobile {
        display: block;
    }

    .report-param-grid {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .report-param-period,
    .report-param-date,
    .report-param-month,
    .report-param-filter,
    .report-param-company {
        flex: 0 0 auto;
        width: 100%;
    }

    .report-param-period .g3-between-cell {
        width: auto;
    }

    .report-param-period .g3-between-textbox input.form-control {
        width: 100% !important;
    }

    .report-param-company {
        min-width: 0;
    }

    .report-actions {
        margin-top: 16px;
        padding-top: 14px;
    }
}

.report-grid .link-report:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 1199px) {
    .report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .report-grid {
        grid-template-columns: 1fr;
    }

    .report-grid .link-report {
        min-height: 72px;
    }
}

/* títulos de seção: linha central com gradiente da marca */
.c-line-center.c-theme-bg {
    background: linear-gradient(90deg, var(--brand-green), var(--brand-magenta)) !important;
    height: 4px;
    border-radius: 2px;
    width: 56px;
}

/* ---------------------------------------------------------------------
   6. BOTÕES REDONDOS DO HEADER  (home / sino / agenda / etc.)
   --------------------------------------------------------------------- */
.notifybutton-theme-menu.circle-small {
    width: 44px !important;
    height: 44px !important;
    margin-top: 10px !important;
    padding: 9px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--brand-green) 30%, transparent);
    background: rgba(255,255,255,.03);
}
.notifybutton-theme-menu.circle-small:hover {
    border-color: var(--brand-green);
    background: var(--brand-green-soft);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,178,66,.30);
}

/* ---------------------------------------------------------------------
   7. MODAIS  — cartão de vidro, sem cantos duros
   Regra aplicada a .modal-content de forma global (não mais restrita a
   .c-content-login-form) para padronizar todos os popups do Portal —
   antes, .modal-content sem essa classe (div-help, div-empresa,
   div-pesquisa, PopupUsc) ficava só com o .c-border-rounded genérico
   (7px, sem gradiente/borda), visivelmente diferente dos modais de
   login/notificação. Só existem 5 arquivos com .modal-content em todo
   o Portal (HelpUsc, PopupUsc, HeaderUsc, LoginUsc, TreinoPge/div-carga),
   nenhum em WebForms/Academia — mudança de baixo risco/escopo contido.
   --------------------------------------------------------------------- */
.modal-content {
    border-radius: var(--m-radius-lg) !important;
    border: 1px solid color-mix(in srgb, var(--brand-green) 24%, transparent) !important;
    background:
        radial-gradient(120% 80% at 0% 0%, var(--brand-green-soft), transparent 55%),
        radial-gradient(120% 80% at 100% 100%, var(--brand-magenta-soft), transparent 55%),
        var(--brand-surface) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.55) !important;
}
.c-content-login-form .modal-content h3 {
    letter-spacing: .01em;
}
.c-content-login-form .modal-dialog {
    width: 460px;
    max-width: calc(100% - 24px);
}
/* o "Escolha seu Perfil" usa tiles dentro do modal: empilha bonito */
#profile-form .modal-body .tile-theme {
    width: 100% !important;
    margin: 8px 0 !important;
}

/* tabelas internas dos modais de login: viram blocos fluidos no mobile */
@media (max-width: 540px) {
    .c-content-login-form .modal-body table,
    .c-content-login-form .modal-body tbody,
    .c-content-login-form .modal-body tr,
    .c-content-login-form .modal-body td {
        display: block;
        width: 100% !important;
    }
    .c-content-login-form .modal-body td { padding: 4px 0; }
}

/* botão primário padrão do app (.c-btn dentro de login) */
.c-content-login-form .c-btn {
    border-radius: var(--m-radius-pill) !important;
}

/* ---------------------------------------------------------------------
   8. CAMPOS DE TEXTO  — foco com anel de marca
   --------------------------------------------------------------------- */
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.combobox-input,
.g3-between-textbox input.form-control,
.g3-combobox select.form-control,
.g3-select-button {
    border-radius: 10px !important;
    transition: border-color var(--m-dur) var(--m-ease),
                box-shadow var(--m-dur) var(--m-ease);
}
.form-group input:focus {
    outline: none !important;
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 3px var(--brand-green-soft) !important;
}

/* ---------------------------------------------------------------------
   9. NAV INFERIOR MOBILE (footer-app) — barra moderna com aba ativa
   --------------------------------------------------------------------- */
@media (max-width: 1024px),
       (hover: none) and (pointer: coarse) and (max-width: 1366px) {

    .mf-painel-greeting-wrap {
        margin-top: -15px !important;
    }

    .footer-app {
        position: fixed;
        left: 12px; right: 12px; bottom: 12px;
        background: rgba(8, 20, 13, 0.86);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid color-mix(in srgb, var(--brand-green) 28%, transparent);
        border-radius: var(--m-radius-lg);
        box-shadow: 0 10px 30px rgba(0,0,0,.45);
        padding: 6px 4px;
        z-index: 50;
    }
    .footer-app table { width: 100%; }
    .footer-app td { text-align: center; padding: 4px 0; }
    .footer-app .footer-tab {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        width: 100%;
        padding: 8px 0;
        border-radius: 12px;
        font-size: 11px;
        color: rgba(255,255,255,.78);
    }
    .footer-app .footer-tab i {
        font-size: 22px;
        color: rgba(255,255,255,.9);
        transition: transform var(--m-dur) var(--m-ease),
                    color var(--m-dur) var(--m-ease);
    }
    .footer-app .footer-tab span { line-height: 1; }
    .footer-app .footer-tab:hover i,
    .footer-app .footer-tab.is-active i {
        color: var(--brand-green) !important;
        transform: translateY(-2px);
    }
    .footer-app .footer-tab.is-active {
        color: #fff;
        background: var(--brand-green-soft);
    }
    /* dá respiro pro conteúdo não ficar atrás da barra fixa */
    .c-layout-page-container { padding-bottom: 96px; }
}

/* Área do professor e editores de prescrição */
body.mf-academia-view .mf-professor-cards .tile-hero {
    min-height: 218px;
}

body.mf-academia-view .mf-professional-workspace {
    --mf-professional-accent: #00d45a;
}

body.mf-academia-view .mf-field-guidance,
body.mf-academia-view .mf-choice-guidance {
    clear: both;
    margin: 0 0 18px;
    padding: 11px 14px;
    border: 1px solid rgba(0,212,90,.18);
    border-radius: 9px;
    color: rgba(255,255,255,.72);
    background: rgba(0,212,90,.055);
    font-size: 12px;
    line-height: 1.55;
}

body.mf-academia-view .mf-field-guidance {
    padding: 7px 11px;
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
}

body.mf-academia-view .mf-picture-group {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
    padding-top: 10px;
}

body.mf-academia-view .mf-picture-group-title {
    flex: 0 0 100%;
    color: rgba(255,255,255,.82);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.mf-academia-view .mf-picture-group .picturebox {
    float: none !important;
    margin: 0 !important;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
}

body.mf-academia-view .mf-picture-primary {
    border-color: rgba(0,212,90,.30) !important;
}

body.mf-academia-view .mf-picture-frame {
    opacity: .78;
}

body.mf-academia-view .mf-picture-help {
    flex: 0 0 100%;
    margin-bottom: 0;
}

body.mf-academia-view .mf-student-summary {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(320px, 1.3fr);
    gap: 22px;
    align-items: center;
}

body.mf-academia-view .mf-student-identity {
    margin: 0;
}

body.mf-academia-view .mf-student-identity-table {
    width: 100%;
}

body.mf-academia-view .mf-student-avatar {
    object-fit: cover;
    border: 3px solid rgba(0,212,90,.40);
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

body.mf-academia-view .mf-student-first-data {
    padding-left: 14px;
}

body.mf-academia-view .mf-student-statuses {
    padding-top: 16px;
}

body.mf-academia-view .mf-status-chip {
    display: inline-block;
    margin: 3px 5px 3px 0;
    padding: 6px 10px !important;
    border-radius: 999px !important;
}

body.mf-academia-view .mf-validity-calculator {
    float: left;
}

body.mf-academia-view .mf-validity-action {
    padding-top: 15px;
}

body.mf-academia-view .mf-prescription-actions {
    margin-left: 0;
}

@media (max-width: 767px) {
    body.mf-academia-view .mf-student-summary {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.mf-academia-view .mf-picture-group .picturebox {
        flex: 1 1 120px;
    }

    body.mf-academia-view .mf-validity-calculator {
        float: none;
        width: 100%;
    }
}

/* =====================================================================
   MATCHFIT PORTAL V2 — header e barra inferior iniciais
   ---------------------------------------------------------------------
   Objetivo: modernização visual inicial sem alterar fluxo WebForms.
   Mantém preto, verde e magenta como identidade principal.
   ===================================================================== */

/* HEADER V2 */
.c-layout-header,
.c-layout-header .c-navbar,
.c-layout-header .c-navbar-wrapper,
.c-layout-header .c-header-container {
    min-height: 82px !important;
}

.c-layout-header {
    background: rgba(0, 0, 0, .96) !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 8px 26px rgba(0,0,0,.36);
    z-index: 9998 !important;
}

/* O header desktop e fixo e mede 82px. O tema legado reservava apenas
   65px no inicio da pagina, fazendo o subtitulo ficar sob a barra. */
@media (min-width: 992px) {
    body.c-layout-header-fixed .mf-page-shell {
        padding-top: 98px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    body.c-layout-header-fixed .mf-page-shell {
        padding-top: 40px !important;
    }
}

.c-layout-header .c-navbar {
    background: transparent !important;
}

.c-layout-header .c-header-container {
    width: 100% !important;
    max-width: 1180px;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

.mf-header-shell {
    min-height: 82px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mf-header-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
}

.mf-header-logo {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 20%, rgba(0,178,66,.18), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,.40);
    overflow: hidden;
}

.mf-header-logo img,
.c-brand-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    display: block;
}

.mf-header-title-group {
    min-width: 0;
    line-height: 1.16;
}

.mf-header-title,
.title-app {
    display: block;
    margin: 0 !important;
    color: #fff !important;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: .9px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mf-header-context,
.title-app-context {
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    margin: 5px 0 0 0 !important;
    color: var(--brand-green) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mf-header-context a,
.mf-header-context span,
.mf-header-context label,
.mf-header-context .link-context,
.title-app-context a,
.title-app-context span,
.title-app-context label,
.title-app-context .link-context {
    color: var(--brand-green) !important;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.mf-header-search {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    margin-top: 17px !important;
}

.mf-header-search .mf-header-search-input {
    float: none !important;
    margin-right: 0 !important;
}

.mf-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.mf-header-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mf-header-action .menu-round-button,
.mf-header-action a,
.mf-header-action input,
.mf-header-action img {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.mf-header-action .menu-round-button,
.mf-header-action a {
    border-radius: 999px !important;
}

.mf-header-action img {
    filter: none;
}

.mf-header-action:hover .menu-round-button,
.mf-header-action:hover a,
.mf-header-action:hover img {
    transform: translateY(-1px);
}

.mf-header-action-notify.has-notification:after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-magenta);
    box-shadow: 0 0 0 3px rgba(230,0,126,.18);
}

/* PopupUsc: toda a superfície do botão de fechar recebe clique/toque.
   A imagem é apenas visual e não deve ser o alvo interativo. */
.modal-header .popup-close-button {
    display: inline-flex !important;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin-top: -8px !important;
    margin-right: -8px;
    padding: 6px !important;
    border: 0;
    border-radius: 50%;
    background: transparent;
    opacity: 1 !important;
    touch-action: manipulation;
}

.modal-header .popup-close-button > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.modal-header .popup-close-button .popup-image-close {
    display: block;
    width: 32px !important;
    height: 32px !important;
    pointer-events: none;
}

.c-brand-logo,
.c-left-menu,
.c-right-menu {
    margin: 0 !important;
    float: none !important;
}

.c-mega-menu,
.c-mega-menu .nav,
.c-mega-menu .nav > li,
.c-mega-menu .c-btn-forgot {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 991px) {
    .c-layout-header,
    .c-layout-header .c-navbar,
    .c-layout-header .c-navbar-wrapper,
    .c-layout-header .c-header-container,
    .mf-header-shell {
        min-height: 74px !important;
    }

    .c-layout-header .c-header-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .mf-header-shell {
        gap: 8px;
    }

    .mf-header-brand {
        gap: 10px;
        max-width: calc(100% - 120px);
    }

    .mf-header-logo {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 12px;
    }

    .mf-header-title,
    .title-app {
        font-size: 16px !important;
        max-width: 205px;
    }

    .mf-header-context a,
    .mf-header-context span,
    .mf-header-context label,
    .mf-header-context .link-context,
    .title-app-context a,
    .title-app-context span,
    .title-app-context label,
    .title-app-context .link-context {
        font-size: 18px !important;
        max-width: 205px;
    }

    .mf-header-actions {
        gap: 8px;
    }

    .mf-header-action .menu-round-button,
    .mf-header-action img {
        max-width: 46px !important;
        max-height: 46px !important;
    }

    .title-placard {
        display: none !important;
        visibility: hidden !important;
    }
}

@media (max-width: 360px) {
    .mf-header-title,
    .title-app {
        font-size: 14px !important;
        max-width: 170px;
    }

    .mf-header-context a,
    .mf-header-context span,
    .mf-header-context label,
    .mf-header-context .link-context,
    .title-app-context a,
    .title-app-context span,
    .title-app-context label,
    .title-app-context .link-context {
        font-size: 16px !important;
        max-width: 170px;
    }

    .mf-header-logo {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }
}

/* BARRA INFERIOR V2 */
.footer-mobile {
    background: transparent !important;
    height: 0 !important;
    z-index: 9999 !important;
}

.footer-app {
    display: none;
}

.mf-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

.mf-bottom-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 58px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(255,255,255,.72) !important;
    text-decoration: none !important;
    font-family: Oswald, Arial, sans-serif;
    letter-spacing: .35px;
    transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.mf-bottom-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
}

.mf-bottom-label {
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    opacity: .78;
}

.mf-bottom-item:hover,
.mf-bottom-item:focus,
.mf-bottom-item.is-active {
    color: #fff !important;
    background: rgba(0,178,66,.16);
    transform: translateY(-1px);
}

.mf-bottom-item.is-active:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    width: 26px;
    height: 4px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--brand-magenta), var(--brand-green));
    box-shadow: 0 0 16px rgba(230,0,126,.35);
}

.mf-bottom-item.is-active .mf-bottom-icon {
    color: var(--brand-green) !important;
}

@media (max-width: 1024px),
       (hover: none) and (pointer: coarse) and (max-width: 1366px) {
    .footer-app {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        display: block !important;
        width: auto !important;
        padding: 8px !important;
        background: linear-gradient(180deg, rgba(11, 42, 25, .96), rgba(7, 28, 17, .96)) !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 24px !important;
        box-shadow: 0 18px 44px rgba(0,0,0,.58), 0 0 0 1px rgba(0,178,66,.12) inset !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        z-index: 10000 !important;
        text-align: center;
        font-size: initial !important;
    }

    .footer-app:before {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        top: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0,178,66,.75), rgba(230,0,126,.45), transparent);
    }

    .footer-app table {
        display: none !important;
    }

    .c-layout-page-container {
        padding-top: 40px !important;
        padding-bottom: 102px !important;
    }
}

@media (min-width: 1025px) and (hover: hover) {
    .footer-app {
        display: none !important;
    }

    .footer-version {
        display: none !important;
    }
}


/* =====================================================================
   MATCHFIT PORTAL V2.1 — ajustes iniciais solicitados
   ---------------------------------------------------------------------
   - Barra superior mais compacta e coerente no mobile.
   - Barra de título/breadcrumb mais moderna.
   - Cards hero com texto melhor distribuído.
   - Ícones dos cards com moldura arredondada.
   - Cards inferiores: 1 card destaque em largura completa + demais em 2 colunas.
   ===================================================================== */

/* Barra superior: manter a versão compacta também nos tablets/PCs estreitos,
   evitando que os botões comprimam os textos ao lado da marca. */
@media (max-width: 991px) {
    .c-layout-header,
    .c-layout-header .c-navbar,
    .c-layout-header .c-navbar-wrapper,
    .c-layout-header .c-header-container,
    .mf-header-shell {
        min-height: 70px !important;
    }

    .c-layout-header {
        background: linear-gradient(180deg, rgba(0,0,0,.98), rgba(0,0,0,.92)) !important;
        border-bottom: 1px solid rgba(255,255,255,.16) !important;
        box-shadow: 0 10px 28px rgba(0,0,0,.46) !important;
    }

    .mf-header-shell {
        padding: 7px 0 !important;
    }

    .mf-header-brand {
        max-width: calc(100% - 112px) !important;
        gap: 10px !important;
    }

    .mf-header-logo {
        width: 46px !important;
        height: 46px !important;
        flex-basis: 46px !important;
        border-radius: 12px !important;
    }

    .mf-header-title,
    .title-app {
        font-size: 14px !important;
        letter-spacing: .7px !important;
        max-width: 185px !important;
        opacity: .96 !important;
    }

    .mf-header-context a,
    .mf-header-context span,
    .mf-header-context label,
    .mf-header-context .link-context,
    .title-app-context a,
    .title-app-context span,
    .title-app-context label,
    .title-app-context .link-context {
        font-size: 16px !important;
        max-width: 185px !important;
        letter-spacing: .35px !important;
    }

    /* No mobile, deixa só ações essenciais no topo. O restante fica na barra inferior. */
    .mf-header-action.menu-round-pc,
    .mf-header-action.menu-round-mobile.menu-round-280-greater {
        display: none !important;
    }

    .mf-header-actions {
        gap: 8px !important;
    }

    .mf-header-action .menu-round-button,
    .mf-header-action a,
    .mf-header-action img {
        max-width: 42px !important;
        max-height: 42px !important;
    }
}

/* Barra de título / breadcrumb */
.c-layout-breadcrumbs-1 {
    margin: 10px 10px 12px 10px !important;
    min-height: 58px !important;
    border-radius: 16px !important;
    padding: 10px 14px !important;
    background:
        linear-gradient(135deg, rgba(0,178,66,.20), rgba(230,0,126,.06) 52%, rgba(0,0,0,.12)),
        rgba(4, 25, 13, .96) !important;
    border: 1px solid rgba(0,178,66,.28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.24) !important;
}

.c-layout-breadcrumbs-1 .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.subtitle-title {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
}

.subtitle-text,
.subtitle-separator {
    color: rgba(255,255,255,.58) !important;
    font-size: 13px !important;
    letter-spacing: .04em !important;
}

/* Breadcrumb compartilhado: os destinos anteriores são chips discretos;
   o item atual permanece texto para não sugerir uma ação inexistente. */
.subtitle-shell .c-page-breadcrumbs {
    display: flex !important;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    white-space: nowrap;
}

.subtitle-shell .c-page-breadcrumbs::-webkit-scrollbar {
    display: none;
}

.subtitle-shell .c-page-breadcrumbs > li {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 !important;
}

.subtitle-shell .subtitle-link {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid rgba(0, 212, 90, .25);
    border-radius: 9px;
    background: rgba(0, 212, 90, .06);
    text-decoration: none !important;
}

.subtitle-shell .c-page-breadcrumbs > li:first-child .subtitle-link::before {
    content: "\f015";
    margin-right: 6px;
    color: #00d45a;
    font-family: FontAwesome;
    font-size: 12px;
}

.subtitle-shell .subtitle-link:hover,
.subtitle-shell .subtitle-link:focus-visible {
    border-color: rgba(0, 212, 90, .62);
    background: rgba(0, 212, 90, .14);
    box-shadow: 0 0 0 2px rgba(0, 212, 90, .10);
    outline: none;
}

.subtitle-shell .subtitle-link:hover .subtitle-text,
.subtitle-shell .subtitle-link:focus-visible .subtitle-text {
    color: #fff !important;
    opacity: 1;
}

.subtitle-shell .subtitle-separator {
    color: rgba(255,255,255,.38) !important;
    font-size: 15px !important;
}

.subtitle-shell .subtitle-current {
    color: rgba(255,255,255,.62);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

@media (max-width: 767px) {
    .subtitle-shell .c-page-breadcrumbs {
        gap: 4px;
        padding-bottom: 2px;
    }

    .subtitle-shell .subtitle-link {
        min-height: 25px;
        padding: 3px 7px;
        border-radius: 8px;
    }

    .subtitle-shell .subtitle-text,
    .subtitle-shell .subtitle-current {
        font-size: 11px !important;
    }
}

/* Tiles: âncora volta a controlar largura para permitir grid real */
.center-content > a.tile-link,
.center-content > .tile-link {
    display: flex !important;
    text-decoration: none !important;
    min-width: 0;
}

.center-content:not(.hero-content) > a.tile-link,
.center-content:not(.hero-content) > .tile-link {
    flex: 1 1 clamp(280px, 31%, 360px);
    max-width: 360px;
}

.tile-theme {
    width: 100% !important;
}

/* Ícones dos cards: contorno arredondado e padrão visual único */
.tile-theme .c-icon-wrapper,
.tile-theme .tile-icon {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.06) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.20) !important;
    overflow: hidden !important;
}

.tile-theme .c-icon-wrapper img,
.tile-theme .tile-icon img {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
}

/* Cards principais: texto alinhado e sem aparência espremida */
.hero-content {
    align-items: stretch !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.hero-content > a.tile-link,
.hero-content > .tile-link {
    flex: 1 1 calc(50% - 6px) !important;
    max-width: none !important;
}

/* No desktop os cards de destaque (Cockpit/Gestão) devem ter o mesmo
   tamanho dos demais cards da página; no mobile mantém 50%/50%. */
@media (min-width: 768px) {
    .hero-content > a.tile-link,
    .hero-content > .tile-link {
        flex: 1 1 clamp(280px, 31%, 360px) !important;
        max-width: 360px !important;
    }
}

.tile-hero {
    min-height: 184px !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    text-align: left !important;
    padding: 18px !important;
}

.tile-hero .c-title,
.tile-hero h3.c-title {
    width: 100% !important;
    margin: 14px 0 8px 0 !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1.12 !important;
    text-align: left !important;
}

.tile-hero p {
    width: 100% !important;
    max-width: 140px !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-align: left !important;
}

.tile-hero:after,
.center-content:not(.hero-content) .tile-theme:after {
    content: "\f105";
    font-family: FontAwesome;
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.10);
}

/* Cards inferiores: modo lista/destaque no desktop estreito e mobile */
@media (max-width: 767px) {
    .center-content {
        gap: 12px !important;
        justify-content: flex-start !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .center-content:not(.hero-content) > a.tile-link,
    .center-content:not(.hero-content) > .tile-link {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
    }

    .center-content:not(.hero-content) > a.tile-link:nth-child(1),
    .center-content:not(.hero-content) > .tile-link:nth-child(1) {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    .center-content:not(.hero-content) .tile-theme {
        min-height: 142px !important;
        padding: 16px 14px 48px 16px !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        border-radius: 16px !important;
    }

    .center-content:not(.hero-content) > a.tile-link:nth-child(1) .tile-theme,
    .center-content:not(.hero-content) > .tile-link:nth-child(1) .tile-theme {
        min-height: 118px !important;
        padding-left: 88px !important;
        justify-content: center !important;
    }

    .center-content:not(.hero-content) > a.tile-link:nth-child(1) .tile-theme .c-icon-wrapper,
    .center-content:not(.hero-content) > .tile-link:nth-child(1) .tile-theme .c-icon-wrapper {
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .center-content:not(.hero-content) .tile-theme .c-title,
    .center-content:not(.hero-content) .tile-theme h3.c-title {
        font-size: 15px !important;
        line-height: 1.15 !important;
        margin: 12px 0 6px 0 !important;
        text-align: left !important;
    }

    .center-content:not(.hero-content) .tile-theme p {
        font-size: 12px !important;
        line-height: 1.30 !important;
        opacity: .76 !important;
        text-align: left !important;
    }

    .center-content:not(.hero-content) > a.tile-link:nth-child(1) .tile-theme .c-title,
    .center-content:not(.hero-content) > .tile-link:nth-child(1) .tile-theme .c-title,
    .center-content:not(.hero-content) > a.tile-link:nth-child(1) .tile-theme h3.c-title,
    .center-content:not(.hero-content) > .tile-link:nth-child(1) .tile-theme h3.c-title {
        font-size: 18px !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 360px) {
    .center-content:not(.hero-content) > a.tile-link,
    .center-content:not(.hero-content) > .tile-link {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

/* Barra inferior: ícones sólidos compatíveis e acabamento mais premium */
.mf-bottom-icon i {
    font-size: 23px !important;
}

.mf-bottom-item.is-active {
    background: linear-gradient(180deg, rgba(0,178,66,.23), rgba(0,178,66,.10)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,178,66,.12) !important;
}


/* =====================================================================
   MATCHFIT PORTAL V2.2 — ajustes solicitados após validação visual
   ---------------------------------------------------------------------
   - Header com hierarquia correta: REDE MATCHFIT / Área do Aluno|Academia.
   - Ícones do topo mais limpos e modernos, sem excesso de círculos.
   - Cards com título e descrição sempre alinhados à esquerda.
   - Remoção visual dos atalhos sugeridos do painel do aluno.
   ===================================================================== */

/* HEADER: marca em cima, área abaixo */
.mf-header-title-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.mf-header-context {
    order: 1 !important;
    margin: 0 0 3px 0 !important;
    line-height: 1 !important;
}

.mf-header-title {
    order: 2 !important;
    line-height: 1.05 !important;
}

.mf-header-context a,
.mf-header-context span,
.mf-header-context label,
.mf-header-context .link-context,
.title-app-context a,
.title-app-context span,
.title-app-context label,
.title-app-context .link-context {
    color: var(--brand-green) !important;
    font-family: "Roboto Condensed", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .9px !important;
    text-transform: uppercase !important;
    opacity: .95 !important;
}

.mf-header-title,
.title-app {
    color: #fff !important;
    font-family: "Roboto Condensed", sans-serif !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    letter-spacing: .6px !important;
    text-transform: none !important;
}

/* Header actions: visual de botão premium, sem círculo pesado. */
.mf-header-actions {
    gap: 8px !important;
}

.mf-header-action {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.22) !important;
    overflow: visible !important;
}

.mf-header-action:hover,
.mf-header-action:focus-within {
    background: rgba(0,178,66,.12) !important;
    border-color: rgba(0,178,66,.45) !important;
    transform: translateY(-1px) !important;
}

.mf-header-action .notifybutton-theme-menu.circle-small,
.mf-header-action .menu-round-button,
.mf-header-action a {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mf-header-action img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain !important;
    opacity: .96 !important;
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,.30)) !important;
}

/* Troca visual por ícones FontAwesome modernos, preservando os controles WebForms. */
.mf-header-action-bell img,
.mf-header-action-help img,
.mf-header-action-user img,
.mf-header-action-login img,
.mf-header-action-profile img {
    opacity: 0 !important;
}

.mf-header-action-bell:before,
.mf-header-action-help:before,
.mf-header-action-user:before,
.mf-header-action-login:before,
.mf-header-action-profile:before {
    font-family: FontAwesome !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
}

.mf-header-action-bell:before { content: "\f0f3"; }
.mf-header-action-help:before { content: "\f128"; } /* fa-question: interrogação, mesmo padrão de glifo do sino (fa-bell) */
.mf-header-action-user:before { content: "\f007"; }
.mf-header-action-login:before { content: "\f090"; }
.mf-header-action-profile:before { content: "\f0c0"; }

.mf-header-action-notify.has-notification:after {
    top: -4px !important;
    right: -3px !important;
    width: 9px !important;
    height: 9px !important;
    background: var(--brand-magenta) !important;
    box-shadow: 0 0 0 3px rgba(230,0,126,.20), 0 0 14px rgba(230,0,126,.45) !important;
}

/* PAINEL ALUNO: remove atalhos redundantes e aproxima os cards do topo. */
.mf-welcome-block p,
.aluno-atalhos {
    display: none !important;
}

.c-body-aluno {
    padding-bottom: 0 !important;
}

.c-body-aluno .c-content-title-3 h3 {
    margin-bottom: 0 !important;
}

/* CARDS: força fluxo vertical e elimina descrição recuada à direita. */
.tile-theme,
.tile-hero,
.center-content:not(.hero-content) .tile-theme {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.tile-theme .c-icon-wrapper,
.tile-theme .tile-icon {
    flex: 0 0 auto !important;
    margin: 0 0 16px 0 !important;
}

.tile-theme .c-title,
.tile-theme h3.c-title,
.tile-hero .c-title,
.tile-hero h3.c-title,
.center-content:not(.hero-content) .tile-theme .c-title,
.center-content:not(.hero-content) .tile-theme h3.c-title {
    display: block !important;
    width: 100% !important;
    max-width: calc(100% - 8px) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    text-align: left !important;
    align-self: stretch !important;
    white-space: normal !important;
}

.tile-theme p,
.tile-hero p,
.center-content:not(.hero-content) .tile-theme p {
    display: block !important;
    width: 100% !important;
    max-width: calc(100% - 10px) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    align-self: stretch !important;
    white-space: normal !important;
}

.tile-hero {
    min-height: 186px !important;
    padding: 18px 16px 50px 18px !important;
}

.tile-hero .c-title,
.tile-hero h3.c-title {
    font-size: 18px !important;
    line-height: 1.15 !important;
}

.tile-hero p {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* Cards comuns: descrição embaixo do título, seta sempre isolada no canto. */
.center-content:not(.hero-content) .tile-theme {
    padding: 16px 14px 50px 16px !important;
}

.center-content:not(.hero-content) .tile-theme .c-title,
.center-content:not(.hero-content) .tile-theme h3.c-title {
    font-size: 15px !important;
    line-height: 1.15 !important;
}

.center-content:not(.hero-content) .tile-theme p {
    font-size: 12px !important;
    line-height: 1.34 !important;
    opacity: .82 !important;
}

/* Primeiro card de cada seção fica largo; texto também à esquerda, sem coluna lateral. */
@media (max-width: 767px) {
    .center-content:not(.hero-content) > a.tile-link:nth-child(1) .tile-theme,
    .center-content:not(.hero-content) > .tile-link:nth-child(1) .tile-theme {
        min-height: 122px !important;
        padding: 16px 56px 18px 92px !important;
        justify-content: center !important;
    }

    .center-content:not(.hero-content) > a.tile-link:nth-child(1) .tile-theme .c-icon-wrapper,
    .center-content:not(.hero-content) > .tile-link:nth-child(1) .tile-theme .c-icon-wrapper,
    .center-content:not(.hero-content) > a.tile-link:nth-child(1) .tile-theme .tile-icon,
    .center-content:not(.hero-content) > .tile-link:nth-child(1) .tile-theme .tile-icon {
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    .center-content:not(.hero-content) > a.tile-link:nth-child(1) .tile-theme .c-title,
    .center-content:not(.hero-content) > .tile-link:nth-child(1) .tile-theme .c-title,
    .center-content:not(.hero-content) > a.tile-link:nth-child(1) .tile-theme h3.c-title,
    .center-content:not(.hero-content) > .tile-link:nth-child(1) .tile-theme h3.c-title,
    .center-content:not(.hero-content) > a.tile-link:nth-child(1) .tile-theme p,
    .center-content:not(.hero-content) > .tile-link:nth-child(1) .tile-theme p {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    .mf-header-title,
    .title-app {
        font-size: 18px !important;
        max-width: 190px !important;
    }

    .mf-header-context a,
    .mf-header-context span,
    .mf-header-context label,
    .mf-header-context .link-context,
    .title-app-context a,
    .title-app-context span,
    .title-app-context label,
    .title-app-context .link-context {
        font-size: 12px !important;
        max-width: 190px !important;
    }
}

@media (max-width: 360px) {
    .mf-header-title,
    .title-app { max-width: 160px !important; font-size: 16px !important; }
    .mf-header-context a,
    .mf-header-context span,
    .mf-header-context label,
    .mf-header-context .link-context { max-width: 160px !important; }
}

/* =====================================================================
   MATCHFIT PORTAL V2.3 — banners promocionais do painel do aluno
   ---------------------------------------------------------------------
   - Banner de Benefícios abaixo do topo do painel.
   - Renovação convertida de card comum para banner visual.
   - Altura compacta: largura total com altura próxima aos cards estreitos.
   ===================================================================== */

.mf-banner-wrap {
    max-width: 1180px;
    margin: 4px auto 12px auto;
    padding: 0 20px;
}

.mf-promo-banner {
    position: relative;
    display: block;
    min-height: 172px;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none !important;
    border: 1px solid rgba(0,178,66,.34);
    background-color: #04150b;
    background-size: cover;
    background-position: center right;
    box-shadow: 0 14px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
    padding: 26px 28px;
    color: #fff !important;
    isolation: isolate;
}

.mf-promo-banner:before {
    content: "";
    position: absolute;
    left: 0;
    top: 22px;
    bottom: 22px;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand-green), var(--brand-magenta));
    z-index: -1;
}

.mf-promo-banner:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.48) 44%, rgba(0,0,0,.06) 100%);
    z-index: -2;
}

.mf-benefits-banner {
    background-image: url('../images/banner-beneficio-1.png');
}

.mf-contract-banner {
    background-image: url('../images/banner-renovacao-1.png');
}

.mf-banner-kicker {
    display: block;
    color: var(--brand-green);
    font-family: Oswald, Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: 4px;
}

.mf-promo-banner strong {
    display: block;
    max-width: 420px;
    color: #fff;
    font-family: Oswald, Arial, sans-serif;
    font-size: 31px;
    font-weight: 900;
    line-height: 1.02;
    text-transform: none;
    text-shadow: 0 2px 10px rgba(0,0,0,.40);
}

.mf-promo-banner strong span,
.mf-promo-banner em b {
    color: var(--brand-magenta);
    font-style: normal;
}

.mf-promo-banner em {
    display: block;
    max-width: 390px;
    color: rgba(255,255,255,.92);
    font-family: Oswald, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.15;
    font-style: normal;
    margin-top: 4px;
}

.mf-promo-banner small {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 8px 18px;
    border: 1px solid rgba(0,178,66,.72);
    border-radius: 999px;
    color: var(--brand-green);
    font-family: Oswald, Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    background: rgba(0,0,0,.22);
}

/* O TileUsc de renovação vira banner, preservando o controle server-side. */
.center-content:not(.hero-content) > a.tile-link:has(.mf-renewal-banner) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.mf-renewal-banner {
    min-height: 172px !important;
    width: 100% !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(230,0,126,.42) !important;
    background-image:
        linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.46) 46%, rgba(0,0,0,.04) 100%),
        url('../images/banner-renovacao.png') !important;
    background-color: #12020c !important;
    background-size: cover !important;
    background-position: center right !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.42), 0 0 22px rgba(230,0,126,.12) !important;
    padding: 24px 28px 24px 32px !important;
    justify-content: center !important;
}

.mf-renewal-banner:before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 22px !important;
    bottom: 22px !important;
    width: 5px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, var(--brand-green), var(--brand-magenta)) !important;
    opacity: 1 !important;
    transform: none !important;
}

.mf-renewal-banner .c-icon-wrapper,
.mf-renewal-banner .tile-icon {
    display: none !important;
}

.mf-renewal-banner .c-title,
.mf-renewal-banner h3.c-title {
    color: var(--brand-magenta) !important;
    font-family: Oswald, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    margin: 0 0 2px 0 !important;
    text-transform: uppercase !important;
    max-width: 48% !important;
}

.mf-renewal-banner p {
    position: relative;
    color: #fff !important;
    font-family: Oswald, Arial, sans-serif !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    max-width: 46% !important;
    opacity: 1 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.48);
}

.mf-renewal-banner p:first-letter {
    color: #fff !important;
}

.mf-renewal-banner:after {
    content: "CONFIRA  \f105" !important;
    font-family: Oswald, FontAwesome, Arial, sans-serif !important;
    position: absolute !important;
    left: 32px !important;
    right: auto !important;
    bottom: 20px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--brand-magenta) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    background: rgba(0,0,0,.22) !important;
    border: 1px solid rgba(230,0,126,.76) !important;
}

@media (max-width: 767px) {
    .mf-banner-wrap {
        padding: 0 10px;
        margin-top: 0;
        margin-bottom: 14px;
    }

    .mf-promo-banner,
    .mf-renewal-banner {
        min-height: 166px !important;
        border-radius: 16px !important;
        padding: 20px 18px 20px 22px !important;
        background-position: center right !important;
    }

    .mf-promo-banner strong {
        max-width: 58%;
        font-size: 25px;
    }

    .mf-promo-banner em {
        max-width: 56%;
        font-size: 15px;
    }

    .mf-promo-banner small {
        margin-top: 12px;
        padding: 7px 14px;
        font-size: 12px;
    }

    .mf-renewal-banner .c-title,
    .mf-renewal-banner h3.c-title {
        max-width: 55% !important;
        font-size: 14px !important;
    }

    .mf-renewal-banner p {
        max-width: 54% !important;
        font-size: 22px !important;
    }

    .mf-renewal-banner:after {
        left: 22px !important;
        bottom: 18px !important;
        padding: 7px 14px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 390px) {
    .mf-promo-banner,
    .mf-renewal-banner {
        min-height: 154px !important;
    }

    .mf-promo-banner strong { font-size: 22px; max-width: 62%; }
    .mf-promo-banner em { font-size: 14px; max-width: 60%; }
    .mf-promo-banner small { display: none; }
    .mf-renewal-banner p { font-size: 20px !important; max-width: 58% !important; }
}

/* =========================================================
   MatchFit Portal - Treino Moderno
   Tela: WebForms/Aluno/TreinoPge.aspx
   ========================================================= */
.mf-workout-mode {
    display: flex;
    gap: 6px;
    margin: 12px 6px 14px 6px;
    padding: 4px;
    border: 1px solid rgba(0, 200, 83, .25);
    border-radius: 18px;
    background: #06140c;
}

.mf-workout-mode-btn {
    flex: 1;
    border: 0;
    border-radius: 14px;
    padding: 12px 10px;
    color: #b8cabe;
    background: transparent;
    font-weight: 800;
    letter-spacing: .6px;
}

.mf-workout-mode-btn.active {
    color: #fff;
    background: #00c853;
    box-shadow: 0 10px 22px rgba(0, 200, 83, .22);
}

.mf-workout-swipe-hint {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 8px 10px 8px;
    color: #8fdcb3;
    font-size: 12px;
    font-weight: 700;
}

.mf-workout-carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 6px 14px 6px;
    -webkit-overflow-scrolling: touch;
}

.mf-workout-carousel::-webkit-scrollbar { display: none; }

.mf-workout-card {
    flex: 0 0 92%;
    scroll-snap-align: center;
    position: relative;
    padding: 14px;
    border: 1px solid rgba(0, 200, 83, .55);
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(180deg, #051d10 0%, #020904 100%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32), 0 16px 36px rgba(0, 200, 83, .10);
}

.mf-workout-card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 28px;
    padding: 0 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(0, 200, 83, .35);
    border-radius: 999px;
    background: #082817;
    color: #b9dac6;
    font-weight: 900;
    font-size: 13px;
}

.mf-workout-gif-wrap {
    height: 218px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    border: 1px solid #173c28;
    background: radial-gradient(circle at center, #1b4f34 0%, #06180d 60%, #020904 100%);
}

.mf-workout-gif {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.mf-workout-card h3 {
    margin: 14px 0 12px 0;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.08;
    text-transform: uppercase;
}

.mf-workout-chips {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mf-workout-chips span {
    flex: 1;
    min-width: 0;
    padding: 9px;
    border-left: 2px solid #00c853;
    border-radius: 12px;
    background: #06160d;
}

.mf-workout-chips small {
    display: block;
    color: #9bb7a4;
    font-size: 11px;
    font-weight: 700;
}

.mf-workout-chips b {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mf-workout-load {
    padding: 12px;
    margin: 12px 0;
    border: 1px solid rgba(0, 200, 83, .30);
    border-radius: 18px;
    background: #06160d;
}

.mf-workout-load-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.mf-workout-load-head b { color: #fff; font-size: 15px; }
.mf-workout-load-head small { color: #91a99b; font-size: 11px; }

.mf-workout-load-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mf-workout-load-control button {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: #00c853;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
}

.mf-workout-load-value {
    flex: 1;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #183f2a;
    border-radius: 14px;
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 32px;
    font-weight: 900;
    cursor: pointer;
}

.mf-workout-load-steps {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.mf-workout-load-steps button {
    flex: 1;
    padding: 7px 4px;
    border: 1px solid #1b5c38;
    border-radius: 10px;
    background: #092115;
    color: #cbe9d5;
    font-weight: 800;
}

.mf-workout-load-steps button.active {
    border-color: #00c853;
    color: #fff;
}

.mf-workout-card-actions button {
    width: 100%;
    padding: 13px 10px;
    border: 0;
    border-radius: 14px;
    background: #00c853;
    color: #fff;
    font-weight: 900;
    letter-spacing: .3px;
}

.mf-workout-list {
    padding: 0 6px 14px 6px;
}

.mf-workout-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 10px;
    margin-bottom: 9px;
    border: 1px solid #17462c;
    border-radius: 16px;
    background: #031208;
    color: #fff;
}

.mf-workout-list-num {
    width: 34px;
    color: #00c853;
    font-size: 22px;
    font-weight: 900;
    text-align: center;
}

.mf-workout-list-body { flex: 1; min-width: 0; }
.mf-workout-list-body h4 { margin: 0; color: #fff; font-size: 14px; font-weight: 900; text-transform: uppercase; }
.mf-workout-list-body p { margin: 4px 0 0 0; color: #a7b9ad; font-size: 11px; }

.mf-workout-list-load,
.mf-workout-list-check {
    border: 0;
    border-radius: 12px;
    background: #092115;
    color: #fff;
    font-weight: 900;
}

.mf-workout-list-load {
    min-width: 54px;
    padding: 9px 8px;
    border-bottom: 2px solid #00c853;
    font-size: 18px;
}

.mf-workout-list-check {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0, 200, 83, .45);
    color: #00c853;
    font-size: 18px;
}

.mf-workout-legacy-grid {
    display: none;
}

.mf-workout-exec {
    padding: 0 6px 18px 6px;
}

.mf-workout-exec-card {
    padding: 14px;
    border: 1px solid rgba(0, 200, 83, .55);
    border-radius: 24px;
    background: linear-gradient(180deg, #051d10 0%, #020904 100%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .34), 0 16px 36px rgba(0, 200, 83, .10);
}

.mf-workout-exec-gif {
    width: 100%;
    height: 240px;
    object-fit: contain;
    display: block;
    border: 1px solid #173c28;
    border-radius: 20px;
    background: radial-gradient(circle at center, #1b4f34 0%, #06180d 60%, #020904 100%);
}

.mf-workout-exec-title {
    margin: 12px 0;
}

.mf-workout-exec-title .summary-value,
.mf-workout-exec-title label,
.mf-workout-exec-title span {
    color: #fff !important;
}

.mf-workout-exec-chips .summary-value,
.mf-workout-exec-chips label,
.mf-workout-exec-chips span span {
    color: #fff !important;
}

.mf-workout-exec-load {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    margin: 12px 0;
    border: 1px solid rgba(0, 200, 83, .30);
    border-radius: 18px;
    background: #06160d;
    color: #fff;
    cursor: pointer;
}

.mf-workout-exec-load span { color: #9bb7a4; font-size: 12px; font-weight: 800; }
.mf-workout-exec-load b { font-size: 28px; font-weight: 900; }
.mf-workout-exec-load small { color: #91a99b; font-size: 11px; }

.mf-workout-timer {
    margin-top: 14px;
    padding: 16px 12px;
    border: 1px solid #163a27;
    border-radius: 22px;
    background: linear-gradient(180deg, #080808 0%, #06160d 100%);
    color: #fff;
    text-align: center;
}

.mf-workout-timer-state {
    display: block;
    color: #ffd54f !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px;
}

.mf-workout-timer-clock {
    display: block;
    color: #fff !important;
    font-size: 66px !important;
    font-weight: 900 !important;
    line-height: 1;
    margin: 6px 0;
}

.mf-workout-timer-help {
    display: block;
    color: #9cafb6;
    font-size: 12px;
}

.mf-workout-exec-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.mf-workout-exec-actions .btn,
.mf-workout-exec-actions button,
.mf-workout-exec-actions a {
    border-radius: 14px !important;
}

@media (max-width: 480px) {
    .mf-workout-card { flex-basis: 94%; }
    .mf-workout-gif-wrap { height: 205px; }
    .mf-workout-exec-gif { height: 220px; }
    .mf-workout-card h3 { font-size: 20px; }
    .mf-workout-timer-clock { font-size: 58px !important; }
}

/* =========================================================
   MatchFit Portal - Treino Moderno V2 Ajustes
   ========================================================= */
.mf-workout-toolbar {
    width: calc(100% - 12px) !important;
    margin: 6px 6px 12px 6px !important;
    padding: 10px !important;
    border: 1px solid rgba(0, 200, 83, .24);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0, 200, 83, .10), rgba(5, 24, 13, .92));
    border-collapse: separate !important;
    border-spacing: 8px 0 !important;
}

.mf-workout-toolbar td { vertical-align: bottom !important; }
.mf-workout-toolbar td:first-child { width: 72px !important; }
.mf-workout-toolbar select,
.mf-workout-toolbar .form-control {
    height: 44px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
}

.mf-workout-toolbar .btn,
.mf-workout-toolbar button,
.mf-workout-toolbar input[type='submit'],
.mf-workout-toolbar a {
    min-height: 44px !important;
    border-radius: 12px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-weight: 900 !important;
    letter-spacing: .3px !important;
}

.mf-workout-mode {
    margin-top: 18px;
    border-radius: 20px;
    background: #031107;
}

.mf-workout-carousel {
    gap: 24px;
    padding-left: 8px;
    padding-right: 8px;
}

.mf-workout-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
}

.mf-workout-card::after {
    content: '';
    position: absolute;
    top: 82px;
    width: 16px;
    height: 280px;
    border: 1px solid rgba(0, 200, 83, .28);
    background: rgba(0, 200, 83, .06);
    pointer-events: none;
}

.mf-workout-card::after { right: -22px; border-radius: 18px 0 0 18px; }

.mf-workout-card:last-child::after {
    content: none;
}

.mf-workout-gif-wrap {
    height: 235px;
    background: #06180d;
}

.mf-workout-load-head small::after { content: ' — toque no número para digitar'; }

.mf-workout-note {
    margin: 10px 6px 14px 6px;
    padding: 13px 14px;
    border: 1px solid rgba(0, 200, 83, .24);
    border-radius: 18px;
    background: #031208;
}

.mf-workout-note label,
.mf-workout-note span,
.mf-workout-note .summary-title,
.mf-workout-note .summary-value {
    color: #fff !important;
}

.mf-workout-ficha-modern {
    display: block;
    margin: 12px 6px 18px 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 200, 83, .24);
    border-radius: 20px;
    background: linear-gradient(180deg, #06180d, #020904);
}

.mf-workout-ficha-modern .summary-group {
    margin: 0 !important;
    padding: 18px 14px !important;
}

.mf-workout-ficha-modern img {
    width: 92px !important;
    height: 92px !important;
    border: 1px solid rgba(0, 200, 83, .28);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.mf-workout-ficha-modern label,
.mf-workout-ficha-modern span,
.mf-workout-ficha-modern .summary-title,
.mf-workout-ficha-modern .summary-value {
    color: #fff !important;
}

.mf-workout-exec-card {
    padding-bottom: 18px;
}

.mf-workout-timer {
    position: relative;
    padding: 18px 14px 16px 14px;
}

.mf-workout-timer::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(0, 200, 83, .18);
    border-radius: 18px;
    pointer-events: none;
}

.mf-workout-timer-state {
    color: #00c853 !important;
    font-size: 13px !important;
}

.mf-workout-timer-clock {
    font-size: 70px !important;
    letter-spacing: 2px;
}

.mf-workout-exec-actions {
    display: grid !important;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: 8px;
}

.mf-workout-exec-actions > *:nth-child(2) {
    grid-column: span 2;
}

.mf-workout-exec-actions .btn,
.mf-workout-exec-actions button,
.mf-workout-exec-actions a,
.mf-workout-exec-actions input[type='submit'] {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: normal !important;
}

.mf-workout-exec-actions > *:nth-child(2) .btn,
.mf-workout-exec-actions > *:nth-child(2) button,
.mf-workout-exec-actions > *:nth-child(2) a,
.mf-workout-exec-actions > *:nth-child(2) input[type='submit'] {
    background: #00c853 !important;
    border-color: #00c853 !important;
    color: #fff !important;
}

@media (max-width: 480px) {
    .mf-workout-toolbar {
        border-spacing: 6px 0 !important;
    }

    .mf-workout-toolbar .btn,
    .mf-workout-toolbar button,
    .mf-workout-toolbar input[type='submit'],
    .mf-workout-toolbar a {
        min-width: 96px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 12px !important;
    }

    .mf-workout-card { flex-basis: 100% !important; }
    .mf-workout-gif-wrap { height: 225px !important; }
    .mf-workout-exec-actions { grid-template-columns: 1fr 1fr; }
    .mf-workout-exec-actions > *:nth-child(2) { grid-column: 1 / -1; order: -1; }
}

/* =========================================================
   MatchFit Portal - Treino Moderno V3 Refinamentos
   Ajustes solicitados em 09/06/2026
   ========================================================= */
.mf-workout-toolbar {
    display: block !important;
    width: calc(100% - 12px) !important;
    margin: 10px 6px 14px 6px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 200, 83, .28) !important;
    background: linear-gradient(145deg, rgba(3, 28, 14, .98), rgba(2, 12, 7, .96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 34px rgba(0,0,0,.30) !important;
    border-spacing: 0 !important;
}

.mf-workout-toolbar tbody,
.mf-workout-toolbar tr {
    display: block !important;
    width: 100% !important;
}

.mf-workout-toolbar tr {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 10px !important;
}

.mf-workout-toolbar td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    vertical-align: bottom !important;
}

.mf-workout-toolbar td:first-child {
    width: auto !important;
}

.mf-workout-toolbar td:nth-child(2) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding-top: 0 !important;
}

.mf-workout-toolbar label,
.mf-workout-toolbar .control-label,
.mf-workout-toolbar .c-font-bold,
.mf-workout-toolbar .c-font-uppercase {
    display: block !important;
    margin: 0 0 7px 2px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .3px !important;
    line-height: 1 !important;
}

.mf-workout-toolbar select,
.mf-workout-toolbar .form-control {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: #ffffff !important;
    color: #173323 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-align: center !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.28) !important;
}

.mf-workout-toolbar .btn,
.mf-workout-toolbar button,
.mf-workout-toolbar input[type='submit'],
.mf-workout-toolbar a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0 8px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0, 200, 83, .75) !important;
    background: linear-gradient(180deg, #00d66d, #00b95a) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    letter-spacing: .2px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: normal !important;
    box-shadow: 0 10px 18px rgba(0, 200, 83, .18) !important;
}

.mf-workout-toolbar td:nth-child(2) > *:last-child .btn,
.mf-workout-toolbar td:nth-child(2) > *:last-child button,
.mf-workout-toolbar td:nth-child(2) > *:last-child input[type='submit'],
.mf-workout-toolbar td:nth-child(2) > *:last-child a {
    background: linear-gradient(180deg, #0fcf79, #07984c) !important;
}

.mf-workout-card-actions .mf-workout-done-btn,
.mf-workout-card-actions button {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 200, 83, .55) !important;
    background: linear-gradient(180deg, #00d66d, #00bd5e) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    letter-spacing: .35px !important;
    box-shadow: 0 12px 24px rgba(0, 200, 83, .16) !important;
}

.mf-workout-card-actions .mf-workout-done-btn.active,
.mf-workout-card-actions button.active {
    border-color: rgba(230, 0, 126, .76) !important;
    background: linear-gradient(180deg, #ec1688, #b90066) !important;
    box-shadow: 0 14px 26px rgba(230, 0, 126, .20) !important;
}

.mf-workout-ficha-modern {
    margin: 14px 6px 22px 6px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(0, 200, 83, .30) !important;
    background: radial-gradient(circle at 50% 0%, rgba(0, 200, 83, .12), transparent 38%), linear-gradient(180deg, #04190d, #010704) !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.34) !important;
}

.mf-workout-ficha-modern .summary-group,
.mf-workout-ficha-modern .mf-ficha-body {
    padding: 16px 12px 18px 12px !important;
    margin: 0 !important;
}

.mf-ficha-professor {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 4px 0 14px 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(0, 200, 83, .22) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(0, 200, 83, .08), rgba(0,0,0,.20)) !important;
}

.mf-ficha-avatar {
    width: 76px !important;
    height: 76px !important;
    flex: 0 0 76px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 200, 83, .35) !important;
    background: #06180d !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.34) !important;
}

.mf-ficha-avatar img,
.mf-workout-ficha-modern .mf-ficha-avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mf-ficha-professor-info {
    min-width: 0 !important;
    flex: 1 !important;
}

.mf-ficha-professor-info > *:not(:first-child) {
    display: none !important;
}

.mf-ficha-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.mf-ficha-tile {
    min-width: 0 !important;
    padding: 11px 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 200, 83, .26) !important;
    background: rgba(0, 0, 0, .26) !important;
    overflow: hidden !important;
}

.mf-ficha-tile-wide {
    grid-column: 1 / -1 !important;
}

.mf-ficha-tile label,
.mf-ficha-tile span,
.mf-ficha-professor-info label,
.mf-ficha-professor-info span,
.mf-workout-ficha-modern label,
.mf-workout-ficha-modern span,
.mf-workout-ficha-modern .summary-title,
.mf-workout-ficha-modern .summary-value {
    color: #ffffff !important;
}

.mf-ficha-tile label,
.mf-ficha-tile .summary-title,
.mf-ficha-professor-info label,
.mf-ficha-professor-info .summary-title {
    display: block !important;
    margin-bottom: 5px !important;
    color: #b9d9c5 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    text-transform: none !important;
}

.mf-ficha-tile .summary-value,
.mf-ficha-tile span,
.mf-ficha-professor-info .summary-value,
.mf-ficha-professor-info span {
    font-size: 17px !important;
    line-height: 1.18 !important;
    font-weight: 950 !important;
    overflow-wrap: anywhere !important;
}

.mf-ficha-professor-info .summary-value,
.mf-ficha-professor-info span {
    font-size: 18px !important;
}

@media (max-width: 380px) {
    .mf-workout-toolbar tr {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .mf-workout-toolbar td:nth-child(2) {
        gap: 6px !important;
    }

    .mf-workout-toolbar .btn,
    .mf-workout-toolbar button,
    .mf-workout-toolbar input[type='submit'],
    .mf-workout-toolbar a {
        font-size: 10px !important;
        min-height: 44px !important;
    }

    .mf-ficha-avatar {
        width: 68px !important;
        height: 68px !important;
        flex-basis: 68px !important;
    }
}

/* =========================================================
   TreinoPge - refinamento V4
   - Observação sem artefatos visuais antigos
   - Accordion da ficha com visual moderno
   - Roxo no estado concluído
   ========================================================= */

:root {
    --brand-purple: #8a1bb1;
    --brand-purple-deep: #5d0f83;
    --brand-purple-soft: rgba(138, 27, 177, .20);
}

.mf-workout-card-actions .mf-workout-done-btn.active,
.mf-workout-card-actions button.active {
    border-color: rgba(138, 27, 177, .86) !important;
    background: linear-gradient(180deg, #9e2bc7, #64108d) !important;
    box-shadow: 0 14px 26px rgba(138, 27, 177, .24) !important;
}

.mf-workout-note {
    position: relative !important;
    margin: 12px 6px 16px 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.mf-workout-note::before,
.mf-workout-note::after {
    display: none !important;
    content: none !important;
}

.mf-workout-note .form-group,
.mf-workout-note .textview-theme {
    margin: 0 !important;
    padding: 14px 15px !important;
    border: 1px solid rgba(0, 200, 83, .26) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(0, 200, 83, .07), rgba(0, 0, 0, .30)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02) !important;
}

.mf-workout-note .form-group::before,
.mf-workout-note .form-group::after,
.mf-workout-note .textview-theme::before,
.mf-workout-note .textview-theme::after {
    display: none !important;
    content: none !important;
}

.mf-workout-note label {
    display: block !important;
    margin: 0 0 8px 0 !important;
    color: #bfe9cd !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.mf-workout-note b,
.mf-workout-note span {
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1.28 !important;
}

.mf-workout-ficha-modern {
    margin: 14px 4px 24px 4px !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 200, 83, .30) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #04170c, #010604) !important;
    overflow: hidden !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .36) !important;
}

.mf-workout-ficha-modern .accordion-theme,
.mf-workout-ficha-modern .c-content-accordion-1,
.mf-workout-ficha-modern .panel-group,
.mf-workout-ficha-modern .panel,
.mf-workout-ficha-modern .panel-heading,
.mf-workout-ficha-modern .panel-title {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mf-workout-ficha-modern .panel-title > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 54px !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #0b3a21, #062313) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: inset 0 -1px 0 rgba(0, 200, 83, .22) !important;
}

.mf-workout-ficha-modern .panel-title > a i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 10px !important;
    background: rgba(0, 200, 83, .14) !important;
    color: #00d66d !important;
    font-size: 14px !important;
}

.mf-workout-ficha-modern .panel-title > a span,
.mf-workout-ficha-modern .panel-title > a .c-font-bold {
    font-size: 15px !important;
    font-weight: 950 !important;
    letter-spacing: .2px !important;
}

.mf-workout-ficha-modern .panel-title > a br,
.mf-workout-ficha-modern .panel-title > a > label {
    display: none !important;
}

.mf-workout-ficha-modern .panel-title > a::after {
    content: 'toque para recolher' !important;
    margin-left: auto !important;
    color: rgba(255, 255, 255, .58) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    text-transform: none !important;
}

.mf-workout-ficha-modern .panel-title > a.collapsed::after {
    content: 'toque para expandir' !important;
}

.mf-workout-ficha-modern .panel-collapse,
.mf-workout-ficha-modern .accordion-body,
.mf-workout-ficha-modern .panel-body {
    border: 0 !important;
    border-radius: 0 !important;
    background: radial-gradient(circle at 50% 0%, rgba(0, 200, 83, .08), transparent 34%), #010804 !important;
    box-shadow: none !important;
}

.mf-workout-ficha-modern .panel-body {
    padding: 14px 12px 18px 12px !important;
}

.mf-workout-ficha-modern .summary-group,
.mf-workout-ficha-modern .mf-ficha-body {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mf-ficha-professor {
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 200, 83, .24) !important;
    background: linear-gradient(135deg, rgba(0, 200, 83, .08), rgba(255,255,255,.015)) !important;
}

.mf-ficha-avatar {
    position: relative !important;
    width: 76px !important;
    height: 76px !important;
    flex: 0 0 76px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(0, 200, 83, .18), rgba(138, 27, 177, .12)) !important;
}

.mf-ficha-avatar.empty::before {
    content: '👤' !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 30px !important;
}

/* .mf-ficha-avatar img força display:block !important, o que sobrescreve o
   this.style.display='none' aplicado inline pelo onerror (regra !important de
   folha de estilo tem prioridade sobre estilo inline). Sem isto, a imagem
   quebrada continua visível por cima/ao lado do ícone de placeholder acima. */
.mf-ficha-avatar.empty img {
    display: none !important;
}

.mf-ficha-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.mf-ficha-tile {
    min-height: 86px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 200, 83, .22) !important;
    background: rgba(0, 0, 0, .28) !important;
}

.mf-ficha-tile-wide {
    min-height: 78px !important;
}

.mf-ficha-tile label,
.mf-ficha-tile .summary-title,
.mf-ficha-professor-info label,
.mf-ficha-professor-info .summary-title {
    color: #a7dec0 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

.mf-ficha-tile .summary-value,
.mf-ficha-tile span,
.mf-ficha-professor-info .summary-value,
.mf-ficha-professor-info span,
.mf-ficha-tile b,
.mf-ficha-professor-info b {
    color: #ffffff !important;
    font-size: 17px !important;
    line-height: 1.22 !important;
    font-weight: 950 !important;
}

@media (max-width: 380px) {
    .mf-workout-ficha-modern .panel-body {
        padding: 12px 10px 16px 10px !important;
    }

    .mf-workout-ficha-modern .panel-title > a::after {
        display: none !important;
    }

    .mf-ficha-professor {
        gap: 10px !important;
        padding: 10px !important;
    }

    .mf-ficha-grid {
        gap: 9px !important;
    }
}

/* =========================================================
   MatchFit Portal - Treino Moderno V5
   Refinamentos finais: seletor, progresso e concluir treino
   ========================================================= */
.mf-workout-hidden-start {
    display: none !important;
}

.mf-workout-selector {
    width: calc(100% - 12px) !important;
    margin: 10px 6px 12px 6px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(0, 200, 83, .24) !important;
    background: linear-gradient(145deg, rgba(3, 35, 17, .96), rgba(2, 16, 8, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 14px 30px rgba(0,0,0,.28) !important;
}

.mf-workout-selector tr,
.mf-workout-selector tbody,
.mf-workout-selector td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

.mf-workout-selector label,
.mf-workout-selector .control-label,
.mf-workout-selector .c-font-bold,
.mf-workout-selector .c-font-uppercase {
    margin: 0 0 10px 2px !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .55px !important;
    text-transform: uppercase !important;
}

.mf-workout-selector select,
.mf-workout-selector .form-control {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 48px 0 18px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 200, 83, .36) !important;
    background-color: rgba(255,255,255,.98) !important;
    color: #062112 !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    letter-spacing: .6px !important;
    text-align: left !important;
    box-shadow: 0 12px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.8) !important;
    outline: none !important;
    appearance: auto !important;
}

.mf-workout-selector::after {
    content: "Escolha a divisão do treino";
    display: block;
    margin-top: 9px;
    color: rgba(169, 184, 173, .88);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}

#pnlRealizacao .c-progress-bar-container,
.c-progress-bar-container:has(.c-progress-bar-line) {
    margin: 2px 6px 16px 6px !important;
    padding: 13px 14px 15px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 200, 83, .22) !important;
    background: linear-gradient(145deg, rgba(3, 22, 11, .96), rgba(0, 0, 0, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 24px rgba(0,0,0,.24) !important;
}

.c-progress-bar-line {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "title text" "bar bar" !important;
    gap: 8px 10px !important;
    min-height: 0 !important;
}

.c-progress-bar-line .c-progress-bar-label {
    grid-area: title !important;
    position: static !important;
    display: block !important;
    margin: 0 !important;
    color: rgba(255,255,255,.98) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    letter-spacing: .25px !important;
}

.c-progress-bar-line .progressbar-text {
    grid-area: text !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    color: rgba(193, 216, 202, .94) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.c-progress-bar-line svg {
    grid-area: bar !important;
    display: block !important;
    width: 100% !important;
    height: 10px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.45) !important;
}

.c-progress-bar-line svg path:first-child {
    stroke: rgba(255,255,255,.12) !important;
    stroke-width: 1 !important;
}

.c-progress-bar-line svg path:last-child {
    stroke: url(#mfWorkoutProgressGradient) !important;
    stroke: #00d66d !important;
    stroke-width: 1 !important;
    filter: drop-shadow(0 0 4px rgba(0, 200, 83, .45)) !important;
}

.mf-workout-conclude-area {
    width: calc(100% - 12px) !important;
    margin: 18px 6px 12px 6px !important;
    padding: 12px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(0, 200, 83, .22) !important;
    background: linear-gradient(145deg, rgba(3, 29, 14, .95), rgba(2, 10, 6, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 26px rgba(0,0,0,.26) !important;
}

.mf-workout-conclude-area .btn,
.mf-workout-conclude-area button,
.mf-workout-conclude-area input[type='submit'],
.mf-workout-conclude-area a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 56px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 200, 83, .70) !important;
    background: linear-gradient(180deg, #00d66d, #00b95a) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    letter-spacing: .45px !important;
    text-transform: uppercase !important;
    box-shadow: 0 13px 24px rgba(0, 200, 83, .18) !important;
}

.mf-workout-card-actions .mf-workout-done-btn.active,
.mf-workout-card-actions button.active {
    border-color: rgba(124, 58, 237, .86) !important;
    background: linear-gradient(180deg, #8b5cf6, #6d28d9) !important;
    box-shadow: 0 14px 26px rgba(124, 58, 237, .26) !important;
}

/* =========================================================
   MatchFit Portal - Treino Moderno V6
   Correção do seletor, progresso e bloco inferior
   ========================================================= */
.mf-workout-overview {
    width: calc(100% - 12px) !important;
    margin: 10px 6px 16px 6px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(0, 200, 83, .24) !important;
    background: linear-gradient(145deg, rgba(3, 35, 17, .96), rgba(2, 16, 8, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 14px 30px rgba(0,0,0,.28) !important;
}

.mf-workout-division {
    display: grid !important;
    grid-template-columns: 104px 1fr !important;
    gap: 14px !important;
    align-items: center !important;
    margin-bottom: 14px !important;
}

.mf-workout-division-label {
    order: 2 !important;
    min-width: 0 !important;
}

.mf-workout-division-label strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    letter-spacing: .35px !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
}

.mf-workout-division-label span {
    display: block !important;
    margin-top: 4px !important;
    color: rgba(190, 215, 201, .78) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
}

.mf-workout-selector {
    order: 1 !important;
    width: 104px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mf-workout-selector::after,
.mf-workout-selector label,
.mf-workout-selector .control-label,
.mf-workout-selector .c-font-bold,
.mf-workout-selector .c-font-uppercase {
    display: none !important;
    content: none !important;
}

.mf-workout-selector select,
.mf-workout-selector .form-control {
    width: 104px !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 34px 0 22px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 200, 83, .40) !important;
    background-color: rgba(255,255,255,.98) !important;
    color: #062112 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    text-align: center !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.mf-workout-progress-modern {
    width: 100% !important;
    display: block !important;
}

.mf-workout-progress-modern .c-progress-bar-container,
.mf-workout-progress-modern [id$='pnlProgress'] {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mf-workout-progress-modern .c-progress-bar-line {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "title percent" "bar bar" !important;
    gap: 8px 12px !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.mf-workout-progress-modern .c-progress-bar-label {
    grid-area: title !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
}

.mf-workout-progress-modern .progressbar-text {
    grid-area: percent !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    color: #bfe8cf !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.mf-workout-progress-modern .c-progress-bar-line svg {
    grid-area: bar !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 11px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.12) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.55) !important;
}

.mf-workout-progress-modern .c-progress-bar-line svg path:first-child {
    stroke: rgba(255,255,255,.14) !important;
    stroke-width: 1.7 !important;
}

.mf-workout-progress-modern .c-progress-bar-line svg path:last-child {
    stroke: #00d66d !important;
    stroke-width: 1.9 !important;
    filter: drop-shadow(0 0 5px rgba(0, 200, 83, .55)) !important;
}

.mf-workout-conclude-area {
    width: calc(100% - 12px) !important;
    margin: 18px 6px 12px 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mf-workout-conclude-area .btn,
.mf-workout-conclude-area button,
.mf-workout-conclude-area input[type='submit'],
.mf-workout-conclude-area a {
    width: 100% !important;
    min-height: 58px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 200, 83, .68) !important;
    background: linear-gradient(180deg, #00d66d, #00b95a) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(0, 200, 83, .20) !important;
}

.mf-workout-note {
    width: calc(100% - 12px) !important;
    margin: 0 6px 16px 6px !important;
    display: block !important;
}

.mf-workout-note .form-group,
.mf-workout-note .textview-theme {
    width: 100% !important;
    min-height: 92px !important;
    padding: 15px 16px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 200, 83, .24) !important;
    background: linear-gradient(145deg, rgba(3, 23, 12, .86), rgba(0, 0, 0, .70)) !important;
}

@media (max-width: 390px) {
    .mf-workout-division {
        grid-template-columns: 96px 1fr !important;
        gap: 12px !important;
    }

    .mf-workout-selector,
    .mf-workout-selector select,
    .mf-workout-selector .form-control {
        width: 96px !important;
    }
}

/* =========================================================
   MatchFit Portal - Treino Moderno V7
   Correção de fluxo: seletor/progresso e concluir/observação
   ========================================================= */
.mf-workout-overview {
    display: block !important;
    overflow: visible !important;
    padding: 14px !important;
}

.mf-workout-division {
    display: grid !important;
    grid-template-columns: 98px minmax(0, 1fr) !important;
    grid-template-areas: "selector label" !important;
    gap: 14px !important;
    align-items: center !important;
    min-height: 58px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

.mf-workout-division-label {
    grid-area: label !important;
    order: initial !important;
    align-self: center !important;
    min-width: 0 !important;
    padding: 0 !important;
}

.mf-workout-division-label strong {
    font-size: 13px !important;
    margin-bottom: 3px !important;
}

.mf-workout-division-label span {
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
}

.mf-workout-selector {
    grid-area: selector !important;
    order: initial !important;
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 98px !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mf-workout-selector tbody,
.mf-workout-selector tr,
.mf-workout-selector td,
.mf-workout-selector .form-group {
    display: block !important;
    width: 98px !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.mf-workout-selector select,
.mf-workout-selector .form-control {
    display: block !important;
    position: static !important;
    width: 98px !important;
    max-width: 98px !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 30px 0 20px !important;
    border-radius: 17px !important;
    font-size: 22px !important;
    line-height: 56px !important;
}

.mf-workout-progress-modern {
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 200, 83, .20) !important;
    background: rgba(0, 0, 0, .28) !important;
}

.mf-workout-conclude-area {
    clear: both !important;
    float: none !important;
    display: block !important;
    width: calc(100% - 12px) !important;
    max-width: none !important;
    margin: 18px 6px 14px 6px !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.mf-workout-conclude-area > div,
.mf-workout-conclude-area [id$='pnlControl'] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mf-workout-conclude-area a,
.mf-workout-conclude-area .btn,
.mf-workout-conclude-area button,
.mf-workout-conclude-area input[type='submit'] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 18px !important;
    text-align: center !important;
}

.mf-workout-note {
    clear: both !important;
    float: none !important;
    display: block !important;
    width: calc(100% - 12px) !important;
    max-width: none !important;
    margin: 0 6px 18px 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

.mf-workout-note .form-group,
.mf-workout-note .textview-theme {
    clear: both !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 15px 16px !important;
    box-sizing: border-box !important;
}

@media (max-width: 390px) {
    .mf-workout-division {
        grid-template-columns: 92px minmax(0, 1fr) !important;
        gap: 12px !important;
        min-height: 54px !important;
    }

    .mf-workout-selector,
    .mf-workout-selector tbody,
    .mf-workout-selector tr,
    .mf-workout-selector td,
    .mf-workout-selector .form-group,
    .mf-workout-selector select,
    .mf-workout-selector .form-control {
        width: 92px !important;
        max-width: 92px !important;
        height: 54px !important;
        min-height: 54px !important;
    }

    .mf-workout-selector select,
    .mf-workout-selector .form-control {
        padding-left: 18px !important;
        padding-right: 28px !important;
        font-size: 21px !important;
        line-height: 54px !important;
    }
}

/* ---------------------------------------------------------------------
   PROFILE SELECT MODAL - V7
   Hero as popup top background + complete clean profile cards.
   --------------------------------------------------------------------- */
#profile-form.c-content-login-form .modal-dialog {
    width: 460px !important;
    max-width: calc(100% - 14px) !important;
    margin: 14px auto !important;
}

#profile-form.c-content-login-form .modal-content {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 210, 83, .52) !important;
    background: rgba(0, 23, 10, .98) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .56), inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
}

#profile-form .modal-header {
    position: relative !important;
    z-index: 10 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

#profile-form .modal-header .close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 11 !important;
    opacity: 1 !important;
}

#profile-form .profile-modal-body {
    position: relative !important;
    isolation: isolate !important;
    padding: 70px 18px 22px 18px !important;
    min-height: 620px !important;
}

#profile-form .profile-hero {
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 310px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background-image:
        linear-gradient(90deg, rgba(0, 20, 9, .98) 0%, rgba(0, 23, 10, .82) 36%, rgba(0, 23, 10, .26) 66%, rgba(0, 23, 10, .08) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, rgba(0, 20, 9, .20) 58%, rgba(0, 23, 10, .98) 100%),
        url('../images/profile-hero-bg-clean.png') !important;
    background-size: 100% 100%, 100% 100%, cover !important;
    background-position: center center, center center, right top !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

#profile-form .profile-heading {
    position: relative !important;
    z-index: 3 !important;
    margin: 0 58px 150px 0 !important;
}

#profile-form .profile-modal-title {
    margin: 0 0 12px 0 !important;
    color: #ffffff !important;
    font-size: 31px !important;
    line-height: 1.06 !important;
    font-weight: 900 !important;
    letter-spacing: -.6px !important;
    text-shadow: 0 3px 16px rgba(0, 0, 0, .78) !important;
}

#profile-form .profile-modal-title span { color: #21e36b !important; }

#profile-form .profile-modal-subtitle {
    margin: 0 !important;
    color: rgba(255, 255, 255, .80) !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, .78) !important;
}

#profile-form .profile-modal-subtitle::after {
    content: "" !important;
    display: block !important;
    width: 62px !important;
    height: 3px !important;
    margin-top: 22px !important;
    border-radius: 4px !important;
    background: linear-gradient(90deg, #21e36b 0%, #ffffff 52%, #ec008c 100%) !important;
}

#profile-form .profile-card-list {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

#profile-form .profile-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) 44px !important;
    column-gap: 18px !important;
    align-items: center !important;
    min-height: 150px !important;
    padding: 24px 22px 24px 28px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 210, 83, .74) !important;
    background:
        radial-gradient(70% 100% at 100% 50%, rgba(33, 227, 107, .13), transparent 64%),
        linear-gradient(135deg, rgba(0, 50, 22, .98), rgba(0, 23, 11, .98)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 12px 28px rgba(0, 0, 0, .22) !important;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

#profile-form .profile-card:hover,
#profile-form .profile-card:focus {
    transform: translateY(-2px) !important;
    border-color: #21e36b !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .32), 0 0 22px rgba(0, 210, 83, .16) !important;
}

#profile-form .profile-card-accent {
    position: absolute !important;
    top: 28px !important;
    bottom: 28px !important;
    left: 0 !important;
    width: 6px !important;
    border-radius: 0 8px 8px 0 !important;
    background: linear-gradient(180deg, #20e36c 0%, #ffffff 48%, #ec008c 100%) !important;
    z-index: 2 !important;
}

#profile-form .profile-card-icon {
    grid-column: 1 !important;
    width: 78px !important;
    height: 78px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255, 255, 255, .70) !important;
    background: rgba(0, 22, 10, .62) !important;
    box-shadow: 0 0 16px rgba(0, 210, 83, .20) !important;
    z-index: 3 !important;
}

#profile-form .profile-card-icon img {
    width: 46px !important;
    height: 46px !important;
    object-fit: contain !important;
}

#profile-form .profile-card-content {
    grid-column: 2 !important;
    position: relative !important;
    z-index: 3 !important;
    min-width: 0 !important;
}

#profile-form .profile-card-content h4 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -.2px !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .60) !important;
}

#profile-form .profile-card-line {
    width: 58px !important;
    height: 3px !important;
    margin: 10px 0 10px 0 !important;
    border-radius: 4px !important;
    background: linear-gradient(90deg, #21e36b 0%, #ffffff 48%, #ec008c 100%) !important;
}

#profile-form .profile-card-content strong {
    display: block !important;
    color: #21e36b !important;
    font-size: 16px !important;
    line-height: 1.28 !important;
    font-weight: 600 !important;
}

#profile-form .profile-card-content p {
    display: block !important;
    margin: 14px 0 0 0 !important;
    color: rgba(255, 255, 255, .70) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}

#profile-form .profile-card-watermark {
    position: absolute !important;
    right: -28px !important;
    top: 50% !important;
    width: 152px !important;
    height: 152px !important;
    transform: translateY(-50%) !important;
    z-index: 0 !important;
    opacity: .10 !important;
    pointer-events: none !important;
}

#profile-form .profile-card-watermark img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

#profile-form .profile-card-arrow {
    grid-column: 3 !important;
    position: relative !important;
    z-index: 3 !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid rgba(33, 227, 107, .52) !important;
    color: #21e36b !important;
    font-size: 26px !important;
    line-height: 1 !important;
    background: rgba(0, 28, 12, .46) !important;
    box-shadow: 0 0 16px rgba(0, 210, 83, .12) !important;
}

/* Desktop: utiliza a largura da tela e evita que o seletor ultrapasse a
   altura útil. O mobile conserva integralmente o desenho vertical abaixo. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    #profile-form.c-content-login-form .modal-dialog {
        width: min(860px, calc(100% - 48px)) !important;
        max-width: 860px !important;
        margin: clamp(30px, 7vh, 72px) auto !important;
    }

    #profile-form .profile-modal-body {
        min-height: 474px !important;
        padding: 44px 22px 22px !important;
    }

    #profile-form .profile-hero {
        height: 258px !important;
        background-image:
            linear-gradient(90deg, rgba(0, 20, 9, .98) 0%, rgba(0, 23, 10, .78) 38%, rgba(0, 23, 10, .20) 70%, rgba(0, 23, 10, .06) 100%),
            linear-gradient(180deg, rgba(0, 0, 0, .04) 0%, rgba(0, 20, 9, .16) 58%, rgba(0, 23, 10, .98) 100%),
            url('../images/profile-hero-bg-clean.png') !important;
        background-position: center, center, right 18% !important;
    }

    #profile-form .profile-heading {
        max-width: 390px;
        margin: 0 68px 116px 0 !important;
    }

    #profile-form .profile-card-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px !important;
    }

    #profile-form .profile-card {
        grid-template-columns: 64px minmax(0, 1fr) 34px !important;
        column-gap: 13px !important;
        min-height: 150px !important;
        padding: 18px 16px 18px 18px !important;
    }

    #profile-form .profile-card-icon {
        width: 60px !important;
        height: 60px !important;
    }

    #profile-form .profile-card-icon img {
        width: 37px !important;
        height: 37px !important;
    }

    #profile-form .profile-card-content h4 {
        font-size: 20px !important;
    }

    #profile-form .profile-card-content strong {
        font-size: 13px !important;
    }

    #profile-form .profile-card-content p {
        margin-top: 8px !important;
        font-size: 12px !important;
    }

    #profile-form .profile-card-arrow {
        width: 32px !important;
        height: 32px !important;
        font-size: 20px !important;
    }
}

@media (max-width: 430px) {
    #profile-form.c-content-login-form .modal-dialog {
        margin-top: 8px !important;
        max-width: calc(100% - 12px) !important;
    }

    #profile-form .profile-modal-body {
        padding: 48px 16px 18px 16px !important;
        min-height: 300px !important;
    }

    #profile-form .profile-hero {
        height: 228px !important;
        background-size: 100% 100%, 100% 100%, auto 100% !important;
        background-position: center center, center center, 60% top !important;
    }

    #profile-form .profile-heading {
        margin: 0 52px 108px 0 !important;
    }

    #profile-form .profile-modal-title {
        font-size: 22px !important;
        line-height: 1.1 !important;
        margin-bottom: 7px !important;
    }

    #profile-form .profile-modal-subtitle {
        font-size: 12px !important;
    }

    #profile-form .profile-modal-subtitle::after {
        width: 46px !important;
        height: 2px !important;
        margin-top: 10px !important;
    }

    #profile-form .profile-card-list {
        gap: 12px !important;
    }

    #profile-form .profile-card {
        min-height: 106px !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        column-gap: 14px !important;
        padding: 16px 18px 16px 20px !important;
        border-radius: 14px !important;
    }

    #profile-form .profile-card-icon {
        width: 62px !important;
        height: 62px !important;
        border-radius: 13px !important;
    }

    #profile-form .profile-card-icon img {
        width: 38px !important;
        height: 38px !important;
    }

    #profile-form .profile-card-content h4 {
        font-size: 20px !important;
    }

    #profile-form .profile-card-line {
        width: 52px !important;
        height: 3px !important;
        margin: 8px 0 8px 0 !important;
    }

    #profile-form .profile-card-content strong {
        font-size: 12px !important;
    }

    #profile-form .profile-card-content p {
        display: none !important;
    }

    #profile-form .profile-card-arrow {
        display: none !important;
    }

    #profile-form .profile-card-watermark {
        width: 124px !important;
        height: 124px !important;
        right: -26px !important;
    }
}

/* ---------------------------------------------------------------------
   31. LOGIN - ações auxiliares compactas
   --------------------------------------------------------------------- */
#login-form .login-actions-block,
#forget-password-form .login-actions-block,
#signup-form .login-actions-block {
    margin-top: 12px;
    max-width: 303px;
}

#login-form .login-primary-action,
#forget-password-form .login-primary-action,
#signup-form .login-primary-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#login-form .login-help-box {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Em telas de PC, o suporte ocupa uma coluna própria sem alterar o fluxo mobile. */
@media (min-width: 768px) {
    #login-form .modal-dialog {
        width: min(760px, calc(100% - 48px));
        max-width: 760px;
    }

    #login-form .login-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 38px;
        align-items: start;
    }

    #login-form .login-main-column {
        min-width: 0;
    }

    /* Mantém os campos de acesso alinhados ao painel de verificação. */
    #login-form .login-main-column td > .form-group {
        max-width: 335px !important;
    }

    #login-form .login-help-box {
        margin-top: 0;
        padding: 4px 0 4px 24px;
        border-top: 0;
        border-left: 1px solid rgba(255,255,255,.10);
    }

    #login-form a.login-help-link {
        justify-content: flex-start;
    }
}

#login-form .login-help-title {
    display: block;
    margin-bottom: 8px;
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

#login-form .login-help-links,
#forget-password-form .login-help-links,
#signup-form .login-help-links {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

#forget-password-form .login-help-links-secondary,
#signup-form .login-help-links-secondary {
    margin-top: 12px;
}

#login-form a.login-help-link,
#forget-password-form a.login-help-link,
#signup-form a.login-help-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0, 202, 84, .26) !important;
    background: rgba(255,255,255,.035) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

#login-form a.login-help-link i,
#forget-password-form a.login-help-link i,
#signup-form a.login-help-link i {
    color: #00d968 !important;
    font-size: 13px !important;
    margin: 0 !important;
}

#login-form a.login-help-link label,
#forget-password-form a.login-help-link label,
#signup-form a.login-help-link label {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
    white-space: nowrap;
}

#login-form a.login-help-link:hover,
#login-form a.login-help-link:focus,
#forget-password-form a.login-help-link:hover,
#forget-password-form a.login-help-link:focus,
#signup-form a.login-help-link:hover,
#signup-form a.login-help-link:focus {
    background: rgba(0, 202, 84, .12) !important;
    border-color: rgba(0, 202, 84, .52) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

@media (max-width: 540px) {
    #login-form .login-actions-block,
    #forget-password-form .login-actions-block,
    #signup-form .login-actions-block {
        max-width: none;
    }

    #login-form .login-help-links,
    #forget-password-form .login-help-links,
    #signup-form .login-help-links {
        gap: 7px;
    }

    #login-form a.login-help-link,
    #forget-password-form a.login-help-link,
    #signup-form a.login-help-link {
        flex: 1 1 auto;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (min-width: 768px) {
    #login-form .login-help-links {
        display: grid;
        gap: 9px;
    }
}

/* ---------------------------------------------------------------------
   32. PORTAL - Tela de mensagens / fale conosco
   --------------------------------------------------------------------- */
.mf-skip-link {
    position: fixed;
    z-index: 100000;
    top: 10px;
    left: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #21e36b;
    color: #07110d !important;
    font-weight: 800;
    transform: translateY(-160%);
    transition: transform .18s ease;
}

.mf-skip-link:focus {
    transform: translateY(0);
    outline: 3px solid #fff;
    outline-offset: 3px;
}

#login-form .login-captcha-panel {
    width: 100%;
    max-width: 335px;
    margin: 10px 0 4px;
    padding: 13px 15px 15px;
    overflow: hidden;
    border: 1px solid rgba(33, 227, 107, .26);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(33, 227, 107, .08), rgba(255, 255, 255, .025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

#login-form .login-captcha-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#login-form .login-captcha-icon {
    color: #21e36b;
    font-family: FontAwesome, sans-serif;
    font-size: 14px;
}

#login-form .login-captcha-widget {
    width: 303px;
    max-width: 100%;
    min-height: 78px;
    margin: 0 auto;
    transform-origin: top left;
}

@media (max-width: 390px) {
    #login-form .login-captcha-panel {
        max-width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    #login-form .login-captcha-widget {
        --captcha-scale: .88;
        width: 303px;
        min-height: calc(78px * var(--captcha-scale));
        transform: scale(var(--captcha-scale));
    }
}

@media (max-width: 350px) {
    #login-form .login-captcha-widget {
        --captcha-scale: .78;
    }
}

.mf-message-page {
    position: relative;
    width: 100%;
    padding: 0 4px 98px 4px;
    color: #ffffff;
}

.mf-message-page * {
    box-sizing: border-box;
}

.mf-message-shell {
    position: relative;
    float: none !important;
    width: auto !important;
    margin: 12px 6px 14px 6px !important;
    padding: 12px !important;
    border: 1px solid rgba(0, 255, 123, .20);
    border-radius: 20px;
    background:
        radial-gradient(circle at 14% 0%, rgba(0, 255, 123, .13), transparent 34%),
        linear-gradient(180deg, rgba(3, 20, 11, .97), rgba(0, 8, 4, .98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden;
}

.mf-message-shell::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 123, .58), transparent);
    pointer-events: none;
}

.mf-message-intro {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 86px;
    margin: 0 0 12px 0;
    padding: 14px;
    border: 1px solid rgba(0, 255, 123, .18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 22%, rgba(0, 255, 123, .14), transparent 34%),
        linear-gradient(135deg, rgba(6, 41, 22, .88), rgba(2, 19, 10, .92));
}

.mf-message-intro-compact {
    min-height: 78px;
    margin-bottom: 14px;
}

.mf-message-intro-icon {
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    color: #00ff7b;
    font-size: 24px;
    background: rgba(0, 255, 123, .10);
    border: 1px solid rgba(0, 255, 123, .28);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.mf-message-intro-content {
    min-width: 0;
}

.mf-message-eyebrow {
    display: block;
    margin: 0 0 4px 0;
    color: rgba(0, 255, 123, .92);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mf-message-intro h4 {
    margin: 0 0 5px 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: .01em;
}

.mf-message-intro p {
    margin: 0;
    color: rgba(255, 255, 255, .67);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.mf-message-filter-card,
.mf-message-recipient-card,
.mf-message-detail-content {
    position: relative;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.mf-message-filter-card {
    margin-bottom: 12px;
}

.mf-message-page .mf-message-category-combo {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.mf-message-page .mf-message-category-combo label,
.mf-message-page .mf-message-popup-combo label {
    color: rgba(255, 255, 255, .78) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}

.mf-message-page .datagrid-theme {
    float: none !important;
    width: 100% !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 255, 123, .14) !important;
    border-radius: 16px !important;
    background: rgba(0, 0, 0, .20) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .20) !important;
    overflow: auto !important;
}

.mf-message-page .datagrid-theme > label {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    color: rgba(255, 255, 255, .90) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.mf-message-page .datagrid-control-table {
    margin: 0 !important;
    color: rgba(255, 255, 255, .86) !important;
    background: transparent !important;
}

.mf-message-page .datagrid-column-theme th {
    padding: 10px 12px !important;
    border-color: rgba(255, 255, 255, .08) !important;
    background: rgba(255, 255, 255, .045) !important;
}

.mf-message-page .datagrid-control-table td {
    padding: 11px 12px !important;
    border-color: rgba(255, 255, 255, .06) !important;
    color: rgba(255, 255, 255, .82) !important;
}

.mf-message-page .datagrid-control-table tbody tr:hover td {
    background: rgba(0, 255, 123, .055) !important;
}

.mf-message-page .panel-heading-info-theme {
    padding: 13px 15px !important;
    border: 1px solid rgba(0, 255, 123, .18) !important;
    border-bottom: none !important;
    background: linear-gradient(135deg, rgba(38, 107, 67, .98), rgba(7, 47, 24, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.mf-message-page .panel-heading-info-theme .panel-title,
.mf-message-page .panel-heading-info-theme h3 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.mf-message-page .panel-body {
    padding: 13px !important;
    border: 1px solid rgba(0, 255, 123, .16) !important;
    border-top: none !important;
    border-bottom-right-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
    background: linear-gradient(180deg, rgba(1, 16, 8, .92), rgba(0, 7, 3, .96)) !important;
}

.mf-message-compose-form::after,
.mf-message-recipient-card::after,
.mf-message-detail-header::after,
.mf-message-detail-content::after,
.mf-message-compose-actions::after,
.mf-message-recipient-actions::after {
    content: "";
    display: table;
    clear: both;
}

.mf-message-recipient-card {
    margin-bottom: 14px;
}

.mf-message-recipient-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mf-message-recipient-title i {
    color: #00ff7b;
    font-size: 15px;
}

.mf-message-page .textview-theme {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 13px !important;
    border: 1px solid rgba(0, 255, 123, .26) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(3, 26, 14, .88), rgba(1, 14, 7, .92)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 10px 22px rgba(0, 0, 0, .14) !important;
    color: rgba(255, 255, 255, .92) !important;
}

.mf-message-page .textview-theme label {
    display: block !important;
    margin: 0 0 6px 0 !important;
    color: rgba(255, 255, 255, .72) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

.mf-message-page .textview-theme br {
    display: none !important;
}

.mf-message-page .textview-theme b,
.mf-message-page .textview-theme span {
    color: rgba(255, 255, 255, .95) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

.mf-message-recipient-view {
    min-height: 58px;
}

.message-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mf-message-recipient-actions,
.mf-message-compose-actions,
.mf-message-main-actions,
.mf-message-popup-actions {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
}

.mf-message-field {
    float: none !important;
    width: 100% !important;
    margin: 0 0 13px 0 !important;
}

.mf-message-page .mf-message-field .g3-textbox,
.mf-message-page .mf-message-popup-input {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.mf-message-page .mf-message-field .g3-textbox label,
.mf-message-page .mf-message-popup-input label {
    color: rgba(255, 255, 255, .86) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    margin-bottom: 8px !important;
    text-transform: none !important;
}

.mf-message-page .mf-message-textarea textarea.form-control,
.mf-message-page .mf-message-textarea .g3-textbox-input {
    min-height: 128px !important;
}

.mf-message-detail-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 13px;
    border: 1px solid rgba(0, 255, 123, .16);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(4, 35, 18, .88), rgba(1, 14, 8, .94));
}

.mf-message-sender-photo {
    flex: 0 0 72px;
    width: 72px !important;
    height: 72px !important;
    border-radius: 18px !important;
    object-fit: cover;
    border: 2px solid rgba(0, 255, 123, .34);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .26);
    background: rgba(255, 255, 255, .06);
}

.mf-message-detail-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.mf-message-sender-view,
.mf-message-detail-subject,
.mf-message-history-view {
    margin-top: 0 !important;
}

.mf-message-detail-subject {
    margin-bottom: 12px !important;
}

.mf-message-history-view {
    min-height: 120px;
}

.mf-message-popup-title {
    margin: 0 0 14px 0 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
}

.mf-message-popup-section {
    width: 100%;
}

.mf-message-page .mf-message-popup-combo {
    float: none !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
}

.mf-message-page #lblCritica,
.mf-message-page span[id$="lblCritica"] {
    display: block !important;
    margin-top: 12px !important;
    color: #ff6b6b !important;
    font-size: 12px !important;
}

@media (max-width: 430px) {

    .mf-message-container {
        margin-left: 15px;
        margin-right: 15px;
    }

    .mf-message-page {
        padding-right: 0;
        padding-left: 0;
    }

    .mf-message-shell {
        margin: 10px 4px 12px 4px !important;
        padding: 10px !important;
        border-radius: 18px;
    }

    .mf-message-intro {
        align-items: flex-start;
        min-height: 74px;
        padding: 12px;
        border-radius: 16px;
        gap: 11px;
    }

    .mf-message-intro-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 21px;
    }

    .mf-message-intro h4 {
        font-size: 16px;
    }

    .mf-message-intro p {
        font-size: 11px;
    }

    .mf-message-page .panel-body {
        padding: 11px !important;
    }

    .mf-message-page .datagrid-control-table {
        min-width: 520px;
    }

    .mf-message-recipient-actions,
    .mf-message-compose-actions,
    .mf-message-main-actions,
    .mf-message-popup-actions {
        gap: 9px !important;
    }

    .mf-message-page .mf-btn,
    .mf-message-page .mf-btn-secondary,
    .mf-message-page .mf-btn-magenta {
        flex: 1 1 0;
    }

    .mf-message-page .mf-btn a,
    .mf-message-page .mf-btn .c-btn-header,
    .mf-message-page .mf-btn-secondary a,
    .mf-message-page .mf-btn-secondary .c-btn-header,
    .mf-message-page .mf-btn-magenta a,
    .mf-message-page .mf-btn-magenta .c-btn-header {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 39px !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .mf-message-detail-header {
        align-items: flex-start;
        padding: 12px;
    }

    .mf-message-sender-photo {
        flex-basis: 60px;
        width: 60px !important;
        height: 60px !important;
        border-radius: 15px !important;
    }
}

/* Mensagens: fluxo simplificado em uma unica superficie */
.mf-message-container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.mf-message-list,
.mf-message-editor {
    float: none !important;
    width: auto !important;
    margin: 4px 6px 16px 6px !important;
}

.mf-message-list-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
    padding: 4px 2px 14px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.mf-message-list-heading {
    min-width: 0;
}

.mf-message-list-heading h4 {
    margin: 0 0 5px 0;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.15;
}

.mf-message-list-heading p,
.mf-message-compose-intro,
.mf-message-popup-help {
    margin: 0;
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.mf-message-list-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    gap: 10px;
}

.mf-message-page .mf-message-category-combo {
    width: 168px !important;
}

.mf-message-page .mf-message-category-combo label {
    margin-bottom: 6px !important;
}

.mf-message-new-button {
    margin-bottom: 0 !important;
}

.mf-message-page .datagrid-theme {
    margin-top: 0 !important;
    border-color: rgba(255, 255, 255, .09) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .025) !important;
    box-shadow: none !important;
}

.mf-message-page .datagrid-theme > label {
    padding: 11px 13px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .68) !important;
    font-size: 11px !important;
}

.mf-message-page .datagrid-column-theme th {
    background: rgba(255, 255, 255, .025) !important;
}

.mf-message-composer > .panel {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 123, .18) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(3, 20, 11, .97), rgba(0, 8, 4, .98)) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .26) !important;
}

.mf-message-composer .panel-heading-info-theme {
    padding: 17px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 255, 123, .14) !important;
    background: rgba(0, 255, 123, .055) !important;
    box-shadow: none !important;
}

.mf-message-composer .panel-heading-info-theme .panel-title,
.mf-message-composer .panel-heading-info-theme h3 {
    font-size: 15px !important;
    letter-spacing: .025em !important;
}

.mf-message-composer .panel-body {
    padding: 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.mf-message-compose-intro {
    margin-bottom: 18px;
}

.mf-message-recipient-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 17px;
    padding: 0 0 17px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.mf-message-recipient-content {
    flex: 1 1 auto;
    min-width: 0;
}

.mf-message-field-label {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    font-weight: 900;
}

.mf-message-field-label i {
    width: 17px;
    color: #00ff7b;
}

.mf-message-recipient-empty {
    display: block;
    color: rgba(255, 255, 255, .54);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.mf-message-field-hint {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.mf-message-page .mf-message-recipient-view.textview-theme {
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mf-message-page .mf-message-recipient-view.textview-theme label,
.mf-message-page .mf-message-recipient-view .textview-empty {
    display: none !important;
}

.mf-message-page .mf-message-recipient-view.textview-theme span {
    color: rgba(255, 255, 255, .92) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.mf-message-recipient-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    width: auto !important;
    margin: 0 !important;
}

.mf-message-field {
    margin-bottom: 16px !important;
}

.mf-message-page .mf-message-field .g3-textbox label {
    margin-bottom: 7px !important;
}

.mf-message-page .mf-message-field input.form-control,
.mf-message-page .mf-message-field textarea.form-control,
.mf-message-page .mf-message-field .g3-textbox-input {
    border-color: rgba(255, 255, 255, .15) !important;
    background: rgba(255, 255, 255, .045) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.mf-message-page .mf-message-field input.form-control:focus,
.mf-message-page .mf-message-field textarea.form-control:focus,
.mf-message-page .mf-message-field .g3-textbox-input:focus {
    border-color: rgba(0, 255, 123, .56) !important;
    background: rgba(0, 255, 123, .035) !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 123, .08) !important;
}

.mf-message-page .mf-message-field input::placeholder,
.mf-message-page .mf-message-field textarea::placeholder,
.mf-message-page .mf-message-popup-input input::placeholder {
    color: rgba(255, 255, 255, .35) !important;
}

.mf-message-page .mf-message-textarea textarea.form-control,
.mf-message-page .mf-message-textarea .g3-textbox-input {
    min-height: 168px !important;
    resize: vertical;
}

.mf-message-composer .mf-message-compose-actions {
    justify-content: space-between !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.mf-message-shell-detail {
    margin-top: 4px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(3, 20, 11, .97), rgba(0, 8, 4, .98));
}

.mf-message-detail-header {
    margin-bottom: 0;
    padding: 5px 5px 15px 5px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    border-radius: 0;
    background: transparent;
}

.mf-message-detail-content {
    padding: 16px 5px 4px 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mf-message-detail-content .textview-theme {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mf-message-detail-subject {
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.mf-message-popup-help {
    margin: -6px 0 16px 0;
}

.mf-message-popup-search {
    display: grid;
    grid-template-columns: minmax(140px, .75fr) minmax(220px, 1.25fr);
    gap: 10px;
    align-items: end;
}

.mf-message-page .mf-message-popup-combo,
.mf-message-page .mf-message-popup-input {
    width: 100% !important;
    margin: 0 0 12px 0 !important;
}

.mf-message-popup-actions {
    justify-content: flex-end !important;
}

@media (max-width: 620px) {
    .mf-message-list-toolbar,
    .mf-message-recipient-row {
        align-items: stretch;
        flex-direction: column;
    }

    .mf-message-list-toolbar {
        gap: 14px;
    }

    .mf-message-list-tools {
        align-items: flex-end;
        width: 100%;
    }

    .mf-message-page .mf-message-category-combo {
        flex: 1 1 auto;
        width: auto !important;
    }

    .mf-message-recipient-row {
        gap: 12px;
    }

    .mf-message-recipient-actions {
        justify-content: flex-start;
    }

    .mf-message-popup-search {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mf-message-popup-actions > .mf-btn,
    .mf-message-popup-actions > .mf-btn-secondary,
    .mf-message-popup-actions > .mf-btn-magenta {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .mf-message-popup-actions > .mf-btn a,
    .mf-message-popup-actions > .mf-btn .c-btn-header,
    .mf-message-popup-actions > .mf-btn-secondary a,
    .mf-message-popup-actions > .mf-btn-secondary .c-btn-header,
    .mf-message-popup-actions > .mf-btn-magenta a,
    .mf-message-popup-actions > .mf-btn-magenta .c-btn-header {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 430px) {
    .mf-message-list,
    .mf-message-editor {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .mf-message-list-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .mf-message-page .mf-message-category-combo {
        width: 100% !important;
    }

    .mf-message-new-button,
    .mf-message-new-button a,
    .mf-message-new-button .c-btn-header {
        width: 100% !important;
    }

    .mf-message-composer .panel-heading-info-theme {
        padding: 15px !important;
    }

    .mf-message-composer .panel-body {
        padding: 15px !important;
    }

    .mf-message-recipient-actions > div,
    .mf-message-compose-actions > div,
    .mf-message-popup-actions > div {
        flex: 1 1 0;
    }
}

/* =========================================================
   MatchFit Portal - Renovação Moderna
   Tela: WebForms/Aluno/RenovacaoPge.aspx
   Componente: BannerUsc / Modo=Plano
   ========================================================= */
.mf-renewal-page-shell {
    padding-left: 5px;
    padding-right: 5px;
}

.mf-renewal-plan-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0px 118px 0px;
}

.mf-renewal-hero {
    position: relative;
    overflow: hidden;
    margin: 4px 0 18px 0;
    padding: 22px 22px 24px 22px;
    border-radius: 22px;
    border: 1px solid rgba(0,178,66,.44);
    background:
        radial-gradient(circle at 95% 0%, rgba(230,0,126,.22), transparent 28%),
        radial-gradient(circle at 5% 0%, rgba(0,178,66,.24), transparent 32%),
        linear-gradient(145deg, #092213 0%, #06120b 56%, #020503 100%);
    box-shadow: 0 14px 36px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
    color: #fff;
}

.mf-renewal-hero:before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand-green), var(--brand-magenta));
}

.mf-renewal-hero span {
    display: block;
    color: var(--brand-green);
    font-family: Oswald, Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .10em;
    line-height: 1;
    margin-bottom: 8px;
}

.mf-renewal-hero strong {
    display: block;
    max-width: 620px;
    color: #fff;
    font-family: Oswald, Arial, sans-serif;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.05;
}

.mf-renewal-hero small {
    display: block;
    max-width: 580px;
    margin-top: 8px;
    color: rgba(255,255,255,.76);
    font-family: Oswald, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.25;
}

.mf-renewal-plan-page .summary-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 16px 0;
}

.banner-theme {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.banner-theme .banner-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 390px;
    border-radius: 20px;
    border: 1px solid rgba(0,178,66,.32);
    background:
        radial-gradient(circle at 100% 0%, rgba(0,178,66,.16), transparent 30%),
        linear-gradient(160deg, #071c10 0%, #041009 58%, #010403 100%);
    box-shadow: 0 14px 34px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05);
    color: #fff;
}

.banner-theme .banner-card:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,178,66,.38), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.055), transparent 34%);
    opacity: .42;
}

.banner-theme .banner-card:after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--brand-green), rgba(230,0,126,.92));
    box-shadow: 0 0 20px rgba(0,178,66,.32);
}

.banner-theme .banner-content {
    position: relative;
    z-index: 1;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 22px 22px;
}

.banner-theme .banner-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 14px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(0,178,66,.34);
    background: rgba(0,0,0,.24);
    color: rgba(255,255,255,.86);
    font-family: Oswald, Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.banner-theme .banner-kicker i {
    color: var(--brand-green);
    font-size: 13px;
}

.banner-theme .banner-title {
    margin: 0 0 8px 0;
    color: #fff;
    font-family: Oswald, Arial, sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: .01em;
    text-shadow: 0 2px 12px rgba(0,0,0,.38);
}

.banner-theme .banner-subtitle {
    min-height: 34px;
    color: rgba(255,255,255,.82);
    font-family: Oswald, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.22;
}

.banner-theme .banner-items {
    list-style: none !important;
    margin: 18px 0 0 0;
    padding: 0 !important;
}

.banner-theme .banner-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 9px 0;
    padding: 0;
    color: rgba(255,255,255,.93);
    font-family: Oswald, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.22;
}

.banner-theme .banner-item:before {
    content: none !important;
    display: none !important;
}

.banner-theme .banner-item-check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 0;
    border-radius: 999px;
    background: rgba(0,178,66,.18);
    border: 1px solid rgba(0,178,66,.40);
}

.banner-theme .banner-item-check:before {
    content: "\f00c";
    display: block;
    color: var(--brand-green);
    font-family: FontAwesome;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

.banner-theme .banner-price {
    display: block;
    margin: 16px 0 16px 0;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0,178,66,.30);
    background: rgba(0,0,0,.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.banner-theme .banner-price-label {
    display: block;
    margin-bottom: 4px;
    color: rgba(255,255,255,.54);
    font-family: Oswald, Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.banner-theme .banner-price-value {
    display: block;
    color: #fff;
    font-family: Oswald, Arial, sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.12;
}

.banner-theme .banner-price-value span {
    color: var(--brand-green);
    font-size: 22px;
}

.banner-theme .banner-extra-container {
    margin-top: 6px;
}

.banner-theme .banner-extra-line {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(230,0,126,.26);
    background: rgba(230,0,126,.08);
    color: rgba(255,255,255,.86);
    font-family: Oswald, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.2;
    word-break: break-word;
}

.banner-theme .banner-progress-container {
    margin-top: 14px;
}

.banner-theme .banner-progress-line svg {
    width: 100%;
    height: 10px;
}

.banner-theme .banner-progress-label {
    display: block;
    margin-bottom: 6px;
    color: rgba(255,255,255,.74);
    font-family: Oswald, Arial, sans-serif;
    font-weight: 700;
}

.banner-theme .banner-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
}

.banner-theme .banner-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    width: 100%;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-family: Oswald, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid rgba(0,178,66,.70) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #00B242 0%, #00D95A 100%) !important;
    box-shadow: 0 10px 24px rgba(0,178,66,.26), inset 0 1px 0 rgba(255,255,255,.18);
}

.banner-theme .banner-button:hover,
.banner-theme .banner-button:focus {
    color: #fff !important;
    border-color: rgba(255,255,255,.30) !important;
    box-shadow: 0 12px 30px rgba(0,178,66,.34), 0 0 0 3px rgba(0,178,66,.12);
    transform: translateY(-1px);
}

.banner-theme .banner-button-secondary {
    border-color: rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.06) !important;
    box-shadow: none;
}

@media (max-width: 991px) {
    .mf-renewal-plan-page .summary-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .mf-renewal-plan-page {
        padding: 0 10px 112px 10px;
    }

    .mf-renewal-hero {
        margin-bottom: 14px;
        padding: 20px 18px 22px 20px;
        border-radius: 20px;
    }

    .mf-renewal-hero strong {
        font-size: 24px;
    }

    .mf-renewal-hero small {
        font-size: 14px;
    }

    .mf-renewal-plan-page .summary-group {
        display: block !important;
        margin-bottom: 0;
    }

    .mf-renewal-plan-page .banner-theme {
        margin-bottom: 16px !important;
    }

    .banner-theme .banner-card,
    .banner-theme .banner-content {
        min-height: unset;
    }

    .banner-theme .banner-content {
        padding: 22px 18px 18px 18px;
    }

    .banner-theme .banner-title {
        font-size: 21px;
    }

    .banner-theme .banner-subtitle {
        min-height: unset;
    }

    .banner-theme .banner-actions {
        padding-top: 16px;
    }
}

@media (max-width: 390px) {
    .mf-renewal-plan-page {
        padding-left: 8px;
        padding-right: 8px;
    }

    .mf-renewal-hero {
        padding: 18px 16px 20px 18px;
    }

    .mf-renewal-hero strong {
        font-size: 22px;
    }

    .banner-theme .banner-title {
        font-size: 20px;
    }

    .banner-theme .banner-price-value,
    .banner-theme .banner-price-value span {
        font-size: 20px;
    }
}

/* =========================================================
   MatchFit Portal - Sistema padrão de botões (ButtonUsc)
   Generaliza o botão "pill" com gradiente/glow criado
   originalmente só para CheckinClubePge.aspx
   (.mf-club-checkin-primary/secondary) e depois duplicado,
   com raio/tamanho diferentes, em MensagemPge.aspx
   (.mf-message-primary-button/secondary-button/action-button).
   A maioria das telas do Aluno (Avaliação, Acompanhamento,
   Atividade, HorarioAula, Pagamento, Renovação, Suspensão,
   PlayList) não tinha CssClass nenhuma no ButtonUsc e caía no
   botão padrão pequeno do Metronic legado.
   Aplicar via CssClass do ButtonUsc:
     .mf-btn              -> botão primário (verde, cor padrão do app)
     .mf-btn-secondary     -> botão neutro/outline (ex.: VOLTAR)
     .mf-btn-magenta       -> ação de destaque/cancelamento (ex.: PAGAR, DESMARCAR)
     .mf-btn-block         -> ocupa 100% da largura do container
     .mf-btn-compact       -> variante menor para espaços apertados (popups)
     .mf-btn-icon-only     -> botão quadrado só com ícone, sem título
     .mf-btn-row           -> wrapper flex para agrupar botões lado a lado
   Escopo: apenas área do Aluno (tema escuro mf-*). Os dashboards
   administrativos legados de Academia/* não usam essas classes e
   continuam com o botão padrão do Metronic (fora de escopo aqui).
   ========================================================= */

.mf-btn-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0 0;
}

.mf-btn,
.mf-btn-secondary,
.mf-btn-magenta {
    float: none !important;
    display: inline-flex !important;
    margin: 0 8px 8px 0 !important;
    padding: 0 !important;
}

/* Dentro de wrappers flex com gap próprio (linhas de ação, popups),
   a margem individual do botão vira redundante e some. */
.mf-btn-row > .mf-btn,
.mf-btn-row > .mf-btn-secondary,
.mf-btn-row > .mf-btn-magenta,
.mf-club-checkin-actions > .mf-btn,
.mf-club-checkin-actions > .mf-btn-secondary,
.mf-message-recipient-actions > .mf-btn,
.mf-message-recipient-actions > .mf-btn-secondary,
.mf-message-recipient-actions > .mf-btn-magenta,
.mf-message-compose-actions > .mf-btn,
.mf-message-compose-actions > .mf-btn-secondary,
.mf-message-compose-actions > .mf-btn-magenta,
.mf-message-main-actions > .mf-btn,
.mf-message-main-actions > .mf-btn-secondary,
.mf-message-main-actions > .mf-btn-magenta,
.mf-message-popup-actions > .mf-btn,
.mf-message-popup-actions > .mf-btn-secondary,
.mf-message-popup-actions > .mf-btn-magenta,
.agenda-nav-card .panel-buttons-theme > .mf-btn,
.agenda-nav-card .panel-buttons-theme > .mf-btn-secondary,
.agenda-nav-card .panel-buttons-theme > .mf-btn-magenta {
    margin: 0 !important;
}

.mf-btn a,
.mf-btn input,
.mf-btn .c-btn-header,
.mf-btn-secondary a,
.mf-btn-secondary input,
.mf-btn-secondary .c-btn-header,
.mf-btn-magenta a,
.mf-btn-magenta input,
.mf-btn-magenta .c-btn-header {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 44px !important;
    min-width: 120px !important;
    width: auto !important;
    max-width: none !important;
    padding: 11px 20px !important;
    border-radius: 999px !important;
    font-family: Oswald, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.mf-btn a,
.mf-btn input,
.mf-btn .c-btn-header {
    border: 1px solid rgba(0,178,66,.74) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #00B242 0%, #00D95A 100%) !important;
    box-shadow: 0 10px 24px rgba(0,178,66,.25), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.mf-btn-secondary a,
.mf-btn-secondary input,
.mf-btn-secondary .c-btn-header {
    border: 1px solid rgba(255,255,255,.16) !important;
    color: rgba(255,255,255,.88) !important;
    background: rgba(255,255,255,.06) !important;
    box-shadow: none !important;
}

.mf-btn-magenta a,
.mf-btn-magenta input,
.mf-btn-magenta .c-btn-header {
    border: 1px solid rgba(230,0,126,.55) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #E6007E 0%, #9E0057 100%) !important;
    box-shadow: 0 10px 24px rgba(230,0,126,.24), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.mf-btn-block {
    display: flex !important;
    width: 100%;
    margin-right: 0 !important;
}

.mf-btn-block a,
.mf-btn-block input,
.mf-btn-block .c-btn-header {
    width: 100% !important;
}

.mf-btn-compact a,
.mf-btn-compact input,
.mf-btn-compact .c-btn-header {
    min-height: 38px !important;
    min-width: 90px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
}

.mf-btn-icon-only a,
.mf-btn-icon-only input,
.mf-btn-icon-only .c-btn-header {
    min-width: 44px !important;
    width: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
}

.mf-btn a:hover, .mf-btn a:focus,
.mf-btn input:hover, .mf-btn input:focus,
.mf-btn .c-btn-header:hover, .mf-btn .c-btn-header:focus {
    color: #fff !important;
    border-color: rgba(255,255,255,.34) !important;
    box-shadow: 0 12px 30px rgba(0,178,66,.28), 0 0 0 3px rgba(0,178,66,.12) !important;
    transform: translateY(-1px);
}

.mf-btn-secondary a:hover, .mf-btn-secondary a:focus,
.mf-btn-secondary .c-btn-header:hover, .mf-btn-secondary .c-btn-header:focus {
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.24), 0 0 0 3px rgba(255,255,255,.08) !important;
    transform: translateY(-1px);
}

.mf-btn-magenta a:hover, .mf-btn-magenta a:focus,
.mf-btn-magenta .c-btn-header:hover, .mf-btn-magenta .c-btn-header:focus {
    color: #fff !important;
    border-color: rgba(255,255,255,.34) !important;
    box-shadow: 0 12px 30px rgba(230,0,126,.30), 0 0 0 3px rgba(230,0,126,.14) !important;
    transform: translateY(-1px);
}

.mf-btn a[disabled], .mf-btn .c-btn-disabled, .mf-btn .aspNetDisabled,
.mf-btn-secondary a[disabled], .mf-btn-secondary .c-btn-disabled, .mf-btn-secondary .aspNetDisabled,
.mf-btn-magenta a[disabled], .mf-btn-magenta .c-btn-disabled, .mf-btn-magenta .aspNetDisabled {
    opacity: .48 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

@media (max-width: 480px) {
    .mf-btn-row.mf-btn-row-stack {
        flex-direction: column;
        align-items: stretch;
    }

    .mf-btn-row.mf-btn-row-stack .mf-btn,
    .mf-btn-row.mf-btn-row-stack .mf-btn-secondary,
    .mf-btn-row.mf-btn-row-stack .mf-btn-magenta {
        width: 100%;
    }

    .mf-btn-row.mf-btn-row-stack .mf-btn a,
    .mf-btn-row.mf-btn-row-stack .mf-btn .c-btn-header,
    .mf-btn-row.mf-btn-row-stack .mf-btn-secondary a,
    .mf-btn-row.mf-btn-row-stack .mf-btn-secondary .c-btn-header,
    .mf-btn-row.mf-btn-row-stack .mf-btn-magenta a,
    .mf-btn-row.mf-btn-row-stack .mf-btn-magenta .c-btn-header {
        width: 100% !important;
    }
}

/* =========================================================
   MatchFit Portal - Check-in Clube Moderno
   Tela: WebForms/Aluno/CheckinClubePge.aspx
   ========================================================= */

.mf-face-scan-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #00d05a;
}

    .mf-face-scan-icon svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.mf-club-checkin-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 15px 118px 15px;
}

.mf-club-checkin-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 4px 0 14px 0;
    padding: 19px 18px;
    border-radius: 22px;
    border: 1px solid rgba(0,178,66,.42);
    background:
        radial-gradient(circle at 92% 0%, rgba(230,0,126,.18), transparent 28%),
        radial-gradient(circle at 8% 0%, rgba(0,178,66,.22), transparent 34%),
        linear-gradient(145deg, #092213 0%, #06120b 58%, #020503 100%);
    box-shadow: 0 14px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
    color: #fff;
}

.mf-club-checkin-hero:before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand-green), var(--brand-magenta));
    box-shadow: 0 0 20px rgba(0,178,66,.26);
}

.mf-club-checkin-hero-icon {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    border: 1px solid rgba(0,178,66,.36);
    background: rgba(0,0,0,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.24);
}

.mf-club-checkin-hero-icon i {
    color: var(--brand-green);
    font-size: 25px;
    text-shadow: 0 0 16px rgba(0,178,66,.42);
}

.mf-club-checkin-hero-text {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.mf-club-checkin-hero-text span {
    display: block;
    margin-bottom: 6px;
    color: var(--brand-green);
    font-family: Oswald, Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .10em;
    line-height: 1;
}

.mf-club-checkin-hero-text strong {
    display: block;
    color: #fff;
    font-family: Oswald, Arial, sans-serif;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.08;
}

.mf-club-checkin-hero-text small {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.74);
    font-family: Oswald, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.mf-club-checkin-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px 0;
}

.mf-club-checkin-step {
    min-width: 0;
    padding: 11px 8px;
    border-radius: 16px;
    border: 1px solid rgba(0,178,66,.24);
    background: linear-gradient(180deg, rgba(4,30,16,.82), rgba(1,12,7,.88));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 18px rgba(0,0,0,.22);
    color: rgba(255,255,255,.86);
    font-family: Oswald, Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.12;
    text-align: center;
}

.mf-club-checkin-step i {
    display: block;
    margin: 0 0 6px 0;
    color: var(--brand-green);
    font-size: 17px;
}

.mf-club-checkin-card,
.mf-club-checkin-active-card {
    position: relative;
    overflow: hidden;
    margin: 0 0 14px 0;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(0,178,66,.34);
    background:
        radial-gradient(circle at 100% 0%, rgba(0,178,66,.14), transparent 32%),
        linear-gradient(160deg, #071c10 0%, #041009 58%, #010403 100%);
    box-shadow: 0 14px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
    color: #fff;
}

.mf-club-checkin-card:before,
.mf-club-checkin-active-card:before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 0;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--brand-green), rgba(230,0,126,.86));
    box-shadow: 0 0 18px rgba(0,178,66,.30);
}

.mf-club-checkin-card-title,
.mf-club-checkin-active-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.mf-club-checkin-card-title > span,
.mf-club-checkin-active-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(0,178,66,.40);
    background: rgba(0,178,66,.14);
    color: var(--brand-green);
    font-family: Oswald, Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.mf-club-checkin-card-title strong,
.mf-club-checkin-active-heading strong {
    display: block;
    color: #fff;
    font-family: Oswald, Arial, sans-serif;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.08;
}

.mf-club-checkin-card-title small,
.mf-club-checkin-active-heading small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.66);
    font-family: Oswald, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.22;
}

.mf-club-checkin-active-heading span {
    display: block;
    margin-bottom: 4px;
    color: var(--brand-green);
    font-family: Oswald, Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
    line-height: 1;
}

.mf-club-checkin-form {
    position: relative;
    z-index: 1;
    margin-bottom: 13px;
}

.mf-club-checkin-page .g3-combobox {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.mf-club-checkin-page .g3-combobox label {
    display: block !important;
    margin: 0 0 7px 0 !important;
    color: rgba(255,255,255,.86) !important;
    font-family: Oswald, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.mf-club-checkin-page .g3-combobox .form-control,
.mf-club-checkin-page .g3-select-button {
    min-height: 44px !important;
    border-radius: 13px !important;
    border-color: rgba(0,178,66,.56) !important;
    background: linear-gradient(180deg, rgba(4,30,16,.96), rgba(1,14,8,.98)) !important;
    color: #f5fff8 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.mf-club-checkin-details {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
}

.mf-club-checkin-detail {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-height: 62px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(0,178,66,.20);
    background: rgba(0,0,0,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.mf-club-checkin-detail-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(0,178,66,.26);
    background: rgba(0,178,66,.12);
}

.mf-club-checkin-detail-icon i {
    color: var(--brand-green);
    font-size: 16px;
}

.mf-club-checkin-detail-body {
    flex: 1 1 auto;
    min-width: 0;
}

.mf-club-checkin-page .textview-theme.mf-club-checkin-textview,
.mf-club-checkin-page .textview-theme.mf-club-checkin-active-info {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.92) !important;
}

.mf-club-checkin-page .mf-club-checkin-active-info {
    position: relative;
    z-index: 1;
    display: block !important;
    margin: 4px 0 0 0 !important;
    padding: 13px !important;
    border: 1px solid rgba(0,178,66,.22) !important;
    border-radius: 16px !important;
    background: rgba(0,0,0,.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.mf-club-checkin-page .textview-theme label,
.mf-club-checkin-page .textview-title {
    display: block !important;
    margin: 0 0 5px 0 !important;
    color: rgba(255,255,255,.58) !important;
    font-family: Oswald, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

.mf-club-checkin-page .textview-value,
.mf-club-checkin-page .textview-empty,
.mf-club-checkin-page .textview-bottom {
    display: block !important;
    color: rgba(255,255,255,.92) !important;
    font-family: Oswald, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.32 !important;
    word-break: break-word !important;
}

.mf-club-checkin-page .textview-empty {
    color: rgba(255,255,255,.48) !important;
}

.mf-club-checkin-actions {
    position: relative;
    z-index: 1;
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.mf-club-checkin-actions .mf-btn {
    flex: 1 1 auto;
}

.mf-club-checkin-actions .mf-btn-secondary {
    flex: 0 0 auto;
}

.mf-club-checkin-active-card {
    border-color: rgba(0,178,66,.42);
    background:
        radial-gradient(circle at 100% 0%, rgba(0,178,66,.18), transparent 34%),
        linear-gradient(160deg, #082313 0%, #031008 60%, #010403 100%);
}

.mf-club-checkin-active-icon {
    background: rgba(0,178,66,.18);
}

.mf-club-checkin-active-actions {
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .mf-club-checkin-page {
        padding: 0 8px 118px 8px !important;
    }

    .mf-club-checkin-hero {
        align-items: flex-start;
        padding: 18px 16px;
        border-radius: 20px;
    }

    .mf-club-checkin-hero-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .mf-club-checkin-hero-text strong {
        font-size: 21px;
    }

    .mf-club-checkin-card,
    .mf-club-checkin-active-card {
        padding: 15px;
        border-radius: 20px;
    }

    .mf-club-checkin-card-title strong,
    .mf-club-checkin-active-heading strong {
        font-size: 18px;
    }
}

@media (max-width: 390px) {
    .mf-club-checkin-page {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .mf-club-checkin-hero {
        gap: 12px;
        padding: 16px 14px;
    }

    .mf-club-checkin-hero-icon {
        width: 44px;
        height: 44px;
    }

    .mf-club-checkin-hero-icon i {
        font-size: 21px;
    }

    .mf-club-checkin-hero-text strong {
        font-size: 20px;
    }

    .mf-club-checkin-hero-text small {
        font-size: 13px;
    }

    .mf-club-checkin-step {
        padding: 10px 6px;
        font-size: 11px;
    }

    .mf-club-checkin-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mf-club-checkin-actions .mf-btn,
    .mf-club-checkin-actions .mf-btn-secondary {
        width: 100% !important;
        flex: 1 1 auto;
    }
}

/* =========================================================
   MatchFit Portal - Login: modal do usuário conectado
   Componente: WebUserControls/Fragments/LoginUsc.ascx
   Extraído do <style> embutido no .ascx (Onda 2 da
   refatoração visual) para centralizar em c-modern.css.
   ========================================================= */

#login-user .modal-content {
    border: 1px solid rgba(0, 202, 84, .38) !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 202, 84, .18), transparent 34%),
        linear-gradient(135deg, rgba(0, 45, 20, .98), rgba(0, 10, 8, .98) 58%, rgba(21, 12, 19, .98)) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.05);
    overflow: hidden;
}

#login-user .modal-body {
    padding: 22px 38px 34px !important;
}

#login-user .login-user-title {
    margin: 0;
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

#login-user .login-user-subtitle {
    margin: 7px 0 0;
    color: rgba(255,255,255,.66);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

#login-user .login-user-profile {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin-top: 26px;
    margin-bottom: 22px;
}

#login-user .login-user-avatar {
    width: 112px;
    height: 112px;
    border-radius: 999px;
    border: 3px solid rgba(0, 202, 84, .72);
    background: rgba(255,255,255,.07);
    box-shadow: 0 12px 28px rgba(0,0,0,.34), 0 0 0 6px rgba(0, 202, 84, .08);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#login-user .login-user-avatar img,
#login-user .login-user-avatar .avatar,
#login-user .login-user-avatar [class*="avatar"] img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 999px !important;
}

#login-user .login-user-avatar .avatar-fallback {
    display: none;
}

#login-user .login-user-avatar .avatar-placeholder > a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

#login-user .login-user-avatar.avatar-image-placeholder {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

#login-user .login-user-avatar .avatar-placeholder img {
    display: none !important;
}

#login-user .login-user-avatar .avatar-placeholder .avatar-fallback {
    display: block;
    color: #ffffff;
    font-family: FontAwesome;
    font-size: 58px;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

#login-user .login-user-identity {
    min-width: 0;
}

#login-user .login-user-role {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.055);
    color: #ff4f57;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .05em;
}

#login-user .login-user-role:before {
    content: "\f0b1";
    margin-right: 9px;
    font-family: FontAwesome;
    font-size: 16px;
    font-weight: normal;
}

#login-user .login-user-name {
    display: block;
    margin-top: 12px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.015em;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
    overflow-wrap: anywhere;
}

#login-user .login-user-summary {
    padding: 20px 20px 18px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.17);
    background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(0, 202, 84, .035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

#login-user .login-info-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#login-user .login-info-unit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    max-width: 100%;
    min-height: 38px;
    margin-bottom: 16px;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(0, 202, 84, .12);
    border: 1px solid rgba(0, 202, 84, .50);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .03em;
}

#login-user .login-info-unit:before {
    content: "\f041";
    margin-right: 10px;
    color: #00d968;
    font-family: FontAwesome;
    font-size: 16px;
    font-weight: normal;
}

#login-user .login-info-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) minmax(92px, auto);
    gap: 14px;
    align-items: center;
    min-height: 58px;
    border-top: 1px dashed rgba(255,255,255,.14);
}

#login-user .login-info-row:first-of-type {
    border-top-style: solid;
}

#login-user .login-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(0, 202, 84, .12);
    color: #00d968;
    font-family: FontAwesome;
    font-size: 16px;
    line-height: 1;
}

#login-user .login-info-label {
    color: rgba(255,255,255,.68);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

#login-user .login-info-value {
    min-width: 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    text-align: right;
    overflow-wrap: anywhere;
}

#login-user .login-status-value {
    color: #19dd76;
    text-transform: uppercase;
}

#login-user .login-user-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
    margin-top: 24px;
}

#login-user .login-user-action-primary,
#login-user .login-user-action-secondary,
#login-user .login-user-action-secondary > span,
#login-user .login-user-action-secondary > div {
    display: flex;
    width: 100%;
    height: 52px;
    align-items: stretch;
}

#login-user .login-user-action-primary a,
#login-user .login-user-action-primary button,
#login-user .login-user-action-primary input[type="submit"],
#login-user .login-user-action-primary .btn,
#login-user a.login-session-pill {
    display: inline-flex !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: .01em !important;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px rgba(0,0,0,.22) !important;
    transition: transform .18s ease, filter .18s ease, border-color .18s ease !important;
}

#login-user .login-user-action-primary a,
#login-user .login-user-action-primary button,
#login-user .login-user-action-primary input[type="submit"],
#login-user .login-user-action-primary .btn {
    border: 1px solid rgba(255,255,255,.27) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.06)) !important;
    color: #ffffff !important;
}

#login-user a.login-session-pill {
    border: 1px solid rgba(0, 202, 84, .70) !important;
    background: linear-gradient(135deg, #00d968, #00ad4f) !important;
    color: #ffffff !important;
}

#login-user .login-user-action-primary a:before,
#login-user .login-user-action-primary button:before,
#login-user .login-user-action-primary .btn:before {
    content: "\f08b";
    font-family: FontAwesome;
    font-size: 18px;
    font-weight: normal;
}

#login-user a.login-session-pill:before {
    content: "\f007";
    display: inline-block;
    margin-right: 0;
    color: #ffffff;
    font-family: FontAwesome;
    font-size: 18px;
    font-weight: normal;
    line-height: 1;
}

#login-user .login-user-action-primary a:hover,
#login-user .login-user-action-primary button:hover,
#login-user .login-user-action-primary input[type="submit"]:hover,
#login-user .login-user-action-primary .btn:hover,
#login-user a.login-session-pill:hover,
#login-user a.login-session-pill:focus {
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    filter: brightness(1.06);
}

#login-user a.login-session-pill label {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
}

@media (max-width: 540px) {
    #login-user .modal-body {
        padding: 18px 30px 28px !important;
    }

    #login-user .login-user-title {
        font-size: 22px;
    }

    #login-user .login-user-subtitle {
        font-size: 12px;
    }

    #login-user .login-user-profile {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 14px;
        margin-top: 18px;
        margin-bottom: 18px;
    }

    #login-user .login-user-avatar {
        width: 78px;
        height: 78px;
        border-width: 2px;
        box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 0 4px rgba(0, 202, 84, .08);
    }

    #login-user .login-user-role {
        min-height: 28px;
        padding: 7px 10px;
        font-size: 11px;
        border-radius: 10px;
    }

    #login-user .login-user-role:before {
        margin-right: 7px;
        font-size: 13px;
    }

    #login-user .login-user-name {
        margin-top: 8px;
        font-size: 19px;
    }

    #login-user .login-user-summary {
        padding: 14px 14px 12px;
        border-radius: 18px;
    }

    #login-user .login-info-unit {
        min-height: 30px;
        margin-bottom: 10px;
        padding: 7px 12px;
        font-size: 11px;
    }

    #login-user .login-info-row {
        grid-template-columns: 34px minmax(0, 1fr) minmax(82px, auto);
        gap: 8px;
        min-height: 42px;
    }

    #login-user .login-info-icon {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    #login-user .login-info-label {
        font-size: 11px;
    }

    #login-user .login-info-value {
        font-size: 12px;
    }

    #login-user .login-user-actions {
        gap: 12px;
        margin-top: 18px;
    }

    #login-user .login-user-action-primary,
    #login-user .login-user-action-secondary,
    #login-user .login-user-action-secondary > span,
    #login-user .login-user-action-secondary > div,
    #login-user .login-user-action-primary a,
    #login-user .login-user-action-primary button,
    #login-user .login-user-action-primary input[type="submit"],
    #login-user .login-user-action-primary .btn,
    #login-user a.login-session-pill {
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        gap: 7px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #login-user .login-user-action-primary a:before,
    #login-user .login-user-action-primary button:before,
    #login-user .login-user-action-primary .btn:before,
    #login-user a.login-session-pill:before {
        font-size: 12px;
    }
}

/* =========================================================
   MatchFit Portal - Avisos e Benefícios (cards de banner)
   Telas: WebForms/Aluno/AvisoPge.aspx, WebForms/Aluno/BeneficioPge.aspx
   Unifica o padrão que estava duplicado nas duas telas (mix de
   classes utilitárias legadas, algumas sem efeito/mortas) em um
   único componente de card reutilizável.
   ========================================================= */

.mf-notice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mf-notice-card {
    flex: 0 1 360px;
    max-width: 360px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow-1);
    background: var(--theme-tile-backcolor);
    overflow: hidden;
}

.mf-notice-card img {
    display: block;
    width: 100%;
}

.mf-notice-card-action {
    padding: 14px 16px;
    text-align: center;
    background: var(--theme-color);
}

.mf-notice-card-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
}

@media (max-width: 480px) {
    .mf-notice-card {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* =========================================================
   MatchFit Portal - Dashboard do aluno
   Tela: WebForms/Aluno/DashboardPge.aspx
   As classes mf-dashboard-* já existiam no markup mas sem CSS
   correspondente (hero renderizava como texto puro). Estilo
   segue o mesmo padrão visual de .mf-club-checkin-hero.
   ========================================================= */

.mf-dashboard-hero {
    position: relative;
    overflow: hidden;
    margin: 4px 0 16px 0;
    padding: 19px 20px;
    border-radius: var(--m-radius-lg);
    border: 1px solid rgba(0,178,66,.42);
    background:
        radial-gradient(circle at 92% 0%, rgba(230,0,126,.18), transparent 28%),
        radial-gradient(circle at 8% 0%, rgba(0,178,66,.22), transparent 34%),
        linear-gradient(145deg, #092213 0%, #06120b 58%, #020503 100%);
    box-shadow: 0 14px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
    color: #fff;
}

.mf-dashboard-hero:before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand-green), var(--brand-magenta));
    box-shadow: 0 0 20px rgba(0,178,66,.26);
}

.mf-dashboard-hero span {
    display: block;
    margin-bottom: 6px;
    color: var(--brand-green);
    font-family: Oswald, Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .10em;
    line-height: 1;
}

.mf-dashboard-hero strong {
    display: block;
    color: #fff;
    font-family: Oswald, Arial, sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}

.mf-dashboard-hero small {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.74);
    font-family: Oswald, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.mf-dashboard-page .banner-theme {
    margin-bottom: 16px !important;
}

.mf-dashboard-page .banner-theme .banner-card,
.mf-dashboard-page .banner-theme .banner-content {
    min-height: unset;
}

.mf-dashboard-grid {
    margin-top: 4px;
    overflow: hidden;
}

@media (max-width: 767px) {
    .mf-dashboard-hero {
        padding: 16px;
    }

    .mf-dashboard-hero strong {
        font-size: 20px;
    }
}

/* =========================================================
   MatchFit Portal - ChartUsc modo moderno (Modo="Moderno")
   As classes chart-header/chart-kicker/chart-title/chart-body
   já existiam no markup (ChartUsc.ascx) mas sem CSS
   correspondente (cabeçalho do gráfico renderizava como texto
   puro sem estilo). Usado em DashboardPge.aspx e SuspensaoPge.aspx.
   Escopado em .chart-theme-modern para não afetar o ChartUsc
   em Modo="Padrao" usado nos dashboards administrativos legados
   de Academia/*.
   ========================================================= */

.chart-theme-modern {
    padding: 14px 16px 8px 16px;
    border: 1px solid rgba(0,178,66,.42);
    border-radius: var(--m-radius-lg) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
}

.chart-theme-modern .chart-header {
    margin-bottom: 6px;
}

.chart-theme-modern .chart-kicker {
    display: block;
    color: var(--brand-green);
    font-family: Oswald, Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .10em;
    line-height: 1;
    text-transform: uppercase;
}

.chart-theme-modern .chart-title {
    display: block;
    margin: 4px 0 0 0;
    color: #fff;
    font-family: Oswald, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.chart-theme-modern .chart-body {
    position: relative;
}

/* =========================================================
   MatchFit Portal - Ausência / Suspensão
   Tela: WebForms/Aluno/SuspensaoPge.aspx
   As classes mf-suspension-* já existiam no markup mas sem CSS
   correspondente (página inteira renderizava como texto puro).
   Segue o mesmo padrão visual de .mf-club-checkin-*.
   ========================================================= */

.mf-suspension-hero {
    position: relative;
    overflow: hidden;
    margin: 4px 0 16px 0;
    padding: 19px 20px;
    border-radius: var(--m-radius-lg);
    border: 1px solid rgba(0,178,66,.42);
    background:
        radial-gradient(circle at 92% 0%, rgba(230,0,126,.18), transparent 28%),
        radial-gradient(circle at 8% 0%, rgba(0,178,66,.22), transparent 34%),
        linear-gradient(145deg, #092213 0%, #06120b 58%, #020503 100%);
    box-shadow: 0 14px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
    color: #fff;
}

.mf-suspension-hero:before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand-green), var(--brand-magenta));
    box-shadow: 0 0 20px rgba(0,178,66,.26);
}

.mf-suspension-hero span {
    display: block;
    margin-bottom: 6px;
    color: var(--brand-green);
    font-family: Oswald, Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .10em;
    line-height: 1;
}

.mf-suspension-hero strong {
    display: block;
    color: #fff;
    font-family: Oswald, Arial, sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}

.mf-suspension-hero small {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.74);
    font-family: Oswald, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.mf-suspension-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.mf-suspension-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mf-suspension-card,
.mf-suspension-balance-card,
.mf-suspension-rules-card,
.mf-suspension-history-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(0,178,66,.34);
    background:
        radial-gradient(circle at 100% 0%, rgba(0,178,66,.14), transparent 32%),
        linear-gradient(160deg, #071c10 0%, #041009 58%, #010403 100%);
    box-shadow: 0 14px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
    color: #fff;
}

.mf-suspension-card:before,
.mf-suspension-balance-card:before,
.mf-suspension-rules-card:before,
.mf-suspension-history-card:before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 0;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--brand-green), rgba(230,0,126,.86));
    box-shadow: 0 0 18px rgba(0,178,66,.30);
}

.mf-suspension-card-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.mf-suspension-card-title > i {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(0,178,66,.40);
    background: rgba(0,178,66,.14);
    color: var(--brand-green);
    font-size: 15px;
}

.mf-suspension-card-title > div > span {
    display: block;
    margin-bottom: 4px;
    color: var(--brand-green);
    font-family: Oswald, Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
    line-height: 1;
}

.mf-suspension-card-title > div > strong {
    display: block;
    color: #fff;
    font-family: Oswald, Arial, sans-serif;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
}

.mf-suspension-form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 6px;
}

.mf-suspension-field {
    flex: 1 1 220px;
    min-width: 0;
}

.mf-suspension-field-full {
    flex-basis: 100%;
}

.mf-suspension-field-period {
    flex: 0 1 260px;
}

.mf-suspension-page .g3-combobox,
.mf-suspension-page .g3-textbox,
.mf-suspension-page .g3-between-textbox {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.mf-suspension-page .g3-combobox label,
.mf-suspension-page .g3-textbox label,
.mf-suspension-page .g3-between-textbox label {
    display: block !important;
    margin: 0 0 7px 0 !important;
    color: rgba(255,255,255,.86) !important;
    font-family: Oswald, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.mf-suspension-actions {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
}

.mf-suspension-balance-card {
    text-align: center;
    padding: 20px 16px;
}

.mf-suspension-balance-card span {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 8px;
    color: rgba(255,255,255,.66);
    font-family: Oswald, Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mf-suspension-balance-card strong {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--brand-green);
    font-family: Oswald, Arial, sans-serif;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.05;
    text-shadow: 0 0 24px rgba(0,178,66,.32);
}

.mf-suspension-balance-card small {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 8px;
    color: rgba(255,255,255,.62);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.mf-suspension-rules-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #fff;
}

.mf-suspension-rules-title i {
    color: var(--brand-magenta);
    font-size: 16px;
}

.mf-suspension-rules-title strong {
    font-family: Oswald, Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
}

.mf-suspension-rules-card ul {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0 0 0 18px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.5;
}

.mf-suspension-rules-card li {
    margin-bottom: 8px;
}

.mf-suspension-rules-card li:last-child {
    margin-bottom: 0;
}

.mf-suspension-rules-card li b {
    color: #fff;
}

.mf-suspension-page .chart-theme {
    float: none !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
}

@media (max-width: 991px) {
    .mf-suspension-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .mf-suspension-hero {
        padding: 16px;
    }

    .mf-suspension-hero strong {
        font-size: 20px;
    }

    .mf-suspension-card,
    .mf-suspension-balance-card,
    .mf-suspension-rules-card,
    .mf-suspension-history-card {
        padding: 15px;
        border-radius: 20px;
    }

    .mf-suspension-field-period {
        flex-basis: 100%;
    }

    .mf-suspension-actions {
        justify-content: stretch;
    }

    .mf-suspension-actions .buttons-theme {
        width: 100% !important;
        flex: 1 1 auto;
    }
}

/* =========================================================
   MatchFit Portal - Caixa de dica ("Dica"/"Dicas")
   Substitui o padrão legado de tabela aninhada usado para
   simular um bloco de dica (ex.: WebForms/Aluno/HorarioAulaPge.aspx).
   Reutilizável nas demais telas com o mesmo padrão
   (AtividadePge.aspx, AcompanhamentoPge.aspx,
   Academia/AgendaEditorPge.aspx) em ondas futuras.
   ========================================================= */

.mf-hint-box {
    margin: 6px 0 14px 0;
    padding: 10px 14px;
    border-radius: var(--m-radius);
    border-left: 3px solid var(--brand-green);
    background: rgba(0,178,66,.08);
}

.mf-hint-box-label {
    display: block;
    margin-bottom: 4px;
    color: var(--brand-green);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.mf-hint-box p {
    margin: 0;
    color: var(--theme-body-forecolor);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

/* AvaliacaoPge.aspx - formulário de cálculo de IMC */
.mf-evaluation-imc-form {
    margin-left: 5px;
    margin-top: 10px;
}

/* =========================================================
   MatchFit Portal - Agenda
   Tela: WebForms/AgendaPge.aspx
   Extraído do <style> embutido no .aspx (173 linhas) para
   centralizar em c-modern.css. Removidos floats que não
   produziam layout lado a lado (cards empilhados em bloco
   normal); mantido apenas o float que realmente posicionava
   filtro + legenda lado a lado, convertido para flex.
   ========================================================= */

.agenda-page-shell {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

.agenda-hero-card {
    width: 100%;
    margin: 8px 0 12px 0;
    padding: 16px 16px 15px 16px;
    border-radius: 18px;
    border: 1px solid rgba(0, 197, 91, .35);
    background: radial-gradient(circle at top left, rgba(0, 197, 91, .24), rgba(0, 25, 13, .92) 58%, rgba(0, 0, 0, .95));
    box-shadow: 0 18px 38px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .06);
    box-sizing: border-box;
}

.agenda-hero-title {
    display: block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    line-height: 22px;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.agenda-hero-period {
    display: block;
    margin-top: 8px;
    color: #00e676;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.agenda-hero-status {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 700;
}

.agenda-filter-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 10px 10px 8px 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .035);
    box-sizing: border-box;
}

.agenda-filter-layout {
    flex: 0 0 82px;
}

.agenda-filter-layout .combobox-theme {
    margin-right: 0 !important;
}

.agenda-legend-box {
    flex: 1;
    min-width: 0;
    padding-top: 3px;
}

.agenda-label {
    display: block;
    margin-bottom: 7px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.agenda-legend-chip {
    display: inline-block;
    margin: 0 5px 6px 0;
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(0, 197, 91, .13);
    border: 1px solid rgba(0, 197, 91, .28);
    color: rgba(255, 255, 255, .92);
    font-size: 10px;
    line-height: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.agenda-legend-chip strong {
    color: #00e676;
    margin-right: 3px;
}

.agenda-nav-card {
    width: 100%;
    margin: 0 0 8px 0;
    padding: 8px;
    border-radius: 15px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .06);
    box-sizing: border-box;
}

.agenda-nav-card .panel-buttons-theme {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex;
    gap: 8px;
}

.agenda-nav-card .panel-buttons-theme > span,
.agenda-nav-card .panel-buttons-theme > div {
    flex: 1;
    min-width: 0;
}

.agenda-datagrid-wrap {
    width: 100%;
}

.agenda-datagrid-wrap .datagrid-theme {
    margin-top: 0 !important;
}

.agenda-datagrid-wrap .table-row-exerc {
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.agenda-datagrid-wrap .table-row-exerc-atrib {
    color: rgba(255, 255, 255, .70);
    font-size: 11px;
    line-height: 16px;
}

@media (max-width: 480px) {
    .agenda-hero-card {
        padding: 5px 14px 14px 14px;
        margin-top: 0px;
    }

    .agenda-hero-title {
        font-size: 18px;
    }

    .agenda-filter-layout {
        flex-basis: 92px;
    }

    .agenda-legend-chip {
        font-size: 9px;
        padding: 5px 6px;
    }

    .agenda-nav-card .panel-buttons-theme {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 8px;
    }

    .agenda-nav-card .panel-buttons-theme > .mf-btn,
    .agenda-nav-card .panel-buttons-theme > .mf-btn-secondary,
    .agenda-nav-card .panel-buttons-theme > .mf-btn-magenta {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .agenda-nav-card .panel-buttons-theme > .agenda-nav-manage {
        grid-column: 1 / -1;
    }

    .agenda-nav-card .mf-btn > .btn,
    .agenda-nav-card .mf-btn > .c-btn-square,
    .agenda-nav-card .mf-btn-secondary > .btn,
    .agenda-nav-card .mf-btn-secondary > .c-btn-square,
    .agenda-nav-card .mf-btn-magenta > .btn,
    .agenda-nav-card .mf-btn-magenta > .c-btn-square {
        width: 100% !important;
        min-width: 0 !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
}

/* =========================================================
   MatchFit Portal - Utilitários pequenos e reutilizáveis
   Substituem inline styles pontuais encontrados durante a
   refatoração visual. Reutilizáveis em outras telas.
   ========================================================= */

.mf-note-text {
    font-style: italic;
}

.mf-inline-option-row {
    padding-top: 5px;
}

.mf-thankyou-panel {
    margin: 10px;
}

.mf-link-report-list {
    padding-top: 10px;
    padding-right: 5px;
    margin-left: -5px;
}

/* =========================================================
   MatchFit Portal - Shell de página do Aluno
   Tela: WebForms/Aluno/HistoricoPge.aspx, AvaliacaoPge.aspx
   (também usada por CadastroPge.aspx e CheckinClubePge.aspx,
   que sobrescrevem o padding via inline style e não são
   afetadas por esta regra).
   A classe existia no markup de 4 telas sem CSS correspondente
   (mesmo padrão de .mf-dashboard-hero/.mf-suspension-* na Onda 3);
   HistoricoPge.aspx renderizava sem nenhum respiro lateral.
   ========================================================= */

.mf-student-profile-shell {
    padding-left: 10px;
    padding-right: 10px;
}

/* =========================================================
   MatchFit Portal - QR Code do aluno
   Tela: WebForms/Aluno/QrCodePge.aspx
   ========================================================= */

.mf-qrcode-frame {
    background-color: #fff !important;
    margin-top: 25px;
}

.mf-qrcode-image {
    width: 90%;
    max-width: 380px;
    padding-top: 25px;
}

/* =========================================================
   MatchFit Portal - Infográfico de Acompanhamento
   Tela: WebForms/Aluno/InfograficoPge.aspx
   Apenas as partes fixas do markup. O timeline (.row, .sectionInfo,
   .details, .title etc.) é montado via JS client-side a partir de
   dados e é uma exceção documentada: não migrado nesta onda.
   ========================================================= */

.mf-infografico-title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding-top: 10px;
}

.mf-infografico-scroll-icon {
    line-height: 40px;
    color: var(--theme-button-color);
}

/* =========================================================
   MatchFit Portal - Painel do aluno
   Tela: WebForms/Aluno/PainelPge.aspx
   ========================================================= */

.mf-painel-greeting-wrap {
    width: 100%;
    overflow: hidden;
    padding: 10px;
    margin-top: 20px !important;
}

/* =========================================================
   MatchFit Portal - Ações de popup (Atividade/Acompanhamento)
   Telas: WebForms/Aluno/AtividadePge.aspx, AcompanhamentoPge.aspx
   Popup de agendamento com botões Confirmar/Desfazer e aviso de
   situação contratual, com markup duplicado entre as duas telas.
   ========================================================= */

.mf-popup-action-row {
    margin-left: -5px;
}

.mf-popup-alert-warning {
    color: #ffff00;
}

.mf-popup-alert-danger {
    color: #ff0000;
}

/* =========================================================
   MatchFit Portal - SectionUsc (cards de seção com título)
   Componente: WebUserControls/Components/SectionUsc.ascx
   Aplicado ao seletor legado .panel-info-theme (definido em
 */

.panel-info-theme {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,178,66,.34) !important;
    border-radius: var(--m-radius-lg) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(0,178,66,.14), transparent 32%),
        linear-gradient(160deg, #071c10 0%, #041009 58%, #010403 100%);
    box-shadow: var(--m-shadow-1);
}

.panel-info-theme:before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 0;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--brand-green), rgba(230,0,126,.86));
    box-shadow: 0 0 18px rgba(0,178,66,.30);
    z-index: 1;
}

.panel-info-theme .panel-heading-info-theme {
    position: relative;
    z-index: 1;
    background: transparent !important;
    border: none !important;
    padding: 16px 18px 8px 18px;
}

.panel-info-theme .panel-heading-info-theme .panel-title,
.panel-info-theme .panel-heading-info-theme h3 {
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.panel-info-theme .panel-body {
    position: relative;
    z-index: 1;
    padding: 8px 18px 18px 18px;
    color: rgba(255,255,255,.92);
}

@media (max-width: 480px) {
    .panel-info-theme .panel-heading-info-theme {
        padding: 14px 14px 6px 14px;
    }

    .panel-info-theme .panel-body {
        padding: 6px 14px 14px 14px;
    }
}

/* =========================================================
   MatchFit Portal - CadastroPge (ficha do aluno)
   As classes .mf-student-* existiam no markup sem CSS.
   .mf-student-card-main/.mf-student-avatar reaproveitam o
   card .mf-ficha-professor/.mf-ficha-avatar (já usado em
   TreinoPge). NÃO reaproveitar .mf-ficha-professor-info aqui:
   essa classe tem a regra global
   ".mf-ficha-professor-info > *:not(:first-child) { display:none }"
   (feita para esconder Responsável/Prescritor/Autorizador em
   TreinoPge), que escondia o bloco de badges (2º filho) nesta
   tela — por isso .mf-student-main-info tem CSS própria abaixo.
   Cores dos badges (situação/acesso) vêm de ForeColor/BackColor
   definidos no code-behind (CadastroPge.aspx.cs), então aqui só
   se define o formato de "pill", não a cor de fundo.
   ========================================================= */

.mf-student-main-info {
    flex: 1;
    min-width: 0;
}

.mf-student-name-view {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.mf-student-name-view .textview-value {
    font-size: 20px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.mf-student-badges {
    display: flex !important;
    flex-wrap: wrap;
    float: none !important;
    clear: both;
    width: 100%;
    max-width: 100%;
    gap: 6px;
    margin-top: 8px;
    box-sizing: border-box;
}

.mf-student-badge {
    display: inline-flex !important;
    align-items: center;
    float: none !important;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

.mf-student-grid-block {
    margin-bottom: 16px;
}

.mf-student-balance-note {
    margin-top: 6px;
    font-style: italic;
    font-size: 12px;
    color: rgba(255,255,255,.62);
}

/* =========================================================
   MatchFit Portal - Bloqueio de modo PC na área do Aluno
   A área do Aluno (WebForms/Aluno/**) só deve ser usada em
   tablet/celular; a área da Academia (admin) não é afetada.
   Markup fixo em PortalMst.Master (fora do <form>), com a
   classe body.mf-aluno-view aplicada só quando
   this.SiteView == SiteViewEnm.ALUNO (baseado na URL atual,
   já usado pelo próprio PortalMst.Master.cs). O breakpoint de
   1024px foi escolhido para cobrir tablets em paisagem (ex.:
   iPad 1024px) como "ainda tablet" — acima disso é tratado
   como desktop e a tela é coberta pelo aviso.
   ========================================================= */
.mf-desktop-block {
    display: none;
}

@media (min-width: 1024px) {
    body.mf-aluno-view .mf-desktop-block {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 99999;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(120% 80% at 50% 0%, rgba(0,178,66,.10), transparent 55%),
            #010805;
    }
}

.mf-desktop-block-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 360px;
    padding: 40px 36px;
    text-align: center;
    border-radius: var(--m-radius-lg);
    border: 1px solid rgba(0,178,66,.34);
    background: linear-gradient(160deg, #071c10 0%, #041009 58%, #010403 100%);
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

.mf-desktop-block-icons {
    display: flex;
    align-items: center;
    gap: 22px;
}

.mf-desktop-block-icon {
    width: 48px;
    opacity: .92;
    filter: drop-shadow(0 8px 18px rgba(0,178,66,.35));
}

.mf-desktop-block-card strong {
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.mf-desktop-block-card span {
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 700;
}

/* =========================================================
   Academia - Fase 1.1 da modernização visual (mf-academia-view)
   DataGridUsc e AccordionUsc não têm CssClass de instância
   (classe raiz fixa no .ascx), então o escopo é por página via
   body.mf-academia-view, espelhando a técnica já usada em
   body.mf-aluno-view (PortalMst.Master). Cobre automaticamente
   todos os containers de CRUD (Aluno, Funcionário, Plano, Taxa,
   Fornecedor, RotinaTreino, PlayList, HorarioAula,
   ExercicioTreino, FichaTreino, TermoAdesao, AlunoAvaliacao,
   AlunoFichaTreino, ExercicioGrupo) sem editar cada arquivo.
   Cor de fundo já vem correta via var(--theme-*) definidas em
   StyleSheetUsc.ascx (mesmo Theme do tenant em Aluno e
   Academia) - aqui só entra o acabamento (raio, borda, sombra,
   tipografia) que falta nesses dois componentes.
   ========================================================= */

body.mf-academia-view .datagrid-theme {
    float: none !important;
    width: 100% !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 255, 123, .14) !important;
    border-radius: 16px !important;
    background: rgba(0, 0, 0, .20) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .20) !important;
    overflow: auto !important;
}

body.mf-academia-view .datagrid-theme .datagrid-title {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    color: rgba(255, 255, 255, .90) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

body.mf-academia-view .datagrid-control-table {
    margin: 0 !important;
    color: rgba(255, 255, 255, .86) !important;
    background: transparent !important;
}

body.mf-academia-view .datagrid-column-theme th {
    padding: 10px 12px !important;
    border-color: rgba(255, 255, 255, .08) !important;
    background: rgba(255, 255, 255, .045) !important;
    color: rgba(255, 255, 255, .90) !important;
}

body.mf-academia-view .datagrid-control-table td {
    padding: 11px 12px !important;
    border-color: rgba(255, 255, 255, .06) !important;
    color: rgba(255, 255, 255, .82) !important;
}

body.mf-academia-view .datagrid-control-table tbody tr:hover td {
    background: rgba(0, 255, 123, .055) !important;
}

body.mf-academia-view .datagrid-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 26px 10px !important;
}

body.mf-academia-view .datagrid-empty-icon {
    color: rgba(0, 255, 123, .5) !important;
    font-size: 22px !important;
}

body.mf-academia-view .datagrid-empty-title {
    color: rgba(255, 255, 255, .55) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

body.mf-academia-view .datagrid-control-table .fa-chevron-left,
body.mf-academia-view .datagrid-control-table .fa-chevron-right {
    color: rgba(0, 255, 123, .75) !important;
}

body.mf-academia-view .accordion-theme .c-content-accordion-1 {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22) !important;
}

body.mf-academia-view .accordion-theme .panel-heading {
    border: 1px solid rgba(0, 255, 123, .18) !important;
    border-bottom: none !important;
}

body.mf-academia-view .accordion-theme .panel-title > a {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
}

body.mf-academia-view .accordion-theme .panel-title > a label {
    color: rgba(255, 255, 255, .60) !important;
}

body.mf-academia-view .accordion-theme .panel-body {
    border: 1px solid rgba(0, 255, 123, .16) !important;
    border-top: none !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
}

/* =========================================================
   Academia - Fase 1.3 da modernização visual (mf-academia-view)
   IndicatorUsc (Cockpit, 112 usos) e CockpitCategoriaUsc (8
   páginas de Cockpit) não têm CssClass de instância.
   IndicatorUsc compartilha a classe raiz (.summary-theme /
   .c-content-blog-post-card-1) com o SummaryUsc do Aluno
   (PagamentoPge/RenovacaoPge) - por isso o escopo aqui também
   é por body.mf-academia-view, sem afetar o Aluno. O acordeão
   interno do IndicatorUsc (.accordion-theme) já é coberto pelas
   regras da Fase 1.1 acima, sem necessidade de CSS adicional.
   CockpitCategoriaUsc (.nav-tabs) é 100% exclusivo do Cockpit
   (nenhum outro arquivo do Portal usa nav-tabs), mas manteve-se
   o mesmo escopo por consistência com o restante da frente.
   ========================================================= */

body.mf-academia-view .summary-theme {
    border: 1px solid rgba(0, 255, 123, .18) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22) !important;
    overflow: hidden !important;
}

body.mf-academia-view .summary-theme .c-content-blog-post-card-1.c-option-2 .c-body {
    padding: 18px 20px !important;
}

body.mf-academia-view .summary-theme .c-body .c-title {
    color: #fff !important;
    font-weight: 900 !important;
}

body.mf-academia-view .summary-theme .c-body .c-author {
    color: rgba(255, 255, 255, .62) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
}

body.mf-academia-view .summary-theme .c-body .c-panel {
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    padding: 10px 0 2px 0 !important;
}

body.mf-academia-view .summary-theme .c-body .c-panel .c-comments {
    color: rgba(255, 255, 255, .55) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

body.mf-academia-view .summary-theme .c-body .c-panel .c-comments i {
    color: rgba(0, 255, 123, .75) !important;
}

body.mf-academia-view .summary-theme .c-body .c-panel .c-tags > li {
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(0, 255, 123, .22) !important;
    padding: 4px 12px !important;
}

body.mf-academia-view .summary-theme .c-body .c-panel .c-tags > li:hover {
    background: rgba(0, 255, 123, .14) !important;
    border-color: rgba(0, 255, 123, .5) !important;
}

body.mf-academia-view .summary-theme .c-body .c-panel .c-tags > li a {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;
}

body.mf-academia-view .summary-theme .accordion-theme {
    margin-top: 6px !important;
}

/* Cockpits: o IndicatorUsc legado combina min-width, max-width e margens
   fixas. Três instâncias em um flex ultrapassavam o pnlPageContent. O grid
   contém os cards na largura útil e preserva alturas equivalentes. */
body.mf-academia-view .mf-cockpit-page > .summary-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px;
}

body.mf-academia-view .mf-cockpit-page > .summary-group > .summary-theme {
    float: none !important;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100%;
    margin: 0 !important;
}

@media (max-width: 991px) {
    body.mf-academia-view .mf-cockpit-page > .summary-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    body.mf-academia-view .mf-cockpit-page > .summary-group {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}

body.mf-academia-view .nav-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    border: none !important;
}

body.mf-academia-view .nav-tabs > li {
    float: none !important;
    margin: 0 !important;
}

body.mf-academia-view .nav-tabs > li > a {
    display: block !important;
    margin: 0 !important;
    padding: 9px 18px !important;
    border: 1px solid rgba(0, 255, 123, .22) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .04) !important;
    color: rgba(255, 255, 255, .68) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;
    outline: none !important;
    box-shadow: none !important;
}

body.mf-academia-view .nav-tabs > li > a:focus {
    outline: none !important;
}

body.mf-academia-view .nav-tabs > li > a:hover,
body.mf-academia-view .nav-tabs > li > a:focus {
    background: rgba(0, 255, 123, .12) !important;
    border-color: rgba(0, 255, 123, .45) !important;
    color: #fff !important;
}

body.mf-academia-view .nav-tabs > li.active > a,
body.mf-academia-view .nav-tabs > li.nav-tabs-active > a,
body.mf-academia-view .nav-tabs > li.active > a:hover,
body.mf-academia-view .nav-tabs > li.nav-tabs-active > a:hover,
body.mf-academia-view .nav-tabs > li.active > a:focus,
body.mf-academia-view .nav-tabs > li.nav-tabs-active > a:focus {
    background: linear-gradient(135deg, #00B242 0%, #00D95A 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(0, 178, 66, .32) !important;
}

/* ---------------------------------------------------------------------
   IndicatorUsc - acordeão "Resumo por Unidade": o preenchimento
   sólido do header (.c-content-accordion-1) vem de
   background-color inline com !important (var(--theme-panel-heading-color),
   cor do tenant) - propositalmente não sobrescrito aqui para não
   quebrar a marca de outras academias. O que faltava era o
   acabamento (profundidade/gloss, espaçamento do ícone+título,
   giro do ícone ao expandir) para destacar da caixa lisa original.
   --------------------------------------------------------------------- */

body.mf-academia-view .summary-theme .accordion-theme .panel-heading {
    position: relative !important;
    overflow: hidden !important;
}

body.mf-academia-view .summary-theme .accordion-theme .panel-heading::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .20)) !important;
    pointer-events: none !important;
}

body.mf-academia-view .summary-theme .accordion-theme .panel-title > a {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 10px !important;
    padding: 13px 16px !important;
}

body.mf-academia-view .summary-theme .accordion-theme .panel-title > a br {
    display: none !important;
}

body.mf-academia-view .summary-theme .accordion-theme .panel-title > a label {
    width: 100% !important;
    margin: 0 !important;
    font-size: 11px !important;
    letter-spacing: .04em !important;
}

body.mf-academia-view .summary-theme .accordion-theme .panel-title .fa-sort {
    font-size: 13px !important;
    opacity: .85 !important;
    transition: transform var(--m-dur) var(--m-ease) !important;
}

body.mf-academia-view .summary-theme .accordion-theme .panel-title a:not(.collapsed) .fa-sort {
    transform: rotate(180deg) !important;
}

/* ---------------------------------------------------------------------
   IndicatorUsc/SummaryUsc - "Bottom Text" (rodapé, ex.: "Inferência
   de novo visitante - LEAD", "Média de Acesso por Alunos").
   Reaproveita .c-progress-bar-container/-line (mesma classe do
   ChartUsc), cujo grid "title text" / "bar bar" foi desenhado para
   quando existem .c-progress-bar-label + svg. Aqui só existe o
   .progressbar-text (sem título nem barra), o que causava 2
   problemas: (1) caía sozinho na coluna "text" (auto, alinhada à
   direita), deixando um vão vazio à esquerda; (2) a margem lateral
   de 6px do container (pensada para o contexto de treino) ficava
   mais recuada que a barra "RESUMO POR UNIDADE" acima, que é
   full-bleed - desalinhamento visual entre os dois blocos do rodapé.
   Rearranjo: texto normal (não itálico/bold) com ícone de info à
   esquerda, full-bleed como a barra do acordeão, espaçamento mais
   enxuto.
   --------------------------------------------------------------------- */

body.mf-academia-view .summary-theme .c-progress-bar-container:has(> .c-progress-bar-line > .progressbar-text:only-child) {
    margin: 10px 0 0 0 !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border-color: rgba(0, 255, 123, .16) !important;
}

body.mf-academia-view .summary-theme .c-progress-bar-line:has(> .progressbar-text:only-child) {
    display: block !important;
}

body.mf-academia-view .summary-theme .c-progress-bar-line:has(> .progressbar-text:only-child) .progressbar-text {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
    white-space: normal !important;
    padding-top: 0 !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, .78) !important;
    line-height: 1.4 !important;
}

body.mf-academia-view .summary-theme .c-progress-bar-line:has(> .progressbar-text:only-child) .progressbar-text::before {
    content: "\f05a" !important;
    font-family: FontAwesome !important;
    flex: 0 0 auto !important;
    color: rgba(0, 255, 123, .85) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* =====================================================================
   HEADER TOPO — busca de aluno + ações à direita (revisão)
   ---------------------------------------------------------------------
   - Campo de busca de aluno em formato pill, com vidro fosco e glow
     verde da marca no foco, centralizado na área entre marca e ações.
   - Ícones home / agenda / mensagem / busca (mobile) convertidos para
     FontAwesome, no mesmo padrão já usado em notificação e ajuda
     (substitui os PNGs com filtro, que ficavam borrados perto dos
     ícones vetoriais).
   - Botão "Início" com leve destaque verde por ser o atalho mais usado.
   ===================================================================== */

/* Especificidade: o input recebido do TextBoxUsc sempre carrega também a
   classe "form-control" (legado). components.css tem uma regra
   ".g3-textbox input.form-control" (classe+tipo+classe) que, apesar de
   carregar ANTES no cascade, tem especificidade maior que um simples
   ".ancestor .g3-textbox-input" — por isso aqui a classe .form-control é
   incluída explicitamente no seletor, elevando a especificidade acima
   dela (confirmado isolando a regra concorrente via devtools). */
.mf-header-search-input .g3-textbox-input.form-control {
    height: 44px !important;
    min-height: 44px !important;
    padding: 10px 44px 10px 18px !important;
    background: rgba(255,255,255,.06) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.22) !important;
}

.mf-header-search-input .g3-textbox-input.form-control::placeholder {
    color: rgba(255,255,255,.55) !important;
}

.mf-header-search-input .textbox-eye {
    right: 12px !important;
    width: 26px !important;
    height: 26px !important;
    color: rgba(0,178,66,.90) !important;
}

/* Campo de busca: digitável, com hover/foco normais de input. */
.mf-header-search-input .g3-textbox-input.form-control:hover:not(:disabled) {
    border-color: rgba(255,255,255,.26) !important;
}

.mf-header-search-input .g3-textbox-input.form-control:focus {
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(0,178,66,.55) !important;
    box-shadow: 0 0 0 3px rgba(0,178,66,.16), inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.28) !important;
}

.mf-header-search-input .textbox-eye:hover {
    color: #fff !important;
    background: rgba(0,178,66,.24) !important;
}

/* Lupa do topo (busca em popup): só faz sentido no modo responsivo, onde o
   campo de busca inline (.mf-header-search) já fica oculto. As classes
   legadas menu-round-mobile/menu-round-280-greater tinham comportamento
   inconsistente entre breakpoints; força-se aqui um único ponto de corte,
   sincronizado com o breakpoint que oculta .title-placard. */
.mf-header-action-search {
    display: none !important;
}

@media (max-width: 767px) {
    .mf-header-action-search {
        display: inline-flex !important;
    }
}

/* Ações à direita: home / agenda / mensagem / busca (mobile) em FontAwesome,
   mesmo tratamento de glifo já usado em notificação e ajuda. */
.mf-header-action-home img,
.mf-header-action-agenda img,
.mf-header-action-message img,
.mf-header-action-search img {
    opacity: 0 !important;
}

.mf-header-action-home:before,
.mf-header-action-agenda:before,
.mf-header-action-message:before,
.mf-header-action-search:before {
    font-family: FontAwesome !important;
    color: #fff !important;
    font-size: 19px !important;
    line-height: 1 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
}

.mf-header-action-home:before { content: "\f015"; }    /* fa-home */
.mf-header-action-agenda:before { content: "\f073"; }   /* fa-calendar */
.mf-header-action-message:before { content: "\f0e6"; }  /* fa-comments-o */
.mf-header-action-search:before { content: "\f002"; }   /* fa-search */

/* Início: leve destaque verde por ser o atalho mais usado da barra. */
.mf-header-action-home {
    background: rgba(0,178,66,.12) !important;
    border-color: rgba(0,178,66,.32) !important;
}

.mf-header-action-home:hover,
.mf-header-action-home:focus-within {
    background: rgba(0,178,66,.20) !important;
    border-color: rgba(0,178,66,.55) !important;
}

/* Navegação da área da academia */
.mf-header-action-navigation button {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.mf-header-action-navigation button:hover,
.mf-header-action-navigation button:focus {
    color: #fff;
    background: rgba(0,178,66,.20);
    border-color: rgba(0,178,66,.58);
    outline: 0;
    transform: translateY(-1px);
}

.mf-navigation {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

html {
    scrollbar-gutter: stable;
}

body.mf-navigation-open {
    overflow: hidden;
}

.mf-navigation-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(0,0,0,.58);
    border: 0;
    backdrop-filter: blur(2px);
}

.mf-navigation-panel {
    position: absolute;
    z-index: 1;
    color: #eaf1ec;
    background: #121715;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 22px 58px rgba(0,0,0,.54);
}

.mf-navigation-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    color: #fff;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 18px;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.mf-navigation-close,
.mf-navigation-module-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #d9e5dd;
    background: transparent;
    border: 0;
}

.mf-navigation-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.mf-navigation-close:hover,
.mf-navigation-close:focus {
    color: #fff;
    background: rgba(255,255,255,.11);
    outline: 0;
}

.mf-navigation-modules {
    padding: 18px;
}

.mf-navigation-module {
    min-width: 0;
}

.mf-navigation-module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mf-navigation-module-title {
    margin: 0;
    color: var(--brand-green);
    font-family: "Roboto Condensed", sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .45px;
    line-height: 1.2;
    text-transform: uppercase;
}

a.mf-navigation-module-title:hover,
a.mf-navigation-module-title:focus {
    color: #62dc8c;
    text-decoration: none;
}

.mf-navigation-list {
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
}

.mf-navigation-item {
    margin: 0;
    padding: 0;
}

.mf-navigation-item a,
.mf-navigation-group {
    display: block;
    padding: 6px 0;
    color: #dce5df;
    font-size: 13px;
    line-height: 1.25;
}

.mf-navigation-item a:hover,
.mf-navigation-item a:focus {
    color: #fff;
    text-decoration: none;
}

.mf-navigation-group {
    padding-bottom: 3px;
    color: #aebbb2;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.mf-navigation-level-2 > .mf-navigation-list {
    margin: 0 0 4px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,.12);
}

@media (min-width: 992px) {
    .mf-navigation-panel {
        top: 82px;
        right: 0;
        left: 0;
        width: calc(100% - 36px);
        max-width: 1180px;
        max-height: calc(100vh - 105px);
        margin: 0 auto;
        overflow-y: auto;
        border-radius: 16px;
    }

    .mf-navigation-modules {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
        gap: 24px;
    }

    .mf-navigation-module-toggle {
        display: none;
    }
}

@media (max-width: 991px) {
    body.mf-navigation-open {
        overflow: hidden;
    }

    .mf-navigation-panel {
        top: 0;
        bottom: 0;
        left: 0;
        width: 88vw;
        max-width: 360px;
        overflow-y: auto;
        border-width: 0 1px 0 0;
        box-shadow: 16px 0 42px rgba(0,0,0,.52);
    }

    .mf-navigation-modules {
        padding: 8px 18px 28px;
    }

    .mf-navigation-module {
        padding: 13px 0;
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .mf-navigation-module-toggle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        transition: transform .18s ease, background .18s ease;
    }

    .mf-navigation-module-toggle:hover,
    .mf-navigation-module-toggle:focus {
        color: #fff;
        background: rgba(255,255,255,.10);
        outline: 0;
    }

    .mf-navigation-module.is-open > .mf-navigation-module-head .mf-navigation-module-toggle {
        transform: rotate(180deg);
    }

    .mf-navigation-module > .mf-navigation-list {
        display: none;
    }

    .mf-navigation-module.is-open > .mf-navigation-list {
        display: block;
    }
}

/* Hub de navegação: reduz a aparência de lista crua e destaca módulos,
   busca e subgrupos sem alterar a hierarquia determinada pelas permissões. */
.mf-navigation-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(0,212,90,.12), transparent 29%),
        #101614;
}

.mf-navigation-panel-head {
    flex: 0 0 auto;
    padding: 16px 20px;
}

.mf-navigation-popup-heading h3 {
    width: 90%;
    margin: 0;
    color: #fff;
    letter-spacing: 0;
    line-height: 1.05;
    text-transform: none;
}

.mf-navigation-popup-heading h5 {
    margin: 5px 0 0;
    color: rgba(234,241,236,.62);
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

.mf-navigation-close.popup-close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    opacity: 1;
}

.mf-navigation-close.popup-close-button > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mf-navigation-close.popup-close-button .popup-image-close {
    display: block;
    width: 32px;
    height: 32px;
    pointer-events: none;
}

.mf-navigation-close.popup-close-button:hover,
.mf-navigation-close.popup-close-button:focus {
    background: transparent;
}

.mf-navigation-tools {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    padding: 12px 20px;
    border-bottom: 0;
    background: rgba(0,0,0,.12);
}

.mf-navigation-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 310px);
    min-height: 38px;
    margin: 0;
    padding: 0 12px;
    color: rgba(234,241,236,.56);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    background: rgba(0,0,0,.22);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.mf-navigation-search:focus-within {
    border-color: rgba(0,212,90,.62);
    background: rgba(0,0,0,.34);
    box-shadow: 0 0 0 3px rgba(0,212,90,.10);
}

.mf-navigation-search .fa {
    color: var(--brand-green);
    font-size: 13px;
}

.mf-navigation-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    color: #f1f6f2;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px;
}

.mf-navigation-search input::placeholder {
    color: rgba(234,241,236,.42);
}

.mf-navigation-search-empty {
    color: #f4bb5f;
    font-size: 12px;
}

.mf-navigation-modules {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px;
    scrollbar-color: rgba(0,212,90,.52) rgba(255,255,255,.035);
    scrollbar-width: thin;
}

.mf-navigation-module {
    padding: 15px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.mf-navigation-module:hover {
    border-color: rgba(0,212,90,.28);
    background: rgba(0,212,90,.045);
}

.mf-navigation-module-head {
    align-items: flex-start;
    gap: 10px;
}

.mf-navigation-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    color: var(--brand-green);
    border: 1px solid rgba(0,212,90,.24);
    border-radius: 9px;
    background: rgba(0,212,90,.08);
    font-size: 15px;
}

.mf-navigation-module-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.mf-navigation-module-title {
    display: block;
    padding-top: 2px;
    font-size: 16px;
}

.mf-navigation-module-caption {
    display: block;
    margin-top: 3px;
    color: rgba(234,241,236,.48);
    font-size: 11px;
    line-height: 1.2;
}

.mf-navigation-item a,
.mf-navigation-group,
.mf-navigation-subgroup-toggle {
    border-radius: 6px;
}

.mf-navigation-item a {
    padding: 6px 8px;
    margin: 0 -8px;
    color: rgba(234,241,236,.86);
    transition: color .15s ease, background .15s ease;
}

.mf-navigation-item a:hover,
.mf-navigation-item a:focus {
    color: #fff;
    background: rgba(255,255,255,.07);
}

.mf-navigation-subgroup-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% + 16px);
    margin: 4px -8px 2px;
    padding: 7px 8px;
    color: #c8d5cc;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

.mf-navigation-subgroup-toggle:hover,
.mf-navigation-subgroup-toggle:focus {
    color: #fff;
    background: rgba(255,255,255,.07);
    outline: 0;
}

.mf-navigation-subgroup-toggle .fa {
    color: rgba(234,241,236,.58);
    transition: transform .18s ease;
}

.mf-navigation-subgroup > .mf-navigation-list {
    display: none;
}

.mf-navigation-subgroup.is-open > .mf-navigation-list {
    display: block;
}

.mf-navigation-subgroup.is-open > .mf-navigation-subgroup-toggle .fa {
    transform: rotate(180deg);
}

.mf-navigation-module.is-filtering .mf-navigation-item:not(.is-search-match):not(.is-search-parent) {
    display: none;
}

.mf-navigation-module.is-filtering .mf-navigation-subgroup:not(.is-search-parent) > .mf-navigation-list {
    display: none;
}

.mf-navigation-module.is-search-empty {
    display: none;
}

@media (min-width: 992px) {
    .mf-navigation-panel {
        max-width: 1280px;
    }

    .mf-navigation-modules {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: start;
        gap: 14px;
    }

    .mf-navigation-module-toggle {
        display: none;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .mf-navigation-modules {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .mf-navigation {
        pointer-events: none;
    }

    .mf-navigation-overlay {
        display: block;
        pointer-events: auto;
    }

    .mf-navigation-panel {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: min(1200px, calc(100vw - 48px));
        max-width: none;
        height: var(--mf-navigation-height, min(680px, calc(100vh - 120px)));
        max-height: calc(100vh - 24px);
        margin: 0;
        pointer-events: auto;
    }

    .mf-navigation-modules {
        grid-auto-rows: minmax(210px, 1fr);
    }

    .mf-navigation-module {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }

    .mf-navigation-module > .mf-navigation-list {
        flex: 1 1 auto;
        min-height: 0;
        padding-right: 4px;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-color: rgba(0,212,90,.52) rgba(255,255,255,.035);
        scrollbar-width: thin;
    }
}

.mf-navigation-modules::-webkit-scrollbar,
.mf-navigation-module > .mf-navigation-list::-webkit-scrollbar {
    width: 6px;
    height: 0;
}

.mf-navigation-modules::-webkit-scrollbar-track,
.mf-navigation-module > .mf-navigation-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.035);
    border-radius: 999px;
}

.mf-navigation-modules::-webkit-scrollbar-thumb,
.mf-navigation-module > .mf-navigation-list::-webkit-scrollbar-thumb {
    border: 1px solid #101614;
    border-radius: 999px;
    background: rgba(0,212,90,.52);
}

.mf-navigation-modules::-webkit-scrollbar-thumb:hover,
.mf-navigation-module > .mf-navigation-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0,212,90,.76);
}

@media (max-width: 991px) {
    .mf-navigation-panel-head {
        padding: 15px 18px;
    }

    .mf-navigation-tools {
        padding: 10px 18px;
    }

    .mf-navigation-search {
        width: 100%;
    }

    .mf-navigation-modules {
        padding: 12px 14px 28px;
    }

    .mf-navigation-module {
        padding: 13px;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,.10);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .mf-navigation-module-head {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mf-navigation-module-head:active {
        opacity: .78;
    }

    .mf-navigation-module:hover {
        background: transparent;
    }

    .mf-navigation-module > .mf-navigation-list {
        overflow: visible;
    }
}

/* =====================================================================
   ACADEMIA — PADRÃO INTERNO DAS ÁREAS DE GESTÃO
   ---------------------------------------------------------------------
   Regras compartilhadas pelos WebForms administrativos. Mantêm a
   estrutura e os IDs legados, mas uniformizam largura, ritmo vertical,
   cartões, seções, filtros, campos, tabelas e ações responsivas.
   ===================================================================== */

body.mf-academia-view .mf-page-shell {
    width: 100%;
    min-height: calc(100vh - 150px);
    padding: 98px clamp(14px, 2.5vw, 34px) 42px;
}

body.mf-academia-view .mf-page-shell > [id$="_pnlPageContent"] {
    width: min(100%, 1440px);
    margin: 0 auto;
}

/* O SubTitleUsc é compartilhado com a área do Aluno. A Academia usa os
   painéis internos sem recuo lateral, portanto neutraliza aqui — e somente
   aqui — o padding/margin legado do componente para alinhar título,
   seções, accordions, grids e menus pela mesma borda. */
body.mf-academia-view .subtitle-shell {
    box-sizing: border-box;
    width: min(100%, 1440px);
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
}

body.mf-academia-view .subtitle-shell > .c-layout-breadcrumbs-1 {
    box-sizing: border-box;
    width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Ritmo e alinhamento comuns das páginas internas. Os componentes
   legados usavam larguras de 99%, 99.5% e calc(100% - 10px), além de
   margens laterais diferentes. Isso deixava as bordas sem simetria. */
body.mf-academia-view .subtitle-shell .container {
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body.mf-academia-view .panel-info-theme,
body.mf-academia-view .accordion-theme,
body.mf-academia-view .datagrid-theme,
body.mf-academia-view .panel-buttons-theme {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body.mf-academia-view .panel-info-theme,
body.mf-academia-view .accordion-theme,
body.mf-academia-view .datagrid-theme {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

body.mf-academia-view .panel-buttons-theme {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    float: none !important;
    clear: both;
}

body.mf-academia-view .panel-buttons-theme::after {
    content: "";
    display: table;
    clear: both;
}

body.mf-academia-view .panel-buttons-theme > .buttons-theme {
    float: none !important;
    margin: 0 8px 0 0 !important;
}

body.mf-academia-view .mf-page-shell > [id$="_pnlPageContent"]::after,
body.mf-academia-view .panel-body::after,
body.mf-academia-view .accordion-body::after {
    content: "";
    display: table;
    clear: both;
}

body.mf-academia-view .panel-info-theme,
body.mf-academia-view .accordion-theme {
    margin: 0 0 16px;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    background: rgba(2, 10, 6, .82) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.18) !important;
    overflow: hidden;
}

/* SectionUsc possuía uma faixa verde/magenta sobre a borda do card.
   Além de duplicar a borda, ela ficava especialmente evidente quando
   seções eram empilhadas. A borda contínua do próprio card é suficiente. */
body.mf-academia-view .panel-info-theme::before {
    content: none !important;
    display: none !important;
}

body.mf-academia-view .panel-info-theme .panel-heading-info-theme,
body.mf-academia-view .accordion-theme .panel-heading {
    min-height: 52px;
    padding: 15px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body.mf-academia-view .panel-info-theme .panel-title,
body.mf-academia-view .accordion-theme .panel-title {
    margin: 0 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .055em;
    line-height: 1.45;
}

body.mf-academia-view .panel-info-theme .panel-body,
body.mf-academia-view .accordion-theme .accordion-body {
    padding: clamp(16px, 2.2vw, 26px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body.mf-academia-view .accordion-theme .c-content-accordion-1,
body.mf-academia-view .accordion-theme .panel-group,
body.mf-academia-view .accordion-theme .panel {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.mf-academia-view .accordion-theme .panel-heading {
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

body.mf-academia-view .accordion-theme .panel-title > a {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 15px 18px !important;
    color: #fff !important;
    background: transparent !important;
    text-align: left;
    text-decoration: none !important;
}

/* O tema legado recolore o link para a cor do tenant nos estados aberto,
   collapsed:hover e collapsed:focus. O último estado permanecia verde
   depois de expandir e contrair porque seu seletor era mais específico. */
body.mf-academia-view .accordion-theme .c-content-accordion-1.c-theme .panel > .panel-heading > .panel-title > a,
body.mf-academia-view .accordion-theme .c-content-accordion-1.c-theme .panel > .panel-heading > .panel-title > a:hover,
body.mf-academia-view .accordion-theme .c-content-accordion-1.c-theme .panel > .panel-heading > .panel-title > a:focus,
body.mf-academia-view .accordion-theme .c-content-accordion-1.c-theme .panel > .panel-heading > .panel-title > a:active,
body.mf-academia-view .accordion-theme .c-content-accordion-1.c-theme .panel > .panel-heading > .panel-title > a.collapsed,
body.mf-academia-view .accordion-theme .c-content-accordion-1.c-theme .panel > .panel-heading > .panel-title > a.collapsed:hover,
body.mf-academia-view .accordion-theme .c-content-accordion-1.c-theme .panel > .panel-heading > .panel-title > a.collapsed:focus {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body.mf-academia-view .accordion-theme .accordion-subtitle {
    color: rgba(255,255,255,.58);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
}

body.mf-academia-view .accordion-theme .panel-title > a .fa {
    color: #00d45a;
    font-size: 15px;
}

body.mf-academia-view .accordion-theme .panel-title > a::after {
    content: "\f106";
    font-family: FontAwesome;
    margin-left: 8px;
    color: rgba(255,255,255,.7);
    transition: transform .2s ease;
}

body.mf-academia-view .accordion-theme .panel-title > a.collapsed::after {
    transform: rotate(180deg);
}

body.mf-academia-view .panel-body > div,
body.mf-academia-view .accordion-body > div {
    max-width: 100%;
}

/* ButtonUsc usa simultaneamente c-btn-square e c-border-rounded. Como a
   classe quadrada é declarada depois no tema legado, ela anulava o raio.
   Este é o acabamento padrão para ações das páginas da Academia. */
body.mf-academia-view .btn:not(.c-btn-circle):not(.close),
body.mf-academia-view input[type="button"]:not(.close),
body.mf-academia-view input[type="submit"]:not(.close),
body.mf-academia-view button:not(.close):not(.mf-header-action) {
    border-radius: var(--m-radius) !important;
}

/* Garante o padrão também no <a> interno gerado por ButtonUsc e
   ButtonAsyncUsc, mesmo quando o wrapper recebe classes adicionais. */
body.mf-academia-view .buttons-theme > .btn,
body.mf-academia-view .buttons-theme .c-btn-square,
body.mf-academia-view .panel-buttons-theme .buttons-theme > .btn,
body.mf-academia-view .panel-popup-buttons-theme .buttons-theme > .btn {
    border-radius: var(--m-radius) !important;
}

body.mf-academia-view .form-control,
body.mf-academia-view input[type="text"],
body.mf-academia-view input[type="password"],
body.mf-academia-view input[type="number"],
body.mf-academia-view input[type="email"],
body.mf-academia-view select,
body.mf-academia-view textarea {
    border-radius: 9px !important;
}

body.mf-academia-view textarea.form-control,
body.mf-academia-view textarea {
    min-height: 92px;
    resize: vertical;
}

/* =====================================================================
   NFS-E — fluxo de emissão
   ===================================================================== */

body.mf-academia-view .nfse-page .nfse-busca-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px 18px;
    align-items: start;
}

body.mf-academia-view .nfse-page .nfse-field {
    min-width: 0;
}

body.mf-academia-view .nfse-page .nfse-field-company,
body.mf-academia-view .nfse-page .nfse-field-period,
body.mf-academia-view .nfse-page .nfse-field-registration {
    grid-column: span 3;
}

body.mf-academia-view .nfse-page .nfse-field-status {
    grid-column: span 2;
}

body.mf-academia-view .nfse-page .nfse-field-payment {
    grid-column: span 4;
}

body.mf-academia-view .nfse-page .nfse-field-taxpayer {
    grid-column: span 6;
}

body.mf-academia-view .nfse-page .nfse-field .form-group,
body.mf-academia-view .nfse-page .nfse-field .g3-between-textbox,
body.mf-academia-view .nfse-page .nfse-popup-fields > .form-group {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

body.mf-academia-view .nfse-page .nfse-search-actions {
    justify-content: flex-end;
    min-height: 0;
    margin-top: -4px !important;
}

body.mf-academia-view .nfse-page .nfse-results {
    margin-bottom: 16px;
}

body.mf-academia-view .nfse-page .nfse-results .datagrid-theme {
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 14px !important;
    background: rgba(2, 10, 6, .82) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18) !important;
}

body.mf-academia-view .nfse-page .nfse-results .datagrid-title {
    padding: 15px 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .055em;
}

body.mf-academia-view .nfse-page .nfse-results .datagrid-control-table {
    margin: 0 !important;
    background: transparent !important;
}

body.mf-academia-view .nfse-page .nfse-results .datagrid-column-theme th {
    border-color: rgba(255, 255, 255, .08) !important;
    background: rgba(255, 255, 255, .035) !important;
    color: rgba(255, 255, 255, .78) !important;
}

body.mf-academia-view .nfse-page .nfse-results .datagrid-control-table tbody td {
    border-color: rgba(255, 255, 255, .07) !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .82) !important;
}

body.mf-academia-view .nfse-page .nfse-results .datagrid-empty-cell,
body.mf-academia-view .nfse-page .nfse-results .datagrid-empty-state {
    background: rgba(255, 255, 255, .025) !important;
}

body.mf-academia-view .nfse-page .nfse-results-actions {
    justify-content: space-between;
    min-height: 0;
}

body.mf-academia-view .nfse-page .nfse-popup-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

body.mf-academia-view .nfse-page .nfse-popup-actions {
    margin-top: 20px !important;
}

@media (max-width: 767px) {
    body.mf-academia-view .nfse-page .nfse-busca-grid,
    body.mf-academia-view .nfse-page .nfse-popup-fields {
        grid-template-columns: 1fr;
    }

    body.mf-academia-view .nfse-page .nfse-field-company,
    body.mf-academia-view .nfse-page .nfse-field-period,
    body.mf-academia-view .nfse-page .nfse-field-status,
    body.mf-academia-view .nfse-page .nfse-field-payment,
    body.mf-academia-view .nfse-page .nfse-field-registration,
    body.mf-academia-view .nfse-page .nfse-field-taxpayer {
        grid-column: auto;
    }

    body.mf-academia-view .nfse-page .nfse-search-actions,
    body.mf-academia-view .nfse-page .nfse-results-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body.mf-academia-view .nfse-page .nfse-search-actions > .buttons-theme,
    body.mf-academia-view .nfse-page .nfse-results-actions > .buttons-theme {
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 8px !important;
    }

    body.mf-academia-view .nfse-page .nfse-search-actions > .buttons-theme > .btn,
    body.mf-academia-view .nfse-page .nfse-results-actions > .buttons-theme > .btn {
        width: 100%;
    }
}

body.mf-academia-view .table-responsive,
body.mf-academia-view [class*="grid"] {
    max-width: 100%;
}

body.mf-academia-view table {
    border-collapse: separate;
    border-spacing: 0;
}

body.mf-academia-view .center-content {
    align-items: stretch;
    gap: 18px;
}

body.mf-academia-view .center-content > .tile-link,
body.mf-academia-view .center-content > a.tile-link {
    height: auto;
    min-height: 100%;
}

body.mf-academia-view .center-content .tile-theme {
    height: 100%;
    margin: 0 !important;
}

/* Os menus em tiles usavam flex-grow, que redistribui a largura em cada
   linha e pode deixar fileiras com medidas diferentes. No desktop, uma
   grade de colunas explícitas mantém cards, intervalos e laterais simétricos. */
@media (min-width: 768px) {
    body.mf-academia-view .center-content:not(.hero-content) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
        justify-content: center;
        align-items: stretch;
    }

    body.mf-academia-view .center-content:not(.hero-content) > .tile-link,
    body.mf-academia-view .center-content:not(.hero-content) > a.tile-link {
        width: 100%;
        max-width: none;
        min-height: 0;
    }
}

@media (min-width: 992px) {
    body.mf-academia-view .center-content:not(.hero-content) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    body.mf-academia-view .mf-page-shell {
        padding: 70px 10px 30px;
    }

    body.mf-academia-view .panel-info-theme,
    body.mf-academia-view .accordion-theme {
        margin-bottom: 14px;
        border-radius: 11px !important;
    }

    body.mf-academia-view .panel-info-theme .panel-body,
    body.mf-academia-view .accordion-theme .accordion-body {
        padding: 14px 12px !important;
    }

    body.mf-academia-view .accordion-theme .panel-title > a {
        grid-template-columns: 20px 1fr auto auto;
        padding: 13px 14px !important;
    }

    body.mf-academia-view .accordion-theme .accordion-subtitle {
        display: none;
    }
}

/* =====================================================================
   PRESCRIÇÃO DE TREINO — editor orientado à tarefa
   ===================================================================== */

body.mf-academia-view .mf-prescription-editor {
    --mf-editor-border: rgba(0, 212, 90, .18);
    padding-bottom: 18px;
    padding-left: 15px;
}

body.mf-academia-view .mf-prescription-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-right: 15px;
    margin-bottom: 15px;
    padding: 15px 15px 15px 15px;
    border: 1px solid var(--mf-editor-border);
    border-radius: var(--m-radius);
    background: linear-gradient(135deg, rgba(0,212,90,.10), rgba(0,0,0,.18));
}

body.mf-academia-view .mf-prescription-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #00d45a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

body.mf-academia-view .mf-prescription-intro h2 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
}

body.mf-academia-view .mf-prescription-intro p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 14px;
    line-height: 1.55;
}

body.mf-academia-view .mf-prescription-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

body.mf-academia-view .mf-prescription-steps span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: 700;
}

body.mf-academia-view .mf-prescription-steps b {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(0,212,90,.38);
    border-radius: 50%;
    color: #00d45a;
    background: rgba(0,212,90,.08);
}

body.mf-academia-view .mf-prescription-section-help {
    clear: both;
    margin: 0 0 18px;
    padding: 9px 12px;
    border-radius: 9px;
    color: rgba(255,255,255,.64);
    background: rgba(255,255,255,.035);
    font-size: 11px;
}

body.mf-academia-view .mf-prescription-section-help i {
    margin-right: 6px;
    color: #00d45a;
}

body.mf-academia-view .mf-exercise-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

body.mf-academia-view .mf-exercise-section-head strong,
body.mf-academia-view .mf-exercise-section-head span {
    display: block;
}

body.mf-academia-view .mf-exercise-section-head strong {
    margin-bottom: 3px;
    color: #fff;
    font-size: 14px;
}

body.mf-academia-view .mf-exercise-section-head span {
    color: rgba(255,255,255,.58);
    font-size: 11px;
}

body.mf-academia-view .mf-exercise-add-shortcut {
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid #00d45a;
    border-radius: var(--m-radius) !important;
    color: #03170b;
    background: #00d45a;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

body.mf-academia-view .mf-exercise-add-shortcut i {
    margin-right: 6px;
}

body.mf-academia-view .mf-prescription-editor .datagrid-title {
    display: none;
}

body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody tr {
    transition: background-color .18s ease, transform .18s ease;
}

body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody tr:hover {
    background: rgba(0,212,90,.055) !important;
}

body.mf-academia-view .mf-exercise-toolbar,
body.mf-academia-view .mf-prescription-actions,
body.mf-academia-view .mf-prescription-actions-secondary,
body.mf-academia-view .mf-prescription-actions-primary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

body.mf-academia-view .mf-exercise-toolbar {
    margin-top: 12px;
    min-height: 44px;
}

body.mf-academia-view .mf-exercise-toolbar > .buttons-theme,
body.mf-academia-view .mf-prescription-actions .buttons-theme {
    float: none !important;
    margin: 0 !important;
}

body.mf-academia-view .mf-exercise-toolbar > .buttons-theme:first-child {
    display: none;
}

body.mf-academia-view .mf-exercise-toolbar .btn {
    min-width: auto !important;
}

body.mf-academia-view .mf-prescription-actions {
    justify-content: space-between;
    width: 100%;
    min-height: 64px;
    margin: 10px 0 0 !important;
    padding: 10px 12px;
    border: 1px solid var(--mf-editor-border);
    border-radius: var(--m-radius);
    background: rgba(2,10,6,.96);
    box-shadow: 0 12px 30px rgba(0,0,0,.30);
}

body.mf-academia-view .mf-prescription-actions-primary {
    margin-left: auto;
}

body.mf-academia-view .mf-prescription-actions-primary > .buttons-theme:first-child .btn {
    color: #ffb8b8 !important;
    border-color: rgba(255,83,83,.55) !important;
    background: rgba(120,20,20,.20) !important;
}

body.mf-academia-view .mf-prescription-actions-primary > .buttons-theme:last-child .btn {
    color: #03170b !important;
    border-color: #00d45a !important;
    background: #00d45a !important;
    box-shadow: 0 6px 18px rgba(0,212,90,.20);
}

@media (max-width: 767px) {
    body.mf-academia-view .mf-prescription-intro {
        display: block;
        padding: 15px;
    }

    body.mf-academia-view .mf-prescription-intro h2 {
        font-size: 19px;
    }

    body.mf-academia-view .mf-prescription-intro p {
        font-size: 13px;
        line-height: 1.6;
    }

    body.mf-academia-view .mf-prescription-steps {
        justify-content: space-between;
        margin-top: 14px;
    }

    body.mf-academia-view .mf-prescription-steps span {
        gap: 4px;
        font-size: 10px;
    }

    body.mf-academia-view .mf-exercise-section-head {
        display: block;
    }

    body.mf-academia-view .mf-exercise-add-shortcut {
        width: 100%;
        margin-top: 12px;
    }

    body.mf-academia-view .mf-prescription-editor .datagrid-theme {
        overflow: visible !important;
    }

    body.mf-academia-view .mf-prescription-editor .datagrid-control-table,
    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody {
        display: block;
        width: 100%;
    }

    body.mf-academia-view .mf-prescription-editor .datagrid-control-table thead {
        display: none;
    }

    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody tr {
        position: relative;
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr) minmax(62px, auto);
        gap: 4px 10px;
        margin: 0 0 10px;
        padding: 12px 10px 12px 48px;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 12px;
        background: rgba(255,255,255,.025);
    }

    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody td {
        display: block;
        width: auto !important;
        min-height: 0 !important;
        padding: 3px 0 !important;
        border: 0 !important;
        color: rgba(255,255,255,.72);
        font-size: 11px;
    }

    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody td:first-child {
        position: absolute;
        top: 14px;
        left: 12px;
    }

    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody td:nth-child(2) {
        grid-column: 1;
        grid-row: 1 / span 2;
        color: #00d45a;
        font-size: 18px;
        font-weight: 900;
    }

    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody td:nth-child(2)::before {
        content: "TREINO ";
        display: block;
        color: rgba(255,255,255,.42);
        font-size: 8px;
        letter-spacing: .08em;
    }

    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody td:nth-child(3) {
        grid-column: 2 / 4;
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
    }

    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody td:nth-child(4) {
        grid-column: 2 / 4;
        color: rgba(255,255,255,.48);
    }

    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody td:nth-child(5)::before { content: "Séries: "; }
    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody td:nth-child(6)::before { content: "Repetições: "; }
    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody td:nth-child(7)::before { content: "Intervalo: "; }
    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody td:nth-child(8)::before { content: "Carga: "; }

    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody td:nth-child(n+5)::before {
        color: rgba(255,255,255,.42);
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
    }

    body.mf-academia-view .mf-prescription-editor .datagrid-control-table tbody tr:has(.datagrid-empty-cell) {
        display: block;
        padding: 0;
    }

    body.mf-academia-view .mf-prescription-editor .datagrid-control-table .datagrid-empty-cell {
        position: static !important;
        display: block;
        padding: 22px 10px !important;
    }

    body.mf-academia-view .mf-exercise-toolbar {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    body.mf-academia-view .mf-exercise-toolbar > .buttons-theme,
    body.mf-academia-view .mf-exercise-toolbar .btn {
        width: 100% !important;
    }

    body.mf-academia-view .mf-exercise-toolbar .btn {
        min-width: 0 !important;
        padding: 7px 4px 6px !important;
        font-size: 9px !important;
        white-space: nowrap;
    }

    body.mf-academia-view .mf-exercise-toolbar .btn i {
        margin-right: 2px !important;
        font-size: 10px !important;
    }

    body.mf-academia-view .mf-prescription-actions {
        display: block;
        position: static;
        padding: 9px;
    }

    body.mf-academia-view .mf-prescription-actions-secondary,
    body.mf-academia-view .mf-prescription-actions-primary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    body.mf-academia-view .mf-prescription-actions-secondary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 7px;
    }

    body.mf-academia-view .mf-prescription-actions .buttons-theme,
    body.mf-academia-view .mf-prescription-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Editor de planos: organiza o cadastro extenso sem comprimir grades laterais. */
body.mf-academia-view .plano-editor-tabs,
body.mf-academia-view .aluno-detalhe-tabs {
    margin-top: 10px;
}

/* Abas reutilizáveis: no celular, mostra a aba atual e abre as demais sob demanda. */
body.mf-academia-view .g3-tabs {
    margin-left: -10px !important;
    padding: 0;
}

body.mf-academia-view .g3-tabs-nav {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

body.mf-academia-view .g3-tabs-nav > li {
    float: none;
    margin: 0;
}

body.mf-academia-view .g3-tabs-nav > li > a,
body.mf-academia-view .g3-tabs-mobile-toggle {
    border: 1px solid rgba(0, 212, 90, .32);
    border-radius: 9px;
    color: rgba(255, 255, 255, .68);
    font-weight: 700;
    letter-spacing: .03em;
    padding: 9px 18px;
    text-transform: uppercase;
}

body.mf-academia-view .g3-tabs-nav > li > a:hover,
body.mf-academia-view .g3-tabs-nav > li > a:focus,
body.mf-academia-view .g3-tabs-nav > li.active > a,
body.mf-academia-view .g3-tabs-nav > li.active > a:hover,
body.mf-academia-view .g3-tabs-nav > li.active > a:focus {
    background: rgba(0, 212, 90, .13);
    border-color: #00d45a;
    color: #00e96a;
}

body.mf-academia-view .g3-tabs-mobile-toggle {
    align-items: center;
    background: rgba(0, 212, 90, .13);
    cursor: pointer;
    display: none;
    justify-content: space-between;
    text-align: left;
    width: 100%;
}

body.mf-academia-view .g3-tabs-mobile-icon {
    color: #00e96a;
    transition: transform .18s ease;
}

body.mf-academia-view .plano-editor-tabs-nav,
body.mf-academia-view .aluno-detalhe-tabs-nav {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0 8px;
    border: 0;
}

body.mf-academia-view .plano-editor-tabs-nav > li,
body.mf-academia-view .aluno-detalhe-tabs-nav > li {
    float: none;
    margin: 0;
}

body.mf-academia-view .plano-editor-tabs-nav > li > a,
body.mf-academia-view .aluno-detalhe-tabs-nav > li > a {
    border: 1px solid rgba(0, 212, 90, .32);
    border-radius: 9px;
    color: rgba(255, 255, 255, .68);
    font-weight: 700;
    letter-spacing: .03em;
    padding: 9px 18px;
    text-transform: uppercase;
}

body.mf-academia-view .plano-editor-tabs-nav > li > a:hover,
body.mf-academia-view .plano-editor-tabs-nav > li > a:focus,
body.mf-academia-view .plano-editor-tabs-nav > li.active > a,
body.mf-academia-view .plano-editor-tabs-nav > li.active > a:hover,
body.mf-academia-view .plano-editor-tabs-nav > li.active > a:focus,
body.mf-academia-view .aluno-detalhe-tabs-nav > li > a:hover,
body.mf-academia-view .aluno-detalhe-tabs-nav > li > a:focus,
body.mf-academia-view .aluno-detalhe-tabs-nav > li.active > a,
body.mf-academia-view .aluno-detalhe-tabs-nav > li.active > a:hover,
body.mf-academia-view .aluno-detalhe-tabs-nav > li.active > a:focus {
    background: rgba(0, 212, 90, .13);
    border-color: #00d45a;
    color: #00e96a;
}

body.mf-academia-view .plano-editor-tab-pane,
body.mf-academia-view .aluno-detalhe-tab-pane {
    display: none;
}

body.mf-academia-view .plano-editor-tab-pane.active,
body.mf-academia-view .aluno-detalhe-tab-pane.active {
    display: block;
}

body.mf-academia-view .plano-editor-tab-section {
    display: block;
}

body.mf-academia-view .plano-editor-tab-section > .panel-info-theme {
    float: none;
    max-width: none;
    width: 100%;
}

body.mf-academia-view .plano-cadastro-grid {
    clear: both;
    display: grid;
    gap: 14px 12px;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    margin-bottom: 16px;
}

body.mf-academia-view .plano-cadastro-grid > .form-group {
    float: none;
    margin: 0;
    min-width: 0;
    width: auto;
}

body.mf-academia-view .plano-cadastro-identificacao > .form-group:first-child,
body.mf-academia-view .plano-cadastro-regras > .form-group {
    grid-column: span 12;
}

body.mf-academia-view .plano-cadastro-identificacao > .form-group:last-child {
    grid-column: span 4;
    max-width: 210px;
}

body.mf-academia-view .plano-cadastro-condicoes > .form-group:nth-child(-n+3) {
    grid-column: span 4;
}

body.mf-academia-view .plano-cadastro-condicoes > .form-group:nth-child(4),
body.mf-academia-view .plano-cadastro-condicoes > .form-group:nth-child(6) {
    grid-column: span 3;
}

body.mf-academia-view .plano-cadastro-condicoes > .form-group:nth-child(5) {
    grid-column: span 6;
}

body.mf-academia-view .plano-cadastro-limites > .form-group:nth-child(1) {
    grid-column: span 6;
}

body.mf-academia-view .plano-cadastro-limites > .form-group:nth-child(2) {
    grid-column: span 6;
}

body.mf-academia-view .plano-cadastro-limites > .form-group:nth-child(n+3) {
    grid-column: span 4;
}

body.mf-academia-view .plano-busca-grid {
    clear: both;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

body.mf-academia-view .plano-busca-grid > .form-group {
    float: none;
    margin: 0;
    min-width: 0;
    width: auto;
}

body.mf-academia-view .plano-busca-grid > .form-group:nth-child(1) {
    grid-column: span 4;
}

body.mf-academia-view .plano-busca-grid > .form-group:nth-child(2),
body.mf-academia-view .plano-busca-grid > .form-group:nth-child(3) {
    grid-column: span 3;
}

body.mf-academia-view .plano-busca-grid > .form-group:nth-child(3) {
    grid-column: span 2;
}

body.mf-academia-view .plano-busca-grid > .g3-between-textbox {
    grid-column: span 3;
}

body.mf-academia-view .plano-filtro-avancado-grid {
    clear: both;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

body.mf-academia-view .plano-filtro-avancado-grid > .form-group {
    float: none;
    grid-column: span 2;
    margin: 0;
    min-width: 0;
    width: auto;
}

body.mf-academia-view .plano-filtro-avancado-grid > .c-checkbox {
    align-self: end;
    float: none !important;
    grid-column: span 2;
    margin: 0 0 10px !important;
}

body.mf-academia-view .plano-filtro-avancado-grid > .g3-between-textbox {
    grid-column: span 4;
}

body.mf-academia-view .plano-empresas .datagrid-theme {
    margin-bottom: 0;
    max-height: 275px;
    overflow: auto;
    padding-right: 2px;
}

body.mf-academia-view .plano-empresas .datagrid-control-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

@media (max-width: 600px) {
    body.mf-academia-view .g3-tabs {
        box-sizing: border-box;
        width: 100% !important;
        margin: 0 0 12px 0px !important;
        padding: 0px;
        background: rgba(0, 212, 90, .045);
        border: 1px solid rgba(0, 212, 90, .32);
        border-radius: var(--m-radius);
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
    }


    body.mf-academia-view .g3-tabs-mobile-toggle {
        box-sizing: border-box;
        display: flex;
    }

    body.mf-academia-view .g3-tabs-nav {
        display: none !important;
        flex-direction: column;
        gap: 6px;
        margin: 8px 10px 0 10px !important;
        box-sizing: border-box;
        width: 95% !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none;
    }

    body.mf-academia-view .g3-tabs.is-open .g3-tabs-nav {
        display: flex !important;
    }

    body.mf-academia-view .g3-tabs.is-open .g3-tabs-nav > li.active {
        display: none !important;
    }

    body.mf-academia-view .g3-tabs-nav > li,
    body.mf-academia-view .g3-tabs-nav > li > a {
        text-align: left;
        width: 100%;
    }

    body.mf-academia-view .g3-tabs-nav > li > a {
        border-radius: var(--m-radius) !important;
        padding: 9px 12px !important;
    }

    body.mf-academia-view .g3-tabs.is-open .g3-tabs-mobile-icon {
        transform: rotate(180deg);
    }

    body.mf-academia-view .plano-editor-tabs-nav {
        flex-wrap: wrap;
        gap: 6px;
    }

    body.mf-academia-view .aluno-detalhe-tabs-nav {
        flex-wrap: wrap;
        gap: 6px;
    }

    body.mf-academia-view .plano-editor-tabs-nav > li {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
    }

    body.mf-academia-view .aluno-detalhe-tabs-nav > li {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
    }

    body.mf-academia-view .plano-editor-tabs-nav > li > a {
        padding: 8px 5px;
    }

    body.mf-academia-view .aluno-detalhe-tabs-nav > li > a {
        padding: 8px 5px;
    }

    body.mf-academia-view .plano-cadastro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.mf-academia-view .plano-busca-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.mf-academia-view .plano-filtro-avancado-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.mf-academia-view .plano-cadastro-grid > .form-group,
    body.mf-academia-view .plano-cadastro-identificacao > .form-group:first-child,
    body.mf-academia-view .plano-cadastro-identificacao > .form-group:last-child,
    body.mf-academia-view .plano-cadastro-regras > .form-group,
    body.mf-academia-view .plano-cadastro-limites > .form-group:nth-child(-n+2),
    body.mf-academia-view .plano-cadastro-limites > .form-group:nth-child(n+3) {
        grid-column: span 2;
        max-width: none;
    }

    body.mf-academia-view .plano-cadastro-condicoes > .form-group:nth-child(n),
    body.mf-academia-view .plano-cadastro-limites > .form-group:nth-child(n) {
        grid-column: span 2;
    }

    body.mf-academia-view .plano-filtro-avancado-grid > .form-group,
    body.mf-academia-view .plano-filtro-avancado-grid > .c-checkbox,
    body.mf-academia-view .plano-filtro-avancado-grid > .g3-between-textbox {
        grid-column: span 2;
    }

    body.mf-academia-view .plano-busca-grid > .form-group,
    body.mf-academia-view .plano-busca-grid > .g3-between-textbox {
        grid-column: span 2;
    }
}

@media (min-width: 601px) and (max-width: 1000px) {
    body.mf-academia-view .plano-cadastro-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    body.mf-academia-view .plano-busca-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    body.mf-academia-view .plano-filtro-avancado-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    body.mf-academia-view .plano-cadastro-grid > .form-group,
    body.mf-academia-view .plano-cadastro-identificacao > .form-group:first-child,
    body.mf-academia-view .plano-cadastro-identificacao > .form-group:last-child,
    body.mf-academia-view .plano-cadastro-regras > .form-group,
    body.mf-academia-view .plano-cadastro-limites > .form-group:nth-child(-n+2),
    body.mf-academia-view .plano-cadastro-limites > .form-group:nth-child(n+3) {
        grid-column: span 3;
        max-width: none;
    }

    body.mf-academia-view .plano-cadastro-condicoes > .form-group:nth-child(n),
    body.mf-academia-view .plano-cadastro-limites > .form-group:nth-child(n) {
        grid-column: span 3;
    }

    body.mf-academia-view .plano-filtro-avancado-grid > .form-group,
    body.mf-academia-view .plano-filtro-avancado-grid > .c-checkbox {
        grid-column: span 3;
    }

    body.mf-academia-view .plano-filtro-avancado-grid > .g3-between-textbox {
        grid-column: span 6;
    }

    body.mf-academia-view .plano-busca-grid > .form-group,
    body.mf-academia-view .plano-busca-grid > .g3-between-textbox {
        grid-column: span 3;
    }
}

/* Cadastro de taxas: segue a estrutura de grids e ações do editor de planos. */
body.mf-academia-view .taxa-busca-grid,
body.mf-academia-view .taxa-cadastro-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
}

body.mf-academia-view .taxa-busca-grid > .form-group,
body.mf-academia-view .taxa-cadastro-grid > .form-group {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

body.mf-academia-view .taxa-busca-grid > .form-group:nth-child(1),
body.mf-academia-view .taxa-cadastro-grid > .form-group:nth-child(1) {
    grid-column: span 3;
}

body.mf-academia-view .taxa-busca-grid > .form-group:nth-child(2),
body.mf-academia-view .taxa-cadastro-grid > .form-group:nth-child(2) {
    grid-column: span 2;
}

body.mf-academia-view .taxa-busca-grid > .g3-between-textbox {
    grid-column: span 1;
}

body.mf-academia-view .taxa-cadastro-grid > .form-group:nth-child(3),
body.mf-academia-view .taxa-cadastro-grid > .form-group:nth-child(4) {
    grid-column: span 1;
}

body.mf-academia-view .taxa-editor-hint {
    margin-top: 14px;
    color: rgba(255, 255, 255, .62);
    font-size: 12px;
    line-height: 1.45;
}

body.mf-academia-view .taxa-editor-validation {
    margin: 0 0 18px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 107, 107, .72);
    border-radius: 10px;
    color: #ffe7e7;
    background: rgba(198, 40, 40, .20);
    font-size: 14px;
    font-weight: 700;
}

body.mf-academia-view .taxa-editor-validation[hidden] {
    display: none !important;
}

body.mf-academia-view .taxa-editor-field-error .form-control,
body.mf-academia-view .taxa-editor-field-error .g3-select-button {
    border-color: #ff7878 !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, .16) !important;
}

body.mf-academia-view .taxa-list-actions,
body.mf-academia-view .taxa-editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body.mf-academia-view .taxa-list-actions > .buttons-theme,
body.mf-academia-view .taxa-editor-actions > .buttons-theme {
    float: none !important;
    margin: 0 !important;
}

body.mf-academia-view .taxa-action-danger {
    margin-left: auto !important;
}

body.mf-academia-view .taxa-action-danger .btn {
    border-color: rgba(255, 107, 107, .72) !important;
    color: #ffe3e3 !important;
}

body.mf-academia-view .taxa-action-danger .btn:hover,
body.mf-academia-view .taxa-action-danger .btn:focus {
    border-color: #ff7878 !important;
    background: rgba(198, 40, 40, .28) !important;
}

@media (max-width: 600px) {
    body.mf-academia-view .taxa-busca-grid,
    body.mf-academia-view .taxa-cadastro-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.mf-academia-view .taxa-busca-grid > .form-group,
    body.mf-academia-view .taxa-busca-grid > .g3-between-textbox,
    body.mf-academia-view .taxa-cadastro-grid > .form-group {
        grid-column: span 1;
    }

    body.mf-academia-view .taxa-list-actions > .buttons-theme,
    body.mf-academia-view .taxa-editor-actions > .buttons-theme {
        flex: 1 1 100%;
        width: 100%;
    }

    body.mf-academia-view .taxa-list-actions > .buttons-theme > .btn,
    body.mf-academia-view .taxa-editor-actions > .buttons-theme > .btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.mf-academia-view .taxa-action-danger {
        margin-left: 0 !important;
    }

    body.mf-academia-view .taxa-list-grid .datagrid-theme {
        overflow: visible !important;
    }

    body.mf-academia-view .taxa-list-grid .datagrid-control-table,
    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody {
        display: block;
        width: 100%;
    }

    body.mf-academia-view .taxa-list-grid .datagrid-control-table thead {
        display: none;
    }

    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
        margin: 0;
        padding: 13px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody tr:last-child {
        border-bottom: 0;
    }

    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody td {
        display: block;
        width: auto !important;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
    }

    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody td:first-child {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody td:nth-child(2) {
        grid-column: 1;
        grid-row: 1;
        color: #fff;
        font-size: 16px;
        font-weight: 800;
    }

    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody td:not(:first-child):not(:nth-child(2))::before {
        display: block;
        margin-bottom: 2px;
        color: rgba(255, 255, 255, .52);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody td:nth-child(2)::before { content: none; }
    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody td:nth-child(3)::before { content: "Valor"; }
    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody td:nth-child(4)::before { content: "Tipo"; }
    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody td:nth-child(5)::before { content: "Quantidade disponível"; }

    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody td.datagrid-empty-cell {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody tr:has(.fa-chevron-left) {
        display: block;
    }

    body.mf-academia-view .taxa-list-grid .datagrid-control-table tbody td:has(.fa-chevron-left) {
        display: block;
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

/* Editor de planos: ações explícitas, erros próximos ao campo e grades legíveis no celular. */
body.mf-academia-view .plano-editor-validation {
    margin: 0 0 18px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 107, 107, .72);
    border-radius: 10px;
    color: #ffe7e7;
    background: rgba(198, 40, 40, .20);
    font-size: 14px;
    font-weight: 700;
}

body.mf-academia-view .plano-editor-validation[hidden] {
    display: none !important;
}

body.mf-academia-view .plano-item-parcelas-hint {
    clear: both;
    margin: 10px 0;
    padding: 9px 11px;
    border-left: 3px solid rgba(0, 212, 90, .72);
    color: rgba(255, 255, 255, .74);
    background: rgba(0, 212, 90, .07);
    font-size: 12px;
    line-height: 1.45;
}

body.mf-academia-view .plano-parcelamento-variavel-popup .modal-body {
    padding-top: 24px;
}

body.mf-academia-view .plano-parcelamento-variavel-ajuda {
    color: rgba(255, 255, 255, .74);
    font-size: 13px;
    line-height: 1.45;
    margin: 0 0 14px;
}

body.mf-academia-view .plano-banner-valor-interno {
    display: none;
}

body.mf-academia-view .plano-banner-resumo {
    clear: both;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(0, 212, 90, .35);
    border-radius: 10px;
    background: rgba(0, 212, 90, .06);
}

body.mf-academia-view .plano-banner-resumo-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

body.mf-academia-view .plano-banner-resumo-cabecalho strong,
body.mf-academia-view .plano-banner-resumo-etiqueta {
    display: block;
}

body.mf-academia-view .plano-banner-resumo-etiqueta {
    margin-bottom: 3px;
    color: #00e96a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.mf-academia-view .plano-banner-resumo-dados {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 0;
}

body.mf-academia-view .plano-banner-resumo-dados div {
    min-width: 0;
}

body.mf-academia-view .plano-banner-resumo-dados dt {
    color: rgba(255, 255, 255, .58);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.mf-academia-view .plano-banner-resumo-dados dd {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
}

body.mf-academia-view .plano-banner-resumo-itens {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

body.mf-academia-view .plano-banner-resumo-itens > span {
    color: rgba(255, 255, 255, .58);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.mf-academia-view .plano-banner-resumo-itens ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

body.mf-academia-view .plano-banner-resumo-itens li {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    font-size: 12px;
}

body.mf-academia-view .plano-banner-popup-ajuda {
    color: rgba(255, 255, 255, .74);
    font-size: 13px;
    line-height: 1.45;
    margin: 0 0 14px;
}

body.mf-academia-view .plano-banner-popup-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

body.mf-academia-view .plano-banner-popup-grid > .form-group {
    float: none;
    margin: 0;
    min-width: 0;
    width: auto;
}

body.mf-academia-view .plano-banner-popup-grid > .form-group:nth-child(1),
body.mf-academia-view .plano-banner-popup-grid > .form-group:nth-child(5),
body.mf-academia-view .plano-banner-popup-grid > .form-group:nth-child(6) {
    grid-column: span 2;
}

body.mf-academia-view .plano-banner-popup-grid > .form-group:nth-child(2),
body.mf-academia-view .plano-banner-popup-grid > .form-group:nth-child(3),
body.mf-academia-view .plano-banner-popup-grid > .form-group:nth-child(4),
body.mf-academia-view .plano-banner-popup-grid > .form-group:nth-child(7) {
    grid-column: span 3;
}

@media (max-width: 600px) {
    body.mf-academia-view .plano-banner-resumo-cabecalho {
        align-items: flex-start;
        flex-direction: column;
    }

    body.mf-academia-view .plano-banner-resumo-dados,
    body.mf-academia-view .plano-banner-popup-grid {
        grid-template-columns: 1fr;
    }

    body.mf-academia-view .plano-banner-popup-grid > .form-group:nth-child(n) {
        grid-column: auto;
    }
}

body.mf-academia-view .plano-editor-field-error .form-control,
body.mf-academia-view .plano-editor-field-error .g3-select-button,
body.mf-academia-view .g3-between-textbox.plano-editor-field-error input {
    border-color: #ff7878 !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, .16) !important;
}

body.mf-academia-view .plano-editor-actions,
body.mf-academia-view .plano-editor-main-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body.mf-academia-view .plano-editor-actions {
    margin-top: 12px;
}

body.mf-academia-view .plano-editor-actions > .buttons-theme,
body.mf-academia-view .plano-editor-main-actions > .buttons-theme {
    float: none !important;
    margin: 0 !important;
}

body.mf-academia-view .plano-editor-action-danger .btn {
    border-color: rgba(255, 107, 107, .72) !important;
    color: #ffe3e3 !important;
}

body.mf-academia-view .plano-editor-action-danger .btn:hover,
body.mf-academia-view .plano-editor-action-danger .btn:focus {
    border-color: #ff7878 !important;
    background: rgba(198, 40, 40, .28) !important;
}

@media (max-width: 600px) {
    body.mf-academia-view .plano-editor-actions > .buttons-theme {
        flex: 1 1 100%;
        width: 100%;
    }

    body.mf-academia-view .plano-editor-actions > .buttons-theme > .btn,
    body.mf-academia-view .plano-editor-main-actions > .buttons-theme > .btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.mf-academia-view .plano-editor-main-actions > .plano-editor-main-save {
        flex: 1 1 100%;
        width: 100%;
    }

    body.mf-academia-view .plano-editor-main-actions > .buttons-theme:not(.plano-editor-main-save) {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }

    body.mf-academia-view .plano-editor-data .datagrid-theme {
        overflow: visible !important;
    }

    body.mf-academia-view .plano-editor-data .datagrid-control-table,
    body.mf-academia-view .plano-editor-data .datagrid-control-table tbody {
        display: block;
        width: 100%;
    }

    body.mf-academia-view .plano-editor-data .datagrid-control-table thead {
        display: none;
    }

    body.mf-academia-view .plano-editor-data .datagrid-control-table tbody tr {
        display: grid;
        gap: 6px 12px;
        margin: 0;
        padding: 13px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    body.mf-academia-view .plano-editor-data .datagrid-control-table tbody tr:last-child {
        border-bottom: 0;
    }

    body.mf-academia-view .plano-editor-data .datagrid-control-table tbody td {
        display: block;
        width: auto !important;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
    }

    body.mf-academia-view .plano-editor-data .datagrid-control-table tbody td.datagrid-empty-cell {
        grid-column: 1 / -1;
    }

    body.mf-academia-view .plano-editor-data .datagrid-control-table tbody td:not(:first-child)::before {
        display: block;
        margin-bottom: 2px;
        color: rgba(255, 255, 255, .52);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    body.mf-academia-view .plano-editor-item-data .datagrid-control-table tbody tr {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.mf-academia-view .plano-editor-item-data .datagrid-control-table tbody td:first-child {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    body.mf-academia-view .plano-editor-item-data .datagrid-control-table tbody td:nth-child(2) {
        grid-column: 1;
        grid-row: 1;
        color: #fff;
        font-size: 16px;
        font-weight: 800;
    }

    body.mf-academia-view .plano-editor-item-data .datagrid-control-table tbody td:nth-child(2)::before { content: none; }
    body.mf-academia-view .plano-editor-item-data .datagrid-control-table tbody td:nth-child(3)::before { content: "Valor"; }
    body.mf-academia-view .plano-editor-item-data .datagrid-control-table tbody td:nth-child(4)::before { content: "Ordem"; }
    body.mf-academia-view .plano-editor-item-data .datagrid-control-table tbody td:nth-child(5)::before { content: "Parcelas"; }
    body.mf-academia-view .plano-editor-item-data .datagrid-control-table tbody td:nth-child(6)::before { content: "Classe"; }

    body.mf-academia-view .plano-editor-horario-data .datagrid-control-table tbody tr {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.mf-academia-view .plano-editor-horario-data .datagrid-control-table tbody td:first-child,
    body.mf-academia-view .plano-editor-atividade-data .datagrid-control-table tbody td:first-child {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    body.mf-academia-view .plano-editor-horario-data .datagrid-control-table tbody td:nth-child(2),
    body.mf-academia-view .plano-editor-atividade-data .datagrid-control-table tbody td:nth-child(2) {
        color: #fff;
        font-size: 16px;
        font-weight: 800;
    }

    body.mf-academia-view .plano-editor-horario-data .datagrid-control-table tbody td:nth-child(2)::before,
    body.mf-academia-view .plano-editor-atividade-data .datagrid-control-table tbody td:nth-child(2)::before { content: none; }
    body.mf-academia-view .plano-editor-horario-data .datagrid-control-table tbody td:nth-child(3)::before { content: "Início"; }
    body.mf-academia-view .plano-editor-horario-data .datagrid-control-table tbody td:nth-child(4)::before { content: "Final"; }
}