/* =============================================================================
   header-perfil.css — sidebar (header lateral) e pop-up "Meu Perfil".

   GERADO a partir de sistema/projetos/user/app/globals.css: sao EXATAMENTE as
   regras que o Painel User usa para o header, o menu, o perfil e o pop-up de
   perfil, na mesma ordem e com os mesmos @media — extraidas por seletor pelo
   script tools/gerar-header-perfil.js (item 16 do backlog de UI/UX, 2026-09-11). O
   objetivo e o gestor ter o MESMO componente do user: mesma largura, cores,
   tamanhos, colapso, hamburguer e trava de rolagem. So os links de navegacao
   diferem, e esses vivem no markup (app/page.js).

   As regras equivalentes foram REMOVIDAS de styles.css / styles-*.css deste
   projeto para nao disputar a cascata. Para mudar algo do header, mude no
   globals.css do user e regenere este arquivo; nao edite os dois a mao.
   ============================================================================= */



header {
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 320px;
    background-color: rgb(31, 29, 43);
    padding: 1.6rem;
    border-right: 2.4px solid rgb(255 255 255 / 0.1);
    box-shadow: 6.4px 0 12.8px rgb(0 0 0 / 0.1);
}

.abrir-header {
    display: none;
}

.nav-bar {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.62rem;
    padding: 0rem 2.4rem 1.6rem;
    border-bottom: 1.6px solid rgb(255 255 255 / 0.05);
    width: calc(100% + 3.2rem);
    margin-left: -1.6rem;
}

.logo-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.logo-image {
    margin-left: -32px;
    width: 100%;
    max-width: 200px;
    height: 36.8px;
    overflow: hidden;
}

.logo-image img {
    height: 100%;
    object-fit: cover;
}

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.nav-item {
    width: 100%;
    padding: 1.04rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11.2px;
    font-size: 16px;
    color: #9CA3AF;
    transition: background-color 0.1s ease, color 0.1s ease;
    border-radius: 12.8px;
}

.nav-item > * {
  transition: color 0.25s ease;
}

.nav-item svg,
.nav-item svg * {
  transition: stroke 0.25s ease, fill 0.25s ease, color 0.25s ease;
}

.nav-item.red-hover.ativo {
    color: rgb(239, 68, 68);
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-item.blue-hover.ativo {
    color: #4a90e2;
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-item.green-hover.ativo {
    color: #34D399;
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-item.orange-hover.ativo {
    color: #F5A623;
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-item.purple-hover.ativo {
    color: #7264EA;
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-item:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-item:not(.ativo):hover {
    color: white;
}

.nav-item:not(.ativo):hover * {
    color: white;
}

.nav-item svg {
    width: 25.6px;
    height: 25.6px;
}

.tem-sub-lista {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tem-sub-lista ul {
    padding-top: 0.8rem;
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    color: #6b7280;
    font-size: 16px;
}

.sub-lista-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-item.sem-hover {
    padding: 0px;
}

.nav-item.sem-hover:hover {
    background-color: transparent !important;
}

.perfil {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8rem;
    padding: 0.8rem;
    border: 1.6px solid rgba(255, 255, 255, 0.1);
    border-radius: 19.2px;
    box-shadow: 0 6.4px 25.6px rgba(0, 0, 0, 0.2);
}

.perfil:hover {
    cursor: pointer;
    border: 1.6px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 6.4px 25.6px rgba(0, 0, 0, 0.25);
}

.imagem-usuario {
    width: 100%;
    max-width: 56px;
}

.imagem-usuario img {
    width: 100%;
}

.info-usuario {
    display: flex;
    flex-direction: column;
    gap: 5.6px;
}

.info-usuario h4 {
    font-size: 14.4px;
}

.info-usuario p {
    font-size: 12.8px;
    color: #c5c4c4;
}

.li-subitem {
    transition: color 0.2s ease; 
    cursor: pointer;
}

.li-subitem.orange-hover:hover {
    color: #F5A623;
}

.li-subitem.blue-hover:hover {
    color: #4a90e2;
}

.li-subitem.purple-hover:hover {
    color: #7264EA;
}

.li-subitem.green-hover:hover {
    color: #34d399;
}

.abrir-header {
    cursor: pointer;
    transition: color 0.3s ease;
}

.abrir-header:hover {
    color: #34D399;
}

.linha {
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: 50% 50%;
}

.abrir-header.ativo .linha1 {
    transform: translateY(3.6px) rotate(45deg);
}

.abrir-header.ativo .linha2 {
    opacity: 0;
}

.abrir-header.ativo .linha3 {
    transform: translateY(-3.6px) rotate(-45deg);
}

.modal-perfil.gap-32 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25.6px;
}

.modal-perfil .gap-16 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12.8px;
}

.modal-perfil {
    padding: 2.4rem 2rem;
    width: 100%;
    max-width: 520px;
    border-radius: 14.4px;
    background-color: #1F1D2B;
    border: 0.8px solid rgba(255, 255, 255, 0.1);
}

.perfil-title-close {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.perfil-title-close h2 {
    font-size: 28.8px;
    font-weight: 700;
}

.perfil-title-close svg {
    width: 22.4px;
    height: 22.4px;
    cursor: pointer;
    color: rgb(156, 163, 175);
}

.perfil-descricao {
    font-size: 16px;
    color: rgb(156, 163, 175);
}

.dados-perfil {
    width: 100%;
}

.dados-perfil label {
    font-size: 17.6px;
    color: rgb(156, 163, 175);
    font-weight: 500;
}

.dados-perfil-input {
    padding: 16px 20px;
    width: 100%;
    background-color: rgb(37, 40, 54);
    border: 0.8px solid rgba(255, 255, 255, 0.1);
    border-radius: 6.4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    color: rgb(107, 114, 128) !important;
    transition: border-color 0.3s ease;
}

.dados-perfil-input:focus-within {
    border-color: #4a91e29a;
    color: #4a90e2 !important;
}

.dados-perfil-input input {
    font-size: 16px;
    color: rgb(173, 178, 187);
    width: 100%;
    background-color: transparent;
    border: none;
}

.dados-perfil-input input {
    width: 100%;
    background-color: transparent;
    border: none;
    outline: none;
}

.btn-login {
    width: 100%;
    padding: 14.4px;
    background-image: linear-gradient(to right, rgb(124, 58, 237), rgb(99, 102, 241), rgb(59, 130, 246));
    cursor: pointer;
    border: none;
    border-radius: 9.6px;
    font-size: 14.4px;
    font-weight: 600;
    transition: transform 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: white;
}

.btn-login:hover {
    transform: translateY(-1.6px);
}

.mar-top15 {
    margin-top: 20px;
}

.buttons-perfil {
    margin-top: 12px;
    width: 100%;
    padding-top: 24px;
    border-top: 0.8px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.buttons-perfil button {
    padding: 12px 16px;
    width: 100%;
    font-size: 14.4px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.buttons-perfil button:hover {
    transform: translateY(-1.6px);
}

.perfil-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: transparent;
    border: none;
    color: rgb(239, 68, 68);
}

.perfil-logout svg {
    width: 20.8px;
    height: 20.8px;
}

.btn-salvar {
    border-radius: 9.6px;
    border: none;
    background-color: #34D399;
    color: black;
}

@media (max-width: 1200px) {

  .modal-perfil.gap-32 {
    gap: 19.2px;
  }
}

@media (max-width: 768px) {

  .modal-perfil.gap-32 {
    gap: 14.4px;
  }
}

@media screen and (max-width: 1500px) and (min-width: 1201px) {
header {
    max-width: 300px;
    padding: 1rem;
    overflow-y: visible;
}
.logo {
    padding-bottom: 1rem;
    padding-left: 2.2rem;
}
.nav-item {
    padding: 1.04rem 0.64rem;
    gap: 8px;
    font-size: 13.6px;
}
.nav-item svg {
    width: 19.2px;
    height: 19.2px;
}
.imagem-usuario {
    max-width: 32px;
}
.info-usuario h4 {
    font-size: 12px;
}
.info-usuario p {
    font-size: 11.2px;
}
}

@media screen and (max-width: 1200px) and (min-width: 993px) {
header {
    max-width: 250px;
    padding: 1rem;
}
.logo {
    margin-left: -20px;
    padding-left: -1.5rem;
    padding-bottom: 1rem;
}
.nav-item {
    padding: 1.04rem 0.64rem;
    gap: 8px;
    font-size: 13.6px;
}
.nav-item svg {
    width: 19.2px;
    height: 19.2px;
}
.imagem-usuario {
    max-width: 32px;
}
.info-usuario h4 {
    font-size: 12px;
}
.info-usuario p {
    font-size: 11.2px;
}
.modal-perfil .gap-16 {
    gap: 8px;
}
}

@media screen and (max-width: 992px) and (min-width: 769px) {
header {
    max-width: none;
    padding: 0.8rem;
    padding-top: 0;
    min-height: auto;
    border: none;
    padding-bottom: 0;
}
header.clicado {
    position: fixed;
    inset: 0;
    height: 100vh;
    width: 100%;
    padding-bottom: 40px;
    z-index: 999;
}
header.clicado .nav-bar > * {
    display: flex;
}
header.clicado .perfil {
    display: flex;
}
.nav-bar > * {
    display: none;
}
.nav-bar > .logo {
    display: flex;
}
.perfil {
    display: none;
}
.abrir-header {
    display: block;
}
.logo {
    padding: 0.8rem 1.6rem 0.8rem 1.44rem;
}
.nav-item {
    padding: 1.04rem 0.64rem;
    gap: 8px;
    font-size: 13.6px;
}
.nav-item svg {
    width: 19.2px;
    height: 19.2px;
}
.imagem-usuario {
    max-width: 32px;
}
.info-usuario h4 {
    font-size: 12px;
}
.info-usuario p {
    font-size: 11.2px;
}
.modal-perfil .gap-16 {
    gap: 8px;
}

}

@media screen and (max-width: 768px) and (min-width: 469px) {
header {
    max-width: none;
    padding: 0.8rem;
    padding-top: 0;
    min-height: auto;
    border: none;
    padding-bottom: 0;
}
header.clicado {
    position: fixed;
    inset: 0;
    height: 100vh;
    width: 100%;
    padding-bottom: 40px;
    z-index: 999;
}
header.clicado .nav-bar > * {
    display: flex;
}
header.clicado .perfil {
    display: flex;
}
.nav-bar > * {
    display: none;
}
.nav-bar > .logo {
    display: flex;
}
.perfil {
    display: none;
}
.abrir-header {
    display: block;
}
.logo {
    padding: 0.8rem 1.6rem 0.8rem 1.44rem;
}
.nav-item {
    padding: 1.04rem 0.64rem;
    gap: 8px;
    font-size: 13.6px;
}
.nav-item svg {
    width: 19.2px;
    height: 19.2px;
}
.imagem-usuario {
    max-width: 32px;
}
.info-usuario h4 {
    font-size: 12px;
}
.info-usuario p {
    font-size: 11.2px;
}
.modal-perfil .gap-16 {
    gap: 8px;
}
.modal-perfil.gap-32 {
    gap: 16px;
}
}

@media screen and (max-width: 468px) {
header {
    max-width: none;
    padding: 0.8rem;
    padding-top: 0;
    min-height: auto;
    border: none;
    padding-bottom: 0;
}
header.clicado {
    position: fixed;
    inset: 0;
    height: 100vh;
    width: 100%;
    padding-bottom: 40px;
    z-index: 999;
}
header.clicado .nav-bar > * {
    display: flex;
}
header.clicado .perfil {
    display: flex;
}
.nav-bar > * {
    display: none;
}
.nav-bar > .logo {
    display: flex;
}
.perfil {
    display: none;
}
.abrir-header {
    display: block;
}
.logo {
    padding: 0.8rem 1.6rem 0.8rem 1.44rem;
}
.nav-item {
    padding: 1.04rem 0.64rem;
    gap: 8px;
    font-size: 13.6px;
}
.nav-item svg {
    width: 19.2px;
    height: 19.2px;
}
.imagem-usuario {
    max-width: 32px;
}
.info-usuario h4 {
    font-size: 12px;
}
.info-usuario p {
    font-size: 11.2px;
}
.modal-perfil .gap-16 {
    gap: 8px;
}
.modal-perfil.gap-32 {
    gap: 16px;
}
}

@media screen and (min-width: 1501px) {
    .logo {
        padding-bottom: 1.5rem;
    }
}

@media screen and (max-width: 992px) {
    .logo {
        margin-left: -22px;
        width: auto;
        position: relative;
        border-bottom-color: transparent;
    }
    .logo::after {
        content: '';
        position: absolute;
        left: -100vw;
        right: -100vw;
        bottom: 0;
        height: 1.6px;
        background-color: rgb(255 255 255 / 0.05);
        pointer-events: none;
    }
    .abrir-header {
        margin-right: -25px;
    }
}

.abrir-header.ativo {
    color: #34D399;
}

@media (hover: none) {
    .abrir-header:hover {
        color: white;
    }
}

body:has(header.clicado) {
    overflow: hidden;
}

header.clicado {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

header.clicado .nav-bar {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: clip;
    overscroll-behavior: contain;
}

header.clicado .perfil {
    flex-shrink: 0;
}

@media screen and (max-width: 992px) {
    header.clicado {
        padding-right:  max(0.8rem, env(safe-area-inset-right));
        padding-left:   max(0.8rem, env(safe-area-inset-left));
        padding-bottom: max(40px, env(safe-area-inset-bottom));
    }
}

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

@media screen and (max-width: 992px) {
    header.clicado .nav-links,
    header.clicado .perfil {
        animation: stamflowMenuItemAppear 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

@media screen and (min-width: 993px) {
    header {
        position: sticky;
        top: 0;
        height:     calc(100vh / var(--app-zoom, 1));
        min-height: calc(100vh / var(--app-zoom, 1));
        max-height: calc(100vh / var(--app-zoom, 1));
        align-self: flex-start;
        overflow-y: auto;
        overflow-x: clip;
        overscroll-behavior: contain;
    }
}

header {
    /* Mesma curva e mesmo tempo da seta e dos labels, nos dois sentidos. */
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-nav-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38.4px;
    height: 38.4px;
    padding: 0;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9.6px;
    color: #9CA3AF;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.toggle-nav-desktop:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.toggle-nav-desktop svg {
    width: 19.2px;
    height: 19.2px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

header.nav-mini .toggle-nav-desktop svg {
    transform: rotate(180deg);
}

header.nav-mini {
    /* só o ícone: 25.6px do svg + respiro */
    max-width: 72px;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    align-items: center;
}

header.nav-mini .logo {
    width: calc(100% + 1.6rem);
    margin-left: -0.8rem;
    /* Só o padding horizontal zera. O vertical fica com o valor do breakpoint
       em vigor, para a altura da linha do logo continuar idêntica à original
       tanto expandida quanto colapsada. */
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    gap: 0;
}

header .nav-links h3,
header .info-usuario,
header .logo-content,
header .tem-sub-lista-selector > svg {
    opacity: 1;
    visibility: visible;
    max-width: 320px;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.35s;
}

header.nav-mini .nav-links h3,
header.nav-mini .info-usuario,
header.nav-mini .logo-content,
header.nav-mini .tem-sub-lista-selector > svg {
    opacity: 0;
    visibility: hidden;
    max-width: 0;
    pointer-events: none;
}

header .sub-lista {
    opacity: 1;
    visibility: visible;
    max-height: 400px;
    overflow: hidden;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.35s;
}

header.nav-mini .sub-lista {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    padding-top: 0;
    pointer-events: none;
}

header.nav-mini .nav-item {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}

header.nav-mini .tem-sub-lista,
header.nav-mini .tem-sub-lista-selector,
header.nav-mini .tem-sub-lista-selector .nav-item.sem-hover {
    justify-content: center;
    align-items: center;
}

header.nav-mini .tem-sub-lista-selector {
    position: relative;
}

header.nav-mini .tem-sub-lista-selector > svg {
    position: absolute;
    right: 0;
}

header.nav-mini .perfil {
    justify-content: center;
    gap: 0;
    padding: 0.6rem;
}

header.nav-mini .imagem-usuario {
    max-width: 38.4px;
}

@media screen and (max-width: 1500px) and (min-width: 1201px) {
    header.nav-mini {
        max-width: 64px;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
    header.nav-mini .logo {
        width: calc(100% + 1.2rem);
        margin-left: -0.6rem;
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (max-width: 992px) {
    header .toggle-nav-desktop {
        display: none;
    }
    header.nav-mini {
        max-width: none;
        padding: 0.8rem;
        padding-top: 0;
        padding-bottom: 0;
        align-items: stretch;
    }
}

header {
    justify-content: flex-start;
    overflow-y: clip;
}

.nav-bar {
    flex: 1 1 auto;
    min-height: 0;
}

.nav-links {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.perfil {
    margin-top: auto;
    flex-shrink: 0;
}

.toggle-nav-desktop {
    width: 36.8px;
    height: 36.8px;
}

@media screen and (max-width: 992px) {
    header.nav-mini .logo {
        width: calc(100% + 3.2rem);
        margin-left: -1.6rem;
        padding-left: 1.44rem;
        padding-right: 1.6rem;
        justify-content: flex-start;
        gap: 0.6rem;
    }
}

.modal-perfil .gap-16 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12.8px;           /* 16 × 0.8 */
}

@media screen and (max-width: 768px) {

    .modal-perfil .gap-16 {
        gap: 8px;
    }
}

@media screen and (max-width: 468px) {

    .modal-perfil .gap-16 {
        gap: 8px;
    }
}

.perfil-legal-links {
  margin-top: 16px;
  text-align: center;
  font-size: 12.5px;
  color: #64748b;
}

.perfil-legal-links a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s ease;
}

.perfil-legal-links a:hover {
  color: #e2e8f0;
  text-decoration: underline;
}

header .logo-content {
    overflow: clip;
    overflow-clip-margin: 40px;
}

@media screen and (max-width: 992px) {
    header .logo-content {
        max-width: none;
    }
}

.dados-perfil-input {
    padding-top: 0;
    padding-bottom: 0;
}

.dados-perfil-input input {
    padding-top: 16px;
    padding-bottom: 16px;
}

.modal-perfil {
    max-width: min(520px, calc(100% - 1.5rem));
}

@media screen and (max-width: 768px) {

    #perfil-salvar {
        min-height: 44px;
    }
}

@media screen and (max-width: 768px) {
    #fechar-perfil {
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        padding: 11px;
        overflow: visible;
    }
}

.li-subitem {
    min-height: 24px;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 992px) {
    .li-subitem {
        min-height: 44px;
    }
}

header .nav-links .sub-lista {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s ease,
        margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

header .nav-links .sub-lista.display-none {
    max-height: 0;
    opacity: 0;
    /* Margem E padding zerados: com display:none a lista simplesmente sumia;
       trocando por max-height, o padding vertical sobrava como uma faixa de
       13px no menu fechado. */
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    #modais .modal-perfil {
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1500px) {
    .link-nav h3 {
        font-size: 18.72px;
    }
}

@media screen and (max-width: 468px) {
    #modais .modal-perfil {
        padding: 1.1rem 0.9rem;
        gap: 1rem;
    }
    #modais .modal-perfil h2 {
        font-size: 15px;
    }
    #modais .modal-perfil h3,
    #modais .modal-perfil label {
        font-size: 13px;
    }
    #modais .modal-perfil p,
    #modais .modal-perfil span,
    #modais .modal-perfil input {
        font-size: 12.5px;
    }
    #modais .modal-perfil .dados-perfil {
        gap: 0.7rem;
    }
}

@media screen and (max-width: 468px) {
    #modais .modal-perfil h2 {
        font-size: 16.5px;
    }
    #modais .modal-perfil > .gap-16 {
        row-gap: 4px;
    }
    #modais .modal-perfil .perfil-title-close {
        align-items: center;
    }
}

html:has(header.clicado) {
    overflow: hidden;
}

@media screen and (max-width: 992px) {
    header.nav-mini .nav-links h3,
    header.nav-mini .info-usuario,
    header.nav-mini .tem-sub-lista-selector > svg {
        opacity: 1;
        visibility: visible;
        max-width: 320px;
        pointer-events: auto;
    }
    header.nav-mini .logo-content {
        opacity: 1;
        visibility: visible;
        max-width: none;
        pointer-events: auto;
    }
    header.nav-mini {
        align-items: flex-start;
    }
    header.nav-mini.clicado {
        padding-bottom: max(40px, env(safe-area-inset-bottom));
    }
    header.nav-mini .sub-lista {
        opacity: 1;
        visibility: visible;
        max-height: 400px;
        padding-top: 0.8rem;
        pointer-events: auto;
    }
    header.nav-mini .logo {
        width: auto;
        margin-left: -22px;
        padding: 0.8rem 1.6rem 0.8rem 1.44rem;
        justify-content: flex-start;
        gap: 0.62rem;
    }
    header.nav-mini .nav-item {
        justify-content: flex-start;
        gap: 8px;
        padding-left: 0.64rem;
        padding-right: 0.64rem;
    }
    header.nav-mini .nav-item.sem-hover {
        padding: 0;
    }
    header.nav-mini .tem-sub-lista {
        justify-content: flex-start;
        align-items: flex-start;
    }
    header.nav-mini .tem-sub-lista-selector,
    header.nav-mini .tem-sub-lista-selector .nav-item.sem-hover {
        justify-content: flex-start;
        align-items: center;
    }
    header.nav-mini .tem-sub-lista-selector > svg {
        position: static;
    }
    header.nav-mini .perfil {
        justify-content: flex-start;
        gap: 0.8rem;
        padding: 0.8rem;
    }
    header.nav-mini .imagem-usuario {
        max-width: 32px;
    }
}

.perfil-btn-texto-curto {
    display: none;
}

@media screen and (max-width: 468px) {
    .perfil-btn-texto-longo {
        display: none;
    }
    .perfil-btn-texto-curto {
        display: inline;
    }
}

@media screen and (max-width: 768px) {
    .perfil-legal-links {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
    }
    .perfil-legal-links > span {
        flex: 1 1 auto;
        text-align: center;
    }
    .perfil-legal-links > a {
        flex: 0 0 auto;
    }
}

html:has(header.clicado) {
    scrollbar-gutter: auto;
}

body:has(header.clicado) .site-content {
    border-right: var(--stamflow-sbw, 0px) solid transparent;
}

.perfil-title-close {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.perfil-title-close > h2 {
    flex: 1 1 auto;
    min-width: 0;
}

#fechar-perfil {
    flex: 0 0 auto;
    width: 25.6px;
    height: 25.6px;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    #fechar-perfil {
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        padding: 9.2px;
        margin-right: -9.2px;
        overflow: visible;
    }
}

@media screen and (min-width: 993px) {
    header {
        margin-bottom: -4px;
    }
}


/* =============================================================================
   Especifico do GESTOR (nao vem do user): so o que diz respeito aos LINKS de
   navegacao deste painel, mantido de styles.css. O sub-menu "Reports" destaca
   o pai enquanto um filho esta ativo (sincronizarDestaquePai no script.js) e
   os filhos usam o vermelho do .red-hover.
   ============================================================================= */
.li-subitem.red-hover:hover,
.li-subitem.red-hover.ativo {
    color: rgb(239, 68, 68);
}

.tem-sub-lista-selector.ativo > svg,
.tem-sub-lista-selector.ativo .nav-item.sem-hover {
    color: rgb(239, 68, 68);
}

.tem-sub-lista-selector.ativo > svg {
    transform: rotate(180deg);
}

/* O pop-up "Detalhes do Report" tem um .btn-salvar proprio com borda
   !important (styles.css); o Salvar do perfil e o do user, sem borda. */
.modal-perfil .btn-salvar {
    border: none !important;
}

/* O gestor nao aplica a Inter em botoes e inputs (caem no Arial do agente),
   e o user sim (`* { font-family }`). Medido: campos e botoes do perfil
   ficavam 1-2px mais baixos. */
header button,
.modal-perfil button,
.modal-perfil input,
.modal-perfil label {
    font-family: 'Inter', sans-serif;
}

/* Par do R49 do user (header com margin-bottom -4px contra o salto do sticky):
   o .site-content nunca fica mais baixo que a viewport, senao sobrariam 4px
   pretos no rodape em pagina curta. Nao vem na extracao porque o seletor nao e
   do header. */
@media screen and (min-width: 993px) {
    .site-content {
        min-height: 100vh;
    }
}