/* === Marca v2 (Selo Evoluído) — login e navegação ===
   Cores em /brand/brand-tokens.css (gerado por tools/brand/build-brand.mjs a partir de tools/brand/brand.json). */
:root{--sidebar-bg:var(--marca-floresta,#06251f)}
.sidebar .brand-mark.app-logo,.sidebar .brand-mark.has-logo{background:transparent}
/* painel da marca no login, na definição de palavra-passe e na definição de PIN */
.login-screen .login-brand-panel.lp2{background:radial-gradient(120% 90% at 100% 100%,color-mix(in srgb,var(--marca-verde-digital,#00a86b) 34%,transparent) 0%,transparent 58%),radial-gradient(80% 60% at 0% 0%,color-mix(in srgb,var(--marca-menta,#2fd294) 10%,transparent),transparent 60%),var(--marca-floresta,#06251f)!important;color:#fff;overflow:hidden;position:relative;justify-content:space-between;gap:28px}
.login-screen .login-brand-panel.lp2.has-company-image{background:linear-gradient(180deg,color-mix(in srgb,var(--marca-floresta,#06251f) 92%,transparent),color-mix(in srgb,var(--marca-floresta,#06251f) 80%,transparent)),var(--company-image),var(--marca-floresta,#06251f)!important;background-size:cover!important;background-position:center!important}
.login-brand-panel.lp2:after{display:none!important}
.lp2-marca-agua{position:absolute;right:-12%;bottom:-18%;width:min(70%,520px);height:auto;color:#fff;opacity:.045;pointer-events:none}
.login-brand-panel.lp2>:not(.lp2-marca-agua){position:relative;z-index:1}

.login-brand-panel.lp2 p.login-brand-tagline{color:var(--marca-menta-clara,#9af0cb)!important;opacity:.9}
.lp2-corpo{display:grid;gap:22px;max-width:520px}
.lp2-frase{font-family:var(--marca-fonte-titulos);font-size:clamp(22px,2.4vw,30px)!important;font-weight:700;line-height:1.25!important;color:#fff!important;letter-spacing:-.01em;margin:0;max-width:22ch!important}
.lp2-modulos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lp2-modulos li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#ffffff0d;border:1px solid #ffffff17;min-width:0}
.lp2-modulos li>span:last-child{display:grid;min-width:0}
.lp2-modulos strong{font-size:14px;font-weight:600;color:#fff}
.lp2-modulos small{font-size:12px;color:#ffffffa3}
.lp2-mod{flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#ffffff12;display:grid;grid-template-columns:repeat(2,9px);grid-auto-rows:9px;gap:3px;place-content:center}
.lp2-mod i{border-radius:2.5px;background:#ffffff30}
.lp2-mod[data-pos="0"] i:nth-child(1),.lp2-mod[data-pos="1"] i:nth-child(2),.lp2-mod[data-pos="2"] i:nth-child(3),.lp2-mod[data-pos="3"] i:nth-child(4){background:var(--c)}
.login-brand-panel.lp2 .login-company-name{color:#ffffffc2}
@media (max-width:1100px){.lp2-modulos{grid-template-columns:minmax(0,1fr)}}
/* telemovel: o painel fica uma faixa compacta (simbolo, nome, assinatura e organizacao) */
@media (max-width:900px){
  .lp2-corpo{display:none}
  .lp2-marca-agua{width:62%;right:-18%;bottom:-40%}
}
/* botao principal do login com a cor institucional e foco visivel (WCAG 2.2: 2.4.7 / 2.4.11) */
.login-card .login-submit:focus-visible,.login-card .field input:focus-visible{outline:3px solid color-mix(in srgb,var(--marca-verde-digital,#00a86b) 55%,transparent);outline-offset:2px}

/* Marca v2: durante a animacao de entrada (app instalada) o painel fica transparente sobre o fundo floresta do overlay,
   para continuar exatamente a imagem de arranque do iOS; a marca de agua so aparece no fim */
.login-screen.login-intro .login-brand-panel.lp2{background:transparent!important}
.login-screen.login-intro .lp2-marca-agua{opacity:0}
.lp2-marca-agua{transition:opacity .6s ease}
.nav-group .nav-group-items{display:grid!important;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .2s ease,opacity .16s ease,visibility .2s}
.nav-group.open .nav-group-items{grid-template-rows:1fr;opacity:1;visibility:visible}
.nav-group-links{display:grid;gap:3px;min-height:0;overflow:hidden;padding:0 6px 7px}
.nav-direct-items{display:grid;gap:3px;margin:0 0 6px}
.nav-group-toggle{align-items:center;gap:8px}
.nav-group-toggle .nav-group-icon{flex:0 0 28px}
.nav-group-toggle .nav-group-label{flex:1;min-width:0;text-align:left}
.nav-group.has-current:not(.open) .nav-group-toggle{color:var(--sidebar-text,#fff)}
.nav-group-toggle:focus-visible{outline:2px solid var(--marca-menta,#2fd294);outline-offset:-2px}
.nav-group-toggle,.nav-button,.nav-submenu-button{scroll-margin-block:clamp(20px,12vh,72px)}
.nav-button.active{box-shadow:inset 3px 0 0 var(--marca-menta,#2fd294)}
@media(prefers-reduced-motion:reduce){.nav-group .nav-group-items{transition:none}}
@media(min-width:781px){
  .sidebar{transition:flex-basis .2s ease,padding .2s ease}
  .sidebar-collapse-toggle{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;margin-left:auto;padding:0;border:1px solid var(--sidebar-line);border-radius:8px;background:#ffffff0d;color:var(--sidebar-muted);cursor:pointer}
  .sidebar-collapse-toggle:hover{background:#ffffff18;color:var(--sidebar-text)}
  .sidebar-collapse-toggle:focus-visible{outline:2px solid var(--marca-menta,#2fd294);outline-offset:2px}
  .sidebar-collapse-icon{width:17px;height:17px;transition:transform .2s ease}
  #appShell.sidebar-collapsed .sidebar{flex:0 0 76px!important;width:76px;padding-right:10px;padding-left:10px}
  #appShell.sidebar-collapsed .sidebar .brand{flex-direction:column;gap:8px;margin-bottom:12px;padding:7px 5px}
  #appShell.sidebar-collapsed .brand-copy{display:none}
  #appShell.sidebar-collapsed .brand-mark{width:40px;height:40px}
  #appShell.sidebar-collapsed .sidebar-collapse-toggle{margin:0}
  #appShell.sidebar-collapsed .nav-mode-toggle{gap:3px;padding:3px}
  #appShell.sidebar-collapsed .nav-mode-button{min-width:0;min-height:38px;padding:5px}
  #appShell.sidebar-collapsed .nav-mode-button span,
  #appShell.sidebar-collapsed .nav-group-label,
  #appShell.sidebar-collapsed .nav-group-toggle .nav-badge,
  #appShell.sidebar-collapsed .nav-button>span:not(.nav-icon),
  #appShell.sidebar-collapsed .sidebar-footer button>span:not(.nav-icon),
  #appShell.sidebar-collapsed .sidebar-privacidade span{display:none}
  #appShell.sidebar-collapsed .nav-direct-items{gap:4px;margin-bottom:7px}
  #appShell.sidebar-collapsed .nav-button{justify-content:center;gap:0;padding:6px}
  #appShell.sidebar-collapsed .nav-button .nav-icon{flex-basis:30px;width:30px;height:30px}
  #appShell.sidebar-collapsed .nav-employee-sections .nav-submenu{display:grid;margin:0;padding:0;gap:4px}
  #appShell.sidebar-collapsed .nav-employee-sections .nav-submenu:before,
  #appShell.sidebar-collapsed .nav-employee-sections .nav-submenu-group-label,
  #appShell.sidebar-collapsed .nav-employee-sections .nav-submenu-button strong{display:none}
  #appShell.sidebar-collapsed .nav-employee-sections .nav-submenu-button{display:flex;align-items:center;justify-content:center;grid-template-columns:1fr;min-height:42px;padding:6px;border-radius:9px}
  #appShell.sidebar-collapsed .nav-employee-sections .nav-submenu-button>span{width:30px;height:30px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:#ffffff14;color:var(--sidebar-muted);display:grid;place-items:center}
  #appShell.sidebar-collapsed .nav-employee-sections .nav-submenu-button svg{width:17px;height:17px}
  #appShell.sidebar-collapsed .nav-employee-sections .nav-submenu-button:hover>span,
  #appShell.sidebar-collapsed .nav-employee-sections .nav-submenu-button.active>span{background:#ffffff29;color:#fff}
  #appShell.sidebar-collapsed .nav-group{position:relative}
  #appShell.sidebar-collapsed .nav-group-toggle{position:relative;justify-content:center;min-height:42px;padding:5px}
  #appShell.sidebar-collapsed .nav-group-links{padding-right:3px;padding-left:3px}
  #appShell.sidebar-collapsed .sidebar-footer button{justify-content:center;gap:0;padding:7px}
  #appShell.sidebar-collapsed .sidebar-privacidade{justify-content:center;width:100%;padding:8px}
  #appShell.sidebar-collapsed .sidebar-privacidade svg{width:16px;height:16px}
}
@media(prefers-reduced-motion:reduce){.sidebar,.sidebar-collapse-icon{transition:none!important}}

/* Marca v2.1: nome com o "e" em grelha de modulos (brandNameHtml no app.js) */
.nome-marca{display:inline-flex;align-items:baseline;gap:.07em;white-space:nowrap}
.e-modular{height:.6em;width:calc(.6em * 242 / 304);flex:0 0 auto;fill:var(--marca-menta,#2fd294);align-self:baseline;overflow:visible}
.login-brand-panel.lp2 .lp2-marca-agua{opacity:.06}
.login-screen.login-intro .lp2-marca-agua{opacity:0}
/* o menu lateral tem ".brand span{display:block}" (linha da organizacao); o nome da marca fica sempre numa linha */
.brand .nome-marca,.nome-marca{display:inline-flex!important;align-items:baseline}
.nome-marca>span{display:inline!important;font:inherit!important;color:inherit!important;margin:0!important;letter-spacing:inherit!important}

/* === Telemovel (<=780px): sem barra superior; menu em ecra inteiro ===
   O nome do utilizador ja aparece no hero e o menu abre-se pelo botao central da barra inferior. A faixa fixa da cor da marca
   por baixo da barra de estado mantem o topo solido no iOS (o sistema usa a cor de elementos fixos no topo). */
.menu-mobile-acoes,.menu-mobile-pesquisa{display:none}
@media (max-width:780px){
  .sidebar-collapse-toggle{display:none!important}
  .topbar{display:none!important}
  .workspace{padding-top:calc(env(safe-area-inset-top,0px) + 10px)!important}
  #appShell::after{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--sidebar-bg);z-index:40;pointer-events:none}
  body.sidebar-open:before{display:none!important}
  .sidebar{position:fixed!important;inset:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;border-radius:0!important;border:0!important;z-index:70!important;
    padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 14px)!important;
    transform:translateY(100%)!important;opacity:0;visibility:hidden;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s linear .34s!important}
  body.sidebar-open .sidebar,.sidebar.open{transform:none!important;opacity:1;visibility:visible;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s!important}
  .sidebar .brand{padding-right:64px!important}
  .menu-mobile-acoes{display:flex;gap:8px;position:absolute;top:calc(env(safe-area-inset-top,0px) + 20px);right:20px;z-index:3}
  .menu-mobile-botao{position:relative;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid #ffffff1f;background:#ffffff12;color:#fff;cursor:pointer}
  .menu-mobile-botao svg{width:20px;height:20px}
  .menu-mobile-botao strong{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5484d;color:#fff;font-size:11px;line-height:18px;text-align:center}
  .menu-mobile-botao:active{transform:scale(.96)}
  .menu-mobile-pesquisa{display:block;position:relative;margin:4px 0 6px}
  .menu-mobile-pesquisa .global-search{display:block;width:100%;max-width:none;margin:0}
  .menu-mobile-pesquisa .global-search input{width:100%;height:44px;border-radius:12px;border:1px solid #ffffff1f;background:#ffffff10;color:#fff;padding:0 14px;font-size:16px}
  .menu-mobile-pesquisa .global-search input::placeholder{color:#ffffff80}
  .menu-mobile-pesquisa .global-search-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;max-height:55vh;overflow:auto}
}

/* Avisos no telemovel: sino na propria pagina (ao lado do QR no hero do colaborador, no canto do hero do dashboard ou no
   cabecalho das restantes paginas). No desktop continua o sino da barra superior. */
.hero-avisos{display:none}
@media (max-width:780px){
  .hero-avisos{display:grid;place-items:center;position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:14px;border:1px solid #ffffff24;background:#ffffff1f;color:#fff;cursor:pointer}
  .hero-avisos svg{width:22px;height:22px}
  .hero-avisos strong{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#e5484d;color:#fff;font:700 11px/20px var(--marca-fonte-texto,'Inter',sans-serif);text-align:center;box-shadow:0 0 0 2px var(--marca-floresta,#06251f)}
  .hero-avisos:active{transform:scale(.96)}
  .employee-live-hero-body{position:relative}
  .hero-avisos-colaborador{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:12px;z-index:2}
  .dashboard-hero{position:relative}
  .hero-avisos-dashboard{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:12px;z-index:2}
  .page-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .page-avisos{width:44px;height:44px;border-radius:12px;border-color:var(--line);background:var(--surface);color:var(--text)}
  .page-avisos strong{box-shadow:0 0 0 2px var(--surface)}
  .content:has(.dashboard-hero) ~ * .page-avisos,.workspace:has(.dashboard-hero) .page-avisos,.workspace:has(.employee-hero-v2) .page-avisos{display:none}
}

/* === Telemovel: topo solido, cabecalho de secao, atalhos em grelha e cartoes de registos === */
@media (max-width:780px){
  /* o iOS pinta a zona da barra de estado com o fundo do html: cor da marca; a area da pagina mantem o fundo claro/escuro */
  html:has(#appShell:not([hidden])){background:var(--sidebar-bg)!important}
  .workspace{background:var(--bg)}

  /* Cabecalho de secao (paginas sem hero) */
  body.com-cabecalho-secao .page-head{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:14px;
    margin:calc(-1 * (env(safe-area-inset-top,0px) + 10px)) 0 0!important;padding:calc(env(safe-area-inset-top,0px) + 18px) 18px 42px!important;
    background:radial-gradient(90% 120% at 100% 100%,color-mix(in srgb,var(--marca-verde-digital,#00a86b) 26%,transparent),transparent 65%),var(--sidebar-bg);color:#fff;text-align:left}
  body.com-cabecalho-secao .page-head>div:not(.page-actions):not(.page-head-numeros){min-width:0}
  body.com-cabecalho-secao .page-head .eyebrow{color:var(--marca-menta-clara,#9af0cb)!important;margin:0 0 2px;font-size:11px;letter-spacing:.08em}
  body.com-cabecalho-secao .page-head h1{color:#fff!important;font-size:22px!important;line-height:1.15;margin:0;text-align:left}
  body.com-cabecalho-secao .page-head .page-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;margin:0}
  body.com-cabecalho-secao .page-head .page-actions:empty{display:none}
  body.com-cabecalho-secao .page-head .page-actions :is(button,a){flex:1 1 auto;min-height:42px;border-radius:12px}
  body.com-cabecalho-secao .page-head .page-actions .secondary-action{background:#ffffff14;border-color:#ffffff24;color:#fff}
  .page-head-icone{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#ffffff14;border:1px solid #ffffff1a;color:var(--marca-menta,#2fd294)}
  .page-head-icone svg{width:22px;height:22px}
  body.com-cabecalho-secao .page-avisos{display:grid!important;background:#ffffff14;border-color:#ffffff24;color:#fff}
  body.com-cabecalho-secao .page-avisos strong{box-shadow:0 0 0 2px var(--sidebar-bg)}
  .page-head-numeros{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
  .page-head-numeros>div{background:#ffffff12;border:1px solid #ffffff14;border-radius:12px;padding:9px 10px;min-width:0}
  .page-head-numeros strong{display:block;font:800 19px/1.1 var(--marca-fonte-titulos,'Plus Jakarta Sans',sans-serif);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .page-head-numeros span{display:block;font-size:11px;color:#ffffffb3;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.com-cabecalho-secao .kpi-no-cabecalho{display:none!important}
  body.com-cabecalho-secao .content{position:relative;margin-top:-24px;border-radius:22px 22px 0 0;background:var(--bg);padding-top:18px!important}
  body.com-cabecalho-secao .employee-top-cards{display:none}

  /* Atalhos em grelha (antes cartoes grandes: Pedir ferias, Justificacao, Pedir folga...) */
  .employee-action-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;padding:14px!important}
  .employee-action-grid .employee-action{display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;min-height:0!important;padding:4px 0!important;border:0!important;background:none!important;box-shadow:none!important;text-align:center;width:auto!important}
  .employee-action-grid .employee-action>:first-child{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:0 0 auto}
  .employee-action-grid .employee-action strong{font-size:12px!important;line-height:1.25;font-weight:600}
  .employee-action-grid .employee-action small{display:none!important}
  .employee-action-grid .employee-action>span:last-child{display:block;min-width:0}

  /* Paineis: titulo e etiqueta na mesma linha quando cabem */
  .panel-header{flex-direction:row!important;align-items:center!important;flex-wrap:wrap}
  .panel-header>h2,.panel-header>h3{flex:1 1 auto;width:auto!important;min-width:0;margin-right:auto}
  .panel-header>.badge,.panel-header>.pill,.panel-header>.count-pill{flex:0 0 auto;margin-left:0!important}

  /* Cartoes dos registos (tabelas em modo cartao): alinhados e com a acao por baixo dos dados */
  .panel>.table-wrap:has(>table.rt){margin:0!important;padding:12px!important}
  .table-wrap table.rt tr{margin:0 0 10px!important}
  .table-wrap table.rt td[data-kind="select"]{position:static!important;display:block!important;padding:10px 0 2px!important;border-bottom:0!important}
  .table-wrap table.rt td[data-kind="select"]::before{display:none!important}
  .table-wrap table.rt td[data-kind="select"] :is(.secondary-action,.primary-action,button){width:100%}
}
@media (max-width:780px){
  .page-head-numeros span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
  /* uma unica acao: linha completa com icone, titulo e descricao */
  .employee-action-grid:has(>.employee-action:only-child){grid-template-columns:minmax(0,1fr)!important}
  .employee-action-grid>.employee-action:only-child{flex-direction:row!important;justify-content:flex-start!important;text-align:left!important;gap:14px!important;padding:6px 2px!important}
  .employee-action-grid>.employee-action:only-child strong{font-size:15px!important}
  .employee-action-grid>.employee-action:only-child small{display:block!important;font-size:13px}
}

/* Telemovel: paginas com hero (Dashboard e Resumo do colaborador). Sem o titulo "Plataforma interna / Dashboard" e com o hero
   encostado ao topo, de lado a lado: o iOS 26 pinta a zona da barra de estado com a cor do conteudo no topo da pagina. */
@media (max-width:780px){
  body[data-route=dashboard] .page-head{display:none!important}
  body[data-route=dashboard] .content>.dashboard-hero:first-child,
  body[data-route=employee-area]:not(.com-cabecalho-secao) .employee-section>.employee-live-hero:first-child{
    margin-top:calc(-1 * (env(safe-area-inset-top,0px) + 22px))!important;
    margin-right:calc(0px - max(16px,env(safe-area-inset-right,0px)))!important;
    margin-bottom:0!important;
    margin-left:calc(0px - max(16px,env(safe-area-inset-left,0px)))!important;
    border-radius:0 0 26px 26px!important;border-left:0!important;border-right:0!important;border-top:0!important;
    padding-top:calc(env(safe-area-inset-top,0px) + 22px)!important;
    padding-right:max(22px,env(safe-area-inset-right,0px))!important;
    padding-left:max(22px,env(safe-area-inset-left,0px))!important}
  body[data-route=dashboard] .content>.dashboard-hero:first-child .hero-avisos-dashboard{top:calc(env(safe-area-inset-top,0px) + 14px)}
}
@media (max-width:780px){
  /* hero de lado a lado: tinha width:100%, por isso as margens negativas so o deslocavam para a esquerda */
  body[data-route=dashboard] .content>.dashboard-hero:first-child,
  body[data-route=employee-area]:not(.com-cabecalho-secao) .employee-section>.employee-live-hero:first-child{width:calc(100% + max(16px,env(safe-area-inset-left,0px)) + max(16px,env(safe-area-inset-right,0px)))!important;max-width:none!important;box-sizing:border-box}
  /* zona da barra de estado (app instalada): o iOS usa o fundo do body; a area da pagina (.workspace) mantem o fundo claro/escuro */
  body:has(#appShell:not([hidden])){background:var(--sidebar-bg)!important}
}
@media (max-width:780px){.workspace{min-height:100vh;min-height:100dvh}}
@media (max-width:780px){body[data-route=dashboard] .content>.dashboard-hero:first-child .hero-avisos-dashboard{right:max(22px,env(safe-area-inset-right,0px))!important;top:calc(env(safe-area-inset-top,0px) + 18px)!important}}
@media (prefers-reduced-motion:reduce){.hero-avisos:active{transform:none!important}}

/* Listas compactas (telemovel, area do colaborador): registo fechado = titulo, detalhe e estado; tocar abre o cartao completo */
@media (max-width:780px){
  .table-wrap table.rt[data-compacta] tbody tr{cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
  .table-wrap table.rt[data-compacta] tbody tr:not(.aberto){display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:3px;align-items:center;padding:13px 38px 13px 14px!important}
  .table-wrap table.rt[data-compacta] tbody tr:not(.aberto)>td{display:none!important}
  .table-wrap table.rt[data-compacta] tbody tr:not(.aberto)>td[data-papel]{display:block!important;position:static!important;padding:0!important;border:0!important;text-align:left!important;min-width:0}
  .table-wrap table.rt[data-compacta] tbody tr:not(.aberto)>td[data-papel]::before{display:none!important}
  .table-wrap table.rt[data-compacta] tbody tr:not(.aberto)>td[data-papel=titulo]{grid-column:1;font-size:15px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .table-wrap table.rt[data-compacta] tbody tr:not(.aberto)>td[data-papel=sub]{grid-column:1;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .table-wrap table.rt[data-compacta] tbody tr:not(.aberto)>td[data-papel=estado]{grid-column:2;grid-row:1 / span 2;justify-self:end;max-width:46vw}
  .table-wrap table.rt[data-compacta] tbody tr:not(.aberto)>td[data-papel=estado] *{white-space:nowrap}
  .table-wrap table.rt[data-compacta] tbody tr::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(-45deg);opacity:.7;transition:transform .2s}
  .table-wrap table.rt[data-compacta] tbody tr.aberto::after{top:24px;right:18px;transform:rotate(-135deg)}
  .table-wrap table.rt[data-compacta] tbody tr.aberto{padding:4px 14px!important}
  .table-wrap table.rt[data-compacta] tbody tr.aberto>td{width:100%!important;min-width:0;box-sizing:border-box;background:transparent!important;padding-top:7px!important;padding-bottom:7px!important}
  .table-wrap table.rt[data-compacta] tbody tr.aberto>td:first-child{padding-right:42px!important}
  .table-wrap table.rt[data-compacta] tbody tr.aberto>td::before{flex-basis:32%;max-width:38%}
  .table-wrap table.rt[data-compacta] tbody tr.aberto>td[data-kind="actions"],
  .table-wrap table.rt[data-compacta] tbody tr.aberto>td[data-kind="select"]{padding-top:9px!important;padding-bottom:4px!important}
  .table-wrap table.rt[data-compacta] tbody tr:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:2px}
}
@media (max-width:780px){
  /* O atalho do historico cabe no cabecalho e deixa de criar uma linha alta vazia. */
  .employee-recent-punches .panel-header{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center!important;gap:10px!important}
  .employee-recent-punches .panel-header [data-employee-section-link]{width:auto!important;min-height:38px!important;padding:7px 12px!important;white-space:nowrap}
  /* Menos molduras e ar desperdicado nas listas compactas, mantendo alvos de toque confortaveis. */
  .employee-section .panel>.table-wrap:has(>table.rt[data-compacta]){padding:10px!important}
  .employee-section .table-wrap table.rt[data-compacta] tbody tr{border-radius:12px;box-shadow:0 5px 16px rgba(15,23,42,.06)}
  .employee-section .table-wrap table.rt[data-compacta] tbody tr:not(.aberto){min-height:58px;margin-bottom:8px!important}
}
@media (max-width:780px){
  /* campos de data/hora no iOS e Chrome tem largura minima propria: deixam de empurrar o formulario para fora */
  .content input:is([type=date],[type=time],[type=datetime-local],[type=month]){min-width:0!important;width:100%!important;box-sizing:border-box}
  .content label:has(>input:is([type=date],[type=time],[type=datetime-local],[type=month])){min-width:0;grid-template-columns:minmax(0,1fr)!important}
  /* filtro de periodo (historico de picagens, banco de horas): datas lado a lado e botoes lado a lado */
  .attendance-period-filter,.time-bank-filter{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}
  .attendance-period-filter>*,.time-bank-filter>*{min-width:0;width:auto!important;margin:0!important}
}

/* Seletores nativos (calendario/hora do browser, checkboxes, radios, sliders) com a cor da marca em vez do azul do sistema */
:root{accent-color:var(--marca-verde,#007356)}
:root[data-theme="dark"]{accent-color:var(--marca-menta,#2fd294)}
input,select,textarea,progress{accent-color:inherit}
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}

/* === Filtros no telemovel, iguais em todos os modulos ===
   1) pesquisa e botao "Filtros" na mesma linha (o botao fica so com o icone e o contador)
   2) separadores de estado como etiquetas alinhadas a esquerda (passam para a linha seguinte, sem scroll lateral)
   3) barras de filtros com selects/datas em grelha de 2 colunas; painel de filtros avancados numa coluna */
@media (max-width:780px){
  .fx-barra,.asb-barra,.asb-barra-pesquisa{gap:12px!important}
  .fx-linha:not(.fx-resultados),.asb-barra-pesquisa{display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:8px!important;width:100%}
  :is(.fx-linha,.asb-barra-pesquisa) :is(.fx-search,.asb-search){flex:1 1 200px!important;min-width:0!important;width:auto!important;margin:0!important}
  :is(.fx-search,.asb-search) input{font-size:16px!important;min-width:0}
  :is(.fx-btn-filtros,.asb-btn-filtros){flex:0 0 48px!important;width:48px!important;height:48px!important;min-height:48px!important;padding:0!important;justify-content:center!important;
    font-size:0!important;gap:0!important;position:relative;border-radius:12px!important}
  :is(.fx-btn-filtros,.asb-btn-filtros) svg{width:20px;height:20px;margin:0!important}
  :is(.fx-btn-filtros,.asb-btn-filtros) :is(.fx-contador,.asb-contador){position:absolute;top:-6px;right:-6px;font-size:11px!important;min-width:19px;height:19px;line-height:19px;padding:0 5px;border-radius:10px}
  .fx-linha.fx-resultados,.asb-resultados-barra{width:100%}
  :is(.fx-segmentos,.asb-segmentos){display:flex!important;flex-wrap:wrap;justify-content:flex-start!important;gap:6px!important;padding:0!important;background:none!important;width:100%}
  :is(.fx-seg,.asb-seg){flex:0 0 auto!important;height:34px;padding:0 11px!important;border-radius:999px!important;border:1px solid var(--line)!important;background:var(--surface)!important;
    color:var(--muted)!important;font-size:13px!important;gap:6px!important;box-shadow:none!important}
  :is(.fx-seg,.asb-seg) span{font-size:11px!important;padding:0 6px!important}
  :is(.fx-seg,.asb-seg).ativo{background:var(--sidebar-bg)!important;border-color:var(--sidebar-bg)!important;color:#fff!important}
  :is(.fx-seg,.asb-seg).ativo span{background:#ffffff26!important;color:#fff!important}
  :is(.fx-painel,.asb-painel-filtros){display:grid;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  :is(.fx-painel,.asb-painel-filtros)[hidden]{display:none!important}
  .table-toolbar{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px!important;align-items:end;width:100%}
  .table-toolbar>*{min-width:0;width:auto!important;margin:0!important}
  .table-toolbar select,.table-toolbar input{width:100%!important;min-width:0!important}
}
@media (max-width:780px){
  /* listas em cartao (qualquer modulo): contentor sem margens negativas, cartoes com a largura toda */
  .table-wrap:has(>table.rt){margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;width:100%!important}
  .panel>.table-wrap:has(>table.rt){padding:12px!important}
  .table-wrap>table.rt{width:100%!important}
  .table-wrap>table.rt>tbody>tr{width:auto!important;margin-left:0!important;margin-right:0!important}
}
/* setas dos grupos recolhiveis (departamentos, etc.): seta desenhada na cor neutra, em vez do ">" dourado */
.content details>summary::before{content:""!important;display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  color:var(--muted)!important;transform:rotate(-45deg);margin:0 12px 2px 2px;transition:transform .18s ease;flex:0 0 auto}
.content details[open]>summary::before{transform:rotate(45deg)}
/* Este cartao ja tem a sua propria acao/seta; a seta global criava uma quarta coluna e desmontava o cabecalho. */
.content :is(.dashboard-attendance-details,.dashboard-birthdays)>summary::before{content:none!important;display:none!important}

/* === Telemovel: correcoes da analise pagina a pagina (9 out 2026) === */
@media (max-width:780px){
  /* cabecalho de secao: icone, titulo e sino na 1.a linha; botoes de acao na 2.a (2 por linha); numeros na 3.a */
  body.com-cabecalho-secao .page-head>.page-head-icone{grid-column:1;grid-row:1}
  body.com-cabecalho-secao .page-head>div:not(.page-actions):not(.page-head-numeros){grid-column:2;grid-row:1}
  body.com-cabecalho-secao .page-head>.page-avisos{grid-column:3;grid-row:1}
  body.com-cabecalho-secao .page-head>.page-actions{grid-column:1 / -1;grid-row:2}
  body.com-cabecalho-secao .page-head>.page-head-numeros{grid-column:1 / -1;grid-row:3}
  body.com-cabecalho-secao .page-head .page-actions :is(button,a){flex:1 1 140px!important;min-width:0}
  /* numeros: 4 em grelha 2x2 (os rotulos deixam de ficar cortados); 2 ou 3 numa linha */
  .page-head-numeros{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-head-numeros:has(>div:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .page-head-numeros span{-webkit-line-clamp:2}
  /* listas de detalhes (rotulo / valor): o rotulo nunca encolhe abaixo de 72px */
  .detail-row{gap:12px!important}
  .detail-row>:first-child{flex:0 0 auto!important;min-width:72px;max-width:42%}
  .detail-row>:last-child{flex:1 1 auto!important;min-width:0;text-align:right;overflow-wrap:break-word}
  /* seletores e campos nunca saem da coluna */
  .content select{max-width:100%!important;min-width:0!important}
  .content label:has(>select),.content .field{min-width:0}
  .time-bank-filter>label:has(select){grid-column:1 / -1}
  /* metricas: a ultima de uma grelha com numero impar ocupa a linha toda */
  :is(.kpi-grid,.dashboard-kpi-grid,.record-grid)>.metric:last-child:nth-child(odd){grid-column:1 / -1}
  /* tabelas em cartao (versao com data-label): mesmo alinhamento que as restantes listas */
  .table-wrap:has(>table[data-rotulada]){margin-left:0!important;margin-right:0!important;width:100%!important}
  .panel>.table-wrap:has(>table[data-rotulada]){padding:12px!important}
}
/* botao central da barra inferior: logotipo da app (camadas) em vez das tres barras */
.bottom-nav-center-circle img{width:30px;height:30px;display:block}
@media (max-width:780px){
  /* Analytics: indicadores em 2 colunas e mais compactos (antes um por linha) */
  .analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .analytics-grid>.analytics-card:last-child:nth-child(odd){grid-column:1 / -1}
  .analytics-card{padding:12px 14px!important;min-width:0}
  .analytics-card strong{font-size:26px!important}
}

/* === Computador: correcoes da analise pagina a pagina (9 out 2026) === */
/* sino dos avisos na barra superior (era um "!") */
.notification-bell-mark{background:none!important;color:var(--text)!important;width:auto!important;height:auto!important;display:grid!important;place-items:center;box-shadow:none!important}
.notification-bell-mark svg{width:20px;height:20px;display:block}
/* mes do calendario: "Outubro de 2026" (o capitalize punha "De" em maiuscula) */
.calendar-nav-label{text-transform:none!important}
.calendar-nav-label::first-letter{text-transform:uppercase}
/* seta do submenu do menu lateral: neutra (era dourada) */
.nav-submenu-toggle{color:var(--sidebar-muted,#9fbdb4)!important}
/* menu de 3 pontos nas acoes dos pedidos */
.row-menu.acoes-adaptaveis .row-menu-panel :is(button,.secondary-action,.danger-action){width:100%;justify-content:flex-start;text-align:left}
@media (min-width:781px){
  /* botoes secundarios do cabecalho com contorno (antes pareciam texto solto) */
  .page-head .page-actions :is(.secondary-action,.ghost-action,button:not(.primary-action):not(.danger-action):not([aria-pressed]):not(.active)){border:1px solid var(--line)!important;background:var(--surface)!important;border-radius:10px}
  /* grelhas de metricas ajustam-se ao numero de itens (5 ou 6 numa linha, sem um sozinho no fim) */
  .kpi-grid,.analytics-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
}
/* no telemovel o menu dos pedidos vem aberto: botoes a largura toda, sem o botao dos 3 pontos */
@media (max-width:780px){
  .row-menu.acoes-adaptaveis{display:block;width:100%}
  .row-menu.acoes-adaptaveis>summary{display:none!important}
  .row-menu.acoes-adaptaveis>.row-menu-panel{position:static!important;box-shadow:none!important;border:0!important;padding:0!important;background:none!important;min-width:0!important;width:100%}
  .row-menu.acoes-adaptaveis .row-menu-panel :is(button,.secondary-action,.danger-action){justify-content:center;text-align:center}
}
/* caixa informativa neutra nos formularios (ex.: pedido de picagem manual) */
.pedido-info{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--brand) 9%,var(--surface));color:var(--text);font-size:13px;line-height:1.5;border:1px solid color-mix(in srgb,var(--brand) 18%,transparent)}

/* Atalhos dos pedidos: grelha legivel no telemovel; cinco a sete opcoes passam naturalmente para uma segunda linha. */
.employee-action-curto{display:none}
@media (max-width:780px){
  .employee-action-grid:has(>.employee-action:nth-child(5)){grid-template-columns:repeat(auto-fit,minmax(72px,1fr))!important;gap:8px!important;padding:12px!important}
  .employee-action-grid:has(>.employee-action:nth-child(5)) .employee-action>:first-child{width:46px!important;height:46px!important;border-radius:13px!important}
  .employee-action-grid .employee-action:has(.employee-action-curto) strong{display:none!important}
  .employee-action-grid .employee-action .employee-action-curto{display:block;font-size:11.5px;font-weight:600;line-height:1.2;color:var(--text);white-space:nowrap}
}
@media (max-width:360px){
  .employee-action-grid:has(>.employee-action:nth-child(5)){grid-template-columns:repeat(auto-fit,minmax(66px,1fr))!important;gap:6px!important;padding:10px!important}
}

/* Computador: os atalhos dos pedidos ocupam sempre uma linha completa (4, 5, 6 ou 7 conforme os modulos do utilizador) */
@media (min-width:781px){
  .employee-action-grid:not(.compact):has(>.employee-action:nth-child(4)){display:grid!important;grid-template-columns:repeat(var(--atalhos-d,4),minmax(0,1fr))!important}
  .emp-picagem .employee-action-grid:not(.compact):has(>.employee-action:nth-child(4)){grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important}
  .employee-action-grid:not(.compact):has(>.employee-action:nth-child(5)){--atalhos-d:5}
  .employee-action-grid:not(.compact):has(>.employee-action:nth-child(6)){--atalhos-d:6}
  .employee-action-grid:not(.compact):has(>.employee-action:nth-child(7)){--atalhos-d:7}
  .employee-action-grid:not(.compact):has(>.employee-action:nth-child(6)) .employee-action small{display:none}
}

/* Pedidos do colaborador agrupados por tipo (grupos recolhiveis) */
.pedidos-grupos{display:grid;gap:10px;padding:0 var(--space-4,16px) var(--space-4,16px)}
.pedidos-grupo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl,12px);overflow:hidden}
.pedidos-grupo>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;min-height:58px;padding:12px 14px;background:color-mix(in srgb,var(--surface) 92%,var(--brand-soft) 8%)}
.pedidos-grupo>summary::-webkit-details-marker{display:none}
.pedidos-grupo>summary::marker{content:""}
.content .pedidos-grupo>summary::before{order:3;margin:0 2px 0 8px!important;color:var(--muted)!important}
.pedidos-grupo[open]>summary{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 82%,var(--brand-soft) 18%)}
.pedidos-grupo-titulo{display:inline-flex;align-items:center;gap:10px;min-width:0}
.pedidos-grupo-titulo svg{width:18px;height:18px;color:var(--brand);flex:0 0 auto}
.pedidos-grupo-contagem{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.pedidos-grupo>.table-wrap{margin:0;padding:0;overflow-x:auto}
.pedidos-grupo>.table-wrap table{margin:0}
@media (max-width:780px){.pedidos-grupos{padding:0 12px 12px}}
/* grupos de pedidos: titulo encostado a esquerda (junto a seta), contagem a direita */
.pedidos-grupo>summary{justify-content:flex-start!important;text-align:left!important}
.pedidos-grupo>summary .pedidos-grupo-titulo{justify-content:flex-start;text-align:left}
.pedidos-grupo>summary .pedidos-grupo-contagem{margin-left:auto}
@media (max-width:780px){
  .pedidos-grupo>summary{min-height:54px;padding:10px 12px;gap:9px}
  .pedidos-grupo-contagem .badge.warning{display:none}
  .pedidos-grupo>.table-wrap:has(>table.rt){padding:10px!important}
}

/* Menu de ecra inteiro (telemovel): no iOS em app instalada o 100dvh pode ser maior do que a area visivel e o botao Sair
   ficava cortado por baixo. A altura passa a vir de top:0/bottom:0 e o rodape fica sempre acima do indicador de inicio. */
@media (max-width:780px){
  .sidebar{height:auto!important;top:0!important;bottom:0!important;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px)!important}
  .sidebar .sidebar-footer{flex:0 0 auto!important;margin-top:auto;padding-top:10px}
  .sidebar .sidebar-logout{min-height:52px!important;margin-top:8px}
}

/* Botao de ações das linhas (menu de 3 pontos): botão fantasma moderno e menu plano, igual em toda a aplicação */
.row-menu>summary{width:36px;height:36px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:0;position:relative;transition:background .15s,color .15s,border-color .15s}
.row-menu>summary::before{content:none!important;display:none!important}
.row-menu>summary::after{content:"";display:block;width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E") center/contain no-repeat}
.row-menu>summary:hover,.row-menu[open]>summary{background:var(--surface-2);color:var(--text);border-color:var(--line)}
.row-menu>summary:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:2px}
.row-menu .row-menu-panel{min-width:200px;padding:6px;gap:2px;border-radius:14px;box-shadow:0 16px 40px #0f172a2e,0 2px 6px #0f172a14}
.row-menu:not(.acoes-adaptaveis) .row-menu-panel :is(button,.secondary-action,.danger-action,.primary-action){border:0;background:transparent;box-shadow:none;justify-content:flex-start;text-align:left;width:100%;min-height:38px;padding:8px 12px;border-radius:9px;font-weight:600;color:var(--text)}
.row-menu:not(.acoes-adaptaveis) .row-menu-panel :is(button,.secondary-action,.danger-action,.primary-action):hover{background:var(--surface-2)}
.row-menu:not(.acoes-adaptaveis) .row-menu-panel :is(.danger-action,.secondary-action.danger){color:var(--danger-text)}
.row-menu:not(.acoes-adaptaveis) .row-menu-panel :is(.danger-action,.secondary-action.danger):hover{background:color-mix(in srgb,var(--danger-text) 10%,transparent)}
@media (min-width:781px){
  .row-menu.acoes-adaptaveis .row-menu-panel :is(button,.secondary-action,.danger-action,.primary-action){border:0;background:transparent;box-shadow:none;min-height:38px;padding:8px 12px;border-radius:9px;font-weight:600;color:var(--text)}
  .row-menu.acoes-adaptaveis .row-menu-panel :is(button,.secondary-action,.danger-action,.primary-action):hover{background:var(--surface-2)}
  .row-menu.acoes-adaptaveis .row-menu-panel :is(.danger-action,.secondary-action.danger){color:var(--danger-text)}
}

/* Numero de pedidos por decidir no menu lateral (item Pedidos e titulo do grupo fechado) */
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#dc2626;color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center;flex:0 0 auto}
.nav-group-toggle .nav-badge{margin-left:auto;margin-right:8px}

/* Entrar com Microsoft (ecrã de entrada) */
.acesso-ou{display:flex;align-items:center;gap:12px;margin:14px 0 10px;color:var(--muted);font-size:13px}
.acesso-ou::before,.acesso-ou::after{content:"";flex:1;height:1px;background:var(--line)}
.acesso-botao.acesso-microsoft{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:none;font-weight:600}
.acesso-botao.acesso-microsoft:hover{background:var(--surface-2)}

/* Gestão IT > Contas de email: resumo, filtros, pesquisa e lista compacta */
.it-email-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px 18px 4px}
.it-email-toolbar .tabs{margin:0}
.it-email-search{flex:1 1 260px;max-width:380px;min-width:220px}
.it-email-n{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);font-size:.78em;font-weight:700;line-height:1.5}
.it-email-hint{padding:0 18px;margin:6px 0 8px}
.it-email-wrap td,.it-email-wrap th{padding-top:9px;padding-bottom:9px}
.it-email-wrap td small{display:block;margin-top:2px}
.it-email-wrap td:last-child{width:52px;text-align:right}
.it-email-mais{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px}
.it-email-busca{padding:4px 18px 0;margin:0}
.it-email-assoc{white-space:nowrap;padding:6px 12px;min-height:34px;font-size:.85rem}

/* Microsoft 365: janelas de resultado e separadores das Configurações IT */
.it-settings-tabs{flex-wrap:wrap;margin:0 0 16px;max-width:100%}
.ms-res{display:grid;gap:16px;min-width:min(520px,100%)}
.ms-res-topo{display:flex;gap:14px;align-items:center}
.ms-res-topo h3{margin:0;font-size:1.15rem}
.ms-res-topo p{margin:3px 0 0;color:var(--muted);font-size:.92rem}
.ms-res-icone{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}
.ms-res-icone.erro{background:color-mix(in srgb,#dc2626 14%,transparent);color:#dc2626}
.ms-res-icone svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ms-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.ms-res-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface-2)}
.ms-res-item strong{display:block;font-size:1.6rem;line-height:1.1}
.ms-res-item span{display:block;margin-top:4px;color:var(--muted);font-size:.82rem}
.ms-res-item.aviso strong{color:var(--warning-text,#8f4d00)}
.ms-res-item.perigo strong{color:var(--danger-text,#b32d23)}
.ms-res-nota{border-radius:12px;padding:12px 14px;background:color-mix(in srgb,#f59e0b 12%,transparent);font-size:.9rem;line-height:1.45}
.ms-detalhes{display:grid;gap:10px;margin-bottom:6px}
.ms-detalhes .detail{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:12px;align-items:baseline}
.ms-detalhes .detail>span{color:var(--muted);font-size:.9rem}
.ms-detalhes .detail>strong{font-weight:600;overflow-wrap:anywhere}
@media (max-width:640px){.ms-detalhes .detail{grid-template-columns:1fr;gap:2px}}
.ms-bloco{margin-bottom:16px}
.ms-bloco-corpo{padding:4px 18px 18px}
.ms-bloco .attendance-department-meta{display:flex;gap:8px;align-items:center}