/* Roteiro da Cerimonia - Marina & Rapha */
:root{
  --papel:#faf7f2; --papel2:#f1e9dd; --tinta:#2b2420; --tinta-fraca:#8b8177;
  --linha:#e2d6c5; --rapha:#2f6f6a; --marina:#b0543f; --realce:#f5e9d7;
  --raio:14px; --fonte:17px;
  font-size:var(--fonte);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--papel); color:var(--tinta);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.55; -webkit-text-size-adjust:100%;
}

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:20; background:rgba(250,247,242,.96);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--linha); padding:.7rem 1rem .5rem;
}
.topo-linha{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; max-width:1100px; margin:0 auto}
.marca h1{font-family:Georgia,"Times New Roman",serif; font-size:1.25rem; letter-spacing:.02em}
.marca p{font-size:.78rem; color:var(--tinta-fraca)}
.controles{display:flex; gap:.5rem; margin-left:auto; flex-wrap:wrap; align-items:center}
.grupo{display:flex; background:var(--papel2); border-radius:999px; padding:3px}
.grupo button{
  border:0; background:transparent; color:var(--tinta-fraca); cursor:pointer;
  padding:.35rem .8rem; border-radius:999px; font:inherit; font-size:.85rem; white-space:nowrap;
}
.grupo button[aria-pressed="true"]{background:#fff; color:var(--tinta); box-shadow:0 1px 3px rgba(0,0,0,.12); font-weight:600}
.icone{
  border:1px solid var(--linha); background:#fff; color:var(--tinta); cursor:pointer;
  border-radius:999px; padding:.35rem .75rem; font:inherit; font-size:.85rem;
}
.icone:hover{background:var(--realce)}
#btnCrono{font-variant-numeric:tabular-nums; min-width:5.5rem}
#btnCrono.rodando{background:var(--rapha); color:#fff; border-color:var(--rapha)}

.progresso{max-width:1100px; margin:.5rem auto 0; display:flex; align-items:center; gap:.6rem}
.progresso .trilho{flex:1; height:6px; background:var(--papel2); border-radius:999px; overflow:hidden}
.progresso .barra{height:100%; width:0; background:var(--rapha); transition:width .3s}
.progresso small{font-size:.75rem; color:var(--tinta-fraca); white-space:nowrap}

/* ---------- palco ---------- */
.palco{max-width:760px; margin:0 auto; padding:1.5rem 1rem 6rem}
.cena{margin-bottom:2.2rem}
.cena-cab{
  display:flex; align-items:baseline; gap:.6rem; background:var(--papel2);
  border-radius:8px; padding:.45rem .8rem; margin-bottom:.9rem;
}
.cena-cab h2{font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700}
.cena-cab small{margin-left:auto; color:var(--tinta-fraca); font-size:.75rem; white-space:nowrap}

.fala{
  padding:.55rem .7rem; border-radius:var(--raio); margin-bottom:.45rem;
  border-left:3px solid transparent; position:relative; transition:background .2s;
}
.fala.rapha{border-left-color:var(--rapha)}
.fala.marina{border-left-color:var(--marina)}
.fala .quem{font-weight:700; letter-spacing:.02em}
.fala.rapha .quem{color:var(--rapha)}
.fala.marina .quem{color:var(--marina)}
.fala.acao,.fala.nota{color:var(--tinta-fraca); font-size:.92rem; padding-left:.9rem}
.fala.acao{font-style:italic}
.fala.nota{background:#fff; border:1px dashed var(--linha)}
.fala.minha{background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05)}
.fala.decorada .texto{opacity:.55}
.fala.foco{background:var(--realce)}

.ferramentas{display:flex; gap:.35rem; margin-top:.35rem; opacity:0; transition:opacity .15s}
.fala:hover .ferramentas,.fala.aberta .ferramentas{opacity:1}
.ferramentas button{
  border:0; background:var(--papel2); color:var(--tinta-fraca); cursor:pointer;
  border-radius:999px; width:1.9rem; height:1.9rem; font-size:.85rem; line-height:1;
}
.ferramentas button:hover{background:var(--realce); color:var(--tinta)}
.ferramentas button.ativo{background:var(--rapha); color:#fff}
.editor-campo{
  width:100%; margin-top:.4rem; border:1px solid var(--linha); border-radius:8px;
  background:#fffdf9; padding:.5rem .7rem; font:inherit; line-height:1.55; resize:vertical; min-height:3rem;
}
.fala.editando .texto,.fala.editando .dica,.fala.editando .deixa{display:none}
.selo-editada{
  font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle;
  color:var(--marina); background:#fff6f2; border-radius:999px; padding:.1rem .45rem; margin-left:.3rem;
}

/* ---------- modo ensaio ---------- */
.dica,.deixa{display:none; font-size:.9rem; color:var(--tinta-fraca)}
.deixa b{color:var(--marina); font-weight:600}
body.ensaio .fala.minha .texto{filter:blur(6px); cursor:pointer; user-select:none}
body.ensaio .fala.minha.revelada .texto{filter:none; user-select:auto}
body.ensaio .fala.minha .dica{display:block; margin-bottom:.25rem}
body.ensaio .fala.minha.revelada .dica{display:none}
body.ensaio .fala.outro .texto{display:none}
body.ensaio .fala.outro.revelada .texto{display:block}
body.ensaio .fala.outro .deixa{display:block; cursor:pointer}
body.ensaio .fala.outro.revelada .deixa{display:none}

/* ---------- teleprompter ---------- */
body.tele{background:#12100e; color:#f6efe4}
body.tele .topo{background:rgba(18,16,14,.92); border-bottom-color:#2c2722}
body.tele .marca p,body.tele .progresso small{color:#8d8375}
body.tele .grupo{background:#221f1b}
body.tele .grupo button[aria-pressed="true"]{background:#3a342c; color:#fff}
body.tele .icone{background:#221f1b; border-color:#3a342c; color:#f6efe4}
body.tele .palco{max-width:900px; font-size:1.7rem; line-height:1.5; padding-bottom:70vh}
body.tele .cena-cab{background:#221f1b}
body.tele .fala{border-left-width:4px; margin-bottom:1rem}
body.tele .fala.nota,body.tele .fala.acao{background:transparent; border-color:#3a342c; color:#9a9082}
body.tele .fala.minha{background:#1d1a16; box-shadow:none}
body.tele .fala.outro{opacity:.5}
body.tele .fala.decorada .texto{opacity:1}
body.tele .ferramentas,body.tele .editor-campo{display:none}
body.tele .fala.rapha .quem{color:#7fd3c9}
body.tele .fala.marina .quem{color:#f0937a}
body.tele .selo-editada{background:#2a211d; color:#f0937a}

.tele-barra{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:none;
  gap:.6rem; align-items:center; justify-content:center; flex-wrap:wrap;
  background:#12100e; border-top:1px solid #2c2722;
  padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom,0px));
}
body.tele .tele-barra{display:flex}
.tele-barra .icone{background:#221f1b; border-color:#3a342c; color:#f6efe4}
.tele-barra .icone.play{background:#2f6f6a; border-color:#2f6f6a; min-width:6.5rem}
.tele-barra label{font-size:.8rem; color:#8d8375; display:flex; align-items:center; gap:.4rem}
.tele-barra input[type=range]{width:110px; accent-color:#7fd3c9}
.linha-leitura{
  position:fixed; left:0; right:0; top:36%; height:2px;
  background:linear-gradient(90deg,transparent,#7fd3c9,transparent);
  opacity:.45; display:none; pointer-events:none; z-index:25;
}
body.tele .linha-leitura{display:block}
/* no teleprompter o topo sai do caminho: os controles ficam na barra de baixo */
body.tele .topo{position:static}
body.tele .progresso{display:none}

/* ---------- ajuda ---------- */
dialog{
  border:0; border-radius:var(--raio); padding:1.4rem 1.6rem; max-width:34rem;
  background:var(--papel); color:var(--tinta); box-shadow:0 20px 60px rgba(0,0,0,.3);
}
dialog::backdrop{background:rgba(20,16,12,.55)}
dialog h3{font-family:Georgia,serif; margin-bottom:.7rem}
dialog p{font-size:.9rem; margin-bottom:.6rem}
dialog ul{margin:.4rem 0 .9rem 1.1rem; font-size:.9rem}
dialog li{margin-bottom:.3rem}
dialog kbd{
  background:var(--papel2); border:1px solid var(--linha); border-bottom-width:2px;
  border-radius:5px; padding:0 .35rem; font:inherit; font-size:.8rem;
}

@media (max-width:640px){
  :root{--fonte:16px}
  .topo{padding:.5rem .7rem .35rem}
  .topo-linha{gap:.5rem}
  .marca h1{font-size:1rem}
  .marca p{display:none}
  .controles{width:100%; margin-left:0; gap:.35rem}
  .grupo{padding:2px}
  .grupo button{padding:.3rem .5rem; font-size:.78rem}
  .icone{padding:.3rem .55rem; font-size:.78rem}
  #btnCrono{min-width:4.6rem}
  .palco{padding:1rem .7rem 6rem}
  body.tele .palco{font-size:1.35rem}
  .ferramentas{opacity:1}
}

@media print{
  .topo,.tele-barra,.ferramentas,.linha-leitura,.editor-campo,.selo-editada{display:none !important}
  body{background:#fff}
  .palco{max-width:none; padding:0}
  .cena{break-inside:avoid}
}

/* aviso de roteiro trocado */
.aviso{
  max-width:1100px; margin:.5rem auto 0; display:flex; gap:.6rem; align-items:center;
  background:#fff6f2; border:1px solid #e9cfc3; color:#8a4a34;
  border-radius:10px; padding:.4rem .7rem; font-size:.82rem;
}
.aviso button{
  margin-left:auto; border:1px solid #e9cfc3; background:#fff; color:#8a4a34;
  border-radius:999px; padding:.15rem .7rem; font:inherit; font-size:.78rem; cursor:pointer;
}
body.tele .aviso{background:#2a211d; border-color:#4a3a33; color:#f0937a}
body.tele .aviso button{background:#1d1a16; border-color:#4a3a33; color:#f0937a}

/* selo de estado do servidor */
.selo-nuvem{font-size:.72rem; color:var(--tinta-fraca); white-space:nowrap; cursor:default}
.selo-nuvem.ok::before{content:'°1 '; color:var(--rapha)}
.selo-nuvem.enviando::before,.selo-nuvem.ligando::before{content:'bb '}
.selo-nuvem.offline{color:var(--marina)}
.selo-nuvem.offline::before{content:'a0 '}
body.tele .selo-nuvem{color:#8d8375}
@media (max-width:640px){ .selo-nuvem{font-size:.68rem} }