/* ============================================================================
   LINHA · peças globais (vivem no <body>, fora das telas)
   toast · sino · acessibilidade · diálogos · status de conexão · celular
   ============================================================================ */

/* ================================================================ toast */
.l-toasts{
  position:fixed; top:var(--l-e4); right:var(--l-e4); z-index:2147483647;
  display:flex; flex-direction:column; gap:var(--l-e2); width:min(360px, calc(100vw - 32px)); pointer-events:none;
}
.l-toast{
  display:flex; align-items:flex-start; gap:var(--l-e3); pointer-events:auto;
  padding:12px 14px 12px 16px; border-radius:var(--l-raio-3);
  background:var(--l-texto); color:var(--l-sup); box-shadow:var(--l-sombra-flutua);
  font-size:var(--l-t-corpo); line-height:1.45;
  opacity:0; transform:translateY(-6px); transition:opacity var(--l-medio), transform var(--l-medio);
}
body.theme-dark .l-toast{ background:var(--l-sup-3); color:var(--l-texto); border:1px solid var(--l-borda) }
.l-toast.is-in{ opacity:1; transform:none }
.l-toast::before{ content:""; flex:none; width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--l-marca-clara) }
.l-toast-success::before{ background:#6fcfa9 }
.l-toast-error::before{ background:#f3928a }
.l-toast-txt{ flex:1; min-width:0 }
.l-toast-x{ flex:none; border:0; background:transparent; color:inherit; opacity:.7; font-size:18px; line-height:1; padding:0 2px }
.l-toast-x:hover{ opacity:1 }

/* ================================================================ sino */
.app-notif-widget{ position:fixed; right:var(--l-e6); bottom:var(--l-e6); z-index:900 }
.app-notif-toggle{
  position:relative; display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:1px solid var(--l-borda); border-radius:50%; background:var(--l-sup); color:var(--l-texto-2);
  box-shadow:var(--l-sombra-flutua); transition:color var(--l-rapido), border-color var(--l-rapido);
}
.app-notif-toggle:hover{ color:var(--l-marca-tinta); border-color:var(--l-borda-forte) }
.app-notif-toggle svg{ width:19px; height:19px; stroke-width:1.9 }
.app-notif-badge{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  display:grid; place-items:center; background:var(--l-erro); color:#fff; font-size:11px; font-weight:600; border:2px solid var(--l-sup);
}
/* modal "Suas notificações" (sino e login): largo no computador, lista rolando por dentro */
.app-notif-modal .app-notif-caixa{
  width:min(880px, 100%); max-height:min(760px, calc(100dvh - 48px)); padding:0; overflow:hidden;
  display:flex; flex-direction:column;
}
.app-notif-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--l-e3); padding:var(--l-e6) var(--l-e6) var(--l-e4) }
.app-notif-sub{ margin-top:4px; font-size:var(--l-t-corpo); color:var(--l-texto-2) }
.app-notif-rodape{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--l-e2); padding:var(--l-e4) var(--l-e6); border-top:1px solid var(--l-fio) }
.app-notif-esp{ flex:1 }
.app-notif-limpar:hover{ color:var(--l-erro) }
.app-notif-link-btn{ border:0; background:none; padding:0; color:var(--l-marca-tinta); font-size:var(--l-t-peq); font-weight:500 }
.app-notif-link-btn:hover{ text-decoration:underline; text-underline-offset:2px }
.app-notif-link-btn-danger{ color:var(--l-texto-3) }
.app-notif-link-btn-danger:hover{ color:var(--l-erro) }
.app-notif-tabs{ display:flex; gap:var(--l-e6); padding:0 var(--l-e6); border-bottom:1px solid var(--l-fio) }
.app-notif-tabs button{
  height:38px; padding:0; margin-bottom:-1px; border:0; border-bottom:2px solid transparent; background:none;
  color:var(--l-texto-2); font-size:var(--l-t-peq); font-weight:500;
}
.app-notif-tabs button[aria-selected="true"]{ color:var(--l-aba-ativa, var(--l-texto)); font-weight:600; border-bottom-color:var(--l-aba-ativa, var(--l-marca)) }
.app-notif-tabs [data-conta]:not(:empty){ margin-left:4px; color:var(--l-texto-3) }
.app-notif-list{ overflow-y:auto; flex:1; min-height:160px }
.app-notif-item{ display:flex; gap:var(--l-e4); padding:var(--l-e4) var(--l-e6); border-bottom:1px solid var(--l-fio); cursor:pointer; position:relative }
.app-notif-item:hover{ background:var(--l-sup-2) }
.app-notif-item:last-child{ border-bottom:0 }
.app-notif-item.is-unread::after{ content:""; position:absolute; right:var(--l-e6); top:22px; width:7px; height:7px; border-radius:50%; background:var(--l-marca) }
.app-notif-icon{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--l-sup-3); color:var(--l-texto-2) }
.app-notif-icon svg, .app-notif-icon i{ width:14px; height:14px }
.app-notif-body{ min-width:0; flex:1; padding-right:var(--l-e4) }
.app-notif-tag{ display:inline-block; font-size:11px; font-weight:500; color:var(--l-marca-tinta); margin-bottom:2px }
.app-notif-title{ font-size:var(--l-t-corpo); font-weight:500; color:var(--l-texto) }
.app-notif-item:focus-visible{ outline:2px solid var(--l-aba-ativa, var(--l-marca)); outline-offset:-2px }
.app-notif-item.is-unread{ background:var(--l-marca-suave) }
.app-notif-item.is-unread:hover{ background:var(--l-sup-2) }
.app-notif-item:not(.is-unread) .app-notif-title{ font-weight:400; color:var(--l-texto-2) }
.app-notif-msg{ font-size:var(--l-t-peq); color:var(--l-texto-2); margin-top:2px }
.app-notif-time{ font-size:var(--l-t-mini); color:var(--l-texto-3); margin-top:4px }
.app-notif-empty{ padding:var(--l-e10) var(--l-e5); text-align:center; color:var(--l-texto-3); font-size:var(--l-t-peq) }

/* painel antigo de tarefas: o sino único assumiu */
.task-notification-widget{ display:none !important }

/* ================================================================ modal de sistema (confirmação, notificações no login) */
.app-modal-backdrop{
  position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:var(--l-e6);
  background:var(--l-veu); animation:l-veu var(--l-medio) var(--l-curva);
}
.app-modal-backdrop.hidden{ display:none !important }
.app-modal-box{
  width:min(440px,100%); max-height:calc(100dvh - 48px); overflow:auto; padding:var(--l-e6);
  background:var(--l-sup); border:1px solid var(--l-borda); border-radius:var(--l-raio-4); box-shadow:var(--l-sombra-modal);
  animation:l-modal var(--l-medio) var(--l-curva);
}
.app-modal-title{ font-size:17px; font-weight:600 }
.app-modal-message{ margin-top:var(--l-e2); font-size:var(--l-t-corpo); color:var(--l-texto-2) }
.app-modal-actions{ justify-content:flex-end; margin-top:var(--l-e6) }

.app-login-notif-box{ width:min(760px,100%) }
.app-login-notif-sub{ margin-top:4px; color:var(--l-texto-2) }
.app-login-notif-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--l-e6); margin-top:var(--l-e5) }
.app-login-notif-sec h4{ font-size:var(--l-t-peq); font-weight:600; margin-bottom:var(--l-e2); display:flex; align-items:center; gap:6px }
.app-login-notif-count{ font-weight:500; color:var(--l-texto-3) }
.app-login-notif-list{ display:flex; flex-direction:column; border:1px solid var(--l-borda); border-radius:var(--l-raio-3); overflow:hidden }
.app-login-notif-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; padding:10px 14px;
  border:0; border-bottom:1px solid var(--l-fio); background:var(--l-sup); text-align:left;
}
.app-login-notif-item:last-child{ border-bottom:0 }
.app-login-notif-item:hover{ background:var(--l-sup-2) }
.app-login-notif-item strong{ font-size:var(--l-t-peq); font-weight:500 }
.app-login-notif-item small{ font-size:var(--l-t-mini); color:var(--l-texto-3) }
.app-login-notif-tag{ font-size:11px; font-weight:500; color:var(--l-marca-tinta) }
.app-login-notif-more, .app-login-notif-push{ margin-top:var(--l-e2); font-size:var(--l-t-peq); color:var(--l-texto-3) }

/* ================================================================ diálogos app.pf.confirmar / pedirTexto */
.pf-modal-fundo{
  position:fixed; inset:0; z-index:1300; display:grid; place-items:center; padding:var(--l-e6);
  background:var(--l-veu); animation:l-veu var(--l-medio) var(--l-curva);
}
.pf-modal{
  width:min(560px,100%); max-height:calc(100dvh - 48px); display:flex; flex-direction:column; overflow:hidden;
  background:var(--l-sup); border:1px solid var(--l-borda); border-radius:var(--l-raio-4); box-shadow:var(--l-sombra-modal);
  animation:l-modal var(--l-medio) var(--l-curva);
}
.pf-modal--estreito{ width:min(440px,100%) }
.pf-modal-cab{ display:flex; align-items:center; gap:var(--l-e3); padding:var(--l-e5) var(--l-e6) 0 }
.pf-modal-titulo{ flex:1; font-size:17px; font-weight:600 }
.pf-modal-fechar{ display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:var(--l-raio-2); background:none; color:var(--l-texto-3) }
.pf-modal-fechar:hover{ background:var(--l-sup-3); color:var(--l-texto) }
.pf-modal-fechar svg{ width:18px; height:18px }
.pf-confirma-ico{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--l-erro-fundo); color:var(--l-erro) }
.pf-confirma-ico svg{ width:17px; height:17px }
.pf-modal-corpo{ padding:var(--l-e3) var(--l-e6) var(--l-e5); overflow:auto; color:var(--l-texto); font-size:var(--l-t-corpo) }
.pf-msg{ white-space:pre-line }
.pf-msg-apoio{ color:var(--l-texto-2); margin-bottom:var(--l-e4) }
.pf-consequencia{ margin-top:var(--l-e3); padding:var(--l-e3) var(--l-e4); border-radius:var(--l-raio-2); background:var(--l-erro-fundo); color:var(--l-erro); font-size:var(--l-t-peq) }
.pf-campo{ display:flex; flex-direction:column; gap:6px }
.pf-rotulo{ font-size:var(--l-t-peq); font-weight:500; color:var(--l-texto-2) }
.pf-obrigatorio{ font-weight:400; color:var(--l-texto-3) }
.pf-so-leitor{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.pf-erro{ display:flex; align-items:center; gap:6px; font-size:var(--l-t-peq); color:var(--l-erro) }
.pf-erro[hidden]{ display:none }
.pf-erro svg{ width:14px; height:14px }
.pf-modal-rodape{ display:flex; align-items:center; justify-content:flex-end; gap:var(--l-e2); padding:var(--l-e4) var(--l-e6); border-top:1px solid var(--l-fio); background:var(--l-sup-2) }
.pf-dica{ margin-right:auto; font-size:var(--l-t-mini); color:var(--l-texto-3) }
.pf-btn{
  display:inline-flex; align-items:center; justify-content:center; height:var(--l-controle); padding:0 14px;
  border:1px solid var(--l-borda); border-radius:var(--l-raio-2); background:var(--l-sup); color:var(--l-texto);
  font-size:var(--l-t-corpo); font-weight:500;
}
.pf-btn:hover{ background:var(--l-sup-3) }
.pf-btn--fantasma{ border-color:transparent; background:transparent; color:var(--l-texto-2) }
.pf-btn--primario{ background:var(--l-marca); border-color:var(--l-marca); color:var(--l-sobre-marca) }
.pf-btn--primario:hover{ background:var(--l-marca-forte) }
.pf-btn--perigo{ background:var(--l-erro); border-color:var(--l-erro); color:#fff }
.pf-btn--perigo:hover{ filter:brightness(.92); background:var(--l-erro) }

/* ================================================================ conexão */
#net-status{
  position:fixed; left:50%; bottom:var(--l-e6); transform:translateX(-50%); z-index:950;
  align-items:center; gap:var(--l-e2); padding:8px 14px; border-radius:var(--l-raio-pilula);
  background:var(--l-texto); color:var(--l-sup); font-size:var(--l-t-peq); font-weight:500; box-shadow:var(--l-sombra-flutua);
}
#net-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--l-marca-clara) }
#net-status.net-off::before{ background:#f3928a }
#net-status.net-quar::before{ background:#f0b45e }

#netui-fundo{ position:fixed; inset:0; z-index:1300; display:grid; place-items:center; padding:var(--l-e6); background:var(--l-veu) }
#netui-caixa{
  width:min(560px,100%); max-height:calc(100dvh - 48px); overflow:auto; padding:var(--l-e6);
  background:var(--l-sup); border:1px solid var(--l-borda); border-radius:var(--l-raio-4); box-shadow:var(--l-sombra-modal);
}
.netui-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--l-e3); margin-bottom:var(--l-e4) }
.netui-sub, .netui-meta, .netui-calma{ font-size:var(--l-t-peq); color:var(--l-texto-2) }
.netui-sec{ margin-top:var(--l-e5) }
.netui-item{ padding:var(--l-e3) 0; border-top:1px solid var(--l-fio) }
.netui-item-tit{ font-weight:500 }
.netui-motivo{ color:var(--l-erro); font-size:var(--l-t-peq) }
.netui-acoes, .netui-rodape{ display:flex; gap:var(--l-e2); justify-content:flex-end; margin-top:var(--l-e3) }
.netui-vazio{ color:var(--l-texto-3); padding:var(--l-e6) 0; text-align:center }
.netui-x{ border:0; background:none; font-size:20px; color:var(--l-texto-3) }

/* ================================================================ acessibilidade */
.ui-global-controls{
  position:fixed; right:var(--l-e6); bottom:calc(var(--l-e6) + 56px); z-index:890; flex-direction:row-reverse;
  display:flex; align-items:center; gap:var(--l-e1); padding:4px;
  background:var(--l-sup); border:1px solid var(--l-borda); border-radius:var(--l-raio-pilula); box-shadow:var(--l-sombra-flutua);
}
.ui-global-controls.is-collapsed{ padding:0; border-color:var(--l-borda) }
.ui-global-controls.is-collapsed .ui-global-controls-body{ display:none }
.ui-global-controls-body, .ui-a11y-extra, .ui-font-controls{ display:flex; align-items:center; gap:2px }
.ui-global-controls .ui-icon-btn{ width:32px; height:32px; border-radius:50%; font-size:var(--l-t-peq); font-weight:600 }
.ui-global-controls.is-collapsed .ui-global-main-toggle{ width:44px; height:44px }
.ui-global-main-toggle svg{ width:19px; height:19px }
.ui-global-toggle[aria-pressed="true"]{ background:var(--l-marca-suave); color:var(--l-marca-tinta) }
.ui-font-scale-label{ min-width:38px; text-align:center; font-size:var(--l-t-mini); color:var(--l-texto-2) }

/* alto contraste e espaçamento de leitura */
body.high-contrast-mode{
  --l-texto:#000; --l-texto-2:#1d2215; --l-texto-3:#2f3527; --l-borda:#5b6250; --l-fio:#7d846e; --l-campo-borda:#1d2215;
  --l-fundo:#fff; --l-sup-2:#fff; --l-sup-3:#eceee7;
}
body.theme-dark.high-contrast-mode{ --l-texto:#fff; --l-texto-2:#f0f3ea; --l-texto-3:#d9dfcd; --l-borda:#b3baa6; --l-fio:#8f977f; --l-fundo:#000; --l-sup:#0b0d08 }
body.text-spacing-mode{ letter-spacing:.06em; word-spacing:.16em; line-height:1.8 }
body.text-spacing-mode p{ margin-bottom:.6em }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after{ animation:none !important; transition:none !important }

/* ================================================================ celular: barra inferior e gaveta */
.mobile-bottomnav{ display:none }
.rail-fab{ display:none }
.rail-scrim{ display:none }
@media (max-width:980px){
  body.app-shell-on{ padding-bottom:64px }
  body.app-shell-on .mobile-bottomnav{
    position:fixed; left:0; right:0; bottom:0; z-index:880; height:60px;
    display:grid; grid-template-columns:repeat(4,1fr);
    background:var(--l-sup); border-top:1px solid var(--l-borda); padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-bottomnav button{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    border:0; background:none; color:var(--l-texto-3); font-size:11px; font-weight:500;
  }
  .mobile-bottomnav button svg{ width:20px; height:20px }
  .mobile-bottomnav button.is-active, .mobile-bottomnav button[aria-current]{ color:var(--l-marca-tinta) }
  .bn-badge{ position:absolute; top:6px; left:calc(50% + 6px); min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--l-erro); color:#fff; font-size:10px; display:grid; place-items:center }
  .bn-badge[hidden]{ display:none }
  body.rail-open .rail-scrim{ display:block; position:fixed; inset:0; z-index:55; background:var(--l-veu) }
  body.app-shell-on .app-notif-widget{ bottom:76px; right:var(--l-e4) }
  body.app-shell-on .ui-global-controls{ bottom:132px; right:var(--l-e4) }
  #net-status{ bottom:76px }
}

/* ================================================================ Personalizar (cor do portal e tema) */
#ui-personalizar.hidden{ display:none !important }
.pers{ width:min(560px, 100%) }
.pers-tit{ margin:var(--l-e2) 0 var(--l-e3); font-size:var(--l-t-peq); font-weight:600; color:var(--l-texto-2) }
.pers-cores{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--l-e3) }
.pers-cor{ display:flex; flex-direction:column; align-items:stretch; gap:var(--l-e2); padding:6px 6px 10px; border:2px solid var(--l-borda); border-radius:var(--l-raio-3); background:var(--l-sup); color:var(--l-texto); font:inherit; cursor:pointer; transition:border-color var(--l-rapido), transform var(--l-rapido) }
.pers-cor:hover{ transform:translateY(-2px) }
.pers-cor[aria-pressed="true"]{ border-color:var(--l-aba-ativa, var(--l-marca)); box-shadow:0 0 0 3px var(--l-marca-suave) }
.pers-amostra{ position:relative; display:block; height:62px; border-radius:8px; overflow:hidden; background:var(--a2) }
.pers-amostra i{ position:absolute; inset:0 auto 0 0; width:28%; background:var(--a1) }
.pers-amostra b{ position:absolute; left:36%; right:10%; top:14px; height:16px; border-radius:4px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12) }
.pers-amostra em{ position:absolute; left:36%; width:30%; top:38px; height:4px; border-radius:2px; background:var(--a3) }
.pers-nome{ font-size:var(--l-t-corpo); font-weight:500; text-align:center }
.pers-nome small{ display:block; font-size:11px; font-weight:400; color:var(--l-texto-3) }
.pers-temas{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--l-e3) }
.pers-tema{ display:flex; align-items:center; justify-content:center; gap:var(--l-e2); height:46px; border:2px solid var(--l-borda); border-radius:var(--l-raio-3); background:var(--l-sup); color:var(--l-texto); font:inherit; font-weight:500; cursor:pointer }
.pers-tema[aria-pressed="true"]{ border-color:var(--l-aba-ativa, var(--l-marca)); background:var(--l-marca-suave) }
.pers-tema-ico{ font-size:18px; line-height:1 }
.pers-nota{ margin:var(--l-e5) 0 0; font-size:var(--l-t-peq); color:var(--l-texto-3) }
@media (max-width:520px){ .pers-cores{ grid-template-columns:repeat(2, minmax(0,1fr)) } }