/* ============================================================
   Header compartilhado das telas internas (início, calculadora,
   gerador de contratos). Renderizado por js/shared/app-header.js
   dentro de <header id="app-header" data-...>. Auto-contido: usa
   cores fixas porque cada página tem seu próprio conjunto de tokens.
   ============================================================ */
.appbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px 28px;background:#fff;border-bottom:1px solid #ECE7E0;
  box-shadow:0 2px 8px rgba(28,25,23,.05);
}
.appbar__brand{display:flex;align-items:center;gap:18px;min-width:0}
.appbar__brandcol{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.appbar__eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#E07020}

/* Co-branding (início, calculadora) */
.appbar__logos{display:flex;align-items:center;gap:16px}
.appbar__logo{height:38px;width:auto;display:block}
.appbar__divider{width:1px;height:28px;background:#DDD5CB;flex-shrink:0}

/* Logo dinâmica da empresa (gerador de contratos) — nomes mantidos
   para o nav.js (updateHeaderLogo) funcionar sem alteração. */
.hdr-logo{width:40px;height:40px;background:#E07020;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:17px;flex-shrink:0;overflow:hidden}
.hdr-logo img{height:100%;width:auto;object-fit:contain;display:block}
/* Quando é imagem, a caixa deixa de ser quadrada: altura fixa, largura
   automática — logos largas (ex.: Mercado Gesso) aparecem em tamanho legível. */
.hdr-logo--img{width:auto;height:44px;padding:4px 9px;background:#fff;border:1px solid #E5E7EB;border-radius:9px}

/* Bloco do módulo (título/subtítulo à direita das logos) */
.appbar__module{padding-left:18px;border-left:1px solid #ECE7E0;min-width:0}
.appbar__title{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:800;line-height:1.12;letter-spacing:-.01em;color:#1F2937}
.appbar__subtitle{margin-top:2px;font-size:13px;color:#57534E}

/* Ações à direita */
.appbar__actions{display:flex;align-items:center;gap:12px;flex-shrink:0}

/* Atendente (input editável na calculadora; texto nas demais) */
.appbar__att{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid #DDD5CB;border-radius:12px;background:#fff}
.appbar__att-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:#FFF4EC;color:#E07020;flex-shrink:0}
.appbar__att-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.appbar__att-l{font-size:10.5px;font-weight:600;color:#8A827B}
.appbar__att-n{font-size:14px;font-weight:600;color:#1F2937}
.appbar__att-input{border:none;padding:0;background:transparent;font-size:14px;font-weight:600;color:#1F2937;width:150px;font-family:inherit}
.appbar__att-input:focus{outline:none}
.appbar__att-input::placeholder{color:#9CA3AF;font-weight:500}

/* Botões (Início / Sair) */
.appbar__btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:12px;border:1px solid #DDD5CB;background:#fff;color:#57534E;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.appbar__btn:hover{background:#F4F2EF;border-color:#C9BFB2}
.appbar__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:760px){
  .appbar{padding:12px 16px;gap:12px}
  .appbar__eyebrow{display:none}
  .appbar__logo{height:30px}
  .appbar__module{display:none}
  .appbar__att-l{display:none}
  .appbar__btn span{display:none}
  .appbar__btn{padding:0 12px}
}