/* styles.css — tokens + layout do Companion (Fatia 1).
   Tokens copiados do Design System (painel/ui.html §:root + CLAUDE.md
   §cores) — mesma paleta teal/IBM Plex do produto, não invento hex novo. */

:root {
  color-scheme: light;
  --primary: #2A5F5D;
  --sec: #3D7A77;
  --ter: #5B9E9B;
  --texto: #1C2421;
  --zebra: #E5EFEE;
  --alerta: #C00000;
  --borda: #C9DBD8;
  --fundo-sutil: #F7FAFA;
  --alerta-bg: #FBE3E3;
  --atencao: #9A6B00;
  --atencao-bg: #FBF3E1;
  --ok: #085041;
  --ok-bg: #E1F5EE;
  --fundo: #FFFFFF;
  --fundo-cartao: #FFFFFF;
  --serif: 'IBM Plex Serif', Georgia, serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --sombra: rgba(0, 0, 0, 0.12);

  /* Chips de LOCAL — requisito travado (companion-build-requisitos):
     consultório teal · online azul · cidade âmbar. Paleta própria do
     Companion (não reaproveita loc-on/loc-cons do painel, que usa outra
     convenção de cor para o mesmo dado — aqui a regra é a do requisito). */
  --loc-consultorio: var(--ter);
  --loc-consultorio-bg: #E5EFEE;
  --loc-online: #2E5FA3;
  --loc-online-bg: #E3EBF6;
  --loc-cidade: #9A6B00;
  --loc-cidade-bg: #FBF3E1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fundo: #101517;
    --fundo-cartao: #182422;
    --fundo-sutil: #17201F;
    --primary: #4FB8AE;
    --sec: #6FC9C0;
    --ter: #8FD8CF;
    --texto: #E6ECEA;
    --zebra: #1B2624;
    --borda: #33453F;
    --alerta: #FF9E9E;
    --alerta-bg: #4A2222;
    --atencao: #F0C265;
    --atencao-bg: #4A3B14;
    --ok: #6FE3C0;
    --ok-bg: #0E3A2E;
    --sombra: rgba(0, 0, 0, 0.45);
    --loc-consultorio-bg: #16302D;
    --loc-online: #8FB4E6;
    --loc-online-bg: #16233A;
    --loc-cidade-bg: #4A3B14;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fundo: #101517;
  --fundo-cartao: #182422;
  --fundo-sutil: #17201F;
  --primary: #4FB8AE;
  --sec: #6FC9C0;
  --ter: #8FD8CF;
  --texto: #E6ECEA;
  --zebra: #1B2624;
  --borda: #33453F;
  --alerta: #FF9E9E;
  --alerta-bg: #4A2222;
  --atencao: #F0C265;
  --atencao-bg: #4A3B14;
  --ok: #6FE3C0;
  --ok-bg: #0E3A2E;
  --sombra: rgba(0, 0, 0, 0.45);
  --loc-consultorio-bg: #16302D;
  --loc-online: #8FB4E6;
  --loc-online-bg: #16233A;
  --loc-cidade-bg: #4A3B14;
}
:root[data-theme="light"] {
  color-scheme: light;
  --fundo: #FFFFFF;
  --fundo-cartao: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  background: var(--fundo-sutil);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.45;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  background: var(--fundo);
}

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px;
  background: var(--primary);
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
}
.topbar-status {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
  /* É um <button> desde a S0 (gatilho discreto de "Desconectar"). Zera-se
     o visual nativo de botão para continuar lendo como o rótulo de status
     que sempre foi; só ganha affordance quando está habilitado. */
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  text-align: right;
  font-weight: inherit;
}
.topbar-status:enabled {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.topbar-status:disabled { cursor: default; }

/* ── Banner de pareamento (S0) ────────────────────────────────────────
   Só existe enquanto não há token no aparelho. Fica ENTRE a topbar e a
   tela, logo é visível nas 4 telas sem tocar em telas/*.js. */
.pareamento {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--zebra);
  border-bottom: 1px solid var(--borda);
}
.pareamento[hidden] { display: none; }
.pareamento-texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pareamento-texto strong { font-size: 13.5px; color: var(--primary); }
.pareamento-texto span { font-size: 12px; color: var(--sec); }
.pareamento-texto code { font-family: var(--mono); font-size: 11.5px; }
.btn-conectar {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-conectar:active { opacity: 0.85; }

/* Placeholder da APP KEY ainda em config.js: é aviso de configuração
   pendente (âmbar), não convite a clicar — por isso não tem botão. */
.pareamento.sem-chave {
  background: var(--atencao-bg);
  border-bottom-color: var(--atencao);
}
.pareamento.sem-chave strong { color: var(--atencao); }
.pareamento.sem-chave span { color: var(--texto); }

.tela {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 84px);
}

.nav {
  flex: 0 0 auto;
  display: flex;
  border-top: 1px solid var(--borda);
  background: var(--fundo-cartao);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 560px;
  margin: 0 auto;
}
.nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px 8px;
  border: none;
  background: none;
  color: var(--sec);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.nav-item .nav-ic { font-size: 16px; line-height: 1; }
.nav-item[aria-current="page"] { color: var(--primary); font-weight: 600; }

/* ── Card de compromisso (requisito travado, TODOS os modos) ─────────
   Prioridade de leitura: 1) nº reduzido em destaque (mono) 2) nome
   3) LOCAL como chip principal 4) tipo pequeno secundário. */
.card-compromisso {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
.card-cnj {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--primary);
  white-space: nowrap;
}
.card-corpo { flex: 1 1 auto; min-width: 0; }
.card-nome {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.card-tipo {
  font-size: 11.5px;
  color: var(--sec);
}
.card-hora {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sec);
  white-space: nowrap;
}

.chip-local {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.chip-local.consultorio { color: var(--loc-consultorio); background: var(--loc-consultorio-bg); }
.chip-local.online { color: var(--loc-online); background: var(--loc-online-bg); }
.chip-local.cidade { color: var(--loc-cidade); background: var(--loc-cidade-bg); }

.secao-titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--primary);
  margin: 14px 0 8px;
}
.secao-titulo:first-child { margin-top: 2px; }

.vazio {
  color: var(--sec);
  font-size: 13px;
  padding: 10px 2px;
}

.kpi-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.kpi {
  flex: 1 1 0;
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.kpi-label { font-size: 10.5px; color: var(--sec); }
.kpi-valor { font-family: var(--mono); font-weight: 700; font-size: 13.5px; margin-top: 2px; }

.linha-atrasado, .linha-conferir {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin-bottom: 6px;
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--alerta);
  border-radius: 8px;
}
.linha-conferir { border-left-color: var(--atencao); }
.linha-nome { flex: 1 1 auto; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-sub { font-size: 11px; color: var(--sec); }
.linha-dias { font-family: var(--mono); font-size: 11.5px; color: var(--alerta); white-space: nowrap; }

/* ── Agenda: sub-nav de modos (semana/mês/lista) ─────────────────── */
.agenda-modos {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.agenda-modos button {
  flex: 1 1 0;
  padding: 7px 4px;
  border: 1px solid var(--borda);
  background: var(--fundo-cartao);
  color: var(--sec);
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.agenda-modos button[aria-current="true"] {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 600;
}

/* ── Mês (padrão Apple Calendar): grade + lista do dia embaixo ────── */
.mes-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 10px;
}
.mes-dow {
  text-align: center;
  font-size: 10px;
  color: var(--sec);
  padding-bottom: 4px;
}
.mes-dia {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  background: var(--fundo-cartao);
  border: 1px solid transparent;
}
.mes-dia.fora-do-mes { color: var(--borda); }
.mes-dia.selecionado { border-color: var(--primary); }
.mes-dia.hoje .mes-dia-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
}
.mes-dia-dots { display: flex; gap: 2px; margin-top: 2px; }
.mes-dot { width: 5px; height: 5px; border-radius: 50%; }
.mes-dot.consultorio { background: var(--loc-consultorio); }
.mes-dot.online { background: var(--loc-online); }
.mes-dot.cidade { background: var(--loc-cidade); }

.offline-aviso {
  background: var(--atencao-bg);
  color: var(--atencao);
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}