/* AudioLivros: base comum (tokens, reset, botões, campos, janelas, modais, topo e rodapé). */
:root{
  --roxo:#4a1dff;--roxo2:#6a45ff;--lima:#d6ff00;--preto:#0b0b0f;--branco:#fff;--cinza:#ececf2;--fraco:#5c5c6e;
  --ok:#1fbf5b;--am:#ffb400;--er:#ff3355;--lilas:#b39bff;
  --pix:'Silkscreen','Courier New',monospace;--mono:'Space Mono',Consolas,monospace;
  --b:3px solid var(--preto);--sombra:6px 6px 0 var(--preto);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--roxo);color:var(--preto);font:14px/1.55 var(--mono);min-height:100vh;display:flex;flex-direction:column}
::selection{background:var(--lima)}
/* o que o papel "usuario" não pode fazer some da tela (o servidor recusa de qualquer jeito) */
body:not(.admin) .so-admin{display:none!important}

/* ---------- topo ---------- */
header{background:var(--preto);color:var(--branco);display:flex;align-items:center;gap:18px;padding:14px 24px;border-bottom:var(--b)}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.logo .marca{width:38px;height:38px;display:grid;place-items:center;border:3px solid var(--lilas);color:var(--lilas);font:700 22px var(--pix)}
.logo b{font:700 20px/1 var(--pix);letter-spacing:1px;display:block}.logo small{font:10px var(--pix);color:#bbb;letter-spacing:1px}
nav.abas{display:flex;border:2px solid var(--branco);background:var(--preto)}
nav.abas button{background:transparent;color:var(--branco);border:0;border-right:2px solid var(--branco);border-radius:0;box-shadow:none;transform:none;font:700 12px var(--pix);padding:9px 16px;cursor:pointer;text-transform:uppercase;transition:background .1s,color .1s}
nav.abas button:last-child{border-right:0}
nav.abas button:hover,nav.abas button:active{box-shadow:none;transform:none}
nav.abas button.on{background:var(--branco);color:var(--preto)}
nav.abas button:hover:not(.on){background:var(--lima);color:var(--preto)}
.esp{flex:1}
.fita{background:var(--lima);border-bottom:var(--b);overflow:hidden;white-space:nowrap;font:700 13px var(--pix);text-transform:uppercase;padding:7px 0}
.fita div{display:inline-block;animation:rolar 40s linear infinite;padding-left:100%}
.fita span{margin:0 14px}
@keyframes rolar{to{transform:translateX(-100%)}}

/* ---------- botões e campos ---------- */
button,.bt{font:700 12px var(--pix);text-transform:uppercase;color:var(--preto);background:var(--branco);border:var(--b);padding:10px 16px;cursor:pointer;box-shadow:4px 4px 0 var(--preto);transition:transform .06s,box-shadow .06s;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--preto)}
button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--preto)}
button:disabled{opacity:.5;cursor:default;transform:none}
button.lima{background:var(--lima)}button.roxo{background:var(--roxo);color:var(--branco)}button.preto{background:var(--preto);color:var(--branco);box-shadow:4px 4px 0 var(--lima)}
button.min{padding:6px 10px;font-size:11px;box-shadow:3px 3px 0 var(--preto)}
button.armado{background:var(--er);color:var(--branco)}
/* botão com cara de link (não mexe no # da barra) */
button.link{background:none;border:0;box-shadow:none;padding:0;font:12px var(--mono);text-transform:none;color:var(--fraco);text-decoration:underline;display:inline}
button.link:hover,button.link:active{transform:none;box-shadow:none;color:var(--preto)}
header button.lima{box-shadow:4px 4px 0 var(--lilas)}
header button{white-space:nowrap;flex-shrink:0}
@media(max-width:1420px){header .rot,.logo small{display:none}header{gap:12px}}
@media(max-width:1180px){header{flex-wrap:wrap}nav.abas{order:3;width:100%}}
input,select,textarea{font:14px var(--mono);color:var(--preto);background:var(--branco);border:var(--b);padding:9px 12px;outline:none}
input:focus,select:focus,textarea:focus{box-shadow:4px 4px 0 var(--lima)}
label{display:block;margin:12px 0 5px;font:700 11px var(--pix);text-transform:uppercase}
label.check{display:flex;align-items:center;gap:8px;margin:10px 0}label.check input{width:18px;height:18px;accent-color:var(--roxo)}
label.check.junto{margin:0}
label.topo0{margin-top:0}
.info-mono{font-family:var(--mono);text-transform:none;font-weight:400}
.cheio-l{width:100%}
.sa{font:700 16px/1 var(--mono);font-style:normal}

/* ---------- janelas ---------- */
main{width:100%;max-width:1800px;margin:0 auto;padding:30px 24px 50px;flex:1}
main.cheio{max-width:none;padding:18px 20px 40px}
.jan{background:var(--branco);border:var(--b);box-shadow:var(--sombra);margin-bottom:26px;position:relative}
.jan>.tit{display:flex;align-items:center;gap:10px;border-bottom:var(--b);padding:8px 12px;font:700 12px var(--pix);text-transform:uppercase}
.jan>.tit .seta{margin-left:auto;font:700 14px var(--mono)}
.jan>.tit .fechar{cursor:pointer;background:none;border:0;box-shadow:none;padding:0 4px;font:700 14px var(--mono)}
.jan>.tit .fechar:hover,.jan>.tit .fechar:active{transform:none;box-shadow:none;color:var(--roxo)}
.jan>.corpo{padding:18px}
.jan.preta{background:var(--preto);color:var(--branco);box-shadow:6px 6px 0 var(--lima)}.jan.preta>.tit{border-color:var(--branco);border-bottom:2px solid #333}
.jan.lima{background:var(--lima)}
.fraco{color:var(--fraco);font-size:12px}.jan.preta .fraco{color:#aaa}
.sem-topo{margin-top:0}
.erro{color:var(--er);font-weight:700}.aviso{background:var(--lima);border:2px solid var(--preto);padding:8px 12px;font-weight:700;display:inline-block}
.ok-msg{color:var(--ok);font-weight:700}
.controles{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.controles.fim{justify-content:flex-end;margin-top:10px}
.controles.centro{justify-content:center}
.linha{display:flex;gap:12px;align-items:flex-end}.linha>*{flex:1}.linha>button{flex:0 0 auto}

/* ---------- números, chips, barras ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:var(--b);margin-top:16px}
.stats div{padding:12px 14px;border-right:var(--b)}.stats div:last-child{border-right:0}
.stats small{font:700 10px var(--pix);text-transform:uppercase;display:block}.stats b{font:700 26px/1.3 var(--mono);display:block}
.big{font:700 40px/1.1 var(--mono)}.chip{display:inline-block;background:var(--roxo);color:var(--branco);font:700 12px var(--mono);padding:3px 8px;margin:6px 0}
.rotulo-mini{font:700 10px var(--pix);text-transform:uppercase}
.pct{color:var(--ok);font-weight:700}
.selo{display:inline-block;background:var(--preto);color:var(--lima);font:700 10px var(--pix);padding:3px 7px;margin-left:6px}
.barra{height:14px;border:2px solid var(--preto);display:flex;margin:8px 0;background:repeating-linear-gradient(90deg,var(--cinza) 0 6px,#fff 6px 8px)}
.barra i{display:block;height:100%}
.barra i.c-pronta{background:var(--lima)}.barra i.c-limpa{background:var(--lilas)}.barra i.c-limpando{background:var(--am)}
.barra i.c-narrando{background:#ff8a3d}.barra i.c-pulada{background:#cfcfd8}.barra i.c-erro{background:var(--er)}.barra i.c-roxo{background:var(--roxo)}
.legenda{display:flex;flex-wrap:wrap;gap:6px 14px}.legenda span{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.legenda b{width:14px;height:14px;border:2px solid var(--preto);display:inline-block}
.s-pendente{background:var(--branco);color:#999}.s-limpando{background:var(--am)}.s-narrando{background:#ff8a3d}.s-limpa{background:var(--lilas)}
.s-pronta{background:var(--lima)}.s-pulada{background:repeating-linear-gradient(45deg,#ddd 0 4px,#f6f6f6 4px 8px);color:#aaa}.s-erro{background:var(--er);color:var(--branco)}
.estado{display:inline-block;font:700 10px var(--pix);text-transform:uppercase;padding:3px 7px;border:2px solid var(--preto);background:var(--am)}
.estado.pronto{background:var(--lima)}.estado.erro{background:var(--er);color:#fff}
details summary{cursor:pointer;font:700 11px var(--pix);text-transform:uppercase;margin:12px 0 6px}
pre.texto{white-space:pre-wrap;font:15px/1.6 Georgia,serif;max-height:55vh;overflow:auto;background:var(--cinza);border:var(--b);padding:14px;margin:0}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(20,8,70,.75);display:none;align-items:center;justify-content:center;z-index:30;padding:16px}.modal.on{display:flex}
.modal .jan{width:min(560px,100%);margin:0;max-height:92vh;overflow:auto}
.modal .jan.larga{width:min(980px,100%)}
.modal input,.modal select{width:100%}
.modal label.check input{width:18px}
#dlgTexto{white-space:pre-wrap}

/* ---------- aviso flutuante ---------- */
#toast{position:fixed;right:20px;bottom:20px;z-index:40;background:var(--lima);border:var(--b);box-shadow:var(--sombra);padding:12px 16px;font:700 12px var(--pix);text-transform:uppercase;max-width:min(520px,calc(100vw - 40px))}
#toast.cap{background:var(--roxo);color:var(--branco)}
#toast.ruim{background:var(--er);color:var(--branco)}
body.comPlayer #toast{bottom:96px}

/* ---------- rodapé ---------- */
footer{background:var(--preto);color:#ccc;border-top:var(--b);padding:26px 24px;display:flex;gap:30px;flex-wrap:wrap;align-items:center;font-size:12px}
footer .col b{font:700 11px var(--pix);color:var(--branco);display:block;margin-bottom:6px;text-transform:uppercase}
footer .nota{color:#888}

@media(max-width:700px){
  header{flex-wrap:wrap;padding:10px 14px;gap:10px}
  .logo small,header .rot{display:none}
  .logo .marca{width:32px;height:32px;font-size:18px}.logo b{font-size:16px}
  header button{padding:8px 12px;font-size:14px}
  nav.abas{order:3;width:100%;overflow-x:auto;scrollbar-width:none}nav.abas button{flex:1 0 auto;padding:8px 10px;font-size:11px}
  main{padding:22px 14px 40px}
  .jan{box-shadow:4px 4px 0 var(--preto);margin-bottom:20px}.jan.preta{box-shadow:4px 4px 0 var(--lima)}
  .jan>.corpo{padding:14px}
  .stats b{font-size:20px}.stats div{padding:10px 8px}
  .big{font-size:32px}
  .linha{flex-wrap:wrap}.linha>button{flex:1 0 100%;justify-content:center}
  footer{padding:20px 14px;gap:16px}
  #toast{left:14px;right:14px}
}