/* Licicore — tokens compartilhados entre a landing, o login e o painel.
   Um arquivo só: sem isso as três telas divergem na primeira alteração de cor. */
:root{
  --papel:#eef0f3;        /* frio, de papel de processo — não o creme quente de sempre */
  --carta:#fff;
  --tinta:#16202b;
  --tinta-fraca:#5d6b7a;
  --tinta-fantasma:#8c98a5;
  --risco:#d3d9e0;
  --caneta:#1c4fd8;       /* azul de caneta em documento oficial */
  --caneta-clara:#7fb0ff;
  --urgente:#b32218;      /* reservado a prazo curto: se tudo grita, nada grita */
  --urgente-fundo:#fdeceb;
  --raio:3px;             /* quase reto: formulário, não cartão de marketing */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:400 15px/1.5 "IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-variant-numeric:tabular-nums;
  padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0);
}
a{color:var(--caneta)}
:focus-visible{outline:2px solid var(--caneta);outline-offset:2px}

/* A marca: "lici" em peso normal, "core" em negrito — o núcleo é o que pesa.
   Sem cor diferente numa das metades, que é o tique de landing gerada. */
.marca{font-weight:400;letter-spacing:-.02em;text-decoration:none;color:inherit}
.marca b{font-weight:700}

.env{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---- menu lateral, igual nas três telas ----
   Fixo à esquerda no desktop; no celular vira uma barra no rodapé, onde o
   polegar alcança. Não é gaveta com hambúrguer: são três destinos, e esconder
   três links atrás de um clique não economiza nada. */
.lado{position:fixed;inset:0 auto 0 0;width:214px;background:var(--tinta);color:#fff;
  display:flex;flex-direction:column;z-index:20;padding-top:env(safe-area-inset-top,0)}
.lado .topo{padding:22px 20px 18px}
.lado .marca{color:#fff;font-size:19px}
.lado nav{display:flex;flex-direction:column;gap:2px;padding:0 10px;flex:1}
.lado nav a{color:#9fb0c2;text-decoration:none;font-size:14.5px;font-weight:500;
  padding:10px 12px;border-radius:var(--raio);display:flex;align-items:center;
  justify-content:space-between;gap:8px}
.lado nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
/* A tela atual fica sólida, não só mais clara: em barra escura, contraste
   sutil não se lê no celular ao sol. */
.lado nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.13);font-weight:600}
.lado .sino{font-size:12px;background:var(--caneta);color:#fff;border-radius:999px;
  padding:1px 7px;font-weight:600;min-width:20px;text-align:center}
.lado .sino:empty,.lado .sino[data-n="0"]{display:none}
.lado .pe{padding:14px 20px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:6px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.lado .pe a{color:#7a8899;font-size:12.5px;text-decoration:none}
.lado .pe a:hover{color:#fff;text-decoration:underline}

/* O conteúdo abre espaço para o menu. Margem, não padding: o padding lateral
   de .env continua valendo dentro. */
.corpo{margin-left:214px;min-height:100vh}

@media (max-width:820px){
  /* Barra inferior: o menu sai da lateral e vai para o polegar. */
  .lado{inset:auto 0 0 0;width:auto;flex-direction:row;align-items:center;
    border-top:1px solid rgba(255,255,255,.12);padding-top:0}
  .lado .topo,.lado .pe{display:none}
  .lado nav{flex-direction:row;padding:0;width:100%}
  .lado nav a{flex:1;justify-content:center;border-radius:0;padding:13px 6px;
    font-size:13.5px;padding-bottom:calc(13px + env(safe-area-inset-bottom,0px))}
  .corpo{margin-left:0;padding-bottom:64px}
}

.botao{
  display:inline-block;font:inherit;font-weight:600;font-size:15px;
  background:var(--caneta);color:#fff;border:1px solid var(--caneta);
  border-radius:var(--raio);padding:11px 22px;cursor:pointer;text-decoration:none;
}
.botao:hover{background:#1642b8;border-color:#1642b8}
.botao.fantasma{background:transparent;color:var(--tinta);border-color:var(--risco)}
.botao.fantasma:hover{background:var(--carta);border-color:var(--tinta-fraca)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
