@media (min-width: 768px){

  /* GARANTE que o flex está valendo e quem manda é o ASIDE */
  .page-body{
    display: flex !important;
  }

  /* ASIDE normal */
  .page-body > aside.sidebar-static{
    flex: 0 0 var(--sidebar-width) !important;
    width: var(--sidebar-width) !important;
    min-width: 0 !important;
  }

  /* COLLAPSED: zera espaço + mata o padding do p-3 */
  .page-body > aside.sidebar-static.sidebar-collapsed{
    flex: 0 0 0 !important;
    width: 0 !important;
    padding: 0 !important;        /* ISSO remove a “faixa” */
    border: 0 !important;
    overflow: hidden !important;
  }

  /* SLIM: 4rem de verdade (não “visual”, é espaço do flex mesmo) */
  .page-body > aside.sidebar-static.sidebar-slim{
    flex: 0 0 4rem !important;
    width: 4rem !important;
    min-width: 4rem !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    overflow: hidden !important;
  }

  /* MENU do PrimeFaces (ui-menu) dentro do slim */
  .page-body > aside.sidebar-static.sidebar-slim .ui-menuitem-text{
    display: none !important;
  }

  .page-body > aside.sidebar-static.sidebar-slim .ui-menuitem-link{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .page-body > aside.sidebar-static.sidebar-slim .ui-menuitem-icon{
    float: none !important;
    margin: 0 !important;
  }

  /* MAIN ocupa tudo quando o aside encolhe */
  .page-body > main{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  
  @media (min-width: 768px){

  /* Slim: o link vira flex e NÃO pode ter float no ícone */
  aside.sidebar-static.sidebar-slim a.ui-menuitem-link{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;        /* não deixa cortar o span do ícone */
  }

  /* remove o float que o PF coloca no ícone-left */
  aside.sidebar-static.sidebar-slim .ui-menuitem-icon-left,
  aside.sidebar-static.sidebar-slim .ui-menuitem-icon-right{
    float: none !important;
  }

  /* garante que o span do ícone exista e tenha “caixa” */
  aside.sidebar-static.sidebar-slim span.ui-menuitem-icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.4rem !important;
    min-width: 2.4rem !important;
    margin: 0 !important;
  }

  /* esconde só o texto */
  aside.sidebar-static.sidebar-slim span.ui-menuitem-text{
    display: none !important;
  }
}

@media (min-width: 768px){

  /* slim: largura REAL da sidebar */
  aside.sidebar-static.sidebar-slim{
    width: 4rem !important;
    flex: 0 0 4rem !important;
    flex-basis: 4rem !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    overflow: hidden !important;
  }

  /* o link do item vira flex e centraliza */
  aside.sidebar-static.sidebar-slim a.ui-menuitem-link{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: .25rem !important;
    padding-right: .25rem !important;
  }

  /* texto some */
  aside.sidebar-static.sidebar-slim span.ui-menuitem-text{
    display: none !important;
  }

  /* MUITO IMPORTANTE: no PF, o ícone vem com float-left */
  aside.sidebar-static.sidebar-slim span.ui-menuitem-icon-left{
    float: none !important;
  }

  /* ícone tem que existir como “caixa” no flex */
  aside.sidebar-static.sidebar-slim span.ui-menuitem-icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.2rem !important;
    min-width: 2.2rem !important;
    height: 2.2rem !important;
    margin: 0 !important;
  }
}

/* =========================
   SIDEBAR SLIM - FORÇA ÍCONES VISÍVEIS (PrimeFaces Menu)
   ========================= */
@media (min-width: 768px) {

  /* Slim: realmente encolhe a barra */
  aside.sidebar-static.sidebar-slim{
    width: 4rem !important;
    flex: 0 0 4rem !important;
    flex-basis: 4rem !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;

    /* IMPORTANTE: não deixe o ícone ser cortado */
    overflow: visible !important;
  }

  /* O menu ocupa a largura do slim */
  aside.sidebar-static.sidebar-slim .ui-menu{
    width: 100% !important;
  }

  /* Link vira flex e centraliza */
  aside.sidebar-static.sidebar-slim .ui-menuitem-link{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;

    /* evita recorte do span do ícone */
    overflow: visible !important;
  }

  /* Some só o texto */
  aside.sidebar-static.sidebar-slim .ui-menuitem-text{
    display: none !important;
  }

  /* >>> O PONTO CRÍTICO: PF usa float no ícone. Em flex isso pode sumir/cortar <<< */
  aside.sidebar-static.sidebar-slim .ui-menuitem-icon-left,
  aside.sidebar-static.sidebar-slim .ui-menuitem-icon-right{
    float: none !important;
  }

  /* Força o span do ícone a existir e ter caixa */
  aside.sidebar-static.sidebar-slim .ui-menuitem-icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 2.4rem !important;
    min-width: 2.4rem !important;
    height: 2.4rem !important;

    margin: 0 !important;
    line-height: 1 !important;
    font-size: 1.25rem !important;

    visibility: visible !important;
    opacity: 1 !important;
  }
}

.card-inicio-topo{
    background-color: white!important; 
    color: #3C4962 !important
}


}



/* ==========================================================================
   KDS - Modern clean overrides (para seu template atual)
   Cole no FINAL do app-layout_overrides.css
   ========================================================================== */

/* -------- Base / layout -------- */
html, body { height: 100%; }

body.app-shell{
  background: #ECF2F8 !important; /* mantém seu fundo */
  color: #1f2937;
}

/* Page layout */
.page-body{
  gap: 16px;
  padding: 14px 14px 22px;
}

/* -------- Topbar -------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 999;

  border-radius: 0;
  border: 0;
  box-shadow: none !important;

  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(15, 23, 42, .08);
}

/* Ajuste de padding e altura do topo */
.topbar.px-3{
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.topbar{
  min-height: 64px;
}

/* Logo */
.kds-logo-text__title{
  font-weight: 800;
  letter-spacing: -.2px;
  font-size: 18px;
  line-height: 1.05;
  color: #0f172a;
}
.kds-logo-text__dot{
  color: #3C4962 !important;
}
.kds-logo-text__subtitle{
  margin-top: 2px;
  font-size: 12px;
  color: #64748b;
}

/* REMOVER A GUERRA DE CORES DO TOPO
   Você tem vários inline: style="color: #ECF2F8 !important"
   Não dá pra sobrescrever isso com CSS normal.
   Então: no HTML, troque #ECF2F8 por #64748b (ou remova).
   Enquanto você não troca, ao menos evite que os "surface-card" do topo fiquem feios:
*/
.topbar .surface-card{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* -------- Sidebar -------- */
aside.sidebar-static{
  width: 290px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 28px rgba(2, 6, 23, .06);
  background: rgba(255,255,255,.92);
}

/* Slim mode (teu toggleSlim) */
aside.sidebar-static.sidebar-slim{
  width: 88px;
  padding: 12px !important;
}

/* -------- Conteúdo -------- */
main{
  min-width: 0;
}

main > .surface-card{
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 28px rgba(2, 6, 23, .06);
  background: rgba(255,255,255,.92);
}

/* -------- PrimeFaces: botões e inputs (sem quebrar) -------- */
.p-button.p-button-sm{
  border-radius: 10px;
}
.p-button-text.p-button-plain{
  border-radius: 10px;
}

/* MenuButton ficar clean */
.p-menubutton > .p-button{
  border-radius: 10px;
}

/* Inputs */
.p-inputtext, .p-dropdown, .p-calendar input, .p-inputnumber input, .p-password input{
  border-radius: 10px;
  border-color: rgba(15, 23, 42, .16);
}

/* Focus mais bonito */
.p-inputtext:focus, .p-dropdown:focus, .p-calendar input:focus,
.p-inputnumber input:focus, .p-password input:focus{
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
  border-color: rgba(37, 99, 235, .55);
}

/* -------- Footer -------- */
footer{
  background: transparent !important;
  color: #64748b !important;
  border-top: 1px solid rgba(15, 23, 42, .08);
}

/* ==========================================================================
   DARK MODE (usa body.dark que você já alterna)
   ========================================================================== */
body.dark{
  background: #0b1220 !important;
  color: rgba(255,255,255,.92);
}

body.dark .topbar{
  background: rgba(2, 6, 23, .62);
  border-bottom-color: rgba(148, 163, 184, .14);
}

body.dark .kds-logo-text__title{ color: #3C4962 }
body.dark .kds-logo-text__subtitle{ color: #3C4962 }

body.dark aside.sidebar-static,
body.dark main > .surface-card{
  background: rgba(2, 6, 23, .55);
  border-color: rgba(148, 163, 184, .14);
  box-shadow: 0 14px 40px rgba(0,0,0,.38);
}

body.dark footer{
  color: rgba(148,163,184,.92) !important;
  border-top-color: rgba(148, 163, 184, .14);
}

/* Inputs no dark */
body.dark .p-inputtext, body.dark .p-dropdown, body.dark .p-calendar input,
body.dark .p-inputnumber input, body.dark .p-password input{
  background: rgba(2, 6, 23, .35);
  color: rgba(255,255,255,.92);
  border-color: rgba(148, 163, 184, .18);
}

/* ==========================================================================
   KDS TEMPLATE - ajustes estruturais (topbar/sidebar/content/footer)
   ========================================================================== */

/* Base */
body.app-shell{
  background: #ECF2F8 !important;
}

/* Área */
.page-body{
  gap: 16px;
  padding: 14px 14px 22px;
}

/* TOPBAR */
.kds-topbar{
  position: sticky;
  top: 0;
  z-index: 999;

  width: 100%;
  min-height: 64px;

  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(15,23,42,.08);
  box-shadow: none;
}

/* Logo */
.kds-logo-text__title{
  color: #3C4962 !important;
}
.kds-logo-text__subtitle{
  color: #3C4962 !important;
}

/* PILL (Próxima DPS) */
.kds-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 8px 10px;
  border-radius: 12px;

  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
}
.kds-pill__label{
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.kds-pill__item{
  font-size: 13px;
  color: #0f172a;
}
.kds-pill__item b{
  font-weight: 800;
}

/* Prestador logado */
.kds-topmeta__label{
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 2px;
}
.kds-topmeta__value{
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

/* Sidebar + content cards (harmoniza) */
aside.sidebar-static,
main > .surface-card{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
  background: rgba(255,255,255,.92);
}

/* Slim */
aside.sidebar-static.sidebar-slim{
  width: 88px;
  padding: 12px !important;
}

/* Footer clean */
.kds-footer{
  margin-top: 16px;
  padding: 14px 16px;
  text-align: center;
  color: #64748b;
  border-top: 1px solid rgba(15,23,42,.08);
  background: transparent;
}

/* DARK MODE (coerente com body.dark) */
body.dark .kds-topbar{
  background: rgba(2,6,23,.62);
  border-bottom-color: rgba(148,163,184,.14);
}
body.dark .kds-logo-text__title{ color: rgba(255,255,255,.92); }
body.dark .kds-logo-text__subtitle{ color: rgba(148,163,184,.92); }

body.dark .kds-pill{
  background: rgba(148,163,184,.10);
  border-color: rgba(148,163,184,.14);
}
body.dark .kds-pill__label{ color: rgba(148,163,184,.90); }
body.dark .kds-pill__item{ color: rgba(255,255,255,.92); }

body.dark .kds-topmeta__label{ color: rgba(148,163,184,.92); }
body.dark .kds-topmeta__value{ color: rgba(255,255,255,.92); }

body.dark aside.sidebar-static,
body.dark main > .surface-card{
  background: rgba(2,6,23,.55);
  border-color: rgba(148,163,184,.14);
  box-shadow: 0 14px 40px rgba(0,0,0,.38);
}

body.dark .kds-footer{
  color: rgba(148,163,184,.92);
  border-top-color: rgba(148,163,184,.14);
}

/* =====================================================================
   FIX FOOTER "BARRA" / LINHA SOBRANDO
   ===================================================================== */

/* Garantir layout colado no fundo */
html, body { height: 100%; }
body.app-shell { min-height: 100vh; }

/* A page-body precisa crescer pra empurrar o footer pro fim */
.page-body { flex: 1 1 auto; }

/* Reset de margens que criam faixa fantasma */
body { margin: 0 !important; }
.kds-footer { margin: 0 !important; }

/* Remove qualquer borda/linha que esteja vindo de algum css */
.kds-footer{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 14px 16px;
}

/* Se existir algum <p> dentro do footer em algum lugar (antes tinha), zera margem */
.kds-footer p, .kds-footer span { margin: 0 !important; }

/* Linha "invisível" causada por background do container de baixo */
body.dark .kds-footer{
  background: transparent !important;
  border: 0 !important;
}

/* Centro: dá respiro e deixa o card mais leve */
main{
  padding: 10px !important; /* antes era p-3 (12px), aqui controlamos no CSS */
}

main > .surface-card{
  padding: 18px !important;
  border-radius: 16px;

  /* borda mais leve */
  border: 1px solid rgba(15,23,42,.06) !important;

  /* sombra mais suave */
  box-shadow: 0 8px 22px rgba(2,6,23,.06) !important;

  /* evita “colado” em cima/baixo */
  margin: 6px !important;
}

/* Layout flat: sem cards no template */
.kds-body{
  gap: 0 !important;
  padding: 12px 14px 18px;
}

/* Sidebar “seca” */
.kds-sidebar{
  width: 280px;
  padding: 14px 16px;
  background: transparent;
}

/* Conteúdo “seco” + única separação visível */
.kds-content{
  padding: 14px 18px;
  min-width: 0;

}

/* Slim continua funcionando */
aside.sidebar-static.sidebar-slim{
  width: 88px;
  padding: 12px !important;
}

/* Dark mode */
body.dark .kds-content{
 
}