/* Shell do Vet (Claude Design): menu lateral verde-mata profundo no web (≥ 1200 px), barra
 * escura com menu recolhível na faixa intermediária e navegação inferior clara de 72 px no
 * celular (< 768 px). O verde profundo é a assinatura da marca; gema só para identidade. */
#app:has(>.vet-app-header){display:grid;grid-template-columns:var(--vet-sidebar-width) minmax(0,1fr);align-items:start;min-height:100vh}
.vet-app-header{
 position:sticky;top:0;z-index:var(--vet-z-menu);display:flex;flex-direction:column;gap:var(--vet-space-8);
 height:100vh;height:100dvh;overflow-y:auto;padding:var(--vet-space-6) var(--vet-space-4) var(--vet-space-4);
 background:var(--vet-color-nav-bg);color:var(--vet-color-nav-text);border:0;
}
.vet-app-header .vet-app-header-brand{min-width:0;padding:0 var(--vet-space-2);white-space:nowrap}
.vet-app-header .brand{color:#fff;font-size:22px;line-height:24px}
.vet-app-header .brand span{color:var(--vet-color-accent)}
.vet-app-header .vet-app-header-menu{display:none}
.vet-app-header .vet-app-header-nav{display:flex;flex-direction:column;gap:var(--vet-space-1);min-width:0}
.vet-app-header .vet-app-header-destination{
 display:flex;align-items:center;justify-content:flex-start;gap:var(--vet-space-3);width:100%;min-height:44px;padding:0 var(--vet-space-4);
 border:0;border-radius:var(--vet-radius-pill);background:transparent;color:var(--vet-color-nav-text);
 font-size:15px;font-weight:var(--vet-weight-medium);text-align:left;white-space:nowrap;
}
.vet-app-header .vet-app-header-destination:not(:disabled):hover{background:rgb(255 255 255 / 6%);color:#fff}
.vet-app-header .vet-app-header-destination[aria-current=page]{background:var(--vet-color-nav-active-bg);color:var(--vet-color-nav-active-text);font-weight:var(--vet-weight-semibold)}
.vet-app-header .vet-app-header-icon{display:block;flex:0 0 var(--vet-icon-size);width:var(--vet-icon-size);height:var(--vet-icon-size);background-color:currentColor;mask:var(--vet-nav-icon) center/contain no-repeat;-webkit-mask:var(--vet-nav-icon) center/contain no-repeat}
.vet-app-header .nav-today{--vet-nav-icon:url('/icons/nav-today.svg')}
.vet-app-header .nav-agenda{--vet-nav-icon:url('/icons/nav-agenda.svg')}
.vet-app-header .nav-farms{--vet-nav-icon:url('/icons/nav-farms.svg')}
.vet-app-header .nav-protocols{--vet-nav-icon:url('/icons/nav-protocols.svg')}
.vet-app-header .nav-finance{--vet-nav-icon:url('/icons/nav-finance.svg')}
.vet-app-header .vet-app-header-account{
 display:flex;align-items:center;justify-content:flex-start;gap:var(--vet-space-3);width:100%;min-width:0;min-height:56px;margin-top:auto;
 padding:var(--vet-space-3) var(--vet-space-2) 0;border:0;border-top:var(--vet-border-width) solid rgb(255 255 255 / 10%);border-radius:0;
 background:transparent;color:#fff;text-align:left;font-weight:var(--vet-weight-medium);
}
.vet-app-header .vet-app-header-account:not(:disabled):hover{background:rgb(255 255 255 / 6%)}
.vet-app-header .vet-app-header-avatar{display:flex;flex:0 0 40px;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--vet-radius-pill);background:var(--vet-color-accent);color:var(--vet-color-on-accent);font-size:14px;font-weight:var(--vet-weight-bold)}
.vet-app-header .vet-app-header-identity{display:flex;flex:1;flex-direction:column;min-width:0;line-height:1.4}
.vet-app-header .vet-app-header-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:var(--vet-weight-semibold);color:#fff}
.vet-app-header .vet-app-header-treatment{display:block;color:var(--vet-color-nav-text);font-size:var(--vet-font-caption);font-weight:var(--vet-weight-medium)}
.vet-app-header .vet-app-header-chevron{display:none}
/* Botão central de atendimento e atalho do Financeiro existem só no celular. */
.vet-app-header .vet-app-header-register,.vet-app-header .vet-app-header-finance{display:none}
/* Sobre o verde profundo o anel de foco é claro para manter 3:1. */
.vet-app-header button:focus-visible{position:relative;z-index:1;outline:var(--vet-focus-width) solid var(--vet-color-accent);outline-offset:var(--vet-focus-offset)}

/* Sem :has (navegadores antigos): o cabeçalho volta a ser uma barra superior escura no web. */
@supports not selector(:has(*)){@media(min-width:1200px){
 .vet-app-header{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--vet-space-4);padding:var(--vet-space-3) var(--vet-space-8)}
 .vet-app-header .vet-app-header-nav{flex-direction:row;flex-wrap:wrap}
 .vet-app-header .vet-app-header-destination{width:auto}
 .vet-app-header .vet-app-header-account{width:auto;margin:0 0 0 auto;border-top:0;padding:0}
}}

/* Foco e âncoras nunca ficam sob a topbar fixa (web) nem sob a navegação inferior (celular). */
html:has(.vet-app-header){scroll-padding-top:calc(var(--vet-topbar-height) + var(--vet-space-4))}

/* Barra superior do conteúdo: estado de envio sempre visível perto do título. */
.vet-topbar{
 position:sticky;top:0;z-index:var(--vet-z-sticky);display:flex;align-items:center;justify-content:flex-end;gap:var(--vet-space-3);
 min-height:var(--vet-topbar-height);margin:calc(-1 * var(--vet-space-6)) calc(-1 * var(--vet-space-8)) var(--vet-space-6);padding:0 var(--vet-space-8);
 background:var(--vet-color-bg);border-bottom:var(--vet-border-width) solid var(--vet-color-border);
}
.vet-topbar>#sync-status{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--vet-space-1) var(--vet-space-3);margin:0;min-width:0;font-size:var(--vet-font-small);font-weight:var(--vet-weight-medium);color:var(--vet-color-text-secondary)}
.vet-topbar>#sync-status>span{display:inline-flex;align-items:center;gap:var(--vet-space-2);overflow-wrap:anywhere}
.vet-topbar>#sync-status>span::before{content:'';flex:0 0 16px;width:16px;height:16px;background-color:currentColor;mask:url('/icons/refresh-cw.svg') center/contain no-repeat;-webkit-mask:url('/icons/refresh-cw.svg') center/contain no-repeat}
/* Sem sinal ou revisão pendente: aviso gema que tranquiliza, não alarma (SyncBanner). */
.vet-topbar>#sync-status:is([data-connected=false],[data-review=true])>span{color:var(--vet-color-text);font-weight:var(--vet-weight-semibold)}
.vet-topbar>#sync-status:is([data-connected=false],[data-review=true])>span::before{background-color:var(--vet-color-accent-strong)}
.vet-topbar:has(>#sync-status:is([data-connected=false],[data-review=true])){background:var(--vet-color-warning-bg);border-bottom-color:var(--vet-color-accent-soft)}
.vet-topbar>#sync-status>button{min-height:32px;padding:4px var(--vet-space-1)}

/* Faixa intermediária: barra escura com marca, menu e perfil; o menu abre como painel escuro. */
@media(max-width:1199px){
 #app:has(>.vet-app-header){display:block}
 .vet-app-header{
  position:sticky;top:0;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--vet-space-3);height:auto;overflow:visible;
  min-height:64px;padding:10px max(var(--vet-space-6),env(safe-area-inset-right)) 10px max(var(--vet-space-6),env(safe-area-inset-left));padding-block-start:max(10px,env(safe-area-inset-top));
 }
 .vet-app-header .vet-app-header-brand{padding:0;margin-right:auto}
 .vet-app-header .brand{font-size:20px}
 .vet-app-header .vet-app-header-menu{display:inline-flex;gap:var(--vet-space-2);min-height:44px;padding:6px var(--vet-space-4);border-color:rgb(255 255 255 / 28%);border-radius:var(--vet-radius-pill);background:transparent;color:#fff}
 .vet-app-header .vet-app-header-menu:not(:disabled):hover{background:rgb(255 255 255 / 8%)}
 .vet-app-header .vet-app-header-menu-icon{display:block;width:18px;height:12px;border-block:2px solid currentColor;position:relative}
 .vet-app-header .vet-app-header-menu-icon::after{content:'';position:absolute;inset:3px 0 auto;border-top:2px solid currentColor}
 .vet-app-header .vet-app-header-nav{
  position:absolute;top:100%;left:0;z-index:var(--vet-z-menu);width:min(320px,100%);padding:var(--vet-space-3);
  background:var(--vet-color-nav-bg);border:0;border-radius:0 0 var(--vet-radius-panel) 0;box-shadow:var(--vet-shadow-overlay);
 }
 .vet-app-header[data-menu=closed] .vet-app-header-nav{display:none}
 .vet-app-header .vet-app-header-account{flex:0 0 44px;width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:var(--vet-radius-pill);justify-content:center}
 .vet-app-header .vet-app-header-identity{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
 .vet-topbar{position:static;margin:calc(-1 * var(--vet-space-6)) calc(-1 * var(--vet-space-6)) var(--vet-space-5);padding:var(--vet-space-2) var(--vet-space-6);min-height:44px}
}

/* Celular: barra de topo clara (casca de ovo) e cinco destinos embaixo, 72 px mais área segura;
 * ativo com ícone em pílula verde-clara e rótulo verde (BottomNav). */
@media(max-width:767px){
 .vet-app-header{min-height:60px;padding-inline:max(var(--vet-space-4),env(safe-area-inset-left)) max(var(--vet-space-4),env(safe-area-inset-right));background:var(--vet-color-bg);color:var(--vet-color-text);border-bottom:var(--vet-border-width) solid var(--vet-color-border)}
 .vet-app-header .brand{color:var(--vet-color-text)}
 .vet-app-header .brand span{color:var(--vet-color-brand)}
 .vet-app-header .vet-app-header-menu{display:none}
 .vet-app-header button:focus-visible{outline-color:var(--vet-color-focus)}
 .vet-app-header .vet-app-header-account:not(:disabled):hover{background:var(--vet-color-surface-subtle)}
 /* Quatro destinos em volta da vaga central do "Registrar atendimento"; Financeiro vai ao topo. */
 .vet-app-header[data-menu] .vet-app-header-nav{
  position:fixed;inset:auto 0 0;top:auto;z-index:var(--vet-z-menu);display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) 72px repeat(2,minmax(0,1fr));align-items:end;gap:0;width:auto;
  height:calc(var(--vet-bottom-nav-height) + env(safe-area-inset-bottom));padding:0 max(var(--vet-space-2),env(safe-area-inset-right)) calc(var(--vet-space-2) + env(safe-area-inset-bottom)) max(var(--vet-space-2),env(safe-area-inset-left));
  border:0;border-top:var(--vet-border-width) solid var(--vet-color-border);border-radius:0;box-shadow:none;background:var(--vet-color-surface);
 }
 .vet-app-header .vet-app-header-destination{flex-direction:column;justify-content:flex-end;gap:2px;min-width:0;min-height:60px;padding:0;border-radius:var(--vet-radius-control);background:transparent;color:var(--vet-color-text-secondary);font-size:11px;font-weight:var(--vet-weight-semibold);line-height:14px}
 .vet-app-header .vet-app-header-destination:not(:disabled):hover{background:transparent;color:var(--vet-color-text)}
 /* Ativo não depende só da cor: rótulo em negrito, ícone verde e pílula. */
 .vet-app-header .vet-app-header-destination[aria-current=page]{background:transparent;color:var(--vet-color-brand);font-weight:var(--vet-weight-bold)}
 /* Pílula de 56×30 px atrás do ícone do destino ativo (o ícone é desenhado por máscara). */
 .vet-app-header .vet-app-header-destination{position:relative}
 .vet-app-header .vet-app-header-destination>*{position:relative}
 .vet-app-header .vet-app-header-icon{margin-block:5px}
 .vet-app-header .vet-app-header-destination[aria-current=page]::before{content:'';position:absolute;bottom:16px;left:50%;width:56px;height:30px;margin-left:-28px;border-radius:var(--vet-radius-pill);background:var(--vet-color-brand-soft)}
 .vet-app-header .vet-app-header-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .vet-app-header .vet-app-header-destination[data-destination=finance]{display:none}
 .vet-app-header .vet-app-header-destination[data-destination=farms]{grid-column:4}
 .vet-app-header .vet-app-header-destination[data-destination=protocols]{grid-column:5}
 /* Registrar atendimento: 56 px, verde, recortado da barra por uma borda da cor do fundo. */
 .vet-app-header .vet-app-header-register{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 32px);z-index:calc(var(--vet-z-menu) + 1);display:grid;place-items:center;
  width:56px;height:56px;min-height:56px;margin-left:-28px;padding:0;border:4px solid var(--vet-color-bg);border-radius:18px;
  background:var(--vet-color-brand);color:var(--vet-color-on-brand);box-shadow:var(--vet-shadow-overlay);
 }
 .vet-app-header .vet-app-header-register:not(:disabled):hover,.vet-app-header .vet-app-header-register:not(:disabled):active{background:var(--vet-color-brand-hover)}
 .vet-app-header .vet-app-header-register-icon{display:block;width:24px;height:24px;background-color:currentColor;mask:url('/icons/plus.svg') center/contain no-repeat;-webkit-mask:url('/icons/plus.svg') center/contain no-repeat}
 /* Financeiro no topo, ao lado do avatar, com o mesmo estado ativo dos destinos. */
 .vet-app-header .vet-app-header-finance{
  display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 var(--vet-space-3);
  border:var(--vet-border-width) solid var(--vet-color-control-border-soft);border-radius:var(--vet-radius-pill);
  background:var(--vet-color-surface);color:var(--vet-color-text);font-size:var(--vet-font-small);font-weight:var(--vet-weight-semibold);
 }
 .vet-app-header .vet-app-header-finance .vet-app-header-icon{width:18px;height:18px;flex-basis:18px;margin:0}
 .vet-app-header .vet-app-header-finance[aria-current=page]{background:var(--vet-color-brand-soft);border-color:var(--vet-color-brand-soft);color:var(--vet-color-brand);font-weight:var(--vet-weight-bold)}
 .vet-app-header+main{padding-bottom:calc(var(--vet-bottom-nav-height) + env(safe-area-inset-bottom) + var(--vet-space-4))}
 html:has(.vet-app-header){scroll-padding-top:calc(60px + var(--vet-space-4));scroll-padding-bottom:calc(var(--vet-bottom-nav-height) + env(safe-area-inset-bottom) + var(--vet-space-4))}
 .vet-topbar{margin:calc(-1 * var(--vet-space-4)) calc(-1 * var(--vet-space-4)) var(--vet-space-4);padding:6px var(--vet-space-4);justify-content:flex-start}
 .vet-topbar>#sync-status{justify-content:flex-start;font-size:var(--vet-font-small)}
}
/* Celulares estreitos: o atalho do Financeiro fica só com o ícone (nome acessível mantido). */
@media(max-width:379px){
 .vet-app-header .vet-app-header-finance{justify-content:center;width:44px;padding:0}
 .vet-app-header .vet-app-header-finance .vet-app-header-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}