/**
 * Tokens do ArdoMed — design system.
 *
 * Fonte única de cor, tipografia e geometria do produto. Componente nenhum
 * define cor literal: tudo passa por token semântico, e é isso que faz tema
 * claro e escuro funcionarem sem tocar em componente.
 *
 * ── SOBRE A COR DA MARCA ────────────────────────────────────────────────
 *
 * A marca é NAVY, e o mint é acento — não o contrário. A razão é funcional:
 * no prontuário e nas listas clínicas o verde já tem significado próprio
 * (exame concluído, consulta confirmada, paciente sem pendência). Se a cor
 * primária fosse o mesmo verde, o botão de ação principal e o selo de
 * "confirmado" ficariam indistinguíveis.
 *
 * O navy sustenta a moldura do produto; o mint aparece pontualmente, onde é
 * para chamar atenção sem virar status.
 *
 * ── GEOMETRIA ───────────────────────────────────────────────────────────
 *
 * Controle quase reto (0.25rem), cartão macio (0.75rem). O contraste entre os
 * dois é o que dá caráter — raio único em tudo é justamente o que faz
 * produtos diferentes parecerem o mesmo.
 */

:root {
    /* ── Superfícies ─────────────────────────────────────────────
       O fundo tem leve viés azulado, não é cinza neutro. Em tela
       cheia isso amarra a marca sem exigir cor em cada bloco. */
    --am-bg: 248 250 252;
    --am-surface: 255 255 255;
    --am-surface-raised: 255 255 255;
    --am-surface-sunken: 240 244 249;
    --am-overlay: 8 16 28;

    /* ── Texto ─────────────────────────────────────────────────── */
    --am-text: 20 32 42;
    --am-text-muted: 92 106 122;
    --am-text-subtle: 136 149 165;
    --am-text-inverse: 255 255 255;

    /* ── Bordas ────────────────────────────────────────────────── */
    --am-line: 222 229 238;
    --am-line-strong: 194 205 219;
    --am-ring: 0 89 160;

    /* ── Marca — navy ──────────────────────────────────────────── */
    --am-primary: 12 30 53;
    --am-primary-hover: 10 64 110;
    --am-primary-active: 4 76 132;
    --am-primary-subtle: 224 239 254;
    --am-primary-fg: 255 255 255;

    /* Secundária neutra: uma segunda cor de marca competiria com o
       significado que verde e âmbar já têm nas listas clínicas. */
    --am-secondary: 51 65 85;
    --am-secondary-hover: 30 41 59;
    --am-secondary-subtle: 238 242 246;
    --am-secondary-fg: 255 255 255;

    /* Acento — mint da marca. Destaque pontual, nunca status. */
    --am-accent: 16 110 70;
    --am-accent-hover: 20 138 85;
    --am-accent-subtle: 214 245 227;
    --am-accent-fg: 255 255 255;

    /* ── Status ──────────────────────────────────────────────────
       O verde do `success` é mais claro e mais amarelo que o accent,
       justamente para não se confundir com a marca. */
    --am-success: 21 128 61;
    --am-success-subtle: 231 246 236;
    --am-danger: 179 38 30;
    --am-danger-subtle: 251 234 232;
    --am-warning: 166 95 0;
    --am-warning-subtle: 251 240 220;
    --am-info: 23 92 211;
    --am-info-subtle: 232 238 252;

    /* ── Geometria ─────────────────────────────────────────────── */
    --am-radius-control: 0.25rem;
    --am-radius-card: 0.75rem;

    /* ── Elevação ──────────────────────────────────────────────── */
    --am-shadow-sm: 0 1px 2px rgb(15 30 50 / 0.06);
    --am-shadow-md: 0 2px 8px -2px rgb(15 30 50 / 0.10), 0 1px 3px rgb(15 30 50 / 0.06);
    --am-shadow-lg: 0 12px 32px -8px rgb(15 30 50 / 0.18);

    /* ── Camadas ───────────────────────────────────────────────── */
    --am-z-dropdown: 1000;
    --am-z-sticky: 1100;
    --am-z-drawer: 1200;
    --am-z-modal: 1300;
    --am-z-toast: 1500;

    /* ── Tipografia ────────────────────────────────────────────── */
    --am-font-sans: 'Public Sans', Inter, system-ui, -apple-system, sans-serif;
    --am-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --am-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    color-scheme: light;
}

.dark {
    --am-bg: 11 17 26;
    --am-surface: 17 25 37;
    --am-surface-raised: 24 34 48;
    --am-surface-sunken: 8 13 21;
    --am-overlay: 0 0 0;

    --am-text: 226 234 244;
    --am-text-muted: 148 163 184;
    --am-text-subtle: 108 124 145;
    --am-text-inverse: 11 17 26;

    --am-line: 36 49 67;
    --am-line-strong: 58 75 98;
    --am-ring: 96 165 250;

    /* No escuro o navy some no fundo: a primária vira o azul claro
       da marca, mantendo a mesma família. */
    --am-primary: 96 165 250;
    --am-primary-hover: 129 185 253;
    --am-primary-active: 60 135 230;
    --am-primary-subtle: 22 42 68;
    --am-primary-fg: 8 18 32;

    --am-secondary: 148 163 184;
    --am-secondary-hover: 176 190 208;
    --am-secondary-subtle: 26 34 46;
    --am-secondary-fg: 12 18 26;

    --am-accent: 69 193 134;
    --am-accent-hover: 108 210 158;
    --am-accent-subtle: 14 46 32;
    --am-accent-fg: 6 24 16;

    --am-success: 74 190 122;
    --am-success-subtle: 14 38 26;
    --am-danger: 238 116 108;
    --am-danger-subtle: 46 20 18;
    --am-warning: 220 160 60;
    --am-warning-subtle: 44 33 12;
    --am-info: 122 162 240;
    --am-info-subtle: 20 30 52;

    --am-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --am-shadow-md: 0 2px 8px -2px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
    --am-shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.6);

    color-scheme: dark;
}

/* =====================================================================
   BASE
   ===================================================================== */

body {
    background-color: rgb(var(--am-bg));
    color: rgb(var(--am-text));
    font-family: var(--am-font-sans);
    -webkit-font-smoothing: antialiased;
}

/*
 * Títulos em SERIFA.
 *
 * Escolha de identidade, não ornamento: receita, laudo e prontuário são
 * documentos serifados. A serifa nos títulos aproxima o produto do material
 * que o médico assina — e afasta da aparência de painel genérico de SaaS.
 */
h1, h2, h3 {
    font-family: var(--am-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Número em coluna alinha por dígito, sempre. */
table, .tabular {
    font-variant-numeric: tabular-nums;
}

/* CPF, telefone, código de barras da receita */
.mono {
    font-family: var(--am-font-mono);
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   COMPONENTES
   Classes utilitárias usadas pelos módulos JS. Alterar aqui muda o
   produto inteiro — é o ponto do design system.
   ===================================================================== */

/* ── Botões ──────────────────────────────────────────────────────────
   HIERARQUIA: um único .btn-primary por tela. Ação secundária usa
   .btn-outline; terciária, .btn-ghost. Dois botões preenchidos lado a
   lado obrigam a ler os dois para saber qual é a ação esperada. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    height: 2.5rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--am-radius-control);
    border: 1px solid transparent;
    transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
    cursor: pointer;
    user-select: none;
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgb(var(--am-bg)), 0 0 0 4px rgb(var(--am-ring));
}
.btn:disabled, .btn[disabled] {
    pointer-events: none;
    opacity: .5;
}
.btn-sm { height: 2rem; padding: 0 .75rem; font-size: .8125rem; }
.btn-lg { height: 2.75rem; padding: 0 1.5rem; font-size: 1rem; }
.btn-icon { width: 2.5rem; padding: 0; }
.btn-block { width: 100%; }

.btn-primary { background: rgb(var(--am-primary)); color: rgb(var(--am-primary-fg)); }
.btn-primary:hover { background: rgb(var(--am-primary-hover)); }
.btn-primary:active { background: rgb(var(--am-primary-active)); }

.btn-accent { background: rgb(var(--am-accent)); color: rgb(var(--am-accent-fg)); }
.btn-accent:hover { background: rgb(var(--am-accent-hover)); }

.btn-outline {
    border-color: rgb(var(--am-line-strong));
    background: rgb(var(--am-surface));
    color: rgb(var(--am-text));
}
.btn-outline:hover { background: rgb(var(--am-surface-sunken)); }

.btn-ghost { background: transparent; color: rgb(var(--am-text)); }
.btn-ghost:hover { background: rgb(var(--am-surface-sunken)); }

.btn-danger { background: rgb(var(--am-danger)); color: #fff; }
.btn-danger:hover { opacity: .9; }

/* ── Cartões ─────────────────────────────────────────────────────── */
.card {
    background: rgb(var(--am-surface));
    border: 1px solid rgb(var(--am-line));
    border-radius: var(--am-radius-card);
}
.card-interactive { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.card-interactive:hover { box-shadow: var(--am-shadow-md); border-color: rgb(var(--am-line-strong)); }
.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgb(var(--am-line));
}
.card-title { font-size: 0.9375rem; font-weight: 600; color: rgb(var(--am-text)); }
.card-desc { font-size: 0.8125rem; color: rgb(var(--am-text-muted)); margin-top: .125rem; }
.card-body { padding: 1.25rem; }

/* Faixa de status à esquerda. É informação: o card sempre carrega o
   texto do status junto, nunca só a cor. */
.card-status-success { border-left: 4px solid rgb(var(--am-success)); }
.card-status-danger  { border-left: 4px solid rgb(var(--am-danger)); }
.card-status-warning { border-left: 4px solid rgb(var(--am-warning)); }
.card-status-info    { border-left: 4px solid rgb(var(--am-info)); }

/* ── Selos ───────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .5rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.25rem;
    border-radius: 9999px;
    white-space: nowrap;
}
.badge-neutral { background: rgb(var(--am-surface-sunken)); color: rgb(var(--am-text-muted)); }
.badge-primary { background: rgb(var(--am-primary-subtle)); color: rgb(var(--am-primary)); }
.badge-success { background: rgb(var(--am-success-subtle)); color: rgb(var(--am-success)); }
.badge-danger  { background: rgb(var(--am-danger-subtle));  color: rgb(var(--am-danger)); }
.badge-warning { background: rgb(var(--am-warning-subtle)); color: rgb(var(--am-warning)); }
.badge-info    { background: rgb(var(--am-info-subtle));    color: rgb(var(--am-info)); }

/* ── Campos ──────────────────────────────────────────────────────── */
.field-label {
    display: block;
    font-size: .8125rem;
    font-weight: 500;
    color: rgb(var(--am-text));
    margin-bottom: .375rem;
}
.field-hint { font-size: .75rem; color: rgb(var(--am-text-muted)); margin-top: .25rem; }
.field-error { font-size: .75rem; color: rgb(var(--am-danger)); margin-top: .25rem; }

.input, .select, .textarea {
    width: 100%;
    height: 2.5rem;
    padding: 0 .75rem;
    font-size: .875rem;
    color: rgb(var(--am-text));
    background: rgb(var(--am-surface));
    border: 1px solid rgb(var(--am-line-strong));
    border-radius: var(--am-radius-control);
    transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; padding: .5rem .75rem; min-height: 5rem; }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: rgb(var(--am-ring));
    box-shadow: 0 0 0 3px rgb(var(--am-ring) / .15);
}
.input::placeholder, .textarea::placeholder { color: rgb(var(--am-text-subtle)); }
/* Campo com valor inválido (CPF, celular): a borda avisa, a mensagem explica */
.input-error, .input.input-error { border-color: rgb(var(--am-danger)); }
.input:disabled, .select:disabled, .textarea:disabled {
    background: rgb(var(--am-surface-sunken));
    color: rgb(var(--am-text-subtle));
    cursor: not-allowed;
}

/* ── Tabelas ─────────────────────────────────────────────────────── */
.table-wrap {
    background: rgb(var(--am-surface));
    border: 1px solid rgb(var(--am-line));
    border-radius: var(--am-radius-card);
    /* Rolagem horizontal por padrão: em celular nenhuma tabela do sistema cabe
       na largura da tela, e sem isto a página inteira rolava de lado. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table thead th {
    text-align: left;
    padding: .625rem 1rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgb(var(--am-text-subtle));
    background: rgb(var(--am-surface-sunken));
    border-bottom: 1px solid rgb(var(--am-line));
}
.table tbody td {
    padding: .75rem 1rem;
    color: rgb(var(--am-text));
    border-bottom: 1px solid rgb(var(--am-line));
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgb(var(--am-surface-sunken)); }

/* ── Estado vazio ────────────────────────────────────────────────── */
.empty-state { padding: 3rem 1.5rem; text-align: center; }
.empty-state i { font-size: 2rem; color: rgb(var(--am-text-subtle)); }
.empty-state-title { margin-top: .75rem; font-weight: 600; color: rgb(var(--am-text)); }
.empty-state-desc { margin-top: .25rem; font-size: .875rem; color: rgb(var(--am-text-muted)); }

/* ── Cabeçalho de página ─────────────────────────────────────────── */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-title { font-size: 1.375rem; font-weight: 600; color: rgb(var(--am-text)); }
.page-desc { font-size: .875rem; color: rgb(var(--am-text-muted)); margin-top: .25rem; }

/* ── Navegação lateral ───────────────────────────────────────────── */
.nav-group-title {
    padding: .75rem 1rem .25rem;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgb(var(--am-text-subtle));
}
.nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: calc(100% - 1rem);
    margin: 0 .5rem;
    padding: .5rem;
    font-size: .875rem;
    color: rgb(var(--am-text-muted));
    border-radius: var(--am-radius-control);
    transition: background-color .15s, color .15s;
    text-align: left;
}
.nav-item:hover { background: rgb(var(--am-surface-sunken)); color: rgb(var(--am-text)); }
.nav-item.nav-active {
    background: rgb(var(--am-primary-subtle));
    color: rgb(var(--am-primary));
    font-weight: 500;
}
.dark .nav-item.nav-active { color: rgb(var(--am-primary)); }

/* ── Abas ────────────────────────────────────────────────────────── */
.tab {
    padding: .625rem .25rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgb(var(--am-text-muted));
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.tab:hover { color: rgb(var(--am-text)); }
.tab.tab-active { color: rgb(var(--am-primary)); border-bottom-color: rgb(var(--am-primary)); }

/* ── Nome de paciente clicável ───────────────────────────────────── */
/* Abre a ficha do paciente a partir de qualquer listagem. Herda fonte e
   cor do contexto: quem manda na tipografia é a linha da tabela ou o
   cabeçalho do card — aqui só entram a affordance e o estado de foco.
   O pontilhado discreto evita transformar a coluna inteira em azul. */
.link-paciente {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgb(var(--am-line-strong));
    text-underline-offset: 3px;
    transition: color .15s, text-decoration-color .15s;
}
.link-paciente:hover {
    color: rgb(var(--am-primary));
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}
.link-paciente:focus-visible {
    outline: 2px solid rgb(var(--am-primary));
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Superfícies auxiliares ──────────────────────────────────────── */
.surface { background: rgb(var(--am-surface)); }
.surface-sunken { background: rgb(var(--am-surface-sunken)); }
.text-muted { color: rgb(var(--am-text-muted)); }
.text-subtle { color: rgb(var(--am-text-subtle)); }
.divider { border-top: 1px solid rgb(var(--am-line)); }

/* =====================================================================
   TOQUE  (até 1023px)
   O layout troca para menu-gaveta em 1024px — é o mesmo ponto em que o
   sistema passa a ser usado no dedo, então o alvo de toque muda junto.
   Antes estes ajustes começavam só em 640px e sobrava uma faixa (tablet e
   celular deitado) com gaveta de menu e botão de 32px.
   ===================================================================== */
@media (max-width: 1023px) {
    /*
     * Campo com 16px NÃO é escolha estética.
     * Abaixo disso o Safari do iPhone dá zoom automático ao focar o campo e
     * não desfaz depois — a tela fica deslocada e o usuário precisa
     * reposicionar a mão a cada campo do cadastro.
     */
    .input, .select, .textarea {
        font-size: 16px;
        height: 2.75rem;
    }
    .textarea { height: auto; }

    /* 44px é o mínimo que o dedo acerta sem erro. Ícone de ação em linha de
       tabela tinha 32px — dois vizinhos e se erra o alvo. */
    .btn { height: 2.75rem; padding: 0 1.125rem; }
    .btn-sm { height: 2.5rem; padding: 0 .875rem; font-size: .875rem; }
    .btn-icon { width: 2.75rem; padding: 0; }
    .btn-sm.btn-icon { width: 2.5rem; }

    /* Item do menu-gaveta maior */
    .nav-item { padding: .75rem .625rem; font-size: .9375rem; }

    /* Respiro menor: o padding de desktop come área útil */
    .card-body { padding: 1rem; }
    .card-header { padding: .875rem 1rem; }
    .table thead th { padding: .5rem .75rem; }
    .table tbody td { padding: .625rem .75rem; }
}

/* =====================================================================
   CELULAR  (até 640px)
   Aqui a largura é o recurso escasso: o que era lado a lado empilha.
   ===================================================================== */
@media (max-width: 640px) {
    /* Ações da tela empilham e ocupam a largura toda — meio botão
       espremido no canto é mais difícil de acertar do que um inteiro. */
    .page-header { flex-direction: column; align-items: stretch; gap: .75rem; }
    .page-header > div:last-child { display: flex; flex-wrap: wrap; gap: .5rem; }
    .page-header > div:last-child .btn { flex: 1 1 auto; }
    .page-title { font-size: 1.25rem; }

    .badge { font-size: .75rem; padding: .1875rem .5rem; }
    .empty-state { padding: 2rem 1rem; }

    /* Modal quase em tela cheia: com o respiro de desktop sobra pouca área
       útil, e formulário de paciente tem muito campo. */
    #modal { padding: .5rem; }
    #modal > div { max-height: 94vh; }
    #modal > div > div:first-child { padding: .875rem 1rem; }
    #modal > div > div:first-child h3 { font-size: 1rem; }
    #modalContent { padding: 1rem; max-height: calc(94vh - 60px); }

    /* Barra superior: com alvos de 44px, seis ícones e o avatar não cabem.
       Sai do topo o que tem outro caminho — a IA já tem o botão flutuante
       e o tema foi para o menu do usuário. */
    #iaButtonContainer { display: none !important; }
    #btnTemaHeader { display: none !important; }
    header .btn-icon { width: 2.5rem; }
    header > div { padding-left: .75rem; padding-right: .75rem; }
}

/* Telefones estreitos (iPhone SE e similares) */
@media (max-width: 380px) {
    .card-body { padding: .875rem; }
    .page-title { font-size: 1.125rem; }
}

/* =====================================================================
   ÁREA SEGURA (iPhone com barra de gestos)
   ===================================================================== */
@media (max-width: 1023px) {
    #iaFloatingBtn {
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        right: calc(1rem + env(safe-area-inset-right, 0px));
    }

    /* Toast não pode cobrir o botão flutuante */
    body > div[class*="fixed bottom-4 right-4"] {
        bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
        left: 1rem;
        right: 1rem;
        justify-content: center;
    }

    #chatPanel, #iaPanel { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Com o menu lateral aberto o fundo não rola junto — sem isto o dedo
   arrasta a lista de trás enquanto se tenta escolher o item do menu. */
body.menu-aberto { overflow: hidden; }

/* =====================================================================
   EMPILHAMENTO
   O botão flutuante da IA vinha com z-index acima do modal e cobria o
   "Salvar" do formulário — justamente o canto onde o botão de ação fica.
   ===================================================================== */
#modal { z-index: var(--am-z-modal); }

/* Com o modal aberto o flutuante sai de cena: ele reabre junto */
body:has(#modal.active) #iaFloatingBtn { display: none !important; }

/* Tecla de atalho exibida na interface (busca global) */
kbd {
    display: inline-block;
    padding: .0625rem .25rem;
    border: 1px solid rgb(var(--am-line-strong));
    border-bottom-width: 2px;
    border-radius: 3px;
    background: rgb(var(--am-surface));
    font-size: .6875rem;
    line-height: 1.1;
    color: rgb(var(--am-text-muted));
}