/* Avisos, carregamento, janelas e animações. */
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:var(--ink); color:var(--surface); padding:11px 16px; border-radius:10px; font-size:14px; opacity:0; transition:all .3s; pointer-events:none; z-index:40; max-width:min(560px,calc(100% - 32px))}
.toast.on{transform:translate(-50%,0); opacity:1}
.toast.deny{background:var(--bad); color:#fff}
.loading{position:fixed; top:0; left:0; right:0; height:3px; z-index:50; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .2s}
.loading.on{opacity:1}
.loading i{position:absolute; top:0; bottom:0; width:35%; background:var(--accent); animation:load 1s ease-in-out infinite}
.modal-bg{position:fixed; inset:0; background:rgba(10,12,14,.45); display:flex; align-items:center; justify-content:center; z-index:30; padding:16px}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; width:min(520px,100%); display:flex; flex-direction:column; gap:14px; animation:rise .3s ease both; max-height:calc(100vh - 32px); overflow:auto}
.modal.lg{width:min(860px,100%)}
.modal h2{font-size:20px}
.modal .foot{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; position:sticky; bottom:-22px; background:var(--surface); padding:12px 0 2px; border-top:1px solid var(--line)}
.msg{font-family:var(--f-mono); font-size:12.5px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:12px; white-space:pre-wrap}
.itens td{padding:4px}
.itens input{width:100%; border:1px solid var(--line); border-radius:6px; padding:5px 7px; background:var(--surface)}

.enter > *{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.enter > *:nth-child(2){animation-delay:.05s} .enter > *:nth-child(3){animation-delay:.1s} .enter > *:nth-child(4){animation-delay:.15s} .enter > *:nth-child(n+5){animation-delay:.2s}
@keyframes rise{from{opacity:.001; transform:translateY(8px)}to{opacity:1; transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes load{from{left:-35%}to{left:100%}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important; transition:none!important} .draw{stroke-dashoffset:0}}

/* Ficha "O que pode fazer" (Acessos). */
.perm-ficha{display:flex; flex-direction:column; gap:6px; max-height:60vh; overflow:auto; padding-right:4px}
.perm-ficha h3{margin:12px 0 2px; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted)}
.perm-linha{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 14px; padding:8px 0; border-bottom:1px solid var(--line)}
.perm-t{flex:1 1 260px; min-width:0}
.perm-c{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.perm-c select{min-width:220px; max-width:100%}
.perm-emps{display:flex; gap:10px; flex-wrap:wrap}

/* Toque imediato (item 5): botão esperando o servidor mostra a rodinha e "Salvando…" na hora. */
.salvando{pointer-events:none; justify-content:center; gap:8px; opacity:.92}
.roda{display:inline-block; width:15px; height:15px; flex:0 0 15px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:roda .7s linear infinite; vertical-align:-2px}
@keyframes roda{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.roda{animation-duration:2s}}
.espera-aviso{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:80; display:flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; background:#1f2937; color:#fff; font-size:16px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.25); pointer-events:none}
.espera-aviso[hidden]{display:none}
/* Selo da fila: tocar abre "O que está esperando"; vermelho quando passou do limite. */
button.pill-fila{border:0; font-family:inherit; cursor:pointer; min-height:32px; padding:4px 12px}
button.pill-fila[hidden]{display:none}
.pill-fila.preso{background:#fde2e1; color:#a1201a}
.f-rede.preso{color:#ff8a80; font-weight:700}
.pill.enviando{font-weight:600}
.fila-lista .row{align-items:flex-start}
.note.bad{background:#fde2e1; color:#7a1712; border-color:#f3b4b0}

/* Notas do dia: X (44 px) e "Me lembre amanhã" em cada balão do Início. */
.ini-pend .ini-nota{position:relative; display:flex; min-width:0}
.ini-pend .ini-nota .ini-nota-abrir{flex:1; padding-right:58px; padding-bottom:62px}
.ini-pend .ini-nota .ini-nota-x{position:absolute; top:8px; right:8px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; border-radius:50%; background:transparent; box-shadow:none; border:0; font-size:30px; line-height:1; color:var(--muted)}
.ini-pend .ini-nota .ini-nota-x:hover{background:var(--line, rgba(0,0,0,.06)); color:inherit}
.ini-pend .ini-nota .ini-nota-amanha{position:absolute; left:14px; bottom:12px; min-height:40px; display:flex; align-items:center; padding:0 14px; border-radius:999px; background:transparent; box-shadow:none; border:1px solid var(--borda); font-size:15px; font-weight:600; color:var(--muted)}
.ini-pend .ini-nota .ini-nota-amanha:hover{color:inherit; border-color:currentColor}
.ini-escondidas{display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:15px; margin-top:-4px}