/* ============================================================
   CONSULTOR ONLINE — SISTEMA
   Mesma identidade do site: marinho profundo + azul-névoa da
   marca + açafrão como cor de ação.
   ============================================================ */
:root{
  --ink:        #0E1A2F;
  --ink-2:      #16253F;
  --ink-3:      #1E3252;
  --mist:       #DFE4ED;
  --paper:      #F6F7FA;
  --white:      #FFFFFF;
  --saffron:    #F5A524;
  --saffron-dk: #C77F0E;
  --texto:      #55617A;
  --texto-fraco:#8A93A6;
  --linha:      #E3E7EF;
  --linha-esc:  rgba(223,228,237,.16);

  --ok:      #1F9D63;
  --ok-bg:   #E6F5ED;
  --alerta:  #C77F0E;
  --alerta-bg:#FDF3E2;
  --erro:    #C7392F;
  --erro-bg: #FCEDEC;
  --neutro:  #6B7689;
  --neutro-bg:#EFF1F6;

  --f-display:"Archivo","Segoe UI",system-ui,sans-serif;
  --f-body:"Public Sans","Segoe UI",system-ui,sans-serif;

  --sidebar: 250px;
  --r: 12px;
  --sombra: 0 18px 44px -24px rgba(14,26,47,.32);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--texto);
  font-family:var(--f-body);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);letter-spacing:-.02em;margin:0;line-height:1.2}
h1{font-size:1.6rem;font-weight:700}
h2{font-size:1.25rem;font-weight:700}
h3{font-size:1.02rem;font-weight:600}
p{margin:0 0 12px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pular{position:absolute;left:-9999px;background:var(--saffron);color:#2A1B00;padding:12px 20px;font-weight:700;z-index:999}
.pular:focus{left:12px;top:12px}

/* ============================================================
   ESTRUTURA
   ============================================================ */
.app{display:flex;min-height:100vh}

.lateral{
  width:var(--sidebar);flex:none;background:var(--ink);color:var(--mist);
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:60;
  transition:transform .25s ease;
}
.lateral__marca{display:flex;align-items:center;gap:11px;padding:22px 22px 18px;border-bottom:1px solid var(--linha-esc)}
.lateral__marca img{height:30px;width:auto}
.lateral__marca span{font-family:var(--f-display);font-weight:800;color:var(--white);font-size:.98rem;line-height:1.1}
.lateral__marca small{display:block;font-size:.6rem;letter-spacing:.2em;opacity:.55;font-weight:600;margin-top:3px}

.perfil-card{padding:20px 22px;border-bottom:1px solid var(--linha-esc);display:flex;align-items:center;gap:12px}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--saffron),#D98A12);color:#2A1B00;
  font-family:var(--f-display);font-weight:800;font-size:.92rem;
}
.perfil-card b{display:block;color:var(--white);font-size:.92rem;font-family:var(--f-display);font-weight:600}
.perfil-card small{font-size:.76rem;opacity:.6}

.menu{list-style:none;margin:0;padding:14px 12px;flex:1;overflow-y:auto}
.menu li{margin-bottom:2px}
.menu a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:8px;
  font-size:.92rem;color:var(--mist);opacity:.78;transition:background .18s ease,opacity .18s ease;
}
.menu a:hover{background:rgba(223,228,237,.08);opacity:1}
.menu .atual > a{background:rgba(245,165,36,.14);color:var(--white);opacity:1;font-weight:600}
.menu .atual > a .cunha{background:var(--saffron)}
.cunha{width:9px;height:12px;background:var(--mist);opacity:.7;clip-path:polygon(0 0,100% 50%,0 100%);flex:none}
.menu__divisor{margin:14px 14px;border:0;border-top:1px solid var(--linha-esc)}
.menu__grupo{
  padding:0 14px;margin:16px 0 8px;font-family:var(--f-display);
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;opacity:.45;font-weight:700;
}
.menu__sair a{color:#F0A9A3;opacity:.85}
.menu__sair a:hover{background:rgba(199,57,47,.16)}

.painel{flex:1;margin-left:var(--sidebar);display:flex;flex-direction:column;min-width:0}

.topo{
  background:var(--white);border-bottom:1px solid var(--linha);
  position:sticky;top:0;z-index:50;
}
.topo__linha{display:flex;align-items:center;gap:16px;padding:0 26px;height:64px}
.topo h1{font-size:1.12rem}
.topo__acoes{margin-left:auto;display:flex;align-items:center;gap:10px}
.abrir-menu{display:none;background:none;border:1px solid var(--linha);border-radius:8px;padding:9px 11px;cursor:pointer}
.abrir-menu span{display:block;width:18px;height:2px;background:var(--ink);margin:3.5px 0}

/* Sub-navegação por contexto (Produtos / Consultores / Clientes / ...) */
.contexto{display:flex;gap:4px;padding:0 26px;overflow-x:auto;border-top:1px solid var(--linha)}
.contexto a{
  padding:13px 16px;font-size:.9rem;font-weight:500;white-space:nowrap;
  border-bottom:2px solid transparent;color:var(--texto);transition:color .18s ease,border-color .18s ease;
}
.contexto a:hover{color:var(--ink)}
.contexto a.atual{color:var(--ink);border-bottom-color:var(--saffron);font-weight:600}

.conteudo{padding:26px;flex:1}
.conteudo > * + *{margin-top:20px}

/* ============================================================
   CARTÕES E TABELAS
   ============================================================ */
.cartao{background:var(--white);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden}
.cartao__topo{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 22px;border-bottom:1px solid var(--linha);
}
.cartao__topo h2{font-size:1.05rem}
.cartao__topo .direita{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.cartao__corpo{padding:22px}
.cartao__rodape{padding:14px 22px;border-top:1px solid var(--linha);background:var(--paper);font-size:.86rem}

.rotulo-produto{
  display:inline-block;margin-left:10px;padding:3px 10px;border-radius:999px;
  background:var(--neutro-bg);color:var(--neutro);font-size:.72rem;font-weight:600;
  font-family:var(--f-body);letter-spacing:0;
}

.tabela-rolagem{overflow-x:auto}
table.dados{width:100%;border-collapse:collapse;font-size:.91rem;min-width:560px}
table.dados th,table.dados td{padding:13px 22px;text-align:left;border-bottom:1px solid var(--linha)}
table.dados thead th{
  background:var(--paper);color:var(--ink);font-family:var(--f-display);
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
table.dados tbody tr:last-child td{border-bottom:0}
table.dados tbody tr:hover{background:#FAFBFD}
table.dados td.numero{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.dados td.acoes{white-space:nowrap;text-align:right}
table.dados a.link{color:var(--ink);font-weight:500;border-bottom:1px solid var(--linha)}
table.dados a.link:hover{border-color:var(--saffron)}

.vazio{padding:52px 22px;text-align:center;color:var(--texto-fraco)}
.vazio__cunha{width:34px;height:24px;background:var(--mist);margin:0 auto 16px;clip-path:polygon(0 0,100% 50%,0 100%)}
.vazio b{display:block;color:var(--ink);font-family:var(--f-display);font-size:1.02rem;margin-bottom:6px}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.grade{display:grid;gap:16px}
.grade.c2{grid-template-columns:repeat(2,1fr)}
.grade.c3{grid-template-columns:repeat(3,1fr)}
.grade.c4{grid-template-columns:repeat(4,1fr)}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label{font-size:.82rem;font-weight:600;color:var(--ink)}
.campo .dica{font-size:.78rem;color:var(--texto-fraco)}
.campo input,.campo select,.campo textarea{
  font-family:var(--f-body);font-size:.94rem;color:var(--ink);
  padding:11px 13px;border:1px solid var(--linha);border-radius:8px;background:var(--white);
  transition:border-color .16s ease,box-shadow .16s ease;width:100%;
}
.campo textarea{resize:vertical;min-height:120px;line-height:1.55}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--saffron);box-shadow:0 0 0 3px rgba(245,165,36,.18);
}
.campo input[aria-invalid="true"]{border-color:var(--erro)}
.campo .erro-campo{font-size:.8rem;color:var(--erro)}

.opcao{display:flex;align-items:flex-start;gap:9px;font-size:.9rem}
.opcao input{width:16px;height:16px;margin-top:3px;flex:none;accent-color:var(--saffron)}

.seletor-tipo{display:flex;gap:10px}
.seletor-tipo label{
  flex:1;display:flex;align-items:center;gap:9px;padding:13px 15px;cursor:pointer;
  border:1px solid var(--linha);border-radius:8px;font-size:.92rem;font-weight:500;
  transition:border-color .16s ease,background .16s ease;
}
.seletor-tipo label:hover{border-color:var(--mist);background:var(--paper)}
.seletor-tipo input{accent-color:var(--saffron)}
.seletor-tipo input:checked + span{color:var(--ink);font-weight:600}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-display);font-weight:600;font-size:.9rem;
  padding:11px 20px;border-radius:8px;border:1px solid transparent;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.btn:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
.btn--primario{background:var(--saffron);color:#2A1B00}
.btn--primario:hover{background:#FFB945;transform:translateY(-1px)}
.btn--escuro{background:var(--ink);color:var(--white)}
.btn--escuro:hover{background:var(--ink-3)}
.btn--claro{background:var(--white);color:var(--ink);border-color:var(--linha)}
.btn--claro:hover{border-color:var(--ink);background:var(--paper)}
.btn--perigo{background:var(--erro-bg);color:var(--erro);border-color:#F3C9C5}
.btn--perigo:hover{background:var(--erro);color:var(--white)}
.btn--bloco{width:100%}
.btn--peq{padding:7px 13px;font-size:.82rem}
.btn .seta{width:8px;height:11px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}

/* ============================================================
   ETIQUETAS DE STATUS
   ============================================================ */
.etiqueta{
  display:inline-block;padding:4px 11px;border-radius:999px;
  font-size:.75rem;font-weight:700;font-family:var(--f-display);letter-spacing:.02em;white-space:nowrap;
}
.etiqueta--ok{background:var(--ok-bg);color:var(--ok)}
.etiqueta--alerta{background:var(--alerta-bg);color:var(--alerta)}
.etiqueta--erro{background:var(--erro-bg);color:var(--erro)}
.etiqueta--neutro{background:var(--neutro-bg);color:var(--neutro)}

/* ============================================================
   AVISOS
   ============================================================ */
.aviso{
  display:flex;gap:12px;padding:14px 18px;border-radius:var(--r);
  font-size:.9rem;border:1px solid;align-items:flex-start;
}
.aviso b{display:block;font-family:var(--f-display);margin-bottom:2px}
.aviso--ok{background:var(--ok-bg);border-color:#BFE3D0;color:#14653F}
.aviso--erro{background:var(--erro-bg);border-color:#F3C9C5;color:#8F231B}
.aviso--info{background:var(--alerta-bg);border-color:#F2DFB6;color:#7A4E06}

/* ============================================================
   INDICADORES DO PAINEL
   ============================================================ */
.indicadores{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.indicador{background:var(--white);border:1px solid var(--linha);border-radius:var(--r);padding:20px 22px;position:relative;overflow:hidden}
.indicador::before{content:"";position:absolute;top:0;left:0;width:40px;height:4px;background:var(--mist);clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.indicador:hover::before{background:var(--saffron)}
.indicador small{display:block;font-family:var(--f-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-fraco);font-weight:700;margin-bottom:8px}
.indicador strong{font-family:var(--f-display);font-size:1.85rem;color:var(--ink);font-weight:800;letter-spacing:-.03em;line-height:1}
.indicador span{display:block;font-size:.82rem;margin-top:6px;color:var(--texto-fraco)}

/* Cartões de assinatura */
.assinaturas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.assinatura{background:var(--white);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.assinatura:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.assinatura__capa{height:132px;background:linear-gradient(140deg,var(--ink),var(--ink-3));display:grid;place-items:center}
.assinatura__capa img{height:44px;width:auto;opacity:.9}
.assinatura__corpo{padding:16px 18px}
.assinatura__corpo h3{margin-bottom:6px}
.assinatura__corpo small{color:var(--texto-fraco);font-size:.82rem}

/* ============================================================
   BIBLIOTECA (árvore de conteúdo)
   ============================================================ */
.arvore{list-style:none;margin:0;padding:0}
.arvore ul{list-style:none;margin:0;padding:0}
.arvore li > a{
  display:flex;align-items:center;gap:10px;padding:12px 22px;
  border-bottom:1px solid var(--linha);font-size:.92rem;transition:background .16s ease;
}
.arvore li > a:hover{background:var(--paper)}
.arvore .n1 > a{font-weight:600;color:var(--ink);background:#FBFCFE}
.arvore .n2 > a{padding-left:44px}
.arvore .n3 > a{padding-left:66px}
.arvore .n4 > a{padding-left:88px}
.arvore .n5 > a{padding-left:110px}
.arvore .tipo{
  font-size:.68rem;font-family:var(--f-display);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texto-fraco);margin-left:auto;
}

/* ============================================================
   TICKET (conversa)
   ============================================================ */
.conversa{display:flex;flex-direction:column;gap:16px;padding:22px}
.mensagem{display:flex;gap:14px;max-width:80%}
.mensagem__balao{background:var(--paper);border:1px solid var(--linha);border-radius:4px 12px 12px 12px;padding:14px 18px;font-size:.92rem}
.mensagem__balao p:last-child{margin-bottom:0}
.mensagem__meta{font-size:.76rem;color:var(--texto-fraco);margin-top:7px}
.mensagem--minha{align-self:flex-end;flex-direction:row-reverse}
.mensagem--minha .mensagem__balao{background:#FDF6E9;border-color:#F2DFB6;border-radius:12px 4px 12px 12px}
.mensagem--minha .mensagem__meta{text-align:right}
.mensagem--interna .mensagem__balao{background:var(--neutro-bg);border-style:dashed}

/* ============================================================
   PAGINAÇÃO
   ============================================================ */
.paginacao{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.paginacao a,.paginacao span{
  min-width:34px;height:34px;display:grid;place-items:center;padding:0 10px;
  border:1px solid var(--linha);border-radius:7px;font-size:.86rem;background:var(--white);
}
.paginacao a:hover{border-color:var(--ink)}
.paginacao .atual{background:var(--ink);color:var(--white);border-color:var(--ink);font-weight:600}
.paginacao .info{border:0;background:none;color:var(--texto-fraco);margin-left:auto}

/* ============================================================
   TELAS DE ACESSO (login, cadastro, senha)
   ============================================================ */
.acesso{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.acesso__lado{
  background:
    radial-gradient(700px 420px at 80% 10%, rgba(245,165,36,.16), transparent 62%),
    linear-gradient(155deg,var(--ink),var(--ink-3));
  color:var(--mist);padding:52px;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.acesso__marca{display:flex;align-items:center;gap:12px;position:relative}
.acesso__marca img{height:34px}
.acesso__marca span{font-family:var(--f-display);font-weight:800;color:var(--white);font-size:1.05rem}
.acesso__mensagem{position:relative;max-width:26ch}
.acesso__mensagem h2{color:var(--white);font-size:2rem;line-height:1.15}
.acesso__mensagem p{margin-top:16px;opacity:.75;font-size:1rem}
.acesso__selo{position:absolute;right:-8%;bottom:-6%;width:min(360px,60%);opacity:.06}
.acesso__rodape{position:relative;font-size:.82rem;opacity:.5}

.acesso__form{display:flex;align-items:center;justify-content:center;padding:52px 24px;background:var(--white)}
.acesso__caixa{width:100%;max-width:400px}
.acesso__caixa h1{font-size:1.6rem;margin-bottom:6px}
.acesso__caixa > p{color:var(--texto-fraco);margin-bottom:26px}
.acesso__caixa form > * + *{margin-top:16px}
.acesso__links{margin-top:22px;padding-top:20px;border-top:1px solid var(--linha);font-size:.88rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.acesso__links a{color:var(--saffron-dk);font-weight:600}
.acesso__links a:hover{color:var(--ink)}

.forca{height:4px;border-radius:99px;background:var(--linha);overflow:hidden}
.forca i{display:block;height:100%;width:0;background:var(--erro);transition:width .25s ease,background .25s ease}
.forca.media i{width:60%;background:var(--alerta)}
.forca.boa i{width:100%;background:var(--ok)}
.forca.fraca i{width:30%}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1100px){
  .indicadores{grid-template-columns:repeat(2,1fr)}
  .grade.c4{grid-template-columns:repeat(2,1fr)}
  .acesso{grid-template-columns:1fr}
  .acesso__lado{display:none}
}
@media (max-width:860px){
  .lateral{transform:translateX(-100%);box-shadow:var(--sombra)}
  .lateral.aberta{transform:none}
  .painel{margin-left:0}
  .abrir-menu{display:block}
  .grade.c2,.grade.c3{grid-template-columns:1fr}
  .conteudo{padding:18px}
  .topo__linha,.contexto{padding-inline:18px}
  .mensagem{max-width:100%}
}
@media (max-width:560px){
  .indicadores{grid-template-columns:1fr}
  .grade.c4{grid-template-columns:1fr}
  table.dados th,table.dados td{padding:11px 14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* Sombra que escurece o fundo com o menu aberto no celular */
.cortina{position:fixed;inset:0;background:rgba(14,26,47,.5);z-index:55;display:none}
.cortina.visivel{display:block}