:root {

    --sidebar-width: 260px;
    --radius: 18px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: Roboto, Arial, sans-serif;
    background: var(--surface-page);
    color: var(--neutral-11);
}

/* CONTEÚDO */

.topbar h1 {
    margin: 6px 0 0;
    color: var(--institutional-11);
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* RESPONSIVO */

@media (max-width: 900px) {

    :root {
        --sidebar-width: 210px;
    }

}

/* =========================================================
   VIKI — Formulários
   ========================================================= */

@media (max-width: 800px) {

    .form-actions {
        grid-column: 1;
    }

}

/* =========================================================
   VIKI — Organização da ficha de utente
   ========================================================= */

.field-ativo {
    align-items: stretch;
}

.field-ativo label {
    align-self: flex-start;
}

.field-ativo input[type="checkbox"] {
    margin: 10px 0 9px;
}

@media (max-width: 800px) {

    .field-ativo {
        align-items: flex-start;
    }

}

/* =========================================================
   VIKI — Ficha de utente — Identificação
   ========================================================= */

.form-section {
    margin-bottom: 32px;
}

.form-section-title {
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-03);
    font-size: 18px;
    font-weight: 700;
    color: var(--institutional-11);
}

/* =========================================================
   VIKI — Lista de Utentes
   ========================================================= */

.list-panel {
    margin-top: 18px;
}

.list-status-filter select {
    min-width: 120px;
    padding: 8px 10px;
}

.list-total {
    margin-left: auto;
    color: var(--neutral-08);
}

/* Ajuste de larguras — Lista de Utentes */

/* =========================================================
   VIKI — Ficha de Utente / valores em modo leitura
   ========================================================= */

/* =========================================================
   VIKI — Abas da ficha do utente
   ========================================================= */

.detail-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--neutral-04);
}

.tab-panel {
    display: none;
    padding-top: 16px;
}

.tab-panel.active {
    display: block;
}

/* =========================================================
   VIKI — Contactos múltiplos
   ========================================================= */

/* =========================================================
   VIKI — Contactos múltiplos / modo edição
   ========================================================= */

.edit-tabs + #tab-identificacao{
    width: 100%;
}

/* =========================================================
   VIKI — Privacidade / histórico de consentimentos
   ========================================================= */

/* VITA — Agenda: regras transferidas para vita-components.css (Fase 2I). */

/* =========================================================
   VIKI — Consultas / Histórico Clínico
   ========================================================= */

@media (max-width: 900px) {

 .detail-tabs { overflow-x: auto; }   

}

/* =========================================================
   VIKI — experiência visual "nuvens / aguarela soft"
   2026-09-24
   ========================================================= */

/* =========================================================
   VIKI — afinação sidebar soft
   2026-09-24
   ========================================================= */

/* =========================================================
   VIKI — Anamnese estruturada
   2026-09-24
   ========================================================= */

/* =========================================================
   VIKI — Anamnese moderna 0.2
   2026-09-24
   ========================================================= */

/* =========================================================
   VIKI — Diagnóstico Holístico / árvore progressiva
   2026-09-24
   ========================================================= */

.holistic-observations textarea { width: 100%; min-height: 90px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--neutral-04); border-radius: 10px; background: var(--universal-white); color: var(--neutral-10); font: inherit; resize: vertical; }

/* =========================================================
   VIKI — Diagnóstico Holístico / organização por domínios 0.2
   2026-09-24
   ========================================================= */

/* =========================================================
   VIKI — Diagnóstico Holístico / controlos globais da árvore
   2026-09-24
   ========================================================= */

.holistic-tree-button { min-height: 34px; padding: 0 12px; border: 1px solid var(--neutral-04); border-radius: 9px; background: var(--universal-white); color: var(--institutional-11); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.holistic-tree-button:hover { background: var(--neutral-02); border-color: var(--neutral-05); }

/* VIKI — Diagnóstico Holístico / controlos alinhados */

.holistic-tree-button { min-height:32px; padding:0 11px; border:1px solid var(--neutral-04); border-radius:8px; background:var(--universal-white); color:var(--institutional-11); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.holistic-tree-button:hover { background:var(--neutral-02); }

/* =========================================================
   VIKI — Lista de Utentes / linguagem visual soft 0.2
   2026-09-24
   ========================================================= */
.list-panel-soft {
    margin-top: 18px;
}

.list-new-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.list-status-filter {
    display: grid;
    grid-template-columns: auto 132px;
    align-items: center;
    gap: 9px;
}

.list-status-filter label,
.utente-filter-field label {
    color: var(--neutral-09);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.list-status-filter select {
    min-width: 132px;
    height: 40px;
    padding: 7px 34px 7px 12px;
    border: 1px solid var(--neutral-04);
    border-radius: 10px;
    background: var(--neutral-01);
    color: var(--institutional-11);
    font: inherit;
    font-size: 13px;
    outline: none;
}

.utente-filter-field input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 8px 11px;
    border: 1px solid var(--neutral-04);
    border-radius: 10px;
    background: var(--universal-white);
    color: var(--neutral-10);
    font: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.utente-filter-field input::placeholder {
    color: var(--neutral-07);
}

.utente-filter-field input:focus,
.list-status-filter select:focus {
    border-color: var(--institutional-08);
    background: var(--universal-white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--institutional-06) 14%, transparent);
}

.list-total {
    margin-left: auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--neutral-02);
    color: var(--neutral-08);
    font-size: 12px;
}

@media (max-width: 720px) {

    .list-status-filter { grid-template-columns: 1fr; }
    .list-status-filter select { width: 100%; }

    .list-actions-top { align-items: stretch; flex-wrap: wrap; }
    .list-total { width: 100%; margin-left: 0; text-align: center; }

}

/* ============================================================
   VIKI — Login
   2026-09-25
   ============================================================ */
body.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background:
        radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--institutional-04) 30%, transparent), transparent 28%),
        linear-gradient(145deg, var(--surface-beige) 0%, var(--surface-page) 52%, var(--neutral-02) 100%);
}

.login-shell {
    width: min(100%, 430px);
}

.login-brand {
    margin-bottom: 30px;
}

.login-brand-name {
    color: var(--institutional-11);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.login-brand-subtitle {
    margin-top: 4px;
    color: var(--institutional-09);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.login-title {
    margin: 0 0 7px;
    color: var(--institutional-11);
    font-size: 24px;
    font-weight: 600;
}

.login-intro {
    margin: 0 0 25px;
    color: var(--neutral-08);
    font-size: 14px;
    line-height: 1.5;
}

.login-form {
    display: grid;
    gap: 17px;
}

.login-field {
    display: grid;
    gap: 7px;
}

.login-field label {
    color: var(--institutional-11);
    font-size: 13px;
    font-weight: 600;
}

.login-field input {
    width: 100%;
    height: 46px;
    padding: 10px 13px;
    border: 1px solid var(--neutral-04);
    border-radius: 10px;
    background: var(--universal-white);
    color: var(--neutral-10);
    font: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.login-field input:focus {
    border-color: var(--institutional-09);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--institutional-04) 18%, transparent);
}

.login-button {
    width: 100%;
    min-height: 46px;
    margin-top: 5px;
    border: 1px solid var(--institutional-11);
    border-radius: 10px;
    background: var(--institutional-11);
    color: var(--universal-white);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.login-button:hover {
    transform: translateY(-1px);
    background: var(--institutional-12);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--neutral-12) 16%, transparent);
}

.login-footer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--neutral-04);
    color: var(--neutral-08);
    font-size: 11px;
    text-align: center;
}

@media (max-width: 520px) {

    body.login-page { padding: 20px 14px; }

}

/* ============================================================
   VIKI — Conta e sessão
   2026-09-25
   ============================================================ */

.login-no-account {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 19px;
    color: var(--neutral-08);
    font-size: 12px;
}

.login-no-account > a,
.login-account-popover a {
    color: var(--institutional-11);
    font-weight: 600;
    text-decoration: none;
}

.login-no-account > a:hover,
.login-account-popover a:hover {
    text-decoration: underline;
}

@media (max-width: 520px) {

    .login-no-account { flex-wrap: wrap; }

}

/* =========================================================
   VIKI — A minha conta / segurança
   2026-10-01
   ========================================================= */

/* VIKI — ícones da navegação lateral */

/* VIKI — ícones de ação */

/* VIKI — linguagem visual: ícones em abas e cabeçalhos */
.tab-button,
.clinical-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tab-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   VIKI — sidebar recolhível + navegação entre fichas
   2026-10-02
   ========================================================= */

/* VIKI — marca Nmedicinas na sidebar */

/* VIKI — afinação da marca na sidebar */

/* VIKI — saudação centrada na sidebar */

/* =========================================================
   VIKI — Anamnese / ritmo vertical uniforme
   2026-10-02
   Referência: bloco «Motivo e história atual»
   ========================================================= */

/* =========================================================
   VIKI — Contactos / indicativo telefónico
   2026-10-02
   ========================================================= */

/* =========================================================
   VIKI — Histórico Clínico / Aba 3 — Exame/Avaliação/Palpação
   2026-10-04
   ========================================================= */

@media (max-width:800px) {

  #clinical-palpacao .palpacao-toolbar { margin-left:0; }

}

/* =========================================================
   VIKI — Aba 3 / campos dinâmicos de palpação profunda
   2026-10-04
   ========================================================= */

/* =========================================================
   VIKI — Aba 3 / afinação transversal dos blocos 1, 3, 4, 5, 7 e 9
   2026-10-04
   ========================================================= */

/* =========================================================
   VITA LAB — navegação lateral institucional, 2026-10-15
   Teste local; contraste de texto institucional claro/escuro
   suportado por 12 níveis (não hardcode de azuis dispersos).
   ========================================================= */

/* =========================================================
   VITA LAB — restauro da leveza original, 2026-10-15
   Ajuste apenas cromático à navegação; sete paletas preservadas.
   ========================================================= */

/* ================================================================
   VITA — Ensaio cromático neutro / Palpação — 16 outubro 2026
   Apenas cor. Sem mudanças de layout, fontes, paletas ou estados.
   Escolha de 4 dos 12 neutros; os 12 NÃO são obrigatórios.
   Institucional reservado a menu, botões, abas e título principal.
   ================================================================ */

/* Subtítulos dos blocos e grupos: cinza mais escuro. */

/* Conteúdo clínico: sem saturação institucional. */

/* Textos auxiliares: cinzas menos escuros, mas legíveis. */

/* Não alteramos estados clínicos, botões, abas, navegação ou títulos principais. */

/* ================================================================
   VITA — Títulos de acordeão institucionais — 17 outubro 2026
   Apenas títulos das secções, sem alterar descrições ou controlos.
   --institutional-12 acompanha as 7 paletas + a personalizada.
   ================================================================ */

/* ================================================================
   VITA — Diagnóstico Holístico / hierarquia neutra — 17/10/2026
   Apenas cores; preserva estrutura, interações e estados funcionais.
   7 paletas + personalizada: sem HEX novos nem paletas duplicadas.
   ================================================================ */

/* Identidade institucional reservada aos títulos estruturantes. */
#clinical-diagnostico .holistic-root > .holistic-node-main .holistic-node-label {
    color: var(--institutional-12);
}

/* Hierarquia clínica: todos os níveis internos em cinzentos neutros. */

/* Ícones e legendas sem azul residual. */

/* Escala funcional: opção ativa permanece claramente assinalada. */

/* Texto introduzido, notas de apoio e respetivos placeholders. */

/* Botões e títulos gerais: mantêm a identidade institucional já existente. */

/* ================================================================
   VITA — Anamnese / hierarquia cromática — 17 outubro 2026
   Apenas cores; alinhada com a primeira aba e as 7 paletas.
   ================================================================ */

/* Título principal: identidade institucional dinâmica. */

/* Descrição da aba e texto auxiliar. */

/* Títulos estruturantes institucionais; rótulos e valores de apoio neutros. */

/* Texto digitado e valores de formulários. */

/* Controlo de foco mantém sinalização institucional. */

/* Não altera botões, estados de gravação, estrutura ou dados clínicos. */

/* ================================================================
   VITA — Norma transversal: títulos das secções, 17/10/2026
   Todas as abas clínicas seguem a mesma hierarquia cromática.
   Apenas títulos. Rótulos, texto, notas e estados preservados.
   ================================================================ */

/* ================================================================
   VITA — Anamnese / acordeão clínico — 17 outubro 2026
   Dez secções independentes, fechadas por defeito.
   Estrutura clínica, formulários e variáveis das paletas preservados.
   ================================================================ */
/* Distribuição equilibrada: título | atualização | ações. */

/* ================================================================
   VITA — Anamnese / campos uniformes e ajuda contextual — 17/10/2026
   Apenas a ABA Anamnese: 42 px (uma linha), 76 px (texto livre).
   Não altera os dados clínicos, os nomes dos campos ou outras abas.
   ================================================================ */

/* Duas alturas iniciais coerentes; o técnico pode ampliar texto livre. */

/* Não esticar o último campo para preencher uma grelha mais alta. */

/* Reserva discreta nas colunas sem nota (secções 7 e 10). */

/* Ícones com a identidade cromática institucional, texto de apoio neutro. */

/* O acordeão aberto não corta as explicações (que sobem sobre o cabeçalho). */

/* ================================================================
   VITA — ABA 2 / Diagnóstico Holístico — 17 outubro 2026
   Data institucional, rótulo neutro e síntese com 76px iniciais.
   Ajustes exclusivamente visuais; nenhuma outra aba é afetada.
   ================================================================ */

/* ================================================================
   VITA — Utentes / vistoria cromática — 17 outubro 2026
   Apenas a página Lista de Utentes. Sem alterações a funções ou HTML.
   Elementos de consulta em neutros; ações e identidade institucionais.
   ================================================================ */

/* Estado, etiquetas de filtros e os seus controlos. */
.list-panel-soft .list-status-filter label,
.list-panel-soft .utente-filter-field label {
    color: var(--neutral-11);
}
.list-panel-soft .list-status-filter select,
.list-panel-soft .utente-filter-field input {
    border-color: var(--neutral-04);
    background: var(--universal-white);
    color: var(--neutral-10);
}
.list-panel-soft .utente-filter-field input::placeholder {
    color: var(--neutral-08);
    opacity: 1;
}
.list-panel-soft .list-status-filter select:focus,
.list-panel-soft .utente-filter-field input:focus {
    border-color: var(--neutral-06);
    background: var(--universal-white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--neutral-06) 16%, transparent);
}

/* Painel de pesquisa e contador de resultados. */
.list-panel-soft .utente-filter-grid {
    border-color: var(--neutral-04);
    background: var(--neutral-01);
}
.list-panel-soft .list-total {
    border: 1px solid var(--neutral-04);
    background: var(--neutral-02);
    color: var(--neutral-09);
}

/* Cabeçalhos e ícones da tabela: referência discreta e legível. */

/* Linhas de dados: fundos, contornos e texto inteiramente neutros. */

/* Nome do utente: cinzento mais profundo, destacado pelo peso. */

/* Estados de interação continuam neutros. */

/* ================================================================
   VITA — Ficha de Utente: leitura e edição / Fase 1 — 17-10-2026
   Vistoria cromática sem alteração ao HTML, JavaScript ou dados.
   Institucional: títulos, rótulos, ações e abas ativas.
   Neutros: navegação numérica, conteúdo dos campos e contornos.
   ================================================================ */

/* 1. Indicador numérico da navegação entre fichas. */
.form-panel:has(> .viki-form > .detail-tabs) .record-nav-position {
    background: var(--neutral-02);
    border-color: var(--neutral-05);
    color: var(--neutral-11);
}

/* 3. Leitura e campos não editáveis: fundos e contornos neutros. */
.form-panel:has(> .viki-form > .detail-tabs) .detail-value,
.form-panel:has(> .viki-form > .detail-tabs) .field-readonly {
    background: var(--neutral-02);
    border-color: var(--neutral-04);
    color: var(--neutral-11);
}

/* 4. Edição: campos editáveis brancos, bordas e valores neutros. */
.form-panel:has(> form.viki-form > .edit-tabs) .viki-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.form-panel:has(> form.viki-form > .edit-tabs) .viki-form select,
.form-panel:has(> form.viki-form > .edit-tabs) .viki-form textarea {
    background: var(--universal-white);
    border-color: var(--neutral-04);
    color: var(--neutral-11);
}
.form-panel:has(> form.viki-form > .edit-tabs) .viki-form input::placeholder,
.form-panel:has(> form.viki-form > .edit-tabs) .viki-form textarea::placeholder {
    color: var(--neutral-08);
    opacity: 1;
}

/* Foco de edição: mantém uma identificação institucional acessível. */
.form-panel:has(> form.viki-form > .edit-tabs) .viki-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.form-panel:has(> form.viki-form > .edit-tabs) .viki-form select:focus,
.form-panel:has(> form.viki-form > .edit-tabs) .viki-form textarea:focus {
    background: var(--universal-white);
    border-color: var(--institutional-08);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--institutional-06) 14%, transparent);
}

/* ================================================================
   VITA — Utentes / Contactos: uniformização cromática — 18-10-2026
   Auditoria Fase 1: leitura e edição, sem alterar layout ou funções.
   Títulos institucionais; valores, superfícies e rebordos neutros.
   ================================================================ */

/* Cabeçalho Tipo / Titular / Contacto / Principal — ambos os modos. */
.form-panel .viki-form #tab-contactos .contactos-grid-header {
    color: var(--institutional-12);
}

/* Valores em modo leitura: mesmo tratamento da aba Identificação. */
.form-panel .viki-form #tab-contactos .contacto-row-readonly .detail-value {
    background: var(--neutral-02);
    border-color: var(--neutral-04);
    color: var(--neutral-11);
}

/* Controlos editáveis: branco, cinza neutro no texto e nos rebordos. */
.form-panel form.viki-form #tab-contactos .contacto-cell select,
.form-panel form.viki-form #tab-contactos .contacto-cell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    background: var(--universal-white);
    border-color: var(--neutral-04);
    color: var(--neutral-11);
}

/* Foco institucional, como na Identificação, para acessibilidade. */
.form-panel form.viki-form #tab-contactos .contacto-cell select:focus,
.form-panel form.viki-form #tab-contactos .contacto-cell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus {
    background: var(--universal-white);
    border-color: var(--institutional-08);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--institutional-06) 14%, transparent);
}