/* ============================================================================
   Marca Harmoni System por cima do visual original.
   Tudo que é da marca fica neste arquivo (carregado depois do app.css), pra
   ficar fácil trazer atualizações do sistema original sem perder o visual.
   Cores e fontes: Kit de Branding Harmoni Scale (tema claro + menu azul-marinho).
   ============================================================================ */
:root{
  --navy:#030A15; --navy2:#071326; --navy3:#0B1D35;
  --marfim:#F3EEE3; --marfim-m:#A3AEBF; --ouro:#D4B062; --linha-ouro:rgba(212,176,98,.18);
  --fundo:#F4F0E8; --branco:#FDFBF7; --fio:#E4DCCD; --fio2:#D3C8B4;
  --tinta:#030A15; --cinza:#4A5466; --cinza2:#9AA3B2; --cinza-s:#ECE6DA;
  --coral:#7A5A16; --coral2:#5E4510; --coral-s:#F1E6CC;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --raio:4px; --sombra:0 16px 48px rgba(3,10,21,.18);
}

/* ---------- o logo (símbolo + HARMONI / SYSTEM) ---------- */
.hs-logo{display:flex;align-items:center;gap:12px;line-height:1}
.hs-logo img{display:block;height:34px;width:auto;flex:none}
.hs-nome{display:grid;justify-items:center;gap:5px}
.hs-nome b{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:.2em;margin-right:-.2em;color:var(--marfim);line-height:1}
.hs-nome small{font-family:var(--sans);font-weight:400;font-size:7px;letter-spacing:.62em;margin-right:-.62em;color:var(--ouro);line-height:1}
.hs-logo.v{flex-direction:column;gap:16px}
.hs-logo.v img{height:64px}
.hs-logo.v .hs-nome{gap:8px}
.hs-logo.v .hs-nome b{font-size:30px}
.hs-logo.v .hs-nome small{font-size:9.5px}
.hs-logo.claro .hs-nome b{color:var(--navy)}
.hs-logo.claro .hs-nome small{color:#7A5A16}

/* ---------- menu lateral em azul-marinho ---------- */
#lado{background:var(--navy);border-color:var(--linha-ouro);color:var(--marfim)}
.marca{padding:4px 12px 22px;display:grid;gap:14px;justify-items:start}
.marca>span{color:var(--marfim-m);font-size:13px;padding-top:12px;border-top:1px solid var(--linha-ouro);width:100%}
#lado a{color:#C9CFD9;border-radius:2px}
#lado a:hover{background:rgba(243,238,227,.06);color:var(--marfim)}
#lado a.on{background:rgba(212,176,98,.14);color:var(--ouro)}
#lado a em{background:var(--ouro);color:var(--navy)}
#lado .pe{border-color:var(--linha-ouro)}
.eu{color:var(--marfim)}
.eu .quem small{color:var(--marfim-m)}
#lado .av{background:var(--navy3);color:var(--ouro)}
#lado .ib{color:var(--marfim-m)}
#lado .ib:hover{background:rgba(243,238,227,.08);color:var(--marfim)}
#lado [data-estado="salvo"]{color:#7FD3A2 !important}
#lado [data-estado="pendente"]{color:#FF9B93 !important}

/* ---------- títulos na fonte da marca ---------- */
.topo h1,.painel h2,.fcab h1,.jan>header h3{font-weight:600;letter-spacing:0}

/* ---------- botões, campos e cartões com cantos retos ---------- */
.bt,.busca,.seg,.cp input,.cp select,.cp textarea,.cx,.escreve input,.dia input[type=time],
.lead,.nota,.alerta,.linkbox,.simnao,.assina,.compara,.foto,.demo,.col,.cartao{border-radius:4px}
.seg button,.ib,.chip,.ev,.barra,.barra i,.fun div{border-radius:2px}
.bt.pri{background:var(--navy);border-color:var(--navy);color:var(--marfim)}
.bt.pri:hover{background:var(--navy3);border-color:var(--navy3)}
.jan,#entrar form,#aviso{border-radius:4px}
#janela{background:rgba(3,10,21,.5)}
.av{background:#E9DFC9;color:#5E4510}

/* tons de texto que eram marrons passam pro cinza-azulado da marca */
.chip,.painel .fone,.ev span,.nota,.leg,.cp>span,.rot,.ev.bloq{color:#4A5466}

/* ---------- abertura e tela de entrar ---------- */
#abrindo{background:radial-gradient(120% 90% at 50% 0%,var(--navy3) 0%,var(--navy) 60%);gap:22px}
#abrindo>span{color:var(--marfim-m)}
#entrar{background:radial-gradient(120% 90% at 50% 0%,var(--navy3) 0%,var(--navy) 60%)}
#entrar form{background:var(--fundo);border-color:var(--linha-ouro);padding:36px 28px 22px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
#entrar .logo{font-size:inherit;justify-self:center;margin-bottom:6px}
#entrar p{text-align:center;margin-top:-4px;margin-bottom:6px}
#entrar .cp input{background:var(--branco)}
#entrar .senha button{border-radius:2px}
#abrindo .hs-nome b{font-family:var(--serif);font-weight:600;font-size:30px;letter-spacing:.2em;margin-right:-.2em}

/* celular e tablet em pé: o menu vira barra embaixo e o logo some (como no original) */
@media(max-width:860px){
  .marca{display:none}
}