@layer mindz.legacy {
/*
 * MindZ UI — componentes globais legados e compartilhados.
 * Tokens, reset, tipografia, controles e acessibilidade base ficam em mindz_foundations.css.
 */

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

.page,
.content-page{
    width: min(var(--page-max-width), 100%);
    margin: 0 auto;
    display: grid;
    gap: var(--page-gap);
}

.page-header,
.result-header,
.search-title{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid var(--header-border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.page-header h1,
.page-header h2,
.result-header h2,
.search-title h2,
.section-title{
    margin: 0;
    color: var(--header-title);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.page-header p,
.result-header p,
.search-title p,
.subtitle{
    margin: 8px 0 0;
    color: var(--header-subtitle);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.eyebrow{
    margin: 0 0 8px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

:root:not([data-theme="dark"]) .app-shell,
:root:not([data-theme="dark"]) .app-area,
:root:not([data-theme="dark"]) .app-content,
:root:not([data-theme="dark"]) .content-page,
:root:not([data-theme="dark"]) .main-content,
:root:not([data-theme="dark"]) .page-content,
:root:not([data-theme="dark"]) .shell-main{
background: radial-gradient(circle at 88% -8%, rgba(169, 176, 219, 0.30), transparent 27%),
        radial-gradient(circle at 72% 2%, rgba(232, 234, 247, 0.72), transparent 20%),
        var(--app-bg);
}

:root:not([data-theme="dark"]) .app-topbar,
:root:not([data-theme="dark"]) .app-topbar.topbar-corrigida,
:root:not([data-theme="dark"]) .topbar,
:root:not([data-theme="dark"]) .app-header,
:root:not([data-theme="dark"]) .shell-header,
:root:not([data-theme="dark"]) .main-header{
background: linear-gradient(180deg, var(--header-bg), var(--surface));
    border-bottom-color: var(--header-border);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--shadow-color) 3%, transparent);
}

:root:not([data-theme="dark"]) .topbar-page-title,
:root:not([data-theme="dark"]) .app-header h1,
:root:not([data-theme="dark"]) .shell-header h1,
:root:not([data-theme="dark"]) .main-header h1{
color: var(--header-title);
    font-weight: 560;
}

:root:not([data-theme="dark"]) .topbar-page-subtitle,
:root:not([data-theme="dark"]) .topbar-page-context,
:root:not([data-theme="dark"]) .app-header p,
:root:not([data-theme="dark"]) .shell-header p,
:root:not([data-theme="dark"]) .main-header p{
color: var(--header-subtitle);
    font-weight: 400;
}

:root:not([data-theme="dark"]) .sidebar,
:root:not([data-theme="dark"]) .app-sidebar,
:root:not([data-theme="dark"]) .shell-sidebar{
background: var(--sidebar-bg);
    border-right-color: var(--sidebar-border);
    box-shadow: 1px 0 0 color-mix(in srgb, var(--shadow-color) 2%, transparent);
}

:root:not([data-theme="dark"]) .sidebar-link:hover,
:root:not([data-theme="dark"]) .sidebar-submenu-link:hover{
background: var(--sidebar-hover);
    color: var(--primary);
}

:root:not([data-theme="dark"]) .sidebar-link.active,
:root:not([data-theme="dark"]) .sidebar-submenu-link.active{
background: var(--sidebar-active-bg);
    color: var(--sidebar-active-color);
}


.filters-grid,
.form-grid,
.detail-layout,
.two-column-row{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


.field{
    min-width: 0;
}

.actions-row{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.message.error{
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
    color: var(--danger);
}


.table-toolbar,
.table-filter{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.table-actions,
.table-cell-actions{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.table-cell-actions{
    width: 100%;
}


.person-cell{
    min-width: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.person-photo,
.home-profile-avatar{
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700;
    object-fit: cover;
}

.person-photo img,
.home-profile-avatar img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.person-info{
    min-width: 0;
    display: grid;
    gap: 4px;
}

.person-info strong{
    color: var(--text);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.person-info span{
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 450;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.empty-state,
.perfil-publico-empty{
    width: 100%;
    min-height: 120px;
    padding: 34px 22px;
    display: grid;
    place-items: center;
    gap: 8px;
    background: var(--empty-bg);
    border: 1px dashed var(--table-border);
    border-radius: var(--radius-lg);
    color: var(--empty-text);
    text-align: center;
    box-shadow: none;
}

.login-page,
.password-page{
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 18px;
    background: var(--bg);
}

.login-card,
.password-card{
    width: min(460px, 100%);
    padding: 34px;
    display: grid;
    gap: 18px;
}

.login-card h1,
.password-card h1{
    margin: 0;
    color: var(--title-color);
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -0.04em;
}

.login-brand-fallback{
    display: none;
    color: var(--primary);
    font-size: 28px;
    font-weight: 700;
}

.login-brand.logo-error .login-brand-fallback{
    display: block;
}

.requirements,
.user-info{
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    color: var(--text-soft);
}

.requirements ul{
    margin: 8px 0 0;
    padding-left: 18px;
}

@keyframes homeLoadingSpin {
    to{ transform: rotate(360deg); }
}

@keyframes homeLoadingShimmer {
    0%{ background-position: 180% 0; }
    100%{ background-position: -180% 0; }
}

.comunicado-upload-icon,
.app-dialog-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
}

.feedback-modal-backdrop,
.feedback-colaborador-popup-backdrop,
.app-modal-backdrop,
.app-dialog-backdrop{
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    display: grid;
    place-items: center;
    padding: 24px;
    background: color-mix(in srgb, var(--shadow-color) 46%, transparent);
    backdrop-filter: blur(3px);
}

.feedback-modal,
.feedback-colaborador-popup-panel,
.solicitacoes-modal,
.app-modal,
.app-dialog-modal{
    position: relative;
    z-index: var(--z-modal);
}

.feedback-modal,
.feedback-colaborador-popup,
.solicitacoes-modal,
.app-modal,
.app-dialog-modal{
    width: min(920px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.app-dialog-modal{
    width: min(520px, 100%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.app-dialog-modal.danger .app-dialog-icon,
.app-dialog-modal.warning .app-dialog-icon{
    background: var(--danger-soft);
    color: var(--danger);
}

.app-dialog-modal.success .app-dialog-icon{
    background: var(--success-soft);
    color: var(--success);
}

.app-dialog-body p{
    margin: 0;
    color: var(--text-soft);
    line-height: 1.55;
}

.app-dialog-button.danger{
    background: var(--danger);
    border-color: var(--danger);
    color: var(--color-white);
}

.app-dialog-button.danger:hover{
    background: var(--danger-strong);
    border-color: var(--danger-strong);
    color: var(--color-white);
}

.feedback-modal-header,
.feedback-colaborador-popup-header,
.solicitacoes-modal .app-modal-header,
.app-modal-header,
.app-dialog-header{
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface-alt), var(--surface));
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.feedback-colaborador-popup-content,
.solicitacoes-modal .app-modal-body,
.app-modal-body,
.app-dialog-body{
    min-height: 0;
    overflow: auto;
    padding: 22px;
}

.app-modal-footer,
.app-dialog-actions{
    padding: 16px 22px;
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.feedback-modal-close,
.feedback-colaborador-popup-close,
.app-modal-close{
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 999px;
}

.feedback-colaborador-popup-panel{
    width: min(1180px, calc(100vw - 48px));
    max-height: min(820px, calc(100vh - 48px));
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

body > .feedback-colaborador-popup{
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    width: auto;
    max-height: none;
    display: grid;
    place-items: center;
    padding: 24px;
    pointer-events: none;
    overflow: hidden;
}

body > .feedback-colaborador-popup .feedback-colaborador-popup-backdrop,
body > .feedback-colaborador-popup .feedback-colaborador-popup-panel{
    pointer-events: auto;
}

.avatar-large{
    width: 112px;
    height: 112px;
    min-width: 112px;
    border-radius: 999px;
    overflow: hidden;
    display: inline-grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 34px;
    font-weight: 700;
}

.skills-input-row,
.dynamic-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.dynamic-list{
    display: grid;
    gap: 12px;
}

.dynamic-item{
    padding: 14px;
    display: grid;
    gap: 8px;
}

.usuario-perfil-check,
.feedbacks-filter-check{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-right: 12px;
    color: var(--text-soft);
}

.app-dialog-open{
    overflow: hidden;
}

.app-dialog-title-area{
    display: grid;
    gap: 4px;
}

.app-dialog-kicker,
.app-modal-kicker{
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.app-dialog-button{
    min-width: 112px;
}


@media (max-width: 768px) {


.filters-grid,
.form-grid,
.detail-layout,
.two-column-row{
    grid-template-columns: 1fr;
}

.page-header,
.result-header,
.search-title,
.actions-row{
    align-items: stretch;
    flex-direction: column;
}

.actions-row button{
    width: 100%;
}

.login-card,
.password-card{
    padding: 20px;
}

.feedback-modal-backdrop,
.feedback-colaborador-popup-backdrop,
.app-modal-backdrop,
.app-dialog-backdrop{
    padding: 14px;
}
}

.small-button{
    min-height: 38px;
    padding-inline: 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 768px) {
.feedback-colaborador-popup-panel{
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    border-radius: var(--radius-lg);
}
}

a.button:not(.secondary):not(.danger):not(.success),
button.primary,
a.primary,
.btn-primary,
.button-primary,
.colaborador-action-button.primary,
.comunicado-comment-popup-submit{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    gap: 8px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--color-white);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 76, 92, 0.18);
}

a.button:not(.secondary):not(.danger):not(.success):hover,
button.primary:hover,
a.primary:hover,
.btn-primary:hover,
.button-primary:hover,
.colaborador-action-button.primary:hover,
.comunicado-comment-popup-submit:hover,
a.button:not(.secondary):not(.danger):not(.success):focus-visible,
button.primary:focus-visible,
a.primary:focus-visible,
.btn-primary:focus-visible,
.button-primary:focus-visible,
.colaborador-action-button.primary:focus-visible,
.comunicado-comment-popup-submit:focus-visible{
    border-color: var(--button-primary-bg-hover);
    background: var(--button-primary-bg-hover);
    color: var(--color-white);
    transform: translateY(-1px);
}

.section-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.section-header h2,
.section-header p{
    margin: 0;
}

.section-header h2{
    margin-top: 4px;
}

.section-header p:not(.eyebrow){
    color: var(--muted);
}

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

.filter-actions{
    display: flex;
    align-items: end;
    gap: 10px;
}

.checkbox-row{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.checkbox-row input{
    width: 18px;
    height: 18px;
}

.form-message{
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    color: var(--text);
}

.form-message.error{
    border-color: color-mix(in srgb, var(--danger) 36%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

.form-message.success{
    border-color: rgba(22, 163, 74, 0.28);
    background: rgba(22, 163, 74, 0.12);
    color: var(--success);
}

@media (max-width: 768px) {
.section-header,
.filter-actions{
    flex-direction: column;
    align-items: stretch;
}
}

@media (max-width: 1024px) {
.perfil-publico-content{
    grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {
.comunicado-comment-compose{
    grid-template-columns: 1fr;
}

.comunicado-comment-popup-submit{
    width: 100%;
}
}

@keyframes perfilPublicoPulse {
    0%,
80%,
100%{ transform: translateY(0); opacity: .48; }
    40%{ transform: translateY(-9px); opacity: 1; }
}

@media (max-width: 768px) {
.home-summary-metric{
    min-height: 62px;
}
}

@keyframes perfilPublicoQuestionFloat {
    0%,
100%{ transform: translateY(0) rotate(0deg); }
    45%{ transform: translateY(-8px) rotate(-3deg); }
}

@keyframes perfilPublicoQuestionRing {
    0%{ opacity: .52; transform: scale(.86); }
    100%{ opacity: 0; transform: scale(1.18); }
}

@keyframes facRestartSpin {
    from{
        transform: rotate(0deg);
    }

    to{
        transform: rotate(360deg);
    }
}

.app-modal-subtitle{
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.app-modal-lg,
.popup-content-lg,
.modal-content-lg,
.comunicado-comments-modal,
.solicitacoes-modal{
    width: 96vw;
    max-width: 96vw;
    height: 96vh;
    max-height: 96vh;
}

@media (max-width: 768px) {
.app-modal-lg,
.popup-content-lg,
.modal-content-lg,
.comunicado-comments-modal,
.solicitacoes-modal{
    width: 96vw;
    max-width: 96vw;
}
}

.app-chat{
    min-width: 0;
    display: grid;
    gap: 18px;
}

.app-chat-list{
    min-width: 0;
    display: grid;
    gap: 12px;
    padding-right: 4px;
}

.app-chat-item{
    min-width: 0;
}

.app-chat-main{
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
}

.app-chat-content{
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.app-chat-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.app-chat-author{
    color: var(--text);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.app-chat-role,
.app-chat-date{
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.app-chat-date{
    flex: 0 0 auto;
    text-align: right;
}

.app-chat-message{
    margin-top: 10px;
    color: var(--text);
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.app-chat-actions{
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.app-chat-reply-button,
.app-chat-toggle-replies,
.app-chat-edit-button,
.app-chat-delete-button,
.app-chat-reply-context button{
    width: auto;
    min-height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.app-chat-reply-button:hover,
.app-chat-reply-button:focus-visible,
.app-chat-toggle-replies:hover,
.app-chat-toggle-replies:focus-visible,
.app-chat-edit-button:hover,
.app-chat-edit-button:focus-visible,
.app-chat-delete-button:hover,
.app-chat-delete-button:focus-visible,
.app-chat-reply-context button:hover,
.app-chat-reply-context button:focus-visible{
    color: var(--primary);
    text-decoration: underline;
    outline: none;
}

.app-chat-replies{
    display: grid;
    gap: 10px;
    margin-top: 12px;
    margin-left: 28px;
    padding-left: 18px;
    border-left: 2px solid var(--border);
}

.app-chat-reply-item .app-chat-main{
    grid-template-columns: 42px minmax(0, 1fr);
}

.app-chat-reply-item .app-chat-content{
    background: var(--surface-alt);
}

.app-chat-empty{
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    text-align: center;
}

.app-chat-error{
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--border));
    border-radius: var(--radius-md);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 13px;
    line-height: 1.45;
}

.app-chat-reply-context{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 13px;
    font-weight: 650;
}

.app-chat-form{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.app-chat-textarea{
    min-height: 44px;
    max-height: 180px;
    resize: none;
    overflow: hidden;
}

.app-chat-submit{
    width: 112px;
    min-height: 42px;
    padding: 0 14px;
}

/* Ações sociais compartilhadas */
body .social-actions{
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

body .social-action-group{
    min-width: 0;
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

body .social-action-btn,
body .social-action-count{
    width: auto;
    min-width: 0;
    height: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-soft);
    box-shadow: none;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    transform: none;
}

body .social-action-count{
    min-width: 38px;
    padding-inline: 10px;
    border-left: 1px solid var(--border-soft);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

body .social-action-btn:hover,
body .social-action-btn:focus-visible,
body .social-action-count:hover,
body .social-action-count:focus-visible{
    background: var(--primary-subtle);
    color: var(--primary);
    box-shadow: none;
    outline: none;
    transform: none;
}

body .social-action-btn.is-active,
body .social-action-btn.is-liked,
body .social-action-btn.liked{
    background: var(--primary-soft);
    color: var(--primary);
}

body .social-action-btn:disabled,
body .social-action-count:disabled{
    cursor: not-allowed;
    opacity: 0.56;
}

body .social-action-btn__icon,
body .social-action-btn__icon svg{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: block;
}

body .social-action-btn__icon svg{
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body .social-action-btn__count{
    color: inherit;
    font-variant-numeric: tabular-nums;
}

body .social-actions--compact{
    gap: 6px;
}

body .social-actions--compact .social-action-group{
    box-shadow: none;
}

body .social-actions--compact > .social-action-btn{
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: none;
}

body .social-actions--compact > .social-action-btn:hover,
body .social-actions--compact > .social-action-btn:focus-visible{
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
    background: var(--primary-subtle);
}

body .social-actions--compact > .social-action-btn.is-active,
body .social-actions--compact > .social-action-btn.liked{
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
    background: var(--primary-soft);
}

body .social-actions--compact .social-action-btn{
    padding-inline: 10px;
}

.social-comments-panel{
    min-width: 0;
}

.social-comment-item{
    min-width: 0;
}

.social-comment-reply{
    min-width: 0;
}

@media (max-width: 768px) {
.app-chat-main{
    grid-template-columns: 44px minmax(0, 1fr);
}

.app-chat-header,
.app-chat-form{
    grid-template-columns: 1fr;
}

.app-chat-form{
    display: grid;
}

.app-chat-submit{
    width: 100%;
}

.app-chat-replies{
    margin-left: 14px;
    padding-left: 12px;
}

body .social-actions{
    align-items: stretch;
}

body .social-action-group{
    flex: 1 1 150px;
}

body .social-action-btn{
    flex: 1 1 auto;
}
}

@keyframes homeFacMascotPremiumFloat {
    0%{
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50%{
        transform: translate3d(0, -7px, 0) rotate(-0.6deg);
    }

    100%{
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

[data-item-list="RESPONSABILIDADE"]{
    flex-direction: column;
    align-items: stretch;
}


.app-person-cell{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.app-person-avatar{
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.app-person-info{
    display: grid;
    gap: 2px;
    min-width: 0;
}

.app-person-info strong{
    color: var(--title-color);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.app-person-info span{
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.25;
}

.app-person-photo{
    width: 34px;
    min-width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
}

.app-person-avatar.is-fallback-hidden{
    display: none;
}

.button-icon{
    width: 17px;
    min-width: 17px;
    height: 17px;
    display: inline-block;
}

button .button-icon,
.button-primary .button-icon,
.button-secondary .button-icon{
    margin-right: 8px;
    vertical-align: -3px;
}

.app-chart-list{
    display: grid;
    gap: 12px;
}

.app-chart-card{
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.app-chart-card-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.app-chart-title{
    margin: 0;
    color: var(--title-color);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.app-chart-row{
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr) 80px;
    gap: 12px;
    align-items: center;
}

.app-chart-row > span:first-child{
    min-width: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.app-chart-bar{
    height: 10px;
    border-radius: 999px;
    background: var(--surface-alt);
    overflow: hidden;
}

.app-chart-bar-fill{
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.app-chart-w-0{
    width: 0%;
}

.app-chart-w-10{
    width: 10%;
}

.app-chart-w-20{
    width: 20%;
}

.app-chart-w-30{
    width: 30%;
}

.app-chart-w-40{
    width: 40%;
}

.app-chart-w-50{
    width: 50%;
}

.app-chart-w-60{
    width: 60%;
}

.app-chart-w-70{
    width: 70%;
}

.app-chart-w-80{
    width: 80%;
}

.app-chart-w-90{
    width: 90%;
}

.app-chart-w-100{
    width: 100%;
}

.app-chart-value{
    color: var(--title-color);
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

@media (max-width: 1024px) {
.app-chart-row{
    grid-template-columns: 1fr;
    gap: 8px;
}

.app-chart-value{
    text-align: left;
}
}

.app-chart-type{
    display: inline-flex;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-chart-subtitle{
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

.app-chart-svg-wrap{
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: 8px 0 2px;
}

.app-chart-svg{
    width: 100%;
    min-width: 620px;
    height: auto;
    display: block;
}

.app-chart-svg-axis{
    stroke: var(--border);
    stroke-width: 1.4;
}

.app-chart-svg-bar{
    fill: var(--primary);
    opacity: 0.9;
}

.app-chart-svg-data-label,
.app-chart-svg-axis-label,
.app-chart-average-label,
.app-chart-pie-total,
.app-chart-pie-caption{
    font-family: inherit;
    fill: var(--text);
}

.app-chart-svg-data-label{
    font-size: 12px;
    font-weight: 650;
}

.app-chart-svg-axis-label{
    font-size: 12px;
    font-weight: 400;
    fill: var(--text-muted);
}

.app-chart-average-line{
    stroke: var(--text-muted);
    stroke-width: 1.6;
    stroke-dasharray: 6 6;
}

.app-chart-average-label{
    font-size: 12px;
    font-weight: 650;
    fill: var(--text-muted);
}

.app-chart-pie-layout{
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(240px, 1fr);
    align-items: center;
    gap: 18px;
}

.app-chart-pie-wrap{
    display: grid;
    place-items: center;
}

.app-chart-pie{
    width: min(260px, 100%);
    height: auto;
    display: block;
}

.app-chart-pie-slice{
    stroke: var(--surface);
    stroke-width: 3;
}

.app-chart-pie-slice-1,
.app-chart-pie-dot-1{
    fill: var(--primary);
    background: var(--primary);
}

.app-chart-pie-slice-2,
.app-chart-pie-dot-2{
    fill: var(--text-muted);
    background: var(--text-muted);
}

.app-chart-pie-empty{
    fill: var(--surface-alt);
    stroke: var(--border);
}

.app-chart-pie-hole{
    fill: var(--surface);
}

.app-chart-pie-total{
    font-size: 34px;
    font-weight: 650;
    fill: var(--title-color);
}

.app-chart-pie-caption{
    font-size: 12px;
    font-weight: 400;
    fill: var(--text-muted);
}

.app-chart-pie-legend{
    display: grid;
    gap: 10px;
}

.app-chart-pie-legend-row{
    min-height: 42px;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
}

.app-chart-pie-legend-row strong{
    min-width: 0;
    color: var(--title-color);
    font-size: 13px;
    font-weight: 650;
}

.app-chart-pie-legend-row span:last-child{
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
}

.app-chart-pie-dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.app-chart-enps{
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 10px;
}

.app-chart-enps article{
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
}

.app-chart-enps span{
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}

.app-chart-enps strong{
    color: var(--title-color);
    font-size: 20px;
    font-weight: 650;
}

.app-chart-list-compact{
    margin-top: 4px;
}

.app-chart-text-open{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
}

.app-chart-text-open-number{
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 22px;
    font-weight: 650;
}

.app-chart-text-open strong{
    color: var(--title-color);
    font-size: 14px;
    font-weight: 650;
}

.app-chart-text-open p{
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

@media (max-width: 1024px) {
.app-chart-enps{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 640px) {
.app-chart-svg{
    min-width: 560px;
}

.app-chart-enps,
.app-chart-text-open{
    grid-template-columns: 1fr;
}
}

.app-sidebar-brand,
.sidebar-brand{
    height: var(--sidebar-brand-height);
    min-height: var(--sidebar-brand-height);
    max-height: var(--sidebar-brand-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--sidebar-section-divider);
    overflow: hidden;
}

.app-sidebar-logo,
.sidebar-logo{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
}

.app-sidebar-logo:hover,
.app-sidebar-logo:focus-visible,
.sidebar-logo:hover,
.sidebar-logo:focus-visible{
    background: transparent;
    border-color: transparent;
    color: inherit;
    transform: none;
}

.app-sidebar-logo img,
.sidebar-logo img{
    display: block;
    width: auto;
    height: auto;
    max-width: 82%;
    max-height: 38px;
    object-fit: contain;
}

/* O shell e sua tipografia são controlados por mindz_structure.css. */


.app-modal-header,
.app-dialog-header,
.modal-header,
.popup-header,
.feedback-modal-header,
.feedback-colaborador-popup-header,
.comunicado-comments-modal .app-modal-header,
.solicitacoes-modal .app-modal-header{
    min-height: auto;
    padding: 14px 18px;
    gap: 10px 14px;
    align-items: center;
}

.app-modal-header > div,
.app-dialog-header > div,
.modal-header > div,
.popup-header > div,
.feedback-modal-header > div,
.feedback-colaborador-popup-header > div{
    min-width: 0;
    display: grid;
    gap: 2px;
}

.app-modal-header h1,
.app-modal-header h2,
.app-modal-header h3,
.app-dialog-header h1,
.app-dialog-header h2,
.app-dialog-header h3,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.popup-header h1,
.popup-header h2,
.popup-header h3,
.app-dialog-title,
.feedback-modal-title h2,
.feedback-colaborador-popup-header h2{
    margin: 0;
    font-size: 18px;
    line-height: 1.22;
    letter-spacing: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.app-modal-header > div > p,
.app-modal-header > div > span,
.app-dialog-header > div > p,
.app-dialog-header > div > span,
.modal-header > div > p,
.modal-header > div > span,
.popup-header > div > p,
.popup-header > div > span,
.feedback-colaborador-popup-header p{
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.3;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


.table-sort-label{
    color: var(--table-header-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.table-sort-indicator,
.usuarios-sort-indicator,
[data-sort-icon],
[data-sort-indicator]{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 12px;
    height: 1em;
    margin-left: 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

@media (max-width: 768px) {
.app-modal-header,
.app-dialog-header,
.modal-header,
.popup-header,
.feedback-modal-header{
    padding: 12px 14px;
}
}


.table-sort-label{
    font-weight: 500;
}

.table-sort-indicator{
    font-weight: 600;
}

.comunicado-social-icon-button,
.comunicado-like-button,
.comunicado-comment-shortcut-button{
    border-color: var(--button-secondary-border);
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

.comunicado-social-icon-button:hover,
.comunicado-like-button:hover,
.comunicado-comment-shortcut-button:hover{
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

.comunicado-like-button.liked{
    border-color: var(--primary);
    background: var(--primary);
    color: var(--button-primary-text);
}

.comunicado-social-link-button{
    color: var(--primary);
    font-weight: 500;
}

:root[data-theme="dark"] .page-header,
:root[data-theme="dark"] .result-header,
:root[data-theme="dark"] .search-title{
background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-xs);
}


/* =========================================================
   TEMA CLEAN INSPIRADO NO LAYOUT DE REFERÊNCIA
   - Tipografia mais leve
   - Textos em cinza neutro
   - Roxo como cor de ação/ênfase
   ========================================================= */
body{
    color: var(--text);
    font-weight: 400;
    letter-spacing: -0.006em;
}

h1,
h2,
h3,
h4,
.page-header h1,
.page-header h2,
.section-header h2,
.section-title{
    color: var(--title-color);
    font-weight: 600;
}

p,
span,
small,
label,
.subtitle,
.page-header p,
.section-header p:not(.eyebrow){
    color: inherit;
}

button,
.btn,
.button-primary,
.button-secondary,
.button-danger{
    font-weight: 500;
}


:root:not([data-theme="dark"]) .page-header,
:root:not([data-theme="dark"]) .result-header,
:root:not([data-theme="dark"]) .search-title{
background: var(--surface);
}


/* =========================================================
   People Hub - Tabbar global premium com ícones SVG
   Aplicação visual para tabs do sistema sem alterar regras de negócio.
   ========================================================= */
:where(.tabs, .feedbacks-tabs, .app-tabs, .tabbar, .perfil-tabs, .colaborador-trajetoria-tabs){
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 92%, var(--surface-alt));
    box-shadow: var(--shadow-xs);
    overflow-x: auto;
}

:where(.tab-button, .feedback-tab, .app-tab, .tabbar-button, .colaborador-trajetoria-tab){
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

:where(.tab-button, .feedback-tab, .app-tab, .tabbar-button, .colaborador-trajetoria-tab):hover,
:where(.tab-button, .feedback-tab, .app-tab, .tabbar-button, .colaborador-trajetoria-tab):focus-visible{
    background: color-mix(in srgb, var(--primary-soft) 30%, transparent);
    color: var(--primary);
}

:where(.tab-button.active, .tab-button.is-active, .feedback-tab.active, .feedback-tab.is-active, .app-tab.active, .app-tab.is-active, .tabbar-button.active, .tabbar-button.is-active, .colaborador-trajetoria-tab.is-active, .colaborador-trajetoria-tab[aria-selected="true"]){
    background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
    color: var(--primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 9%, transparent);
}

:where(.tab-button[data-tab], .feedback-tab[data-filtro])::before{
    content: "";
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    display: inline-block;
    background: currentColor;
    -webkit-mask: var(--ph-tab-icon) center / contain no-repeat;
    mask: var(--ph-tab-icon) center / contain no-repeat;
}

.tab-button[data-tab="perfil"]{ --ph-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5.5 20c.75-3.2 3.25-5 6.5-5s5.75 1.8 6.5 5'/%3E%3C/svg%3E"); }
.tab-button[data-tab="habilidades"]{ --ph-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.2 4.45 4.9.7-3.55 3.45.85 4.85L12 14.65l-4.4 2.3.85-4.85L4.9 8.65l4.9-.7z'/%3E%3C/svg%3E"); }
.tab-button[data-tab="contatos"]{ --ph-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2.5'/%3E%3Cpath d='m5.5 7 6.5 5 6.5-5'/%3E%3C/svg%3E"); }
.tab-button[data-tab="educacao"]{ --ph-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 8.5-4 8.5 4-8.5 4z'/%3E%3Cpath d='M6.5 10.5v4.2c1.6 2 9.4 2 11 0v-4.2'/%3E%3C/svg%3E"); }
.tab-button[data-tab="seguranca"]{ --ph-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 19 6v5.2c0 4.2-2.7 7.6-7 9.3-4.3-1.7-7-5.1-7-9.3V6z'/%3E%3Cpath d='m8.8 12 2.1 2.1 4.4-4.5'/%3E%3C/svg%3E"); }
.feedback-tab[data-filtro="recebidos"]{ --ph-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5a3.5 3.5 0 0 1-3.5 3.5H8l-4 3V7.5A3.5 3.5 0 0 1 7.5 4h9A3.5 3.5 0 0 1 20 7.5z'/%3E%3Cpath d='M8 9h8'/%3E%3Cpath d='M8 12.5h5'/%3E%3C/svg%3E"); }
.feedback-tab[data-filtro="enviados"]{ --ph-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h13'/%3E%3Cpath d='m12 7 5 5-5 5'/%3E%3Cpath d='M4 5.5h16v13H4z'/%3E%3C/svg%3E"); }
.feedback-tab[data-filtro="todos"]{ --ph-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6h12'/%3E%3Cpath d='M6 12h12'/%3E%3Cpath d='M6 18h12'/%3E%3C/svg%3E"); }

/* =========================================================
   PEOPLE HUB — acabamento visual sistêmico
   Leitura confortável, contraste equilibrado e superfícies leves.
   ========================================================= */

html{
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body{
    line-height: 1.5;
}

:where(h1, h2, h3, h4, h5, h6){
    color: var(--title-color);
    font-weight: 600;
    letter-spacing: -0.025em;
    text-wrap: balance;
}


:where(a, button, input, select, textarea){
    transition: color 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

:where(button, .btn, .button, [class*="button"]){
    letter-spacing: -0.006em;
}

:where(input, select, textarea){
    color: var(--input-text);
    border-color: var(--input-border);
    background-color: var(--input-bg);
}

:where(input, select, textarea):hover:not(:disabled){
    border-color: var(--border-strong);
}

:where(input, select, textarea):focus{
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}


:where(.button-primary, .btn-primary, button.primary){
    box-shadow: 0 6px 16px rgba(83, 96, 158, 0.14);
}

:where(.button-primary, .btn-primary, button.primary):hover:not(:disabled){
    box-shadow: 0 8px 20px rgba(83, 96, 158, 0.2);
    transform: translateY(-1px);
}

:where(.button-secondary, .btn-secondary, button.secondary){
    box-shadow: var(--shadow-xs);
}


::selection{
    background: color-mix(in srgb, var(--primary) 24%, transparent);
    color: var(--title-color);
}

@media (prefers-reduced-motion: reduce) {
    *,
*::before,
*::after{
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}


/* Enviar feedback em popup: painel mais largo para comportar modelos orientativos. */
body > .feedback-colaborador-popup .feedback-colaborador-popup-panel{
    width: min(1380px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    max-height: min(900px, calc(100dvh - 40px));
}

.app-chat-input-row{
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.app-chat-attachment-bar{
    width: 100%;
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.app-chat-attach-button{
    width: fit-content;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-alt);
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.app-chat-attach-button:hover,
.app-chat-attach-button:focus-within{
    background: var(--primary-soft);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    color: var(--primary);
}

.app-chat-attach-button input{
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.app-chat-attachment-list.hidden{
    display: none;
}

.app-chat-selected-files{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.app-chat-selected-file{
    max-width: 100%;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
}

.app-chat-selected-file strong{
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
}

.app-chat-selected-file small{
    color: var(--muted);
    font-weight: 600;
}

.app-chat-clear-attachments{
    min-height: 30px;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.app-chat-clear-attachments:hover,
.app-chat-clear-attachments:focus-visible{
    color: var(--danger);
    background: var(--danger-soft);
}

.app-chat-message-link{
    color: var(--primary);
    font-weight: 650;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.app-chat-message-link:hover,
.app-chat-message-link:focus-visible{
    text-decoration: underline;
}

.app-chat-message-attachments{
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.app-chat-message-attachment{
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    color: var(--text);
    text-decoration: none;
}

.app-chat-message-attachment strong{
    overflow-wrap: anywhere;
    font-size: 12px;
    font-weight: 650;
}

.app-chat-message-attachment:hover,
.app-chat-message-attachment:focus-visible{
    border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
    background: var(--primary-soft);
    color: var(--primary);
}


.app-chat-form{
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}


/* =========================================================
   Microinterações globais premium
   - Ícones com balanço sutil em hovers/foco
   - Cards com profundidade mais elegante
   ========================================================= */

:root{
--ph-icon-hover-raise: translateY(-1px) scale(1.04);
    --ph-icon-hover-shadow: 0 12px 22px color-mix(in srgb, var(--shadow-color) 12%, transparent);
    --ph-icon-hover-shadow-dark: 0 14px 24px color-mix(in srgb, var(--color-black) 28%, transparent);
}

@keyframes phGlobalIconWiggle {
    0%{ transform: rotate(0deg) scale(1); }
    18%{ transform: rotate(-10deg) scale(1.06); }
    38%{ transform: rotate(8deg) scale(1.08); }
    56%{ transform: rotate(-6deg) scale(1.05); }
    74%{ transform: rotate(4deg) scale(1.03); }
    100%{ transform: rotate(0deg) scale(1); }
}

:where(.social-action-btn__icon, .comunicado-social-icon-button, .comemoracoes-social-icon-button, .app-modal-close, .feedback-modal-close, .feedback-colaborador-popup-close, .feedback-interaction-popup-close, .solicitacoes-modal-close, .solicitacao-detalhe-close, .gv-dialog-close, .ph-toast__icon, .ph-toast__close, .field-clear-button, .clima-icon-button, .home-summary-metric-icon, .solicitacoes-status-icon, .solicitacoes-attachment-icon){
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}


/* MindZ: estilos globais antigos de tabela removidos.
   O padrão único agora fica em assets/css/mindz_tables_global.css,
   carregado por último e baseado na tela de Colaboradores. */

:where(.social-action-btn__icon svg, .comunicado-social-icon-button svg, .comemoracoes-social-icon-button svg, .app-modal-close svg, .feedback-modal-close svg, .feedback-colaborador-popup-close svg, .feedback-interaction-popup-close svg, .solicitacoes-modal-close svg, .solicitacao-detalhe-close svg, .gv-dialog-close svg, .ph-toast__icon svg, .ph-toast__close svg, .field-clear-button svg, .clima-icon-button svg, .home-summary-metric-icon svg, .solicitacoes-status-icon svg, .solicitacoes-attachment-icon svg){
    transform-origin: 50% 72%;
    transition: transform 0.2s ease;
    will-change: transform;
}

:where(.social-action-btn:hover .social-action-btn__icon, .social-action-btn:focus-visible .social-action-btn__icon, .social-action-btn:focus-within .social-action-btn__icon, .comunicado-social-icon-button:hover, .comunicado-social-icon-button:focus-visible, .comemoracoes-social-icon-button:hover, .comemoracoes-social-icon-button:focus-visible, .app-modal-close:hover, .app-modal-close:focus-visible, .feedback-modal-close:hover, .feedback-modal-close:focus-visible, .feedback-colaborador-popup-close:hover, .feedback-colaborador-popup-close:focus-visible, .feedback-interaction-popup-close:hover, .feedback-interaction-popup-close:focus-visible, .solicitacoes-modal-close:hover, .solicitacoes-modal-close:focus-visible, .solicitacao-detalhe-close:hover, .solicitacao-detalhe-close:focus-visible, .gv-dialog-close:hover, .gv-dialog-close:focus-visible, .ph-toast__close:hover, .ph-toast__close:focus-visible, .field-clear-button:hover, .field-clear-button:focus-visible, .clima-icon-button:hover, .clima-icon-button:focus-visible, .solicitacoes-user-metric-card:hover .home-summary-metric-icon, .solicitacoes-user-metric-card:focus-within .home-summary-metric-icon, .solicitacoes-user-status-card:hover .solicitacoes-status-icon, .solicitacoes-user-status-card:focus-within .solicitacoes-status-icon, .solicitacoes-attachment-chip:hover .solicitacoes-attachment-icon, .solicitacoes-attachment-chip:focus-within .solicitacoes-attachment-icon){
    transform: var(--ph-icon-hover-raise);
    box-shadow: var(--ph-icon-hover-shadow);
}

:root[data-theme="dark"] :where(.social-action-btn:hover .social-action-btn__icon, .social-action-btn:focus-visible .social-action-btn__icon, .social-action-btn:focus-within .social-action-btn__icon, .comunicado-social-icon-button:hover, .comunicado-social-icon-button:focus-visible, .comemoracoes-social-icon-button:hover, .comemoracoes-social-icon-button:focus-visible, .app-modal-close:hover, .app-modal-close:focus-visible, .feedback-modal-close:hover, .feedback-modal-close:focus-visible, .feedback-colaborador-popup-close:hover, .feedback-colaborador-popup-close:focus-visible, .feedback-interaction-popup-close:hover, .feedback-interaction-popup-close:focus-visible, .solicitacoes-modal-close:hover, .solicitacoes-modal-close:focus-visible, .solicitacao-detalhe-close:hover, .solicitacao-detalhe-close:focus-visible, .gv-dialog-close:hover, .gv-dialog-close:focus-visible, .ph-toast__close:hover, .ph-toast__close:focus-visible, .field-clear-button:hover, .field-clear-button:focus-visible, .clima-icon-button:hover, .clima-icon-button:focus-visible, .solicitacoes-user-metric-card:hover .home-summary-metric-icon, .solicitacoes-user-metric-card:focus-within .home-summary-metric-icon, .solicitacoes-user-status-card:hover .solicitacoes-status-icon, .solicitacoes-user-status-card:focus-within .solicitacoes-status-icon, .solicitacoes-attachment-chip:hover .solicitacoes-attachment-icon, .solicitacoes-attachment-chip:focus-within .solicitacoes-attachment-icon){
box-shadow: var(--ph-icon-hover-shadow-dark);
}

:where(.social-action-btn:hover .social-action-btn__icon svg, .social-action-btn:focus-visible .social-action-btn__icon svg, .social-action-btn:focus-within .social-action-btn__icon svg, .comunicado-social-icon-button:hover svg, .comunicado-social-icon-button:focus-visible svg, .comemoracoes-social-icon-button:hover svg, .comemoracoes-social-icon-button:focus-visible svg, .app-modal-close:hover svg, .app-modal-close:focus-visible svg, .feedback-modal-close:hover svg, .feedback-modal-close:focus-visible svg, .feedback-colaborador-popup-close:hover svg, .feedback-colaborador-popup-close:focus-visible svg, .feedback-interaction-popup-close:hover svg, .feedback-interaction-popup-close:focus-visible svg, .solicitacoes-modal-close:hover svg, .solicitacoes-modal-close:focus-visible svg, .solicitacao-detalhe-close:hover svg, .solicitacao-detalhe-close:focus-visible svg, .gv-dialog-close:hover svg, .gv-dialog-close:focus-visible svg, .ph-toast__close:hover svg, .ph-toast__close:focus-visible svg, .field-clear-button:hover svg, .field-clear-button:focus-visible svg, .clima-icon-button:hover svg, .clima-icon-button:focus-visible svg, .solicitacoes-user-metric-card:hover .home-summary-metric-icon svg, .solicitacoes-user-metric-card:focus-within .home-summary-metric-icon svg, .solicitacoes-user-status-card:hover .solicitacoes-status-icon svg, .solicitacoes-user-status-card:focus-within .solicitacoes-status-icon svg, .solicitacoes-attachment-chip:hover .solicitacoes-attachment-icon svg, .solicitacoes-attachment-chip:focus-within .solicitacoes-attachment-icon svg){
    animation: phGlobalIconWiggle 620ms cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}


@media (prefers-reduced-motion: reduce) {
    :where(.social-action-btn__icon, .comunicado-social-icon-button, .comemoracoes-social-icon-button, .app-modal-close, .feedback-modal-close, .feedback-colaborador-popup-close, .feedback-interaction-popup-close, .solicitacoes-modal-close, .solicitacao-detalhe-close, .gv-dialog-close, .ph-toast__icon, .ph-toast__close, .field-clear-button, .clima-icon-button, .home-summary-metric-icon, .solicitacoes-status-icon, .solicitacoes-attachment-icon, .social-action-btn__icon svg, .comunicado-social-icon-button svg, .comemoracoes-social-icon-button svg, .app-modal-close svg, .feedback-modal-close svg, .feedback-colaborador-popup-close svg, .feedback-interaction-popup-close svg, .solicitacoes-modal-close svg, .solicitacao-detalhe-close svg, .gv-dialog-close svg, .ph-toast__icon svg, .ph-toast__close svg, .field-clear-button svg, .clima-icon-button svg, .home-summary-metric-icon svg, .solicitacoes-status-icon svg, .solicitacoes-attachment-icon svg, .card, .app-card, .metric-card, .summary-card, .kpi-card, .panel, .result-card, .table-card, .filter-card, .list-card){
        animation: none;
        transition: none;
        transform: none;
    }
}


/* =========================================================
   Premium global - fase 2
   - cabeçalhos, filtros, tabelas, modais, estados vazios e botões
   ========================================================= */

:root{
--ph-premium-surface-soft: color-mix(in srgb, var(--surface-alt) 86%, transparent);
    --ph-premium-surface-muted: color-mix(in srgb, var(--surface) 94%, var(--surface-alt) 6%);
    --ph-premium-border-soft: color-mix(in srgb, var(--border) 76%, transparent);
    --ph-premium-glow: 0 20px 46px color-mix(in srgb, var(--shadow-color) 8%, transparent);
    --ph-premium-glow-dark: 0 24px 54px color-mix(in srgb, var(--color-black) 26%, transparent);
}

:where(.page-header, .module-header, .result-header, .section-hero, .hero-card){
    position: relative;
    overflow: hidden;
    padding: 22px 24px;
    border: 1px solid var(--ph-premium-border-soft);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-alt) 94%, transparent));
    box-shadow: var(--shadow-xs);
}

:where(.page-header, .module-header, .result-header, .section-hero, .hero-card)::before{
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 20%, transparent));
    opacity: 0.86;
}

:where(.page-header h1, .page-header h2, .module-header h1, .module-header h2, .result-header h1, .result-header h2, .section-hero h1, .section-hero h2, .hero-card h1, .hero-card h2){
    letter-spacing: -0.03em;
}

:where(.page-header p, .module-header p, .result-header p, .section-hero p, .hero-card p){
    max-width: 72ch;
    color: var(--text-soft);
}

:where(.section-header, .card-header, .list-header, .table-header){
    align-items: flex-start;
    gap: 8px;
}

:where(.section-header h2, .card-header h2, .list-header h2, .table-header h2){
    letter-spacing: -0.02em;
}


:where(input, select, textarea){
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-white) 5%, transparent);
}

:where(input, select, textarea):hover:not(:disabled){
    border-color: color-mix(in srgb, var(--primary) 22%, var(--input-border));
    background: color-mix(in srgb, var(--input-bg) 96%, var(--surface) 4%);
}

:where(input, select, textarea):focus,
:where(input, select, textarea):focus-visible{
    border-color: color-mix(in srgb, var(--primary) 36%, var(--input-border));
    background: color-mix(in srgb, var(--input-bg) 94%, var(--surface) 6%);
}

:where(.button-primary, .btn-primary, button.primary){
    background: linear-gradient(180deg, color-mix(in srgb, var(--button-primary-bg) 96%, white 4%), var(--button-primary-bg));
    box-shadow: 0 12px 24px color-mix(in srgb, var(--button-primary-bg) 22%, transparent);
}

:where(.button-primary, .btn-primary, button.primary):hover:not(:disabled){
    box-shadow: 0 16px 30px color-mix(in srgb, var(--button-primary-bg) 28%, transparent);
}

:where(.button-secondary, .btn-secondary, button.secondary, .button-ghost, .btn-ghost){
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-white) 18%, transparent);
}

:where(.button-secondary, .btn-secondary, button.secondary, .button-ghost, .btn-ghost):hover:not(:disabled){
    box-shadow: 0 10px 22px color-mix(in srgb, var(--shadow-color) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-white) 18%, transparent);
}


:where(.feedback-modal-backdrop, .app-modal-backdrop, .modal-backdrop, .solicitacoes-modal-backdrop, .app-dialog-backdrop){
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--modal-backdrop) 94%, black 6%);
}

:where(.app-modal, .modal, .feedback-modal, .solicitacoes-modal, .app-dialog-modal, .modal-content, .comunicado-comments-modal){
    border: 1px solid var(--ph-premium-border-soft);
    border-radius: calc(var(--radius-xl) + 2px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-alt) 96%, transparent));
    box-shadow: var(--ph-premium-glow);
}

:root[data-theme="dark"] :where(.app-modal, .modal, .feedback-modal, .solicitacoes-modal, .app-dialog-modal, .modal-content, .comunicado-comments-modal){
box-shadow: var(--ph-premium-glow-dark);
}

:where(.app-modal-header, .modal-header, .feedback-modal-header, .solicitacoes-modal .app-modal-header, .comunicado-comments-modal .app-modal-header){
    padding: 20px 22px 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 86%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
}

:where(.app-modal-body, .modal-body, .feedback-modal-body, .solicitacoes-modal .app-modal-body){
    padding: 18px 22px 20px;
}

:where(.app-modal-footer, .modal-footer, .feedback-modal-footer){
    padding: 16px 22px 20px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-alt) 94%, transparent));
}


:root[data-theme="dark"] :where(.page-header, .module-header, .result-header, .section-hero, .hero-card){
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, color-mix(in srgb, var(--primary) 4%, transparent)), color-mix(in srgb, var(--surface-alt) 95%, transparent));
}

@media (max-width: 768px) {
    :where(.page-header, .module-header, .result-header, .section-hero, .hero-card){
        padding: 18px;
    }


    :where(.app-modal-header, .modal-header, .feedback-modal-header, .solicitacoes-modal .app-modal-header, .comunicado-comments-modal .app-modal-header),
:where(.app-modal-body, .modal-body, .feedback-modal-body, .solicitacoes-modal .app-modal-body),
:where(.app-modal-footer, .modal-footer, .feedback-modal-footer){
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* =========================================================
   Premium global - fase 3
   - tabelas premium avançadas
   - filtros ultra premium
   - modais executivos
   - padronização visual avançada dos cards
   ========================================================= */


/* -----------------------------
   Cards globais mais consistentes
   ----------------------------- */


/* -----------------------------
   Tabelas premium avançadas
   ----------------------------- */


/* -----------------------------
   Modais executivos
   ----------------------------- */
:where(.app-modal, .modal, .feedback-modal, .solicitacoes-modal, .app-dialog-modal, .modal-content, .comunicado-comments-modal){
    border-radius: 28px;
    overflow: hidden;
}

:where(.app-modal-header, .modal-header, .feedback-modal-header, .solicitacoes-modal .app-modal-header, .comunicado-comments-modal .app-modal-header){
    position: relative;
    gap: 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
}

:where(.app-modal-header, .modal-header, .feedback-modal-header, .solicitacoes-modal .app-modal-header, .comunicado-comments-modal .app-modal-header)::before{
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 18%, transparent));
}

:where(.app-modal-header h1, .app-modal-header h2, .app-modal-header h3, .modal-header h1, .modal-header h2, .modal-header h3, .feedback-modal-header h1, .feedback-modal-header h2, .feedback-modal-header h3){
    letter-spacing: -0.03em;
}

:where(.app-modal-body, .modal-body, .feedback-modal-body, .solicitacoes-modal .app-modal-body){
    max-height: min(72vh, 820px);
    overflow: auto;
}

:where(.app-modal-footer, .modal-footer, .feedback-modal-footer){
    border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

:where(.app-modal-close, .feedback-modal-close, .solicitacoes-modal-close, .solicitacao-detalhe-close){
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--surface-alt) 92%, transparent);
}

/* -----------------------------
   Estados vazios mais nobres
   ----------------------------- */


:where(.empty-state p, .table-empty p, .no-results p, .estado-vazio p, .app-chat-empty p, .app-chart-pie-empty p){
    max-width: 54ch;
    
    
}

/* -----------------------------
   Responsividade segura
   ----------------------------- */
@media (max-width: 768px) {
    


    :where(.app-modal, .modal, .feedback-modal, .solicitacoes-modal, .app-dialog-modal, .modal-content, .comunicado-comments-modal){
        border-radius: 22px;
    }
}


/* =========================================================
   Premium global - fase 4
   - dark mode impecável
   - formulários premium
   - listagens e detalhes com acabamento final
   - microacabamentos de scroll, seleção, skeleton e chat
   ========================================================= */

:root{
--ph-focus-soft: color-mix(in srgb, var(--primary) 14%, transparent);
    --ph-focus-strong: color-mix(in srgb, var(--primary) 34%, transparent);
    --ph-surface-tint: color-mix(in srgb, var(--primary) 4%, var(--surface));
    --ph-detail-line: color-mix(in srgb, var(--border) 74%, transparent);
    --ph-glass-light: color-mix(in srgb, var(--color-white) 72%, transparent);
    --ph-glass-dark: rgba(18, 26, 36, 0.78);
}

/* -----------------------------
   Dark mode final: contraste, scroll e seleção
   ----------------------------- */
:root[data-theme="dark"]{
--ph-surface-tint: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

::selection{
    background: color-mix(in srgb, var(--primary) 28%, transparent);
    color: var(--title-color);
}

*{
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary) 28%, var(--border)) transparent;
}

*::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track{
    background: transparent;
}

*::-webkit-scrollbar-thumb{
    background: color-mix(in srgb, var(--primary) 22%, var(--border));
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover{
    background: color-mix(in srgb, var(--primary) 34%, var(--border));
    border: 3px solid transparent;
    background-clip: padding-box;
}

/* -----------------------------
   Formulários premium
   ----------------------------- */
:where(.form-grid, form, .app-form, .form-card){
    min-width: 0;
}

:where(.field, .form-field, label):has(> input, > select, > textarea){
    min-width: 0;
}

:where(label > span:first-child, .field-label, .form-label, legend){
    color: var(--text-soft);
    font-size: 12.5px;
    font-weight: 750;
    letter-spacing: 0.005em;
}

:where(input, select, textarea){
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--input-bg) 98%, var(--surface) 2%), var(--input-bg));
}

:where(textarea){
    padding-top: 14px;
    padding-bottom: 14px;
    line-height: 1.48;
}

:where(input::placeholder, textarea::placeholder){
    color: var(--placeholder);
    opacity: 0.88;
}

:where(select){
    cursor: pointer;
}

:where(input:focus-visible, select:focus-visible, textarea:focus-visible){
    box-shadow: 0 0 0 4px var(--ph-focus-soft), inset 0 1px 0 color-mix(in srgb, var(--color-white) 6%, transparent);
}

:where(input:disabled, select:disabled, textarea:disabled, .readonly){
    filter: saturate(0.92);
}

:where(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .is-invalid input, .is-invalid select, .is-invalid textarea, .field-error input, .field-error select, .field-error textarea){
    border-color: var(--danger-border);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent);
}

:where(.form-help, .helper-text, .field-help, .input-help, .description){
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

:where(.form-error, .field-error-message, .input-error, .error-text){
    color: var(--danger);
    font-size: 12.5px;
    font-weight: 700;
}

:where(.checkbox-row, .radio-row, label:has(> input[type="checkbox"]), label:has(> input[type="radio"])){
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
}

:where(input[type="checkbox"], input[type="radio"]){
    box-shadow: none;
    cursor: pointer;
}

/* -----------------------------
   Listagens premium: busca, resultados e ações
   ----------------------------- */


:where(.result-card)::after,
:where(.list-card)::after,
:where(.table-card)::after{
    content: "";
    position: absolute;
    inset: auto 18px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 16%, transparent), transparent);
    pointer-events: none;
}

:where(.page-actions, .table-actions, .card-actions, .modal-actions, .app-modal-footer){
    gap: 10px;
}

:where(.page-actions button, .table-actions button, .card-actions button, .modal-actions button, .app-modal-footer button, .page-actions .button, .table-actions .button, .card-actions .button, .modal-actions .button, .app-modal-footer .button){
    border-radius: 14px;
}


/* -----------------------------
   Detalhes, resumos e timelines
   ----------------------------- */
:where(.detail-card, .details-card, .detail-panel, .summary-panel, .summary-card, .profile-card, .timeline-card, .solicitacao-detalhe-card, .feedback-view-content-card){
    border-radius: var(--data-card-radius);
    border: 1px solid var(--ph-detail-line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, transparent), color-mix(in srgb, var(--surface-alt) 96%, transparent));
}

:where(.detail-row, .details-row, .summary-row, .info-row, .metadata-row){
    border-color: var(--ph-detail-line);
}

:where(.timeline-item, .activity-item, .history-item, .notification-item){
    border-radius: 18px;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

:where(.timeline-item:hover, .activity-item:hover, .history-item:hover, .notification-item:hover){
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    transform: translateY(-1px);
}

/* -----------------------------
   Modais finalizados: profundidade e leitura
   ----------------------------- */
:where(.app-modal, .modal, .feedback-modal, .solicitacoes-modal, .app-dialog-modal, .modal-content, .comunicado-comments-modal){
    outline: 1px solid color-mix(in srgb, var(--color-white) 8%, transparent);
    outline-offset: -2px;
}

:root[data-theme="dark"] :where(.app-modal, .modal, .feedback-modal, .solicitacoes-modal, .app-dialog-modal, .modal-content, .comunicado-comments-modal){
outline-color: color-mix(in srgb, var(--color-white) 6%, transparent);
}

:where(.app-modal-header h1, .app-modal-header h2, .app-modal-header h3, .modal-header h1, .modal-header h2, .modal-header h3){
    color: var(--title-color);
    font-weight: 760;
}

:where(.app-modal-header p, .app-modal-header span, .modal-header p, .modal-header span, .app-modal-subtitle){
    color: var(--text-muted);
}

/* -----------------------------
   Chat, comentários e interações
   ----------------------------- */
:where(.chat-bubble, .chat-message, .comentario-card, .comment-card, .solicitacao-chat-mensagem, .app-chat-message){
    border-radius: 18px;
    border-color: color-mix(in srgb, var(--border) 78%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-alt) 94%, transparent));
}

:where(.social-action-btn, .comunicado-social-icon-button, .comemoracoes-social-icon-button){
    border-radius: 999px;
}

/* -----------------------------
   Skeleton/loading premium
   ----------------------------- */
:where(.skeleton, .loading-skeleton, .placeholder-line, .loading-card, .app-skeleton){
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-alt) 86%, var(--border) 14%);
}

:where(.skeleton, .loading-skeleton, .placeholder-line, .loading-card, .app-skeleton)::after{
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-white) 18%, transparent), transparent);
    animation: phSkeletonShimmer 1.35s ease-in-out infinite;
}

@keyframes phSkeletonShimmer {
    100%{ transform: translateX(100%); }
}

/* -----------------------------
   Responsividade e motion
   ----------------------------- */
@media (max-width: 768px) {
    :where(.page-actions, .table-actions, .card-actions, .modal-actions, .app-modal-footer){
        align-items: stretch;
    }

    :where(.page-actions button, .table-actions button, .card-actions button, .modal-actions button, .app-modal-footer button){
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.skeleton, .loading-skeleton, .placeholder-line, .loading-card, .app-skeleton)::after{
        animation: none;
    }

    :where(.timeline-item, .activity-item, .history-item, .notification-item){
        transition: none;
        transform: none;
    }
}

/* =========================================================
   FIX 404 - Base visual corporativa MindZ
   - Fundo claro neutro e superfícies brancas.
   - Remove brilho/radiais fortes que deixavam o sistema com aspecto de template.
   - Mantém dark mode via tokens existentes.
   ========================================================= */


:root:not([data-theme="dark"]) body,
:root:not([data-theme="dark"]) .app-shell,
:root:not([data-theme="dark"]) .app-area,
:root:not([data-theme="dark"]) .app-content,
:root:not([data-theme="dark"]) .content-page,
:root:not([data-theme="dark"]) .main-content,
:root:not([data-theme="dark"]) .page-content,
:root:not([data-theme="dark"]) .shell-main{
background: var(--app-bg);
}

:root:not([data-theme="dark"]) .app-topbar,
:root:not([data-theme="dark"]) .app-topbar.topbar-corrigida,
:root:not([data-theme="dark"]) .topbar,
:root:not([data-theme="dark"]) .app-header,
:root:not([data-theme="dark"]) .shell-header,
:root:not([data-theme="dark"]) .main-header{
background: var(--surface);
    border-bottom-color: var(--border);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--shadow-color) 3.5%, transparent);
}

:root:not([data-theme="dark"]) .sidebar,
:root:not([data-theme="dark"]) .app-sidebar,
:root:not([data-theme="dark"]) .shell-sidebar{
background: var(--sidebar-bg);
    border-right-color: var(--sidebar-border);
    box-shadow: 1px 0 0 color-mix(in srgb, var(--shadow-color) 2.5%, transparent);
}

:root:not([data-theme="dark"]) :where(.page-header, .module-header, .result-header, .section-hero, .hero-card){
background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-xs);
}

:root:not([data-theme="dark"]) :where(.page-header, .module-header, .result-header, .section-hero, .hero-card)::before{
background: var(--primary);
    opacity: 0.88;
}


:root:not([data-theme="dark"]) :where(input, select, textarea){
background: var(--surface);
    border-color: var(--input-border);
    box-shadow: none;
}

:root:not([data-theme="dark"]) :where(input, select, textarea):focus,
:root:not([data-theme="dark"]) :where(input, select, textarea):focus-visible{
border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

:root:not([data-theme="dark"]) :where(.button-primary, .btn-primary, button.primary){
background: var(--primary);
    border-color: var(--primary);
    color: var(--color-white);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 16%, transparent);
}

:root:not([data-theme="dark"]) :where(.button-primary, .btn-primary, button.primary):hover:not(:disabled){
background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 20%, transparent);
}

:root:not([data-theme="dark"]) :where(.button-secondary, .btn-secondary, button.secondary, .button-ghost, .btn-ghost){
background: var(--surface);
    border-color: var(--input-border);
    color: var(--primary);
    box-shadow: none;
}

:root:not([data-theme="dark"]) :where(.button-secondary, .btn-secondary, button.secondary, .button-ghost, .btn-ghost):hover:not(:disabled){
background: var(--button-secondary-bg-hover);
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--shadow-color) 6%, transparent);
}

:root:not([data-theme="dark"]) :where(.app-modal, .modal, .feedback-modal, .solicitacoes-modal, .app-dialog-modal, .modal-content, .comunicado-comments-modal){
background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    box-shadow: 0 24px 60px color-mix(in srgb, var(--shadow-color) 14%, transparent);
}

:root:not([data-theme="dark"]) :where(.app-modal-header, .modal-header, .feedback-modal-header, .solicitacoes-modal .app-modal-header, .comunicado-comments-modal .app-modal-header){
background: var(--surface);
    border-bottom-color: var(--border-soft);
}

:root:not([data-theme="dark"]) :where(.app-modal-footer, .modal-footer, .feedback-modal-footer){
background: var(--surface);
    border-top-color: var(--border-soft);
}

:root:not([data-theme="dark"]) :where(.feedback-modal-backdrop, .app-modal-backdrop, .modal-backdrop, .solicitacoes-modal-backdrop, .app-dialog-backdrop){
background: color-mix(in srgb, var(--shadow-color) 42%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


/* =========================================================
   Ajuste MindZ v420 - Tipografia mais light e inspiradora
   ========================================================= */
:root{
--mindz-weight-title-light: 610;
    --mindz-weight-body-light: 420;
    --mindz-weight-label-light: 480;
}

:where(.content-page, .app-content, .app-shell){
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:where(.content-page, .app-content) :where(h1, h2, h3, .page-title, .section-title, .card-title, .modal-title){
    font-weight: var(--mindz-weight-title-light);
    letter-spacing: -0.025em;
}


:where(.content-page, .app-content) :where(button, .button, .btn, .app-button, .tag, .badge, .pill, .chip){
    font-weight: var(--mindz-weight-label-light);
}

:where(.content-page, .app-content) :where(svg [stroke]){
    stroke-width: 1.35;
    vector-effect: non-scaling-stroke;
}

/* =========================================================
   Premium global - hover dos contêineres inspirado no Meu Perfil
   Efeito sutil, profissional e sem deslocamento do contêiner.
   ========================================================= */
:root{
--ph-premium-container-hover-border: color-mix(in srgb, var(--primary) 18%, var(--card-border));
    --ph-premium-container-hover-ring: 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
    --ph-premium-container-hover-shadow: 0 14px 30px color-mix(in srgb, var(--shadow-color) 8%, transparent);
    --ph-premium-container-hover-bg: linear-gradient(
            180deg,
            color-mix(in srgb, var(--surface) 99%, color-mix(in srgb, var(--color-white) 72%, transparent)),
            color-mix(in srgb, var(--surface-alt) 95%, color-mix(in srgb, var(--color-white) 10%, transparent))
        );
}

:root[data-theme="dark"]{
--ph-premium-container-hover-border: color-mix(in srgb, var(--primary) 22%, var(--card-border));
    --ph-premium-container-hover-ring: 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
    --ph-premium-container-hover-shadow: 0 18px 34px color-mix(in srgb, var(--color-black) 28%, transparent);
    --ph-premium-container-hover-bg: linear-gradient(
            180deg,
            color-mix(in srgb, var(--surface) 98%, color-mix(in srgb, var(--primary) 4%, transparent)),
            color-mix(in srgb, var(--surface-alt) 96%, color-mix(in srgb, var(--color-white) 1.5%, transparent))
        );
}


/* =========================================================
   MindZ — Perfis visuais de cor
   Mantém a estrutura light/dark e adiciona identidades premium.
   ========================================================= */
:root[data-theme="ocean"]{
color-scheme: light;
}

:root[data-theme="verde"]{
color-scheme: light;
}

:root[data-theme="violet"]{
color-scheme: light;
}

:root[data-theme="graphite"]{
color-scheme: light;
}

:root[data-theme="nossoporto"]{
color-scheme: light;
}


/* =========================================================
   MindZ FIX v620 — aliases de perfil visual para telas legadas
   Garante aplicação em páginas com CSS antigo que usa body/theme classes.
   ========================================================= */
:root[data-theme-profile="light"],
body[data-theme-profile="light"],
:root.theme-light,
body.theme-light{
color-scheme: light;
}

:root[data-theme-profile="dark"],
body[data-theme-profile="dark"],
:root.theme-dark,
body.theme-dark{
color-scheme: dark;
}

:root.theme-ocean,
body.theme-ocean{
color-scheme: light;
}
:root.theme-verde,
body.theme-verde{
color-scheme: light;
}
:root.theme-violet,
body.theme-violet{
color-scheme: light;
}
:root.theme-graphite,
body.theme-graphite{
color-scheme: light;
}
:root.theme-nossoporto,
body.theme-nossoporto{
color-scheme: light;
}

:root[data-theme="ocean"] body,
:root[data-theme="verde"] body,
:root[data-theme="violet"] body,
:root[data-theme="graphite"] body,
:root[data-theme="nossoporto"] body,
body[data-theme="ocean"],
body[data-theme="verde"],
body[data-theme="violet"],
body[data-theme="graphite"],
body[data-theme="nossoporto"]{
background: var(--app-bg);
    color: var(--text);
}

/* MindZ: alinhamentos permitidos sem CSS inline em conteúdo sanitizado. */
.mindz-text-align-left{ text-align: left; }
.mindz-text-align-center{ text-align: center; }
.mindz-text-align-right{ text-align: right; }
.mindz-text-align-justify{ text-align: justify; }


/* =========================================================
   MindZ FIX v621 — token guard para perfis de cor
   Remove azuis fixos em objetos legados quando o perfil visual muda.
   ========================================================= */


/* Ajuste fino de tipografia: sem negrito excessivo */
body,
button,
input,
select,
textarea{
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
:root:not([data-theme="dark"]) h1,
:root:not([data-theme="dark"]) h2,
:root:not([data-theme="dark"]) h3,
:root:not([data-theme="dark"]) h4,
:root:not([data-theme="dark"]) h5,
:root:not([data-theme="dark"]) h6{
color: var(--title-color);
    font-weight: 560;
}

strong,
b,
:root:not([data-theme="dark"]) strong,
:root:not([data-theme="dark"]) b{
color: inherit;
    font-weight: 560;
}

button,
.button,
.btn,
[class*="button-"],
:root:not([data-theme="dark"]) button,
:root:not([data-theme="dark"]) .button,
:root:not([data-theme="dark"]) .btn,
:root:not([data-theme="dark"]) [class*="button-"]{
font-weight: 540;
}


/* Ajustes finais de linguagem visual: sem negrito excessivo */
:root{
--mindz-sidebar-text-weight: 430;
    --mindz-title-soft-weight: 560;
}


/* =========================================================
   MindZ v68 — Repaginação executiva global
   Escopo: camada visual transversal. Mantém lógica, rotas e payloads.
   ========================================================= */
:root{
--mindz-ceo-blue: #355dff;
    --mindz-ceo-indigo: #6f7fff;
    --mindz-ceo-violet: #8b5cf6;
    --mindz-ceo-aqua: #28c6d7;
    --mindz-ceo-ink: var(--title-color);
    --mindz-ceo-gradient: linear-gradient(135deg, var(--mindz-ceo-blue), var(--mindz-ceo-indigo) 52%, var(--mindz-ceo-aqua));
    --mindz-ceo-gradient-soft: radial-gradient(circle at 18% 12%, rgba(53, 93, 255, 0.11), transparent 30%), radial-gradient(circle at 92% 8%, rgba(40, 198, 215, 0.10), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--color-white) 72%, transparent), rgba(247, 249, 255, 0.92));
    --mindz-ceo-ring: 0 0 0 4px rgba(53, 93, 255, 0.13);
}

:root[data-theme="dark"],
html.dark,
body.dark,
body.theme-dark,
body[data-theme="dark"]{
    --mindz-ceo-gradient-soft: radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 30%), radial-gradient(circle at 92% 8%, rgba(40, 198, 215, 0.10), transparent 28%), linear-gradient(180deg, rgba(10, 16, 23, 0.92), rgba(14, 20, 29, 0.98));
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: var(--font-family-base);
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body :where(.app-shell, .app-area, .app-content, .content-page, .page, .main-content, .page-content){
    background-image: var(--mindz-ceo-gradient-soft);
    background-attachment: fixed;
}

body :where(.content-page, .page, .page-content, .main-content){
    color: var(--text);
}

body :where(h1, h2, h3, h4, .page-title, .section-title, .card-title, .topbar-page-title){
    color: var(--title-color);
    letter-spacing: -0.035em;
}


body :where(a, button, input, select, textarea, [role="button"]){
    -webkit-tap-highlight-color: transparent;
}

body :where(a, button, input, select, textarea, [role="button"]):focus-visible{
    outline: 0;
    box-shadow: var(--mindz-ceo-ring);
}


/* Estado vazio e mensagens de erro amigáveis */
body :where(.empty-state, .empty, .sem-registros, .no-results, .mindz-empty-state){
    border: 1px dashed color-mix(in srgb, var(--primary) 22%, var(--border));
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--primary-soft) 32%, var(--surface));
    color: var(--text-muted);
    padding: 24px;
}

/* Estado vazio padrão MindZ — animação de busca do módulo Atividades */
:root {
    --mindz-empty-visual-primary: var(--theme-primary, var(--primary, #3158a6));
    --mindz-empty-visual-surface: var(--surface, #fff);
    --mindz-empty-visual-surface-soft: var(--surface-alt, #f5f7fb);
    --mindz-empty-visual-border: color-mix(in srgb, var(--mindz-empty-visual-primary) 18%, var(--border, #dce2ee));
}

body :where(.mindz-empty-state--activities, .perfil-publico-question-state){
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 12px;
    text-align: center;
}

body :where(.mindz-empty-state--activities, .perfil-publico-question-state) .mindz-empty-state__body,
body :where(.mindz-empty-state--activities, .perfil-publico-question-state) .perfil-publico-private-text {
    max-width: min(100%, 560px);
    display: grid;
    gap: 8px;
    justify-items: center;
}

body :where(.mindz-empty-state--activities, .perfil-publico-question-state) .mindz-empty-state__body > :where(p, span, small, em),
body :where(.mindz-empty-state--activities, .perfil-publico-question-state) .perfil-publico-private-text > :where(p, span, small, em) {
    color: var(--text-muted);
    line-height: 1.55;
}

body :where(.mindz-empty-state--activities, .perfil-publico-question-state) .mindz-empty-state__body > :where(strong, h3, h4),
body :where(.mindz-empty-state--activities, .perfil-publico-question-state) .perfil-publico-private-text > :where(strong, h3, h4) {
    color: var(--title-color);
    margin: 0;
}

body :where(.mindz-empty-state--activities, .perfil-publico-question-state) .mindz-empty-state__body > :where(button, .button, .mindz-button) {
    justify-self: center;
}

.mindz-empty-search-visual {
    position: relative;
    width: 104px;
    height: 104px;
    border: 1px solid var(--mindz-empty-visual-border);
    border-radius: 30px;
    background:
        radial-gradient(circle at 28% 24%, color-mix(in srgb, var(--mindz-empty-visual-primary) 13%, #fff), transparent 38%),
        linear-gradient(145deg, var(--mindz-empty-visual-surface), color-mix(in srgb, var(--mindz-empty-visual-primary) 7%, var(--mindz-empty-visual-surface)));
    box-shadow:
        0 20px 42px color-mix(in srgb, var(--mindz-empty-visual-primary) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,.8);
    overflow: hidden;
}

.mindz-empty-search-visual svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mindz-empty-search-visual__orbit {
    stroke: color-mix(in srgb, var(--mindz-empty-visual-primary) 24%, transparent);
    stroke-width: 1.6;
    stroke-dasharray: 5 7;
    transform-origin: 60px 60px;
    animation: mindzEmptyOrbit 9s linear infinite;
}

.mindz-empty-search-visual__dot {
    fill: var(--mindz-empty-visual-primary);
    transform-origin: 60px 60px;
}

.mindz-empty-search-visual__dot--one {
    animation: mindzEmptyDot 2.8s ease-in-out infinite;
}

.mindz-empty-search-visual__dot--two {
    fill: color-mix(in srgb, var(--mindz-empty-visual-primary) 55%, #55c6bd);
    animation: mindzEmptyDot 2.8s ease-in-out .55s infinite;
}

.mindz-empty-search-visual__glass,
.mindz-empty-search-visual__handle {
    stroke: var(--mindz-empty-visual-primary);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mindz-empty-search-visual__glass {
    fill: color-mix(in srgb, var(--mindz-empty-visual-primary) 7%, transparent);
    animation: mindzEmptySearch 3.2s ease-in-out infinite;
    transform-origin: 52px 64px;
}

.mindz-empty-search-visual__handle {
    animation: mindzEmptySearch 3.2s ease-in-out infinite;
    transform-origin: 64px 79px;
}

.mindz-empty-search-visual__spark {
    stroke: color-mix(in srgb, var(--mindz-empty-visual-primary) 42%, #f2b84b);
    stroke-width: 3;
    stroke-linecap: round;
    animation: mindzEmptySpark 1.8s ease-in-out infinite;
    transform-origin: 84px 36px;
}

@keyframes mindzEmptyOrbit {
    to { transform: rotate(360deg); }
}

@keyframes mindzEmptyDot {
    0%, 100% { opacity: .45; transform: scale(.82); }
    50% { opacity: 1; transform: scale(1.18); }
}

@keyframes mindzEmptySearch {
    0%, 100% { transform: translate(-2px, 1px) rotate(-3deg); }
    50% { transform: translate(4px, -3px) rotate(4deg); }
}

@keyframes mindzEmptySpark {
    0%, 100% { opacity: .4; transform: scale(.75); }
    50% { opacity: 1; transform: scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
    .mindz-empty-search-visual__orbit,
    .mindz-empty-search-visual__dot,
    .mindz-empty-search-visual__glass,
    .mindz-empty-search-visual__handle,
    .mindz-empty-search-visual__spark {
        animation: none !important;
    }
}



body :where(pre, code){
    border-radius: 12px;
}

/* Nunca deixar JSON bruto parecer tela final quando escapar em visualização. */
body :where(.modal-body, .mindz-popup-body, .app-modal-body, .drawer-body) > pre:only-child{
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--border-soft);
    background: var(--surface-alt);
    color: var(--text-soft);
    padding: 16px;
}

@media (prefers-reduced-motion: reduce) {
    *,
*::before,
*::after{
        scroll-behavior: auto;
        animation-duration: 0.001ms;
        animation-iteration-count: 1;
        transition-duration: 0.001ms;
    }
}

/* =========================================================
   V71 - Ajustes globais de consistência visual
   ========================================================= */
body > #popupPerfilColaborador .perfil-publico-floating-close{
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    max-width: 42px;
    max-height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow-color) 10%, transparent);
    line-height: 1;
}



/* =========================================================
   MindZ 27007 — Tema Nosso Porto fiel à paleta institucional
   Turquesa #4BB9BC | Azul #004E99 | Verde #98BE3F
   ========================================================= */
:root[data-theme="nossoporto"] body,
body[data-theme="nossoporto"]{
    background:
        radial-gradient(circle at 6% 4%, rgba(75, 185, 188, .12), transparent 28%),
        radial-gradient(circle at 96% 92%, rgba(152, 190, 63, .10), transparent 26%),
        var(--app-bg) !important;
}

:root[data-theme="nossoporto"] :is(
    .app-topbar,
    .app-topbar.topbar-corrigida,
    .topbar,
    .app-header,
    .shell-header,
    .main-header
){
    background:
        radial-gradient(circle at 14% 0%, rgba(255,255,255,.20), transparent 29%),
        radial-gradient(circle at 92% 100%, rgba(152,190,63,.30), transparent 30%),
        linear-gradient(108deg, #4BB9BC 0%, #33AAB2 20%, #004E99 58%, #004E99 100%) !important;
    border-bottom: 4px solid #98BE3F !important;
    box-shadow: 0 18px 46px rgba(0, 78, 153, .22) !important;
}

:root[data-theme="nossoporto"] :is(
    .button-primary,
    .btn-primary,
    button.primary,
    [data-variant="primary"]
){
    background: #004E99 !important;
    border-color: #004E99 !important;
    color: #FFFFFF !important;
}

:root[data-theme="nossoporto"] :is(
    .button-primary,
    .btn-primary,
    button.primary,
    [data-variant="primary"]
):hover:not(:disabled){
    background: #003F7D !important;
    border-color: #003F7D !important;
}

:root[data-theme="nossoporto"] :is(
    .button-secondary,
    .btn-secondary,
    button.secondary,
    .button-ghost,
    .btn-ghost
):hover:not(:disabled){
    background: color-mix(in srgb, #4BB9BC 15%, #FFFFFF) !important;
    border-color: color-mix(in srgb, #4BB9BC 62%, #004E99) !important;
    color: #004E99 !important;
}

:root[data-theme="nossoporto"] :is(
    input,
    select,
    textarea,
    [contenteditable="true"]
):focus,
:root[data-theme="nossoporto"] :is(
    input,
    select,
    textarea,
    [contenteditable="true"]
):focus-visible{
    border-color: #4BB9BC !important;
    box-shadow: 0 0 0 3px rgba(75, 185, 188, .22) !important;
}

:root[data-theme="nossoporto"] :is(
    .badge-success,
    .status-success,
    .chip-success,
    [data-status="success"],
    [data-status="concluido"],
    [data-status="ativo"]
){
    background: color-mix(in srgb, #98BE3F 18%, #FFFFFF) !important;
    border-color: color-mix(in srgb, #98BE3F 52%, #FFFFFF) !important;
    color: #56731A !important;
}

:root[data-theme="nossoporto"] :is(
    .page-header,
    .module-header,
    .result-header,
    .section-hero,
    .hero-card
)::before{
    background: linear-gradient(90deg, #4BB9BC 0 36%, #004E99 36% 72%, #98BE3F 72% 100%) !important;
}

:root[data-theme="nossoporto"] :is(
    .progress-bar,
    .progress-fill,
    [role="progressbar"] > span
){
    background: linear-gradient(90deg, #4BB9BC, #004E99 62%, #98BE3F) !important;
}

/* Componentes de dados movidos para mindz_data.css na sessão 4. */
}