:root { --azul:#12285a; --azul2:#1d3d86; --dourado:#c9a227; --fundo:#f3f5fa; --texto:#1b2438; --suave:#5d6a85; --borda:#d8deec; --ok:#1c7c4d; --erro:#b3261e; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:var(--fundo); color:var(--texto); line-height:1.5; }
.topo { background:#fff; border-bottom:1px solid var(--borda); padding:12px 16px; display:flex; align-items:center; gap:12px; }
.topo img { height:34px; }
.topo .titulo { font-weight:700; color:var(--azul); font-size:17px; }
main { max-width:860px; margin:0 auto; padding:20px 16px 60px; }
.cartao { background:#fff; border:1px solid var(--borda); border-radius:14px; padding:20px; margin-bottom:16px; box-shadow:0 2px 8px rgba(18,40,90,.05); }
h1 { font-size:24px; margin:4px 0 6px; color:var(--azul); }
h2 { font-size:18px; margin:0 0 10px; color:var(--azul); }
.sub { color:var(--suave); margin:0 0 14px; }
.aviso { background:#fff8e1; border:1px solid #f0d98a; color:#5b4a00; padding:12px 14px; border-radius:10px; font-size:14px; margin:12px 0; }
.erro { background:#fdeceb; border:1px solid #f1b8b4; color:var(--erro); padding:12px 14px; border-radius:10px; font-size:14px; margin:12px 0; }
.sucesso { background:#e8f6ee; border:1px solid #a9dcc0; color:var(--ok); padding:12px 14px; border-radius:10px; font-size:15px; margin:12px 0; }
[hidden] { display:none !important; }
button, .botao { font:inherit; cursor:pointer; border-radius:10px; border:1px solid var(--azul); background:var(--azul); color:#fff; padding:11px 18px; font-weight:600; text-decoration:none; display:inline-block; }
button:disabled { opacity:.55; cursor:not-allowed; }
button.sec { background:#fff; color:var(--azul); }
button.perigo { background:var(--erro); border-color:var(--erro); }
label { display:block; font-weight:600; margin:12px 0 4px; font-size:14px; }
input[type=text], input[type=tel], input[type=email], textarea, input[type=date], input[type=time], input[type=number], select { width:100%; font:inherit; padding:10px 12px; border:1px solid var(--borda); border-radius:10px; background:#fff; }
textarea { min-height:90px; resize:vertical; }
.lista-cartorios { display:grid; gap:10px; }
.lista-cartorios a { display:block; padding:14px 16px; background:#fff; border:1px solid var(--borda); border-radius:12px; color:var(--azul); font-weight:600; text-decoration:none; }
.lista-cartorios a:hover { border-color:var(--azul2); }
.cab-mes { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cab-mes .nome { font-weight:700; font-size:18px; }
.cab-mes button { padding:6px 14px; }
.grade-dias { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.grade-dias .sem { text-align:center; font-size:12px; color:var(--suave); font-weight:600; padding:4px 0; }
.dia { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid transparent; font-weight:600; background:transparent; color:#9aa4bb; padding:0; }
.dia.livre { background:#e8f6ee; color:var(--ok); border-color:#a9dcc0; cursor:pointer; }
.dia.livre:hover { border-color:var(--ok); }
.dia.sel { background:var(--azul); color:#fff; border-color:var(--azul); }
.dia.vazio { visibility:hidden; }
.horarios { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.horarios button { background:#fff; color:var(--azul); padding:9px 16px; }
.horarios button.sel { background:var(--azul); color:#fff; }
.legenda { font-size:13px; color:var(--suave); margin-top:10px; }
.resumo { background:#eef2fb; border-radius:10px; padding:10px 14px; margin:10px 0; font-weight:600; color:var(--azul); }
/* sala */
.palco { position:relative; background:#0d1424; border-radius:14px; overflow:hidden; aspect-ratio:16/10; }
.palco video { width:100%; height:100%; object-fit:cover; background:#0d1424; }
.palco .eu { position:absolute; left:10px; bottom:10px; width:28%; max-width:200px; aspect-ratio:4/3; border-radius:10px; border:2px solid #fff; object-fit:cover; background:#222; }
.palco .centro { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; padding:20px; font-size:18px; }
.faixa-gravando { background:#b3261e; color:#fff; padding:8px 14px; border-radius:10px; font-weight:600; margin-bottom:10px; }
.controles { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.chat { border:1px solid var(--borda); border-radius:12px; background:#fff; }
.chat .msgs { height:170px; overflow:auto; padding:10px 12px; font-size:14px; }
.chat .msg { margin:4px 0; }
.chat .msg b { color:var(--azul); }
.chat .envio { display:flex; gap:8px; padding:8px; border-top:1px solid var(--borda); }
.chat .envio input { flex:1; }
.arquivos a, .arquivos button.link { color:var(--azul2); background:none; border:none; padding:2px 0; text-decoration:underline; cursor:pointer; font-weight:500; }
@media (max-width:600px){ .palco{aspect-ratio:3/4;} .palco .eu{width:34%;} }

/* ===== Monitor de vídeo: tela grande (quem fala com você) + telinha (você) ===== */
.monitor { position:relative; padding-bottom:26px; }
.monitor::after { content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:34%; height:14px; background:linear-gradient(#3a4256,#1c2231); border-radius:0 0 14px 14px; box-shadow:0 6px 14px rgba(0,0,0,.25); }
.monitor::before { content:""; position:absolute; left:50%; bottom:12px; transform:translateX(-50%); width:8%; min-width:40px; height:16px; background:#2a3042; }
.monitor .palco { border:10px solid #151a27; border-bottom-width:14px; border-radius:18px; box-shadow:0 0 0 2px #3a4256, 0 14px 34px rgba(10,18,40,.35), inset 0 0 40px rgba(0,0,0,.45); }
.monitor .palco::after { content:""; position:absolute; right:12px; bottom:-11px; width:6px; height:6px; border-radius:50%; background:#2ecc71; box-shadow:0 0 6px 2px rgba(46,204,113,.7); z-index:6; }
.palco .tela-rotulo { position:absolute; z-index:5; top:10px; left:10px; background:rgba(0,0,0,.55); color:#fff; font-size:13px; font-weight:700; padding:4px 10px; border-radius:99px; display:flex; align-items:center; gap:6px; max-width:70%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; pointer-events:none; }
.palco .tela-rotulo i { width:8px; height:8px; border-radius:50%; background:#ff3b3b; box-shadow:0 0 6px 2px rgba(255,59,59,.7); flex:none; }
.palco .tela-rotulo-eu { position:absolute; z-index:6; left:14px; bottom:calc(10px + min(28%, 200px) * 0.75 + 6px); font-size:11px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); padding:2px 8px; border-radius:99px; pointer-events:none; }
.monitor .palco .eu { left:12px; bottom:12px; border:3px solid #151a27; box-shadow:0 0 0 2px #5b6784, 0 6px 16px rgba(0,0,0,.5); border-radius:8px; }


/* selo no canto inferior esquerdo do vídeo: nome, data e "Gravando" */
.selo-gravacao { position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.6); color:#fff; border-radius:10px; padding:8px 12px; line-height:1.35; font-size:14px; z-index:5; max-width:60%; pointer-events:none; }
.selo-gravacao[hidden] { display:none; }
.selo-gravacao .sg-nome { display:block; font-size:15px; }
.selo-gravacao .sg-data { display:block; opacity:.9; }
.selo-gravacao .sg-rec { display:block; font-weight:700; }
.selo-gravacao .sg-bola { display:inline-block; width:10px; height:10px; border-radius:50%; background:#ff1f1f; box-shadow:0 0 8px 2px #ff4040; margin-right:6px; animation:sgPisca 1s steps(1, end) infinite; }
@keyframes sgPisca { 0% { opacity:1; box-shadow:0 0 8px 2px #ff4040; } 50% { opacity:.08; box-shadow:none; } 100% { opacity:1; box-shadow:0 0 8px 2px #ff4040; } }