@font-face{font-family:'Archivo';font-weight:500 900;font-stretch:62% 125%;font-display:swap;src:url(fontes/archivo-b9202932.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:400 600;font-display:swap;src:url(fontes/instrument-sans-046090ca.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(fontes/ibm-plex-mono-9b827059.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-display:swap;src:url(fontes/ibm-plex-mono-a7544cc4.woff2) format('woff2')}
:root{--preto:#121417;--vermelho:#D92330;--brilho:#FF3B47;--concreto:#ECEDEA;--texto:#121417;--suave:#5f646b;--linha:#1214171a;--ok:#1f6b3d;--okbg:#e3f3ea;--at:#8a4a00;--atbg:#fff1de;--tit:'Archivo',sans-serif;--corpo:'Instrument Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--concreto);color:var(--texto);font:400 16px/1.5 var(--corpo);-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.mono{font-family:var(--mono);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.tit{font-family:var(--tit);font-weight:900;font-stretch:72%;text-transform:uppercase;line-height:.92;margin:0}
.suave{color:var(--suave)}
.marca-logo{display:flex;align-items:center;gap:6px}.marca-logo .tit{font-size:24px;color:#fff}.marca-logo .on{background:var(--vermelho);border-radius:6px;padding:3px 6px 0}
/* estrutura */
.app{min-height:100dvh;display:grid;grid-template-columns:1fr}
.menu{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--preto);display:flex;justify-content:space-around;padding:6px 6px calc(10px + env(safe-area-inset-bottom))}
.menu a{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:60px;min-height:48px;justify-content:center;color:#9aa0a8;text-decoration:none;font:600 11px/1 var(--corpo);border-radius:12px;position:relative}
.menu a.on{color:#fff}.menu a.on::before{content:"";position:absolute;top:-6px;width:26px;height:3px;border-radius:3px;background:var(--brilho)}
.menu .rotulo-lateral,.menu .topo-lateral,.menu .quem{display:none}
.conteudo{padding:0 0 calc(92px + env(safe-area-inset-bottom));min-width:0}
.cabeca{background:var(--preto);color:#fff;padding:calc(16px + env(safe-area-inset-top)) 18px 22px;display:flex;flex-direction:column;gap:14px}
.cabeca .linha1{display:flex;justify-content:space-between;align-items:center;gap:10px}
.selo{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:7px 9px;border-radius:7px;background:#ffffff1a;color:#fff}
.selo.vermelho{background:var(--vermelho)}
.corpo{padding:16px;display:flex;flex-direction:column;gap:14px;max-width:1180px}
.card{background:#fff;border-radius:18px;box-shadow:0 0 0 1px var(--linha);padding:16px}
.card.escuro{background:var(--preto);color:#fff;box-shadow:none}
.card.alerta{box-shadow:0 0 0 2px var(--vermelho)}
.card h2{font-family:var(--tit);font-weight:900;font-stretch:74%;text-transform:uppercase;font-size:22px;line-height:1;margin:0 0 10px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpi{border-radius:14px;padding:12px;background:#ffffff12}
.kpi b{display:block;font-family:var(--tit);font-weight:900;font-stretch:72%;font-size:28px;line-height:1;margin-top:6px}
.kpi.vermelho{background:var(--vermelho)}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid #1214170f;text-decoration:none;color:inherit}
.item:first-of-type{border-top:0}
.item small{display:block;color:var(--suave);font-size:13px}
.hora{font-family:var(--tit);font-weight:900;font-stretch:72%;font-size:22px}
.chip{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;border-radius:6px;white-space:nowrap}
.chip.agendada{background:var(--preto);color:#fff}.chip.ao_vivo{background:var(--vermelho);color:#fff}.chip.feita{background:#eceef0;color:#4a4f57}.chip.cancelada{background:#fff;color:#8a9099;box-shadow:inset 0 0 0 1px #c6c9cd;text-decoration:line-through}
.chip.Ativa{background:var(--okbg);color:var(--ok)}.chip.Teste{background:var(--atbg);color:var(--at)}.chip.Proposta,.chip.Pausada,.chip.Encerrada{background:#eceef0;color:#4a4f57}
.barra{height:8px;border-radius:4px;background:#1214170f;margin-top:6px}.barra i{display:block;height:8px;border-radius:4px;background:var(--preto)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;font-weight:600;font-size:15px;text-decoration:none;background:var(--preto);color:#fff}
.btn.vermelho{background:var(--vermelho)}.btn.claro{background:#fff;color:var(--preto);box-shadow:0 0 0 1px #1214172a}.btn.cinza{background:var(--concreto);color:var(--preto)}.btn.largo{width:100%}
.btn:disabled{opacity:.5}
.acoes{display:flex;flex-wrap:wrap;gap:8px}
.vazio{text-align:center;padding:26px 10px;color:var(--suave)}
/* formulários */
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
.form input,.form select,.form textarea{min-height:48px;border-radius:12px;border:1px solid #1214172a;background:#fff;padding:10px 12px;font-size:16px;font-weight:400}
.form textarea{min-height:90px}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aviso-erro{background:#fff1f1;color:#a3141f;border-radius:12px;padding:12px;font-size:14px;box-shadow:inset 0 0 0 1px #D9233040}
.aviso-ok{background:var(--okbg);color:var(--ok);border-radius:12px;padding:12px;font-size:14px}
/* folha (formulário por cima) */
.folha-fundo{position:fixed;inset:0;background:#0b0c0ecc;z-index:40;display:flex;align-items:flex-end;justify-content:center}
.folha{background:var(--concreto);width:100%;max-width:560px;max-height:92dvh;overflow:auto;border-radius:22px 22px 0 0;padding:18px 16px calc(22px + env(safe-area-inset-bottom))}
.folha .topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.fechar{width:44px;height:44px;border-radius:50%;border:0;background:#fff;cursor:pointer;display:grid;place-items:center}
/* agenda */
.dias{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.dias button{flex:0 0 auto;min-width:54px;min-height:58px;border-radius:14px;border:0;background:#fff;box-shadow:0 0 0 1px var(--linha);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.dias button b{font-family:var(--tit);font-weight:900;font-stretch:72%;font-size:22px;line-height:1}
.dias button.on{background:var(--preto);color:#fff}.dias button.hoje:not(.on){box-shadow:0 0 0 2px var(--vermelho)}
/* linha do tempo das cabines (computador) */
.tempo{display:none}
/* login */
.login{min-height:100dvh;background:var(--preto);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:28px 22px;gap:22px}
.login .form label{color:#cfd2cc}.login .form input{background:#1c1f24;border-color:#ffffff22;color:#fff}
.carregando{min-height:60dvh;display:grid;place-items:center;color:var(--suave)}
@media (min-width:900px){
  .app{grid-template-columns:240px minmax(0,1fr)}
  .menu{position:sticky;top:0;height:100dvh;flex-direction:column;justify-content:flex-start;gap:4px;padding:22px 14px}
  .menu .topo-lateral{display:flex;padding:4px 8px 18px}
  .menu a{flex-direction:row;justify-content:flex-start;gap:12px;padding:0 14px;min-height:46px;font-size:15px;font-weight:500}
  .menu a.on{background:var(--vermelho)}.menu a.on::before{display:none}
  .menu .quem{display:flex;margin-top:auto;gap:10px;align-items:center;padding:12px;border-radius:12px;background:#ffffff0a;color:#fff;font-size:14px}
  .conteudo{padding-bottom:30px}
  .cabeca{padding:28px 34px}
  .corpo{padding:22px 34px}
  .grade2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .grade3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tempo{display:block}.so-celular{display:none}
  .folha-fundo{align-items:center}.folha{border-radius:22px}
}
