/*
 * Dashboard profissional da plataforma
 * CSS local, sem Bootstrap, Google Fonts, DataTables ou CDN.
 */

:root {
    --app-bg: #f4f7fb;
    --app-surface: #ffffff;
    --app-surface-soft: #f8fafc;
    --app-text: #172033;
    --app-muted: #6b7485;
    --app-border: #e4e9f1;
    --app-primary: #185adb;
    --app-primary-dark: #1047b3;
    --app-primary-soft: #eaf1ff;
    --app-success: #168a5b;
    --app-success-soft: #e8f7f1;
    --app-warning: #c97912;
    --app-warning-soft: #fff4e4;
    --app-danger: #c33b46;
    --app-danger-soft: #fff0f2;
    --app-info: #167d9a;
    --app-info-soft: #e9f7fb;
    --app-purple: #7256d9;
    --app-purple-soft: #f1edff;
    --app-shadow-sm: 0 4px 14px rgba(27, 39, 67, 0.06);
    --app-shadow: 0 12px 32px rgba(27, 39, 67, 0.09);
    --app-shadow-lg: 0 24px 70px rgba(15, 28, 55, 0.18);
    --app-radius-sm: 10px;
    --app-radius: 16px;
    --app-radius-lg: 22px;
    --app-transition: 180ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--app-bg);
}

body.dashboard-page,
body {
    margin: 0;
    background:
        radial-gradient(circle at top right, rgba(24, 90, 219, 0.06), transparent 32rem),
        var(--app-bg);
    color: var(--app-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.modal-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--app-primary);
    text-decoration: none;
    transition: color var(--app-transition), opacity var(--app-transition);
}

a:hover,
a:focus {
    color: var(--app-primary-dark);
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
.btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--app-primary);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 7px 16px rgba(24, 90, 219, 0.18);
    transition: transform var(--app-transition), background-color var(--app-transition), box-shadow var(--app-transition);
}

button:hover,
button:focus,
.btn:hover,
.btn:focus {
    background: var(--app-primary-dark);
    color: #fff;
    box-shadow: 0 10px 22px rgba(24, 90, 219, 0.24);
    outline: none;
}

button:active,
.btn:active {
    transform: translateY(1px);
}

.btn-secondary {
    background: #4f5b70;
    box-shadow: 0 7px 16px rgba(79, 91, 112, 0.17);
}

/* Compatibilidade da grade antiga sem carregar Bootstrap. */
.row,
.market-updates {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -10px;
    margin-left: -10px;
}

[class*="col-"] {
    width: 100%;
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
}

.clearfix::after {
    display: table;
    clear: both;
    content: "";
}

@media (min-width: 576px) {
    .col-sm-3 { width: 25%; }
    .col-sm-6 { width: 50%; }
    .col-sm-12 { width: 100%; }
}

@media (min-width: 768px) {
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.333333%; }
    .col-md-5 { width: 41.666667%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.333333%; }
    .col-md-12 { width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.333333%; }
    .col-lg-6 { width: 50%; }
    .col-lg-9 { width: 75%; }
    .col-lg-12 { width: 100%; }
}

@media (min-width: 1200px) {
    .col-xl-6 { width: 50%; }
    .col-xl-12 { width: 100%; }
}

/* Estrutura geral */
.page-container,
.left-content,
.mother-grid-inner {
    min-height: 100vh;
}

.mother-grid-inner {
    background: transparent;
}

.inner-block {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    padding: 26px 28px 42px;
}

.inner-block > br:first-child,
.inner-block > br:nth-child(3) {
    display: none;
}

.dashboard-section {
    margin-top: 24px;
}

.dashboard-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
}

.dashboard-section-title h2,
.dashboard-section-title h3 {
    margin: 0;
    color: var(--app-text);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.dashboard-section-title p {
    margin: 4px 0 0;
    color: var(--app-muted);
    font-size: 0.93rem;
}

.dashboard-panel,
.work-progres {
    position: relative;
    height: 100%;
    margin: 10px 0;
    padding: 22px;
    overflow: hidden;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
}

.work-progres::before,
.dashboard-panel::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--app-primary), #4b8cff, #69b9ff);
    content: "";
}

.chit-chat-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: var(--app-text);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.chit-chat-heading::before {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-family: FontAwesome;
    font-size: 15px;
    content: "\f0c0";
}

.acende {
    opacity: 1;
    transition: transform var(--app-transition), box-shadow var(--app-transition), opacity var(--app-transition);
}

.acende:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.img-responsive {
    display: block;
    width: 100%;
}

.img-rounded {
    border-radius: 13px;
}

.img-circle {
    border-radius: 50%;
}

/* Cabeçalho */
.cabecalho-plataforma {
    position: relative;
    z-index: 920;
    display: grid;
    grid-template-columns: minmax(420px, 1.25fr) minmax(430px, 1fr);
    gap: 22px;
    align-items: center;
    width: calc(100% - 34px);
    max-width: 1540px;
    margin: 17px auto 0;
    padding: 17px 20px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(228, 233, 241, 0.95);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow);
    backdrop-filter: blur(10px);
}

.header-left {
    display: grid;
    grid-template-columns: auto auto minmax(260px, 1fr);
    gap: 13px;
    align-items: center;
    min-width: 0;
    margin-left: 0 !important;
}

.logo-name {
    display: flex;
    min-width: 130px;
    align-items: center;
}

.logo-name a {
    display: flex;
    align-items: center;
}

.logo-name img {
    display: block;
    width: auto;
    max-width: 165px;
    max-height: 58px;
    object-fit: contain;
}

.header-left .nav-link {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    border-radius: 13px;
    background: var(--app-surface-soft);
    color: var(--app-text);
    font-size: 17px;
    box-shadow: none;
}

.header-left .nav-link:hover {
    border-color: #cbd8ec;
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.link-indicacao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 9px;
    align-items: center;
    min-width: 0;
    padding: 10px 11px 10px 13px;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: 14px;
}

.link-indicacao > i {
    display: none;
}

.link-indicacao > a {
    grid-column: 1 / -1;
    overflow: hidden;
    color: var(--app-muted);
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-indicacao input {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: #fff;
    color: #445066;
    font-size: 0.86rem;
    outline: none;
}

.link-indicacao input:focus {
    border-color: #aec8fa;
    box-shadow: 0 0 0 3px rgba(24, 90, 219, 0.09);
}

.link-indicacao button {
    min-height: 38px;
    padding: 9px 13px;
    border-radius: 9px;
    font-size: 0.82rem;
    box-shadow: none;
}

.header-center,
.profile_details_center {
    min-width: 0;
}

.nofitications-dropdown {
    display: flex;
    flex-wrap: nowrap;
    gap: 13px;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nofitications-dropdown > table:first-child {
    width: auto;
    max-width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 7px 0;
}

.nofitications-dropdown > table:first-child td {
    padding: 0;
    white-space: nowrap;
}

.nofitications-dropdown > table:first-child p,
#ponto {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 10px;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    color: #4d586b;
    font-size: 0.76rem;
    font-weight: 700;
}

.nofitications-dropdown > table:first-child img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.profile_details {
    position: relative;
    flex: 0 0 auto;
}

.profile_details ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile_details_drop {
    position: relative;
}

.dropdown-toggle {
    display: block;
    min-width: 170px;
    padding: 6px 9px 6px 7px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--app-shadow-sm);
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
    border-color: #cbd7e8;
    background: var(--app-surface-soft);
    text-decoration: none;
}

.profile_img {
    display: flex;
    gap: 10px;
    align-items: center;
}

.prfil-img img {
    display: block;
    width: 43px;
    height: 43px;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ec, 0 6px 14px rgba(23, 32, 51, 0.12);
}

.user-name {
    flex: 1;
    min-width: 0;
}

.user-name p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    overflow: hidden;
    color: var(--app-text);
    font-size: 0.9rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile_img > .fa-angle-up {
    display: none;
}

.dropdown-menu {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 9px);
    right: 0;
    display: none;
    min-width: 175px;
    padding: 7px;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: var(--app-shadow);
}

.dropdown.is-open > .dropdown-menu,
.profile_details_drop.is-open > .dropdown-menu {
    display: block;
    animation: dropdownIn 150ms ease-out;
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--app-text);
    font-weight: 700;
}

.dropdown-menu a:hover {
    background: var(--app-danger-soft);
    color: var(--app-danger);
}

.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: inline-flex;
    min-width: 20px;
    min-height: 20px;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

#icone_mensagem {
    background: var(--app-danger);
}

/* Bloco de qualificação e pontos no cabeçalho */
.nofitications-dropdown > table:last-of-type {
    width: auto;
    margin: 0;
    border-collapse: separate;
    border-spacing: 7px 0;
}

.nofitications-dropdown > table:last-of-type td {
    padding: 0;
    color: var(--app-text);
    white-space: nowrap;
}

.nofitications-dropdown > table:last-of-type strong {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--app-purple-soft);
    border: 1px solid #ded7ff;
    border-radius: 10px;
    color: #5e48b4;
    font-size: 0.76rem;
}

#ponto1 {
    margin: 0;
    padding: 0;
    font-size: inherit;
}

.verm {
    background: var(--app-success-soft);
    color: var(--app-danger);
}

/* Alertas e progresso */
.alert {
    position: relative;
    width: 100%;
    margin: 10px 0;
    padding: 14px 17px 14px 46px;
    border: 1px solid transparent;
    border-radius: 13px;
    text-align: left;
}

.alert::before {
    position: absolute;
    top: 50%;
    left: 17px;
    color: currentColor;
    font-family: FontAwesome;
    font-size: 18px;
    content: "\f071";
    transform: translateY(-50%);
}

.alert h4 {
    margin: 0;
    font-size: 0.93rem;
    font-weight: 800;
}

.alert-danger {
    background: var(--app-danger-soft);
    border-color: #ffd5da;
    color: #9f303a;
}

.alert-danger a {
    color: #8e2630;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.progress {
    width: 100%;
    height: 10px;
    overflow: hidden;
    background: #e8edf5;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(23, 32, 51, 0.06);
}

.progress-bar {
    height: 100%;
    min-width: 0;
    max-width: 100%;
    background: linear-gradient(90deg, var(--app-primary), #4c8cf3);
    border-radius: inherit;
    transition: width 350ms ease;
}

/* Datas de ativação */
.table.activation-table {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
}

.table.activation-table thead th {
    background: #f7f9fc;
}

.table.activation-table td:last-child,
.table.activation-table th:last-child {
    color: var(--app-danger);
}

/* Cards financeiros */
.inner-block .market-updates {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.market-updates > [class*="col-"] {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.market-update-block {
    position: relative;
    display: flex;
    width: 100% !important;
    min-height: 154px;
    height: 100% !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 22px 21px !important;
    overflow: hidden;
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    color: var(--app-text);
    box-shadow: var(--app-shadow-sm) !important;
    transition: transform var(--app-transition), box-shadow var(--app-transition), border-color var(--app-transition) !important;
}

.market-update-block::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    background: var(--card-accent, var(--app-primary));
    content: "";
}

.market-update-block::after {
    position: absolute;
    right: -45px;
    bottom: -65px;
    width: 155px;
    height: 155px;
    border-radius: 50%;
    background: var(--card-soft, var(--app-primary-soft));
    content: "";
    opacity: 0.7;
}

.market-update-block:hover {
    border-color: #d3dce9;
    transform: translateY(-3px);
    box-shadow: var(--app-shadow) !important;
    filter: none;
}

.market-update-block.clr-block-1 {
    --card-accent: var(--app-success);
    --card-soft: var(--app-success-soft);
}

.market-update-block.clr-block-2 {
    --card-accent: var(--app-warning);
    --card-soft: var(--app-warning-soft);
}

.market-update-block.clr-block-3 {
    --card-accent: var(--app-primary);
    --card-soft: var(--app-primary-soft);
}

.market-update-block.clr-block-4 {
    --card-accent: var(--app-purple);
    --card-soft: var(--app-purple-soft);
}

.market-update-block.clr-block-5 {
    --card-accent: var(--app-info);
    --card-soft: var(--app-info-soft);
}

.market-update-left {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    width: auto !important;
    padding: 0 12px 0 5px !important;
    text-align: left;
}

.market-update-left h3,
.market-update-left h4,
.market-update-left p {
    margin: 0;
    color: var(--app-text) !important;
}

.market-update-left h3 {
    margin-bottom: 12px;
    color: var(--app-muted) !important;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.market-update-left h4 {
    color: var(--app-text) !important;
    font-size: clamp(1.34rem, 2vw, 1.72rem);
    font-weight: 850;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.market-update-left h4 + h4,
.market-update-left h4 p,
.market-update-left p {
    margin-top: 8px;
    color: var(--app-muted) !important;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.market-update-left a {
    display: inline-flex;
    margin-top: 9px;
    color: var(--card-accent, var(--app-primary));
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.market-update-left a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.market-update-right {
    position: relative;
    z-index: 2;
    flex: 0 0 66px;
    width: auto !important;
    padding: 0 !important;
}

.market-update-right i.fa {
    display: flex !important;
    width: 62px !important;
    height: 62px !important;
    align-items: center;
    justify-content: center;
    margin-left: 0 !important;
    border: 1px solid rgba(24, 90, 219, 0.10);
    border-radius: 18px !important;
    background: var(--card-soft, var(--app-primary-soft)) !important;
    color: var(--card-accent, var(--app-primary)) !important;
    font-size: 27px !important;
    line-height: 1 !important;
    box-shadow: none;
}

.market-update-left br {
    display: none;
}

#invi {
    display: none;
}

.cor_tr,
.cor_tr2 {
    background: #fff;
}

.th,
.td {
    background: var(--app-danger-soft);
}

/* Vídeo e apresentação */
.dashboard-feature {
    margin-top: 4px;
    padding: 24px;
    background: linear-gradient(145deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow);
}

.dashboard-feature .row {
    align-items: center;
}

.dashboard-feature-copy {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 18px 16px 18px 24px;
}

.dashboard-feature-copy .eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    margin-bottom: 11px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.dashboard-feature-copy h1 {
    margin: 0 0 12px;
    color: var(--app-text);
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    font-weight: 850;
    letter-spacing: -0.045em;
    line-height: 1.12;
}

.dashboard-feature-copy .feature-text {
    color: var(--app-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.video-local-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0;
    background: linear-gradient(145deg, #101a2c, #1c3157);
    border: 1px solid #243756;
    border-radius: 17px;
    box-shadow: 0 18px 36px rgba(14, 29, 57, 0.2);
}

.video-local-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #080d17;
}

.video-local-aviso {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    color: #fff;
    text-align: center;
}

.video-local-aviso i {
    display: inline-flex;
    width: 68px;
    height: 68px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 21px;
    background: rgba(255,255,255,0.09);
    font-size: 30px;
}

.video-local-aviso strong {
    margin-bottom: 7px;
    font-size: 1.07rem;
}

.video-local-aviso small {
    max-width: 480px;
    color: #c7d3e6;
    line-height: 1.6;
}

/* Tabelas */
.table,
.tabela-propria,
#example {
    width: 100%;
    margin: 0 !important;
    border-collapse: collapse;
    background: #fff;
}

.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--app-border);
    border-radius: 13px;
}

.table th,
.table td,
.tabela-propria th,
.tabela-propria td,
#example th,
#example td {
    padding: 12px 13px;
    border-bottom: 1px solid #edf0f5;
    color: #344055;
    font-size: 0.88rem;
    text-align: center;
    vertical-align: middle;
}

.table thead th,
.tabela-propria thead th,
#example thead th {
    background: #f7f9fc;
    color: #566175;
    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

#example thead th[data-sortable="true"] {
    cursor: pointer;
    user-select: none;
}

#example thead th[data-sortable="true"]::after {
    margin-left: 7px;
    color: #98a3b5;
    content: "↕";
    font-size: 11px;
}

#example thead th[aria-sort="ascending"]::after { content: "↑"; }
#example thead th[aria-sort="descending"]::after { content: "↓"; }

.table tbody tr:last-child td,
.tabela-propria tbody tr:last-child td,
#example tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr,
.tabela-propria tbody tr,
#example tbody tr {
    transition: background-color var(--app-transition);
}

.table tbody tr:hover,
.tabela-propria tbody tr:hover,
#example tbody tr:hover {
    background: #fbfcfe;
}

.status-pill {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 850;
}

.status-pill::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.status-pill.is-active {
    background: var(--app-success-soft);
    color: var(--app-success);
}

.status-pill.is-inactive {
    background: var(--app-danger-soft);
    color: var(--app-danger);
}

.tabela-controles {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 13px;
}

.tabela-controles label {
    width: 100%;
    max-width: 390px;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.tabela-controles input {
    width: 100%;
    height: 42px;
    margin-top: 6px;
    padding: 8px 12px 8px 37px;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    background:
        linear-gradient(transparent, transparent),
        #fff;
    color: var(--app-text);
    outline: none;
}

.tabela-controles label {
    position: relative;
}

.tabela-controles label::after {
    position: absolute;
    bottom: 10px;
    left: 13px;
    color: #98a3b5;
    font-family: FontAwesome;
    content: "\f002";
}

.tabela-controles input:focus {
    border-color: #b3c9f5;
    box-shadow: 0 0 0 3px rgba(24, 90, 219, 0.08);
}

/* Banner / slide */
.dashboard-banner-card {
    display: flex;
    height: 100%;
    min-height: 305px;
    align-items: stretch;
}

.dashboard-banner-card a {
    display: block;
    width: 100%;
}

.dashboard-banner-card img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    border-radius: 13px;
}

/* Treinamentos */
.training-section {
    width: 100%;
    margin-top: 28px;
}

.training-section .section-heading {
    width: 100%;
    margin: 0 10px 15px;
}

.training-section .section-heading h3 {
    margin: 0;
    color: var(--app-text);
    font-size: 1.4rem;
    font-weight: 850;
    letter-spacing: -0.025em;
}

.training-section .section-heading p {
    margin: 4px 0 0;
    color: var(--app-muted);
}

.training-card {
    display: flex;
    margin-bottom: 18px;
}

.training-card-inner {
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
    transition: transform var(--app-transition), box-shadow var(--app-transition), border-color var(--app-transition);
}

.training-card-inner:hover {
    border-color: #d2dceb;
    transform: translateY(-3px);
    box-shadow: var(--app-shadow);
}

.training-card-image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef2f7;
}

.training-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 350ms ease;
}

.training-card-inner:hover .training-card-image img {
    transform: scale(1.035);
}

.training-card-content {
    display: flex;
    min-height: 116px;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px 16px;
}

.training-card-content h4 {
    margin: 0 0 10px;
    color: var(--app-text);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.4;
}

.training-card-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d89515;
    font-size: 0.78rem;
    font-weight: 800;
}

.training-card-rating img {
    width: auto;
    max-width: 90px;
    height: 16px;
    object-fit: contain;
}

/* Modais próprios */
.modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: none !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: rgba(10, 20, 39, 0.72);
    backdrop-filter: blur(4px);
}

.modal.is-open {
    display: flex !important;
}

.modal-dialog {
    width: min(100%, 760px);
    margin: auto;
}

.modal-lg {
    width: min(100%, 980px);
}

.modal-content {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-lg);
    animation: abrirModal 180ms ease-out;
}

@keyframes abrirModal {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header,
.modal-footer {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 18px 22px;
}

.modal-header {
    justify-content: space-between;
    border-bottom: 1px solid var(--app-border);
}

.modal-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--app-border);
}

.modal-title {
    margin: 0;
    color: var(--app-text);
    font-size: 1.25rem;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.modal-body {
    max-height: 72vh;
    padding: 22px;
    overflow-y: auto;
    color: #4b5669;
}

.modal-body img {
    border-radius: 13px;
}

.modal .close {
    width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 12px;
    background: #f0f3f7;
    color: #354056;
    font-size: 24px;
    line-height: 1;
    box-shadow: none;
}

.modal .close:hover {
    background: var(--app-danger-soft);
    color: var(--app-danger);
}

/* Aviso de cópia */
.app-toast {
    position: fixed;
    z-index: 11000;
    right: 22px;
    bottom: 22px;
    display: flex;
    max-width: min(360px, calc(100vw - 30px));
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 12px;
    background: #172033;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 750;
    box-shadow: var(--app-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity var(--app-transition), transform var(--app-transition);
}

.app-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.app-toast::before {
    color: #75d8ad;
    font-family: FontAwesome;
    content: "\f00c";
}

/* Rodapé */
.copyrights {
    width: calc(100% - 34px);
    max-width: 1540px;
    margin: 0 auto 20px;
    padding: 17px 22px;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(228,233,241,0.8);
    border-radius: 14px;
    color: var(--app-muted);
    text-align: center;
}

.copyrights p {
    margin: 0;
    font-size: 0.82rem;
}

/* Menu lateral existente */
.sidebar-menu {
    box-shadow: 8px 0 30px rgba(23, 32, 51, 0.08);
}

.sidebar-icon {
    transition: background-color var(--app-transition), transform var(--app-transition);
}

#menu li a {
    transition: background-color var(--app-transition), color var(--app-transition), padding-left var(--app-transition);
}

#menu li a:hover {
    padding-left: 4px;
}

.header-main.fixed {
    position: sticky;
    z-index: 900;
    top: 0;
}

.climate {
    display: none;
}

/* Responsividade */
@media (max-width: 1180px) {
    .cabecalho-plataforma {
        grid-template-columns: 1fr;
    }

    .header-left {
        grid-template-columns: auto auto minmax(240px, 1fr);
    }

    .nofitications-dropdown {
        justify-content: space-between;
    }
}

@media (max-width: 900px) {
    .cabecalho-plataforma {
        width: calc(100% - 22px);
        margin-top: 11px;
        padding: 14px;
        border-radius: 17px;
    }

    .header-left {
        grid-template-columns: auto auto 1fr;
    }

    .nofitications-dropdown {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .nofitications-dropdown > table:last-of-type {
        margin-left: 0;
    }

    .dashboard-feature-copy {
        padding: 22px 5px 5px;
    }
}

@media (max-width: 720px) {
    .inner-block {
        padding: 18px 13px 32px;
    }

    .header-left {
        grid-template-columns: 1fr auto;
    }

    .logo-name {
        min-width: 0;
    }

    .link-indicacao {
        grid-column: 1 / -1;
    }

    .nofitications-dropdown > table:first-child {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .profile_details {
        flex: 1;
    }

    .dropdown-toggle {
        width: 100%;
        min-width: 0;
    }

    .nofitications-dropdown > table:last-of-type {
        width: 100%;
    }

    .dashboard-feature {
        padding: 15px;
    }

    .dashboard-feature-copy h1 {
        font-size: 1.55rem;
    }

    .market-update-block {
        min-height: 136px;
    }

    .work-progres {
        padding: 17px;
    }

    .training-section .section-heading {
        margin-right: 0;
        margin-left: 0;
    }
}

@media (max-width: 575px) {
    body {
        font-size: 14px;
    }

    .cabecalho-plataforma {
        width: calc(100% - 16px);
        margin-top: 8px;
        padding: 12px;
    }

    .logo-name img {
        max-width: 140px;
        max-height: 50px;
    }

    .header-left .nav-link {
        width: 41px;
        height: 41px;
    }

    .link-indicacao {
        grid-template-columns: 1fr;
    }

    .link-indicacao button {
        width: 100%;
    }

    .nofitications-dropdown {
        gap: 9px;
    }

    .profile_details,
    .nofitications-dropdown > table:last-of-type {
        width: 100%;
    }

    .market-update-block {
        min-height: 126px;
        padding: 18px !important;
    }

    .market-update-right {
        flex-basis: 57px;
    }

    .market-update-right i.fa {
        width: 53px !important;
        height: 53px !important;
        border-radius: 15px !important;
        font-size: 23px !important;
    }

    .market-update-left h4 {
        font-size: 1.35rem;
    }

    .table th,
    .table td,
    .tabela-propria th,
    .tabela-propria td,
    #example th,
    #example td {
        padding: 10px;
        font-size: 0.79rem;
    }

    .modal {
        align-items: flex-start;
        padding: 10px;
    }

    .modal-body {
        max-height: 68vh;
        padding: 15px;
    }

    .app-toast {
        right: 15px;
        bottom: 15px;
        left: 15px;
    }
}

/* ================================================================
   MOTOR DE TEMAS
   As propriedades abaixo recebem seus valores de /app/config/tema.php.
   O mesmo CSS atende aos 50 layouts e às cores personalizadas do admin.
   ================================================================ */

html,
body.dashboard-page,
body {
    background: var(--tema-page-background, var(--app-bg));
    background-attachment: fixed;
    color: var(--app-text);
}

body,
input,
select,
textarea,
button {
    accent-color: var(--app-primary);
}

.cabecalho-plataforma,
.dashboard-panel,
.work-progres,
.market-update-block,
.activation-table,
.table-responsive-wrapper,
.modal-content,
.video-local-container,
.video-local-aviso,
.training-card,
.dashboard-banner-card,
.profile_details,
.dropdown-menu,
.tabela-controles {
    background: var(--tema-card-background, var(--app-surface));
    border-width: var(--tema-card-border-width, 1px);
    border-color: var(--app-border);
    border-style: solid;
    border-radius: var(--app-radius);
    box-shadow: var(--tema-card-shadow, var(--app-shadow));
    -webkit-backdrop-filter: var(--tema-card-backdrop, none);
    backdrop-filter: var(--tema-card-backdrop, none);
}

.cabecalho-plataforma {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg);
}

.dashboard-panel,
.work-progres,
.market-update-block,
.modal-content,
.training-card {
    padding: var(--tema-card-padding, 22px);
}

.row,
.market-updates,
.dashboard-grid,
.training-grid {
    row-gap: var(--tema-gap, 20px);
}

button,
.btn,
.link-indicacao button,
.tabela-controles button,
.modal-footer button {
    min-height: var(--tema-control-height, 42px);
    background: var(--tema-button-background, var(--app-primary));
    color: var(--tema-button-color, #fff);
    border-color: var(--tema-button-border, var(--app-primary));
    border-radius: var(--tema-button-radius, var(--app-radius-sm));
    box-shadow: var(--tema-button-shadow, none);
}

button:hover,
button:focus,
.btn:hover,
.btn:focus,
.link-indicacao button:hover,
.link-indicacao button:focus {
    background: var(--app-primary-dark);
    color: #fff;
    border-color: var(--app-primary-dark);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--app-primary) 24%, transparent);
}

input,
select,
textarea,
.link-indicacao input,
.tabela-controles input {
    min-height: var(--tema-control-height, 42px);
    background: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
    border-radius: var(--app-radius-sm);
}

input:focus,
select:focus,
textarea:focus,
.link-indicacao input:focus,
.tabela-controles input:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 4px var(--app-primary-soft);
}

.market-update-block.clr-block-1 {
    --card-accent: var(--tema-card-1);
    --card-soft: var(--tema-card-1-soft);
}

.market-update-block.clr-block-2 {
    --card-accent: var(--tema-card-2);
    --card-soft: var(--tema-card-2-soft);
}

.market-update-block.clr-block-3 {
    --card-accent: var(--tema-card-3);
    --card-soft: var(--tema-card-3-soft);
}

.market-update-block.clr-block-4 {
    --card-accent: var(--tema-card-4);
    --card-soft: var(--tema-card-4-soft);
}

.market-update-block.clr-block-5 {
    --card-accent: var(--tema-card-5);
    --card-soft: var(--tema-card-5-soft);
}

.market-update-block {
    background: var(--tema-card-background, var(--app-surface)) !important;
    border-color: color-mix(in srgb, var(--card-accent) 24%, var(--app-border)) !important;
    box-shadow: var(--tema-card-shadow, var(--app-shadow)) !important;
}

.market-update-block::before {
    background: var(--card-accent);
}

.market-update-right i,
.market-update-right i.fa {
    color: var(--card-accent) !important;
    background: var(--card-soft) !important;
}

.market-update-left h3,
.market-update-left h4,
.market-update-left p,
.dashboard-section-title h2,
.dashboard-section-title h3,
.chit-chat-heading,
.modal-title,
.user-name p,
.profile-summary strong {
    color: var(--app-text);
}

.dashboard-section-title p,
.market-update-left small,
.profile-summary span,
.video-local-aviso small,
.tabela-controles label,
.table-hint {
    color: var(--app-muted);
}

.progress {
    background: var(--app-primary-soft);
    border-radius: 999px;
}

.progress-bar {
    background: linear-gradient(90deg, var(--app-primary), var(--app-secondary));
}

.alert-danger {
    background: var(--app-danger-soft);
    border-color: color-mix(in srgb, var(--app-danger) 25%, var(--app-border));
    color: var(--app-danger);
}

.alert-success {
    background: var(--app-success-soft);
    border-color: color-mix(in srgb, var(--app-success) 25%, var(--app-border));
    color: var(--app-success);
}

.activation-table thead th,
.tabela-propria thead th {
    background: var(--app-surface-soft);
    color: var(--app-text);
    border-color: var(--app-border);
}

.activation-table tbody td,
.tabela-propria tbody td {
    background: color-mix(in srgb, var(--app-surface) 94%, var(--app-primary-soft));
    color: var(--app-text);
    border-color: var(--app-border);
}

.activation-table tbody tr:hover td,
.tabela-propria tbody tr:hover td {
    background: var(--app-primary-soft);
}

.profile_details_drop > a,
.header-left .nav-link,
.link-indicacao,
.status-account-table,
.profile-rank-table {
    background: var(--app-surface-soft);
    border-color: var(--app-border);
    border-radius: var(--app-radius-sm);
}

.badge-notification {
    background: var(--app-danger);
    color: #fff;
}

.status-badge.is-active,
.status-active {
    background: var(--app-success-soft);
    color: var(--app-success);
}

.status-badge.is-inactive,
.status-inactive {
    background: var(--app-danger-soft);
    color: var(--app-danger);
}

.modal {
    background: color-mix(in srgb, var(--app-text) 70%, transparent);
}

.modal-header,
.modal-footer {
    border-color: var(--app-border);
}

.copyrights {
    color: var(--app-muted);
    border-top-color: var(--app-border);
}

/* Fallback para navegadores sem color-mix(). */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    button:hover,
    button:focus,
    .btn:hover,
    .btn:focus {
        box-shadow: var(--app-shadow-sm);
    }

    .market-update-block {
        border-color: var(--app-border) !important;
    }

    .activation-table tbody td,
    .tabela-propria tbody td {
        background: var(--app-surface);
    }

    .modal {
        background: rgba(8, 13, 23, 0.72);
    }
}

@media (max-width: 767px) {
    .cabecalho-plataforma,
    .dashboard-panel,
    .work-progres,
    .market-update-block,
    .training-card,
    .modal-content {
        border-radius: var(--app-radius);
    }

    .cabecalho-plataforma {
        border-radius: 0 0 var(--app-radius) var(--app-radius);
    }

    .dashboard-panel,
    .work-progres,
    .market-update-block,
    .training-card {
        padding: max(14px, calc(var(--tema-card-padding, 22px) * .82));
    }
}

/* ==================================================================
   TEMA GLOBAL — COMPATIBILIDADE COM TODAS AS PÁGINAS ANTIGAS DE VIEWS
   Esta seção fica por último para vencer style.css e estilos históricos.
   ================================================================== */

:root {
    --app-sidebar-bg: #111827;
    --app-sidebar-bg-2: #0b1020;
    --app-sidebar-text: #ffffff;
    --app-sidebar-muted: rgba(255, 255, 255, 0.72);
    --app-sidebar-active: rgba(24, 90, 219, 0.30);
    --app-sidebar-hover: rgba(255, 255, 255, 0.08);
    --app-header-bg: rgba(255, 255, 255, 0.96);
    --app-sidebar-width: 248px;
    --app-sidebar-collapsed: 82px;
}

html,
body {
    min-width: 0 !important;
    overflow-x: hidden;
}

body,
body.dashboard-page {
    min-height: 100vh;
    background: var(--tema-page-background, var(--app-bg)) !important;
    color: var(--app-text) !important;
}

/* Estrutura principal do template antigo. */
.page-container {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    background: transparent !important;
}

.left-content {
    float: none !important;
    width: calc(100% - var(--app-sidebar-width)) !important;
    min-height: 100vh !important;
    margin-left: var(--app-sidebar-width) !important;
    background: transparent !important;
    transition: width 220ms ease, margin-left 220ms ease !important;
}

.mother-grid-inner {
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    background: transparent !important;
}

.page-container.sidebar-collapsed .left-content {
    width: calc(100% - var(--app-sidebar-collapsed)) !important;
    margin-left: var(--app-sidebar-collapsed) !important;
}

/* Menu lateral compartilhado por menu.php. */
.sidebar-menu {
    position: fixed !important;
    z-index: 1100 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    float: none !important;
    width: var(--app-sidebar-width) !important;
    min-width: 0 !important;
    height: 100vh !important;
    padding: 16px 12px 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, var(--app-sidebar-bg) 0%, var(--app-sidebar-bg-2) 100%) !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 16px 0 42px rgba(6, 12, 24, 0.18) !important;
    color: var(--app-sidebar-text) !important;
    transition: width 220ms ease, transform 220ms ease !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}

.sidebar-menu::-webkit-scrollbar {
    width: 5px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22);
    border-radius: 999px;
}

.page-container.sidebar-collapsed .sidebar-menu {
    width: var(--app-sidebar-collapsed) !important;
}

.sidebar-menu .logo,
.sidebar-menu .logo1,
.sidebar-menu .logo-name,
.sidebar-menu .sidebar-brand {
    display: flex !important;
    min-height: 58px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 12px !important;
    padding: 8px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--app-sidebar-text) !important;
}

.sidebar-menu .logo a,
.sidebar-menu .logo1 a,
.sidebar-menu .sidebar-brand a {
    color: var(--app-sidebar-text) !important;
}

.sidebar-icon {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: var(--app-radius-sm) !important;
    background: var(--tema-button-background, var(--app-primary)) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.18) !important;
}

.sidebar-icon:hover,
.sidebar-icon:focus {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

#menu,
.sidebar-menu ul,
.sidebar-menu ol {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#menu > li,
.sidebar-menu #menu > li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#menu li a,
.sidebar-menu a,
.sidebar-menu #menu li a {
    display: flex !important;
    min-height: 46px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 13px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: var(--app-radius-sm) !important;
    background: transparent !important;
    color: var(--app-sidebar-muted) !important;
    font-size: .91rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    white-space: normal !important;
    box-shadow: none !important;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}

#menu li a i,
#menu li a .fa,
#menu li a .glyphicon,
.sidebar-menu a i {
    display: inline-flex !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    color: var(--app-sidebar-text) !important;
    font-size: 1.05rem !important;
    text-align: center !important;
}

#menu li a:hover,
#menu li a:focus,
#menu li.active > a,
#menu li.current > a,
#menu li.menu-open > a,
.sidebar-menu a:hover,
.sidebar-menu a:focus {
    background: var(--app-sidebar-hover) !important;
    border-color: rgba(255,255,255,.08) !important;
    color: var(--app-sidebar-text) !important;
    transform: translateX(2px);
}

#menu li.active > a,
#menu li.current > a,
#menu li.menu-open > a {
    background: linear-gradient(135deg, var(--app-sidebar-active), rgba(255,255,255,.06)) !important;
    border-color: rgba(255,255,255,.13) !important;
    box-shadow: inset 3px 0 0 var(--app-accent) !important;
}

#menu li ul,
#menu .submenu,
#menu .sub-menu {
    margin: 4px 0 7px 10px !important;
    padding: 5px !important;
    background: rgba(0,0,0,.14) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: var(--app-radius-sm) !important;
}

#menu li ul a,
#menu .submenu a,
#menu .sub-menu a {
    min-height: 39px !important;
    padding: 8px 10px !important;
    font-size: .84rem !important;
}

.page-container.sidebar-collapsed #menu li a,
.page-container.sidebar-collapsed .sidebar-menu #menu li a {
    justify-content: center !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
    white-space: nowrap !important;
}

.page-container.sidebar-collapsed #menu li a span,
.page-container.sidebar-collapsed #menu li a .menu-text,
.page-container.sidebar-collapsed .sidebar-menu .logo-name,
.page-container.sidebar-collapsed #menu li a > strong {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Cabeçalhos antigos e o novo cabecalho.php. */
.header-main,
.header-main.fixed,
.cabecalho-plataforma {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(14px, 1.7vw, 22px) clamp(16px, 2.3vw, 30px) !important;
    background: var(--app-header-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 30px rgba(15, 28, 55, .06) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
}

.header-main.fixed {
    position: sticky !important;
    z-index: 1000 !important;
    top: 0 !important;
}

.cabecalho-plataforma {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .9fr) !important;
    gap: 20px !important;
    align-items: center !important;
}

.cabecalho-plataforma .header-left,
.header-main .header-left {
    margin: 0 !important;
}

.cabecalho-plataforma .logo-name img,
.header-main .logo-name img {
    max-width: 170px !important;
    max-height: 58px !important;
    object-fit: contain !important;
}

/* Conteúdo e painéis compartilhados entre as páginas. */
.inner-block,
.main-page,
.content-main,
.content-wrapper,
.main-content {
    width: 100% !important;
    max-width: 1560px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: clamp(18px, 2.2vw, 34px) !important;
    background: transparent !important;
}

.panel,
.panel-default,
.panel-primary,
.panel-info,
.panel-success,
.panel-warning,
.well,
.widget,
.card,
.box,
.content-box,
.form-grids,
.forms-main,
.validation-system,
.inbox,
.compose,
.gallery,
.pricing-grid,
.map-1,
.charts,
.chit-chat-layer1,
.activity_box,
.work-progres,
.dashboard-panel {
    background: var(--tema-card-background, var(--app-surface)) !important;
    color: var(--app-text) !important;
    border: var(--tema-card-border-width, 1px) solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--tema-card-shadow, var(--app-shadow)) !important;
    -webkit-backdrop-filter: var(--tema-card-backdrop, none) !important;
    backdrop-filter: var(--tema-card-backdrop, none) !important;
}

.panel-heading,
.box-header,
.widget-header,
.heading,
.chit-chat-heading,
.work-progres .chit-chat-heading {
    background: transparent !important;
    color: var(--app-text) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
}

.panel-body,
.box-body,
.widget-body {
    background: transparent !important;
    color: var(--app-text) !important;
}

/* Cards financeiros: elimina definitivamente verde/laranja/azul/cinza fixos. */
.market-updates {
    align-items: stretch !important;
    margin: 0 -10px !important;
    padding: 0 !important;
}

.market-updates > [class*="col-"] {
    display: flex !important;
    margin: 0 !important;
    padding: 10px !important;
}

.market-update-block,
.market-update-block.clr-block-1,
.market-update-block.clr-block-2,
.market-update-block.clr-block-3,
.market-update-block.clr-block-4,
.market-update-block.clr-block-5 {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 156px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: var(--tema-card-padding, 22px) !important;
    overflow: hidden !important;
    background: var(--tema-card-background, var(--app-surface)) !important;
    color: var(--app-text) !important;
    border: var(--tema-card-border-width, 1px) solid color-mix(in srgb, var(--card-accent, var(--app-primary)) 24%, var(--app-border)) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--tema-card-shadow, var(--app-shadow)) !important;
}

.market-update-block::before {
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: auto !important;
    background: var(--card-accent, var(--app-primary)) !important;
    border-radius: 0 !important;
    opacity: 1 !important;
}

.market-update-block::after {
    position: absolute !important;
    top: -58px !important;
    right: -58px !important;
    width: 150px !important;
    height: 150px !important;
    background: var(--card-soft, var(--app-primary-soft)) !important;
    border-radius: 50% !important;
    content: "" !important;
    opacity: .72 !important;
    pointer-events: none !important;
}

.market-update-block:hover {
    transform: translateY(-3px) !important;
    background: var(--tema-card-background, var(--app-surface)) !important;
    box-shadow: var(--app-shadow-lg) !important;
}

.market-update-left {
    position: relative !important;
    z-index: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.market-update-left h3,
.market-update-left h4,
.market-update-left p {
    margin: 0 !important;
    color: var(--app-text) !important;
    text-shadow: none !important;
}

.market-update-left h3 {
    margin-bottom: 8px !important;
    color: var(--app-muted) !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
}

.market-update-left h4 {
    font-size: clamp(1.35rem, 2.3vw, 1.85rem) !important;
    font-weight: 850 !important;
    letter-spacing: -.035em !important;
    line-height: 1.14 !important;
}

.market-update-left h4 + h4,
.market-update-left p {
    margin-top: 8px !important;
    color: var(--app-muted) !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
}

.market-update-left br {
    display: none !important;
}

.market-update-right {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex: 0 0 58px !important;
    width: 58px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.market-update-right i,
.market-update-right i.fa,
.market-update-right i.fa.fa-dollar,
.market-update-right i.fa.fa-line-chart,
.market-update-right i.fa.fa-bar-chart-o,
.market-update-right i.fa.fa-arrow-up,
.market-update-right i.fa.fa-calendar {
    display: inline-flex !important;
    width: 56px !important;
    height: 56px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    background: var(--card-soft, var(--app-primary-soft)) !important;
    color: var(--card-accent, var(--app-primary)) !important;
    border: 1px solid color-mix(in srgb, var(--card-accent, var(--app-primary)) 20%, transparent) !important;
    border-radius: var(--app-radius-sm) !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

/* Tabelas antigas, inclusive classes do Bootstrap removido. */
.table-responsive,
.table-responsive-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    background: var(--app-surface) !important;
    box-shadow: var(--app-shadow-sm) !important;
    -webkit-overflow-scrolling: touch;
}

table,
.table,
.table-bordered,
.table-striped,
#example {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    color: var(--app-text) !important;
}

table th,
table td,
.table th,
.table td,
#example th,
#example td {
    padding: 13px 14px !important;
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
    vertical-align: middle !important;
}

table thead th,
.table thead th,
#example thead th {
    background: var(--app-surface-soft) !important;
    color: var(--app-muted) !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

table tbody tr:last-child td,
.table tbody tr:last-child td,
#example tbody tr:last-child td {
    border-bottom: 0 !important;
}

table tbody tr:hover td,
.table tbody tr:hover td,
#example tbody tr:hover td {
    background: var(--app-primary-soft) !important;
}

.cor_tr,
.cor_tr2,
.th,
.td {
    background: transparent !important;
    color: inherit !important;
}

/* Formulários de todas as páginas. */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea {
    width: 100%;
    min-height: var(--tema-control-height, 42px) !important;
    padding: 10px 12px !important;
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius-sm) !important;
    outline: 0 !important;
    box-shadow: none !important;
}

textarea {
    min-height: 112px !important;
    resize: vertical;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 4px var(--app-primary-soft) !important;
}

label,
.control-label {
    color: var(--app-text) !important;
    font-weight: 750 !important;
}

.input-group-addon,
.input-group-text {
    background: var(--app-surface-soft) !important;
    color: var(--app-muted) !important;
    border-color: var(--app-border) !important;
}

/* Botões antigos e atuais seguem o layout escolhido no administrador. */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.btn {
    min-height: var(--tema-control-height, 42px) !important;
    padding: 10px 16px !important;
    background: var(--tema-button-background, var(--app-primary)) !important;
    color: var(--tema-button-color, #fff) !important;
    border: 1px solid var(--tema-button-border, var(--app-primary)) !important;
    border-radius: var(--tema-button-radius, var(--app-radius-sm)) !important;
    box-shadow: var(--tema-button-shadow, none) !important;
    font-weight: 750 !important;
}

.btn:hover,
.btn:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:hover {
    filter: brightness(.96);
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--app-danger) !important;
    border-color: var(--app-danger) !important;
    color: #fff !important;
}

.btn-success {
    background: var(--app-success) !important;
    border-color: var(--app-success) !important;
    color: #fff !important;
}

.btn-warning {
    background: var(--app-warning) !important;
    border-color: var(--app-warning) !important;
    color: #fff !important;
}

.btn-info {
    background: var(--app-info) !important;
    border-color: var(--app-info) !important;
    color: #fff !important;
}

/* Avisos, paginação, abas e navegação interna. */
.alert {
    padding: 13px 15px !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius-sm) !important;
    box-shadow: none !important;
}

.alert-danger {
    background: var(--app-danger-soft) !important;
    border-color: color-mix(in srgb, var(--app-danger) 24%, var(--app-border)) !important;
    color: var(--app-danger) !important;
}

.alert-success {
    background: var(--app-success-soft) !important;
    border-color: color-mix(in srgb, var(--app-success) 24%, var(--app-border)) !important;
    color: var(--app-success) !important;
}

.alert-warning {
    background: var(--app-warning-soft) !important;
    border-color: color-mix(in srgb, var(--app-warning) 24%, var(--app-border)) !important;
    color: var(--app-warning) !important;
}

.alert-info {
    background: var(--app-info-soft) !important;
    border-color: color-mix(in srgb, var(--app-info) 24%, var(--app-border)) !important;
    color: var(--app-info) !important;
}

.nav-tabs,
.nav-pills,
.pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    list-style: none !important;
    border: 0 !important;
}

.nav-tabs > li > a,
.nav-pills > li > a,
.pagination > li > a,
.pagination > li > span {
    display: inline-flex !important;
    min-height: 38px !important;
    align-items: center !important;
    padding: 8px 12px !important;
    background: var(--app-surface) !important;
    color: var(--app-muted) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius-sm) !important;
}

.nav-tabs > li.active > a,
.nav-pills > li.active > a,
.pagination > .active > a,
.pagination > .active > span {
    background: var(--app-primary) !important;
    color: #fff !important;
    border-color: var(--app-primary) !important;
}

/* Rodapé. */
.copyrights,
.footer,
footer {
    margin: 20px 0 0 !important;
    padding: 20px clamp(18px, 2vw, 30px) !important;
    background: transparent !important;
    color: var(--app-muted) !important;
    border-top: 1px solid var(--app-border) !important;
    text-align: center !important;
}

/* Responsividade global. */
@media (max-width: 1199px) {
    :root {
        --app-sidebar-width: 224px;
    }

    .cabecalho-plataforma {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 991px) {
    .left-content,
    .page-container.sidebar-collapsed .left-content {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .sidebar-menu,
    .page-container.sidebar-collapsed .sidebar-menu {
        width: min(82vw, 286px) !important;
    }

    .sidebar-menu {
        transform: translateX(0) !important;
    }

    .page-container.sidebar-collapsed .sidebar-menu {
        transform: translateX(-105%) !important;
    }

    .page-container.sidebar-collapsed #menu li a span,
    .page-container.sidebar-collapsed #menu li a .menu-text,
    .page-container.sidebar-collapsed #menu li a > strong {
        position: static !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    .page-container.sidebar-collapsed #menu li a {
        justify-content: flex-start !important;
        padding: 11px 13px !important;
    }

    .sidebar-icon {
        position: fixed !important;
        z-index: 1220 !important;
        top: 12px !important;
        left: 12px !important;
        margin: 0 !important;
    }

    .header-main,
    .cabecalho-plataforma {
        padding-left: 70px !important;
    }

    .market-updates > .col-md-3,
    .market-updates > .col-lg-3,
    .market-updates > .col-md-4,
    .market-updates > .col-lg-4 {
        width: 50% !important;
    }
}

@media (max-width: 767px) {
    .inner-block,
    .main-page,
    .content-main,
    .content-wrapper,
    .main-content {
        padding: 15px !important;
    }

    .header-main,
    .cabecalho-plataforma {
        padding: 14px 14px 14px 66px !important;
    }

    .cabecalho-plataforma .header-left,
    .cabecalho-plataforma .header-center,
    .header-main .header-left,
    .header-main .header-right {
        width: 100% !important;
    }

    .market-updates > [class*="col-"] {
        width: 100% !important;
    }

    .market-update-block {
        min-height: 138px !important;
    }

    table,
    .table,
    #example {
        min-width: 640px !important;
    }

    .activation-table {
        min-width: 560px !important;
    }

    .panel,
    .well,
    .widget,
    .card,
    .box,
    .content-box,
    .form-grids,
    .forms-main,
    .work-progres,
    .dashboard-panel {
        border-radius: var(--app-radius-sm) !important;
    }
}

@media (max-width: 479px) {
    .market-update-block {
        padding: 17px !important;
    }

    .market-update-right {
        flex-basis: 50px !important;
        width: 50px !important;
    }

    .market-update-right i,
    .market-update-right i.fa {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.14rem !important;
    }
}

/* Controle móvel criado por app.js fora do menu, para continuar acessível. */
.app-mobile-menu-button,
.app-sidebar-backdrop {
    display: none;
}

@media (max-width: 991px) {
    body.app-sidebar-open {
        overflow: hidden !important;
    }

    .app-mobile-menu-button {
        position: fixed !important;
        z-index: 1320 !important;
        top: 12px !important;
        left: 12px !important;
        display: inline-flex !important;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background: var(--tema-button-background, var(--app-primary)) !important;
        color: var(--tema-button-color, #fff) !important;
        border: 1px solid var(--tema-button-border, var(--app-primary)) !important;
        border-radius: var(--tema-button-radius, var(--app-radius-sm)) !important;
        box-shadow: 0 12px 28px rgba(8, 17, 33, .22) !important;
        font-size: 1.2rem !important;
        line-height: 1 !important;
    }

    .app-sidebar-backdrop {
        position: fixed !important;
        z-index: 1080 !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        background: rgba(6, 11, 22, .56) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 180ms ease, visibility 180ms ease !important;
    }

    body.app-sidebar-open .app-sidebar-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .sidebar-menu .sidebar-icon {
        position: static !important;
        display: none !important;
    }
}

/* =====================================================================
   CABEÇALHO RESPONSIVO V2
   Estrutura sem tabelas e sem Bootstrap. Esta seção fica por último para
   substituir qualquer regra antiga de header-left/header-center.
   ===================================================================== */

.app-topbar {
    position: relative;
    z-index: 920;
    display: grid !important;
    grid-template-columns: minmax(150px, 190px) minmax(300px, 1fr) minmax(410px, auto) !important;
    gap: 18px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 106px;
    margin: 0 !important;
    padding: 18px clamp(20px, 2.4vw, 34px) !important;
    background: var(--app-header-bg, var(--app-surface)) !important;
    color: var(--app-text) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 30px rgba(15, 28, 55, .055) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
}

.app-topbar *,
.app-topbar *::before,
.app-topbar *::after {
    box-sizing: border-box;
}

.app-topbar__brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
}

.app-topbar__logo {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-start;
}

.app-topbar__logo img {
    display: block;
    width: auto;
    max-width: 158px;
    max-height: 60px;
    object-fit: contain;
}

.app-topbar__logo-text {
    color: var(--app-text);
    font-size: 1.2rem;
    font-weight: 850;
    letter-spacing: -.02em;
}

.app-topbar__message {
    position: relative;
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    background: var(--app-surface-soft) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius-sm) !important;
    box-shadow: none !important;
    font-size: 17px;
}

.app-topbar__message:hover,
.app-topbar__message:focus {
    background: var(--app-primary-soft) !important;
    color: var(--app-primary) !important;
    border-color: color-mix(in srgb, var(--app-primary) 30%, var(--app-border)) !important;
}

.app-topbar__notification {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    background: var(--app-danger);
    color: #fff;
    border: 2px solid var(--app-surface);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
}

.app-topbar__referral {
    min-width: 0;
    padding: 12px 13px 13px;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

.app-topbar__referral-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.app-topbar__referral-title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-topbar__referral-title i {
    color: var(--app-primary);
}

.app-topbar__referral-heading > a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    color: var(--app-primary);
    font-size: .75rem;
    font-weight: 800;
    white-space: nowrap;
}

.app-topbar__copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.app-topbar__copy-row input {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius-sm) !important;
    box-shadow: none !important;
    font-size: .84rem !important;
    text-overflow: ellipsis;
}

.app-topbar__copy-row input:focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 4px var(--app-primary-soft) !important;
    outline: none !important;
}

.app-topbar__copy-button {
    display: inline-flex !important;
    min-width: 102px;
    min-height: 42px !important;
    height: 42px !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 !important;
    padding: 9px 14px !important;
    background: var(--tema-button-background, var(--app-primary)) !important;
    color: var(--tema-button-color, #fff) !important;
    border: 1px solid var(--tema-button-border, var(--app-primary)) !important;
    border-radius: var(--tema-button-radius, var(--app-radius-sm)) !important;
    box-shadow: var(--tema-button-shadow, none) !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

.app-topbar__account {
    display: grid;
    min-width: 0;
    gap: 10px;
}

.app-topbar__status-list {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.app-status-chip {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--app-surface-soft);
    color: var(--app-muted);
    border: 1px solid var(--app-border);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.app-status-chip.is-active {
    background: var(--app-success-soft);
    color: var(--app-success);
    border-color: color-mix(in srgb, var(--app-success) 24%, var(--app-border));
}

.app-status-chip.is-inactive {
    background: var(--app-danger-soft);
    color: var(--app-danger);
    border-color: color-mix(in srgb, var(--app-danger) 24%, var(--app-border));
}

.app-status-chip.is-package {
    max-width: 190px;
    overflow: hidden;
    background: var(--app-warning-soft);
    color: var(--app-warning);
    border-color: color-mix(in srgb, var(--app-warning) 24%, var(--app-border));
    text-overflow: ellipsis;
}

.app-topbar__user-area {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.app-topbar__metrics {
    display: flex;
    min-width: 0;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
}

.app-metric {
    display: flex;
    min-width: 104px;
    min-height: 48px;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--app-surface-soft);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
}

.app-metric > i {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    border-radius: 8px;
    font-size: 13px;
}

.app-metric > img {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: contain;
}

.app-metric > span {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}

.app-metric small {
    color: var(--app-muted);
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.app-metric strong {
    max-width: 122px;
    overflow: hidden;
    color: var(--app-text);
    font-size: .81rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-metric--rank {
    min-width: 130px;
}

.app-metric--points {
    min-width: 96px;
}

.app-user-menu,
.app-user-menu ul {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    list-style: none !important;
}

.app-user-menu {
    position: relative;
    flex: 0 1 210px;
    min-width: 170px;
}

.app-user-menu__toggle {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 9px;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 5px 10px 5px 6px !important;
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow-sm) !important;
    text-align: left !important;
}

.app-user-menu__toggle:hover,
.app-user-menu__toggle:focus {
    background: var(--app-surface-soft) !important;
    color: var(--app-text) !important;
    border-color: color-mix(in srgb, var(--app-primary) 28%, var(--app-border)) !important;
    box-shadow: var(--app-shadow-sm) !important;
}

.app-user-menu__photo {
    display: block;
    width: 42px;
    height: 42px;
}

.app-user-menu__photo img {
    display: block;
    width: 42px !important;
    height: 42px !important;
    object-fit: cover;
    border: 2px solid var(--app-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--app-border);
}

.app-user-menu__identity {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}

.app-user-menu__identity small {
    color: var(--app-muted);
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.app-user-menu__identity strong {
    overflow: hidden;
    color: var(--app-text);
    font-size: .84rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-user-menu__arrow {
    color: var(--app-primary);
    transition: transform var(--app-transition);
}

.profile_details_drop.is-open .app-user-menu__arrow {
    transform: rotate(180deg);
}

.app-user-menu__dropdown {
    position: absolute !important;
    z-index: 1100 !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    display: none;
    width: 100%;
    min-width: 170px !important;
    padding: 7px !important;
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius-sm) !important;
    box-shadow: var(--app-shadow) !important;
}

.profile_details_drop.is-open > .app-user-menu__dropdown {
    display: block !important;
}

.app-user-menu__dropdown a {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    color: var(--app-text);
    border-radius: calc(var(--app-radius-sm) - 3px);
    font-size: .84rem;
    font-weight: 800;
}

.app-user-menu__dropdown a:hover,
.app-user-menu__dropdown a:focus {
    background: var(--app-danger-soft);
    color: var(--app-danger);
}

/* Remove o espaço artificial que existia entre o topo e o conteúdo. */
.app-topbar + .inner-block,
.mother-grid-inner > .inner-block {
    padding-top: clamp(18px, 2vw, 28px) !important;
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .app-topbar__message:hover,
    .app-user-menu__toggle:hover,
    .app-status-chip,
    .app-status-chip.is-active,
    .app-status-chip.is-inactive,
    .app-status-chip.is-package {
        border-color: var(--app-border) !important;
    }
}

@media (max-width: 1279px) {
    .app-topbar {
        grid-template-columns: minmax(150px, 185px) minmax(300px, 1fr) !important;
    }

    .app-topbar__account {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .app-topbar__status-list {
        justify-content: flex-start;
    }
}

@media (max-width: 991px) {
    .app-topbar {
        grid-template-columns: minmax(130px, 170px) minmax(0, 1fr) !important;
        padding: 15px 16px 15px 70px !important;
    }

    .app-topbar__brand {
        grid-column: 1;
    }

    .app-topbar__referral {
        grid-column: 2;
    }

    .app-topbar__account {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .app-topbar {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        min-height: 0;
        padding: 14px 13px 14px 66px !important;
    }

    .app-topbar__brand,
    .app-topbar__referral,
    .app-topbar__account {
        grid-column: 1 !important;
    }

    .app-topbar__brand {
        justify-content: space-between;
    }

    .app-topbar__logo img {
        max-width: 150px;
        max-height: 52px;
    }

    .app-topbar__account {
        grid-template-columns: 1fr;
    }

    .app-topbar__status-list {
        justify-content: flex-start;
    }

    .app-topbar__user-area {
        align-items: stretch;
        flex-direction: column;
    }

    .app-topbar__metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .app-metric,
    .app-metric--rank,
    .app-metric--points {
        width: 100%;
        min-width: 0;
    }

    .app-user-menu {
        width: 100%;
        max-width: none;
        flex-basis: auto;
    }
}

@media (max-width: 520px) {
    .app-topbar__copy-row {
        grid-template-columns: 1fr;
    }

    .app-topbar__copy-button {
        width: 100%;
    }

    .app-topbar__referral-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .app-topbar__status-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-status-chip {
        width: 100%;
        min-width: 0;
    }

    .app-status-chip.is-package {
        grid-column: 1 / -1;
        max-width: none;
    }

    .app-topbar__metrics {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   CABEÇALHO E MENU MÓVEL V3
   Ajuste final para telas pequenas. Mantém as variáveis dos 50 temas.
   ===================================================================== */

/* Conta compacta: pontos dentro do próprio cartão do usuário. */
.app-rank-summary {
    display: inline-flex;
    min-width: 132px;
    min-height: 50px;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    background: var(--app-surface-soft);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
}

.app-rank-summary > i,
.app-rank-summary > img {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    border-radius: 9px;
}

.app-rank-summary > span,
.app-user-menu__points {
    display: grid;
    min-width: 0;
    line-height: 1.1;
}

.app-rank-summary small,
.app-user-menu__points small {
    color: var(--app-muted);
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.app-rank-summary strong {
    max-width: 112px;
    overflow: hidden;
    color: var(--app-text);
    font-size: .79rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-user-menu__toggle {
    grid-template-columns: 42px minmax(0, 1fr) auto auto !important;
}

.app-user-menu__points {
    min-width: 54px;
    padding-left: 10px;
    border-left: 1px solid var(--app-border);
    text-align: right;
}

.app-user-menu__points strong {
    color: var(--app-text);
    font-size: .84rem;
    font-weight: 900;
}

/* Cabeçalho mais coeso no computador. */
@media (min-width: 992px) {
    .app-topbar {
        grid-template-columns: minmax(150px, 190px) minmax(330px, 1fr) minmax(430px, auto) !important;
        min-height: 94px;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        background:
            linear-gradient(90deg, var(--app-surface) 0%, var(--app-surface) 60%, var(--app-surface-soft) 100%) !important;
    }

    .app-topbar__account {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    .app-topbar__status-list {
        flex: 0 1 auto;
    }

    .app-topbar__user-area {
        flex: 0 1 auto;
    }
}

/* Cabeçalho realmente compacto e elegante no celular. */
@media (max-width: 767px) {
    .app-topbar {
        display: block !important;
        min-height: 0 !important;
        padding: 12px 12px 13px 62px !important;
        background:
            radial-gradient(circle at 20% 0%, var(--app-primary-soft) 0, transparent 42%),
            linear-gradient(180deg, var(--app-surface) 0%, var(--app-surface-soft) 100%) !important;
        border-bottom: 1px solid var(--app-border) !important;
        box-shadow: 0 12px 32px rgba(15, 28, 55, .09) !important;
    }

    .app-topbar__brand {
        min-height: 42px;
        margin: 0 0 9px;
        gap: 10px;
    }

    .app-topbar__logo {
        justify-content: flex-start;
    }

    .app-topbar__logo img {
        max-width: 128px;
        max-height: 42px;
    }

    .app-topbar__message {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px !important;
        background: var(--app-surface) !important;
        box-shadow: 0 8px 20px rgba(15, 28, 55, .08) !important;
    }

    .app-topbar__referral {
        margin: 0 0 8px;
        padding: 9px;
        background: var(--app-surface) !important;
        border-color: var(--app-border) !important;
        border-radius: 14px;
        box-shadow: 0 8px 22px rgba(15, 28, 55, .055);
    }

    .app-topbar__referral-heading {
        margin-bottom: 6px;
    }

    .app-topbar__referral-title,
    .app-topbar__referral-heading > a {
        font-size: .69rem;
    }

    .app-topbar__copy-row {
        grid-template-columns: minmax(0, 1fr) 42px;
        gap: 6px;
    }

    .app-topbar__copy-row input {
        height: 39px !important;
        padding: 8px 10px !important;
        font-size: .72rem !important;
        border-radius: 10px !important;
    }

    .app-topbar__copy-button {
        width: 42px !important;
        min-width: 42px !important;
        height: 39px !important;
        min-height: 39px !important;
        padding: 0 !important;
        border-radius: 10px !important;
    }

    .app-topbar__copy-button span {
        position: absolute !important;
        left: -9999px !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
    }

    .app-topbar__account {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .app-topbar__status-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    .app-status-chip {
        width: 100%;
        min-width: 0;
        min-height: 29px;
        padding: 5px 8px;
        font-size: .65rem;
    }

    .app-status-chip.is-package {
        grid-column: 1 / -1;
        max-width: none;
    }

    .app-topbar__user-area {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        width: 100%;
    }

    .app-rank-summary {
        width: 100%;
        min-width: 0;
        min-height: 43px;
        padding: 6px 9px;
        border-radius: 12px;
    }

    .app-rank-summary > i,
    .app-rank-summary > img {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }

    .app-user-menu {
        width: 100%;
        min-width: 0;
    }

    .app-user-menu__toggle {
        grid-template-columns: 38px minmax(0, 1fr) auto auto !important;
        min-height: 48px !important;
        padding: 4px 9px 4px 5px !important;
        border-radius: 13px !important;
        box-shadow: 0 8px 22px rgba(15, 28, 55, .065) !important;
    }

    .app-user-menu__photo,
    .app-user-menu__photo img {
        width: 38px !important;
        height: 38px !important;
    }

    .app-user-menu__identity small,
    .app-user-menu__points small {
        font-size: .55rem;
    }

    .app-user-menu__identity strong {
        font-size: .76rem;
    }

    .app-user-menu__points {
        min-width: 48px;
        padding-left: 8px;
    }

    .app-user-menu__points strong {
        font-size: .78rem;
    }

    .app-user-menu__dropdown {
        top: calc(100% + 5px) !important;
    }

    .app-topbar + .inner-block,
    .mother-grid-inner > .inner-block {
        padding-top: 12px !important;
    }
}

@media (max-width: 380px) {
    .app-topbar {
        padding-right: 9px !important;
        padding-left: 58px !important;
    }

    .app-topbar__referral-heading > a span,
    .app-rank-summary small {
        display: none;
    }

    .app-user-menu__points {
        min-width: 44px;
    }
}

/* Menu lateral móvel com rótulos sempre visíveis. */
.app-sidebar-mobile-head {
    display: none;
}

@media (max-width: 991px) {
    .sidebar-menu,
    .page-container.sidebar-collapsed .sidebar-menu {
        width: min(88vw, 320px) !important;
        padding: 0 12px 22px !important;
    }

    .app-sidebar-mobile-head {
        position: sticky;
        z-index: 2;
        top: 0;
        display: flex;
        min-height: 72px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 -12px 10px;
        padding: 13px 14px;
        background: linear-gradient(180deg, var(--app-sidebar-bg) 75%, transparent 100%);
        border-bottom: 1px solid rgba(255,255,255,.09);
    }

    .app-sidebar-mobile-head__title {
        display: grid;
        line-height: 1.12;
    }

    .app-sidebar-mobile-head__title small {
        color: var(--app-sidebar-muted);
        font-size: .63rem;
        font-weight: 750;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .app-sidebar-mobile-head__title strong {
        color: var(--app-sidebar-text);
        font-size: 1rem;
        font-weight: 850;
    }

    .app-sidebar-mobile-close {
        display: inline-flex;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: rgba(255,255,255,.09) !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.13) !important;
        border-radius: 11px !important;
        box-shadow: none !important;
        font-size: 1.2rem;
        line-height: 1;
    }

    body.app-sidebar-open .sidebar-menu #menu li a,
    body.app-sidebar-open #menu li a {
        justify-content: flex-start !important;
        min-height: 48px !important;
        padding: 11px 12px !important;
        font-size: .9rem !important;
        text-indent: 0 !important;
        white-space: normal !important;
    }

    body.app-sidebar-open #menu li a span,
    body.app-sidebar-open #menu li a .menu-text,
    body.app-sidebar-open #menu li a .app-menu-label,
    body.app-sidebar-open #menu li a > strong {
        position: static !important;
        left: auto !important;
        display: inline !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        color: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
        text-indent: 0 !important;
    }

    body.app-sidebar-open #menu li a .fa,
    body.app-sidebar-open #menu li a .glyphicon,
    body.app-sidebar-open #menu li a i {
        display: inline-flex !important;
        flex: 0 0 25px !important;
        width: 25px !important;
        min-width: 25px !important;
        font-size: 1.02rem !important;
    }

    body.app-sidebar-open #menu li a .app-menu-label,
    body.app-sidebar-open #menu li a .menu-text {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    body.app-sidebar-open #menu > li {
        margin: 3px 0 !important;
    }

    body.app-sidebar-open #menu > li > a {
        border-color: rgba(255,255,255,.035) !important;
    }

    body.app-sidebar-open #menu > li > a:hover,
    body.app-sidebar-open #menu > li.active > a,
    body.app-sidebar-open #menu > li.menu-open > a {
        background: rgba(255,255,255,.09) !important;
        border-color: rgba(255,255,255,.12) !important;
    }

    .app-mobile-menu-button {
        top: 11px !important;
        left: 10px !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
    }

    .app-mobile-menu-button__icon {
        display: grid;
        gap: 4px;
        width: 18px;
    }

    .app-mobile-menu-button__icon span {
        display: block;
        width: 100%;
        height: 2px;
        background: currentColor;
        border-radius: 999px;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    body.app-sidebar-open .app-mobile-menu-button__icon span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    body.app-sidebar-open .app-mobile-menu-button__icon span:nth-child(2) {
        opacity: 0;
    }

    body.app-sidebar-open .app-mobile-menu-button__icon span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
}

/* ========================================================================== 
   IDENTIDADE VISUAL VIVA — DASHBOARD V4
   Mantém os 50 temas, mas transforma as grades e painéis em elementos
   coloridos, modernos e com contraste forte.
   ========================================================================== */

:root {
    --tema-card-1-bg: linear-gradient(135deg, #0057ff 0%, #0039b8 100%);
    --tema-card-2-bg: linear-gradient(135deg, #7a2cff 0%, #5111c7 100%);
    --tema-card-3-bg: linear-gradient(135deg, #00a9e8 0%, #0067c9 100%);
    --tema-card-4-bg: linear-gradient(135deg, #00a86b 0%, #007549 100%);
    --tema-card-5-bg: linear-gradient(135deg, #00a7c4 0%, #006e87 100%);
    --tema-card-1-text: #ffffff;
    --tema-card-2-text: #ffffff;
    --tema-card-3-text: #ffffff;
    --tema-card-4-text: #ffffff;
    --tema-card-5-text: #ffffff;
}

body,
body.dashboard-page {
    background: var(--tema-page-background, var(--app-bg)) !important;
}

/* Faixa superior com mais identidade sem prejudicar a leitura. */
.app-topbar {
    isolation: isolate;
    background:
        linear-gradient(110deg, color-mix(in srgb, var(--app-primary) 7%, transparent), transparent 40%),
        linear-gradient(290deg, color-mix(in srgb, var(--app-secondary) 7%, transparent), transparent 38%),
        var(--app-header-bg, var(--app-surface)) !important;
    border-bottom-color: color-mix(in srgb, var(--app-primary) 24%, var(--app-border)) !important;
    box-shadow: 0 10px 34px color-mix(in srgb, var(--app-primary) 10%, transparent) !important;
}

.app-topbar::after {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--app-primary), var(--app-secondary), var(--app-accent));
    content: "";
    opacity: .95;
}

.app-referral-card,
.app-topbar__referral-card {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--app-primary) 10%, var(--app-surface)) 0%, var(--app-surface) 52%, color-mix(in srgb, var(--app-secondary) 8%, var(--app-surface)) 100%) !important;
    border-color: color-mix(in srgb, var(--app-primary) 25%, var(--app-border)) !important;
}

.app-status-chip {
    background: color-mix(in srgb, var(--app-success) 14%, var(--app-surface)) !important;
    color: color-mix(in srgb, var(--app-success) 82%, #071b15) !important;
    border-color: color-mix(in srgb, var(--app-success) 38%, var(--app-border)) !important;
}

.app-rank-summary,
.app-user-menu__toggle {
    border-color: color-mix(in srgb, var(--app-primary) 22%, var(--app-border)) !important;
}

/* Organização geral da área de resumo. */
.dashboard-overview {
    display: grid;
    gap: 20px;
    width: 100%;
}

.dashboard-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--app-primary);
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.dashboard-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: 2px;
}

.dashboard-section-heading--spaced {
    margin-top: 8px;
}

.dashboard-section-heading h2 {
    margin: 0;
    color: var(--app-text);
    font-size: clamp(1.22rem, 2vw, 1.7rem);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.12;
}

.dashboard-section-heading__badge,
.dashboard-section-heading__link {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
    color: #fff !important;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--app-primary) 22%, transparent);
    font-size: .75rem;
    font-weight: 850;
    line-height: 1;
}

/* Progresso com faixa colorida. */
.sharing-progress-card {
    padding: 18px 20px;
    background:
        linear-gradient(125deg, color-mix(in srgb, var(--app-primary) 14%, var(--app-surface)), var(--app-surface) 55%, color-mix(in srgb, var(--app-accent) 12%, var(--app-surface)));
    border: 1px solid color-mix(in srgb, var(--app-primary) 26%, var(--app-border));
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
}

.sharing-progress-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}

.sharing-progress-card__head strong {
    display: block;
    color: var(--app-text);
    font-size: .98rem;
    font-weight: 850;
}

.sharing-progress-card__value {
    color: var(--app-primary);
    font-size: 1.3rem;
    font-weight: 950;
}

.sharing-progress-card .progress,
.progress {
    height: 12px !important;
    overflow: hidden;
    background: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface-soft)) !important;
    border: 1px solid color-mix(in srgb, var(--app-primary) 15%, var(--app-border));
    border-radius: 999px !important;
    box-shadow: inset 0 2px 5px rgba(15, 23, 42, .08);
}

.sharing-progress-card .progress-bar,
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--app-primary), var(--app-secondary), var(--app-accent)) !important;
    border-radius: inherit;
    box-shadow: 0 0 14px color-mix(in srgb, var(--app-accent) 45%, transparent);
}

/* Alertas mais bonitos e legíveis. */
.dashboard-alerts {
    display: grid;
    gap: 10px;
}

.app-dashboard-alert {
    display: flex !important;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 !important;
    padding: 13px 16px !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-danger) 13%, var(--app-surface)), var(--app-surface)) !important;
    color: var(--app-text) !important;
    border: 1px solid color-mix(in srgb, var(--app-danger) 35%, var(--app-border)) !important;
    border-left: 5px solid var(--app-danger) !important;
    border-radius: var(--app-radius-sm) !important;
    box-shadow: var(--app-shadow-sm);
    text-align: center;
}

.app-dashboard-alert i {
    color: var(--app-danger);
    font-size: 1.08rem;
}

.app-dashboard-alert a {
    color: color-mix(in srgb, var(--app-danger) 80%, var(--app-text)) !important;
    font-weight: 850;
}

/* Datas de ativação com cabeçalho vivo. */
.activation-summary-card {
    overflow: hidden;
    background: var(--app-surface);
    border: 1px solid color-mix(in srgb, var(--app-primary) 26%, var(--app-border));
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow);
}

.activation-summary-card__title {
    padding: 17px 20px 15px;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--app-primary) 13%, var(--app-surface)), var(--app-surface) 55%, color-mix(in srgb, var(--app-secondary) 10%, var(--app-surface)));
    border-bottom: 1px solid var(--app-border);
}

.activation-summary-card__title strong {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 900;
}

.activation-summary-card .activation-table,
.activation-table {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse !important;
    background: var(--app-surface) !important;
    box-shadow: none !important;
}

.activation-table thead {
    background: linear-gradient(100deg, var(--app-primary), var(--app-secondary), var(--app-accent)) !important;
}

.activation-table thead th {
    padding: 14px 16px !important;
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
    font-size: .73rem !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.activation-table tbody td {
    padding: 17px 16px !important;
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 0 !important;
    border-right: 1px solid var(--app-border) !important;
    font-size: .94rem !important;
    font-weight: 750 !important;
    text-align: center !important;
}

.activation-table tbody td:last-child {
    background: color-mix(in srgb, var(--app-success) 11%, var(--app-surface)) !important;
    color: color-mix(in srgb, var(--app-success) 85%, #081d16) !important;
    border-right: 0 !important;
}

/* Grade financeira colorida e responsiva. */
.app-metrics-grid,
.market-updates.app-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tema-gap, 18px) !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
}

.app-metrics-grid--three,
.market-updates.app-metrics-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.market-update-block,
.market-update-block.clr-block-1,
.market-update-block.clr-block-2,
.market-update-block.clr-block-3,
.market-update-block.clr-block-4,
.market-update-block.clr-block-5 {
    position: relative !important;
    isolation: isolate;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 184px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: clamp(20px, 2vw, 27px) !important;
    overflow: hidden !important;
    background: var(--metric-bg, var(--tema-card-1-bg)) !important;
    color: var(--metric-text, #fff) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: var(--app-radius-lg) !important;
    box-shadow:
        0 18px 38px var(--metric-shadow, color-mix(in srgb, var(--app-primary) 25%, transparent)),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
    transform: translateZ(0);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

.market-update-block.clr-block-1 {
    --metric-bg: var(--tema-card-1-bg, linear-gradient(135deg, var(--app-primary), var(--app-primary-dark)));
    --metric-text: var(--tema-card-1-text, #fff);
    --metric-shadow: color-mix(in srgb, var(--tema-card-1, var(--app-primary)) 32%, transparent);
}

.market-update-block.clr-block-2 {
    --metric-bg: var(--tema-card-2-bg, linear-gradient(135deg, var(--app-secondary), var(--app-primary)));
    --metric-text: var(--tema-card-2-text, #fff);
    --metric-shadow: color-mix(in srgb, var(--tema-card-2, var(--app-secondary)) 30%, transparent);
}

.market-update-block.clr-block-3 {
    --metric-bg: var(--tema-card-3-bg, linear-gradient(135deg, var(--app-accent), var(--app-primary)));
    --metric-text: var(--tema-card-3-text, #fff);
    --metric-shadow: color-mix(in srgb, var(--tema-card-3, var(--app-accent)) 30%, transparent);
}

.market-update-block.clr-block-4 {
    --metric-bg: var(--tema-card-4-bg, linear-gradient(135deg, var(--app-success), var(--app-info)));
    --metric-text: var(--tema-card-4-text, #fff);
    --metric-shadow: color-mix(in srgb, var(--tema-card-4, var(--app-success)) 30%, transparent);
}

.market-update-block.clr-block-5 {
    --metric-bg: var(--tema-card-5-bg, linear-gradient(135deg, var(--app-info), var(--app-secondary)));
    --metric-text: var(--tema-card-5-text, #fff);
    --metric-shadow: color-mix(in srgb, var(--tema-card-5, var(--app-info)) 30%, transparent);
}

.market-update-block::before {
    position: absolute !important;
    z-index: -1;
    top: -76px !important;
    right: -58px !important;
    bottom: auto !important;
    left: auto !important;
    width: 190px !important;
    height: 190px !important;
    background: rgba(255,255,255,.13) !important;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50% !important;
    content: "" !important;
    opacity: 1 !important;
}

.market-update-block::after {
    position: absolute !important;
    z-index: -1;
    top: auto !important;
    right: auto !important;
    bottom: -78px !important;
    left: -55px !important;
    width: 155px !important;
    height: 155px !important;
    background: rgba(255,255,255,.08) !important;
    border-radius: 46% !important;
    content: "" !important;
    opacity: 1 !important;
    transform: rotate(24deg);
}

.market-update-block:hover {
    background: var(--metric-bg, var(--tema-card-1-bg)) !important;
    box-shadow:
        0 25px 48px var(--metric-shadow, rgba(15,23,42,.24)),
        inset 0 1px 0 rgba(255,255,255,.28) !important;
    filter: saturate(1.09) brightness(1.035);
    transform: translateY(-5px) scale(1.008) !important;
}

.market-update-left {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 !important;
    text-align: left !important;
}

.metric-card__label {
    display: block;
    margin-bottom: 9px;
    color: var(--metric-text, #fff) !important;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 1.25;
    opacity: .84;
    text-transform: uppercase;
}

.metric-card__value {
    display: block;
    max-width: 100%;
    color: var(--metric-text, #fff) !important;
    font-size: clamp(1.48rem, 2.25vw, 2.05rem);
    font-weight: 950;
    letter-spacing: -.045em;
    line-height: 1.08;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 12px rgba(0,0,0,.14);
}

.metric-card__meta,
.metric-card__link {
    display: inline-flex;
    margin-top: 12px;
    color: var(--metric-text, #fff) !important;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.35;
    opacity: .86;
}

.metric-card__link {
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
    opacity: .92;
}

.metric-card__link:hover {
    color: var(--metric-text, #fff) !important;
    opacity: 1;
}

.market-update-right {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex: 0 0 64px !important;
    width: 64px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.market-update-right i,
.market-update-right i.fa,
.market-update-right i.fa.fa-dollar,
.market-update-right i.fa.fa-line-chart,
.market-update-right i.fa.fa-bar-chart-o,
.market-update-right i.fa.fa-arrow-up,
.market-update-right i.fa.fa-calendar {
    display: inline-flex !important;
    width: 62px !important;
    height: 62px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    background: rgba(255,255,255,.17) !important;
    color: var(--metric-text, #fff) !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    border-radius: calc(var(--app-radius) + 2px) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 25px rgba(0,0,0,.09) !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
    backdrop-filter: blur(7px);
}

/* Painéis e tabelas secundárias recebem detalhes do tema. */
.work-progres,
.dashboard-panel,
.panel,
.box,
.widget,
.card {
    border-color: color-mix(in srgb, var(--app-primary) 18%, var(--app-border)) !important;
    box-shadow: var(--app-shadow) !important;
}

.work-progres::before,
.dashboard-panel::before,
.panel::before,
.box::before,
.widget::before,
.card::before {
    height: 4px !important;
    background: linear-gradient(90deg, var(--app-primary), var(--app-secondary), var(--app-accent)) !important;
}

.chit-chat-heading,
.panel-heading,
.box-header,
.widget-header {
    color: var(--app-primary-dark) !important;
}

/* Compatibilidade com navegadores sem color-mix. */
@supports not (color: color-mix(in srgb, red, blue)) {
    .app-topbar {
        background: var(--app-header-bg, var(--app-surface)) !important;
        border-bottom-color: var(--app-border) !important;
    }

    .market-update-block {
        box-shadow: 0 18px 38px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.22) !important;
    }

    .dashboard-section-heading__badge,
    .dashboard-section-heading__link {
        box-shadow: 0 8px 20px rgba(15,23,42,.16);
    }
}

@media (max-width: 1180px) {
    .app-metrics-grid,
    .market-updates.app-metrics-grid,
    .app-metrics-grid--three,
    .market-updates.app-metrics-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-overview {
        gap: 14px;
    }

    .dashboard-section-heading {
        align-items: center;
    }

    .dashboard-section-heading__badge {
        display: none;
    }

    .dashboard-section-heading__link {
        min-height: 32px;
        padding: 7px 10px;
        font-size: .68rem;
    }

    .sharing-progress-card {
        padding: 15px;
        border-radius: 15px;
    }

    .activation-summary-card {
        border-radius: 16px;
    }

    .activation-summary-card__title {
        padding: 14px 15px;
    }

    .activation-table thead {
        display: none !important;
    }

    .activation-table,
    .activation-table tbody,
    .activation-table tr {
        display: block !important;
        width: 100% !important;
    }

    .activation-table tbody tr {
        display: grid !important;
        gap: 0;
    }

    .activation-table tbody td {
        display: flex !important;
        min-height: 54px;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 13px 15px !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--app-border) !important;
        text-align: right !important;
    }

    .activation-table tbody td::before {
        flex: 1 1 auto;
        color: var(--app-muted);
        content: attr(data-label);
        font-size: .68rem;
        font-weight: 900;
        letter-spacing: .06em;
        text-align: left;
        text-transform: uppercase;
    }

    .activation-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .app-metrics-grid,
    .market-updates.app-metrics-grid,
    .app-metrics-grid--three,
    .market-updates.app-metrics-grid--three {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px !important;
    }

    .market-update-block,
    .market-update-block.clr-block-1,
    .market-update-block.clr-block-2,
    .market-update-block.clr-block-3,
    .market-update-block.clr-block-4,
    .market-update-block.clr-block-5 {
        min-height: 142px !important;
        padding: 19px !important;
        border-radius: 18px !important;
    }

    .metric-card__value {
        font-size: clamp(1.48rem, 8vw, 1.9rem);
    }

    .market-update-right {
        flex-basis: 55px !important;
        width: 55px !important;
    }

    .market-update-right i,
    .market-update-right i.fa,
    .market-update-right i.fa.fa-dollar,
    .market-update-right i.fa.fa-line-chart,
    .market-update-right i.fa.fa-bar-chart-o,
    .market-update-right i.fa.fa-arrow-up,
    .market-update-right i.fa.fa-calendar {
        width: 54px !important;
        height: 54px !important;
        font-size: 1.25rem !important;
    }
}

/* ========================================================================== 
   GRÁFICO DE GANHOS — ÚLTIMOS CINCO MESES
   Componente local, responsivo e integrado às variáveis dos 50 temas.
   ========================================================================== */

.earnings-chart-card {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    padding: 22px !important;
    border: 1px solid var(--app-border, #dbe4f0) !important;
    border-top: 4px solid var(--app-primary, #2563eb) !important;
    border-radius: var(--app-radius, 18px) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .13), transparent 38%),
        var(--tema-card-background, var(--app-surface, #ffffff)) !important;
    box-shadow: var(--tema-card-shadow, 0 18px 45px rgba(15, 23, 42, .10)) !important;
}

.earnings-chart-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--tema-card-1, var(--app-primary, #2563eb)),
        var(--tema-card-2, var(--app-secondary, #7c3aed)),
        var(--tema-card-3, var(--app-accent, #06b6d4))
    );
}

.earnings-chart-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.earnings-chart-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.earnings-chart-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #ffffff;
    font-size: 20px;
    background: linear-gradient(
        135deg,
        var(--tema-card-1, var(--app-primary, #2563eb)),
        var(--tema-card-2, var(--app-secondary, #7c3aed))
    );
    box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
}

.earnings-chart-title h3 {
    margin: 0 0 4px;
    color: var(--app-text, #0f172a);
    font-size: clamp(17px, 1.45vw, 21px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.02em;
}

.earnings-chart-title p {
    margin: 0;
    color: var(--app-muted, #64748b);
    font-size: 12.5px;
    line-height: 1.45;
}

.earnings-chart-total {
    flex: 0 0 auto;
    min-width: 142px;
    padding: 10px 13px;
    border: 1px solid var(--app-border, #dbe4f0);
    border-radius: 13px;
    text-align: right;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.earnings-chart-total span {
    display: block;
    margin-bottom: 2px;
    color: var(--app-muted, #64748b);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.earnings-chart-total strong {
    display: block;
    color: var(--app-primary, #2563eb);
    font-size: 18px;
    line-height: 1.25;
    white-space: nowrap;
}

.earnings-chart-plot {
    position: relative;
    min-height: 270px;
    padding: 16px 12px 0;
    border: 1px solid var(--app-border, #dbe4f0);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248, 250, 252, .92), rgba(255, 255, 255, .72));
    overflow: hidden;
}

.earnings-chart-grid {
    position: absolute;
    z-index: 0;
    inset: 18px 12px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.earnings-chart-grid span {
    display: block;
    width: 100%;
    border-top: 1px dashed rgba(100, 116, 139, .22);
}

.earnings-chart-columns {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: clamp(8px, 1.25vw, 16px);
    min-height: 248px;
}

.earnings-chart-column {
    min-width: 0;
    height: 248px;
    display: grid;
    grid-template-rows: 28px 1fr 30px;
    align-items: end;
    text-align: center;
    --earnings-bar-top: var(--tema-card-1, #2563eb);
    --earnings-bar-bottom: #1746b5;
}

.earnings-chart-column-2 {
    --earnings-bar-top: var(--tema-card-2, #7c3aed);
    --earnings-bar-bottom: #5221b5;
}

.earnings-chart-column-3 {
    --earnings-bar-top: var(--tema-card-3, #06b6d4);
    --earnings-bar-bottom: #087c9b;
}

.earnings-chart-column-4 {
    --earnings-bar-top: var(--tema-card-4, #10b981);
    --earnings-bar-bottom: #087a57;
}

.earnings-chart-column-5 {
    --earnings-bar-top: var(--tema-card-5, #f97316);
    --earnings-bar-bottom: #c2410c;
}

.earnings-chart-value {
    align-self: center;
    min-width: 0;
    overflow: hidden;
    color: var(--app-text, #0f172a);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.earnings-chart-bar-track {
    position: relative;
    width: min(62px, 76%);
    height: 100%;
    justify-self: center;
    display: flex;
    align-items: flex-end;
    border-radius: 12px 12px 7px 7px;
    background: rgba(148, 163, 184, .10);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .13);
    overflow: hidden;
}

.earnings-chart-bar {
    position: relative;
    width: 100%;
    min-height: 0;
    border-radius: 11px 11px 6px 6px;
    background: linear-gradient(180deg, var(--earnings-bar-top), var(--earnings-bar-bottom));
    box-shadow: 0 10px 22px rgba(37, 99, 235, .24);
    transition: height .45s ease, transform .2s ease, filter .2s ease;
    overflow: hidden;
}

.earnings-chart-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.26), transparent 35%, rgba(255,255,255,.10));
}

.earnings-chart-bar span {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .80);
    transform: translateX(-50%);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .14);
}

.earnings-chart-column:hover .earnings-chart-bar {
    transform: translateY(-3px);
    filter: saturate(1.12) brightness(1.04);
}

.earnings-chart-bar.is-empty {
    height: 4px !important;
    min-height: 4px;
    opacity: .28;
    box-shadow: none;
}

.earnings-chart-bar.is-empty span {
    display: none;
}

.earnings-chart-label {
    align-self: center;
    color: var(--app-muted, #64748b);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.earnings-chart-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 14px;
    color: var(--app-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
}

.earnings-chart-footer span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.earnings-chart-footer span:first-child i {
    color: var(--tema-card-1, var(--app-primary, #2563eb));
}

.earnings-chart-footer span:last-child i {
    color: var(--tema-card-4, var(--app-success, #10b981));
}

@media (max-width: 991px) {
    .earnings-chart-card {
        min-height: 410px;
        margin-bottom: 18px;
    }

    .earnings-chart-plot {
        min-height: 250px;
    }

    .earnings-chart-columns,
    .earnings-chart-column {
        min-height: 228px;
        height: 228px;
    }
}

@media (max-width: 575px) {
    .earnings-chart-card {
        min-height: auto;
        padding: 16px 12px !important;
        border-radius: 16px !important;
    }

    .earnings-chart-header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 14px;
    }

    .earnings-chart-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 17px;
    }

    .earnings-chart-title h3 {
        font-size: 16px;
    }

    .earnings-chart-title p {
        font-size: 11px;
    }

    .earnings-chart-total {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding: 9px 11px;
    }

    .earnings-chart-total span {
        margin: 0;
    }

    .earnings-chart-total strong {
        font-size: 16px;
    }

    .earnings-chart-plot {
        min-height: 230px;
        padding: 12px 5px 0;
        border-radius: 13px;
    }

    .earnings-chart-grid {
        inset: 14px 6px 39px;
    }

    .earnings-chart-columns {
        gap: 4px;
        min-height: 216px;
    }

    .earnings-chart-column {
        height: 216px;
        min-height: 216px;
        grid-template-rows: 30px 1fr 28px;
    }

    .earnings-chart-value {
        font-size: 8.5px;
        letter-spacing: -.02em;
    }

    .earnings-chart-bar-track {
        width: min(42px, 76%);
        border-radius: 9px 9px 5px 5px;
    }

    .earnings-chart-bar {
        border-radius: 8px 8px 4px 4px;
    }

    .earnings-chart-label {
        font-size: 9px;
        letter-spacing: 0;
    }

    .earnings-chart-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        margin-top: 10px;
        font-size: 9.5px;
    }
}

/* ================================================================
   MENU LATERAL V5 — SUBMENUS E NAVEGAÇÃO SEM BOOTSTRAP
   ================================================================ */

#menu li.app-has-submenu > ul,
#menu li.app-has-submenu > .app-submenu {
    display: none !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

#menu li.app-has-submenu.menu-open > ul,
#menu li.app-has-submenu.is-open > ul,
#menu li.app-has-submenu.menu-open > .app-submenu,
#menu li.app-has-submenu.is-open > .app-submenu {
    display: block !important;
    animation: appSubmenuEntrada 180ms ease both;
}

#menu li.app-has-submenu > a.app-submenu-toggle {
    cursor: pointer !important;
}

#menu li.app-has-submenu > a .app-submenu-arrow,
#menu li.app-has-submenu > a .fa-angle-right,
#menu li.app-has-submenu > a .fa-angle-down,
#menu li.app-has-submenu > a .caret {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    transition: transform 180ms ease !important;
}

#menu li.app-has-submenu.menu-open > a .app-submenu-arrow,
#menu li.app-has-submenu.menu-open > a .fa-angle-right,
#menu li.app-has-submenu.is-open > a .app-submenu-arrow,
#menu li.app-has-submenu.is-open > a .fa-angle-right {
    transform: rotate(90deg) !important;
}

#menu li.app-has-submenu.menu-open > a .fa-angle-down,
#menu li.app-has-submenu.is-open > a .fa-angle-down,
#menu li.app-has-submenu.menu-open > a .caret,
#menu li.app-has-submenu.is-open > a .caret {
    transform: rotate(180deg) !important;
}

#menu li.app-has-submenu > ul > li {
    display: block !important;
    width: 100% !important;
    margin: 2px 0 !important;
}

#menu li.app-has-submenu > ul > li > a {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-height: 40px !important;
    align-items: center !important;
    padding: 9px 12px 9px 16px !important;
    border-radius: calc(var(--app-radius-sm) - 2px) !important;
    color: var(--app-sidebar-muted) !important;
    text-decoration: none !important;
}

#menu li.app-has-submenu > ul > li > a::before {
    content: '';
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    margin-right: 10px;
    border-radius: 999px;
    background: var(--app-accent);
    box-shadow: 0 0 0 4px rgba(255,255,255,.05);
}

#menu li.app-has-submenu > ul > li > a:hover,
#menu li.app-has-submenu > ul > li.active > a,
#menu li.app-has-submenu > ul > li.current > a {
    background: rgba(255,255,255,.09) !important;
    color: var(--app-sidebar-text) !important;
    transform: translateX(2px) !important;
}

#menu li.app-has-submenu.menu-open > a,
#menu li.app-has-submenu.is-open > a {
    background: linear-gradient(135deg, var(--app-sidebar-active), rgba(255,255,255,.07)) !important;
    border-color: rgba(255,255,255,.13) !important;
    color: var(--app-sidebar-text) !important;
}

@keyframes appSubmenuEntrada {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 991px) {
    body.app-sidebar-open #menu li.app-has-submenu > ul {
        margin: 5px 0 8px 8px !important;
        padding: 6px !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        background: rgba(0,0,0,.17) !important;
    }

    body.app-sidebar-open #menu li.app-has-submenu > ul > li > a {
        min-height: 43px !important;
        padding: 10px 11px 10px 14px !important;
        font-size: .88rem !important;
        line-height: 1.25 !important;
    }

    body.app-sidebar-open #menu li.app-has-submenu > a .app-submenu-arrow,
    body.app-sidebar-open #menu li.app-has-submenu > a .fa-angle-right,
    body.app-sidebar-open #menu li.app-has-submenu > a .fa-angle-down,
    body.app-sidebar-open #menu li.app-has-submenu > a .caret {
        position: static !important;
        left: auto !important;
        display: inline-flex !important;
        width: auto !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media (min-width: 992px) {
    .page-container.sidebar-collapsed #menu li.app-has-submenu > ul {
        display: none !important;
    }
}

/* ================================================================
   MENU INTEGRADO AO SISTEMA DE TEMAS V6
   Todo o visual vem das variáveis geradas por /app/config/tema.php.
   Não adicionar cores fixas ou estilos inline em views/menu.php.
   ================================================================ */
.sidebar-menu.app-menu-theme {
    background: linear-gradient(
        180deg,
        var(--app-sidebar-bg) 0%,
        var(--app-sidebar-bg-2) 100%
    ) !important;
    color: var(--app-sidebar-text) !important;
    border-right-color: color-mix(in srgb, var(--app-sidebar-text) 10%, transparent) !important;
    box-shadow: var(--app-shadow-lg) !important;
}

.sidebar-menu.app-menu-theme .sidebar-icon {
    background: var(--tema-button-background, var(--app-primary)) !important;
    border-color: color-mix(in srgb, var(--app-sidebar-text) 18%, transparent) !important;
    color: var(--tema-button-color, var(--app-sidebar-text)) !important;
    border-radius: var(--tema-button-radius, var(--app-radius-sm)) !important;
    box-shadow: var(--tema-button-shadow, var(--app-shadow-sm)) !important;
}

.sidebar-menu.app-menu-theme #menu > li > a,
.sidebar-menu.app-menu-theme #menu li a {
    color: var(--app-sidebar-muted) !important;
    border-radius: var(--app-radius-sm) !important;
}

.sidebar-menu.app-menu-theme #menu > li > a:hover,
.sidebar-menu.app-menu-theme #menu > li > a:focus,
.sidebar-menu.app-menu-theme #menu > li.menu-open > a,
.sidebar-menu.app-menu-theme #menu > li.is-open > a,
.sidebar-menu.app-menu-theme #menu > li.active > a,
.sidebar-menu.app-menu-theme #menu > li.current > a {
    background: var(--app-sidebar-hover) !important;
    color: var(--app-sidebar-text) !important;
    border-color: color-mix(in srgb, var(--app-sidebar-text) 12%, transparent) !important;
}

.sidebar-menu.app-menu-theme #menu > li.menu-open > a,
.sidebar-menu.app-menu-theme #menu > li.is-open > a,
.sidebar-menu.app-menu-theme #menu > li.active > a,
.sidebar-menu.app-menu-theme #menu > li.current > a {
    background: linear-gradient(
        135deg,
        var(--app-sidebar-active),
        color-mix(in srgb, var(--app-accent) 12%, transparent)
    ) !important;
    box-shadow: inset 3px 0 0 var(--app-accent) !important;
}

.sidebar-menu.app-menu-theme #menu li > ul {
    background: color-mix(in srgb, var(--app-sidebar-bg-2) 78%, transparent) !important;
    border-color: color-mix(in srgb, var(--app-sidebar-text) 9%, transparent) !important;
    border-radius: var(--app-radius-sm) !important;
}

.sidebar-menu.app-menu-theme #menu li > ul > li > a {
    color: var(--app-sidebar-muted) !important;
}

.sidebar-menu.app-menu-theme #menu li > ul > li > a::before {
    background: var(--app-accent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 18%, transparent) !important;
}

.sidebar-menu.app-menu-theme #menu li > ul > li > a:hover,
.sidebar-menu.app-menu-theme #menu li > ul > li.active > a,
.sidebar-menu.app-menu-theme #menu li > ul > li.current > a {
    background: color-mix(in srgb, var(--app-primary) 24%, transparent) !important;
    color: var(--app-sidebar-text) !important;
}

.sidebar-menu.app-menu-theme .app-submenu-arrow {
    color: var(--app-accent) !important;
}

.sidebar-menu.app-menu-theme .app-sidebar-mobile-head {
    background: color-mix(in srgb, var(--app-sidebar-bg) 88%, transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--app-sidebar-text) 12%, transparent) !important;
    color: var(--app-sidebar-text) !important;
}

.sidebar-menu.app-menu-theme .app-sidebar-mobile-close,
.app-mobile-menu-button {
    background: var(--tema-button-background, var(--app-primary)) !important;
    color: var(--tema-button-color, var(--app-sidebar-text)) !important;
    border-color: var(--tema-button-border, var(--app-primary)) !important;
    border-radius: var(--tema-button-radius, var(--app-radius-sm)) !important;
    box-shadow: var(--tema-button-shadow, var(--app-shadow-sm)) !important;
}

.app-sidebar-backdrop {
    background: color-mix(in srgb, var(--app-text) 54%, transparent) !important;
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .sidebar-menu.app-menu-theme {
        border-right-color: var(--app-sidebar-hover) !important;
    }
    .sidebar-menu.app-menu-theme #menu > li > a:hover,
    .sidebar-menu.app-menu-theme #menu > li > a:focus,
    .sidebar-menu.app-menu-theme #menu > li.menu-open > a,
    .sidebar-menu.app-menu-theme #menu > li.active > a {
        border-color: var(--app-sidebar-hover) !important;
    }
    .sidebar-menu.app-menu-theme #menu li > ul {
        background: var(--app-sidebar-bg-2) !important;
        border-color: var(--app-sidebar-hover) !important;
    }
    .sidebar-menu.app-menu-theme #menu li > ul > li > a:hover {
        background: var(--app-sidebar-active) !important;
    }
    .app-sidebar-backdrop {
        background: rgba(0, 0, 0, .54) !important;
    }
}

/* ================================================================
   MENU V7 — ABERTURA GARANTIDA E INTEGRADA AO TEMA
   ================================================================ */
.sidebar-menu.app-menu-theme #menu li.app-has-submenu > ul.app-submenu {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 5px 0 8px !important;
    padding: 5px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
    pointer-events: auto !important;
    z-index: auto !important;
    border: 1px solid var(--app-sidebar-hover) !important;
    border-radius: var(--app-radius-sm) !important;
    background: var(--app-sidebar-bg-2) !important;
    box-shadow: inset 0 1px 0 var(--app-sidebar-hover) !important;
}

.sidebar-menu.app-menu-theme #menu li.app-has-submenu:not(.menu-open):not(.is-open) > ul.app-submenu {
    display: none !important;
}

.sidebar-menu.app-menu-theme #menu li.app-has-submenu.menu-open > ul.app-submenu,
.sidebar-menu.app-menu-theme #menu li.app-has-submenu.is-open > ul.app-submenu {
    display: block !important;
}

.sidebar-menu.app-menu-theme #menu li.app-has-submenu > a.app-submenu-toggle {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.sidebar-menu.app-menu-theme #menu li.app-has-submenu > a.app-submenu-toggle .app-submenu-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    color: var(--app-accent) !important;
}

.sidebar-menu.app-menu-theme #menu li.app-has-submenu.menu-open > a.app-submenu-toggle,
.sidebar-menu.app-menu-theme #menu li.app-has-submenu.is-open > a.app-submenu-toggle {
    color: var(--app-sidebar-text) !important;
    background: var(--app-sidebar-active) !important;
    box-shadow: inset 3px 0 0 var(--app-accent) !important;
}

@media (max-width: 991px) {
    body.app-sidebar-open .sidebar-menu.app-menu-theme #menu li.app-has-submenu > ul.app-submenu {
        width: calc(100% - 8px) !important;
        margin-left: 8px !important;
    }
}


/* ========================================================================== 
   V8 — SUBMENUS E GRÁFICO 100% INTEGRADOS AO TEMA ATIVO
   Nenhuma cor visual principal deste bloco fica fixa.
   ========================================================================== */

/* Submenus: fundo, borda, destaque, textos e hover derivados do tema. */
#menu li ul,
#menu .submenu,
#menu .sub-menu {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-sidebar-bg-2) 78%, var(--app-primary) 22%),
        color-mix(in srgb, var(--app-sidebar-bg) 88%, var(--app-secondary) 12%)
    ) !important;
    border-color: color-mix(in srgb, var(--app-accent) 28%, transparent) !important;
    box-shadow:
        inset 3px 0 0 color-mix(in srgb, var(--app-accent) 72%, transparent),
        0 10px 26px color-mix(in srgb, var(--app-sidebar-bg-2) 68%, transparent) !important;
}

#menu li ul li > a,
#menu .submenu li > a,
#menu .sub-menu li > a {
    color: var(--app-sidebar-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
}

#menu li ul li > a:hover,
#menu li ul li > a:focus,
#menu .submenu li > a:hover,
#menu .submenu li > a:focus,
#menu .sub-menu li > a:hover,
#menu .sub-menu li > a:focus {
    color: var(--app-sidebar-text) !important;
    background: color-mix(in srgb, var(--app-primary) 28%, transparent) !important;
    border-color: color-mix(in srgb, var(--app-accent) 28%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--app-accent) !important;
}

#menu li ul li.active > a,
#menu li ul li.current > a,
#menu .submenu li.active > a,
#menu .submenu li.current > a,
#menu .sub-menu li.active > a,
#menu .sub-menu li.current > a {
    color: var(--app-sidebar-text) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--app-primary) 44%, transparent),
        color-mix(in srgb, var(--app-secondary) 26%, transparent)
    ) !important;
    border-color: color-mix(in srgb, var(--app-accent) 38%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--app-accent) !important;
}

/* Gráfico: superfície e detalhes derivados da paleta ativa. */
.earnings-chart-card {
    border-color: color-mix(in srgb, var(--app-primary) 20%, var(--app-border)) !important;
    border-top-color: var(--app-primary) !important;
    background:
        radial-gradient(
            circle at 100% 0%,
            color-mix(in srgb, var(--app-primary) 18%, transparent),
            transparent 40%
        ),
        var(--tema-card-background, var(--app-surface)) !important;
}

.earnings-chart-icon {
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary)) !important;
    color: var(--tema-card-1-text, #fff) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--app-primary) 28%, transparent) !important;
}

.earnings-chart-total {
    background: color-mix(in srgb, var(--app-surface) 90%, var(--app-primary-soft) 10%) !important;
    border-color: color-mix(in srgb, var(--app-primary) 18%, var(--app-border)) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--app-text) 8%, transparent) !important;
}

.earnings-chart-total strong {
    color: var(--app-primary) !important;
}

.earnings-chart-plot {
    border-color: color-mix(in srgb, var(--app-primary) 16%, var(--app-border)) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-surface-soft) 86%, var(--app-primary-soft) 14%),
        color-mix(in srgb, var(--app-surface) 94%, var(--app-secondary-soft) 6%)
    ) !important;
}

.earnings-chart-grid span {
    border-top-color: color-mix(in srgb, var(--app-muted) 28%, transparent) !important;
}

.earnings-chart-column {
    --earnings-bar-top: var(--tema-card-1, var(--app-primary));
    --earnings-bar-bottom: color-mix(in srgb, var(--tema-card-1, var(--app-primary)) 70%, black 30%);
}

.earnings-chart-column-2 {
    --earnings-bar-top: var(--tema-card-2, var(--app-secondary));
    --earnings-bar-bottom: color-mix(in srgb, var(--tema-card-2, var(--app-secondary)) 70%, black 30%);
}

.earnings-chart-column-3 {
    --earnings-bar-top: var(--tema-card-3, var(--app-accent));
    --earnings-bar-bottom: color-mix(in srgb, var(--tema-card-3, var(--app-accent)) 70%, black 30%);
}

.earnings-chart-column-4 {
    --earnings-bar-top: var(--tema-card-4, var(--app-success));
    --earnings-bar-bottom: color-mix(in srgb, var(--tema-card-4, var(--app-success)) 70%, black 30%);
}

.earnings-chart-column-5 {
    --earnings-bar-top: var(--tema-card-5, var(--app-info));
    --earnings-bar-bottom: color-mix(in srgb, var(--tema-card-5, var(--app-info)) 70%, black 30%);
}

.earnings-chart-bar-track {
    background: color-mix(in srgb, var(--app-border) 34%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-primary) 12%, var(--app-border)) !important;
}

.earnings-chart-bar {
    background: linear-gradient(180deg, var(--earnings-bar-top), var(--earnings-bar-bottom)) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--earnings-bar-top) 30%, transparent) !important;
}

.earnings-chart-bar::before {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, white 28%, transparent),
        transparent 38%,
        color-mix(in srgb, white 10%, transparent)
    ) !important;
}

.earnings-chart-footer {
    border-top-color: color-mix(in srgb, var(--app-primary) 14%, var(--app-border)) !important;
}

@media (max-width: 767px) {
    #menu li ul,
    #menu .submenu,
    #menu .sub-menu {
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--app-sidebar-bg-2) 76%, var(--app-primary) 24%),
            color-mix(in srgb, var(--app-sidebar-bg) 86%, var(--app-secondary) 14%)
        ) !important;
    }
}

/* ========================================================================== 
   V9 — MENU, SUBMENU E GRÁFICO SEM CORES FIXAS
   As cores abaixo são fornecidas exclusivamente por /app/config/tema.php.
   ========================================================================== */

/* Submenu: elimina qualquer fundo preto herdado do template antigo. */
.sidebar-menu.app-menu-theme #menu li.app-has-submenu > ul.app-submenu,
.sidebar-menu.app-menu-theme #menu li > ul,
#menu li ul,
#menu .submenu,
#menu .sub-menu {
    background: linear-gradient(
        180deg,
        var(--app-submenu-bg),
        var(--app-submenu-bg-2)
    ) !important;
    border: 1px solid var(--app-submenu-border) !important;
    box-shadow: inset 3px 0 0 var(--app-accent), var(--app-shadow-sm) !important;
}

.sidebar-menu.app-menu-theme #menu li.app-has-submenu > ul.app-submenu > li,
.sidebar-menu.app-menu-theme #menu li > ul > li,
#menu li ul > li,
#menu .submenu > li,
#menu .sub-menu > li {
    background: transparent !important;
}

.sidebar-menu.app-menu-theme #menu li.app-has-submenu > ul.app-submenu > li > a,
.sidebar-menu.app-menu-theme #menu li > ul > li > a,
#menu li ul > li > a,
#menu .submenu > li > a,
#menu .sub-menu > li > a {
    color: var(--app-submenu-text) !important;
    background: var(--app-submenu-item-bg) !important;
    border: 1px solid color-mix(in srgb, var(--app-submenu-border) 58%, transparent) !important;
    box-shadow: none !important;
}

.sidebar-menu.app-menu-theme #menu li.app-has-submenu > ul.app-submenu > li > a::before,
.sidebar-menu.app-menu-theme #menu li > ul > li > a::before,
#menu li ul > li > a::before,
#menu .submenu > li > a::before,
#menu .sub-menu > li > a::before {
    background: var(--app-accent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 18%, transparent) !important;
}

.sidebar-menu.app-menu-theme #menu li.app-has-submenu > ul.app-submenu > li > a:hover,
.sidebar-menu.app-menu-theme #menu li.app-has-submenu > ul.app-submenu > li > a:focus,
.sidebar-menu.app-menu-theme #menu li > ul > li > a:hover,
.sidebar-menu.app-menu-theme #menu li > ul > li > a:focus,
#menu li ul > li > a:hover,
#menu li ul > li > a:focus,
#menu .submenu > li > a:hover,
#menu .submenu > li > a:focus,
#menu .sub-menu > li > a:hover,
#menu .sub-menu > li > a:focus {
    color: var(--app-submenu-text) !important;
    background: var(--app-submenu-item-hover) !important;
    border-color: var(--app-submenu-border) !important;
    box-shadow: inset 3px 0 0 var(--app-accent) !important;
}

.sidebar-menu.app-menu-theme #menu li.app-has-submenu > ul.app-submenu > li.active > a,
.sidebar-menu.app-menu-theme #menu li.app-has-submenu > ul.app-submenu > li.current > a,
.sidebar-menu.app-menu-theme #menu li > ul > li.active > a,
.sidebar-menu.app-menu-theme #menu li > ul > li.current > a,
#menu li ul > li.active > a,
#menu li ul > li.current > a {
    color: var(--app-submenu-text) !important;
    background: var(--app-submenu-item-active) !important;
    border-color: var(--app-submenu-border) !important;
    box-shadow: inset 3px 0 0 var(--app-accent) !important;
}

/* Gráfico: as cinco colunas usam somente a paleta do tema ativo. */
.earnings-chart-column,
.earnings-chart-column-1 {
    --earnings-bar-top: var(--app-chart-1) !important;
    --earnings-bar-bottom: var(--app-chart-1-dark) !important;
}

.earnings-chart-column-2 {
    --earnings-bar-top: var(--app-chart-2) !important;
    --earnings-bar-bottom: var(--app-chart-2-dark) !important;
}

.earnings-chart-column-3 {
    --earnings-bar-top: var(--app-chart-3) !important;
    --earnings-bar-bottom: var(--app-chart-3-dark) !important;
}

.earnings-chart-column-4 {
    --earnings-bar-top: var(--app-chart-4) !important;
    --earnings-bar-bottom: var(--app-chart-4-dark) !important;
}

.earnings-chart-column-5 {
    --earnings-bar-top: var(--app-chart-5) !important;
    --earnings-bar-bottom: var(--app-chart-5-dark) !important;
}

.earnings-chart-bar {
    background: linear-gradient(
        180deg,
        var(--earnings-bar-top),
        var(--earnings-bar-bottom)
    ) !important;
    border-color: color-mix(in srgb, var(--earnings-bar-top) 62%, var(--app-border)) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--earnings-bar-top) 30%, transparent) !important;
}

.earnings-chart-footer span:first-child i,
.earnings-chart-footer span:last-child i {
    color: var(--app-accent) !important;
}

/* ========================================================================== 
   V10 — COMPONENTES DECORATIVOS 100% LIGADOS À PALETA PRINCIPAL DO TEMA
   Nenhum status visual do dashboard usa verde, vermelho ou rosa fixos.
   As variáveis são produzidas por /app/config/tema.php.
   ========================================================================== */

/* Botão de mensagens do topo: acompanha a cor primária do tema. */
.app-topbar__message {
    background: var(--app-primary-soft) !important;
    color: var(--app-primary) !important;
    border-color: var(--app-decor-positive-border, var(--app-border)) !important;
}

.app-topbar__message:hover,
.app-topbar__message:focus {
    background: var(--app-secondary-soft) !important;
    color: var(--app-secondary) !important;
    border-color: var(--app-decor-callout-border, var(--app-border)) !important;
}

.app-topbar__notification {
    background: var(--app-decor-callout, var(--app-secondary)) !important;
}

/* Chips do topo: Adesão, Ativação e pacote atual. */
.app-status-chip {
    background: var(--app-primary-soft) !important;
    color: var(--app-primary-dark) !important;
    border-color: var(--app-decor-positive-border, var(--app-border)) !important;
}

.app-status-chip.is-active {
    background: var(--app-decor-positive-soft, var(--app-accent-soft)) !important;
    color: var(--app-decor-positive-text, var(--app-accent)) !important;
    border-color: var(--app-decor-positive-border, var(--app-border)) !important;
}

.app-status-chip.is-active i,
.app-status-chip.is-active .fa,
.app-status-chip.is-active .fas,
.app-status-chip.is-active .far {
    color: var(--app-decor-positive, var(--app-accent)) !important;
}

.app-status-chip.is-inactive {
    background: var(--app-decor-callout-soft, var(--app-secondary-soft)) !important;
    color: var(--app-decor-callout-text, var(--app-secondary)) !important;
    border-color: var(--app-decor-callout-border, var(--app-border)) !important;
}

.app-status-chip.is-package {
    background: var(--app-primary-soft) !important;
    color: var(--app-primary-dark) !important;
    border-color: var(--app-decor-positive-border, var(--app-border)) !important;
}

/* Alertas informativos da home: deixam de usar rosa/vermelho semântico. */
.dashboard-alerts .app-dashboard-alert,
.dashboard-alerts .app-dashboard-alert.alert-danger,
.app-dashboard-alert.alert-danger {
    background: linear-gradient(
        135deg,
        var(--app-decor-callout-soft, var(--app-secondary-soft)),
        var(--app-surface)
    ) !important;
    color: var(--app-text) !important;
    border-color: var(--app-decor-callout-border, var(--app-border)) !important;
    border-left-color: var(--app-decor-callout, var(--app-secondary)) !important;
}

.dashboard-alerts .app-dashboard-alert i,
.app-dashboard-alert.alert-danger i {
    color: var(--app-decor-callout, var(--app-secondary)) !important;
}

.dashboard-alerts .app-dashboard-alert a,
.app-dashboard-alert.alert-danger a {
    color: var(--app-decor-callout-text, var(--app-secondary)) !important;
    text-decoration-color: var(--app-decor-callout, var(--app-secondary)) !important;
}

/* Próxima ativação: destaque derivado da cor de destaque do tema. */
.activation-table tbody td:last-child,
.activation-summary-card .activation-table tbody td:last-child {
    background: var(--app-decor-positive-soft, var(--app-accent-soft)) !important;
    color: var(--app-decor-positive-text, var(--app-accent)) !important;
    border-color: var(--app-decor-positive-border, var(--app-border)) !important;
}

.activation-table tbody td:last-child strong,
.activation-summary-card .activation-table tbody td:last-child strong {
    color: inherit !important;
}

/* Selos de status usados em tabelas de outras páginas. */
.status-badge.is-active,
.badge-status.is-active,
.app-badge.is-active {
    background: var(--app-decor-positive-soft, var(--app-accent-soft)) !important;
    color: var(--app-decor-positive-text, var(--app-accent)) !important;
    border-color: var(--app-decor-positive-border, var(--app-border)) !important;
}

.status-badge.is-inactive,
.badge-status.is-inactive,
.app-badge.is-inactive {
    background: var(--app-decor-callout-soft, var(--app-secondary-soft)) !important;
    color: var(--app-decor-callout-text, var(--app-secondary)) !important;
    border-color: var(--app-decor-callout-border, var(--app-border)) !important;
}

/* Gráfico: usa diretamente as cinco cores e cinco tons escuros gerados pelo tema. */
.earnings-chart-column,
.earnings-chart-column-1 {
    --earnings-bar-top: var(--app-chart-1) !important;
    --earnings-bar-bottom: var(--app-chart-1-dark) !important;
}

.earnings-chart-column-2 {
    --earnings-bar-top: var(--app-chart-2) !important;
    --earnings-bar-bottom: var(--app-chart-2-dark) !important;
}

.earnings-chart-column-3 {
    --earnings-bar-top: var(--app-chart-3) !important;
    --earnings-bar-bottom: var(--app-chart-3-dark) !important;
}

.earnings-chart-column-4 {
    --earnings-bar-top: var(--app-chart-4) !important;
    --earnings-bar-bottom: var(--app-chart-4-dark) !important;
}

.earnings-chart-column-5 {
    --earnings-bar-top: var(--app-chart-5) !important;
    --earnings-bar-bottom: var(--app-chart-5-dark) !important;
}


/* ========================================================================== 
   V11 — CORREÇÕES FINAIS PARA COMPONENTES QUE AINDA NÃO DEVEM USAR CORES SEMÂNTICAS FIXAS
   Tudo abaixo usa apenas as cores estruturais do tema: primary, secondary e accent.
   ========================================================================== */

/* Chips do topo: deixam de usar tons de sucesso. */
.app-status-chip,
.app-status-chip.is-active,
.app-status-chip.is-inactive,
.app-status-chip.is-package {
    background: linear-gradient(135deg, var(--app-primary-soft), var(--app-surface)) !important;
    color: var(--app-primary-dark) !important;
    border-color: color-mix(in srgb, var(--app-primary) 28%, var(--app-border)) !important;
}

.app-status-chip i,
.app-status-chip .fa,
.app-status-chip .fas,
.app-status-chip .far,
.app-status-chip.is-active i,
.app-status-chip.is-inactive i,
.app-status-chip.is-package i {
    color: var(--app-primary) !important;
}

/* Próxima ativação: não usa mais verde. */
.activation-table thead th:last-child,
.activation-summary-card .activation-table thead th:last-child {
    background: linear-gradient(135deg, var(--app-secondary), var(--app-accent)) !important;
    color: #fff !important;
}

.activation-table tbody td:last-child,
.activation-summary-card .activation-table tbody td:last-child {
    background: color-mix(in srgb, var(--app-secondary) 14%, var(--app-surface)) !important;
    color: var(--app-secondary) !important;
    border-color: color-mix(in srgb, var(--app-secondary) 32%, var(--app-border)) !important;
}

.activation-table tbody td:last-child strong,
.activation-summary-card .activation-table tbody td:last-child strong {
    color: inherit !important;
}

/* Alerta/curso grátis da home: usa somente a paleta do tema e sem ícone de alerta. */
.alert::before {
    content: none !important;
}

.alert {
    padding-left: 17px !important;
}

.dashboard-alerts .app-dashboard-alert,
.dashboard-alerts .app-dashboard-alert.alert-danger,
.app-dashboard-alert.alert-danger,
.alert.alert-danger.course-offer-alert,
.alert.course-offer-alert {
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-primary) 10%, var(--app-surface)), color-mix(in srgb, var(--app-secondary) 8%, var(--app-surface))) !important;
    color: var(--app-text) !important;
    border-color: color-mix(in srgb, var(--app-primary) 22%, var(--app-border)) !important;
    border-left: 4px solid var(--app-primary) !important;
}

.dashboard-alerts .app-dashboard-alert i,
.app-dashboard-alert.alert-danger i,
.alert.course-offer-alert i {
    display: none !important;
}

.dashboard-alerts .app-dashboard-alert a,
.app-dashboard-alert.alert-danger a,
.alert.course-offer-alert a {
    color: var(--app-primary-dark) !important;
    text-decoration-color: var(--app-primary) !important;
}

/* Submenu aberto e itens internos: reforça uso exclusivo da paleta ativa. */
.sidebar-menu .menu ul ul,
.sidebar-menu .menu .submenu {
    background: linear-gradient(180deg, var(--app-sidebar-submenu-bg), var(--app-sidebar-submenu-bg-2)) !important;
    border-color: var(--app-sidebar-submenu-border) !important;
}

.sidebar-menu .menu ul ul li a,
.sidebar-menu .menu .submenu li a {
    background: var(--app-sidebar-submenu-item-bg) !important;
    color: var(--app-sidebar-submenu-text) !important;
    border-color: color-mix(in srgb, var(--app-sidebar-submenu-border) 68%, transparent) !important;
}

.sidebar-menu .menu ul ul li a:hover,
.sidebar-menu .menu ul ul li a:focus,
.sidebar-menu .menu ul ul li.is-active > a,
.sidebar-menu .menu .submenu li a:hover,
.sidebar-menu .menu .submenu li a:focus,
.sidebar-menu .menu .submenu li.is-active > a {
    background: var(--app-sidebar-submenu-item-hover) !important;
    color: var(--app-sidebar-submenu-text) !important;
}


/* ========================================================================== 
   V12 — CORES DE TEXTO EDITÁVEIS POR FUNÇÃO
   Essas variáveis são globais e podem ser reutilizadas em qualquer página.
   ========================================================================== */
body,
.page-container,
.left-content,
.mother-grid-inner,
.inner-block {
    color: var(--app-text-body, var(--app-text)) !important;
}

h1, h2, h3, h4, h5, h6,
.dashboard-section-heading h1,
.dashboard-section-heading h2,
.dashboard-section-heading h3,
.activation-summary-card__title h1,
.activation-summary-card__title h2,
.activation-summary-card__title h3,
.chit-chat-heading,
.panel-title,
.card-title {
    color: var(--app-text-title, var(--app-text)) !important;
}

.subtitle,
.text-muted,
.muted,
small,
.dashboard-section-heading p,
.dashboard-section-heading__eyebrow,
.activation-summary-card__title span {
    color: var(--app-text-subtitle, var(--app-muted)) !important;
}

a:not(.sidebar-icon):not(.menu-parent-link):not(.app-button):not(.btn) {
    color: var(--app-text-link, var(--app-primary));
}
a:not(.sidebar-icon):not(.menu-parent-link):not(.app-button):not(.btn):hover,
a:not(.sidebar-icon):not(.menu-parent-link):not(.app-button):not(.btn):focus {
    color: var(--app-text-link-hover, var(--app-secondary));
}

.sidebar-menu .menu > ul > li > a,
.sidebar-menu #menu > li > a,
.sidebar-menu .menu > ul > li > a span {
    color: var(--app-text-menu, var(--app-sidebar-text)) !important;
}
.sidebar-menu .menu ul ul li a,
.sidebar-menu .menu .submenu li a,
.sidebar-menu .menu ul ul li a span {
    color: var(--app-text-submenu, var(--app-submenu-text)) !important;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.app-button,
.theme-button {
    color: var(--app-text-button, var(--tema-button-color)) !important;
}

.market-update-left p,
.market-update-left .card-title,
.financial-card__title,
.dashboard-card__title,
.card .card-title,
.panel .panel-title {
    color: var(--app-text-card-title, var(--tema-card-1-text)) !important;
}
.market-update-left h3,
.market-update-left h4,
.financial-card__value,
.dashboard-card__value,
.card .card-value,
.card .amount,
.card .total {
    color: var(--app-text-card-value, var(--tema-card-1-text)) !important;
}

th,
thead td,
.table thead th,
.activation-table thead th {
    color: var(--app-text-table-head, var(--app-text)) !important;
}
td,
tbody th,
.table tbody td,
.activation-table tbody td {
    color: var(--app-text-table, var(--app-text)) !important;
}

label,
.form-label,
.field-label,
.control-label {
    color: var(--app-text-label, var(--app-muted)) !important;
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]),
select,
textarea {
    color: var(--app-text-input, var(--app-text)) !important;
}
input::placeholder,
textarea::placeholder {
    color: var(--app-text-placeholder, var(--app-muted)) !important;
    opacity: 1;
}

.alert,
.app-dashboard-alert,
.notification,
.notice,
.message-box {
    color: var(--app-text-alert, var(--app-text)) !important;
}
.alert a,
.app-dashboard-alert a {
    color: var(--app-text-link, var(--app-primary)) !important;
}

.status-badge,
.badge-status,
.app-badge,
.app-status-chip,
.dashboard-section-heading__badge {
    color: var(--app-text-status, var(--app-primary)) !important;
}

footer,
.footer,
.copyrights,
.copyrights p,
.page-footer {
    color: var(--app-text-footer, var(--app-muted)) !important;
}


/* ========================================================================== 
   V14 — CONTRASTE AUTOMÁTICO DO CABEÇALHO DE ATIVAÇÃO
   O cabeçalho desta tabela não deve herdar uma cor de texto personalizada
   que prejudique a leitura. Ele usa variáveis específicas de contraste.
   ========================================================================== */
.activation-table thead th,
.table.activation-table thead th,
.activation-summary-card .activation-table thead th {
    color: var(--app-activation-head-text, var(--app-text-table-head, var(--app-text))) !important;
}

.activation-table thead th:last-child,
.table.activation-table thead th:last-child,
.activation-summary-card .activation-table thead th:last-child {
    color: var(--app-activation-head-text-alt, var(--app-activation-head-text, var(--app-text-table-head, var(--app-text)))) !important;
}


/* ========================================================================== 
   V15 — CORREÇÃO DEFINITIVA DO CABEÇALHO DE ATIVAÇÃO
   A página antiga usa a classe .cor_tr diretamente no <tr>. Estas regras
   atingem os <th> reais e impedem texto branco sobre fundos claros.
   ========================================================================== */
.activation-summary-card .activation-table thead,
.activation-table thead,
.table thead,
.table thead .cor_tr,
.cor_tr {
    background: transparent !important;
}

.activation-summary-card .activation-table thead th,
.activation-table thead th,
.table thead .cor_tr th,
.table .cor_tr th,
.cor_tr > th {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--app-primary) 12%, var(--app-surface)),
        color-mix(in srgb, var(--app-secondary) 10%, var(--app-surface))
    ) !important;
    color: var(--app-text-title, var(--app-text)) !important;
    -webkit-text-fill-color: var(--app-text-title, var(--app-text)) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--app-primary) 24%, var(--app-border)) !important;
    text-shadow: none !important;
}

.activation-summary-card .activation-table thead th:last-child,
.activation-table thead th:last-child,
.table thead .cor_tr th:last-child,
.table .cor_tr th:last-child,
.cor_tr > th:last-child {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--app-secondary) 13%, var(--app-surface)),
        color-mix(in srgb, var(--app-accent) 11%, var(--app-surface))
    ) !important;
    color: var(--app-text-title, var(--app-text)) !important;
    -webkit-text-fill-color: var(--app-text-title, var(--app-text)) !important;
}

/* Compatibilidade com marcações antigas usando font dentro do cabeçalho. */
.cor_tr th font,
.activation-table thead th font,
.table thead .cor_tr th font {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}


/* ========================================================================== 
   V16 — VÍDEO DO YOUTUBE CADASTRADO NO ADMINISTRADOR
   O campo plano_em_video.video pode conter o ID ou a URL completa do vídeo.
   ========================================================================== */
.youtube-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0;
    background: linear-gradient(145deg, var(--app-primary-soft), var(--app-secondary-soft));
    border: 1px solid color-mix(in srgb, var(--app-primary) 30%, var(--app-border));
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow);
}

.youtube-video-container iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.youtube-video-empty {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px;
    color: var(--app-text);
    text-align: center;
}

.youtube-video-empty i {
    display: inline-flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    border: 1px solid color-mix(in srgb, var(--app-primary) 28%, var(--app-border));
    border-radius: var(--app-radius);
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: 29px;
}

.youtube-video-empty strong {
    color: var(--app-text-title, var(--app-text));
    font-size: 1.05rem;
}

.youtube-video-empty small {
    max-width: 460px;
    color: var(--app-text-subtitle, var(--app-muted));
    line-height: 1.55;
}

@media (max-width: 720px) {
    .youtube-video-container {
        border-radius: var(--app-radius);
    }
}

/* ========================================================================== 
   V17 — PÁGINAS DE CONTA: DADOS, DOCUMENTAÇÃO, BANCO E ALTERAÇÃO DE PIN
   Todos os componentes usam exclusivamente as variáveis do tema ativo.
   ========================================================================== */

.app-account-page {
    background: var(--app-page-background, var(--app-bg));
    color: var(--app-text-body, var(--app-text));
}

.app-content-page {
    display: grid;
    gap: var(--app-gap, 20px);
    padding-bottom: 42px;
}

.app-page-metrics {
    margin-bottom: 2px;
}

.app-page-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(120deg,
            color-mix(in srgb, var(--app-primary) 13%, var(--app-surface)),
            var(--app-surface) 54%,
            color-mix(in srgb, var(--app-secondary) 10%, var(--app-surface)));
    border: 1px solid color-mix(in srgb, var(--app-primary) 26%, var(--app-border));
    border-radius: var(--app-radius-lg, var(--app-radius));
    box-shadow: var(--app-shadow-sm, var(--app-shadow));
}

.app-page-hero::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -66px;
    top: -92px;
    background: color-mix(in srgb, var(--app-accent) 16%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

.app-page-hero__icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
    color: var(--app-text-button, var(--tema-button-color));
    border: 1px solid color-mix(in srgb, var(--app-primary) 36%, var(--app-border));
    border-radius: var(--app-radius, 16px);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--app-primary) 24%, transparent);
    font-size: 24px;
}

.app-page-hero__eyebrow,
.app-section-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--app-primary);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.app-page-hero__title {
    margin: 0;
    color: var(--app-text-title, var(--app-text));
    font-size: clamp(1.55rem, 2.4vw, 2.25rem);
    line-height: 1.08;
}

.app-page-hero__description {
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--app-text-subtitle, var(--app-muted));
    line-height: 1.6;
}

.app-content-card {
    overflow: hidden;
    background: var(--app-card-background, var(--app-surface));
    border: var(--app-card-border-width, 1px) solid color-mix(in srgb, var(--app-primary) 22%, var(--app-border));
    border-radius: var(--app-radius-lg, var(--app-radius));
    box-shadow: var(--app-card-shadow, var(--app-shadow));
    backdrop-filter: var(--app-card-backdrop, none);
}

.app-content-card__header,
.app-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    background: linear-gradient(110deg,
        color-mix(in srgb, var(--app-primary) 10%, var(--app-surface)),
        var(--app-surface) 52%,
        color-mix(in srgb, var(--app-secondary) 8%, var(--app-surface)));
    border-bottom: 1px solid var(--app-border);
}

.app-content-card__header h2,
.app-panel-heading h2 {
    margin: 0;
    color: var(--app-text-title, var(--app-text));
    font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.app-content-card__body,
.app-tab-panel {
    padding: var(--app-card-padding, 22px);
}

.app-security-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    white-space: nowrap;
    background: var(--app-primary-soft);
    color: var(--app-primary-dark);
    border: 1px solid color-mix(in srgb, var(--app-primary) 27%, var(--app-border));
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 850;
}

.app-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--app-primary) 9%, var(--app-surface));
    color: var(--app-text-alert, var(--app-text));
    border: 1px solid color-mix(in srgb, var(--app-primary) 28%, var(--app-border));
    border-left: 4px solid var(--app-primary);
    border-radius: var(--app-radius-sm, var(--app-radius));
    box-shadow: var(--app-shadow-sm, none);
    line-height: 1.45;
}

.app-feedback[hidden] {
    display: none !important;
}

.app-feedback--success {
    background: color-mix(in srgb, var(--app-accent) 10%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-accent) 28%, var(--app-border));
    border-left-color: var(--app-accent);
}

.app-feedback--error {
    background: color-mix(in srgb, var(--app-secondary) 10%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-secondary) 28%, var(--app-border));
    border-left-color: var(--app-secondary);
}

.app-feedback--loading {
    background: color-mix(in srgb, var(--app-primary) 8%, var(--app-surface));
    border-left-color: var(--app-primary);
}

.app-form {
    display: grid;
    gap: 22px;
}

.app-form-grid {
    display: grid;
    gap: 18px;
}

.app-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.app-field--full {
    grid-column: 1 / -1;
}

.app-field label {
    color: var(--app-text-label, var(--app-text));
    font-size: .84rem;
    font-weight: 850;
}

.app-field input,
.app-field select,
.app-field textarea,
.app-form input:not([type="file"]):not([type="hidden"]),
.app-form select,
.app-form textarea {
    width: 100%;
    min-height: var(--app-control-height, 42px);
    padding: 10px 13px;
    background: var(--app-surface);
    color: var(--app-text-input, var(--app-text));
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm, 12px);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.app-field input:focus,
.app-field select:focus,
.app-field textarea:focus,
.app-form input:not([type="file"]):not([type="hidden"]):focus,
.app-form select:focus,
.app-form textarea:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 18%, transparent);
}

.app-field input:disabled,
.app-field select:disabled,
.app-form input:disabled,
.app-form button:disabled {
    opacity: .64;
    cursor: not-allowed;
}

.app-field input::placeholder,
.app-form input::placeholder,
.app-form textarea::placeholder {
    color: var(--app-text-placeholder, var(--app-muted));
}

.app-field small {
    color: var(--app-text-subtitle, var(--app-muted));
    line-height: 1.45;
}

.app-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
}

.app-button {
    display: inline-flex;
    min-height: var(--app-control-height, 42px);
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 18px;
    border: 1px solid var(--tema-button-border, var(--app-primary));
    border-radius: var(--tema-button-radius, var(--app-radius-sm));
    font: inherit;
    font-weight: 850;
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.app-button--primary {
    background: var(--tema-button-background, var(--app-primary));
    color: var(--app-text-button, var(--tema-button-color));
    box-shadow: var(--tema-button-shadow, none);
}

.app-button:hover:not(:disabled),
.app-button:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.app-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--app-text-link, var(--app-primary));
    font-weight: 800;
    text-decoration: none;
}

.app-inline-link:hover {
    color: var(--app-text-link-hover, var(--app-secondary));
}

/* Tabs */
.app-tabs-card {
    min-width: 0;
}

.app-tabs {
    display: flex;
    gap: 8px;
    padding: 10px;
    overflow-x: auto;
    background: color-mix(in srgb, var(--app-primary) 6%, var(--app-surface));
    border-bottom: 1px solid var(--app-border);
    scrollbar-width: thin;
}

.app-tab-button {
    display: inline-flex;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    background: transparent;
    color: var(--app-text-subtitle, var(--app-muted));
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm, 12px);
    font: inherit;
    font-weight: 850;
    cursor: pointer;
}

.app-tab-button.is-active {
    background: var(--tema-button-background, var(--app-primary));
    color: var(--app-text-button, var(--tema-button-color));
    border-color: var(--tema-button-border, var(--app-primary));
    box-shadow: var(--tema-button-shadow, none);
}

.app-tab-panel[hidden] {
    display: none !important;
}

/* Uploads e documentos */
.app-profile-upload {
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    align-items: center;
}

.app-profile-preview {
    width: min(100%, 210px);
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--app-primary-soft);
    border: 4px solid var(--app-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--app-border), var(--app-shadow-sm);
}

.app-profile-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-file-uploader {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.app-file-uploader input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.app-file-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--app-primary-soft);
    color: var(--app-primary-dark);
    border: 1px solid color-mix(in srgb, var(--app-primary) 28%, var(--app-border));
    border-radius: var(--app-radius-sm, 12px);
    font-weight: 850;
    cursor: pointer;
}

.app-file-name {
    min-width: 0;
    color: var(--app-text-subtitle, var(--app-muted));
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.app-document-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, .75fr);
    gap: 22px;
    align-items: start;
}

.app-document-copy h2 {
    margin: 0 0 8px;
    color: var(--app-text-title, var(--app-text));
}

.app-document-copy p {
    margin: 0;
    color: var(--app-text-subtitle, var(--app-muted));
    line-height: 1.6;
}

.app-document-form {
    display: grid;
    gap: 14px;
    padding: 17px;
    background: color-mix(in srgb, var(--app-primary) 6%, var(--app-surface));
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius, 16px);
}

.app-document-preview {
    grid-column: 1 / -1;
    display: grid;
    min-height: 220px;
    place-items: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--app-secondary) 5%, var(--app-surface));
    border: 1px dashed color-mix(in srgb, var(--app-primary) 35%, var(--app-border));
    border-radius: var(--app-radius, 16px);
}

.app-document-preview > img,
.app-document-preview-image img {
    display: block;
    width: 100%;
    max-height: 430px;
    object-fit: contain;
}

.app-document-empty,
.app-document-file {
    display: grid;
    place-items: center;
    gap: 9px;
    padding: 28px;
    color: var(--app-text-subtitle, var(--app-muted));
    text-align: center;
    text-decoration: none;
}

.app-document-empty i,
.app-document-file i {
    color: var(--app-primary);
    font-size: 38px;
}

/* PIN */
.app-pin-card__body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
}

.app-pin-illustration {
    display: inline-flex;
    width: 78px;
    height: 78px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--app-primary-soft), var(--app-secondary-soft));
    color: var(--app-primary);
    border: 1px solid color-mix(in srgb, var(--app-primary) 28%, var(--app-border));
    border-radius: var(--app-radius, 16px);
    font-size: 31px;
}

.app-pin-copy h3 {
    margin: 0 0 7px;
    color: var(--app-text-title, var(--app-text));
}

.app-pin-copy p {
    margin: 0;
    color: var(--app-text-subtitle, var(--app-muted));
    line-height: 1.55;
}

.app-check-list {
    display: grid;
    gap: 7px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    color: var(--app-text-body, var(--app-text));
    font-size: .86rem;
}

.app-check-list i {
    margin-right: 6px;
    color: var(--app-accent);
}

.app-page-footer {
    color: var(--app-text-footer, var(--app-muted));
}

@media (max-width: 900px) {
    .app-content-card__header,
    .app-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-document-layout,
    .app-profile-upload,
    .app-pin-card__body {
        grid-template-columns: 1fr;
    }

    .app-profile-preview {
        justify-self: center;
    }

    .app-pin-action,
    .app-pin-action .app-button {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .app-content-page {
        gap: 14px;
    }

    .app-page-hero {
        align-items: flex-start;
        padding: 18px;
    }

    .app-page-hero__icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 20px;
    }

    .app-content-card__body,
    .app-tab-panel {
        padding: 16px;
    }

    .app-form-grid--two {
        grid-template-columns: 1fr;
    }

    .app-field--full {
        grid-column: auto;
    }

    .app-form-actions,
    .app-form-actions .app-button {
        width: 100%;
    }

    .app-tabs {
        padding: 8px;
    }

    .app-tab-button {
        padding: 9px 12px;
    }

    .app-file-uploader,
    .app-file-button,
    .app-document-form .app-button {
        width: 100%;
    }

    .app-file-button {
        justify-content: center;
    }
}