@import url("sidebar.css?v=27062025");
@import url("snap.css?v=27062025");
@import url("app-style.css?v=27062025");
@import url("style-cifras.css?v=27062025");
@import url("https://canticosliturgicos.com.br/assets/css/style-online.css?v=27062025");


body {
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

 /* Defina as cores principais a serem usadas no app #6B853B sobre tom #94a773
 Novas cores #707122 sobre tom #91924d */
:root {
  --cor-principal: #6B853B;
  --cor-sobre-tom: #94a773;
  --cor-verde: #6B853B;
  --cor-branco: #f2f5f7;
  --cor-roxo: #c38fe6;
  --cor-vermelho: #d85e4e;
  --cor-nova: #707122;
  --cor-nova-sobre: #91924d;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,
sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,
footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: auto;
  padding: 0;
  border: 0;
  font-size: 100%;
  text-transform: uppercase;
}

ol,ul { list-style: none; }

blockquote,q { quotes: none; }

blockquote:before,blockquote:after,q:before,q:after {  
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

menu {
  -webkit-transition: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.overthrow-enabled .overthrow {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

h2.accordion {
  cursor: pointer;
}

div.accordion {
  display: none;
}

.oculto {
  margin-top: 10px;
  text-align: center;
  font-size: 18px;
  text-transform: uppercase;
}

.oculto img {
  border-radius: 50%;
}

@media screen and (max-width: 500px) {
  .oculto {
    font-size: 12px;
  }
}

/* BOX DA HOME */
.box {
  width: 100%;
  float: left;
}

/* Estilo da tabela (mantido simples) 
.tabela {
  padding: 0px 2px 5px 2px;
}
*/
/* Estilo base dos blocos internos */
.form,
.home,
.campo,
.destaque {
  flex: 1 1 calc(50% - 16px); /* 2 colunas com espaçamento */
  border: 1px solid var(--cor-principal);
  text-align: center;
  margin: 5px 0px;
  padding: 10px;
  text-transform: uppercase;
  background-color: #fff;
  border-radius: 7px;
}

/* Ajustes de largura específicos (se necessário) */
.form {
  margin-bottom: 0.5em;
}

.destaque {
  flex-basis: 100%; /*  pode ocupar linha inteira se quiser */
}

/* Responsivo: celular - 1 coluna */
@media screen and (max-width: 767px) {
  .form,
  .home,
  .destaque {
    flex: 1 1 100%;
  }  
}

/* Responsivo: até 500px = container box ocupa 100% */
@media screen and (max-width: 500px) {
  .box {
    width: 100%;
    float: none;          /* REMOVE o float */
    margin: 0 auto;       /* Centraliza */
    display: block;       /* Garante que seja um bloco */
  }
}

/* MENU FOLHETOS */
.menufolheto {
  background: #ccc;
  position: fixed;
  z-index: 3;
  width: 100%;
  left: 0;
  top: 60;
}

.logo {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-decoration: none;
  font-weight: bold;
  line-height: 50px;
  padding: 0 20px;
  color: #fff;
  float: left;
}

#btn {
  width: 30px;
  height: 25px;
  cursor: pointer;
  background: url('../img/open-folhetos.png');
}

.closebtn {
  background: url('../img/close.png') !important;
  transition: background-color .4s;
}

.btn-menu {
  width: 30px;
  height: 30px;
  padding: 10px 5px;
  margin-right: 13px;
}
/*
.menu-item {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border-top: 1px solid #fff;
  padding: 5px 5px 5px 1.2rem;
  font-size: 12px;
  cursor: pointer;
  color: #FFF;
}

.menu-item:hover {
  background: #999;
  cursor: pointer;
  transition: background-color .4s;
}
*/

/* TOPCOAT-LIST CORES */
/* TIT VERDE */
/* Base Style for topcoat-list__tit */
.topcoat-list__tit {
  list-style: none;
  width: 100%;
  text-align: center;
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: bold;
  padding: 10px 0;
  cursor: pointer;
  color: #FFF;
  background-color: var(--cor-principal);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  transition: background-color 0.4s;
  border-radius: 7px;
}

.topcoat-list__tit:hover {
  color: #e2dfdf;
}

.topcoat-list__tit.vermelho,
.topcoat-list__tit.roxo,
.topcoat-list__tit.verde {
  background-color: var(--cor-branco);
  border-bottom: 2px solid #5a5757;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  color: #FFF;
}

.topcoat-list__tit.vermelho:hover,
.topcoat-list__tit.roxo:hover,
.topcoat-list__tit.verde:hover {
  color: #e2dfdf;
}
.topcoat-list__tit.branco {
  background-color: var(--cor-branco);
  border-bottom: 2px solid #000;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  color: #000;
}
.topcoat-list__tit.branco:hover {
  color: #333131;
}
.topcoat-list__tit.vermelho { background-color: var(--cor-vermelho); }
.topcoat-list__tit.verde { background-color: var(--cor-verde); }
.topcoat-list__tit.roxo { background-color: var(--cor-roxo); }

/* CINZA */
.topcoat-list__ciz {
  list-style: none;
  margin-bottom: 5px;
  width: 100%;
  background-color: color-mix(in srgb, var(--cor-principal) 80%, white 20%);
  border-bottom: 2px solid var(--cor-principal);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 0;
  cursor: pointer;
  border-radius: 7px;
  color: #FFF;
}

.topcoat-list__ciz a {
  text-decoration: none;
  color: #333131;
}

.topcoat-list__ciz:hover {
  color: #e2dfdf;
  transition: background-color 0.4s;
}

/* VER */
.topcoat-list__ver,
.topcoat-list__ver.active {
  width: 100%;
  color: #FFF;
  text-decoration: none;
  background-color: var(--cor-principal);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  list-style-type: none;
  text-align: center;
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: bold;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 2px solid #5a5757;
  border-radius: 7px;
}

.topcoat-list__ver.active,
.topcoat-list__ver:hover {
  color: #e2dfdf;
}

/* Sidebar Item */
.topcoat-list__item,
.topcoat-list__item_menu,
.topcoat-list__play {
  padding: 20px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.4s;
  border-radius: 7px;
  margin-bottom: 2px;
}

.topcoat-list__item {
  border-top: 1px solid #9daca9;
  border-bottom: 2px solid #9daca9;
  background-color: transparent;
  list-style-type: none;
  text-align: left;
}

.topcoat-list__item:hover {
  color: #333131;
}

.topcoat-list__item.active {
  padding: 16px;
  background-color: var(--cor-principal);
  color: #fff;
}

.topcoat-list__item a,
.topcoat-list__item.active a {
  text-decoration: none;
  color: #000;
  font-size: 12px;
}

.topcoat-list__item.active a {
  color: #fff;
}

.topcoat-list__item img,
.topcoat-list__item span {
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.topcoat-list__item span {
  color: #333;
  font-size: 10px;
}

/* Sidebar Menu */
.topcoat-list__item_menu {
  border-bottom: 2px solid #9daca9;
  background-color: #fff;
  color: #000;
  font-size: 12px;
  list-style: none;
  margin-bottom: 2px;
  text-decoration: none;
}

.topcoat-list__item_menu:hover {
  color: #333131;
}

/* Playlist */
.topcoat-list__play {
  border-top: 1px solid #9daca9;
  border-bottom: 2px solid #9daca9;
  margin-bottom: 2px;
  text-transform: uppercase;
  color: #000;
  font-size: 14px;
}

.topcoat-list__play:hover {
  color: #333131;
}

.topcoat-list__play span {
  font-size: 10px;
  color: #333;
  font-weight: bold;
  margin: 0;
  padding: 0;
}


input:focus+.overlay {
  background-color: rgba(0, 0, 0, .3);
  z-index: -1;
}

.overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: -1;
  transition: all .5s;
}

/* Estilização do campo de busca */
.search {
  display: block;
  width: 100%;
  margin: 5px auto; /* Centraliza horizontalmente */
  height: 2.5rem;
  padding-left: 2.5rem;
  border-radius: 7px;

  font-size: 18px;
  font-weight: bold;
  color: var(--cor-principal);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);

  border: 1px solid var(--cor-principal);
  background-color: #fff;
  background-image: url(../img/search.svg);
  background-position: 1rem center;
  background-repeat: no-repeat;
  background-size: 18px;

  position: relative;
  z-index: 0;
}

/* Efeito ao focar no input */
.search:focus {
  color: var(--cor-principal);
  border-color: #646F51;
  outline: none;
}


/* ---------------------------------------------------
    CSS MENU FLUTUANTE NOVO 
----------------------------------------------------- */

.item_menu_flu {
  border-radius: 50%;
  color:black;
  padding: 3px;
  right: 10px;
  bottom: 20px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  background-color: #fff;
  position:fixed;
}

i {
  font-size: 38px;
}

.activated {
  transform: rotate(120deg);
}

.activated ~ .options .item_menu_flu:hover {
  scale: 1.0;
  transition: scale .3s;
}

.activated ~ .options .item_menu_flu:nth-child(1) {
  transform: translate(0, -3.5rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}  
.activated ~ .options .item_menu_flu:nth-child(2) {
  transform: translate(0, -6.5rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition-delay: .1s;
}  
.activated ~ .options .item_menu_flu:nth-child(3) {
  transform: translate(0, -9.5rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition-delay: .2s;
}
.activated ~ .options .item_menu_flu:nth-child(4) {
  transform: translate(0, -12.5rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition-delay: .2s;
}
.activated ~ .options .item_menu_flu:nth-child(5) {
  transform: translate(0, -15.5rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition-delay: .2s;
}
.activated ~ .options .item_menu_flu:nth-child(6) {
  transform: translate(0, -18.5rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition-delay: .2s;
}