/* ============================================================================
   LINHA · casca
   Regulação: menu lateral estreito (64 px) com um ícone por FAMÍLIA. No hover
   ele abre para 264 px EMPURRANDO os painéis (nunca por cima) e mostra a
   unidade, as famílias como títulos e os painéis. Busca (Ctrl+K) no topo,
   conta no rodapé.
   Unidades (UBS, UPA...) usam o mesmo menu dentro da grade da intranet.
   ============================================================================ */

:root{ --l-trilho:64px; --l-trilho-aberto:264px }

/* ================================================================ menu lateral da Regulação */
.intranet-reg-rail, #reg-rail-fixed{ z-index:45; overflow:visible }
#reg-rail-fixed{ position:fixed; left:0; top:0; bottom:0; width:var(--l-trilho) }
body.reg-shell-on .view-section.active:not(#view-intranet){ padding-left:var(--l-trilho); transition:padding-left var(--l-medio) var(--l-curva) }
/* menu aberto: o espaço dele sai dos painéis (mesma espera e mesma curva do menu) */
#reg-rail-fixed:has(.l-nav:hover, .l-nav:focus-within){ width:var(--l-trilho-aberto) }
body.reg-shell-on:has(#reg-rail-fixed .l-nav:hover, #reg-rail-fixed .l-nav:focus-within) .view-section.active:not(#view-intranet){
  padding-left:var(--l-trilho-aberto); transition-delay:90ms;
}

.l-nav{
  position:relative; display:flex; flex-direction:column; gap:2px;
  width:var(--l-trilho); height:100dvh; padding:var(--l-e3) 10px;
  background:var(--l-sup); border-right:1px solid var(--l-borda);
  overflow:hidden;
  transition:width var(--l-medio) var(--l-curva);
}
/* abre no hover, com um instante de espera para não abrir de passagem */
.l-nav:hover, .l-nav:focus-within{ width:var(--l-trilho-aberto); transition-delay:90ms }

/* texto some no fechado, aparece no aberto */
.l-nav-txt{ opacity:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity var(--l-rapido) }
.l-nav:hover .l-nav-txt, .l-nav:focus-within .l-nav-txt{ opacity:1; transition-delay:120ms }

/* topo: brasão + unidade */
.l-nav-topo{
  display:flex; align-items:center; gap:12px; height:48px; padding:0 4px; margin-bottom:var(--l-e3); flex:none;
  border:0; background:none; border-radius:var(--l-raio-2); text-align:left; color:var(--l-texto);
}
.l-nav-topo img{ width:36px; height:36px; object-fit:contain; flex:none }
.l-nav-topo .l-nav-txt{ display:flex; flex-direction:column; line-height:1.25 }
.l-nav-topo b{ font-size:var(--l-t-med); font-weight:600 }
.l-nav-topo small{ font-size:var(--l-t-mini); color:var(--l-texto-3) }

/* linha (Buscar, Início e cada painel) */
.l-nav-linha{
  position:relative; display:flex; align-items:center; gap:12px; flex:none;
  width:100%; height:36px; padding:0 10px;
  border:0; border-radius:var(--l-raio-2); background:none;
  color:var(--l-texto-2); font-size:var(--l-t-corpo); font-weight:500; text-align:left;
  transition:background var(--l-rapido), color var(--l-rapido);
}
.l-nav-linha svg{ width:18px; height:18px; flex:none }
.l-nav-linha:hover, .l-nav-linha:focus-visible{ background:var(--l-sup-3); color:var(--l-texto) }
.l-nav-linha.is-active{ background:var(--l-marca-suave); color:var(--l-marca-tinta) }
.l-nav-busca{ border:1px solid var(--l-borda); color:var(--l-texto-3); margin-bottom:var(--l-e3) }
.l-nav-busca kbd{ margin-left:auto }

.l-nav-rolagem{ flex:1; min-height:0; display:flex; flex-direction:column; gap:2px; overflow-y:auto; overflow-x:hidden; scrollbar-width:none }
.l-nav-rolagem::-webkit-scrollbar{ display:none }

/* família: fechada é um ícone; aberta é título + painéis */
.l-nav-sec{ display:flex; flex-direction:column; gap:2px }
.l-nav-sec-cab{
  position:relative; display:flex; align-items:center; gap:12px; flex:none; height:36px; padding:0 10px;
  border-radius:var(--l-raio-2); color:var(--l-texto-3);
}
.l-nav-sec-cab svg{ width:18px; height:18px; flex:none }
.l-nav-sec.is-active > .l-nav-sec-cab{ background:var(--l-marca); color:var(--l-sobre-marca) }
.l-nav-sec-itens{ display:none; flex-direction:column; gap:2px }

.l-nav:hover .l-nav-sec, .l-nav:focus-within .l-nav-sec{ margin-top:var(--l-e3) }
.l-nav:hover .l-nav-sec-cab, .l-nav:focus-within .l-nav-sec-cab{ height:24px; background:none; color:var(--l-texto-3) }
.l-nav:hover .l-nav-sec-cab svg, .l-nav:focus-within .l-nav-sec-cab svg{ display:none }
.l-nav:hover .l-nav-sec-cab .l-nav-txt, .l-nav:focus-within .l-nav-sec-cab .l-nav-txt{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase }
.l-nav:hover .l-nav-sec-itens, .l-nav:focus-within .l-nav-sec-itens{ display:flex }

/* conta no rodapé */
.l-nav-pe{ flex:none; padding-top:var(--l-e2); margin-top:var(--l-e2); border-top:1px solid var(--l-fio) }
.l-conta-lateral{ width:100% }
.l-conta-lateral .l-conta-btn{
  display:flex; align-items:center; justify-content:flex-start; gap:12px; width:100%; height:40px; padding:0 2px;
  border-radius:var(--l-raio-2); background:none; box-shadow:none !important;
}
.l-conta-lateral .l-conta-btn:hover, .l-conta-lateral[open] .l-conta-btn{ background:var(--l-sup-3) }
.l-conta-lateral .l-conta-ini{ display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%; background:var(--l-marca-suave); color:var(--l-marca-tinta) }
.l-conta-nome{ font-size:var(--l-t-corpo); font-weight:500; color:var(--l-texto) }
.l-conta-lateral .l-conta-menu{ left:0; right:auto; top:auto; bottom:calc(100% + 6px); width:100% }
.l-conta-lateral .l-conta-quem{ display:none }

kbd{
  display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:5px;
  border:1px solid var(--l-borda); background:var(--l-sup-2); color:var(--l-texto-3);
  font-family:var(--l-fonte); font-size:11px; font-weight:500;
}

/* ================================================================ paleta Ctrl+K */
.l-paleta{ position:fixed; inset:0; z-index:1400; display:flex; justify-content:center; align-items:flex-start; padding:12vh var(--l-e4) 0; background:var(--l-veu); animation:l-veu var(--l-medio) var(--l-curva) }
.l-paleta.hidden{ display:none !important }
.l-paleta-caixa{
  width:min(640px,100%); display:flex; flex-direction:column; max-height:70vh;
  background:var(--l-sup); border:1px solid var(--l-borda); border-radius:var(--l-raio-4); box-shadow:var(--l-sombra-modal); overflow:hidden;
  animation:l-modal var(--l-medio) var(--l-curva);
}
.l-paleta-campo, .l-paleta-campo:focus{
  height:56px !important; padding:0 var(--l-e5) !important; border:0 !important; border-bottom:1px solid var(--l-fio) !important;
  border-radius:0 !important; box-shadow:none !important; font-size:17px !important;
}
.l-paleta-lista{ overflow-y:auto; padding:var(--l-e2) }
.l-paleta-item{
  display:flex; align-items:center; justify-content:space-between; gap:var(--l-e4); width:100%; padding:10px 12px;
  border:0; border-radius:var(--l-raio-2); background:none; text-align:left; color:var(--l-texto);
}
.l-paleta-item.is-sel{ background:var(--l-marca-suave) }
.l-paleta-tit{ display:flex; flex-direction:column; gap:1px; min-width:0; font-size:var(--l-t-corpo); font-weight:500 }
.l-paleta-tit small{ font-size:var(--l-t-mini); font-weight:400; color:var(--l-texto-3) }
.l-paleta-tipo{ flex:none; font-size:var(--l-t-mini); color:var(--l-texto-3) }
.l-paleta-vazio{ padding:var(--l-e8); text-align:center; color:var(--l-texto-3) }
.l-paleta-dica{ display:flex; gap:var(--l-e5); padding:10px var(--l-e5); border-top:1px solid var(--l-fio); background:var(--l-sup-2); font-size:var(--l-t-mini); color:var(--l-texto-3) }
.l-paleta-dica span{ display:flex; align-items:center; gap:4px }

/* ================================================================ intranet: grade */
#view-intranet .in-page, #view-ubs-intranet{ min-height:100dvh }
:is(#view-intranet, #view-ubs-intranet) .intranet-grid{
  display:grid; grid-template-columns:var(--l-trilho) minmax(0,1fr); grid-template-rows:auto 1fr; min-height:100dvh;
  transition:grid-template-columns var(--l-medio) var(--l-curva);
}
/* menu aberto no hover: a coluna cresce junto e empurra o conteúdo */
:is(#view-intranet, #view-ubs-intranet) .intranet-grid:has(> .intranet-sidebar .l-nav:is(:hover, :focus-within)){
  grid-template-columns:var(--l-trilho-aberto) minmax(0,1fr); transition-delay:90ms;
}
#view-intranet .intranet-grid > .intranet-sidebar{ grid-column:1; grid-row:1 / span 2 }
#view-intranet .intranet-grid > .in-topbar{ grid-column:2; grid-row:1 }
#view-intranet .intranet-grid > .intranet-main{ grid-column:2; grid-row:2 }
.intranet-menu-handle{ display:none !important }

/* Regulação: trilho de famílias à esquerda, conteúdo ao lado, sem topo */
#view-intranet.intranet-reg-mode .intranet-grid{ grid-template-columns:var(--l-trilho) minmax(0,1fr); grid-template-rows:1fr }
#view-intranet.intranet-reg-mode .intranet-grid:has(.l-nav:hover, .l-nav:focus-within){ grid-template-columns:var(--l-trilho-aberto) minmax(0,1fr); transition-delay:90ms }
#view-intranet.intranet-reg-mode .intranet-sidebar,
#view-intranet.intranet-reg-mode .in-topbar{ display:none }
#view-intranet.intranet-reg-mode .intranet-grid > .intranet-reg-rail{ grid-column:1; grid-row:1; position:sticky; top:0; height:100dvh }
#view-intranet.intranet-reg-mode .intranet-grid > .intranet-main{ grid-column:2; grid-row:1 }

#view-ubs-intranet .intranet-grid > .intranet-sidebar{ grid-column:1; grid-row:1 / span 2 }
#view-ubs-intranet .intranet-grid > .ubs-right{ grid-column:2; grid-row:1 / span 2; min-width:0; display:flex; flex-direction:column }

.intranet-sidebar{ position:sticky; top:0; height:100dvh; min-width:0; z-index:20 }
.intranet-sidebar-section, #intranet-menu-list, #ubs-menu-list{ height:100% }
.intranet-sidebar .l-nav{ width:100% }

/* ================================================================ topo da unidade */
/* linha 1: nome da tela + unidade; linha 2: abas do módulo aberto */
.ubs-topo:not(:has(.ubs-abas)){ padding-bottom:var(--l-e5) }
.ubs-abas{ align-items:center; overflow-x:auto; scrollbar-width:none }
.ubs-abas::-webkit-scrollbar{ display:none }
.ubs-abas-sep{ display:inline-flex; align-items:center; gap:var(--l-e2); height:20px; padding-left:var(--l-e5); border-left:1px solid var(--l-borda); font-size:var(--l-t-mini); color:var(--l-texto-3); white-space:nowrap }
.ubs-abas-sep:empty{ padding-left:0 }
/* painel que já traz o próprio cabeçalho de abas: o topo da unidade sai do caminho */
.ubs-right:has(> #ubs-main-content > .l-painel > .l-secoes, > #ubs-main-content > * > .l-painel > .l-secoes) > .ubs-topo:not(:has(.ubs-abas)){ display:none }

/* ================================================================ topo da intranet (fora da Regulação) */
.in-topbar{
  position:sticky; top:0; z-index:15; display:flex; align-items:center; gap:var(--l-e4);
  min-height:var(--l-topo); padding:10px var(--l-e8);
  background:color-mix(in srgb, var(--l-fundo) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(8px); -webkit-backdrop-filter:saturate(1.2) blur(8px);
  border:0; border-bottom:1px solid var(--l-borda); border-radius:0;
}
.in-topbar .brand{ display:flex; align-items:center; gap:var(--l-e3); min-width:0; flex:0 1 auto }
.in-topbar .mark{ display:none }
.brand-txt{ min-width:0 }
.in-kicker, .intranet-header-kicker{ font-size:var(--l-t-mini); color:var(--l-texto-3); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.brand-txt h1{ font-size:17px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.brand-txt p{ font-size:var(--l-t-peq); color:var(--l-texto-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.in-topbar .in-search{ flex:1 1 320px; max-width:440px; margin-left:auto; position:relative }
.in-topbar .actions{ display:flex; align-items:center; gap:var(--l-e1); flex:none }

/* ================================================================ conta */
.l-conta{ position:relative; flex:none }
.l-conta-btn{
  list-style:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  background:var(--l-marca-suave); color:var(--l-marca-tinta); cursor:pointer; user-select:none; transition:box-shadow var(--l-rapido);
}
.l-conta-btn::-webkit-details-marker{ display:none }
.l-conta-btn:hover, .l-conta[open] .l-conta-btn{ box-shadow:0 0 0 3px var(--l-marca-clara) }
.l-conta-ini{ font-size:var(--l-t-mini); font-weight:600; letter-spacing:.02em }
.l-conta-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:220px; padding:var(--l-e1);
  background:var(--l-sup); border:1px solid var(--l-borda); border-radius:var(--l-raio-3); box-shadow:var(--l-sombra-flutua);
  animation:l-modal var(--l-rapido) var(--l-curva);
}
.l-conta-quem{ padding:10px 12px 8px; margin-bottom:var(--l-e1); border-bottom:1px solid var(--l-fio); font-size:var(--l-t-peq); font-weight:600; color:var(--l-texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.l-conta-menu button{
  display:flex; align-items:center; gap:10px; width:100%; height:36px; padding:0 12px;
  border:0; border-radius:var(--l-raio-2); background:none; color:var(--l-texto); font-size:var(--l-t-corpo); text-align:left;
}
.l-conta-menu button:hover, .l-conta-menu button:focus-visible{ background:var(--l-sup-3) }
.l-conta-menu button svg, .l-conta-menu button i[data-lucide]{ width:16px; height:16px; color:var(--l-texto-3) }
.l-conta-menu .l-conta-sair{ margin-top:var(--l-e1); border-top:1px solid var(--l-fio); border-radius:0 0 var(--l-raio-2) var(--l-raio-2) }
.l-conta-menu .l-conta-sair:hover, .l-conta-menu .l-conta-sair:hover svg{ color:var(--l-erro) }

/* ================================================================ conteúdo */
.intranet-main, #ubs-main-content{ min-width:0; width:100%; max-width:1440px; padding:var(--l-e8) var(--l-e10); margin:0 auto }
#ubs-main-content{ flex:1; max-width:none; padding:var(--l-e6) var(--l-e10) var(--l-e12); background:none; border:0; border-radius:0 }

/* painel embutido na casca da unidade: um só topo */
.embedded-in-shell .intranet-header, .embedded-in-shell .rec-page-header{ display:none !important }
.embedded-in-shell{ padding:0 !important; min-height:0 !important; background:none !important }

/* ================================================================ telas pequenas */
@media (max-width:980px){
  /* o menu vira gaveta (barra inferior > Painéis), sempre aberto */
  #reg-rail-fixed, #view-intranet.intranet-reg-mode .intranet-grid > .intranet-reg-rail{
    position:fixed; left:0; top:0; bottom:0; width:auto; height:auto; z-index:70;
    transform:translateX(-100%); transition:transform var(--l-medio) var(--l-curva);
  }
  body.rail-open #reg-rail-fixed, body.rail-open #view-intranet.intranet-reg-mode .intranet-reg-rail{ transform:none }
  body.reg-shell-on .view-section.active:not(#view-intranet){ padding-left:0 }
  #view-intranet.intranet-reg-mode .intranet-grid{ grid-template-columns:minmax(0,1fr) }
  #view-intranet.intranet-reg-mode .intranet-grid > .intranet-main{ grid-column:1 }
  .l-nav, .l-nav:hover{ width:min(300px,86vw); box-shadow:var(--l-sombra-modal) }
  #reg-rail-fixed:has(.l-nav:hover){ width:auto }
  body.reg-shell-on:has(#reg-rail-fixed .l-nav:hover) .view-section.active:not(#view-intranet){ padding-left:0 }
  #view-intranet.intranet-reg-mode .intranet-grid:has(.l-nav:hover){ grid-template-columns:minmax(0,1fr) }
  .l-nav .l-nav-txt{ opacity:1 }
  .l-nav .l-nav-sec{ margin-top:var(--l-e3) }
  .l-nav .l-nav-sec-cab{ height:24px; background:none !important; color:var(--l-texto-3) !important }
  .l-nav .l-nav-sec-cab svg{ display:none }
  .l-nav .l-nav-sec-cab .l-nav-txt{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase }
  .l-nav .l-nav-sec-itens{ display:flex }

  :is(#view-intranet, #view-ubs-intranet) .intranet-grid,
  :is(#view-intranet, #view-ubs-intranet) .intranet-grid:has(> .intranet-sidebar .l-nav:is(:hover, :focus-within)){ grid-template-columns:minmax(0,1fr) }
  :is(#view-intranet, #view-ubs-intranet) .intranet-grid > .intranet-sidebar{
    position:fixed; left:0; top:0; bottom:0; width:var(--l-rail-aberto); z-index:60;
    transform:translateX(-100%); transition:transform var(--l-medio) var(--l-curva);
  }
  body.rail-open .intranet-sidebar{ transform:none; box-shadow:var(--l-sombra-modal) }
  #view-intranet .intranet-grid > :is(.in-topbar, .intranet-main), #view-ubs-intranet .intranet-grid > .ubs-right{ grid-column:1 }
  .in-topbar{ padding:10px var(--l-e4); flex-wrap:wrap }
  .in-topbar .in-search{ order:3; flex-basis:100%; max-width:none }
  .intranet-main, #ubs-main-content{ padding:var(--l-e4) }
}

/* ================================================================ menu verde (01/10/2026)
   Fundo na cor da marca, texto claro; item ativo em pílula branca. */
.l-nav{ background:var(--l-verde); border-right-color:var(--l-verde-borda); color:var(--l-verde-texto) }
.l-nav-topo, .l-nav-topo b{ color:var(--l-verde-texto) }
.l-nav-topo small{ color:var(--l-verde-texto-2) }
.l-nav-linha{ color:var(--l-verde-texto-2) }
.l-nav-linha:hover, .l-nav-linha:focus-visible{ background:var(--l-verde-hover); color:var(--l-verde-texto) }
.l-nav-linha.is-active{ background:var(--l-verde-ativo); color:var(--l-verde-ativo-texto) }
.l-nav-busca{ border-color:rgba(255,255,255,.22); color:var(--l-verde-texto-2) }
.l-nav-busca kbd{ background:transparent; border-color:rgba(255,255,255,.28); color:var(--l-verde-texto-2) }
.l-nav-sec-cab{ color:var(--l-verde-texto-2) }
.l-nav-sec.is-active > .l-nav-sec-cab{ background:var(--l-verde-ativo); color:var(--l-verde-ativo-texto) }
.l-nav:hover .l-nav-sec-cab, .l-nav:focus-within .l-nav-sec-cab{ color:var(--l-verde-texto-2) }
.l-nav-pe{ border-top-color:rgba(255,255,255,.16) }
.l-conta-lateral .l-conta-btn:hover, .l-conta-lateral[open] .l-conta-btn{ background:var(--l-verde-hover) }
.l-conta-lateral .l-conta-ini{ background:rgba(255,255,255,.16); color:var(--l-verde-texto) }
.l-conta-nome{ color:var(--l-verde-texto) }
@media (max-width:980px){
  .l-nav .l-nav-sec-cab{ color:var(--l-verde-texto-2) !important }
}
/* menu aberto: o título da família volta a ser só texto (a pílula é do menu fechado) */
.l-nav:is(:hover, :focus-within) .l-nav-sec.is-active > .l-nav-sec-cab{ background:none; color:var(--l-verde-texto-2) }

/* ================================================================ menu flutuante (01/10/2026)
   No computador o menu vira um cartão solto das bordas (margem, cantos e sombra).
   Continua EMPURRANDO os painéis ao abrir no hover (nunca por cima): o espaço
   reservado acompanha a largura do menu mais as margens. No celular segue gaveta. */
:root{ --l-flut:12px; --l-trilho-res:calc(var(--l-trilho) + var(--l-flut) * 2); --l-trilho-res-aberto:calc(var(--l-trilho-aberto) + var(--l-flut) * 2) }
@media (min-width:981px){
  #reg-rail-fixed{ width:var(--l-trilho-res); z-index:60 }
  #reg-rail-fixed:has(.l-nav:hover, .l-nav:focus-within){ width:var(--l-trilho-res-aberto) }
  body.reg-shell-on .view-section.active:not(#view-intranet){ padding-left:var(--l-trilho-res) }
  body.reg-shell-on:has(#reg-rail-fixed .l-nav:hover, #reg-rail-fixed .l-nav:focus-within) .view-section.active:not(#view-intranet){ padding-left:var(--l-trilho-res-aberto) }
  :is(#view-intranet, #view-ubs-intranet) .intranet-grid,
  #view-intranet.intranet-reg-mode .intranet-grid{ grid-template-columns:var(--l-trilho-res) minmax(0,1fr) }
  :is(#view-intranet, #view-ubs-intranet) .intranet-grid:has(> .intranet-sidebar .l-nav:is(:hover, :focus-within)),
  #view-intranet.intranet-reg-mode .intranet-grid:has(.l-nav:hover, .l-nav:focus-within){ grid-template-columns:var(--l-trilho-res-aberto) minmax(0,1fr) }

  .l-nav{
    margin:var(--l-flut); height:calc(100dvh - var(--l-flut) * 2); border-radius:20px; border-right:0;
    box-shadow:0 12px 32px -14px rgba(10,14,6,.45), 0 2px 6px rgba(10,14,6,.10);
  }
  .intranet-sidebar .l-nav{ width:calc(100% - var(--l-flut) * 2) }
}

/* cabeçalhos flutuantes (01/10/2026): mesmo respiro e cantos do menu flutuante.
   Continuam presos no topo ao rolar (sticky), agora a 12px da borda. */
@media (min-width:981px){
  .l-secoes, .ubs-topo, :is(#view-intranet, #view-ubs-intranet) .in-topbar{
    margin:var(--l-flut) var(--l-flut) 0 0; top:var(--l-flut);
    border:1px solid var(--l-borda) !important; border-radius:18px;
    box-shadow:0 8px 24px -16px rgba(10,14,6,.35), 0 1px 2px rgba(10,14,6,.06) !important;
  }
  .ubs-topo{ position:sticky; z-index:15 }
}

/* sem o menu lateral (Atendimento e painéis abertos fora da casca) o cabeçalho
   flutuante encostava na borda esquerda: ganha o mesmo respiro dos outros lados */
@media (min-width:981px){
  body:not(.reg-shell-on) .view-section.active .l-secoes{ margin-left:var(--l-flut) }
}