/* crmclinica — interface operacional da clínica.
   Prioridades: leitura confortável em plantão, contraste suficiente para texto pequeno,
   foco sempre visível e layout que sobrevive a telas estreitas do balcão. */

:root {
  --fundo: #f4f7fb;
  --superficie: #ffffff;
  --navy: #0d1930;
  --texto: #19243a;
  /* Tons de apoio escurecidos até passarem em contraste sobre superfície clara. */
  --apoio: #5a6478;
  --linha: #e2e8f1;
  --ciano: #0e8fa1;
  --roxo: #5b4bd6;
  --verde: #0f7a58;
  --ambar: #8a5b00;
  --sombra: 0 12px 30px rgba(16, 35, 68, 0.06);
  --raio: 12px;
}

* { box-sizing: border-box; }

/* Regras com `display` explícito vencem o `display: none` que o navegador dá a
   [hidden] — sem isto, um painel marcado como oculto continua aparecendo. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; }

/* Foco sempre perceptível — navegação por teclado é requisito, não detalhe. */
:focus-visible {
  outline: 3px solid var(--ciano);
  outline-offset: 2px;
  border-radius: 6px;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
}
.pular:focus { left: 0; }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Portão de entrada ---------- */

.portao {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--navy), #14233f);
}
.cartao-login {
  width: min(380px, 100%);
  display: grid;
  gap: 6px;
  padding: 32px 28px;
  background: var(--superficie);
  border-radius: var(--raio);
  box-shadow: 0 20px 50px rgba(6, 14, 30, 0.35);
}
.cartao-login .marca-icone { margin-bottom: 10px; }
.cartao-login h1 { margin: 0; font-size: 22px; }
.cartao-login > p { margin: 0 0 16px; color: var(--apoio); font-size: 13px; }
.cartao-login label { font-size: 12px; color: var(--apoio); margin-top: 8px; }
.cartao-login input {
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 10px;
  font: inherit;
}
.cartao-login .primario { margin-top: 18px; padding: 11px; }
.cartao-login .subtitulo { margin: 0 0 16px; color: var(--apoio); font-size: 13px; }
.cartao-login h2 { margin: 0 0 4px; font-size: 17px; }
.painel-portao { display: grid; gap: 6px; }
.painel-portao .nota { margin: 0 0 8px; color: var(--apoio); font-size: 12px; }
/* O bloco do segundo fator é um contêiner dentro do grid: sem gap próprio, o
   rótulo encostaria no campo de senha acima. */
#bloco-codigo { display: grid; gap: 6px; margin-top: 8px; }

.erro-login, .aviso-portao {
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
}
.erro-login { background: #fdeaea; border-left: 3px solid #b02a2a; color: #8a1f1f; }
.aviso-portao { background: #eaf4fb; border-left: 3px solid var(--ciano); color: #0a5570; }

.rodape-portao {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.rodape-portao .link { font-size: 13px; padding: 2px; }

/* O olho fica dentro do campo, sem cobrir o texto digitado. */
.campo-senha { position: relative; display: flex; }
.campo-senha input { flex: 1; padding-right: 42px !important; }
.olho {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 6px;
  opacity: 0.65;
}
.olho:hover, .olho[aria-pressed="true"] { opacity: 1; background: #eef1f7; }

.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--superficie);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.google:hover { background: #f3f6fb; }
.google span { font-weight: 700; color: var(--ciano); }

/* `minmax(0, 1fr)` em vez de `1fr` em toda coluna flexível: `1fr` equivale a
   `minmax(auto, 1fr)` e se recusa a encolher abaixo do conteúdo, o que empurra
   a página e cria barra de rolagem horizontal em tela estreita. */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}
.app > * { min-width: 0; }

/* ---------- Faixa superior de saúde operacional ---------- */

.plantao {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--navy);
  color: #fff;
  padding: 12px 28px;
}
.plantao > div {
  padding: 4px 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: 2px;
}
.plantao > div:last-child { border-right: 0; }
.plantao > div { min-width: 0; }
.plantao strong, .plantao .estado { overflow-wrap: anywhere; }
.plantao small { color: #a9b8d4; font-size: 11px; letter-spacing: 0.12em; }
.plantao strong { font-size: 15px; }
.plantao .estado { font-size: 12px; color: #cbd6ea; }
.plantao .estado.ok { color: #57e0b0; }
.plantao .estado.alerta { color: #ffcd6b; }
.plantao .estado.ruim { color: #ff9b96; }

/* ---------- Menu lateral ---------- */

.lateral {
  background: var(--superficie);
  border-right: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
}
.marca { display: flex; gap: 10px; align-items: center; margin: 0 0 20px; padding: 0 8px; }
.marca b { display: block; font-size: 18px; }
.marca small { display: block; color: var(--apoio); font-size: 11px; }
.marca-icone, .agente-icone {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  color: #fff;
  font-size: 22px;
  background: linear-gradient(135deg, var(--ciano), var(--roxo));
  flex: none;
}
.relogio {
  display: grid;
  gap: 2px;
  margin: 0 0 18px;
  padding: 14px 12px;
  background: #f3f6fb;
  border-radius: 10px;
}
.relogio b { font-size: 23px; letter-spacing: 0.04em; }
.relogio span { color: var(--apoio); font-size: 12px; }

nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
nav button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--apoio);
  padding: 11px 12px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}
nav button:hover { background: #eef7f9; color: var(--ciano); }
nav button[aria-current="page"] { background: #e4f5f8; color: #0a6f7e; font-weight: 600; }
.icone-menu { width: 18px; text-align: center; }
.contador {
  margin-left: auto;
  background: #ffe8de;
  color: #a1461c;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 12px;
}
.divisor { color: #8b95a7; font-size: 11px; letter-spacing: 0.13em; margin: 22px 0 6px; padding: 0 12px; }
.rodape-lateral { margin-top: auto; color: #8b95a7; font-size: 11px; padding: 14px 10px 0; }

/* ---------- Área principal ---------- */

.area { min-width: 0; }

.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 36px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.topo small { color: var(--apoio); font-size: 11px; letter-spacing: 0.1em; }
.topo h1 { margin: 4px 0 0; font-size: 23px; }
.acoes { display: flex; align-items: center; gap: 10px; color: var(--apoio); }
.nome-equipe { font-size: 14px; }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #d4f0f4;
  color: #0a6470;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.rosa { background: #ffe3e5; color: #a94551; }
.roxo { background: #e9e5ff; color: #4c3fb5; }
.verde { background: #d8f2e7; color: #17694f; }

.aviso {
  margin: 22px 36px 0;
  padding: 12px 16px;
  background: #fff6e2;
  border: 1px solid #f0dcb0;
  border-left: 4px solid var(--ambar);
  border-radius: 8px;
  color: #6b4700;
  font-size: 13px;
}

.tela { padding: 26px 36px 40px; }
.tela[hidden] { display: none; }

.cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}
.cabecalho h2 { font-size: 24px; margin: 0 0 4px; }
.cabecalho p { margin: 0; font-size: 14px; color: var(--apoio); }

.primario, .secundario, .link {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
}
.primario {
  border: 0;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--ciano), var(--roxo));
  color: #fff;
  white-space: nowrap;
}
.secundario {
  border: 1px solid var(--linha);
  padding: 9px 14px;
  background: #eef1f7;
  color: var(--texto);
  margin-top: 14px;
}
.link { border: 0; background: transparent; color: var(--ciano); padding: 4px; }

/* ---------- Métricas ---------- */

.metricas {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.metricas li {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  display: grid;
  gap: 6px;
}
.metricas small { font-size: 11px; letter-spacing: 0.07em; color: var(--apoio); }
.metricas strong { font-size: 30px; line-height: 1.1; }
.metricas span { font-size: 12px; color: var(--apoio); }

.ok { color: var(--verde); }
.alerta { color: var(--ambar); }

/* ---------- Cartões ---------- */

.grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.card {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px 22px;
}
.card.estreito { max-width: 720px; }
.card h3 { margin: 0 0 4px; font-size: 16px; }
.card-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card-titulo p { margin: 0; font-size: 13px; color: var(--apoio); }

.fila, .compromissos, .agenda-lista, .eventos { list-style: none; margin: 12px 0 0; padding: 0; }
/* Avatar à esquerda, texto no meio, horário à direita; os selos ocupam uma
   segunda linha sob o texto, para o nome nunca empurrar o avatar. */
.fila li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}
.selos { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }

/* O que fazer agora, legível sem abrir a conversa. */
.proxima-acao {
  font-size: 11px;
  color: var(--apoio);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.fila li:last-child { border-bottom: 0; }
.linha-texto { flex: 1 1 auto; display: grid; gap: 3px; min-width: 0; }
.linha-texto b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-texto small { color: var(--apoio); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quando { color: var(--apoio); font-size: 12px; white-space: nowrap; }
.etiqueta {
  background: #ddf5ec;
  color: #0d6349;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 10px;
  white-space: nowrap;
}
.etiqueta.amarela { background: #fdf0d2; color: #7a5100; }

.compromissos li, .agenda-lista li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linha);
}
.compromissos li:last-child, .agenda-lista li:last-child { border-bottom: 0; }
.compromissos time, .agenda-lista time { color: var(--roxo); font-weight: 700; width: 50px; flex: none; }
.compromissos span, .agenda-lista span { display: grid; gap: 3px; }
.compromissos small, .agenda-lista small { color: var(--apoio); font-size: 12px; }

/* ---------- Conversas ---------- */

.inbox {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 230px;
  min-height: 520px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
.lista, .thread, .ficha { padding: 18px; border-right: 1px solid var(--linha); }
.ficha { border-right: 0; }
.lista input {
  width: 100%;
  border: 1px solid var(--linha);
  padding: 10px;
  border-radius: 8px;
  font: inherit;
}
.abas { display: flex; gap: 4px; margin: 12px 0 4px; }
.aba {
  border: 0;
  background: transparent;
  padding: 8px 6px;
  color: var(--apoio);
  cursor: pointer;
  font: inherit;
  border-bottom: 2px solid transparent;
}
.aba.selecionada { color: #0a6f7e; border-bottom-color: var(--ciano); font-weight: 600; }

/* Ações que a equipe executa direto na conversa. */
.acoes-conversa {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}
.acao {
  font: inherit;
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
}
.acao:hover:not(:disabled) { background: #eef7f9; border-color: var(--ciano); color: #0a6f7e; }
.acao:disabled { opacity: 0.5; cursor: not-allowed; }

.vazio { color: var(--apoio); font-size: 13px; padding: 14px 0; list-style: none; }

/* Aviso de que a IA está pausada — a informação mais importante da tela:
   quem responde esta conversa agora? */
.aviso-ia {
  margin: 10px 0 0;
  padding: 9px 12px;
  background: #fff6e2;
  border-left: 3px solid var(--ambar);
  border-radius: 6px;
  color: #6b4700;
  font-size: 12px;
}

/* O nome do contato é um botão: clicar abre o histórico. */
.nome-contato {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.nome-contato:hover:not(:disabled) { color: var(--ciano); text-decoration: underline; }
.nome-contato:disabled { cursor: default; color: var(--apoio); font-weight: 600; }

.historico {
  margin-top: 12px;
  padding: 12px;
  background: #f3f6fb;
  border-radius: 8px;
}
.historico-topo { display: flex; justify-content: space-between; align-items: center; }

.ficha-lista { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.ficha-lista li { font-size: 13px; color: var(--texto); }
.ficha-lista .link { padding: 0; font-size: 13px; }

.ficha-topo { display: flex; justify-content: space-between; align-items: baseline; }
.ficha-acoes { display: flex; gap: 8px; margin-top: 12px; }
#form-ficha { display: grid; gap: 4px; margin-top: 10px; }
#form-ficha label { font-size: 11px; color: var(--apoio); letter-spacing: 0.05em; }
#form-ficha input, #form-ficha textarea {
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 7px;
  font: inherit;
  font-size: 13px;
  width: 100%;
}

#ficha-atributos, #ficha-qualificacao { margin: 6px 0 0; font-size: 13px; }
#ficha-atributos dt, #ficha-qualificacao dt { color: var(--apoio); font-size: 11px; text-transform: uppercase; }
#ficha-atributos dd, #ficha-qualificacao dd { margin: 0 0 6px; }

.proxima-acao-ficha {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: #eef7f9;
  border-left: 3px solid var(--ciano);
  border-radius: 6px;
  font-size: 12px;
  color: #0a5570;
}

.etiquetas-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.etiqueta-opcao {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 3px 9px;
  cursor: pointer;
}
.etiqueta-opcao:has(input:checked) { background: #ddf3f5; color: #0a6470; font-weight: 600; }

.temp-quente { background: #fde5e5; color: #a02020; }
.temp-morno { background: #fdf0d2; color: #7a5100; }
.temp-frio { background: #e0f2f6; color: #0a6470; }

/* Cards do kanban: clicar abre a conversa que originou o lead. */
.card-lead {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
}
.card-lead small { display: block; color: var(--apoio); font-size: 12px; margin-top: 5px; font-weight: 400; }
.card-lead:hover:not(:disabled) { color: var(--ciano); }
.card-lead:disabled { cursor: default; opacity: 0.7; }

.balao-sistema {
  align-self: center;
  max-width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--apoio);
  background: transparent;
  padding: 4px 0;
}
.mensagens .privada { background: #fff6e2; border: 1px dashed #e0c98a; }
.mensagens li small { display: block; margin-top: 5px; font-size: 11px; color: var(--apoio); }

.fila li.ativa { background: #e4f5f8; }

/* ---------- Usuários e perfil ---------- */

.formulario { display: grid; gap: 12px; margin-top: 14px; }
.formulario > div { display: grid; gap: 4px; }
.formulario label { font-size: 12px; color: var(--apoio); }
.formulario input, .formulario select {
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 9px;
  font: inherit;
  font-size: 14px;
  width: 100%;
}
.formulario-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.formulario-linha { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.formulario-linha input {
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 9px;
  font: inherit;
  max-width: 140px;
  letter-spacing: 0.2em;
}

.nota { color: var(--apoio); font-size: 12px; margin: 10px 0 0; }
.retorno {
  margin: 10px 0 0;
  padding: 8px 11px;
  background: #e6f5ee;
  border-left: 3px solid var(--verde);
  border-radius: 6px;
  color: #0d5a41;
  font-size: 13px;
}
.retorno-erro { background: #fdeaea; border-left-color: #b02a2a; color: #8a1f1f; }

.segredo-2fa { margin: 10px 0; }
.segredo-2fa code {
  display: inline-block;
  padding: 9px 12px;
  background: #f3f6fb;
  border-radius: 8px;
  font-size: 15px;
  letter-spacing: 0.12em;
  word-break: break-all;
}

.perfil-leitura { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 4px 0 0; font-size: 13px; }
.perfil-leitura dt { color: var(--apoio); font-size: 12px; }
.perfil-leitura dd { margin: 0; }

.lista-usuarios { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.usuario {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linha);
}
.usuario:last-child { border-bottom: 0; }
.usuario-identidade { display: grid; gap: 3px; min-width: 0; }
.usuario-identidade small { color: var(--apoio); font-size: 12px; overflow-wrap: anywhere; }
.usuario .selos { grid-column: 1; }
.usuario-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.usuario-acoes .primario { padding: 7px 12px; font-size: 13px; }

/* Situação vira cor: quem espera decisão precisa saltar aos olhos. */
.sit-pendente { background: #fdf0d2; color: #7a5100; }
.sit-ativo { background: #ddf5ec; color: #0d6349; }
.sit-recusado, .sit-desativado { background: #fdeaea; color: #8a1f1f; }
.situacao-pendente { background: #fffdf6; }

@media (max-width: 720px) {
  .usuario { grid-template-columns: minmax(0, 1fr); }
  .usuario-acoes { justify-content: flex-start; }
}

.thread { display: flex; flex-direction: column; }
.fila li[role="button"] { cursor: pointer; border-radius: 8px; padding-left: 6px; padding-right: 6px; }
.fila li[role="button"]:hover { background: #f3f8fa; }
.thread-topo { display: grid; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--linha); }
.thread-topo small { color: var(--apoio); font-size: 12px; }
.mensagens { list-style: none; flex: 1; margin: 0; padding: 22px 0 0; display: grid; gap: 10px; align-content: start; }
.mensagens li { max-width: 78%; padding: 11px 14px; border-radius: 12px; }
.recebida { background: #f0f3f8; }
.enviada { margin-left: auto; background: #ddf3f5; }
.composer { display: flex; gap: 8px; margin-top: 14px; }
.composer input { flex: 1; border: 1px solid var(--linha); border-radius: 8px; padding: 10px; font: inherit; }

.ficha small { color: var(--apoio); font-size: 11px; letter-spacing: 0.07em; }
.ficha h3 { margin: 10px 0 2px; }
.ficha p { color: var(--apoio); font-size: 13px; margin: 0; }
.ficha hr { border: 0; border-top: 1px solid var(--linha); margin: 16px 0; }
.ficha b { display: block; margin-top: 6px; }

/* ---------- Leads ---------- */

/* O número de colunas vem do pipeline, então o grid se adapta em vez de fixar a contagem. */
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.kanban > section { background: #edf1f7; border-radius: 10px; padding: 14px; min-height: 240px; }
.kanban h3 { font-size: 12px; color: var(--apoio); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; }
.kanban h3 b { float: right; color: var(--texto); }
.kanban ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kanban li { background: var(--superficie); padding: 14px; border-radius: 8px; box-shadow: var(--sombra); }
.kanban small { display: block; color: var(--apoio); font-size: 12px; margin-top: 5px; }

/* ---------- Serena e Auditoria ---------- */

.pilula { background: #ddf5ec; color: #0d6349; padding: 8px 14px; border-radius: 20px; font-size: 13px; white-space: nowrap; }
.agente { display: flex; gap: 18px; align-items: flex-start; }
.agente-icone { width: 48px; height: 48px; }
.agente h3 { margin-top: 2px; }
.agente p { color: var(--apoio); font-size: 14px; margin: 0 0 10px; }
.agente .nota { font-size: 13px; color: var(--apoio); font-style: italic; }

.eventos li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.eventos li:last-child { border-bottom: 0; }
.eventos span:last-child { display: grid; gap: 3px; }
.eventos small { color: var(--apoio); font-size: 12px; }
.bolinha { font-size: 16px; line-height: 1.4; }
.bolinha.ok { color: var(--verde); }
.bolinha.alerta { color: var(--ambar); }

/* ---------- Telas estreitas ---------- */

@media (max-width: 980px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { border-right: 0; border-bottom: 1px solid var(--linha); padding: 10px; }
  .relogio, .rodape-lateral, .marca small, .divisor { display: none; }
  .marca { margin-bottom: 8px; }
  /* O menu vira uma faixa que rola dentro de si mesma, sem empurrar a página. */
  nav { min-width: 0; overflow-x: auto; }
  nav ul { grid-auto-flow: column; grid-auto-columns: max-content; gap: 4px; }
  nav button { white-space: nowrap; }
  .plantao { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 0; padding: 10px 14px; }
  .plantao > div { padding: 4px 12px; }
  .plantao > div:nth-child(2) { border-right: 0; }
  .topo, .tela { padding-left: 18px; padding-right: 18px; }
  .aviso { margin-left: 18px; margin-right: 18px; }
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade, .inbox, .kanban { grid-template-columns: minmax(0, 1fr); }
  .lista, .thread { border-right: 0; border-bottom: 1px solid var(--linha); }
  .ficha { border-bottom: 0; }
}

@media (max-width: 560px) {
  .plantao strong { font-size: 13px; }
  .nome-equipe { display: none; }
  .cabecalho { flex-direction: column; }
  .cabecalho h2 { font-size: 21px; }
  .metricas { grid-template-columns: minmax(0, 1fr); }
  .mensagens li { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------------
   Agenda

   Grade semanal desenhada à mão. Cada dia é uma coluna com posicionamento
   proporcional ao horário: um compromisso das 14h às 15h ocupa exatamente a
   altura de uma hora, então "quanto tempo isso toma" se lê de relance, sem
   precisar ler o texto.
   --------------------------------------------------------------------------- */

/* Altura de uma hora na grade. Fica aqui, e o JS lê daqui: enquanto eram dois
   números em dois arquivos, a régua de horas e os compromissos desalinhavam. */
:root { --altura-hora: 56px; }

.acoes-agenda {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.campo-inline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--apoio);
}
.campo-inline select {
  font: inherit;
  font-size: 14px;
  color: var(--texto);
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--superficie);
  min-width: 200px;
}

.navegacao-semana { display: flex; gap: 4px; }
.navegacao-semana button {
  font: inherit;
  padding: 8px 14px;
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  border-radius: 8px;
}
.navegacao-semana button:hover { background: var(--fundo); }

.periodo-agenda {
  margin: 4px 0 12px;
  font-weight: 600;
  color: var(--apoio);
}

.grade-agenda {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.coluna-horas {
  border-right: 1px solid var(--linha);
  padding-top: 34px; /* alinha com a faixa de cabeçalho dos dias */
}
.coluna-horas span {
  display: block;
  height: var(--altura-hora);
  font-size: 11px;
  color: var(--apoio);
  text-align: right;
  padding-right: 6px;
  transform: translateY(-6px);
}

.dias-agenda {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow-x: auto;
}

.dia-agenda { border-left: 1px solid var(--linha); }
.dia-agenda:first-child { border-left: none; }

.dia-agenda > .titulo-dia {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--linha);
  background: var(--fundo);
  text-transform: capitalize;
}
.dia-agenda.hoje > .titulo-dia { background: #e6f4f7; color: var(--ciano); }

/* Altura definida pelo JS conforme a janela de horas exibida. */
.faixa-dia { position: relative; }

/* Linhas de meia hora: referência de leitura, não interativas. */
.linha-hora {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid var(--linha);
  pointer-events: none;
}
.linha-hora.meia { border-top-style: dotted; }

.vaga {
  position: absolute;
  left: 0; right: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.vaga:hover { background: rgba(14, 143, 161, 0.09); }

.compromisso {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 6px;
  border-left: 3px solid var(--ciano);
  background: #e6f4f7;
  color: var(--texto);
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.compromisso strong { display: block; font-size: 11px; font-weight: 600; }
.compromisso span { color: var(--apoio); }

/* Consulta curta não tem altura para duas linhas: nome e horário passam a
   dividir a mesma, com o nome cedendo espaço primeiro. */
.compromisso.curto {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding-top: 1px;
}
.compromisso.curto strong {
  display: inline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compromisso.curto span { flex: none; }

.compromisso.confirmado { border-left-color: var(--verde); background: #e4f3ed; }
.compromisso.compareceu { border-left-color: var(--verde); background: #d8efe5; }
.compromisso.faltou     { border-left-color: #b3261e; background: #fbe9e7; }
.compromisso.cancelado  {
  border-left-color: var(--apoio);
  background: var(--fundo);
  opacity: .65;
  text-decoration: line-through;
}

.bloqueio-agenda {
  position: absolute;
  left: 0; right: 0;
  background: repeating-linear-gradient(
    45deg, rgba(90, 100, 120, .12), rgba(90, 100, 120, .12) 6px,
    transparent 6px, transparent 12px
  );
  border-top: 1px solid rgba(90, 100, 120, .25);
  border-bottom: 1px solid rgba(90, 100, 120, .25);
  font-size: 10px;
  color: var(--apoio);
  padding: 2px 5px;
  pointer-events: none;
  overflow: hidden;
}

.legenda-agenda {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--apoio);
  margin-top: 12px;
}
.legenda-agenda .marca {
  width: 11px; height: 11px;
  border-radius: 3px;
  display: inline-block;
  margin-left: 10px;
}
.legenda-agenda .marca:first-child { margin-left: 0; }
.marca.agendado   { background: #e6f4f7; border-left: 3px solid var(--ciano); }
.marca.confirmado { background: #e4f3ed; border-left: 3px solid var(--verde); }
.marca.compareceu { background: #d8efe5; border-left: 3px solid var(--verde); }
.marca.faltou     { background: #fbe9e7; border-left: 3px solid #b3261e; }
.marca.bloqueio   {
  background: repeating-linear-gradient(
    45deg, rgba(90,100,120,.2), rgba(90,100,120,.2) 3px,
    transparent 3px, transparent 6px
  );
}

/* --- Painéis de proposta e de compromisso --- */

.cortina {
  position: fixed;
  inset: 0;
  background: rgba(13, 25, 48, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 20;
}

.painel-agenda {
  background: var(--superficie);
  border-radius: var(--raio);
  box-shadow: 0 24px 60px rgba(16, 35, 68, .25);
  width: min(460px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 22px 22px;
}
.painel-agenda header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.painel-agenda header h3 { margin: 0; }
.painel-agenda .fechar {
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--apoio);
  padding: 0 4px;
}
.painel-agenda label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--apoio);
}
.painel-agenda label span { display: block; margin-bottom: 4px; }
.painel-agenda input,
.painel-agenda select,
.painel-agenda textarea {
  font: inherit;
  font-size: 14px;
  color: var(--texto);
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--superficie);
  resize: vertical;
}

.resumo-horario {
  background: var(--fundo);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 14px;
  font-weight: 600;
}

.sugestoes {
  list-style: none;
  margin: -8px 0 12px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 8px;
  max-height: 160px;
  overflow-y: auto;
}
.sugestoes li { border-top: 1px solid var(--linha); }
.sugestoes li:first-child { border-top: none; }
.sugestoes button {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font: inherit;
  padding: 8px 11px;
  cursor: pointer;
}
.sugestoes button:hover { background: var(--fundo); }
.sugestoes small { display: block; color: var(--apoio); }

.escolhido {
  background: #e6f4f7;
  border-radius: 8px;
  padding: 8px 11px;
  margin: -4px 0 12px;
  font-size: 14px;
}

.erro-proposta {
  background: #fbe9e7;
  color: #8c1d18;
  border-radius: 8px;
  padding: 9px 11px;
  margin: 0 0 12px;
  font-size: 13px;
}

/* O passo de confirmação repete por extenso o que vai ser gravado. */
.confirmacao {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.confirmacao p { margin: 0 0 12px; }

.painel-agenda .botoes {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.painel-agenda .botoes button {
  font: inherit;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.painel-agenda .secundario {
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--texto);
}
.painel-agenda .primario {
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
}
.painel-agenda button[disabled] { opacity: .55; cursor: progress; }

.detalhe-compromisso {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  font-size: 14px;
}
.detalhe-compromisso dt { color: var(--apoio); font-size: 13px; }
.detalhe-compromisso dd { margin: 0; }

.acoes-compromisso {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.acoes-compromisso button {
  font: inherit;
  font-size: 13px;
  padding: 8px 13px;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
}
.acoes-compromisso button:hover { background: var(--fundo); }
.acoes-compromisso .perigo { border-color: #e5c3bf; color: #8c1d18; }

/* Atalho para abrir a agenda de dentro da conversa. */
.agenda-da-conversa {
  border-top: 1px solid var(--linha);
  padding-top: 10px;
  margin-top: 10px;
}
.agenda-da-conversa h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--apoio);
}
.agenda-da-conversa ul { list-style: none; margin: 0 0 10px; padding: 0; }
.agenda-da-conversa li {
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--linha);
}
.agenda-da-conversa li:last-child { border-bottom: none; }
.agenda-da-conversa .quando { font-weight: 600; }

@media (max-width: 780px) {
  .grade-agenda { grid-template-columns: 44px minmax(0, 1fr); }
  .dias-agenda { grid-template-columns: repeat(7, minmax(92px, 1fr)); }
}

/* ---------------------------------------------------------------- Serena */

/* Quatro peças de estado, lado a lado. "OpenClaw offline" e "Serena desligada"
   pedem ações opostas — e por isso não podem parecer a mesma coisa. */
.serena-estado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.cartao-estado {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px 16px;
}

.cartao-estado small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--apoio);
  margin-bottom: 6px;
}

.cartao-estado strong { display: block; font-size: 17px; }
.cartao-estado .nota { display: block; margin-top: 4px; font-size: 12px; color: var(--apoio); }

/* O tom carrega o significado; o texto continua legível sem a cor. */
[data-tom='ok'] { color: #0f766e; }
[data-tom='alerta'] { color: #b45309; }
[data-tom='ruim'] { color: #b91c1c; }
[data-tom='neutro'] { color: var(--apoio); }

.pilula.pequena { font-size: 11px; padding: 2px 8px; }
.pilula[data-tom='ok'] { background: #d1fae5; color: #065f46; }
.pilula[data-tom='alerta'] { background: #fef3c7; color: #92400e; }

.linha-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

button.perigo {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
}
button.perigo:hover { background: #fecaca; }

/* O prompt efetivo é texto do agente: monoespaçado, com quebra preservada e
   rolagem própria — a página não pode rolar na horizontal por causa dele. */
.prompt-efetivo {
  background: #f8fafc;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 14px;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 340px;
  margin: 0 0 10px;
}

.lista-versoes, .lista-regras, .lista-contatos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lista-versoes li, .lista-regras li, .lista-contatos li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--superficie);
}

.lista-versoes li small, .lista-regras li small, .lista-contatos li small {
  display: block;
  color: var(--apoio);
  font-size: 12.5px;
  margin-top: 3px;
}

.lista-versoes li.publicada { border-color: #99f6e4; background: #f0fdfa; }

/* Regra ou contato desligado continua visível — some da operação, não da tela. */
.lista-regras li.desligada, .lista-contatos li.desligada { opacity: 0.55; }

.form-regra, #form-prompt, #form-contato { display: block; margin-bottom: 14px; }
.form-regra label, #form-prompt label, #form-contato label {
  display: block;
  font-size: 13px;
  color: var(--apoio);
  margin: 10px 0 4px;
}
.form-regra input, .form-regra select, .form-regra textarea,
#form-prompt input, #form-prompt textarea,
#form-contato input, #form-contato textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font: inherit;
  background: var(--superficie);
}

.grade-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.marcador { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--apoio); }
.marcador input { width: auto; }

/* ------------------------------------------------ laboratório de voz */
.voz-card { border-left: 4px solid var(--ambar); }
.aviso-voz {
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff7df;
  color: #6f4a00;
  line-height: 1.5;
}
.consentimento-voz { margin: 14px 0; align-items: flex-start; }
.transcricao-voz {
  margin: 16px 0 0;
  padding: 12px;
  min-height: 80px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--borda);
  border-radius: 8px;
  list-style: none;
}
.transcricao-voz li { margin: 0 0 10px; line-height: 1.45; }
.transcricao-voz li:last-child { margin-bottom: 0; }
.transcricao-voz strong { color: var(--texto); }


/* ---------------------------------------------------------------- modal do QR */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal-caixa {
  background: var(--superficie);
  border-radius: 14px;
  padding: 22px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
}

.modal-caixa h3 { margin: 0 0 12px; font-size: 18px; }

.passos { margin: 0 0 16px; padding-left: 20px; font-size: 14px; color: var(--apoio); line-height: 1.7; }

/* Altura fixa para o QR: sem ela, cada troca de código faz a caixa pular de
   tamanho, e a pessoa perde a mira no meio do escaneamento. */
.qr-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 264px;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 10px;
  margin-bottom: 10px;
}

.qr-area img { width: 248px; height: 248px; image-rendering: pixelated; }

/* Instrução de vinculação: aparece quando o QR não pode ser trazido para a tela. */
.instrucao-vinculo {
  text-align: left;
  line-height: 1.55;
}

.instrucao-vinculo pre {
  background: #10202c;
  color: #cfe8f5;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.9rem;
  margin: 0.8rem 0;
}

.instrucao-vinculo .nota {
  color: #5b7183;
  font-size: 0.85rem;
}



/* Link que se comporta como botão, dentro da instrução de vinculação. */
.instrucao-vinculo .botao-link {
  display: inline-block;
  margin: 4px 0 8px;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--primaria, #2563eb);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.instrucao-vinculo .botao-link:hover { filter: brightness(1.08); }
/* ------------------------------------------------- grade de horário da Serena */

.horario-grade {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.horario-dia {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Largura fixa no nome do dia: sem ela, "Segunda" e "Sábado" desalinham as
   colunas de hora e a grade deixa de ser legível como tabela. */
.horario-nome {
  flex: 0 0 84px;
  font-size: 14px;
  color: var(--apoio);
}

.horario-dia input[type="time"] {
  width: auto;
  padding: 6px 8px;
}