:root {
    --navy: #0041c4;
    --blue: #2b6cb0;
    --cyan: #00d4ff;
    --bg: #f0f4f8;
    --card-bg: #ffffff;
    --border: #e2e8f0;
    --text: #2d3748;
    --muted: #718096;
    --blue-tint: #ebf8ff;
    --blue-tint-border: #bee3f8;
    --error: #c53030;
    --error-bg: #fff5f5;
    --error-border: #feb2b2;
    --success: #2f855a;
    --success-bg: #f0fff4;
    --success-border: #9ae6b4;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* Páginas com topbar+sidebar (fora de split/embutido): a página em si nunca faz scroll —
   só o painel de conteúdo (.content) faz, para o topbar/sidebar ficarem sempre visíveis
   mesmo com conteúdo alto (ex: árvores/tabelas grandes). Em modo embutido (dentro de um
   iframe de split) isto não se aplica: esse documento faz o próprio scroll normal, que já
   fica contido dentro do iframe/painel — por isso o bug só aparecia fora de split. */
body.corpo-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 20px;
}

h2 {
    font-size: .85rem;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 28px 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--blue-tint);
}

a { color: var(--blue); }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    padding: 10px 24px;
    flex: none;
}

.brand-logo {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    height: 32px;
}

/* SVG (não borders rotacionados) para um traço fiel ao ">" real, sem inflação de bounding
   box por rotação. Em repouso fica por cima do "t" de "accenture" (~62% da palavra) —
   posição autêntica do logótipo real (ver Incoming/png-clipart-accenture-new-logo-...png). */
.brand-chevron {
    position: absolute;
    top: -2px;
    left: 62%;
    margin-left: -7px;
    color: #a100ff;
    display: block;
}

.brand-texto {
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    letter-spacing: .01em;
}

/* Enquanto há processamento em curso (mesmo gatilho do olho do HAL, ver hal-indicator.js),
   o ">" sai da posição de repouso e percorre a palavra "accenture" inteira da esquerda para
   a direita, na mesma altura vertical, voltando ao início assim que chega ao fim (loop
   natural da animação CSS) — só volta à posição autêntica de repouso quando o processamento
   termina. */
.brand-logo--processando .brand-chevron {
    animation: brand-chevron-andar 1.3s linear infinite;
}

@keyframes brand-chevron-andar {
    0% { left: 0%; }
    100% { left: 100%; }
}


.client-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-logo {
    height: 32px;
    max-width: 120px;
    object-fit: contain;
}

.deal-name {
    font-weight: 600;
    color: #fff;
}

.deal-switch select {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.deal-switch select option {
    color: var(--text);
}

.layout {
    display: flex;
    min-height: calc(100vh - 54px);
    flex: 1;
    min-height: 0;
}

.sidebar {
    width: 240px;
    flex: none;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    padding: 0;
    display: flex;
    flex-direction: column;
    /* O nav inteiro (categorias+rodapé) é UMA única zona de scroll — nunca dividido em
       duas, senão o rodapé (sem min-height:0, não encolhe abaixo do seu conteúdo) rouba
       espaço a .sidebar-categorias sem limite, esmagando-a/cortando-a visualmente mesmo
       que o JS feche categorias (o JS só media o overflow de .sidebar-categorias, que
       nunca refletia o problema real — o rodapé a crescer demasiado). */
    overflow-y: auto;
}

.sidebar-categorias {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 10px;
}

.sidebar-rodape {
    flex: none;
    border-top: 1px solid var(--border);
    margin-top: auto;
    padding: 12px 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Categories/submenus collapse via <details>/<summary>, closed by default —
   only the clicked one expands. Rounded card look, not square full-bleed bars. */
.menu-categoria {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.menu-categoria-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 12px 16px;
    background: var(--navy);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    list-style: none;
}

summary.menu-categoria-titulo::-webkit-details-marker {
    display: none;
}

summary.menu-categoria-titulo::after {
    content: '▸';
    font-size: .65rem;
    transition: transform .15s;
}

.menu-categoria[open] > summary.menu-categoria-titulo::after {
    transform: rotate(90deg);
}

.menu-categoria-body {
    padding: 4px 0 8px;
}

.menu-submenu {
    margin: 6px 8px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--blue-tint-border);
    background: #fff;
}

.menu-submenu-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 8px 14px;
    background: var(--blue-tint);
    color: var(--navy);
    font-size: .7rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

summary.menu-submenu-titulo::-webkit-details-marker {
    display: none;
}

summary.menu-submenu-titulo::after {
    content: '▸';
    font-size: .6rem;
    transition: transform .15s;
}

.menu-submenu[open] > summary.menu-submenu-titulo::after {
    transform: rotate(90deg);
}

.menu-submenu ul {
    margin: 0;
}

/* Submenu aninhado dentro de outro submenu (ex: "Estrutura"/"Recursos" dentro de
   "Tabelas Gerais") — indenta mais para distinguir visualmente do nível pai. */
.menu-submenu .menu-submenu {
    margin: 6px 10px 6px 16px;
}

.menu-categoria ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-categoria li a {
    display: block;
    padding: 9px 16px 9px 24px;
    color: var(--text);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.menu-item {
    display: flex;
    align-items: stretch;
}

.menu-item a {
    flex: 1;
    min-width: 0;
}

.menu-item-split {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.menu-item-split:hover {
    background: var(--blue-tint);
    color: var(--navy);
}

.menu-categoria li a:hover {
    background: var(--blue-tint);
    border-left-color: var(--blue);
    color: var(--navy);
}

.menu-categoria li a.ativo {
    background: var(--blue-tint);
    border-left-color: var(--navy);
    color: var(--navy);
    font-weight: 700;
}

/* Linha final da sidebar: versão da app (esquerda) + olho do HAL9000 (direita) */
.sidebar-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 0;
}

.app-version {
    font-size: .68rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .03em;
}

.hal-eye {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    /* Lente completamente preta (desligado) + aro cromado — o "opacity" antigo é que dava
       o aspeto acinzentado/lavado, por isso o estado parado agora é preto sólido, sem opacity. */
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 50% 50%, #050505 0%, #000 68%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .45),
        inset 0 0 0 2px rgba(0, 0, 0, .6),
        0 0 0 2px #8a8a90,
        0 0 0 3px rgba(0, 0, 0, .3);
    transition: background .4s ease, box-shadow .4s ease;
}

.hal-eye--ativo {
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 50% 55%, #fff6d8 0%, #ffcf5c 5%, #ff8a1f 13%, #ff3b1f 27%, #a50f00 50%, #300 70%, #000 100%);
    /* Sem sombra "para fora" (nem transform:scale) — no HAL9000 real o pulsar é só a zona
       preta/vermelha a brilhar mais forte por dentro, nunca um halo a sair do aro cromado. */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .45),
        inset 0 0 0 2px rgba(0, 0, 0, .6),
        0 0 0 2px #8a8a90;
    animation: hal-eye-pulsar 1.1s ease-in-out infinite;
}

@keyframes hal-eye-pulsar {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, .45),
            inset 0 0 0 2px rgba(0, 0, 0, .6),
            0 0 0 2px #8a8a90,
            inset 0 0 3px 1px rgba(255, 50, 0, .35);
    }
    50% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, .45),
            inset 0 0 0 2px rgba(0, 0, 0, .6),
            0 0 0 2px #8a8a90,
            inset 0 0 6px 3px rgba(255, 70, 0, .85);
    }
}

/* Skeleton de loading (ex: dados do utilizador em home.html) */
.skeleton-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.skeleton-linha {
    height: 14px;
    margin: 10px 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--blue-tint) 25%, var(--border) 50%, var(--blue-tint) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulsar 1.2s ease-in-out infinite;
}

.skeleton-linha:nth-child(1) { width: 55%; }
.skeleton-linha:nth-child(2) { width: 40%; }
.skeleton-linha:nth-child(3) { width: 65%; }

@keyframes skeleton-pulsar {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.content {
    flex: 1;
    padding: 28px;
    transition: filter .15s ease;
}

/* Só liga depois do atraso anti-flicker do hal-indicator.js (não a cada pedido htmx curto) */
.content--processando {
    filter: blur(3px);
    pointer-events: none;
}

/* Só o painel de conteúdo faz scroll (ver nota em body.corpo-app acima) — não se aplica a
   .content--public/.content--embutido, que vivem noutro branch do body (sem .layout à volta). */
body.corpo-app .content {
    min-height: 0;
    overflow-y: auto;
}

.content--public {
    max-width: 420px;
    margin: 60px auto;
    padding: 32px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 10px 30px rgba(0, 65, 196, .12);
}

.content--public h1 {
    text-align: center;
}

.content--frame {
    padding: 0;
    display: flex;
}

.content--embutido {
    min-height: 100vh;
}

.modulo-iframe {
    flex: 1;
    width: 100%;
    border: none;
}

/* Ecrã dividido (/dividido, ver static/split-view.js) — dois painéis fixos a 50/50. */
.split-view {
    display: flex;
    width: 100%;
    height: 100%;
}

.split-pane-wrap {
    position: relative;
    flex: 1 1 50%;
    width: 50%;
    min-height: calc(100vh - 54px);
    display: flex;
}

.split-pane {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
}

.split-refresh {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--navy);
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    cursor: pointer;
}

.split-refresh:hover {
    background: var(--blue-tint);
}

.split-refresh:active {
    transform: rotate(60deg);
}

.split-divisor {
    flex: none;
    width: 1px;
    background: var(--border);
}

.split-popover {
    position: absolute;
    z-index: 50;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.split-popover-titulo {
    margin: 0 0 2px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
}

.split-popover button {
    background: none;
    color: var(--navy);
    border: 1px solid var(--blue-tint-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: none;
    text-align: left;
}

.split-popover button:hover {
    background: var(--blue-tint);
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
form p {
    margin: 0 0 14px;
}

/* Formulário em grelha de 2 colunas (ex.: "Novo Utilizador") — reduz a altura ocupada pelos
   campos, deixando mais espaço vertical visível para a lista abaixo sem scroll. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
}

.form-grid > p {
    margin: 0 0 12px;
}

/* Data Início/Data Fim lado a lado dentro da mesma célula da grelha (1 <p> = 1 item do grid).
   flex:0 0 auto (em vez de flex:1) — cada <label> fica só com a largura do seu conteúdo, senão
   esticavam a 50% da célula cada e o campo "Data Fim" ficava com um espaço vazio à esquerda. */
.form-grid p.campo-datas {
    display: flex;
    gap: 10px;
}

.form-grid p.campo-datas label {
    flex: 0 0 auto;
}

/* 2 colunas lado a lado dentro de um <form> (ex.: campos originais vs. "Restrições
   Adicionais" em Acessos por Hierarquia) — liberta espaço vertical para a lista abaixo do
   card. Empilha em 1 coluna em ecrãs estreitos. */
.form-colunas {
    display: flex;
    gap: 32px;
}

.form-coluna {
    flex: 1 1 0;
    min-width: 260px;
}

@media (max-width: 720px) {
    .form-colunas {
        flex-direction: column;
        gap: 0;
    }
}

/* 2 checkbox lado a lado numa única linha (ex.: "Incluir Descendentes"/"Incluir Ascendentes"
   em Acessos por Hierarquia) — cada <label> só ocupa a largura do seu próprio conteúdo. */
.campo-checkboxes-linha {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.campo-checkboxes-linha label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    color: inherit;
}

label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="file"] {
    width: 100%;
    max-width: 360px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .95rem;
    color: var(--text);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(43, 108, 176, .15);
}

select {
    width: 100%;
    max-width: 360px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .95rem;
    color: var(--text);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(43, 108, 176, .15);
}

/* Combobox pesquisável (ver static/combo-select.js) — melhora um <select class="combo-select"> */
.combo-select {
    position: relative;
    width: 100%;
    max-width: 360px;
}

.combo-select-input {
    width: 100%;
}

.combo-select-input--erro {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(197, 48, 48, .15);
}

.combo-select-lista {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.combo-select-opcao {
    padding: 8px 14px;
    font-size: .9rem;
    cursor: pointer;
}

.combo-select-opcao:hover,
.combo-select-opcao--ativa {
    background: var(--blue-tint);
    color: var(--navy);
}

button,
input[type="submit"] {
    appearance: none;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
    cursor: pointer;
    transition: filter .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(43, 108, 176, .25);
}

button:hover,
input[type="submit"]:hover {
    filter: brightness(1.08);
}

/* ── Cards (grouping sections like login/register/frameless module pages) ── */
.card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 4px 16px rgba(0, 0, 0, .05);
    margin-bottom: 20px;
}

/* Native <dialog> modal (ex.: "Inactivar" no ecrã Equipas) — mesmo visual do .card. */
dialog {
    background: var(--card-bg);
    border: none;
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 4px 16px rgba(0, 0, 0, .05);
    min-width: 320px;
}
dialog::backdrop {
    background: rgba(45, 55, 72, .45);
}

/* Groups a relation's title+form+list into one visible box (hierarquia_entidades.html) —
   without it, consecutive tables were impossible to tell apart. */
.bloco-relacao {
    border: 1.5px solid var(--blue-tint-border);
    border-radius: 14px;
    padding: 20px 20px 4px;
    margin-bottom: 28px;
    background: var(--blue-tint);
}

.bloco-relacao h2 {
    margin-top: 0;
}

/* ── Alerts ────────────────────────────────────────────────────────────── */
.alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: .88rem;
    margin-bottom: 16px;
}

.alert-error {
    color: var(--error);
    background: var(--error-bg);
    border: 1px solid var(--error-border);
}

.alert-success {
    color: var(--success);
    background: var(--success-bg);
    border: 1px solid var(--success-border);
}

/* ── Tables ────────────────────────────────────────────────────────────── */
table {
    border-collapse: collapse;
    width: 100%;
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}

/* Rounds the outer corners without "overflow: hidden" on the table (that clipped
   floating dropdowns — e.g. combo-select-lista — during inline row editing). */
thead tr:first-child th:first-child {
    border-top-left-radius: 10px;
}

thead tr:first-child th:last-child {
    border-top-right-radius: 10px;
}

tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

th, td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    background: var(--blue-tint);
    color: var(--navy);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: #f7fafc;
}

/* Column-header filters (thead tr.filtros) */
tr.filtros td {
    background: var(--card-bg);
    padding: 6px 10px;
}

tr.filtros input {
    width: 100%;
    max-width: none;
    padding: 5px 8px;
    font-size: .82rem;
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* Coluna "Ativo" (Sim/Não) de Gestão de Utilizadores — estreita de propósito, para sobrar
   largura suficiente à coluna de Ações (Editar/Desbloquear/Repor/Inactivar/Histórico) ficar
   sempre numa só linha em vez de quebrar (ver .acoes-col abaixo). */
.col-ativo {
    width: 64px;
    white-space: nowrap;
}

/* Row actions (Editar/Eliminar/Histórico) */
.acoes-col {
    white-space: nowrap;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-secondary,
.btn-danger {
    display: inline-block;
    background: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: none;
    text-decoration: none;
}

.btn-secondary {
    border: 1px solid var(--blue-tint-border);
    color: var(--blue);
}

.btn-secondary:hover {
    background: var(--blue-tint);
}

.btn-danger {
    border: 1px solid var(--error-border);
    color: var(--error);
}

.btn-danger:hover {
    background: var(--error-bg);
}

.btn-disabled,
.btn-disabled:hover {
    opacity: .5;
    cursor: not-allowed;
    background: none;
    pointer-events: none;
}

/* Inline row edit form (replaces the <tr> via htmx) */
.linha-editar-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 0;
}

.linha-editar-form label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    font-size: .72rem;
}

.linha-editar-form input[type="text"],
.linha-editar-form input[type="email"] {
    max-width: 220px;
    padding: 6px 10px;
}

.linha-editar-form .campo-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
}

.linha-editar-form .alert {
    flex-basis: 100%;
    margin: 0;
}

/* Histórico */
.historico-item {
    margin-bottom: 16px;
}

.historico-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 10px;
}

.historico-hint {
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: 8px;
}

.badge-operacao {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.badge-operacao--update {
    background: var(--blue-tint);
    color: var(--navy);
}

.badge-operacao--delete {
    background: var(--error-bg);
    color: var(--error);
}

/* ── Árvore de seleção hierárquica (Alocação de Recursos) ─────────────────── */
.tree-picker {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    max-height: 320px;
    overflow-y: auto;
}

.tree-picker ul.tree-nivel {
    list-style: none;
    margin: 0;
    padding-left: 18px;
}

.tree-picker > ul.tree-nivel {
    padding-left: 0;
}

.tree-picker details {
    margin: 2px 0;
}

.tree-picker summary {
    cursor: pointer;
    list-style: none;
}

.tree-picker summary::-webkit-details-marker {
    display: none;
}

.tree-picker summary::before {
    content: '▸';
    display: inline-block;
    width: 1.3em;
    font-size: 1.15rem;
    color: var(--muted);
}

.tree-picker details[open] > summary::before {
    content: '▾';
}

.tree-node {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: .88rem;
    cursor: pointer;
}

.tree-node:hover {
    background: var(--blue-tint);
    color: var(--navy);
}

.tree-node--selecionado {
    background: var(--navy);
    color: #fff;
    font-weight: 600;
}

.tree-node--folha {
    padding-left: 1.9em;
}

.tree-selecionado {
    font-size: .85rem;
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 10px;
}

/* ── Barra de alocação disponível (vermelho -> verde) ─────────────────────── */
.disponibilidade-wrap {
    margin-bottom: 16px;
}

.disponibilidade-wrap label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}

.disponibilidade-bar {
    height: 14px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
    margin-bottom: 4px;
}

.disponibilidade-bar-fill {
    height: 100%;
    background: var(--success);
    transition: width .3s ease, background .3s ease;
}

#disponibilidade-texto {
    font-size: .78rem;
    color: var(--muted);
}

#percentagem-slider {
    width: 100%;
    max-width: 320px;
    vertical-align: middle;
}

#percentagem-numero {
    width: 80px;
    margin-left: 10px;
    vertical-align: middle;
    text-align: right;
}

/* ── HP01: galeria de Prompts/Robots Custom (categoria "GenAI") ──────────── */
.hp01-intro {
    color: var(--muted);
    margin-top: -6px;
    margin-bottom: 20px;
}

.hp01-grid {
    display: grid;
    /* Todos os "quadrados" com o mesmo tamanho: colunas de largura flexível mas
       sempre forçadas a 1:1 (aspect-ratio), incl. o quadrado "+" vazio. */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.hp01-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    /* Fundo é sempre o MESMO gradiente calculado para a janela de detalhe (cores dominantes da
       imagem, ver router.py:_cores_dominantes), definido inline via style="background:..." —
       a imagem real é mostrada como thumbnail própria (.hp01-tile-imagem), não como cover de
       fundo do quadrado inteiro. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 4px 16px rgba(0, 0, 0, .08);
    transition: transform .15s ease, box-shadow .15s ease;
}

.hp01-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
}

/* Thumbnail própria (mesmo endpoint /imagem-miniatura da janela de detalhe), sobreposta ao
   fundo em gradiente do quadrado — nunca cobre a faixa inferior do overlay/texto. */
.hp01-tile-imagem {
    position: absolute;
    top: 14px;
    left: 14px;
    /* width/height explícitos (não "inset" com um lado auto) — object-fit:cover só funciona
       se a caixa do <img> tiver um tamanho próprio definido, não o tamanho intrínseco da imagem. */
    width: calc(100% - 28px);
    height: calc(58% - 14px);
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

/* Faixa inferior em degradé escuro sobre a imagem — garante que o texto/botões
   ficam legíveis independentemente da imagem de fundo carregada pelo utilizador. */
.hp01-tile-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 14px 14px 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 8, 30, .55) 45%, rgba(0, 8, 30, .88) 100%);
    color: #fff;
}

.hp01-tile-codigo {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: 2px 9px;
    margin-bottom: 6px;
}

/* Só renderizado para quem tem permissão de aprovação (ver router.py:_pode_aprovar) — um
   Robot pendente nunca é sequer listado para quem não tem essa permissão. */
.hp01-tile-badge-pendente {
    margin-left: 6px;
    background: rgba(197, 48, 48, .45);
    border-color: rgba(254, 178, 178, .6);
}

.hp01-tile-nome {
    margin: 0 0 4px;
    font-size: 1rem;
    line-height: 1.25;
}

.hp01-tile-descricao {
    margin: 0 0 10px;
    font-size: .78rem;
    color: rgba(255, 255, 255, .85);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hp01-tile-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hp01-tile-btn {
    display: inline-block;
    font-size: .74rem;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 11px;
    border-radius: 7px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .4);
    backdrop-filter: blur(2px);
    box-shadow: none;
    cursor: pointer;
    transition: background .15s;
}

.hp01-tile-btn:hover {
    background: rgba(255, 255, 255, .3);
}

.hp01-tile-btn-primario {
    background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
    border-color: transparent;
}

.hp01-tile-btn-primario:hover {
    filter: brightness(1.1);
    background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
}

.hp01-tile-btn-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.hp01-tile-btn-perigo {
    background: rgba(197, 48, 48, .35);
    border-color: rgba(254, 178, 178, .55);
}

.hp01-tile-btn-perigo:hover {
    background: rgba(197, 48, 48, .55);
}

/* Nome de quem criou o Robot/Prompt — canto inferior direito do quadrado. */
.hp01-tile-criado-por {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: .68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .75);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.hp01-tile-clicavel {
    cursor: pointer;
}

/* Janela de detalhe (read-only) aberta ao clicar num quadrado fora dos botões — fundo em
   gradiente com as 2 cores dominantes do próprio JPG (calculadas uma vez na criação, ver
   router.py:_cores_dominantes), texto sempre claro/sobre painéis semi-transparentes escuros
   (independente de as cores dominantes serem claras ou escuras), estilo "slide". */
.hp01-detalhe {
    max-width: 480px;
    width: 90vw;
    padding: 22px 24px 20px;
    color: #fff;
    position: relative;
}

.hp01-detalhe-fechar {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, .3);
    border: none;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.hp01-detalhe-cabecalho {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

/* Nunca mais de 20% da largura da janela — miniatura já pré-gerada na criação (ver
   router.py:_gerar_miniatura), nunca redimensionada a pedido. */
.hp01-detalhe-imagem {
    width: 20%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
    flex-shrink: 0;
}

.hp01-detalhe-info {
    flex: 1;
    min-width: 0;
    background: rgba(0, 8, 30, .4);
    border-radius: 10px;
    padding: 10px 14px;
}

.hp01-detalhe-codigo {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: 2px 9px;
    margin-bottom: 4px;
}

.hp01-detalhe-nome {
    margin: 0 0 4px;
    font-size: 1.25rem;
}

.hp01-detalhe-descricao {
    margin: 0 0 8px;
    font-size: .88rem;
    white-space: pre-line;
}

.hp01-detalhe-meta {
    margin: 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .8);
}

.hp01-detalhe-resumo {
    background: rgba(0, 8, 30, .4);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 12px;
}

.hp01-detalhe-resumo h3 {
    margin: 0 0 6px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .75);
}

.hp01-detalhe-resumo p {
    margin: 0;
    white-space: pre-line;
}

.hp01-detalhe-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* O fundo da janela de detalhe é um gradiente ARBITRÁRIO (cores dominantes da própria imagem
   do Robot, calculadas em router.py:_cores_dominantes — pode ser bem claro/branco), ao
   contrário do "quadrado" da galeria (aí o fundo é sempre a faixa escura do overlay). Sem esta
   sobreposição os mesmos botões translúcidos ficavam ilegíveis sobre um gradiente claro. */
.hp01-detalhe-acoes .hp01-tile-btn:not(.hp01-tile-btn-primario) {
    background: rgba(0, 8, 30, .55);
    border-color: rgba(255, 255, 255, .55);
}

.hp01-detalhe-acoes .hp01-tile-btn:not(.hp01-tile-btn-primario):hover {
    background: rgba(0, 8, 30, .75);
}

.hp01-detalhe-acoes .hp01-tile-btn-perigo {
    background: rgba(155, 28, 28, .75);
    border-color: rgba(254, 178, 178, .7);
}

.hp01-detalhe-acoes .hp01-tile-btn-perigo:hover {
    background: rgba(155, 28, 28, .92);
}

/* Pré-visualização da imagem por omissão junto ao botão "Usar Default" (formulário de submissão). */
.hp01-imagem-default-preview {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    vertical-align: middle;
    margin-left: 8px;
    border: 1px solid var(--border);
}

.hp01-detalhe-form-eliminar {
    margin: 0;
}

/* Último "quadrado": sempre vazio, com "+" ao centro — convite a submeter um novo Robot/Prompt. */
.hp01-tile-novo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 2px dashed var(--blue-tint-border);
    text-decoration: none;
    color: var(--blue);
}

.hp01-tile-novo:hover {
    background: var(--blue-tint);
    border-color: var(--blue);
}

.hp01-tile-novo-simbolo {
    font-size: 2.6rem;
    font-weight: 300;
    line-height: 1;
}

/* ── Organigrama (categoria "Gestão Utilizadores") ────────────────────────
   Árvore de nós ligados (estilo n8n/Node-RED), Client Area no topo até Equipa em baixo,
   usando o truque CSS clássico de "organizational chart": cada <li> desenha as suas próprias
   linhas horizontal (::before/::after) e vertical (para o pai, via <ul>::before), sem JS. */
.organigrama-scroll {
    overflow-x: auto;
    padding-bottom: 12px;
}

ul.organigrama,
.organigrama ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding-top: 24px;
    position: relative;
    width: fit-content;
}

ul.organigrama {
    padding-top: 0;
    min-width: 100%;
}

.organigrama li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 14px 0;
}

.organigrama li::before,
.organigrama li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: 24px;
    border-top: 2px solid var(--border);
}

.organigrama li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid var(--border);
}

.organigrama li:only-child::before,
.organigrama li:only-child::after {
    display: none;
}

.organigrama li:first-child::before,
.organigrama li:last-child::after {
    border: 0 none;
}

.organigrama li:last-child::before {
    border-right: 2px solid var(--border);
    border-radius: 0 6px 0 0;
}

.organigrama li:first-child::after {
    border-radius: 6px 0 0 0;
}

.organigrama > li {
    padding-top: 0;
}

.organigrama > li::before,
.organigrama > li::after {
    display: none;
}

.organigrama li > ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 24px;
    border-left: 2px solid var(--border);
}

.organigrama-node {
    display: inline-block;
    min-width: 190px;
    max-width: 240px;
    text-align: left;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 4px solid var(--blue);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.organigrama-node--client_area { border-top-color: var(--navy); }
.organigrama-node--client { border-top-color: var(--blue); }
.organigrama-node--deal { border-top-color: #00a3c4; }
.organigrama-node--area { border-top-color: #38a169; }
.organigrama-node--team { border-top-color: #805ad5; }

.organigrama-node-nivel {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.organigrama-node-titulo {
    font-size: .86rem;
    font-weight: 600;
    color: var(--navy);
    margin: 2px 0 6px;
}

.organigrama-recursos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.organigrama-recurso-chip {
    background: var(--blue-tint);
    color: var(--navy);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.organigrama-sem-recursos {
    font-size: .7rem;
    font-style: italic;
    color: var(--muted);
}