/* =====================================================================
   Hema dev3 — folha de estilos única (CSS artesanal, sem frameworks)
   =====================================================================
   PALETA PROVISÓRIA — todas as cores, sombras e fontes vivem SÓ nos
   quatro blocos de tokens abaixo (:root claro, @media dark e os
   overrides [data-theme]). Trocar a paleta = editar apenas esses
   blocos; o resto do ficheiro referencia var(--token) e nunca
   conhece valores de cor.
   ===================================================================== */

/* ============ TOKENS (bloco único de troca de paleta) ============ */
:root{
  --bg:#F6F3F1; --surface:#FFFFFF; --surface2:#FBF9F7; --sunken:#F1EDEA;
  --ink:#221B1D; --ink2:#5D5254; --ink3:#93868A;
  --line:#E7DFDD; --line2:#EFE9E7;
  --brand:#B3132F; --brand-hover:#9C1029; --on-brand:#FFF8F8;
  --brand-soft:#F9E9EC; --brand-soft-ink:#8F1027;
  --ref:#9A8D90;
  --good:#1B7A4B; --good-soft:#E4F2EA;
  --warn:#8F6209; --warn-soft:#F8EED6;
  --neutral-soft:#EFEAE8;
  --shadow-1:0 1px 2px rgba(34,27,29,.05),0 2px 10px rgba(34,27,29,.05);
  --shadow-2:0 4px 12px rgba(34,27,29,.08),0 16px 48px rgba(34,27,29,.14);
  --overlay:rgba(20,12,14,.45);
  --radius:10px; --radius-s:7px;
  /* altura única de todos os controlos de formulário (inputs, selects, botões) */
  --h-ctrl:34px; --h-ctrl-sm:28px;
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Iowan Old Style","Palatino Nova",Palatino,"Book Antiqua",Georgia,serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#161113; --surface:#1E181A; --surface2:#241D1F; --sunken:#120E10;
    --ink:#F1EAE8; --ink2:#BCAFB2; --ink3:#8A7C80;
    --line:#372D30; --line2:#2B2326;
    --brand:#E85D75; --brand-hover:#F07289; --on-brand:#2B0E15;
    --brand-soft:#3B2026; --brand-soft-ink:#F3A6B3;
    --ref:#786770;
    --good:#5CBA8C; --good-soft:#1E3229;
    --warn:#D9A54E; --warn-soft:#393016;
    --neutral-soft:#2E2629;
    --shadow-1:0 1px 2px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.25);
    --shadow-2:0 4px 12px rgba(0,0,0,.4),0 16px 48px rgba(0,0,0,.5);
    --overlay:rgba(0,0,0,.55);
  }
}
:root[data-theme="light"]{
  --bg:#F6F3F1; --surface:#FFFFFF; --surface2:#FBF9F7; --sunken:#F1EDEA;
  --ink:#221B1D; --ink2:#5D5254; --ink3:#93868A;
  --line:#E7DFDD; --line2:#EFE9E7;
  --brand:#B3132F; --brand-hover:#9C1029; --on-brand:#FFF8F8;
  --brand-soft:#F9E9EC; --brand-soft-ink:#8F1027;
  --ref:#9A8D90;
  --good:#1B7A4B; --good-soft:#E4F2EA;
  --warn:#8F6209; --warn-soft:#F8EED6;
  --neutral-soft:#EFEAE8;
  --shadow-1:0 1px 2px rgba(34,27,29,.05),0 2px 10px rgba(34,27,29,.05);
  --shadow-2:0 4px 12px rgba(34,27,29,.08),0 16px 48px rgba(34,27,29,.14);
  --overlay:rgba(20,12,14,.45);
}
:root[data-theme="dark"]{
  --bg:#161113; --surface:#1E181A; --surface2:#241D1F; --sunken:#120E10;
  --ink:#F1EAE8; --ink2:#BCAFB2; --ink3:#8A7C80;
  --line:#372D30; --line2:#2B2326;
  --brand:#E85D75; --brand-hover:#F07289; --on-brand:#2B0E15;
  --brand-soft:#3B2026; --brand-soft-ink:#F3A6B3;
  --ref:#786770;
  --good:#5CBA8C; --good-soft:#1E3229;
  --warn:#D9A54E; --warn-soft:#393016;
  --neutral-soft:#2E2629;
  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.25);
  --shadow-2:0 4px 12px rgba(0,0,0,.4),0 16px 48px rgba(0,0,0,.5);
  --overlay:rgba(0,0,0,.55);
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;background:var(--bg);}
body{font-family:var(--font-ui);font-size:13px;color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;}
img{max-width:100%;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;}
::placeholder{color:var(--ink3);}
input[type="checkbox"]{accent-color:var(--brand);width:14px;height:14px;}

/* o logótipo é escuro sobre transparente: inverter no tema escuro */
.logo-img{filter:none;}
@media (prefers-color-scheme: dark){.logo-img{filter:invert(1) hue-rotate(180deg);}}
:root[data-theme="light"] .logo-img{filter:none;}
:root[data-theme="dark"] .logo-img{filter:invert(1) hue-rotate(180deg);}

/* ============ SHELL (sidebar + main) ============ */
.shell{display:flex;min-height:100vh;background:var(--sunken);}

.side{width:232px;flex:none;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:40;}
.brand-row{display:flex;align-items:center;gap:9px;padding:18px 18px 12px;}
.brand-row .logo-img{height:24px;width:auto;display:block;}

.inst-box{position:relative;margin:6px 12px 10px;}
.inst-btn{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface2);text-align:left;}
.inst-avatar{width:30px;height:30px;flex:none;border-radius:8px;background:var(--brand-soft);color:var(--brand-soft-ink);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em;text-transform:uppercase;}
.inst-meta{flex:1;min-width:0;display:block;}
.inst-meta .k{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);line-height:1.2;}
.inst-meta .v{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}

/* Seletor de instituição (só contas com acesso global) */
button.inst-btn{cursor:pointer;}
button.inst-btn:hover{border-color:var(--line2);}
.inst-box .chev{margin-left:auto;color:var(--ink3);flex:none;}
.inst-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);max-height:290px;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);box-shadow:var(--shadow-2);padding:5px;display:none;z-index:50;}
.inst-box.open .inst-menu{display:block;}
.inst-menu button{width:100%;display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--ink2);text-align:left;}
.inst-menu button:hover{background:var(--sunken);color:var(--ink);}
.inst-menu button.atual{background:var(--brand-soft);color:var(--brand-soft-ink);font-weight:600;}
.inst-menu .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inst-avatar.sm{width:22px;height:22px;border-radius:6px;font-size:10px;}

nav.nav{flex:1;overflow-y:auto;padding:4px 12px 12px;}
.nav-label{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);padding:16px 8px 6px;}
.nav-item{width:100%;display:flex;align-items:center;gap:10px;padding:7.5px 9px;border-radius:7px;color:var(--ink2);font-weight:500;font-size:13px;margin-bottom:1px;text-align:left;text-decoration:none;}
.nav-item svg{flex:none;opacity:.75;}
.nav-item:hover{background:var(--sunken);color:var(--ink);}
.nav-item.active{background:var(--brand-soft);color:var(--brand-soft-ink);font-weight:600;}
.nav-item.active svg{opacity:1;color:var(--brand);}

.side-user{position:relative;border-top:1px solid var(--line);padding:10px 12px;}
.side-user-btn{width:100%;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;text-align:left;}
.side-user-btn:hover{background:var(--sunken);}
.u-avatar{width:30px;height:30px;flex:none;border-radius:50%;background:var(--neutral-soft);color:var(--ink2);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.side-user-meta{flex:1;min-width:0;}
.side-user .n{display:block;font-size:12.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side-user .r{display:block;font-size:11px;color:var(--ink3);line-height:1.25;font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side-user .chev{margin-left:auto;color:var(--ink3);flex:none;}
.user-menu{position:absolute;left:12px;right:12px;bottom:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);box-shadow:var(--shadow-2);padding:5px;display:none;z-index:50;}
.side-user.open .user-menu{display:block;}
.user-menu button,.user-menu a{width:100%;display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--ink2);text-decoration:none;text-align:left;}
.user-menu button:hover,.user-menu a:hover{background:var(--sunken);color:var(--ink);}

/* ============ TOPBAR / CONTENT ============ */
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{position:sticky;top:0;z-index:30;height:58px;flex:none;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 22px;}
.topbar .pg{font-size:14.5px;font-weight:650;}
.topbar .crumb{color:var(--ink3);font-size:12px;margin-left:2px;}
.top-search-wrap{position:relative;margin-left:auto;}
.top-search{display:flex;align-items:center;gap:8px;min-height:var(--h-ctrl);background:var(--sunken);border:1px solid var(--line2);border-radius:99px;padding:6px 14px;width:250px;color:var(--ink3);}
.top-search:focus-within{border-color:var(--line);background:var(--surface);}
.top-search input{border:none;background:none;outline:none;font:inherit;font-size:12.5px;color:var(--ink);width:100%;}
.top-search input::-webkit-search-cancel-button{display:none;}
.top-search-kbd{flex:none;font:inherit;font-size:10.5px;color:var(--ink3);border:1px solid var(--line);border-radius:5px;padding:1px 5px;white-space:nowrap;}
.top-search:focus-within .top-search-kbd{display:none;}

/* --- dropdown de resultados da pesquisa global --- */
.psq-drop{position:absolute;top:calc(100% + 6px);right:0;width:360px;max-height:60vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);box-shadow:var(--shadow-2);padding:5px;z-index:50;}
.psq-drop[hidden]{display:none;}
.psq-grupo{padding:7px 9px 3px;font-size:10.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);}
.psq-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;text-decoration:none;color:var(--ink);}
.psq-item.on,.psq-item:hover{background:var(--sunken);}
.psq-txt{min-width:0;display:flex;flex-direction:column;gap:1px;}
.psq-t{font-size:12.5px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.psq-d{font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.psq-badge{margin-left:auto;flex:none;font-size:10.5px;font-weight:550;color:var(--brand-soft-ink);background:var(--brand-soft);border-radius:99px;padding:2px 7px;}
.psq-mais{font-size:11.5px;font-weight:550;color:var(--ink2);}
.psq-vazio{padding:14px 10px;font-size:12px;color:var(--ink3);text-align:center;}

/* inline-flex (não flex): dentro de uma célula, display:flex tornava-o uma caixa
   de bloco — vários botões empilhavam-se na vertical e a linha crescia. */
.icon-btn{position:relative;padding:8px;border-radius:8px;color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;}
/* na topbar convive com a pesquisa: quadrado com a altura dos restantes controlos */
.topbar .icon-btn{min-width:var(--h-ctrl);min-height:var(--h-ctrl);}
.icon-btn:hover{background:var(--sunken);}
.menu-btn{display:none;}

.content{flex:1;padding:22px;}
.view{width:100%;}

/* Banner da sessão de suporte (impersonação, §3.6): fica acima da topbar e
   nunca se fecha — a marca tem de ser visível durante toda a sessão. */
.imp-banner{flex:none;display:flex;align-items:center;gap:14px;padding:8px 22px;background:var(--warn-soft);color:var(--warn);border-bottom:1px solid var(--line);font-size:12.5px;font-weight:500;}
.imp-banner .imp-txt{flex:1;}
.imp-sair{flex:none;border:1px solid currentColor;border-radius:99px;padding:3px 12px;font:inherit;font-size:12px;font-weight:600;color:inherit;}
.imp-sair:hover{background:rgba(0,0,0,.06);}

/* ============ FLASH ============ */
.flashes{margin:0 0 14px;}
.flash{display:flex;align-items:flex-start;gap:10px;border-radius:var(--radius-s);padding:10px 10px 10px 14px;font-size:12.5px;font-weight:500;margin-bottom:8px;transition:opacity .3s;}
.flash.saindo{opacity:0;}
.flash .flash-msg{flex:1;padding-top:1px;}
.flash-x{flex:none;padding:2px 7px;border-radius:6px;font-size:14px;line-height:1.2;color:inherit;opacity:.7;}
.flash-x:hover{opacity:1;background:rgba(0,0,0,.06);}
.flash-success{background:var(--good-soft);color:var(--good);}
.flash-error{background:var(--brand-soft);color:var(--brand-soft-ink);}
.flash-warning{background:var(--warn-soft);color:var(--warn);}
.flash-info{background:var(--neutral-soft);color:var(--ink2);}

/* ============ AUTH (ecrã centrado) ============ */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;}
.auth-logo{height:28px;width:auto;margin-bottom:22px;}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-1);padding:28px 28px 24px;}
.auth-title{font-family:var(--font-display);font-weight:500;font-size:24px;margin:0 0 4px;letter-spacing:-.01em;}
.auth-sub{font-size:13px;color:var(--ink2);margin:0 0 18px;}
.auth-lembrar{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--ink2);margin:2px 0 16px;}
.auth-foot{margin-top:16px;text-align:center;font-size:12.5px;color:var(--ink3);}
.auth-baixo{margin-top:20px;font-size:11.5px;color:var(--ink3);text-align:center;}
.btn-bloco{width:100%;justify-content:center;padding:10px 14px;font-size:13px;}

/* ============ CARTÕES ============ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line2);}
.card-h .t{font-size:13.5px;font-weight:650;}
.card-h .sub{font-size:11.5px;color:var(--ink3);}
.card-h .spacer{flex:1;}
.card-b{padding:16px 18px;}

/* ============ BOTÕES / LINKS ============ */
.btn{display:inline-flex;align-items:center;vertical-align:middle;gap:7px;min-height:var(--h-ctrl);font-size:12.5px;font-weight:600;border-radius:8px;padding:8px 14px;line-height:1;transition:background .15s,border-color .15s;white-space:nowrap;text-decoration:none;}
.btn-pri{background:var(--brand);color:var(--on-brand);}
.btn-pri:hover{background:var(--brand-hover);}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink2);}
.btn-ghost:hover{border-color:var(--ink3);color:var(--ink);}
.btn-soft{background:var(--brand-soft);color:var(--brand-soft-ink);}
.btn-sm{min-height:var(--h-ctrl-sm);padding:6px 10px;font-size:11.5px;border-radius:6px;}
.link{color:var(--brand);font-weight:600;font-size:12.5px;text-decoration:none;}
.link:hover{text-decoration:underline;}

/* ============ PILLS / BADGES GS ============ */
.pill{display:inline-flex;align-items:center;vertical-align:middle;gap:5px;font-size:11px;font-weight:600;border-radius:99px;padding:3px 9px;line-height:1.4;}
.pill i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block;}
.pill-good{background:var(--good-soft);color:var(--good);}
.pill-warn{background:var(--warn-soft);color:var(--warn);}
.pill-neutral{background:var(--neutral-soft);color:var(--ink2);}
.pill-brand{background:var(--brand-soft);color:var(--brand-soft-ink);}
.gs{display:inline-flex;align-items:center;justify-content:center;min-width:30px;padding:2px 7px;border-radius:6px;background:var(--brand-soft);color:var(--brand-soft-ink);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;}

/* ============ KPI ============ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:15px 16px 13px;display:flex;flex-direction:column;gap:6px;min-width:0;}
.kpi .k{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);}
.kpi .v{font-size:27px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;}
.kpi .v small{font-size:15px;font-weight:600;color:var(--ink2);}
.kpi .foot{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink3);min-height:20px;}
.progress{height:5px;border-radius:99px;background:var(--sunken);overflow:hidden;margin-top:4px;}
.progress i{display:block;height:100%;border-radius:99px;background:var(--brand);}

.grid-2{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start;}
.col-stack{display:grid;gap:14px;}

/* mini barras (grupos sanguíneos) */
.gsrow{display:grid;grid-template-columns:34px 1fr 34px;gap:10px;align-items:center;margin-bottom:8px;font-variant-numeric:tabular-nums;}
.gsrow .lbl{font-size:11.5px;font-weight:600;color:var(--ink2);}
.gsrow .val{font-size:11.5px;color:var(--ink3);text-align:right;}
.gsbar{height:8px;border-radius:99px;background:var(--sunken);overflow:hidden;}
.gsbar i{display:block;height:100%;background:var(--brand);border-radius:99px;}

/* bloco de data (próxima colheita) */
.date-block{width:52px;flex:none;border:1px solid var(--line);border-radius:9px;overflow:hidden;text-align:center;}
.date-block .m{display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;background:var(--brand);color:var(--on-brand);padding:3px 0;}
.date-block .d{display:block;font-size:20px;font-weight:650;padding:4px 0 5px;font-variant-numeric:tabular-nums;}
.kv{display:flex;justify-content:space-between;font-size:12px;padding:7px 0;border-top:1px solid var(--line2);}
.kv .k2{color:var(--ink3);}
.kv .v2{font-weight:600;font-variant-numeric:tabular-nums;}

/* ============ TABELAS ============ */
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.tbl th{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line2);vertical-align:middle;white-space:nowrap;font-variant-numeric:tabular-nums;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr{transition:background .1s;}
.tbl tbody tr:hover{background:var(--surface2);}
.tbl .num{text-align:right;}
.tbl .mono{font-family:var(--font-mono);font-size:11.5px;color:var(--ink2);}
.tbl-scroll{overflow-x:auto;}
.person{display:flex;align-items:center;gap:10px;}
/* REDE DE SEGURANÇA: uma classe de conteúdo aplicada directamente a uma célula
   (ex.: .person, que é flex) tirava-a do layout de tabela e desalinhava a linha
   inteira. Uma célula é sempre table-cell, venha de onde vier a classe. */
.tbl th,.tbl td{display:table-cell;}
.p-avatar{width:28px;height:28px;flex:none;border-radius:50%;background:var(--neutral-soft);color:var(--ink2);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.tbl td.person .p-avatar{display:inline-flex;vertical-align:middle;margin-right:10px;}
.person .pn{font-weight:600;line-height:1.3;}
.person .pe{font-size:11px;color:var(--ink3);line-height:1.3;}
.row-actions{display:flex;gap:2px;justify-content:flex-end;}
.row-actions .icon-btn{padding:5px;}
.tbl-foot{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:12px;color:var(--ink3);}
.pager{margin-left:auto;display:flex;gap:4px;}
.pager button,.pager a{min-width:26px;height:26px;border-radius:6px;font-size:11.5px;font-weight:600;color:var(--ink2);display:flex;align-items:center;justify-content:center;padding:0 6px;text-decoration:none;}
.pager button:hover,.pager a:hover{background:var(--sunken);}
.pager .cur{background:var(--brand);color:var(--on-brand);}

/* ============ FILTROS ============ */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line2);}
.f-search{display:flex;align-items:center;gap:8px;min-height:var(--h-ctrl);background:var(--sunken);border:1px solid var(--line2);border-radius:8px;padding:7px 12px;width:220px;color:var(--ink3);}
.f-search input{border:none;background:none;outline:none;font:inherit;font-size:12.5px;color:var(--ink);width:100%;}
.select{appearance:none;min-height:var(--h-ctrl);font:inherit;font-size:12.5px;font-weight:500;color:var(--ink2);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 30px 7px 12px;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23938689' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;}
.chk-inline{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--ink2);font-weight:500;}

/* cabeçalho das páginas de listagem */
.view-h{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.view-h h2{font-size:19px;font-weight:650;margin:0;letter-spacing:-.01em;}
.count-chip{font-size:11.5px;font-weight:600;color:var(--ink3);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-variant-numeric:tabular-nums;}
.view-h .acts{margin-left:auto;display:flex;gap:8px;}

/* ============ SEPARADORES (tabs) ============
   Componente único da plataforma: qualquer página com separadores usa
   .tabs > .tab (estado .ativo). Não criar variantes por módulo — foi assim
   que Utilizadores e Configurações divergiram. Embrulha em ecrãs estreitos. */
.tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line);}
.tab{appearance:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink3);background:none;border:none;
  padding:9px 13px;border-radius:8px 8px 0 0;position:relative;white-space:nowrap;}
.tab:hover{color:var(--ink);background:var(--sunken);}
.tab.ativo{color:var(--brand-soft-ink);}
.tab.ativo::after{content:"";position:absolute;left:9px;right:9px;bottom:-1px;height:2px;background:var(--brand);border-radius:2px;}

/* ============ EMPTY-STATE / PLACEHOLDER ============ */
.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 20px;}
.ph-ic{width:56px;height:56px;border-radius:16px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.placeholder h3{font-size:16px;font-weight:650;margin:0 0 6px;}
.placeholder p{font-size:13px;color:var(--ink2);max-width:46ch;margin:0 0 14px;}

/* ============ MODAL ============ */
.overlay{position:fixed;inset:0;z-index:60;background:var(--overlay);display:none;align-items:center;justify-content:center;padding:26px;}
.overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-2);width:660px;max-width:100%;max-height:100%;display:flex;flex-direction:column;border:1px solid var(--line);}
.modal-h{padding:18px 22px 14px;border-bottom:1px solid var(--line2);display:flex;align-items:flex-start;gap:10px;}
.modal-h .t{font-size:16px;font-weight:650;}
.modal-h .s{font-size:12px;color:var(--ink3);margin-top:2px;}
.modal-h .x{margin-left:auto;color:var(--ink3);padding:6px;border-radius:7px;}
.modal-h .x:hover{background:var(--sunken);color:var(--ink);}
.modal-b{overflow-y:auto;padding:16px 22px 18px;}
.modal-f{border-top:1px solid var(--line2);padding:14px 22px;display:flex;align-items:center;gap:10px;}
.modal-f .ctx{font-size:11.5px;color:var(--ink3);}
.modal-f .acts{margin-left:auto;display:flex;gap:8px;}

/* ============ FORMULÁRIOS ============ */
.fs-label{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--brand);margin:0 0 10px;display:flex;align-items:center;gap:10px;}
/* separador de secção só respira quando há conteúdo acima (o _method não conta) */
*+.fs-label{margin-top:18px;}
input[type="hidden"]+.fs-label{margin-top:0;}
.fs-label::after{content:"";flex:1;height:1px;background:var(--line2);}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;}
.fgrid .full{grid-column:1/-1;}
/* espaçamento vertical uniforme: campos soltos e grelhas usam a mesma medida;
   dentro da .fgrid é o gap que manda e o último bloco do form não sobra. */
.field,.fgrid{margin-bottom:14px;}
.fgrid>.field{margin-bottom:0;}
form>.field:last-child,form>.fgrid:last-child{margin-bottom:0;}
.field label{display:block;font-size:11.5px;font-weight:600;color:var(--ink2);margin-bottom:5px;}
.field label b{color:var(--brand);font-weight:700;}
.field input[type="text"],.field input[type="password"],.field input[type="date"],.field input[type="email"],.field input[type="number"],.field select,.field textarea{width:100%;font:inherit;font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 11px;}
.field input[type="text"],.field input[type="password"],.field input[type="date"],.field input[type="email"],.field input[type="number"],.field select{min-height:var(--h-ctrl);}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23938689' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px;cursor:pointer;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:transparent;}
.note{font-size:10.5px;color:var(--ink3);margin-top:4px;}

/* ============ COMPONENTES UX PARTILHADOS (Hema.*) ============ */

/* impede scroll do body enquanto há modal aberto */
body.sem-scroll{overflow:hidden;}

/* --- botão perigo + estado a-carregar (spinner no submit) --- */
.btn-perigo{background:var(--brand);color:var(--on-brand);}
.btn-perigo:hover{background:var(--brand-hover);}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn.a-carregar{position:relative;color:transparent !important;pointer-events:none;}
.btn.a-carregar::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;color:var(--on-brand);animation:hema-spin .6s linear infinite;}
.spinner{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand);animation:hema-spin .6s linear infinite;vertical-align:middle;}
@keyframes hema-spin{to{transform:rotate(360deg);}}

/* --- TOASTS (empilháveis, auto-dismiss) --- */
.toasts{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 36px));}
.toast{display:flex;align-items:flex-start;gap:10px;background:var(--surface);border:1px solid var(--line);border-left-width:3px;border-radius:var(--radius-s);box-shadow:var(--shadow-2);padding:11px 12px 11px 14px;font-size:12.5px;font-weight:500;color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;}
.toast.mostra{opacity:1;transform:none;}
.toast.sai{opacity:0;transform:translateY(8px);}
.toast .toast-msg{flex:1;padding-top:1px;}
.toast .toast-x{flex:none;padding:1px 6px;border-radius:6px;font-size:15px;line-height:1.1;color:var(--ink3);}
.toast .toast-x:hover{background:var(--sunken);color:var(--ink);}
.toast-sucesso{border-left-color:var(--good);}
.toast-sucesso .toast-msg{color:var(--good);}
.toast-erro{border-left-color:var(--brand);}
.toast-erro .toast-msg{color:var(--brand-soft-ink);}
.toast-aviso{border-left-color:var(--warn);}
.toast-aviso .toast-msg{color:var(--warn);}
.toast-info{border-left-color:var(--ink3);}

/* --- MODAL: loading + variante confirm --- */
.modal-carregar{display:flex;align-items:center;justify-content:center;padding:48px 0;}
.confirm-msg{font-size:13.5px;color:var(--ink);margin:2px 0 4px;}
.confirm-nome{font-size:13px;font-weight:650;color:var(--brand-soft-ink);background:var(--brand-soft);border-radius:var(--radius-s);padding:8px 11px;margin:6px 0 2px;word-break:break-word;}
.confirm-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}

/* --- FORM: erros de validação inline --- */
.field.tem-erro input,.field.tem-erro select,.field.tem-erro textarea{border-color:var(--brand);outline-color:var(--brand);}
.field-erro{font-size:10.5px;font-weight:600;color:var(--brand-soft-ink);margin-top:4px;}

/* --- rodapé de acções dentro de um form em modal (Hema.Modal + Hema.form) --- */
.modal-form-f{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line2);}

/* --- icon-btn com intenção destrutiva (ex.: eliminar numa linha de tabela) --- */
.icon-btn.perigo:hover{background:var(--brand-soft);color:var(--brand);}

/* --- DATATABLE (Hema.DataTable) --- */
.dt{position:relative;}
.dt .tbl th.ord{cursor:pointer;user-select:none;}
.dt .tbl th.ord:hover{color:var(--ink2);}
.dt .tbl th.ord::after{content:"";display:inline-block;width:0;height:0;margin-left:5px;vertical-align:middle;opacity:0;border-left:3px solid transparent;border-right:3px solid transparent;}
.dt .tbl th.ord-asc::after{opacity:.9;border-bottom:4px solid var(--brand);}
.dt .tbl th.ord-desc::after{opacity:.9;border-top:4px solid var(--brand);}
.dt-clicavel{cursor:pointer;}
.dt-empty{text-align:center;color:var(--ink3);padding:48px 16px;font-size:13px;}
/* na célula é preciso repetir com mais especificidade: `.dt-empty` sozinha
   perdia o padding para `.tbl td` (que tem mais especificidade) */
.tbl td.dt-empty{padding:48px 16px;}
.dt-a-carregar{opacity:.55;pointer-events:none;transition:opacity .12s;}
.dt-a-carregar::after{content:"";position:absolute;top:14px;right:14px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand);animation:hema-spin .6s linear infinite;}
.dt-contagem{font-variant-numeric:tabular-nums;}
.pager button:disabled{opacity:.4;cursor:not-allowed;background:none;}
.pager .pager-gap{min-width:18px;text-align:center;color:var(--ink3);align-self:center;}

/* ============ RESPONSIVO ============ */
@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .side{position:fixed;left:0;top:0;bottom:0;height:auto;transform:translateX(-100%);transition:transform .2s ease;}
  .shell.menu-aberto .side{transform:none;box-shadow:var(--shadow-2);}
  .backdrop{position:fixed;inset:0;z-index:35;background:var(--overlay);display:none;}
  .shell.menu-aberto .backdrop{display:block;}
  .menu-btn{display:flex;}
  .top-search{width:190px;}
  .top-search-kbd{display:none;}
  .topbar{gap:10px;padding:0 14px;}
}
@media (max-width:560px){
  .kpis{grid-template-columns:1fr;}
  .content{padding:14px;}
  .topbar .crumb{display:none;}
  .top-search{width:auto;padding:6px 10px;}
  .psq-drop{width:min(90vw,360px);}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}

/* chip do critério vindo de um link pré-filtrado (cartões do dashboard) */
.filtro-alerta{display:inline-flex;align-items:center;gap:6px;margin-left:auto;}
/* uma regra de autor com display ganha ao [hidden] do user-agent: sem isto o
   chip vazio apareceria em TODAS as listagens, mesmo sem alerta activo */
.filtro-alerta[hidden]{display:none;}