/* Converte - Gestão Clínica · visual
   As cores --principal e --destaque vêm do config.js */
:root {
  --principal: #13287A;
  --destaque: #E8522A;
  --fundo: #f4f6fb;
  --cartao: #ffffff;
  --texto: #1d2333;
  --texto-suave: #5d6475;
  --borda: #dde2ec;
  --ok: #1d7a46;
  --ok-fundo: #e5f5ec;
  --alerta: #9a5b00;
  --alerta-fundo: #fff3dc;
  --perigo: #b42318;
  --perigo-fundo: #fdecea;
  --raio: 10px;
  --sombra: 0 1px 3px rgba(20, 30, 60, .08), 0 4px 14px rgba(20, 30, 60, .05);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15.5px;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
[hidden] { display: none !important; }
h1 { font-size: 1.55rem; font-weight: 600; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .75rem; }
svg { flex-shrink: 0; }
a { color: var(--principal); }

/* ---------- Login ---------- */
.tela-login {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(160deg, var(--principal), #0b1747);
}
.caixa-login {
  background: var(--cartao);
  width: 100%; max-width: 380px;
  padding: 32px 28px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
  text-align: center;
}
.caixa-login img { max-width: 180px; max-height: 140px; margin-bottom: 8px; }
.caixa-login h1 { font-size: 1.2rem; color: var(--principal); margin-bottom: 4px; }
.caixa-login p.sub { color: var(--texto-suave); margin: 0 0 20px; }
.caixa-login form { text-align: left; }

/* ---------- Estrutura com menu lateral ---------- */
.app { display: flex; min-height: 100%; }
.menu-lateral {
  width: 240px; flex-shrink: 0;
  background: var(--principal); color: #fff;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.menu-topo { padding: 16px 16px 14px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.12); }
.menu-topo img { max-width: 104px; max-height: 72px; background: #fff; border-radius: 10px; padding: 5px; }
.menu-topo .nome-clinica { font-weight: 600; margin-top: 8px; }
.menu-lateral nav { flex: 1; padding: 12px 8px; overflow-y: auto; }
.menu-lateral nav a {
  display: flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 2px;
  font-size: 1rem;
}
.menu-lateral nav a:hover { background: rgba(255,255,255,.1); }
.menu-lateral nav a { font-size: .95rem; font-weight: 500; letter-spacing: .005em; opacity: .9; }
.menu-lateral nav a:hover { opacity: 1; }
.menu-lateral nav a.ativo { background: var(--destaque); font-weight: 600; opacity: 1; }
.menu-lateral nav a .icone { width: 22px; display: inline-flex; align-items: center; justify-content: center; }
.menu-rodape { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: .9rem; }
.menu-rodape .usuario { font-weight: 600; }
.menu-rodape .papel { opacity: .8; margin-bottom: 8px; }
.menu-rodape button { width: 100%; margin-top: 6px; }

.conteudo { flex: 1; min-width: 0; padding: 24px 28px 48px; }
.cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.botao-menu-celular { display: none; }

/* ---------- Cartões, tabelas ---------- */
.cartao {
  background: var(--cartao); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 18px 20px; margin-bottom: 18px;
}
.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
th { font-size: .85rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover { background: #f0f3fa; }
td.num, th.num { text-align: right; white-space: nowrap; }
.vazio { text-align: center; color: var(--texto-suave); padding: 28px 10px; }
tfoot td { font-weight: 700; border-bottom: none; }

.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.resumo .item { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 16px; }
.resumo .rotulo { font-size: .85rem; color: var(--texto-suave); }
.resumo .valor { font-size: 1.3rem; font-weight: 700; color: var(--principal); }

.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; }
.dados .rotulo { font-size: .8rem; color: var(--texto-suave); text-transform: uppercase; }
.dados .valor { font-weight: 500; overflow-wrap: anywhere; }

/* ---------- Etiquetas de situação ---------- */
.etiqueta { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok); }
.etiqueta.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta.perigo { background: var(--perigo-fundo); color: var(--perigo); }
.etiqueta.neutra { background: #eceff5; color: var(--texto-suave); }

/* ---------- Botões ---------- */
button, .botao {
  font: inherit; cursor: pointer;
  border: 1px solid var(--borda); background: #fff; color: var(--texto);
  padding: 10px 16px; border-radius: 8px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none; min-height: 42px;
}
button:hover, .botao:hover { filter: brightness(.97); }
button:disabled { opacity: .55; cursor: not-allowed; }
.botao-principal { background: var(--principal); border-color: var(--principal); color: #fff; }
.botao-destaque { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.botao-perigo { background: #fff; border-color: var(--perigo); color: var(--perigo); }
.botao-pequeno { padding: 5px 10px; min-height: 32px; font-size: .9rem; }
.botao-claro { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.botoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Formulários ---------- */
.campo { margin-bottom: 14px; }
.campo label, .rotulo-campo { display: block; font-weight: 600; margin-bottom: 5px; font-size: .95rem; }
.campo .obrigatorio { color: var(--perigo); }
.campo .ajuda { font-size: .85rem; color: var(--texto-suave); margin-top: 4px; }
input, select, textarea {
  font: inherit; width: 100%;
  padding: 10px 12px; min-height: 44px;
  border: 1px solid #c8cfdc; border-radius: 8px; background: #fff; color: var(--texto);
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--destaque) 35%, transparent);
  border-color: var(--destaque);
}
.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.busca { max-width: 420px; }
.opcoes { display: flex; gap: 8px; flex-wrap: wrap; }
.opcoes label {
  border: 2px solid var(--borda); border-radius: 8px; padding: 9px 14px;
  cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.opcoes input { width: auto; min-height: 0; }
.opcoes label:has(input:checked) { border-color: var(--principal); background: #eef1fb; }
details.mais { margin: 6px 0 14px; }
details.mais summary { cursor: pointer; color: var(--principal); font-weight: 600; margin-bottom: 10px; }
.aviso { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.aviso.ok { background: var(--ok-fundo); color: var(--ok); }
.aviso.erro { background: var(--perigo-fundo); color: var(--perigo); }
.aviso.info { background: #eef1fb; color: var(--principal); }

/* Escolha de paciente com busca */
.seletor { position: relative; }
.seletor .lista {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  background: #fff; border: 1px solid var(--borda); border-radius: 8px;
  box-shadow: var(--sombra); max-height: 260px; overflow-y: auto;
}
.seletor .lista button {
  width: 100%; border: none; border-radius: 0; justify-content: flex-start;
  text-align: left; font-weight: 400; display: block;
}
.seletor .lista button:hover, .seletor .lista button:focus { background: #f0f3fa; }
.seletor .lista small { color: var(--texto-suave); }
.seletor .escolhido {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 2px solid var(--principal); background: #eef1fb; border-radius: 8px; padding: 8px 12px;
}

/* Itens do orçamento */
.itens-orcamento .item { display: grid; grid-template-columns: 1fr 140px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.total-orcamento { text-align: right; font-size: 1.2rem; font-weight: 700; margin: 10px 0; color: var(--principal); }

/* ---------- Janela (modal) ---------- */
.fundo-janela {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(15, 22, 45, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 12px; overflow-y: auto;
}
.janela {
  background: #fff; border-radius: 14px; width: 100%; max-width: 640px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.janela.larga { max-width: 820px; }
.janela-topo { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--borda); }
.janela-topo h2 { margin: 0; }
.janela-corpo { padding: 18px 22px; }
.janela-rodape { padding: 14px 22px; border-top: 1px solid var(--borda); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.fechar { border: none; line-height: 1; padding: 6px; min-height: 0; color: var(--texto-suave); }
.fechar:hover { color: var(--texto); background: #f0f3fa; }

/* Mensagem rápida */
#mensagem {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 100; padding: 12px 20px; border-radius: 10px; color: #fff; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: 90vw;
}
#mensagem.ok { background: var(--ok); }
#mensagem.erro { background: var(--perigo); }

.carregando { color: var(--texto-suave); padding: 20px 0; }
.abas { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.abas button.ativa { background: var(--principal); color: #fff; border-color: var(--principal); }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .menu-lateral { width: 100%; height: auto; position: static; }
  .menu-topo { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 16px; }
  .menu-topo img { max-width: 56px; max-height: 44px; }
  .menu-topo .nome-clinica { margin: 0; flex: 1; }
  .botao-menu-celular { display: inline-flex; }
  .menu-lateral nav, .menu-rodape { display: none; }
  .menu-lateral.aberto nav, .menu-lateral.aberto .menu-rodape { display: block; }
  .conteudo { padding: 18px 16px 40px; }
  .itens-orcamento .item { grid-template-columns: 1fr 110px auto; }
}

/* ---------- Impressão (orçamento) ---------- */
@media print {
  body { background: #fff; }
  .menu-lateral, .cabecalho .botoes, .nao-imprimir, .janela-rodape, .fechar, #mensagem { display: none !important; }
  .app, .conteudo { display: block; padding: 0; }
  .fundo-janela { position: static; background: none; padding: 0; display: block; }
  .janela { box-shadow: none; max-width: none; }
  .cartao { box-shadow: none; border: 1px solid #ccc; }
  body.imprimindo-janela .app { display: none !important; }
}

/* ---------- Agenda ---------- */
.agenda-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.agenda-barra .titulo-periodo { font-weight: 600; font-size: 1.05rem; margin: 0 6px; }
.agenda { display: grid; grid-template-columns: 56px 1fr; background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); overflow-x: auto; overflow-y: hidden; }
.agenda-dias { display: grid; min-width: 0; }
.agenda-cabecalho { position: sticky; top: 0; z-index: 3; background: var(--cartao); border-bottom: 1px solid var(--borda);
  padding: 10px 6px; text-align: center; font-size: .85rem; color: var(--texto-suave); font-weight: 600; }
.agenda-cabecalho.hoje { color: var(--destaque); }
.agenda-cabecalho .dia-num { display: block; font-size: 1.15rem; color: var(--texto); font-weight: 600; }
.agenda-cabecalho.hoje .dia-num { color: var(--destaque); }
.agenda-horas { border-right: 1px solid var(--borda); }
.agenda-horas .rotulo-hora { position: absolute; right: 8px; font-size: .75rem; color: var(--texto-suave); transform: translateY(-50%); }
.agenda-coluna { position: relative; border-left: 1px solid var(--borda); cursor: copy; }
.agenda-coluna:first-child { border-left: none; }
.agenda-linha { position: absolute; left: 0; right: 0; border-top: 1px solid #eef0f5; pointer-events: none; }
.agenda-linha.hora-cheia { border-top-color: #e2e6ef; }
.agenda-expediente { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--principal) 5%, transparent); pointer-events: none; }
.agenda-agora { position: absolute; left: 0; right: 0; border-top: 2px solid var(--destaque); z-index: 2; pointer-events: none; }
.agenda-bloco { position: absolute; left: 3px; right: 3px; z-index: 1; border-radius: 6px; padding: 3px 7px; overflow: hidden; cursor: pointer;
  font-size: .8rem; line-height: 1.25; border-left: 3px solid var(--principal); background: #eef1fb; color: var(--texto); }
.agenda-bloco:hover { filter: brightness(.97); box-shadow: var(--sombra); }
.agenda-bloco strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-bloco small { color: var(--texto-suave); }
.agenda-bloco.confirmado { border-left-color: var(--ok); background: var(--ok-fundo); }
.agenda-bloco.compareceu { border-left-color: #6b7a90; background: #eef0f4; }
.agenda-bloco.faltou { border-left-color: var(--perigo); background: var(--perigo-fundo); }
.agenda-bloco.desmarcou { border-left-color: #b8bfcc; background: #f6f7fa; color: var(--texto-suave); text-decoration: line-through; opacity: .75; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--texto-suave); margin-top: 10px; }
.legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: #eef1fb; border-left: 3px solid var(--principal); }
.legenda .confirmado::before { background: var(--ok-fundo); border-left-color: var(--ok); }
.legenda .compareceu::before { background: #eef0f4; border-left-color: #6b7a90; }
.legenda .faltou::before { background: var(--perigo-fundo); border-left-color: var(--perigo); }
.legenda .desmarcou::before { background: #f6f7fa; border-left-color: #b8bfcc; }
.legenda .expediente::before { background: color-mix(in srgb, var(--principal) 8%, transparent); border-left: none; }

/* ---------- CRM (Kanban) ---------- */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.kanban-coluna { flex: 0 0 272px; background: #eceff5; border-radius: var(--raio); display: flex; flex-direction: column; max-height: calc(100vh - 210px); }
.kanban-coluna.alvo { outline: 2px dashed var(--destaque); outline-offset: -2px; }
.kanban-topo { padding: 12px 12px 8px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; }
.kanban-topo .marca { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kanban-topo .qtd { margin-left: auto; color: var(--texto-suave); font-weight: 500; font-size: .85rem; }
.kanban-cartoes { padding: 0 8px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kanban-cartao { background: var(--cartao); border-radius: 8px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(20,30,60,.08); cursor: grab; border: 1px solid transparent; }
.kanban-cartao:hover { border-color: var(--borda); box-shadow: var(--sombra); }
.kanban-cartao.arrastando { opacity: .5; }
.kanban-cartao .nome { font-weight: 600; font-size: .92rem; }
.kanban-cartao .linha-info { font-size: .8rem; color: var(--texto-suave); margin-top: 2px; }
.kanban-cartao .rodape-cartao { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.kanban-vazio { font-size: .82rem; color: var(--texto-suave); text-align: center; padding: 12px 4px; }

/* ---------- Gráficos ---------- */
.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-bottom: 18px; }
.graficos .cartao { margin-bottom: 0; }
.grafico { width: 100%; height: auto; display: block; }
.g-grade { stroke: #e8ebf2; stroke-width: 1; }
.g-eixo { font-size: 12.5px; fill: var(--texto-suave); font-family: inherit; }
.g-total { font-size: 18px; font-weight: 600; fill: var(--texto); font-family: inherit; }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .85rem; }
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.grafico-legenda small { color: var(--texto-suave); }
.grafico-pizza { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.grafico-pizza > svg { flex: 0 0 150px; width: 150px; }
.grafico-pizza > .grafico-legenda { flex: 1 1 170px; }
.grafico-pizza .grafico-legenda { flex-direction: column; margin-top: 0; }
@media (max-width: 520px) { .grafico-pizza { grid-template-columns: 1fr; } }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .graficos { grid-template-columns: 1fr; }
  .kanban { scroll-snap-type: x mandatory; }
  .kanban-coluna { flex-basis: 84vw; scroll-snap-align: start; max-height: none; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  input, select, textarea { font-size: 16px; } /* evita o zoom automático do iPhone */
  h1 { font-size: 1.3rem; }
  .conteudo { padding: 14px 12px 40px; }
  .cartao { padding: 14px; }
  .cabecalho { gap: 8px; }
  .cabecalho .botoes { width: 100%; }
  .cabecalho .botoes > * { flex: 1 1 auto; }
  .resumo { grid-template-columns: 1fr 1fr; gap: 8px; }
  .resumo .valor { font-size: 1.1rem; }
  .linha { grid-template-columns: 1fr; }
  .abas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .abas button { flex: 0 0 auto; }

  /* janelas ocupam a tela inteira, com os botões sempre visíveis */
  .fundo-janela { padding: 0; }
  .janela, .janela.larga { max-width: none; min-height: 100%; border-radius: 0; display: flex; flex-direction: column; }
  .janela-corpo { flex: 1; padding: 14px; }
  .janela-topo { position: sticky; top: 0; background: #fff; z-index: 2; padding: 14px; }
  .janela-rodape { position: sticky; bottom: 0; background: #fff; padding: 10px 14px; }
  .janela-rodape > * { flex: 1 1 auto; }

  /* tabelas viram cartões: cada linha é um cartão com os rótulos */
  table.responsiva thead { display: none; }
  table.responsiva, table.responsiva tbody, table.responsiva tfoot, table.responsiva tr, table.responsiva td { display: block; width: 100%; }
  table.responsiva tr { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; background: #fff; }
  table.responsiva td { border: none; padding: 5px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; }
  table.responsiva td::before { content: attr(data-label); color: var(--texto-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; text-align: left; flex-shrink: 0; }
  table.responsiva td:not([data-label])::before, table.responsiva td[data-label=""]::before { display: none; }
  table.responsiva td:not([data-label]), table.responsiva td[data-label=""] { justify-content: flex-end; }
  table.responsiva td.vazio { justify-content: center; text-align: center; }
  table.responsiva tfoot tr { background: #f6f7fa; }
  .itens-orcamento .item { grid-template-columns: 1fr 96px auto; }
  .grafico-pizza > svg { margin: 0 auto; }
}

.dica-toque { display: none; }
@media (hover: none) { .dica-toque { display: block; } }