:root{
  --roxo-escuro:#3b2c40;
  --roxo-escuro-2:#35283B;
  --verde-claro:#8dc1b2;
  --vermelho-card:#E0B4AC;
  --azul-botao:#1e3650;
  --texto:#16222e;
  --borda:#aabdbc;
  --fundo:linear-gradient(
    to right,
    #ffffff 40%,
    #fff3f2 82%,
    #d0cad1 100%
  );
  --branco:#fff;
  --sombra:0 10px 24px rgba(0,0,0,.10);
  --raio:14px;
}

*{
  box-sizing:border-box;
}

html, body { overflow-x: hidden; }           /* evita a margem escura global */
.container-app, .area-paginas { overflow-x: clip; }  /* garante que o app não expanda lateralmente */

html,body{
  height:100%;
}

body{
  margin:0;
  color:var(--texto);
  font: 16px/1.4 "Inter",system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:var(--roxo-escuro);
  min-height: 100dvh;
  flex-direction: column;
}

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

.icone-usuario {
  width: 32px;      
  height: 32px;
  margin-right: 10px;
  margin-top: 2px;
}

button{
  cursor:pointer;
  text-transform: uppercase;
}

a{
  color:inherit;
}

/*.pular-conteudo{
  position:absolute;
  left:-9999px;
  top:-9999px;
  background:var(--branco);
  color:var(--azul-botao);
  padding:.5rem .75rem;
  border-radius:8px;
  box-shadow:var(--sombra);
}

.pular-conteudo:focus{
  left:1rem;top:1rem;z-index:1000;
}*/

.topo-site{
  background: linear-gradient(
  90deg,
  #f6d9d7 40%,
  var(--roxo-escuro-2) 100%
);
  position:sticky;
  top:0;
  z-index:50;
}

.barra-superior{
  display:flex;
  align-items:center;
  gap:1rem;
  border-bottom:0;
}

.marca-site{
  display:inline-flex;
  align-items:center;
  background:#fff;                 
  padding-left:15px;
  border-radius:0; 
  text-decoration:none;
  min-width:260px;
  height:100%;
  background: transparent;
}

.logo-pequena{
  height:48px;   
  width:auto;
  display:block;
  padding-left: 10px;
}

.titulo-site{
  font-size:1.3rem;
}

.busca-site{
  margin-left:auto;
  display:flex;
  align-items:center;
  background:#fff;
  border-radius:999px;
  padding:.25rem .5rem;
  min-width:260px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06); /* atualizado */
  border:1px solid var(--borda);
}

.busca-site input{
  border:0;
  outline:0;
  width:100%;
  padding:.4rem .5rem;
  border-radius:999px;
}

.botao-icone{
  border:0;
  background:transparent;
  padding:.25rem .5rem;
  color:#fff;
  font-size:1.1rem;
  cursor: pointer;
  border-radius: 6px;
  transition: transform 0.15s ease;
}

.botao-icone2{
  border:0;
  background:transparent;
  padding:.25rem .5rem;
  color:#fff;
  font-size:1.1rem;
  cursor: pointer;
  border-radius: 6px;
  transition: transform 0.15s ease;
}

.botao-icone:hover,
.botao-icone:focus-visible {
  background: rgba(49, 41, 92, 0.15);
  transform: scale(1.1);
}

.botao-icone span {
  font-size: 1.1rem;
  display: inline-block;
  transition: transform 0.2s ease;
}

.botao-icone:hover span {
  transform: rotate(-5deg);
}


.perfil-usuario{
  margin-left:.5rem;
}

.container-app{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:calc(97vh - 58px);
}

.menu-lateral{
  background:var(--roxo-escuro-2);
  color:#F1EAF1;
  padding:0.5rem 1rem 0rem .75rem;
}

.lista-menu{
  list-style:none;
  margin:0;padding:0;
}

.item-menu{
  width:100%;
  text-align:left;
  padding:.65rem .75rem;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:#F1EAF1;
  font-weight:600;
  cursor:pointer;
  font-weight: bold;
}

.item-menu.ativo,.item-menu:hover{
  background:rgba(255,255,255,.08);
}

.grupo-menu{
  margin-top:.25rem;
}

.colapsar{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.submenu{
  list-style:none;
  margin:.25rem 0 .5rem;
  padding:0 .25rem;
  display:none;
}

.submenu.aberto{
  display:block;
}

.subitem-menu{
  width:100%;
  text-align:left;
  padding:.5rem .75rem;
  border-radius:8px;border:0;
  background:transparent;
  color:#cfe2f2;
  cursor:pointer;
  font-weight: bold;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: .5rem;    
}

.subitem-menu.ativo,.subitem-menu:hover{
    background:rgba(255,255,255,.08);
}

.icone-submenu{
  width: 30px;         
  height: 30px;
  flex-shrink: 0;
  display: inline-block;
}

/* Páginas */
.area-paginas{
  background:var(--fundo);
  padding:0;
  min-height:100%;

}

.pagina{
  display:none;
  padding:1rem 1.25rem 0 1.25rem;
}

.pagina.visivel{
  display:block;
}

.cabecalho-pagina{
  margin-bottom:.5rem;
}

.trilha ol{
  display:flex;
  gap:.5rem;
  list-style:none;
  padding:0;
  margin:0;
  color:#6b7e90;
  font-size:.95rem
}

.trilha a{
  text-decoration:underline;
}

/* Login */
.grade-login{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:2rem;
  align-items:center;
  min-height:calc(100vh - 58px);
  padding:2rem 2rem 3rem;
  background:var(--roxo-escuro);
}

.logo-grande{
  color:#fff;
  font-size:4.2rem;
  font-weight:700;
  letter-spacing:.5px;
}

.cartao-login{
  background:var(--vermelho-card);
  border-radius:24px;
  box-shadow:var(--sombra);
  padding:1.25rem 1.25rem 1rem;
  color:#0a2a36;
}

.abas-login{
  display:flex;
  gap:1rem;justify-content:space-between;
  border-bottom:2px solid rgba(255,255,255,.45);
  margin-bottom:1rem;
}

.aba-login{
  background:transparent;
  border:0;
  font-weight:700;
  padding:.75rem 1rem;
  border-radius:12px 12px 0 0;
  color:#17374a;
}

.aba-login.ativa{
  color:#1a2c4a;
  position:relative;
}

.bloco-formulario{
  display:none;
}

.bloco-formulario.visivel{
  display:block;
}

.campo{display:grid;
       gap:.35rem;
       margin-bottom:.8rem;
}

.campo input, .campo select{
  padding:.7rem .8rem;
  border-radius:10px;
  border:1px solid #aabdbc;
  background:#fff;
  color: #0a2a36;
}

input:hover, select:hover{
    border-color: #E0B4AC;
    background: #fffefe;
    box-shadow: 0 0 0 3px rgba(243, 179, 160, 0.08);
}


.opcoes-select{
  color: #0a2a36;
}

input::placeholder{
  color: #5d7082;
}

select::placeholder{
  color: #5d7082;
}


.botao-primario{
  background:var(--azul-botao);
  color:#fff;
  border:0;
  padding:.8rem 1rem;
  border-radius:10px;
  font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.1);;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateZ(0);
  transform-origin: center;
  will-change: transform, box-shadow, filter;
  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    box-shadow .16s cubic-bezier(.2,.8,.2,1),
    filter .16s cubic-bezier(.2,.8,.2,1),
    border-color .16s ease, background-color .16s ease, color .16s ease;
}

.botao-secundario{
  background:#e7eef4;
  color:#1c334b;
  border:1px solid var(--borda);
  padding:.8rem 1rem;
  border-radius:10px;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateZ(0);
  transform-origin: center;
  will-change: transform, box-shadow, filter;
  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    box-shadow .16s cubic-bezier(.2,.8,.2,1),
    filter .16s cubic-bezier(.2,.8,.2,1),
    border-color .16s ease, background-color .16s ease, color .16s ease;
}

.botao-secundario:hover{
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    filter: saturate(1.02);

}

.botao-primario:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    filter: saturate(1.02);

}



.link-menor{
  background:none;
  border:0;
  color:#133b62;
  text-decoration:underline;
  padding:.25rem .25rem;
  cursor: pointer;
  border-radius: 6px;
  transition: transform 0.15s ease;
}

.link-menor:hover,
.link-menor:focus-visible {
  background: rgba(49, 41, 92, 0.15);
  transform: scale(1.1);
}


.camp-pesquisa:hover{
    border-color: #E0B4AC;
    background: #fffefe;
    box-shadow: 0 0 0 3px rgba(243, 179, 160, 0.08);
}

.busca-site:hover{
    border-color: #E0B4AC;
    background: #fffefe;
    box-shadow: 0 0 0 3px rgba(243, 179, 160, 0.08);
}

.texto-menor{
  color:#5d7082;
  font-size:.9rem;
}

/* Dashboard */
.painel-dashboard{
  display: grid;
  grid-template-columns: minmax(420px, 1fr) clamp(260px, 28vw, 380px);
  grid-template-areas: "menu resumo";
  gap: 2rem;
  align-items: start;
  max-width: 1200px;
  margin: 0;
}

.menu-rapido .titulo-caixa{
  position:absolute;
  left:-9999px;

}

.menu-rapido   { grid-area: menu;   min-width: 0; }  /* atualizado 2 */
.painel-resumo { grid-area: resumo; min-width: 0; } /* atualizado 2 */

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 1rem;
  max-width: 900px;          
  margin: 0 auto;           
}


.cartao-atalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--vermelho-card);
  border: 0;
  border-radius: 12px;
  padding: 1.75rem 1rem;     
  font-weight: 800;
  color: #2E2E3A;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 140px;         
  max-width: 360px;   
  box-shadow:
  0 10px 22px rgba(0,0,0,.16),
  0  4px  8px rgba(0,0,0,.10);           
  position: relative;     
  transform: translateZ(0);            
  transform-origin: center;
  will-change: transform, box-shadow;
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s cubic-bezier(.2,.8,.2,1),
    filter .18s cubic-bezier(.2,.8,.2,1);
}
    
@media (hover:hover){
  .cartao-atalho:hover{
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 14px 28px rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.12);
    filter: saturate(1.02);
    }
  .cartao-atalho:active{
    transform: translateY(-1px) scale(0.995);
    box-shadow: 0 8px 16px rgba(0,0,0,.18), 0 3px 6px rgba(0,0,0,.12);
  }
}

.cartao-atalho:focus-visible{
  outline: 3px solid rgba(59,44,64,.35);           
  outline-offset: 3px;
  box-shadow: 0 14px 28px rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.12);
}

.cartao-atalho .icone-imagem{
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
}

@media (hover:hover){
  .cartao-atalho:hover .icone-imagem{
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce){
  .cartao-atalho{
    transition: none;
  }
}

.icone-atalho{
  font-size:1.8rem;
  margin-bottom:.5rem;
}

.icone-imagem {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
}

.icone-imagem-pequeno{
  width: 30px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.painel-resumo{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.filtros-resumo input{
  width:100%;
  padding:.6rem .75rem;
  border-radius:10px;
  border:1px solid var(--borda);
  background:#fff;
}

.grupo-botoes{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.5rem;
}

.botao-filtro{
  padding: .55rem .9rem;
  border-radius: 20px;
  border: 1.5px solid #D3D8DF;
  background: #fff;
  color: #2c2c34;
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
  position: relative;
  transform: translateZ(0);
  transform-origin: center;
  will-change: transform, box-shadow, filter;
  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    box-shadow .16s cubic-bezier(.2,.8,.2,1),
    filter .16s cubic-bezier(.2,.8,.2,1),
    border-color .16s ease, background-color .16s ease, color .16s ease;
}

@media (hover:hover){
  .botao-filtro:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    filter: saturate(1.02);
  }
  .botao-filtro:active{
    transform: translateY(0); /* “desce” um pouco do hover */
    box-shadow: 0 8px 16px rgba(0,0,0,.12);
    filter: saturate(1);
  }
}

.botao-filtro:focus-visible{
  outline: 3px solid rgba(59,44,64,.35); /* #3b2c40 com alpha */
  outline-offset: 3px;
}

.botao-filtro.ativo{
  background: #f0e4dc;
  color: #1c1c22;
  border: 2px solid #1c1c22;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

@media (hover:hover){
  .botao-filtro.ativo:hover{
    transform: translateY(-2px);
  }
}

.botao-filtro[disabled]{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce){
  .botao-filtro{ transition: none; }
}



.grade-kpis{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.3rem;
  grid-template-areas:
    "k1 k1"
    "k2 k2"
    "k3 k3"
    "k4 k5"
    "k6 k7";
}

.kpi{
  background: #7c9795;
  border-radius:12px;
  padding:.8rem .9rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
  display:flex;
  flex-direction:column;
  gap:.25rem;
  border: 0;
  color: #ffffff;
}


.kpi span{
  font-size:.9rem;
  color:#fff;
  color: rgba(255,255,255,.9);
}

.kpi strong{ 
color: #ffffff; 
}



.kpi strong{
  font-size:1.15rem;
}

/* atualizado */
.kpi:nth-child(1){
  background: #83B7AB;
  grid-area: k1;
}

/* atualizado */

.kpi:nth-child(2){
  background: #df8282;
  grid-area: k2;
}

/* atualizado */

.kpi:nth-child(3){
  background: #626aa2;
  grid-area: k3;
}

.kpi:nth-child(4){ grid-area: k4; }
.kpi:nth-child(5){ grid-area: k5; }
.kpi:nth-child(6){ grid-area: k6; }
.kpi:nth-child(7){ grid-area: k7; }


/* Listagens genéricas */
.barra-acoes{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: .75rem;
  row-gap: .6rem;
  margin:1rem 0;
}

.barra-acoes input{
  padding:.6rem .8rem;
  border-radius:12px;
  border:1px solid var(--borda);
  background:#fff;
  min-width:300px;
}

.lista-cartoes{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
}

.cartao-lista{
  background:#fff;
  border:1px solid var(--borda);
  border-radius:12px;
  padding:.9rem .95rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  box-shadow:var(--sombra);
}

.acoes-cartao{
  display:flex;
  align-items:center;
  gap:.75rem;
}

/* Formulários padrão */
.formulario.padrao{
  background:#fff;
  border-radius:14px;
  border:1px solid var(--borda);
  padding:1rem;
  box-shadow:var(--sombra);
}

.linha-form{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1rem;
}

.largura-grande{
  grid-column:span 1;
}

.largura-media{
  grid-column:span 1;
}

.largura-pequena{
  grid-column:span 1;
}

.periodo-data{
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 12px;
  align-items:center;
  overflow:hidden;
  background: transparent;
}

.campo-data{
 flex: 1;
 min-width: 0;
 border: 0;
 outline:0;
 background: #fff;
 border:1px solid var(--borda);
 color: #0a2a36;
 margin: 2px;
}

.grupo-telefone{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:.5rem;
  align-items:center;
}

.grupo-simples{
  /*display:grid;*/
  /*grid-template-columns:auto 1fr auto;*/
  align-items:center;
  border:1px solid var(--borda);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}

.grupo-simples input{
  border:0;
  padding:.6rem .7rem;
}




.bloco-avancado{
  margin-top:.5rem;
}

.bloco-avancado summary{
  cursor:pointer;
}

.bloco-descontos{
  border:1px dashed var(--borda);
  border-radius:12px;
  padding:1rem;
  margin-top:1rem;
  background:#f9fbfb;
}

.linha-desconto{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

.rodape-pagina-acoes{
  display:flex;
  gap:.75rem;
  justify-content:flex-end;
  margin-top:1rem;
  margin-bottom: 1rem;
}



/* Rodapé */
.rodape-site{
  position:sticky;
  bottom:0;
  background:#7c9795;
  border-top:1px solid rgba(0,0,0,.08)
  border-top: 0; /* atualizado */
}

.conteudo-rodape{
  max-width:1200px;
  padding:.6rem 1rem;
  color:#fff;
  font-size: 12px;
}

.sr-apenas{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}


/* Pílulas de rádio (sim/não) */
.radios-pills .grupo-pills{
  display:flex;
  gap:.5rem;
  align-items:center;
}
.radios-pills .pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid var(--borda);
  border-radius:999px;
  padding:.35rem .7rem;
  background:#fff
}
.radios-pills input{
  appearance:none;
  width:.9rem;
  height:.9rem;
  border:2px solid #556; 
  border-radius:50%; 
  display:inline-block; 
  position:relative; 
  background:#fff;
}

.radios-pills input:checked{
  background:#0b1f36;
  border-color:#0b1f36;
}

.radios-pills .pill span{
  font-weight:600;
  color:#17374a;
}

/* Oculto utilitário */
.oculto{
  display:none;
}

/* Tabelas */



.tabela-responsiva th,
.tabela-responsiva td{
  padding:.6rem .8rem;
          
  white-space:normal;          
  word-break:normal;         
           
  -webkit-hyphens:auto;      
}


.tabela{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.tabela th, .tabela td{
  padding:.8rem .9rem;
  border-bottom:1px solid var(--borda);
  text-align:left;
}

.tabela thead th{
  background:#edf4f1;
  color:#274b56;
  font-size:.9rem;
}
.tabela tfoot td{
  background:#f5faf8;
}
.linha-zebra{
  background:#f8fbfc;
}
.alinha-direita{
  text-align:right;
}

.tabela-responsiva{
  overflow:auto;
  background:#fff;
  border:1px solid var(--borda);
  border-radius:12px;
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;       

}

/* Esconder topo e menu no login */
body.modo-login .topo-site,
body.modo-login .menu-lateral {
  display: none;
}

/* Expandir a área de conteúdo quando o menu some */
body.modo-login .container-app {
  margin: 0;           
  width: 100%;
}

body.modo-login .area-paginas {
  max-width: 1200px;  
  margin: 0 auto;
  background: transparent;
  padding: 0;
}


.logo-grande-imagem {
  width: min(70vw, 600px);  
  height: auto;
  display: block;
  margin-left: 5vw;         
}

#pagina-login .grade-login {
  display: grid;
  grid-template-columns: 1fr 420px; 
  align-items: center;
  gap: 48px;
  min-height: 100vh;
  padding: 32px;
  background: #3b2c40; 
}


body.modo-login .container-app {
  grid-template-columns: 1fr !important; 
}


.btn-menu{
  display:none;
  border:0;
  background:transparent;
  color:#3b2c40;
  font-size:22px;
  padding:.25rem .5rem;
}

/* Quando o menu estiver aberto, bloqueia rolagem do body */
body.menu-aberto{ 
  overflow:hidden;
}

/* Máscara atrás do drawer */
.mask-menu{
  position:fixed;
  top:58px;          
  left:0; right:0; bottom:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:90;
}

body.menu-aberto .mask-menu{
  opacity:1;
  pointer-events:auto;
}

/* dropdown do sair */
.perfil-wrap { position: relative; }

.dropdown-usuario{
  position: absolute;
  right: 8px;
  top: 90%;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: var(--sombra);
  padding: .4rem;
  z-index: 1200; /* acima do header/tabela */
}



.dropdown-usuario .item-menu-usuario{
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: .5rem .6rem;
  border-radius: 8px;
  font-weight: 600;
  color: var(--azul-botao);
  cursor: pointer;
}

.dropdown-usuario .item-menu-usuario:hover{
  background: rgba(160, 134, 168, 0.5);
}


/* garante empilhamento do topo e evita cortes */
.topo-site{ z-index: 1100; }



/* ======== MUITO LARGO (>=1600) ======== */
@media (min-width: 1600px){
  #pagina-dashboard .painel-dashboard{ max-width: 1320px;}
}

/* ======== <=1100px — quebra principal ======== */
/* Drawer do menu, dashboard 1 coluna, grades em 2 colunas */
@media (max-width: 1100px){
  .btn-menu{ display:inline-block; }

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

  /* Menu lateral como drawer fixo */
  .menu-lateral{
    position: fixed;
    top: 58px;
    left: -280px;
    width: 280px;
    height: calc(100vh - 58px);
    overflow: auto;
    transition: left .25s ease;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
  }
  body.menu-aberto .menu-lateral{ 
    left: 0; 
    visibility: visible;
    pointer-events: auto;
    opacity: 1; 
  }
  

  /* Dashboard em 1 coluna */
  .painel-dashboard{
    grid-template-columns: 1fr 380px;
    grid-template-areas: "menu resumo";
    gap: 1.75rem;
  }

  .grade-cartoes{ grid-template-columns: repeat(2, 1fr); }

  /* Grades */
  .lista-cartoes{ grid-template-columns: 1fr 1fr; }

  /* Login */
  .grade-login{ grid-template-columns: 1fr; }
  .logo-grande{ text-align: center; }
}



/* ======== <=900px — ajustes de login ======== */
@media (max-width: 900px){
  /* Dashboard: empilha menu rápido e resumo */
  .painel-dashboard{
    grid-template-columns: 1fr;
    grid-template-areas:
      "menu"
      "resumo"; 
    gap: 1.25rem;
  }

  /* Login */
  #pagina-login .grade-login{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 16px;
  }
  .logo-grande-imagem{
    margin: 0 auto;
    width: min(80vw, 400px);
  }

  /* KPIs empilhadas */
  .grade-kpis{
    grid-template-columns: 1fr;
    grid-template-areas:
      "k1"
      "k2"
      "k3"
      "k4"
      "k5"
      "k6"
      "k7";
  }

  .pagina{
    margin-bottom: 6px;
  }
}


/* ======== mobile ======== */
@media (max-width: 680px){
  .grade-cartoes{ grid-template-columns: repeat(auto-fit, 300px); justify-content: center;}
  .lista-cartoes{ grid-template-columns: 1fr; }

  .linha-form{ grid-template-columns: 1fr; }
  .grupo-telefone{ grid-template-columns: 100px 1fr; }

  .marca-site{
  padding-left:0;
  min-width:100px;
  }
  .busca-site{
    padding: 0;
    min-width: 0;
  }
 .botao-icone{
  padding: 0.2rem;
 }

 .botao-icone2{
  padding: 0.2rem;
 }

 .logo-pequena{
  height: 38px;
 }

 .barra-superior{
  gap: 0;
 }
 .tabela-scroll{
  width: 100%;
  overflow-x: auto;              /* rolagem horizontal quando precisar */
  overflow-y: auto;              /* vertical se precisar */
  max-height: 780px;
  max-width: 650px;
  }
  .periodo-data{ grid-template-columns: 1fr; }

}

@media (max-width: 650px){
 .tabela-scroll{
  max-width: 550px;
  }
}

@media (max-width: 600px){
 .tabela-scroll{
  max-width: 500px;
  }
}
@media (max-width: 550px){
 .tabela-scroll{
  max-width: 450px;
  }
}
@media (max-width: 500px){
 .tabela-scroll{
  max-width: 400px;
  }
}
@media (max-width: 450px){
 .tabela-scroll{
  max-width: 350px;
  }
}

#aba-cadastrar,
#form-cadastrar{
  display: none !important;
}