/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/*
 *= require_self
 *= require dashboard
  *= require trix
 *= require actiontext
 */
 :root{ --loader-size:96px; --spin:2.2s; --breath:1.6s }

/* overlay de tela toda */
#app-loader{
  position:fixed; inset:0; z-index:100000;
  display:grid; place-items:center;
  background: #00000061; backdrop-filter:blur(10px);
  opacity:1; transition:opacity .45s ease;
}
#app-loader.is-hidden{ opacity:0; pointer-events:none }

/* sem máscara: mantém as cores originais */
.app-loader-icon{
  width:var(--loader-size);
  height:var(--loader-size);
  animation: spin var(--spin) linear infinite,
             breath var(--breath) ease-in-out infinite;
}
.app-loader-icon > img{
  width:100%; height:100%;
  object-fit:contain; display:block;
}

@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes breath{
  0%,100%{ transform:scale(1) }
  50%{ transform:scale(1.07) }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .app-loader-icon{ animation:none }
}


:root { --zoom: 1; }
html  { zoom: var(--zoom); }    

 .title-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;

  }
  
  .logo-title {
      position: absolute;
    left: 80px;
    height: 114%;
    /* margin-left: 20px; */
    top: 0;
    z-index: 5;
  }
  
  .title {
    font-size: 28px;
    margin: 0;
  }