:root {
  

  --mo-toque: 80ms;
  
  --mo-volta: 320ms;
  

  --mo-passa: 140ms;

  --mo-mola: cubic-bezier(.34, 1.56, .64, 1);
  --mo-saida: cubic-bezier(.22, 1, .36, 1);

  


  --mo-fundo: .94;     
  --mo-fundo-ic: .92;  
  --mo-fundo-mi: .82;  
  --mo-fundo-gr: .965; 

  

















  --mo-sobe: 2px;      
  --mo-anda: 4px;      

  

  --mo-luz: inset 0 1px 0 rgba(255, 255, 255, .13);
  --mo-fosso: inset 0 2px 5px rgba(0, 0, 0, .55);
}





button, summary, [role="button"] {
  transition: transform var(--mo-volta) var(--mo-mola);
}
button:where(:not(:disabled):not([draggable="true"])):active,
summary:active,
[role="button"]:where(:not([aria-disabled="true"])):active {
  transform: scale(var(--mo-fundo));
  transition-duration: var(--mo-toque);
  transition-timing-function: var(--mo-saida);
}




















.btn {
  transition:
    transform var(--mo-volta) var(--mo-mola),
    box-shadow var(--mo-passa) ease,
    border-color var(--mo-passa) ease,
    background var(--mo-passa) ease;
}
.btn:hover:not(:disabled) {
  transform: translateY(calc(-1 * var(--mo-sobe)));
  box-shadow: var(--mo-luz);
}
.btn:active:not(:disabled) {
  transform: scale(var(--mo-fundo)) translateY(1px);
  box-shadow: var(--mo-fosso);
  transition-duration: var(--mo-toque);
  transition-timing-function: var(--mo-saida);
}



.btn.primary:hover:not(:disabled) {
  box-shadow: var(--mo-luz), 0 4px 18px rgba(228, 38, 38, .45);
}
.btn.primary:active:not(:disabled) { box-shadow: var(--mo-fosso), 0 0 10px rgba(228, 38, 38, .35); }
.btn.ok:hover:not(:disabled)       { box-shadow: var(--mo-luz), 0 4px 16px rgba(46, 204, 113, .3); }
.btn.ok:active:not(:disabled)      { box-shadow: var(--mo-fosso); }





















.btn.ic:hover:not(:disabled) { transform: translateY(calc(-1 * var(--mo-sobe))) scale(1.03); }
.btn.ic:active:not(:disabled) { transform: scale(var(--mo-fundo-ic)); box-shadow: var(--mo-fosso); }
























.x, .ac, .nf-ajuda, .nf-pill button,
.pc-achado-x, .nx-visto, .nx-tapar, .vc-tirar, .nf-copiar, .vc-mod {
  transition:
    transform var(--mo-volta) var(--mo-mola),
    background var(--mo-passa) ease,
    color var(--mo-passa) ease,
    border-color var(--mo-passa) ease,
    opacity var(--mo-passa) ease;
}
.x:hover, .ac:hover, .nf-ajuda:hover, .nf-pill button:hover,
.pc-achado-x:hover, .nx-visto:hover, .nx-tapar:hover, .vc-tirar:hover,
.nf-copiar:hover, .vc-mod:hover { transform: scale(1.14); }
.x:active, .ac:active, .nf-ajuda:active, .nf-pill button:active,
.pc-achado-x:active, .nx-visto:active, .nx-tapar:active, .vc-tirar:active,
.nf-copiar:active, .vc-mod:active {
  transform: scale(var(--mo-fundo-mi));
  transition-duration: var(--mo-toque);
  transition-timing-function: var(--mo-saida);
}



.nf-copiar:active { transform: scale(var(--mo-fundo-mi)) translateY(1px); }













.lado-i, .lado-sub button, .pm-op, .pr-op, .ol-op, .tp-item, .yt-tab, .subtab {
  transition:
    transform var(--mo-volta) var(--mo-mola),
    background var(--mo-passa) ease,
    color var(--mo-passa) ease,
    box-shadow var(--mo-passa) ease,
    border-color var(--mo-passa) ease;
}
.lado-i:hover, .lado-sub button:hover, .pm-op:hover, .pr-op:hover,
.ol-op:hover, .tp-item:hover { transform: translateX(var(--mo-anda)); }






.lado-i:active, .lado-sub button:active, .pm-op:active, .pr-op:active,
.ol-op:active, .tp-item:active, .yt-tab:active, .subtab:active {
  transform: translateX(2px) scale(var(--mo-fundo-gr));
  transition-duration: var(--mo-toque);
  transition-timing-function: var(--mo-saida);
}
.lado-i .li-ico, .lado-i .li-rot {
  transition: transform var(--mo-volta) var(--mo-mola);
}
.lado-i:hover .li-ico { transform: translateX(calc(var(--mo-anda) / 2)) scale(1.1); }
.lado-i:hover .li-rot { transform: translateX(calc(var(--mo-anda) / 4)); }






.gl-pasta-lad {
  transition:
    transform var(--mo-volta) var(--mo-mola),
    border-color var(--mo-passa) ease,
    box-shadow var(--mo-passa) ease;
}





.gl-pasta-lad:active {
  transform: translateY(-1px) scale(var(--mo-fundo-gr));
  box-shadow: var(--mo-fosso);
  transition-duration: var(--mo-toque);
}





.seg button, .jul-b {
  transition:
    transform var(--mo-volta) var(--mo-mola),
    background var(--mo-passa) ease,
    color var(--mo-passa) ease,
    box-shadow var(--mo-passa) ease;
}




.seg button:hover:not(.on), .jul-b:hover:not(.on) { transform: translateY(-1px); }



.seg button:active, .jul-b:active {
  transform: scale(.92);
  transition-duration: var(--mo-toque);
  transition-timing-function: var(--mo-saida);
}



.pc-vivo .seg button.on, .pc-vivo .jul-b.on { animation: mo-acende 340ms var(--mo-saida); }








@keyframes mo-acende {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}











.vr-b, .gp-cor {
  transition:
    transform var(--mo-volta) var(--mo-mola),
    background var(--mo-passa) ease,
    color var(--mo-passa) ease,
    box-shadow var(--mo-passa) ease,
    border-color var(--mo-passa) ease;
}
.vr-b:active, .gp-cor:active {
  transform: scale(.88);
  transition-duration: var(--mo-toque);
  transition-timing-function: var(--mo-saida);
}
.nf-julgar .nf-vr-seg .vr-b:active {
  transform: scale(.88);
  transition-duration: var(--mo-toque);
  transition-timing-function: var(--mo-saida);
}










































.nf-chip,

.nf-per,

.preset,

.nf-ord,

.nf-fora,

.chip-sim,

.tax-bt,

.bo-bt,

.nx-visao,

.nx-sub,

.nf-nicho[data-nf-nicho],


.nf-modos button,

.camadas button,

.ch-bt,

.ch-limpar,

.gm-preset,

.gm-idi {
  transition:
    transform var(--mo-volta) var(--mo-mola),
    background var(--mo-passa) ease,
    color var(--mo-passa) ease,
    border-color var(--mo-passa) ease;
}
.nf-chip:not([draggable="true"]):active,

.nf-per:not([draggable="true"]):active,

.preset:not([draggable="true"]):active,

.nf-ord:active,

.nf-fora:active,

.chip-sim:active,

.tax-bt:active,

.bo-bt:active,

.nx-visao:active,

.nx-sub:active,

.nf-nicho[data-nf-nicho]:active,


.nf-modos button:active,

.camadas button:active,

.ch-bt:active,

.ch-limpar:active,

.gm-preset:active,

.gm-idi:active {
  transform: scale(.93);
  transition-duration: var(--mo-toque);
  transition-timing-function: var(--mo-saida);
}

.nf-chip[draggable="true"]:active,
.nf-per[draggable="true"]:active,
.preset[draggable="true"]:active { transform: none; }










.ctl {
  transition:
    transform var(--mo-volta) var(--mo-mola),
    border-color var(--mo-passa) ease,
    background var(--mo-passa) ease,
    box-shadow var(--mo-passa) ease;
}




.ctl:hover:not(:focus-within) { box-shadow: var(--mo-luz); }






.ctl.gav:active {
  transform: scale(var(--mo-fundo));
  transition-duration: var(--mo-toque);
  transition-timing-function: var(--mo-saida);
}



.ctl.gav:active:not(:focus-within) { box-shadow: var(--mo-fosso); }
.gav-seta { transition: transform 240ms var(--mo-mola); }






















button:focus-visible, summary:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 4px;
}







button:focus-visible, summary:focus-visible, [role="button"]:focus-visible {
  transition: outline-offset 130ms var(--mo-mola);
}

























































































:root {
  
  --mo-entra: 340ms;
  --mo-entra-cv: cubic-bezier(.16, 1, .3, 1);
  


  --mo-degrau: 26ms;
  


  --mo-entra-sobe: 6px;
}








@keyframes pcEntra {
  from { opacity: 0; transform: translateY(var(--mo-entra-sobe)); }
}






@keyframes pcVeuEntra {
  from { background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); }
}

@media (prefers-reduced-motion: no-preference) {

  












  html:not(.pc-boot) .view.on > * {
    animation: pcEntra var(--mo-entra) var(--mo-entra-cv) backwards;
  }
  html:not(.pc-boot) .view.on > :nth-child(2)   { animation-delay: calc(var(--mo-degrau) * 1); }
  html:not(.pc-boot) .view.on > :nth-child(3)   { animation-delay: calc(var(--mo-degrau) * 2); }
  html:not(.pc-boot) .view.on > :nth-child(4)   { animation-delay: calc(var(--mo-degrau) * 3); }
  html:not(.pc-boot) .view.on > :nth-child(5)   { animation-delay: calc(var(--mo-degrau) * 4); }
  html:not(.pc-boot) .view.on > :nth-child(n+6) { animation-delay: calc(var(--mo-degrau) * 5); }

  

















  :is(.nf-grid, .grid, .nx-grid, .cg-grid, .cg-mosaico) > :nth-child(-n+8) {
    --mo-entra-sobe: 4px;
    animation: pcEntra var(--mo-entra) var(--mo-entra-cv) backwards;
  }
  :is(.nf-grid, .grid, .nx-grid, .cg-grid, .cg-mosaico) > :nth-child(2) { animation-delay: calc(var(--mo-degrau) * 1); }
  :is(.nf-grid, .grid, .nx-grid, .cg-grid, .cg-mosaico) > :nth-child(3) { animation-delay: calc(var(--mo-degrau) * 2); }
  :is(.nf-grid, .grid, .nx-grid, .cg-grid, .cg-mosaico) > :nth-child(4) { animation-delay: calc(var(--mo-degrau) * 3); }
  :is(.nf-grid, .grid, .nx-grid, .cg-grid, .cg-mosaico) > :nth-child(5) { animation-delay: calc(var(--mo-degrau) * 4); }
  :is(.nf-grid, .grid, .nx-grid, .cg-grid, .cg-mosaico) > :nth-child(n+6):nth-child(-n+8) {
    animation-delay: calc(var(--mo-degrau) * 5);
  }

  









  .overlay.on            { animation: pcVeuEntra 160ms ease-out; }
  .overlay.on > .modal   { animation: pcEntra var(--mo-entra) var(--mo-entra-cv) 40ms backwards; }
}
















@media (prefers-reduced-motion: reduce) {
  


  button, summary, [role="button"],
  .li-ico, .li-rot, .gav-seta, .ac, .x, .vr-b, .gp-cor, .nf-copiar,
  .ctl, .ctl.gav, .gl-pasta-lad {
    transition: none !important;
    animation: none !important;
  }
  button:hover, button:active, button:focus-visible,
  summary:hover, summary:active, [role="button"]:hover, [role="button"]:active,
  .lado-i:hover .li-ico, .lado-i:hover .li-rot,
  .ac:hover, .ac:active, .x:hover, .x:active,
  .vr-b:hover, .vr-b:active, .gp-cor:hover, .gp-cor:active,
  .nf-copiar:hover, .nf-copiar:active,
  .ctl:hover, .ctl:active, .ctl.gav:active,
  .gl-pasta-lad:hover, .gl-pasta-lad:active { transform: none !important; }
}