/* =============================================================
   SINO DOS AVISOS
   -------------------------------------------------------------
   Ele fica ao lado do alternador WhatsApp/Instagram, então tem que
   pertencer à mesma família: mesma altura, mesmo vidro, mesma
   borda, ícone de traço fino como os do menu lateral.

   Três decisões separam elegante de pesado:

   1. Ícone em LINHA, não sólido. O sino cheio da FontAwesome tem
      quase o dobro de tinta do alternador ao lado e puxa o olho
      para o canto errado da tela.

   2. Cor discreta por padrão. Botão de estado que grita em laranja
      compete com o conteúdo o tempo todo — e cor só significa
      alguma coisa quando é rara.

   3. O ponto é pequeno e sem contorno duro: um brilho suave em
      volta separa ele do fundo sem virar adesivo colado por cima.
============================================================= */

.sino-avisos { display: none; }

/* ---------- Celular: ao lado do alternador ---------- */
@media (max-width: 900px) {
    .sino-avisos {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        right: 14px;
        z-index: 8500;

        display: flex;
        align-items: center;
        justify-content: center;
        /* 38px é a altura exata do alternador (32 + 3 de folga em cima
           e embaixo). Menor fica desalinhado; maior domina o topo. */
        width: 38px;
        height: 38px;
        padding: 0;

        border-radius: 999px;
        border: 1px solid var(--border-soft);
        background: rgba(16, 16, 22, .82);
        backdrop-filter: blur(18px) saturate(150%);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
    }
}

/* ---------- Computador: dentro do grupo do cabeçalho ---------- */
@media (min-width: 901px) {
    .sino-avisos {
        position: relative;
        display: flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; padding: 0; flex-shrink: 0;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: transparent;
    }
    .sino-avisos:hover { background: rgba(255, 255, 255, .04); border-color: var(--border-strong); }
}

.sino-avisos {
    color: var(--text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .22s ease, border-color .22s ease,
                background .22s ease, transform .16s ease;
}

.sino-avisos svg {
    width: 17px; height: 17px;
    /* O sino fica melhor 1px acima do centro geométrico: a alça de
       baixo puxa o desenho e ele parece caído dentro do botão. */
    margin-top: -1px;
}

.sino-avisos:hover { color: var(--text); }
.sino-avisos:active { transform: scale(.93); }
.sino-avisos:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }

/* Ligado: branco, e só. Sem dourado.
   -------------------------------------------------------------
   O dourado é a cor de AÇÃO deste painel — botão principal, pastilha
   escolhida, número que importa. Um sino permanentemente dourado
   entra nessa fila sem ser ação nenhuma, e ainda cansa o canto da
   tela. Branco limpo diz "está ligado" com a mesma clareza e
   desaparece quando você não está olhando para ele. */
.sino-avisos.ligado {
    color: var(--text-strong);
    border-color: var(--border-strong);
}

/* Com gente esperando e avisos desligados, o sino balança sozinho de
   vez em quando. Chama mais atenção que trocar de cor e passa — cor
   permanente vira paisagem em dois dias. */
.sino-avisos.pendente { color: var(--text); }
.sino-avisos.pendente svg {
    animation: sinoBalanca 5s ease-in-out infinite;
    transform-origin: 50% 15%;
}

@keyframes sinoBalanca {
      0%, 88%, 100% { transform: rotate(0); }
    90%             { transform: rotate(11deg); }
    92%             { transform: rotate(-9deg); }
    94%             { transform: rotate(6deg); }
    96%             { transform: rotate(-4deg); }
    98%             { transform: rotate(2deg); }
}

/* ---------- O ponto ---------- */
.sino-ponto {
    position: absolute;
    top: 8px; right: 9px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--danger);
    /* Brilho em vez de contorno: a borda dura fazia o ponto parecer
       um adesivo colado por cima do botão. */
    box-shadow: 0 0 0 2px rgba(16, 16, 22, .9), 0 0 7px rgba(var(--danger-rgb), .75);
    opacity: 0;
    transform: scale(.3);
    transition: opacity .24s ease, transform .24s cubic-bezier(.3, 1.5, .5, 1);
}
.sino-avisos.tem-fila .sino-ponto { opacity: 1; transform: scale(1); }

@media (min-width: 901px) {
    .sino-ponto {
        top: 7px; right: 8px;
        box-shadow: 0 0 0 2px var(--bg-elev), 0 0 7px rgba(var(--danger-rgb), .7);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sino-avisos.pendente svg { animation: none; }
}

/* ---------- Contador no cartão do menu ---------- */
.sheet-card { position: relative; }
.sheet-badge {
    position: absolute; top: 7px; right: 7px;
    min-width: 17px; height: 17px; padding: 0 5px;
    border-radius: 999px;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700;
    background: var(--danger); color: #fff;
}
.sheet-badge.hidden { display: none; }

/* ---------- A folha de avisos ---------- */
.sino-folha {
    position: fixed; inset: 0; z-index: 9600;
    display: none; align-items: flex-end; justify-content: center;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(3px);
}
.sino-folha.aberta { display: flex; }

.sino-cartao {
    width: min(520px, 100%);
    max-height: 86vh; overflow-y: auto;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    border: 1px solid var(--border);
    background: var(--flutuante);
    box-shadow: var(--sh-lg);
    animation: sinoSobe .26s cubic-bezier(.2, .9, .3, 1);
}
@keyframes sinoSobe { from { transform: translateY(24px); opacity: 0; } }

@media (min-width: 901px) {
    .sino-folha { align-items: center; }
    .sino-cartao { border-radius: 20px; }
}

.sino-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 6px;
}
.sino-titulo {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 700; color: var(--text-strong);
}
.sino-titulo i { color: var(--accent); }
.sino-sub { margin: 0 0 16px; font-size: 11px; line-height: 1.6; color: var(--text-faint); }
.sino-sub b { color: var(--text-dim); }

/* Cada tipo pode ser desligado sozinho: quem só quer saber de lead
   respondendo não deveria receber resumo do dia junto. */
.sino-tipos { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.sino-tipo {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px; border-radius: 12px;
    border: 1px solid var(--border-soft); background: var(--bg-elev);
}
.sino-tipo-emoji { font-size: 17px; flex-shrink: 0; }
.sino-tipo-txt { flex: 1; min-width: 0; }
.sino-tipo-nome { font-size: 12.5px; font-weight: 600; color: var(--text); }
.sino-tipo-desc { margin-top: 2px; font-size: 11px; line-height: 1.5; color: var(--text-faint); }

.sino-horario {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 13px; border-radius: 12px; margin-bottom: 14px;
    border: 1px solid var(--border-soft); background: var(--bg-elev);
    font-size: 11px; color: var(--text-dim);
}
.sino-horario input {
    width: 58px; padding: 6px 8px; border-radius: 8px; text-align: center;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.sino-horario small { flex-basis: 100%; font-size: 11px; color: var(--text-faint); line-height: 1.5; }

.sino-acoes { display: flex; gap: 9px; margin-top: 4px; }
.sino-acoes button { flex: 1; justify-content: center; }

/* ---------- Os aparelhos da conta ----------
   Vários celulares na mesma conta é o normal, não a exceção. Sem uma
   lista visível não havia como perceber que o iPhone não tinha
   entrado: o teste dizia "enviado" e o aviso caía só no Android. */
.sino-aparelhos {
    margin: 14px 0 4px; padding: 12px 13px;
    border-radius: 12px;
    border: 1px solid var(--border-soft); background: var(--bg-elev);
}
.sino-aparelhos-topo {
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-faint); margin-bottom: 9px;
}
.sino-aparelho {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; font-size: 12.5px; color: var(--text);
    border-top: 1px solid var(--border-soft);
}
.sino-aparelho:first-of-type { border-top: 0; }
.sino-aparelho-nome { flex: 1; min-width: 0; }
.sino-aparelho-off {
    font-size: 11px; padding: 2px 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .06); color: var(--text-faint);
}
.sino-aparelhos small {
    display: block; margin-top: 9px; font-size: 11px;
    line-height: 1.5; color: var(--text-faint);
}