/* ──────────────────────────────────────────────────────────────────────
   app.css — estilos do módulo de liturgia
   Extraído de lib/CSS.css + .liturgia/css/css.css
   ────────────────────────────────────────────────────────────────────── */

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-image: url('/img/Background.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

a,
tr,
td,
li,
button,
i {
    cursor: pointer;
}

i::after:not(.limpo) {
    content: " ";
    white-space: pre;
}

td>i::after {
    content: none !important;
}

/* ── Layout principal ─────────────────────────────────────────────────── */

.Principal {
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    background-color: rgba(248, 249, 250, 0.82);
    backdrop-filter: blur(2px);
}

.janela {
    background: transparent;
    padding: .25rem;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: 100%;
    gap: .25rem;
    overflow: hidden;
}

/* ── Navbar ───────────────────────────────────────────────────────────── */

.nav-link:not(:last-child) {
    padding: 0 !important;
    padding-right: 1rem !important;
}

.nav-link:last-child {
    padding: 0 !important;
}

.nav-item:not(:last-child) {
    padding: 0 !important;
    padding-right: 1rem !important;
}

.nav-item:last-child {
    padding: 0 !important;
}

.nav-item.dropdown {
    padding: 0 !important;
}

.dropdown-toggle::after {
    margin-left: 0 !important;
}

#Menu>li>a::after {
    content: none !important;
}

#Menu>li>a>i::after {
    content: none !important;
}

/* ── Card ─────────────────────────────────────────────────────────────── */

.card-header {
    min-height: 40px;
    padding: .25rem .75rem;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr;
    grid-column-gap: .25rem;
    align-items: center;
}

.card-header>titulo {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.card-header>barra {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.card-header>barra>i {
    margin-right: .5rem !important;
}

.card-header>barra>i::after {
    content: none !important;
}

.card-body {
    overflow-y: auto;
    padding: 0;
}

.card-footer {
    padding: .5rem;
}

.card-footer>*:not(:first-of-type) {
    margin-right: .25rem;
}

/* ── Lista de menu ────────────────────────────────────────────────────── */

.ulMenu {
    padding: 0;
    user-select: none;
}

.ulMenu>li {
    font-weight: normal;
    list-style-type: none;
    padding: .25rem;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.ulMenu>li:hover:not(.bg-warning) {
    backdrop-filter: brightness(1.3);
    text-shadow: 0 0 1px black;
}

/* ── Seleção por tipo (sobrescreve bg-warning do Bootstrap) ───────────── */

.ulMenu>li.bg-warning {
    /* fallback para itens sem tipo (lista de datas) */
    background-color: #e6a817 !important;
    color: #1a1a1a !important;
}

li.hino.bg-warning {
    background-color: #5b2d99 !important;
    color: #fff !important;
    border-left: 4px solid #f0d000;
}

li.louvor.bg-warning {
    background-color: #23784a !important;
    color: #fff !important;
    border-left: 4px solid #f0d000;
}

li.passagem.bg-warning {
    background-color: #1a6d96 !important;
    color: #fff !important;
    border-left: 4px solid #f0d000;
}

li.mensagem.bg-warning {
    background-color: #a43220 !important;
    color: #fff !important;
    border-left: 4px solid #f0d000;
}

li.coral.bg-warning {
    background-color: #7e4600 !important;
    color: #fff !important;
    border-left: 4px solid #f0d000;
}

li.extra.bg-warning {
    background-color: #555555 !important;
    color: #fff !important;
    border-left: 4px solid #f0d000;
}

/* ── Ícones de tipo de item de liturgia ───────────────────────────────── */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Cores por tipo (espelham Live/Painel.css) ────────────────────────── */

li.hino {
    background-color: #3d1f6d;
    color: #e0d0ff;
}

li.louvor {
    background-color: #1a5632;
    color: #c8f0d4;
}

li.passagem {
    background-color: #14506e;
    color: #c4e3f5;
}

li.mensagem {
    background-color: #7a2517;
    color: #fdd8d2;
}

li.coral {
    background-color: #5c3200;
    color: #ffe5c8;
}

li.extra {
    background-color: #3a3a3a;
    color: #e0e0e0;
}

/* ── Ícones de tipo de item de liturgia ───────────────────────────────── */

li.passagem::before,
li.mensagem::before,
li.hino::before,
li.louvor::before,
li.coral::before,
li.extra::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: .25rem;
}

li.passagem::before {
    content: "\f647";
}

li.mensagem::before {
    content: "\f654";
}

li.hino::before {
    content: "\f001";
}

li.louvor::before {
    content: "\f7a6";
}

li.coral::before {
    content: "\f0c0";
}

li.extra::before {
    content: "\f87c";
}

/* ── Ícones inline (títulos, botões com texto) ────────────────────────── */

titulo i.fas,
titulo i.fa,
titulo i.far,
titulo i.fab {
    margin-right: .25rem;
}

/* ── Bootbox ──────────────────────────────────────────────────────────── */

.bootbox-close-button {
    background-color: inherit !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
}

.bootbox.p-0 .modal-body {
    padding: 0;
}

.bootbox.centralizado>.modal-dialog {
    height: calc(100% - 64px - .5rem) !important;
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ── Texto elemento <texto> (container do editor) ─────────────────────── */

texto {
    display: grid;
    overflow: hidden;
    flex: 1;
}

#bodyCorpo {
    height: 100%;
    overflow: hidden;
}

/* ── Responsivo mínimo ────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .janela {
        grid-template-columns: 1fr !important;
        grid-auto-flow: row;
        grid-template-rows: unset;
        overflow-y: auto;
    }
}
/* ── Escolha da passagem (js/passagem.js) ─────────────────────────────── */

.pm-modal .modal-body { padding: .75rem; }

.pm {
    height: 72vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: .5rem;
}

.pm-topo #pmVersao { max-width: 7rem; }
.pm-topo #pmErro:empty { display: none; }

.pm-corpo {
    display: grid;
    grid-template-columns: minmax(15rem, 34%) 1fr;
    gap: .75rem;
    min-height: 0;
}

.pm-livros-painel {
    overflow-y: auto;
    border-right: 1px solid #dee2e6;
    padding-right: .5rem;
}

.pm-rotulo {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    margin: .25rem 0;
}

.pm-livros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: .25rem;
    margin-bottom: .5rem;
}

.pm-livro {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    border: 1px solid #d0dde6;
    background: #f4f8fb;
    border-radius: .3rem;
    padding: .2rem .4rem;
    text-align: left;
    font-size: .8rem;
    line-height: 1.2;
    min-width: 0;
}
.pm-livro .abrev { font-weight: 700; color: #14506e; min-width: 1.9rem; }
.pm-livro .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; }
.pm-livro:hover { border-color: #14506e; }
.pm-livro.ativo { background: #14506e; border-color: #14506e; }
.pm-livro.ativo .abrev, .pm-livro.ativo .nome { color: #fff; }

.pm-leitura {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-height: 0;
}
.pm-leitura .pm-texto { flex: 1; min-height: 0; }
.pm-capitulos { flex-shrink: 0; }

.pm-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.pm-cabecalho strong { font-size: 1.1rem; }

.pm-capitulos {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    max-height: 5.2rem;
    overflow-y: auto;
}
.pm-capitulos:empty { display: none; }
.pm-capitulos button {
    min-width: 2.1rem;
    padding: .1rem .3rem;
    font-size: .8rem;
    border: 1px solid #d0dde6;
    background: #fff;
    border-radius: .25rem;
}
.pm-capitulos button.tem-selecao { border-color: #e0a800; background: #fff3cd; }
.pm-capitulos button.ativo { background: #14506e; border-color: #14506e; color: #fff; }

.pm-texto {
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: .35rem;
    padding: .5rem;
    background: #fff;
}

.pm-vazio {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #6c757d;
}

.pm-v {
    margin: 0;
    padding: .25rem .4rem;
    border-radius: .25rem;
    cursor: pointer;
    line-height: 1.5;
    user-select: none;
}
.pm-v sup { font-weight: 700; color: #14506e; margin-right: .15rem; }
.pm-v:hover { background: #eef5fa; }
.pm-v.selecionado { background: #fff3cd; box-shadow: inset 3px 0 0 #e0a800; }

.pm-dica { font-size: .8rem; color: #6c757d; }

.pm-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .6rem;
    background: bisque;
    border-radius: .35rem;
    min-height: 2.4rem;
}

@media (max-width: 768px) {
    .pm { height: 80vh; }
    .pm-corpo { grid-template-columns: 1fr; grid-template-rows: 30% 1fr; }
    .pm-livros-painel { border-right: 0; border-bottom: 1px solid #dee2e6; }
}

/* ── Arrastar para ordenar (capa.js: ativarArrastar) ──────────────────── */

#bodyLiturgia li[data-tipo] { cursor: grab; }
#bodyLiturgia li[data-tipo]::after {
    content: "\f58e"; /* grip-vertical */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    float: right;
    opacity: 0;
    transition: opacity .15s;
}
#bodyLiturgia li[data-tipo]:hover::after { opacity: .6; }
#bodyLiturgia li.arrastando { opacity: .35; outline: 2px dashed #f0d000; outline-offset: -2px; }
.sortable-chosen { cursor: grabbing; }

/* ── Escolha do hino (js/hino.js) — reaproveita o layout .pm da passagem ─ */

.hm .pm-corpo { grid-template-columns: minmax(16rem, 36%) 1fr; }
.hm #hmHinario { max-width: 16rem; }

.hm-lista {
    list-style: none;
    margin: 0;
    padding: 0 .25rem 0 0;
    overflow-y: auto;
    border-right: 1px solid #dee2e6;
}
.hm-item {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .3rem .5rem;
    border-radius: .25rem;
    cursor: pointer;
}
.hm-item:hover { background: #f1ecfa; }
.hm-item .num { font-weight: 700; color: #3d1f6d; min-width: 2.6rem; font-variant-numeric: tabular-nums; }
.hm-item .nome { flex: 1; }
.hm-item .usado { color: #e0a800; font-size: .75rem; }
.hm-item .onde { color: #6c757d; font-size: .7rem; }
.hm-item.ativo { background: #3d1f6d; color: #fff; }
.hm-item.ativo .num, .hm-item.ativo .onde { color: #e0d0ff; }
.hm-vazio { padding: .5rem; color: #6c757d; }

.hm-estrofe { margin: 0 0 .75rem; line-height: 1.5; }
.hm-estrofe.refrao { font-style: italic; color: #3d1f6d; padding-left: .75rem; border-left: 3px solid #b9a3e3; }

/* ── Dia passado: só consulta (capa.js: aplicarModoConsulta) ───────────── */

body.somente-consulta #botoesLiturgia,
body.somente-consulta #bodyCorpo .btn { display: none !important; }
body.somente-consulta #bodyLiturgia li[data-tipo] { cursor: pointer; }
body.somente-consulta #bodyLiturgia li[data-tipo]::after { content: none; }

/* ── Coral por cantata (js/coral.js) — reaproveita o layout .pm ───────── */

.cm .pm-corpo { grid-template-columns: minmax(18rem, 46%) 1fr; }
.cm-lista { overflow-y: auto; border-right: 1px solid #dee2e6; padding-right: .5rem; }
.cm-grupo { border: 1px solid #e6dccf; border-radius: .35rem; margin-bottom: .4rem; }
.cm-cab { display: flex; align-items: center; gap: .35rem; padding: .3rem .4rem; background: #fbf5ec; border-radius: .35rem; }
.cm-abrir { flex: 1; display: flex; align-items: baseline; gap: .4rem; border: 0; background: none; text-align: left; padding: .1rem; min-width: 0; }
.cm-abrir strong { color: #5c3200; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-abrir .fa-chevron-right { font-size: .7rem; color: #9a7650; transition: transform .15s; }
.cm-grupo.aberto .cm-abrir .fa-chevron-right { transform: rotate(90deg); }
.cm-musicas { list-style: none; margin: 0; padding: .2rem .3rem .3rem; display: none; }
.cm-grupo.aberto .cm-musicas { display: block; }
.cm-musica { display: flex; align-items: baseline; gap: .45rem; padding: .25rem .35rem; border-radius: .25rem; cursor: pointer; }
.cm-musica:hover { background: #fdf3e3; }
.cm-musica .form-check-input { margin-top: 0; flex-shrink: 0; cursor: pointer; }
.cm-musica .titulo { white-space: nowrap; }
.cm-musica .inicio { color: #8a8a8a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.cm-musica.marcada { background: #fff3cd; }
.cm-ordem { font-size: .75rem; font-weight: 700; color: #fff; background: #7e4600; border-radius: 1rem; min-width: 1.3rem; text-align: center; }
.cm-ordem:empty { display: none; }

.ce-lista { list-style: none; margin: 0; padding: 0; border: 1px solid #dee2e6; border-radius: .35rem; max-height: 45vh; overflow-y: auto; }
.ce-item { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-bottom: 1px solid #f0f0f0; background: #fff; }
.ce-item .fa-grip-vertical { cursor: grab; }
.ce-n { font-size: .75rem; font-weight: 700; color: #7e4600; min-width: 1.2rem; }

@media (max-width: 768px) {
  .cm .pm-corpo { grid-template-columns: 1fr; grid-template-rows: 55% 1fr; }
  .cm-lista { border-right: 0; border-bottom: 1px solid #dee2e6; }
}