/* ===================================================================
   Escalas Pro — layout novo (2026-10): grupos em chips, faixa de dias,
   escala em chips (sem estourar no celular), Ochat em destaque e o
   montador de escala. Feito à mão (não depende do build do Tailwind).
   =================================================================== */

.esc-topo { max-width: 42rem; margin: 0 auto 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.esc-rotulo { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.esc-vazio { margin: 0; padding: 14px 4px; color: var(--muted); font-size: 13.5px; font-style: italic; text-align: center; width: 100%; }
.esc-vazio-curto { width: auto; padding: 14px 10px; white-space: nowrap; }

/* Grupos */
.esc-grupos { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.esc-grupos::-webkit-scrollbar { display: none; }
.esc-grupo {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; min-height: 42px; padding: 0 16px;
    border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
    font: 700 14px "DM Sans", sans-serif; cursor: pointer; transition: border-color .2s, background .2s, color .2s;
}
.esc-grupo svg { width: 15px; height: 15px; color: var(--muted); }
.esc-grupo:hover { border-color: rgba(255,146,0,.55); }
.esc-grupo.ativo { background: var(--laranja); border-color: var(--laranja); color: #171717; }
.esc-grupo.ativo svg { color: #171717; }
.esc-grupo-novo { border-style: dashed; color: var(--laranja); border-color: rgba(255,146,0,.45); background: transparent; }
.esc-grupo-novo svg { color: var(--laranja); }

/* Busca + dias */
.esc-dias-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.esc-busca { position: relative; flex: 0 1 220px; min-width: 0; }
.esc-busca svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); }
.esc-busca input {
    width: 100%; min-height: 38px; padding: 0 12px 0 32px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--input); color: var(--ink); font: 500 13.5px "DM Sans", sans-serif; outline: none;
}
.esc-busca input:focus { border-color: var(--laranja); }
.esc-busca-resumo { margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(255,146,0,.1); border: 1px solid rgba(255,146,0,.3); color: var(--ink); font-size: 13px; }

.esc-dias { position: relative; flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scroll-snap-type: x proximity; scrollbar-width: none; scroll-behavior: smooth; }
.esc-dias::-webkit-scrollbar { display: none; }

.esc-dia {
    position: relative; flex-shrink: 0; display: grid; justify-items: center; gap: 1px; width: 82px; padding: 9px 6px 8px;
    border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
    font-family: "DM Sans", sans-serif; cursor: pointer; scroll-snap-align: center; transition: border-color .2s, transform .2s, background .2s;
}
.esc-dia:hover { border-color: rgba(255,146,0,.55); transform: translateY(-2px); }
.esc-dia-sem { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.esc-dia-num { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.esc-dia-extra { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); }
.esc-dia.ativo { background: rgba(255,146,0,.14); border-color: var(--laranja); }
.esc-dia.ativo .esc-dia-num { color: var(--laranja); }
.esc-dia.hoje { border-color: rgba(255,214,130,.6); }
.esc-dia.hoje .esc-dia-extra { color: var(--gold); font-weight: 800; }
.esc-dia-novo { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.esc-historico { border-style: dashed; }
.esc-historico .esc-dia-num { color: var(--muted); }

/* Escala do dia: função em cima (no celular) e pessoas em chips */
.esc-funcoes { display: grid; }
.esc-funcao { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.esc-funcao:last-child { border-bottom: 0; }
.esc-funcao-nome { font-size: 13.5px; color: var(--muted); font-weight: 600; overflow-wrap: anywhere; }
.esc-pessoas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.esc-pessoa {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 3px 11px 3px 3px; border-radius: 999px;
    background: var(--chip); color: var(--ink); font-weight: 700; font-size: 14.5px;
}
.esc-pessoa .avatar-circle { width: 26px; height: 26px; flex-shrink: 0; font-size: 10px; }
.esc-pessoa.achada { background: rgba(255,146,0,.2); box-shadow: inset 0 0 0 1px var(--laranja); }
.esc-nota { margin: 0; padding: 8px 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.esc-mudou { margin-bottom: 14px; padding: 10px 12px; border-radius: 14px; background: rgba(114,204,232,.08); border: 1px solid rgba(114,204,232,.25); font-size: 12.5px; }
.esc-mudou p { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; color: var(--cyan); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.esc-mudou svg { width: 13px; height: 13px; }
.esc-mudou ul { margin: 0; padding-left: 18px; color: var(--muted); }
@media (max-width: 520px) {
    .esc-funcao { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
    .esc-pessoas { justify-content: flex-start; }
    #current-day-title { font-size: 17px !important; white-space: normal; }
}

/* Ações do dia (sempre à vista) */
.esc-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.esc-acoes.hidden { display: none; }
.esc-acao {
    position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 12px;
    border: 1px solid var(--line); background: transparent; color: var(--ink); font: 700 13.5px "DM Sans", sans-serif; cursor: pointer;
}
.esc-acao svg { width: 16px; height: 16px; color: var(--laranja); }
.esc-acao:hover { border-color: var(--laranja); }
.esc-ponto { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--laranja); }

/* Ochat em destaque */
.esc-ochat {
    margin-top: 14px; padding: 16px; border-radius: 22px;
    background: radial-gradient(120% 120% at 100% 0%, rgba(255,146,0,.16), transparent 60%), var(--panel);
    border: 1.5px solid rgba(255,146,0,.5);
}
.esc-ochat.hidden { display: none; }
.esc-ochat-cabeca { display: flex; gap: 12px; align-items: flex-start; }
.esc-ochat-icone { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--laranja); color: #171717; }
.esc-ochat-icone svg { width: 21px; height: 21px; }
.esc-ochat h3 { margin: 0 0 3px; font-size: 16px; font-weight: 800; color: var(--ink); }
.esc-ochat p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.esc-ochat-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.esc-ochat-botoes button { min-height: 44px; padding: 0 12px; font-size: 13.5px; }
.esc-ochat-botoes button:first-child { grid-column: 1 / -1; }
.esc-ochat-botoes svg { width: 16px; height: 16px; }

/* Admin */
.esc-admin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.esc-admin button { min-height: 46px; padding: 0 12px; font-size: 14px; }
.esc-admin svg { width: 17px; height: 17px; }
.esc-admin-principal { grid-column: 1 / -1; min-height: 52px !important; font-size: 15.5px !important; }
body.is-adm .esc-admin.adm-only-block { display: grid !important; }

/* Modal Gerenciar grupo */
.esc-lista-acoes { display: grid; gap: 8px; }
.esc-linha {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 14px; border-radius: 14px;
    border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: 600 14px "DM Sans", sans-serif; text-align: left; cursor: pointer;
}
.esc-linha svg { width: 17px; height: 17px; color: var(--laranja); }
.esc-linha:hover { border-color: var(--laranja); }
.esc-perigo { color: var(--danger); }
.esc-perigo svg { color: var(--danger); }
body.is-owner .esc-linha.owner-only { display: flex !important; }

/* ===================== Montador ===================== */
#modal-montador > section { max-width: 44rem; }
.esc-abas { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--panel-2); margin-bottom: 14px; }
.esc-aba { flex: 1; min-height: 38px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font: 800 13.5px "DM Sans", sans-serif; cursor: pointer; }
.esc-aba.ativo { background: var(--laranja); color: #171717; }
.mont-modos { margin: 10px 0; }
.mont-ajuda { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--panel-2); margin-bottom: 14px; }
.mont-ajuda p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.mont-ajuda p b { color: var(--ink); }
.mont-ajuda code { padding: 1px 6px; border-radius: 6px; background: var(--chip); color: var(--laranja); font-size: 12.5px; }
.mont-linha-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.mont-linha-botoes button, .mont-rodape button, .mont-datas-form button { min-height: 42px; padding: 0 16px; font-size: 14px; }
.mont-linha-botoes svg, .mont-rodape svg, .mont-datas-form svg { width: 16px; height: 16px; }
.mont-linha-botoes button:disabled { opacity: .45; pointer-events: none; }
.mont-cabeca { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 8px; }
.mont-status { font-size: 12px; color: var(--muted); }
.mont-rodape { display: flex; justify-content: flex-end; margin-top: 14px; }
.mont-alerta { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,146,0,.12); border: 1px solid rgba(255,146,0,.4); font-size: 13.5px; color: var(--ink); }
.mont-dica { margin: 14px 2px 8px; font-size: 13px; color: var(--muted); }

.mont-pessoas { display: grid; gap: 10px; }
.mont-pessoa { display: grid; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-2); }
.mont-pessoa.inativa { opacity: .55; }
.mont-pessoa-topo { display: flex; align-items: center; gap: 8px; }
.mont-pessoa-topo .avatar-circle { width: 30px; height: 30px; flex-shrink: 0; }
.mont-nome { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--ink); font: 800 15px "DM Sans", sans-serif; outline: none; }
.mont-nome:focus { border-color: var(--laranja); background: var(--input); }
.mont-ativo { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.mont-ativo input { accent-color: var(--laranja); width: 16px; height: 16px; }
.mont-x { display: inline-grid; place-items: center; min-width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-weight: 800; }
.mont-x:hover { color: var(--danger); border-color: var(--danger); }
.mont-x:disabled { opacity: .3; pointer-events: none; }
.mont-x svg { width: 15px; height: 15px; }
.mont-chips, .mont-semana { display: flex; flex-wrap: wrap; gap: 6px; }
.mont-chip { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 700 12.5px "DM Sans", sans-serif; cursor: pointer; }
.mont-chip.ativo { background: rgba(255,146,0,.16); border-color: var(--laranja); color: var(--ink); }
.mont-chip.ausente { border-color: rgba(255,155,152,.5); color: var(--danger); }
.mont-semana .mont-chip { min-width: 52px; }
.mont-selects { display: flex; flex-wrap: wrap; gap: 8px; }
.mont-selects label { display: grid; gap: 3px; flex: 1 1 120px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.mont-selects select, .mont-sel, .mont-datas-form select {
    min-height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); color: var(--ink);
    font: 600 13.5px "DM Sans", sans-serif; text-transform: none; letter-spacing: 0;
}
.mont-selects option, .mont-sel option, .mont-datas-form option { background: var(--panel-solid); color: var(--ink); }
.mont-ausencias { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.mont-ausencias input[type=date] { min-height: 32px; padding: 0 8px; border-radius: 9px; border: 1px dashed var(--line); background: transparent; color: var(--muted); font: 600 12.5px "DM Sans", sans-serif; }

.mont-funcoes { display: grid; gap: 8px; margin-bottom: 12px; }
.mont-funcao { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; background: var(--panel-2); }
.mont-funcao .input-field { flex: 1; min-width: 0; padding: .5rem .7rem; }
.mont-ordem { display: grid; gap: 2px; }
.mont-ordem .mont-x { height: 22px; min-width: 26px; }
.mont-qtd { display: flex; align-items: center; gap: 6px; }
.mont-qtd b { min-width: 18px; text-align: center; color: var(--laranja); }
.mont-cont { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 520px) { .mont-cont { display: none; } }

.mont-datas-form { display: flex; flex-wrap: wrap; gap: 8px; }
.mont-datas-form .input-field, .mont-datas-form select { flex: 1 1 140px; min-width: 0; min-height: 42px; }

.mont-previa { display: grid; gap: 10px; }
.mont-dia { padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-2); }
.mont-dia-titulo { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--ink); }
.mont-dia-titulo span { color: var(--laranja); font-size: 13px; margin-left: 4px; }
.mont-vaga { display: grid; grid-template-columns: 100px 1fr; gap: 8px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line); }
.mont-vaga-funcao { font-size: 13px; color: var(--muted); font-weight: 700; padding-top: 8px; }
.mont-vaga-pessoas { display: flex; flex-wrap: wrap; gap: 6px; }
.mont-sel { flex: 1 1 140px; min-width: 0; }
.mont-sel.vazio { border-color: rgba(255,155,152,.6); color: var(--danger); }
@media (max-width: 520px) { .mont-vaga { grid-template-columns: 1fr; gap: 4px; } .mont-vaga-funcao { padding-top: 0; } }
.esc-linha[hidden] { display: none !important; }

/* Cartão "Você monta as escalas?" (some para admins) */
.esc-entrar { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 16px; border-radius: 22px; background: var(--panel); border: 1px dashed rgba(255,146,0,.5); }
.esc-entrar h3 { margin: 0 0 3px; font-size: 16px; font-weight: 800; color: var(--ink); }
.esc-entrar p { margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.esc-entrar button { min-height: 42px; padding: 0 16px; font-size: 14px; }
.esc-entrar button svg { width: 16px; height: 16px; }
body.is-adm .esc-entrar { display: none; }

/* Faixa de dias com setas < > (sem barra de rolagem) */
.esc-dias-linha { display: flex; align-items: center; gap: 6px; min-width: 0; }
.esc-seta { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 64px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s; }
.esc-seta:hover { border-color: var(--laranja); color: var(--laranja); }
.esc-seta:disabled { opacity: .3; pointer-events: none; }
.esc-seta svg { width: 18px; height: 18px; }

/* Editar, montar e as demais funções em TELA CHEIA */
.modal.esc-cheia { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; overflow-y: auto; }
.modal.esc-cheia > section {
    width: 100% !important; max-width: none !important; min-height: 100dvh; max-height: none !important; margin: 0 !important;
    border-radius: 0 !important; border: 0 !important; overflow: visible !important;
    padding: 0 max(16px, calc((100vw - 980px) / 2)) 48px !important;
}
.modal.esc-cheia > section > div:first-child {
    position: sticky; top: 0; z-index: 3; margin: 0 -16px 16px !important; padding: 14px 16px 12px;
    background: var(--panel-solid); border-bottom: 1px solid var(--line);
}
.modal.esc-cheia #edit-day-fields-container { max-height: none !important; }
.modal.esc-cheia #edit-day-content, .modal.esc-cheia #bulk-input { min-height: 50vh; }
.modal.esc-cheia .mont-previa { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.modal.esc-cheia .mont-pessoas { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
/* Com uma tela de edição aberta, os botões flutuantes (Dúvidas, Ochat) saem do caminho */
body:has(.modal.modal-visible) .om-duvidas, body:has(.modal.modal-visible) .ochat-botao, body:has(.modal.modal-visible) .ochat-painel { display: none !important; }

/* Equipe: busca e modos Lista / Grade / Cards */
.mont-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.mont-busca { position: relative; flex: 1 1 220px; min-width: 0; }
.mont-busca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.mont-busca input { width: 100%; min-height: 42px; padding: 0 12px 0 36px; border-radius: 12px; border: 1px solid var(--line); background: var(--input); color: var(--ink); font: 500 14px "DM Sans", sans-serif; outline: none; }
.mont-busca input:focus { border-color: var(--laranja); }
.mont-vistas { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--panel-2); }
.mont-vistas button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 700 13px "DM Sans", sans-serif; cursor: pointer; }
.mont-vistas button svg { width: 15px; height: 15px; }
.mont-vistas button.ativo { background: var(--laranja); color: #171717; }
@media (max-width: 520px) { .mont-vistas span { display: none; } }
#mont-contagem { margin-left: 6px; color: var(--laranja); letter-spacing: 0; text-transform: none; }

.mont-pessoas.vista-lista { grid-template-columns: 1fr !important; gap: 6px; }
.mont-linha {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 14px; text-align: left;
    border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-family: "DM Sans", sans-serif; cursor: pointer;
}
.mont-linha:hover { border-color: rgba(255,146,0,.55); }
.mont-linha .avatar-circle { width: 32px; height: 32px; flex-shrink: 0; }
.mont-linha-nome { flex: 1; min-width: 0; display: grid; }
.mont-linha-nome b { font-size: 14.5px; }
.mont-linha-nome small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mont-linha-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.mont-linha-seta { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.mont-selo { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--chip); color: var(--muted); white-space: nowrap; }
.mont-selo.alta { background: rgba(255,146,0,.16); color: var(--laranja); }
@media (max-width: 520px) { .mont-linha-tags { display: none; } }

.mont-pessoas.vista-grade { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 8px; }
.mont-tile {
    position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 8px 10px; border-radius: 16px; text-align: center;
    border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-family: "DM Sans", sans-serif; cursor: pointer;
}
.mont-tile:hover { border-color: rgba(255,146,0,.55); }
.mont-tile .avatar-circle { width: 40px; height: 40px; font-size: 14px; }
.mont-tile b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mont-tile small { font-size: 12px; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mont-selos { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; }
.mont-selos .mont-selo { padding: 1px 6px; font-size: 10px; }
.mont-linha.inativa, .mont-tile.inativa { opacity: .5; }
.mont-pessoas.vista-grade .mont-pessoa.aberta, .mont-pessoas.vista-lista .mont-pessoa.aberta { grid-column: 1 / -1; border-color: var(--laranja); }
html, body { overflow-x: clip; max-width: 100%; }
.mont-guia-botao { margin-left: auto; margin-right: 8px; min-height: 36px; padding: 0 12px; font-size: 13px; }
.mont-guia-botao svg { width: 15px; height: 15px; }
@media (max-width: 520px) { .mont-guia-botao span { display: none; } }

/* Botão "Escalar" (acima do Dúvidas) e menu lateral do responsável */
.esc-fab {
    position: fixed; left: 16px; bottom: calc(var(--om-acima, 16px) + 58px + env(safe-area-inset-bottom)); z-index: 2147480500;
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px;
    background: var(--laranja); color: #171717; border: 0; font: 800 14px "DM Sans", sans-serif;
    box-shadow: 0 12px 30px rgba(0,0,0,.35); cursor: pointer; transition: transform .2s;
}
.esc-fab:hover { transform: translateY(-2px); }
.esc-fab svg { width: 18px; height: 18px; }
body:has(.modal.modal-visible) .esc-fab, body.esc-menu-aberto .esc-fab { display: none; }
.esc-menu-fundo { position: fixed; inset: 0; z-index: 2147481500; background: rgba(10,10,10,.55); backdrop-filter: blur(3px); }
.esc-menu {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 2147481600; width: min(360px, 88vw); overflow-y: auto;
    padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); background: var(--panel-solid); border-right: 1px solid var(--line);
    box-shadow: 20px 0 60px rgba(0,0,0,.4); display: grid; align-content: start; gap: 14px; animation: esc-menu-entra .25s ease both;
}
.esc-menu[hidden], .esc-menu-fundo[hidden] { display: none; }
@keyframes esc-menu-entra { from { transform: translateX(-100%); } to { transform: none; } }
.esc-menu-cabeca { display: flex; align-items: center; gap: 10px; }
.esc-menu-cabeca h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.esc-menu-cabeca p { margin: 0; font-size: 12.5px; color: var(--muted); }
.esc-menu-cabeca > div { flex: 1; min-width: 0; }
.esc-menu-x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--chip); color: var(--ink); cursor: pointer; }
.esc-menu-x svg { width: 18px; height: 18px; }
.esc-menu .esc-entrar { display: grid; gap: 8px; margin: 0; padding: 14px; border-radius: 16px; }
.esc-menu .esc-entrar p { margin: 0; }
.esc-menu .esc-entrar button { justify-self: start; }
.esc-menu .esc-admin { grid-template-columns: 1fr; margin: 0; gap: 8px; }
body.is-adm .esc-menu .esc-admin.adm-only-block { display: grid !important; }
.esc-menu .esc-linha { min-height: 58px; align-items: center; }
.esc-menu .esc-linha span { display: grid; gap: 1px; }
.esc-menu .esc-linha b { font-size: 14.5px; }
.esc-menu .esc-linha small { font-size: 12px; color: var(--muted); font-weight: 500; }
.esc-linha-destaque { background: rgba(255,146,0,.14) !important; border-color: var(--laranja) !important; }

/* ===================== Ver o mês (todos) ===================== */
.esc-dias-titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.esc-ver-mes { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,146,0,.5); background: rgba(255,146,0,.1); color: var(--ink); font: 700 12.5px "DM Sans", sans-serif; cursor: pointer; }
.esc-ver-mes svg { width: 14px; height: 14px; color: var(--laranja); }
.mes-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.mes-navega { display: flex; align-items: center; gap: 8px; }
.mes-navega b { min-width: 150px; text-align: center; font-size: 16px; color: var(--ink); }
.mes-navega b::first-letter { text-transform: uppercase; }
.mes-navega .esc-seta { height: 40px; width: 40px; }
.mes-total { margin: 0 2px 10px; font-size: 13px; color: var(--muted); }
.mes-dica { margin: 10px 2px; font-size: 13px; color: var(--muted); }
.mes-resumo { display: grid; gap: 8px; margin-bottom: 12px; }
.mes-resumo-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: rgba(255,146,0,.1); border: 1px solid rgba(255,146,0,.35); font-size: 14px; color: var(--ink); }
.mes-resumo-item .avatar-circle { width: 30px; height: 30px; flex-shrink: 0; }
.mes-resumo-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.mes-dias { display: grid; gap: 8px; }
.mes-dias.vista-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.mes-dia { border-radius: 16px; border: 1px solid var(--line); background: var(--panel-2); overflow: hidden; }
.mes-dia.aberto { border-color: rgba(255,146,0,.55); }
.mes-dia.hoje { box-shadow: inset 0 0 0 1px var(--gold); }
.mes-dia-topo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font-family: "DM Sans", sans-serif; }
.mes-data { display: grid; justify-items: center; min-width: 46px; padding: 4px 6px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--line); }
.mes-data small { font-size: 10.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.mes-data b { font-size: 19px; color: var(--laranja); line-height: 1.1; }
.mes-dia-meio { flex: 1; min-width: 0; display: grid; }
.mes-dia-meio b { font-size: 14.5px; }
.mes-dia-meio small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mes-seta { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.mes-dia-corpo { padding: 0 12px 12px; display: grid; gap: 2px; }
.mes-funcao { display: grid; grid-template-columns: 100px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.mes-funcao .esc-pessoas { justify-content: flex-start; }
.mes-funcao .esc-pessoa { font-size: 13px; padding: 2px 9px 2px 2px; }
.mes-funcao .esc-pessoa .avatar-circle { width: 22px; height: 22px; font-size: 9px; }
.mes-ir { justify-self: start; margin-top: 8px; min-height: 36px; padding: 0 12px; font-size: 13px; }
.mes-ir svg { width: 15px; height: 15px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-sem { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0 4px; }
.cal-cel { min-height: 74px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); display: grid; align-content: start; gap: 3px; min-width: 0; }
.cal-cel.vazia { background: transparent; border-color: transparent; }
.cal-cel.hoje { border-color: var(--gold); }
.cal-num { font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-cel.tem .cal-num { color: var(--ink); }
.cal-esc { display: grid; padding: 3px 4px; border-radius: 7px; border: 0; background: rgba(255,146,0,.18); color: var(--ink); font: 700 11px "DM Sans", sans-serif; text-align: left; cursor: pointer; min-width: 0; }
.cal-esc small { font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.cal-esc.ativo { background: var(--laranja); color: #171717; }
.cal-esc.ativo small { color: #3a2a10; }
@media (max-width: 520px) { .cal-cel { min-height: 54px; } .cal-esc small { display: none; } .mes-funcao { grid-template-columns: 1fr; } }

/* ===================== Painel do líder ===================== */
.lid-mes { justify-content: center; margin: 0 0 12px; }
.lid-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.lid-tiles > div { display: grid; gap: 1px; padding: 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.lid-tiles b { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lid-tiles span { font-size: 12.5px; color: var(--muted); }
.lid-tiles small { font-size: 11.5px; color: var(--muted); opacity: .85; }
.lid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.lid-card { padding: 14px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); min-width: 0; }
.lid-card h4 { margin: 0 0 2px; font-size: 15px; font-weight: 800; color: var(--ink); }
.lid-card > p { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.lid-graf { display: block; width: 100%; height: auto; }
.lid-eixo { stroke: var(--line); stroke-width: 1; }
.lid-barra path { fill: rgba(255,146,0,.55); }
.lid-barra.ativa path, .lid-barra:hover path { fill: var(--laranja); }
.lid-valor { font: 700 11px "DM Sans", sans-serif; fill: var(--ink); }
.lid-rot { font: 600 11px "DM Sans", sans-serif; fill: var(--muted); }
.lid-hbarras { display: grid; gap: 6px; }
.lid-hbarra { display: grid; grid-template-columns: minmax(70px, 120px) 1fr auto auto; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.lid-hnome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.lid-htrilho { height: 10px; border-radius: 0 5px 5px 0; background: transparent; }
.lid-htrilho span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--laranja); }
.lid-hbarra small { font-size: 11px; color: var(--muted); min-width: 22px; }
.lid-alerta, .lid-ok { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; margin: 8px 0 0; font-size: 13px; color: var(--ink); line-height: 1.5; }
.lid-alerta svg, .lid-ok svg { width: 15px; height: 15px; color: var(--laranja); align-self: center; }
.lid-link { border: 0; background: none; padding: 0; color: var(--laranja); font: 700 13px "DM Sans", sans-serif; text-decoration: underline; cursor: pointer; }
.lid-ordem { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.lid-ordem select { min-height: 40px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); color: var(--ink); font: 600 13.5px "DM Sans", sans-serif; }
.lid-ordem option { background: var(--panel-solid); }
.lid-tabela { display: grid; gap: 6px; }
.lid-linha { display: grid; grid-template-columns: minmax(180px, 2.2fr) 0.7fr 0.8fr 0.9fr 1.2fr 0.9fr; gap: 8px; align-items: center; width: 100%; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); text-align: left; font-family: "DM Sans", sans-serif; cursor: pointer; }
button.lid-linha:hover { border-color: rgba(255,146,0,.55); }
.lid-cab { background: transparent; border-color: transparent; cursor: default; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-top: 0; padding-bottom: 0; }
.lid-linha > span { display: grid; min-width: 0; }
.lid-linha small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lid-linha small.sobe { color: var(--mint); } .lid-linha small.desce { color: var(--danger); }
.lid-pessoa { display: flex !important; align-items: center; gap: 10px; }
.lid-pessoa .avatar-circle { width: 32px; height: 32px; flex-shrink: 0; }
.lid-pessoa > span:last-child { display: grid; min-width: 0; }
.lid-mini { width: 52px; height: 22px; }
.lid-mini rect { fill: var(--laranja); } .lid-mini rect.zero { fill: var(--line); }
.lid-estrelas { color: var(--laranja); letter-spacing: 1px; font-size: 13px; } .lid-estrelas i { color: var(--line); font-style: normal; }
.lid-classe { display: inline-block; justify-self: start; padding: 1px 8px; border-radius: 999px; font-size: 11px !important; font-weight: 700; background: var(--chip); color: var(--muted) !important; }
.lid-classe.destaque { background: rgba(255,146,0,.2); color: var(--laranja) !important; }
.lid-classe.firme { background: rgba(98,230,195,.15); color: var(--mint) !important; }
.lid-classe.dev { background: rgba(114,204,232,.15); color: var(--cyan) !important; }
.lid-classe.atencao { background: rgba(255,155,152,.15); color: var(--danger) !important; }
@media (max-width: 760px) {
    .lid-cab { display: none; }
    .lid-linha { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 6px; }
    .lid-pessoa { grid-column: 1 / -1; }
    .lid-linha > span[data-rot]::before { content: attr(data-rot); font-size: 10.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
}
.lid-ficha-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.lid-ficha-topo > div { flex: 1; min-width: 180px; }
.lid-ficha-topo h3 { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); }
.lid-ficha-topo p { margin: 2px 0 6px; font-size: 13.5px; color: var(--muted); }
.lid-avatar { width: 64px !important; height: 64px !important; font-size: 22px !important; }
.lid-zap { min-height: 40px; padding: 0 14px; font-size: 13.5px; } .lid-zap svg { width: 16px; height: 16px; }
.lid-ultimas { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.lid-form { margin-top: 10px; }
.lid-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.lid-campos label, .lid-obs { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.lid-obs { margin-top: 12px; }
.lid-criterios { display: grid; gap: 6px; margin-top: 8px; }
.lid-criterio { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--line); }
.lid-criterio > span:first-child { display: grid; } .lid-criterio b { font-size: 14px; color: var(--ink); } .lid-criterio small { font-size: 12px; color: var(--muted); }
.lid-notas { display: flex; gap: 2px; }
.lid-notas label { cursor: pointer; } .lid-notas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lid-notas span { display: block; font-size: 24px; line-height: 1; color: var(--line); padding: 2px; transition: transform .1s; }
.lid-notas label.on span { color: var(--laranja); }
.lid-notas label:hover span { transform: scale(1.15); }
.lid-notas input:focus-visible + span { outline: 2px solid var(--laranja); border-radius: 4px; }
.mont-ficha { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px dashed rgba(255,146,0,.5); background: transparent; color: var(--laranja); font: 700 12.5px "DM Sans", sans-serif; cursor: pointer; }
.mont-ficha svg { width: 15px; height: 15px; }
.esc-aba { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ===== Desempenho: sem desfoque de fundo (dobrava o tempo de cada troca no celular) ===== */
.glass, .om-header, .modal-wrap, .esc-menu-fundo { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.glass { background: var(--panel-solid) !important; }
.om-header { background: #1b1b1b !important; }
.modal-wrap { background: rgba(10,10,10,.88) !important; }
.page-shell::before, .page-shell::after { filter: none !important; position: absolute !important; }

/* ===== Telas cheias: o conteúdo cresce junto (sem o fundo aparecendo ao rolar) e usa a largura toda ===== */
.modal.esc-cheia { display: block !important; overflow-y: auto; }
.modal.esc-cheia > section { min-height: 100dvh; height: auto !important; padding: 0 clamp(16px, 3vw, 48px) 48px !important; }
.modal.esc-cheia > section > div:first-child { margin: 0 calc(-1 * clamp(16px, 3vw, 48px)) 16px !important; padding: 14px clamp(16px, 3vw, 48px) 12px; }

/* ===== Página: ampla no PC, escala e Ochat lado a lado ===== */
.app-frame { max-width: 1600px !important; }
.esc-topo { max-width: none; }
@media (min-width: 1024px) {
    .esc-principal { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
    .esc-principal > .esc-ochat { margin-top: 0; position: sticky; top: 96px; }
    .esc-principal > .esc-ochat .esc-ochat-botoes { grid-template-columns: 1fr; }
}

/* ===== Celular: menos poluído ===== */
@media (max-width: 640px) {
    .esc-ochat { padding: 12px; }
    .esc-ochat-cabeca p { display: none; }
    .esc-ochat-icone { width: 34px; height: 34px; border-radius: 11px; }
    .esc-ochat h3 { font-size: 15px; margin: 6px 0 0; }
    .esc-ochat-botoes { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
    .esc-ochat-botoes button:first-child { grid-column: auto; }
    .esc-ochat-botoes button { flex-direction: column; gap: 3px; min-height: 58px; padding: 4px; font-size: 11.5px; line-height: 1.15; }
    .esc-fab { padding: 12px; } .esc-fab span { display: none; }
    .om-footer-card { padding: 12px !important; gap: 8px !important; }
    .om-footer-card p.text-sm { font-size: 12px !important; }
    footer .flex.items-center.justify-between { flex-direction: column; gap: 6px; }
    .esc-acoes { gap: 6px; } .esc-acao { padding: 0 10px; font-size: 13px; }
}

/* ===== Painel do líder: alertas em cartões clicáveis ===== */
.lid-alertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 12px; }
.lid-alerta-card { border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); overflow: hidden; }
.lid-alerta-card[open] { grid-column: 1 / -1; border-color: rgba(255,146,0,.55); }
.lid-alerta-card summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.lid-alerta-card summary::-webkit-details-marker { display: none; }
.lid-alerta-card summary > svg { width: 18px; height: 18px; color: var(--laranja); flex-shrink: 0; }
.lid-alerta-card summary > .lid-alerta-txt { flex: 1; min-width: 0; display: grid; }
.lid-alerta-card summary b { font-size: 13.5px; color: var(--ink); }
.lid-alerta-card summary small { font-size: 11.5px; color: var(--muted); }
.lid-alerta-num { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,146,0,.18); color: var(--laranja); font-weight: 800; font-size: 13px; }
.lid-alerta-fotos { display: flex; }
.lid-alerta-fotos .avatar-circle { width: 24px; height: 24px; font-size: 9px; margin-left: -6px; box-shadow: 0 0 0 2px var(--panel-2); }
.lid-alerta-corpo { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
.lid-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); font: 700 12.5px "DM Sans", sans-serif; cursor: pointer; }
.lid-chip:hover { border-color: var(--laranja); }
.lid-chip .avatar-circle { width: 22px; height: 22px; font-size: 9px; }
.lid-chip small { color: var(--muted); font-weight: 600; }
@media (max-width: 640px) { .lid-alerta-fotos { display: none; } .lid-alertas { grid-template-columns: 1fr 1fr; } .lid-alerta-card summary { flex-wrap: wrap; } }

/* Celular mais enxuto */
@media (max-width: 640px) {
    .om-header { padding: 10px 12px !important; }
    .om-header .om-h-muted { display: none; }
    .om-header button.w-11 { width: 40px !important; height: 40px !important; }
    .esc-topo { gap: 8px; }
    .esc-dias-cabeca { gap: 8px; }
    .esc-dias-titulo .esc-rotulo { display: none; }
    .esc-busca { flex: 1 1 auto; }
    .esc-dia { width: 74px; padding: 7px 4px 6px; }
    .esc-dia-num { font-size: 16px; }
    .esc-seta { width: 30px; height: 56px; }
    #day-nav-prev, #day-nav-next { display: none; }          /* as setas da faixa já fazem isso */
    #schedule-card { padding: 14px !important; border-radius: 20px !important; }
    .esc-funcao { grid-template-columns: 82px minmax(0, 1fr) !important; gap: 8px !important; padding: 8px 0 !important; }
    .esc-funcao-nome { font-size: 12.5px; }
    .esc-pessoas { justify-content: flex-start !important; gap: 4px; }
    .esc-pessoa { font-size: 13.5px; padding: 2px 9px 2px 2px; }
    .esc-pessoa .avatar-circle { width: 22px; height: 22px; font-size: 9px; }
    .app-frame { padding-bottom: 96px !important; }        /* espaço para os botões flutuantes */
}

/* ===== Botões flutuantes: todos à DIREITA, empilhados, do mesmo tamanho =====
   de baixo para cima: Ochat, Escalar, Dúvidas. Os painéis abrem ao lado. */
:root { --fab-h: 48px; --fab-gap: 10px; --fab-w: 132px; }
.ochat-botao, .esc-fab, .om-duvidas {
    left: auto !important; right: 16px !important; width: var(--fab-w) !important; height: var(--fab-h) !important;
    padding: 0 14px !important; justify-content: flex-start !important; gap: 8px !important; box-sizing: border-box !important;
    border-radius: 999px !important; font: 800 14px "DM Sans", sans-serif !important;
}
.ochat-botao { bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
.esc-fab { bottom: calc(16px + var(--fab-h) + var(--fab-gap) + env(safe-area-inset-bottom)) !important; }
.om-duvidas { bottom: calc(16px + 2 * (var(--fab-h) + var(--fab-gap)) + env(safe-area-inset-bottom)) !important; }
.ochat-botao span, .esc-fab span, .om-duvidas span { display: inline !important; }
.ochat-painel, .om-duvidas-painel { left: auto !important; right: calc(16px + var(--fab-w) + 10px) !important; bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
@media (max-width: 640px) {
    :root { --fab-w: 48px; --fab-h: 48px; }
    .ochat-botao, .esc-fab, .om-duvidas { padding: 0 !important; justify-content: center !important; }
    .ochat-botao span, .esc-fab span, .om-duvidas span { display: none !important; }
    .ochat-painel, .om-duvidas-painel { right: 74px !important; width: min(300px, calc(100vw - 90px)) !important; }
}

/* Faixa de dias: a seta direita fica logo depois do último dia */
.esc-dias { flex: 0 1 auto !important; }

/* Sem o bloco do Ochat na página: a escala ocupa a largura, nomes junto da função */
@media (min-width: 1024px) {
    .esc-principal { display: block !important; }
    .esc-funcao { grid-template-columns: 180px minmax(0, 1fr) !important; }
    .esc-pessoas { justify-content: flex-start !important; }
}
.esc-menu { left: auto !important; right: 0 !important; border-right: 0 !important; border-left: 1px solid var(--line); animation-name: esc-menu-entra-dir !important; }
@keyframes esc-menu-entra-dir { from { transform: translateX(100%); } to { transform: none; } }

/* Tema claro no tom do portal e do Ochat: fundo #f0f0f0, painéis brancos, texto grafite */
html[data-theme="claro"] {
    --page: #f0f0f0;
    --panel-solid: #ffffff;
    --panel: #ffffff;
    --panel-2: #f7f7f7;
    --ink: #2c2c2c;
    --muted: #5c5c5c;
    --line: rgba(44,44,44,.14);
    --input: #ffffff;
    --chip: rgba(44,44,44,.06);
    --linha-grade: rgba(44,44,44,.035);
}

/* ===== Quem serve no dia: números ao lado (PC) ===== */
.esc-dia-grid { display: block; }
.esc-equipe-dia { display: none; }
@media (min-width: 1100px) {
    .esc-dia-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
    .esc-equipe-dia { display: grid; gap: 8px; align-content: start; padding-left: 20px; border-left: 1px solid var(--line); }
}
.esc-pessoa[data-pessoa] { cursor: pointer; }
.esc-pessoa[data-pessoa]:hover { box-shadow: inset 0 0 0 1px rgba(255,146,0,.55); }
.pinfo { display: grid; gap: 8px; }
.pinfo.compacto { padding: 10px 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; gap: 6px; }
.pinfo.compacto:hover { border-color: rgba(255,146,0,.55); }
.pinfo-topo { display: flex; align-items: center; gap: 10px; }
.pinfo-topo .avatar-circle { width: 30px; height: 30px; flex-shrink: 0; }
.pinfo:not(.compacto) .pinfo-topo .avatar-circle { width: 48px; height: 48px; font-size: 17px; }
.pinfo-topo > span:last-child { display: grid; min-width: 0; }
.pinfo-topo b { font-size: 14.5px; color: var(--ink); }
.pinfo:not(.compacto) .pinfo-topo b { font-size: 19px; }
.pinfo-topo small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinfo-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.pinfo-tag { padding: 2px 8px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pinfo-tag b { color: var(--ink); }
.pinfo-tag.pinfo-destaque { background: rgba(255,146,0,.18); color: var(--laranja); }
.pinfo-tag.pinfo-firme { background: rgba(98,230,195,.15); color: var(--mint); }
.pinfo-tag.pinfo-dev { background: rgba(114,204,232,.15); color: var(--cyan); }
.pinfo-tag.pinfo-atencao { background: rgba(255,155,152,.15); color: var(--danger); }
.pinfo-linha { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.pinfo-linha b { color: var(--ink); }
.pinfo-av { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: var(--panel-2); }
.pinfo-av span { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.pinfo-av b { color: var(--laranja); letter-spacing: 1px; } .pinfo-av i { color: var(--line); font-style: normal; }
.pinfo-ficha { justify-self: start; min-height: 38px; padding: 0 12px; font-size: 13px; } .pinfo-ficha svg { width: 15px; height: 15px; }

/* ===== Cabeçalho: barra inteira presa no topo (nada passa por trás) ===== */
.om-header {
    top: 0 !important; border-radius: 0 !important; border-bottom: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 0 0 100vmax #1b1b1b !important; clip-path: inset(0 -100vmax) !important;
    margin-top: calc(-1 * 1.25rem); padding-top: 14px !important; padding-bottom: 14px !important;
}
@media (min-width: 640px) { .om-header { margin-top: -2rem; } }

/* ===== Gavetas padronizadas (Ochat, Dúvidas, Escalar): pela direita, abaixo do cabeçalho ===== */
.ochat-painel.aberto, .om-duvidas-painel.aberto, .esc-menu {
    position: fixed !important; top: var(--cab-h, 72px) !important; bottom: 0 !important; right: 0 !important; left: auto !important;
    width: min(380px, 92vw) !important; max-height: none !important; height: auto !important; margin: 0 !important;
    border-radius: 0 !important; border: 0 !important; border-left: 1px solid var(--line) !important;
    background: var(--panel-solid) !important; color: var(--ink) !important; box-shadow: -20px 0 60px rgba(0,0,0,.35) !important;
    overflow-y: auto !important; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)) !important;
    animation: esc-menu-entra-dir .25s ease both !important; z-index: 2147481600 !important;
}
.esc-menu-fundo { top: var(--cab-h, 72px) !important; }
body.gaveta-aberta .ochat-botao, body.gaveta-aberta .esc-fab, body.gaveta-aberta .om-duvidas, body.esc-menu-aberto .ochat-botao, body.esc-menu-aberto .om-duvidas { display: none !important; }
html[data-theme="claro"] .ochat-painel.aberto, html[data-theme="claro"] .om-duvidas-painel.aberto { color: var(--ink) !important; }
html[data-theme="claro"] .ochat-painel .oc-item b, html[data-theme="claro"] .ochat-painel button, html[data-theme="claro"] .om-duvidas-painel a, html[data-theme="claro"] .om-duvidas-painel button { color: var(--ink) !important; }
html[data-theme="claro"] .ochat-painel textarea { background: #fff !important; color: var(--ink) !important; border-color: var(--line) !important; }
.ochat-painel .oc-sim { color: #161616 !important; }
.gaveta-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--chip); color: var(--ink); cursor: pointer; font-size: 18px; line-height: 1; }
.page-shell { overflow-x: clip !important; }   /* "hidden" quebrava o cabeçalho preso no topo */
.ochat-painel .gaveta-x, .om-duvidas-painel .gaveta-x {
    position: absolute !important; top: 12px !important; right: 12px !important; width: 34px !important; min-height: 34px !important; height: 34px !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; display: grid !important; place-items: center !important;
    background: var(--chip) !important; color: var(--ink) !important; font-size: 20px !important;
}
.ochat-painel.aberto > .oc-rot:first-of-type, .om-duvidas-painel.aberto > .om-rot:first-of-type { padding-right: 44px; min-height: 34px; display: flex; align-items: center; }
#modal-pessoa { align-items: flex-end !important; }
#modal-pessoa > section { height: auto !important; align-self: flex-end; margin-bottom: 8px; }
@media (min-width: 640px) { #modal-pessoa { align-items: center !important; } #modal-pessoa > section { align-self: center; margin: 0; } }

/* Números na própria linha, discretos: Ana · 3× em out · 25% freq. · ★★★★ pont. */
.esc-funcao .esc-pessoas { flex-direction: column; align-items: flex-start; gap: 4px; }
.esc-pessoa-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.esc-nums { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.esc-nums i { font-style: normal; opacity: .5; }
.esc-nums span:last-child { white-space: nowrap; }
@media (min-width: 900px) { .esc-nums { gap: 2px 14px; font-size: 13px; } .esc-pessoa-linha { gap: 4px 20px; } }
@media (max-width: 640px) { .esc-nums { font-size: 11.5px; gap: 1px 6px; } .esc-pessoa-linha { gap: 2px 8px; } }

/* ===== Números em colunas (PC): Função | Pessoa | No mês | Frequência | Última | Próxima | (Avaliação) ===== */
.esc-nums-cab { display: none; }
.esc-num small { color: var(--muted); font-weight: 500; }
.esc-num { color: var(--ink); font-weight: 700; font-size: 12.5px; }
.esc-num.c-ult, .esc-num.c-prox, .esc-num.c-av { display: none; }
@media (max-width: 899px) {
    .esc-nums { gap: 1px 8px; }
    .esc-num { font-weight: 600; color: var(--muted); }
    .esc-num + .esc-num::before { content: "·"; margin-right: 8px; opacity: .5; }
}
@media (min-width: 900px) {
    :root { --cols-nums: 110px 120px 120px 120px; }
    .esc-funcoes.com-av { --cols-nums: 100px 110px 110px 110px minmax(150px, 1fr); }
    .esc-funcao { grid-template-columns: 170px minmax(0, 1fr) !important; }
    .esc-funcao .esc-pessoas { width: 100%; }
    .esc-pessoa-linha { display: grid !important; grid-template-columns: minmax(170px, 1fr) var(--cols-nums); align-items: center; width: 100%; gap: 0 12px !important; }
    .esc-pessoa-linha .esc-pessoa { justify-self: start; }
    .esc-nums { display: contents !important; }
    .esc-num { display: block !important; font-size: 13.5px; }
    .esc-num.c-av { color: var(--laranja); }
    .esc-nums-cab {
        display: grid; grid-template-columns: 170px minmax(170px, 1fr) var(--cols-nums); column-gap: 12px;
        padding: 0 0 6px; border-bottom: 1px solid var(--line);
        font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
    }
    .esc-funcao { column-gap: 12px !important; }
}
@media (min-width: 900px) {
    :root { --cols-nums: repeat(4, minmax(90px, 1fr)); }
    .esc-funcoes.com-av { --cols-nums: repeat(4, minmax(86px, 1fr)) minmax(140px, 1.3fr); }
    .esc-pessoa-linha { grid-template-columns: minmax(160px, 1.4fr) var(--cols-nums) !important; }
    .esc-nums-cab { grid-template-columns: 170px minmax(160px, 1.4fr) var(--cols-nums) !important; }
}
@media (min-width: 1200px) { .app-frame { padding-right: 168px !important; } }   /* coluna dos botões flutuantes */
/* PC: os dias se distribuem pela largura toda (setas nas pontas, alinhadas com a escala) */
@media (min-width: 900px) {
    .esc-dias-linha .esc-dias { flex: 1 1 auto !important; }
    .esc-dias .esc-dia { flex: 1 0 96px; width: auto; min-width: 96px; padding: 10px 6px 9px; }
    .esc-dias .esc-dia .esc-dia-num { font-size: 20px; }
    .esc-seta { height: 72px; }
}

/* Compartilhar a escala */
.comp-img { display: block; width: 100%; aspect-ratio: 1200 / 630; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); object-fit: cover; }
.comp-link { display: flex; gap: 6px; margin: 12px 0; }
.comp-link input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); color: var(--muted); font: 500 13px "DM Sans", sans-serif; }
.comp-link button, .comp-botoes button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 700 13.5px "DM Sans", sans-serif; cursor: pointer; }
.comp-link button:hover, .comp-botoes button:hover { border-color: var(--laranja); color: var(--laranja); }
.comp-botoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.comp-botoes svg { width: 16px; height: 16px; }
.comp-botoes .comp-zap { background: #23a55a; border-color: #23a55a; color: #fff; }
.comp-botoes .comp-zap:hover { color: #fff; filter: brightness(1.06); }
.comp-dica { margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); }
.esc-aviso { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 2147483000; padding: 10px 16px; border-radius: 12px; background: #161616; color: #fff; border: 1px solid rgba(255,146,0,.5); font: 700 14px "DM Sans", sans-serif; }

/* Função com mais destaque (Ministro, Voz, Violão…) */
.esc-funcao-nome { font-size: 15px !important; font-weight: 800 !important; color: var(--ink) !important; display: inline-flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.esc-funcao-nome::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--laranja); flex-shrink: 0; }
@media (max-width: 640px) { .esc-funcao-nome { font-size: 14px !important; } .esc-funcao-nome::before { height: 15px; } }

/* Expandir / recolher os números */
.esc-detalhes-barra { display: flex; justify-content: center; margin-top: 10px; }
.esc-detalhes-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 700 12.5px "DM Sans", sans-serif; cursor: pointer; }
.esc-detalhes-btn:hover { border-color: var(--laranja); color: var(--laranja); }
.esc-detalhes-btn svg { width: 14px; height: 14px; }
#schedule-card:not(.detalhado) .esc-nums, #schedule-card:not(.detalhado) .esc-nums-cab { display: none !important; }
#schedule-card:not(.detalhado) .esc-funcoes { max-width: 640px; margin: 0 auto; }
@media (min-width: 900px) {
    #schedule-card:not(.detalhado) .esc-funcao { grid-template-columns: 200px minmax(0, 1fr) !important; }
    #schedule-card:not(.detalhado) .esc-pessoa-linha { display: flex !important; }
    #schedule-card:not(.detalhado) .esc-funcao .esc-pessoas { flex-direction: row !important; flex-wrap: wrap; gap: 6px; }
}
@media (max-width: 899px) {
    #schedule-card:not(.detalhado) .esc-funcao .esc-pessoas { flex-direction: row !important; flex-wrap: wrap; gap: 6px; }
}
#schedule-card:not(.detalhado) .esc-pessoa-linha { width: auto !important; }

/* Cifras no repertório */
.rep-cifra { display: grid; gap: 4px; }
.rep-cifra-res { display: grid; gap: 4px; max-height: 240px; overflow-y: auto; }
.rep-cifra-res:empty { display: none; }
.rep-cifra-res button { display: grid; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); cursor: pointer; font-family: "DM Sans", sans-serif; }
.rep-cifra-res button:hover { border-color: var(--laranja); }
.rep-cifra-res b { font-size: 13.5px; } .rep-cifra-res small { font-size: 12px; color: var(--muted); }
.rep-cifra-msg { margin: 4px 2px; font-size: 12.5px; color: var(--muted); }
.rep-cifra-escolhida { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,146,0,.1); border: 1px solid rgba(255,146,0,.4); font-size: 13.5px; color: var(--ink); }
.rep-cifra-escolhida small { color: var(--muted); }
.rep-cifra-escolhida label { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.rep-cifra-escolhida select { min-height: 32px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--input); color: var(--ink); font: 700 13px "DM Sans", sans-serif; }
.rep-cifra-escolhida select option { background: var(--panel-solid); }
.rep-cifra-escolhida button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.rep-btn-cifra { font-size: 12px; padding: 6px 12px; border-radius: 6px; font-weight: 700; background: rgba(255,146,0,.14); color: var(--laranja); text-decoration: none; }
.rep-musica { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
input[type="search"].input-field { -webkit-appearance: none; appearance: none; }
/* Botões flutuantes só com ícone (padrão do portal): menos espaço reservado */
:root { --fab-w: 48px !important; }
@media (min-width: 1200px) { .app-frame { padding-right: 84px !important; } }