:root{
  --fundo:#12151a; --cartao:#1b2027; --cartao2:#151920; --borda:#262d37;
  --txt:#e8edf4; --suave:#94a1b2; --apagado:#4a5462;
  --verde:#37c98a; --verde-fraco:#12331f; --whats:#25d366; --azul:#3d8bfd; --laranja:#c2410c;
  --vermelho:#ef4444; --sombra:0 8px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:light){
  :root{
    --fundo:#f5f7fa; --cartao:#fff; --cartao2:#eef1f5; --borda:#e0e5eb;
    --txt:#151a21; --suave:#5f6b7a; --apagado:#b3bcc7;
    --verde:#158a55; --verde-fraco:#e6f5ed; --sombra:0 8px 30px rgba(20,30,50,.12);
  }
}
:root{color-scheme:light dark}
*{box-sizing:border-box}
html,body{margin:0}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
/* toast de confirmação */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--txt);color:var(--fundo);padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;
  box-shadow:var(--sombra);z-index:50;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}
#toast.ver{opacity:1;transform:translateX(-50%) translateY(0)}
body{
  background:var(--fundo); color:var(--txt); -webkit-text-size-adjust:100%;
  font:15px/1.45 -apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
}
button,input,textarea{font-family:inherit}
a{color:var(--azul)}
.oculto{display:none !important}

/* ---------- Login ---------- */
.login-tela{min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px}
.login-cartao{width:min(380px,100%); background:var(--cartao); border:1px solid var(--borda); border-radius:16px; padding:26px 22px; box-shadow:var(--sombra)}
.login-cartao h1{font-size:19px; margin:0 0 2px; letter-spacing:-.3px}
.login-cartao .sub{color:var(--suave); font-size:13px; margin:0 0 18px}
.campo{margin:0 0 12px}
.campo label{display:block; font-size:12px; font-weight:600; color:var(--suave); margin:0 0 5px}
.campo input,.campo textarea,.campo select{
  width:100%; font-size:15px; color:var(--txt); background:var(--cartao2);
  border:1px solid var(--borda); border-radius:9px; padding:11px 12px;
}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--azul); outline-offset:-1px}
.btn{border:0; border-radius:9px; padding:12px 16px; font-size:15px; font-weight:650; cursor:pointer; color:#fff; width:100%}
.btn.verde{background:var(--verde)} .btn.azul{background:var(--azul)} .btn.whats{background:var(--whats)}
.btn.sec{background:var(--cartao2); color:var(--txt); border:1px solid var(--borda)}
.btn:disabled{opacity:.6; cursor:wait}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.erro-msg{color:var(--vermelho); font-size:13px; font-weight:600; min-height:18px; margin:8px 0 0}

/* ---------- App shell ---------- */
.topo{position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:var(--cartao); border-bottom:1px solid var(--borda)}
.topo .marca{font-weight:700; letter-spacing:-.3px}
.topo .quem{margin-left:auto; color:var(--suave); font-size:13px; text-align:right}
.topo .sair{background:none; border:0; color:var(--suave); cursor:pointer; font-size:13px; text-decoration:underline; padding:4px}
.abas{display:flex; gap:4px; padding:10px 16px 0; overflow-x:auto; background:var(--cartao); border-bottom:1px solid var(--borda)}
.aba{background:none; border:0; border-bottom:3px solid transparent; color:var(--suave); font-size:14px; font-weight:600;
  padding:8px 12px 10px; cursor:pointer; white-space:nowrap}
.aba.ativa{color:var(--txt); border-bottom-color:var(--verde)}
main{padding:18px 16px 60px; max-width:1100px; margin:0 auto}
.titulo-vista{font-size:16px; margin:0 0 4px; letter-spacing:-.3px}
.ajuda-vista{color:var(--suave); font-size:13px; margin:0 0 16px}

/* ---------- modos e barra de disponibilidade ---------- */
.modos{display:inline-flex; gap:0; border:1px solid var(--borda); border-radius:9px; overflow:hidden; margin:0 0 10px}
.modo{background:var(--cartao); border:0; color:var(--suave); font-size:13px; font-weight:600; padding:8px 14px; cursor:pointer}
.modo.ativo{background:var(--verde); color:#fff}
.slot.sel{background:var(--verde); color:#fff; border-style:solid}
.slot.sel::before{content:"✓ "}
.barra-disp{position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:20; display:flex; align-items:center; gap:14px;
  background:var(--cartao); border:1px solid var(--borda); border-radius:12px; padding:10px 14px; box-shadow:var(--sombra); max-width:94vw; flex-wrap:wrap}
.barra-disp #disp-contador{font-weight:700; font-size:14px}
.barra-acoes{display:flex; gap:6px; flex-wrap:wrap}
.barra-acoes .btn{width:auto; padding:9px 12px; font-size:13px}

/* ---------- Agenda (calendário) ---------- */
.mes-header{color:var(--verde); font-size:13px; font-weight:650; text-transform:uppercase; letter-spacing:1.3px; margin:24px 0 10px}
.calendar{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px}
.day{background:var(--cartao); border:1px solid var(--borda); border-radius:10px; padding:7px 6px; font-size:12px; min-height:92px; overflow:hidden}
.day.header{background:none; border:0; color:var(--suave); font-weight:600; text-align:center; min-height:0; padding:0 0 6px; font-size:11px; letter-spacing:.6px; text-transform:uppercase}
.day.vazio{background:var(--cartao2); border-color:transparent}
.day.hoje{border-color:var(--verde); box-shadow:0 0 0 1px var(--verde) inset}
.date{font-weight:700; font-size:14px; margin-bottom:5px}
.day.vazio .date{color:var(--apagado)}
.video{font-size:11px; line-height:1.3; font-weight:600; color:#fff; background:var(--laranja); border-radius:6px; padding:3px 5px; margin-bottom:4px; overflow-wrap:anywhere}
.slot{display:block; width:100%; text-align:left; font-size:11px; line-height:1.35; color:var(--verde);
  background:var(--verde-fraco); border:1px dashed var(--verde); border-radius:6px; padding:4px 6px; margin-bottom:4px; cursor:pointer}
button:focus-visible,.slot:focus-visible,input:focus-visible{outline:2px solid var(--azul); outline-offset:2px}
@media (max-width:620px){ .slot{min-height:44px; display:flex; align-items:center} .btn{min-height:44px} }
.slot:hover{filter:brightness(1.07)}
@media (max-width:620px){
  .calendar{grid-template-columns:1fr; gap:8px}
  .day{min-height:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:11px 13px}
  .day.header,.day.vazio{display:none}
  .date{margin:0; min-width:28px; font-size:17px}
  .slot,.video{margin:0; flex:1 1 100%}
}

/* ---------- Monitorar ---------- */
.lista-videos{display:flex; flex-direction:column; gap:8px}
.card-video{display:flex; gap:12px; align-items:center; background:var(--cartao); border:1px solid var(--borda); border-radius:10px; padding:12px 14px}
.card-video .dia{font-weight:700; min-width:92px}
.card-video .tit{flex:1; font-weight:600}
.card-video .quem{color:var(--suave); font-size:13px}

/* ---------- Modal ---------- */
.modal-fundo{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:14px; z-index:10}
.modal{background:var(--cartao); border:1px solid var(--borda); border-radius:14px; width:min(540px,100%); max-height:92vh; overflow:auto; padding:20px; box-shadow:var(--sombra)}
.modal h3{margin:0 0 2px; font-size:18px}
.modal .quando{color:var(--suave); font-size:13px; margin:0 0 14px}
.modal textarea{min-height:150px; resize:vertical}
.dica{font-size:12px; color:var(--suave); margin:6px 0 0}
.acoes{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:14px}
.acoes .btn{width:auto}
.ok-msg{color:var(--verde); font-size:13px; font-weight:600; margin:10px 0 0}