/* Central RCA — identidade visual */
:root{
  --navy:#063058; --navy-2:#0B4278; --vermelho:#D44255; --vermelho-claro:#FEF2F2;
  --fundo:#F3F5F8; --linha:#E2E8F0; --tinta:#1F2937; --suave:#64748B;
  --ok:#12805C; --ok-fundo:#ECFDF5; --alerta:#B45309; --alerta-fundo:#FFFBEB;
  --azul-fundo:#EEF3F9; --sombra:0 1px 2px rgba(6,48,88,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',system-ui,-apple-system,sans-serif;background:var(--fundo);color:var(--tinta);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--navy-2)}
.oculto{display:none!important}

/* ---------- login ---------- */
.tela-login{min-height:100vh;background:var(--navy);display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden}
.tela-login .marca-fundo{position:absolute;left:-70px;bottom:-90px;opacity:.13;pointer-events:none}
.caixa-login{width:100%;max-width:390px;position:relative;z-index:1}
.caixa-login .topo{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.caixa-login .topo h1{color:#fff;font-size:22px;font-weight:700;letter-spacing:-.02em}
.caixa-login .topo p{color:#93A9C4;font-size:12.5px}
.painel{background:#fff;border:1px solid var(--linha);border-radius:14px;box-shadow:var(--sombra)}
.painel.p{padding:22px}
.dica-login{color:#93A9C4;font-size:11.5px;text-align:center;margin-top:14px;line-height:1.6}

/* ---------- formulários ---------- */
.campo{display:block;margin-bottom:14px}
.campo>span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--suave);display:block;margin-bottom:5px}
.campo .ajuda{font-size:11.5px;color:var(--suave);margin-top:4px;display:block;text-transform:none;letter-spacing:0;font-weight:400}
input,select,textarea{width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--linha);background:#fff;outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--navy)}
textarea{min-height:100px;resize:vertical}
.com-olho{position:relative}
.com-olho input{padding-right:38px}
.com-olho button{position:absolute;right:6px;top:6px;background:none;border:none;cursor:pointer;color:var(--suave);padding:4px}
.codigo-otp{letter-spacing:.5em;font-size:19px;text-align:center;font-weight:600}

.btn{display:inline-flex;align-items:center;gap:7px;border-radius:10px;font-weight:600;cursor:pointer;border:1px solid transparent;padding:9px 15px;font-size:13.5px;background:var(--navy);color:#fff;transition:filter .15s;white-space:nowrap}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.contorno{background:#fff;color:var(--navy);border-color:var(--linha)}
.btn.perigo{background:var(--vermelho)}
.btn.fantasma{background:transparent;color:var(--suave)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.largo{width:100%;justify-content:center;padding:11px}
.btn-icone{background:none;border:none;cursor:pointer;color:var(--suave);padding:5px;display:inline-flex;border-radius:6px}
.btn-icone:hover{background:var(--fundo)}
.btn-icone.vermelho{color:var(--vermelho)}

.aviso{font-size:12.5px;font-weight:600;padding:9px 12px;border-radius:9px;margin-bottom:12px}
.aviso.erro{background:var(--vermelho-claro);color:var(--vermelho)}
.aviso.ok{background:var(--ok-fundo);color:var(--ok)}
.aviso.info{background:var(--azul-fundo);color:var(--navy)}

/* ---------- estrutura ---------- */
.app{display:flex;min-height:100vh}
.lateral{width:212px;min-width:212px;background:var(--navy);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.lateral .marca{display:flex;align-items:center;gap:9px;padding:18px 18px 22px}
.lateral .marca strong{color:#fff;font-size:15.5px;font-weight:700;display:block;line-height:1.2}
.lateral .marca small{color:#8FA6C0;font-size:11px}
.lateral nav{padding:0 10px;flex:1}
.lateral nav button{width:100%;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;border:none;cursor:pointer;font-size:13.5px;font-weight:600;margin-bottom:3px;background:transparent;color:#9DB2C9;text-align:left}
.lateral nav button svg{color:#7E96B2;flex-shrink:0}
.lateral nav button.ativo{background:rgba(255,255,255,.11);color:#fff}
.lateral nav button.ativo svg{color:var(--vermelho)}
.lateral .rodape{padding:12px;border-top:1px solid rgba(255,255,255,.1)}
.lateral .rodape .eu{display:flex;align-items:center;gap:9px;padding:6px 4px;margin-bottom:6px}
.lateral .rodape .eu div{min-width:0;flex:1}
.lateral .rodape .eu b{color:#fff;font-size:12.5px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lateral .rodape .eu small{color:#8FA6C0;font-size:10.5px}
.lateral .rodape button{width:100%;display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:8px;border:none;background:transparent;color:#9DB2C9;font-size:12.5px;font-weight:600;cursor:pointer}
.lateral .rodape button:hover{background:rgba(255,255,255,.08)}

.topo-mobile{display:none;background:var(--navy);padding:11px 14px;position:sticky;top:0;z-index:40;align-items:center;justify-content:space-between}
.topo-mobile span{color:#fff;font-weight:700;font-size:14px}
.topo-mobile button{background:rgba(255,255,255,.13);border:none;color:#fff;border-radius:8px;padding:6px 11px;cursor:pointer;font-size:12.5px;font-weight:600}

main{flex:1;min-width:0;padding:22px 20px 70px}
.miolo{max-width:1080px;margin:0 auto}
h1.titulo{font-size:26px;font-weight:700;color:var(--navy);letter-spacing:-.02em}
p.legenda{color:var(--suave);font-size:13px;margin-top:2px}
.cabecalho{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px}

/* ---------- componentes ---------- */
.grade{display:grid;gap:12px}
.grade.indicadores{grid-template-columns:repeat(auto-fill,minmax(152px,1fr))}
.grade.cartoes{grid-template-columns:repeat(auto-fill,minmax(262px,1fr))}
.grade.campos{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.grade.duas{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.indicador{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:16px;box-shadow:var(--sombra)}
.indicador.clicavel{cursor:pointer}
.indicador.clicavel:hover{border-color:var(--navy-2)}
.indicador.destaque{border-color:var(--vermelho)}
.indicador i{width:30px;height:30px;border-radius:9px;background:var(--azul-fundo);color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.indicador.destaque i{background:var(--vermelho-claro);color:var(--vermelho)}
.indicador b{font-size:23px;font-weight:700;color:var(--navy);letter-spacing:-.02em;display:block;line-height:1.15}
.indicador span{font-size:12px;color:var(--suave);display:block;margin-top:2px}
.indicador em{font-size:11.5px;font-weight:600;font-style:normal;display:block;margin-top:4px;color:var(--suave)}
.indicador.destaque em{color:var(--vermelho)}

.bloco{background:#fff;border:1px solid var(--linha);border-radius:14px;box-shadow:var(--sombra);overflow:hidden}
.bloco>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--linha);flex-wrap:wrap}
.bloco>header h2{font-size:14.5px;font-weight:700;color:var(--navy)}
.bloco>header p{font-size:11.5px;color:var(--suave);margin-top:2px}
.bloco .conteudo{padding:18px}
.linha{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linha)}
.linha:last-child{border-bottom:none}
.subtitulo{padding:8px 16px;background:#F8FAFC;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}

.selo{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;background:#F1F5F9;color:var(--suave);display:inline-block}
.selo.azul{background:var(--azul-fundo);color:var(--navy)}
.selo.verde{background:var(--ok-fundo);color:var(--ok)}
.selo.vermelho{background:var(--vermelho-claro);color:var(--vermelho)}
.selo.ambar{background:var(--alerta-fundo);color:var(--alerta)}

.pilulas{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.pilula{border:1px solid var(--linha);background:#fff;color:var(--suave);padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer}
.pilula.ativa{background:var(--navy);color:#fff;border-color:var(--navy)}
.pilulas select{width:auto;padding:6px 10px;font-size:12.5px;max-width:210px}
.divisor{width:1px;height:20px;background:var(--linha)}

.abas{display:flex;gap:2px;border-bottom:1px solid var(--linha);margin-bottom:18px;overflow-x:auto}
.abas button{border:none;background:none;cursor:pointer;font-size:13.5px;font-weight:600;padding:10px 14px;color:var(--suave);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;align-items:center;gap:5px}
.abas button.ativa{color:var(--navy);border-bottom-color:var(--vermelho)}

.check{width:24px;height:24px;min-width:24px;border-radius:7px;cursor:pointer;border:1.5px solid #CBD5E1;background:#fff;display:flex;align-items:center;justify-content:center;padding:0}
.check.marcado{border-color:var(--navy);background:var(--navy)}

.tarefa-info{flex:1;min-width:0}
.tarefa-info b{font-size:13.5px;font-weight:600;color:var(--navy);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tarefa-info small{font-size:11.5px;color:var(--suave);display:block;margin-top:2px}
.tarefa-info small .cliente{font-weight:600;color:var(--navy-2)}
.feita .tarefa-info b{color:var(--suave);text-decoration:line-through}

.barra{height:6px;background:#EEF2F7;border-radius:999px;margin-top:6px;overflow:hidden}
.barra div{height:100%;border-radius:999px;background:var(--navy)}
.avatar{width:32px;height:32px;border-radius:999px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex-shrink:0}
.avatar.quadrado{border-radius:10px;width:36px;height:36px;font-size:12.5px}

.vazio{text-align:center;padding:44px 20px}
.vazio svg{color:#CBD5E1;margin-bottom:10px}
.vazio b{display:block;font-weight:700;color:var(--navy);font-size:15px}
.vazio span{color:var(--suave);font-size:13px;margin-top:4px;display:block}

.modal-fundo{position:fixed;inset:0;background:rgba(6,48,88,.45);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto}
.modal{background:#fff;border-radius:16px;width:100%;max-width:600px;margin:40px 0;box-shadow:0 24px 60px rgba(6,48,88,.25)}
.modal>header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--linha)}
.modal>header h3{font-size:16px;font-weight:700;color:var(--navy)}
.modal .corpo{padding:20px}
.modal .acoes{display:flex;gap:8px;justify-content:flex-end;padding-top:6px}

.qr{display:flex;justify-content:center;padding:14px;background:#fff;border:1px solid var(--linha);border-radius:12px}
.segredo{font-family:ui-monospace,monospace;font-size:13px;letter-spacing:.08em;background:var(--fundo);padding:10px;border-radius:8px;text-align:center;word-break:break-all;user-select:all}

.rodape-nota{font-size:11.5px;color:var(--suave);line-height:1.6;border-top:1px solid var(--linha);padding-top:12px;margin-top:12px}
.sinc{position:fixed;right:14px;bottom:14px;background:var(--navy);color:#fff;font-size:12px;font-weight:600;padding:8px 13px;border-radius:999px;z-index:50;opacity:0;transition:opacity .25s;pointer-events:none}
.sinc.visivel{opacity:1}
.sinc.erro{background:var(--vermelho)}

@media(max-width:860px){
  .lateral{display:none}
  .lateral.aberta{display:flex;position:fixed;top:46px;left:0;right:0;bottom:0;width:100%;height:auto;z-index:39}
  .topo-mobile{display:flex}
  main{padding:16px 14px 70px}
  h1.titulo{font-size:22px}
  .linha{padding:12px 13px}
}