/* app.css — camada visual compartilhada das telas da equipe.
 *
 * Por que este arquivo existe: a paleta, a sidebar, o rodapé e os estados
 * vazios estavam copiados em 17 arquivos. Toda mudança transversal — trocar
 * a identidade visual, corrigir o sticky da sidebar, acrescentar um item de
 * menu — custava dezesseis edições e um script para não esquecer nenhuma.
 * Duas vezes isso deu errado: uma regra em uso foi apagada numa limpeza, e
 * um item de menu precisou entrar em treze arquivos de uma vez.
 *
 * O que entra aqui: o que é IGUAL em todas as telas da equipe.
 * O que NÃO entra: estilo específico de uma tela, que continua no <style>
 * dela. Se algo daqui precisar de exceção numa tela, a exceção mora lá —
 * este arquivo não deve ganhar casos particulares.
 *
 * Não vale para dashboard.html (portal da paciente, identidade própria)
 * nem para as páginas públicas (envio_exames, formulario_seguranca), que
 * não têm sidebar.
 */

:root{
  --ok:#4a7a4a;
  --lg-creme:#F5F2ED;      --lg-card:#FDFCFA;
  --lg-oliva:#776E45;      --lg-oliva-hover:#5C5536;
  --lg-salvia:#D4CFB1;     --lg-marrom:#736245;
  --lg-oliva-medio:#6B6047;--lg-marrom-escuro:#5A5038;
  --lg-texto:#2E2A20;      --lg-terciario:#948C63;
  --lg-borda:#E3DED2;      --lg-erro:#9C4A36;
  --lg-rodape:#AFA98F;
  --lg-serif:'Playfair Display',Georgia,serif;
  --lg-sans:'Raleway',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
/* overflow-x fica só no <html>: no body ele criaria um container de
   rolagem e quebraria o position:sticky da sidebar. No elemento raiz o
   valor propaga para a viewport, então o corte horizontal continua. */
html{overflow-x:hidden;}
html,body{color-scheme:light only;-webkit-font-smoothing:antialiased;color:var(--lg-texto);font-family:var(--lg-sans);}
body{ margin:0; min-height:100vh; background-color:var(--lg-creme); }
.shell{min-height:100vh;display:flex;position:relative;}
.shell::before{content:'';position:absolute;top:0;bottom:0;left:0;width:260px;background:var(--lg-oliva-medio);pointer-events:none;z-index:0;}
.grad-oliva-panel{
  background:
    radial-gradient(circle at 50% 6%, rgba(193,202,197,0.22), transparent 50%),
    radial-gradient(circle at 50% 96%, rgba(211,203,164,0.18), transparent 55%),
    radial-gradient(circle at center, #5B523C 0%, #4F4735 55%, #4A4230 100%);
}
.grad-oliva-btn{
  background:
    radial-gradient(circle at 8% 50%, rgba(193,202,197,0.4), transparent 55%),
    radial-gradient(circle at 92% 50%, rgba(211,203,164,0.35), transparent 55%),
    radial-gradient(circle at center, var(--lg-oliva-medio) 0%, #5E5540 55%, var(--lg-marrom-escuro) 100%);
}
.sidebar{
  width:260px;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;max-height:100vh;
  z-index:30;overflow:hidden;padding:32px 20px;box-sizing:border-box;transition:transform .25s ease;
}
.sidebar-logo{padding:0 8px 36px 8px;}
.sidebar-logo-nome{font-family:var(--lg-serif);font-size:22px;font-weight:400;color:var(--lg-creme);line-height:1.2;}
.sidebar-logo-nome em{font-style:italic;font-weight:400;color:var(--lg-salvia);}
.sidebar-contexto{font-family:var(--lg-sans);font-size:11px;font-weight:500;color:rgba(245,242,237,0.7);margin-top:6px;line-height:1.4;}
.sidebar-contexto strong{font-weight:700;color:rgba(245,242,237,0.9);}
.sidebar-nav{flex:1;padding:0;display:flex;flex-direction:column;gap:4px;overflow-y:auto;min-height:0;}
.sidebar-sep{height:1px;background:rgba(245,242,237,0.14);margin:6px 8px;}
/* line-height fixo aqui de proposito: telas que declaram line-height no
   proprio body (Feedbacks e Configuracoes usam 1.6) carregam esta folha
   antes da delas, e o valor herdado inflava cada item ~5px — 12 itens
   depois a lista estourava a altura da sidebar, ganhava barra de rolagem
   e cortava o ultimo item. O mesmo motivo vale para o botao Sair. */
.sidebar-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;font-size:14.5px;line-height:1.2;font-weight:500;white-space:nowrap;color:#E7E1CE;text-decoration:none;border:none;background:none;cursor:pointer;width:100%;font-family:var(--lg-sans);transition:background .15s,color .15s;}
.sidebar-item svg{width:18px;height:18px;stroke:currentColor;flex-shrink:0;}
.sidebar-item:hover{background:rgba(245,242,237,0.10);color:var(--lg-creme);}
.sidebar-item.ativo{background:rgba(245,242,237,0.16);color:var(--lg-creme);font-weight:600;}
.sidebar-item-embreve{opacity:.6;cursor:default;color:rgba(231,225,206,0.55);}
.sidebar-item-embreve:hover{background:none;color:rgba(231,225,206,0.55);}
.sidebar-embreve-tag{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:inherit;}
.sidebar-badge-novo{
  margin-left:auto;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:rgba(245,242,237,.18);border:1px solid rgba(245,242,237,.35);
  color:var(--lg-creme);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.sidebar-footer{padding:14px 0 0;flex-shrink:0;margin-top:auto;display:flex;flex-direction:column;gap:14px;}
#sidebar-usuario-info{padding:0;gap:10px;}
.sidebar-avatar{width:32px;height:32px;border-radius:50%;background:rgba(245,242,237,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sidebar-avatar svg{width:16px;height:16px;stroke:var(--lg-creme);}
#sidebar-usuario-nome{color:var(--lg-creme);font-size:12.5px;font-weight:600;}
#sidebar-usuario-papel{color:var(--lg-salvia);font-size:11px;}
.btn-sair{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;box-sizing:border-box;font-size:13px;line-height:1.2;font-weight:600;color:var(--lg-creme);background:none;border:1px solid rgba(245,242,237,0.3);border-radius:9px;padding:9px;cursor:pointer;font-family:var(--lg-sans);transition:background .15s;}
.btn-sair:hover{background:rgba(245,242,237,0.1);}
.btn-sair svg{width:14px;height:14px;}
.sidebar-backdrop{display:none;}
.hamburger-btn{display:none;}
.mobile-topbar{display:none;}
.main-wrap{flex:1;min-width:0;position:relative;z-index:1;background:var(--lg-creme);display:flex;flex-direction:column;}
.main{flex:1;display:flex;flex-direction:column;padding:44px 56px;max-width:1180px;margin:0 auto;width:100%;box-sizing:border-box;}
.page-header-row{margin-bottom:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.page-titulo{font-family:var(--lg-serif);font-size:32px;font-weight:500;color:var(--lg-texto);margin:0 0 6px 0;}
.page-sub{font-size:14px;color:var(--lg-marrom);}
.busca-wrap{position:relative;flex:1;max-width:380px;margin-bottom:0;}
.busca-input{
  width:100%;box-sizing:border-box;background:var(--lg-card);border:1px solid var(--lg-borda);
  border-radius:10px;padding:13px 16px 13px 44px;font-size:14.5px;
  font-family:var(--lg-sans);color:var(--lg-texto);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.busca-input::placeholder{color:var(--lg-rodape);}
.busca-input:focus{border-color:var(--lg-oliva);box-shadow:0 0 0 3px rgba(119,110,69,0.16);}
.busca-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--lg-terciario);}
/* O preenchimento oliva vem sempre de .grad-oliva-btn (a classe é a única
   fonte do gradiente), nunca de um background chapado aqui. */
.estado{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:12px;}
.estado svg{width:40px;height:40px;stroke:var(--lg-borda);}
.estado-titulo{font-family:var(--lg-serif);font-size:19px;font-weight:500;color:var(--lg-texto);}
.estado-sub{font-size:14px;color:var(--lg-marrom);max-width:320px;line-height:1.5;}
.estado--vazio{min-height:340px;}
.spinner{width:24px;height:24px;border:2px solid var(--lg-borda);border-top-color:var(--lg-oliva);border-radius:50%;animation:spin .7s linear infinite;}
.hub-rodape,.iris-lockup{margin-top:auto;padding:24px 0 0;display:flex;align-items:center;justify-content:center;gap:10px;}
.hub-rodape-marca{display:flex;align-items:center;gap:6px;}
.hub-rodape-marca img{opacity:.85;flex-shrink:0;display:block;width:auto;object-fit:contain;}
.hub-rodape-simbolo{height:16px;}
.hub-rodape-wordmark{height:14px;}
.hub-rodape-txt{font-family:var(--lg-serif);font-size:11px;font-weight:400;color:var(--lg-rodape);line-height:1.4;}
.hub-rodape-txt em{font-style:italic;font-weight:400;}
/* Mesmo rodapé, outra marcação: telas mais novas usam .iris-lockup. As duas
   ficam aqui para não divergirem de novo — antes cada tela tinha a sua
   cópia (e quatro delas nem tinham), e o rodapé caía em altura diferente
   em cada página. */
.iris-lockup{font-family:var(--lg-serif);font-size:11px;font-weight:400;color:var(--lg-rodape);letter-spacing:normal;text-align:center;}
.iris-lockup-marca{display:flex;align-items:center;gap:6px;}
.iris-lockup-marca img{width:auto;display:block;opacity:.85;flex-shrink:0;object-fit:contain;}
.iris-lockup-simbolo{height:16px;}
.iris-lockup-wordmark{height:14px;}
.iris-lockup span{line-height:1.4;}
.iris-lockup em{font-style:italic;font-weight:400;}

@media(max-width:860px){
  .shell::before{display:none;}
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:280px;z-index:50;transform:translateX(-100%);padding:28px 20px;}
  .sidebar.aberta{transform:translateX(0);box-shadow:0 20px 50px rgba(0,0,0,.3);}
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(46,42,32,0.45);z-index:40;}
  .sidebar-backdrop.ativo{display:block;}
  .mobile-topbar{display:flex;flex-direction:column;gap:14px;padding:18px 20px 16px;position:sticky;top:0;z-index:20;}
  .mobile-topbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .mobile-topbar-marca{font-family:var(--lg-serif);font-size:18px;color:var(--lg-creme);}
  .mobile-topbar-marca em{font-style:italic;color:var(--lg-salvia);}
  .mobile-topbar-contexto{font-family:var(--lg-sans);font-size:10px;font-weight:500;color:rgba(245,242,237,0.7);margin-top:4px;}
  .mobile-topbar-contexto strong{font-weight:700;color:rgba(245,242,237,0.9);}
  .hamburger-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--lg-creme);flex-shrink:0;padding:0;}
  .hamburger-btn svg{width:22px;height:22px;}
  .main{padding:20px;max-width:none;}
  .page-header-row{margin-bottom:16px;}
  .page-titulo{font-size:20px;}
  .page-sub{font-size:12.5px;}
  .busca-wrap{max-width:none;width:100%;}
  .hub-rodape,.iris-lockup{padding-top:20px;}
  .hub-rodape-simbolo,.iris-lockup-simbolo{height:14px;}
  .hub-rodape-wordmark,.iris-lockup-wordmark{height:12px;}
  .hub-rodape-txt,.iris-lockup{font-size:10.5px;}
}

/* ── Lista de pacientes ── */
.pac-lista{display:flex;flex-direction:column;gap:12px;}
.pac-row{
  background:var(--lg-card);border:1px solid var(--lg-borda);border-radius:16px;
  padding:22px 28px;display:flex;align-items:center;gap:32px;flex-wrap:wrap;
  cursor:pointer;transition:border-color .15s,box-shadow .15s;
}
.pac-row:hover{border-color:#D8D0BC;box-shadow:0 8px 24px rgba(60,50,20,0.08);}
.pac-row__id{display:flex;align-items:center;gap:14px;width:220px;flex-shrink:0;min-width:0;}
.pac-avatar{width:42px;height:42px;border-radius:50%;background:#EFEADC;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pac-avatar svg{width:18px;height:18px;stroke:#8A7F58;}
.pac-nome{font-family:var(--lg-serif);font-size:19px;font-weight:400;color:var(--lg-texto);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.pac-row__divisor{width:1px;height:40px;background:#EFEADC;flex-shrink:0;}
.pac-row__dados{flex:1;display:flex;align-items:center;gap:32px;min-width:0;}
.pac-col-label{font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--lg-terciario);margin-bottom:6px;white-space:nowrap;}
.pac-col{flex-shrink:0;}
.pac-col-valor{font-size:13.5px;color:var(--lg-texto);white-space:nowrap;}
.pac-badge-plano{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--lg-salvia);color:var(--lg-texto);font-size:12px;font-weight:600;}
.pac-col--consultas{min-width:60px;}
.pac-col--vencimento{min-width:90px;}
.pac-col--proxima{min-width:150px;}
.pac-consulta-row{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--lg-texto);white-space:nowrap;}
.pac-consulta-row svg{width:14px;height:14px;stroke:var(--lg-terciario);flex-shrink:0;}
/* Sem consulta marcada E passado o intervalo mínimo do plano (migration
   033). Só a cor muda: o texto já diz o que fazer, e um selo com fundo
   competiria com o badge de plano na mesma linha. */
.pac-consulta-row--a-marcar{color:#8A5E1E;font-weight:600;}
.pac-consulta-row--a-marcar svg{stroke:#8A5E1E;}
/* Status agora fica sob o nome, dentro de .pac-row__id — texto puro, sem pílula */
.pac-status{
  display:inline-flex;align-items:center;gap:5px;margin-top:4px;
  color:var(--ok);font-size:10.5px;font-weight:700;letter-spacing:0.04em;
  text-transform:uppercase;white-space:nowrap;
}
.pac-status::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ok);flex-shrink:0;}

/* Grupo de ações: 3 ícones num "pill" recuado */
.pac-acoes{
  flex-shrink:0;display:flex;align-items:center;gap:6px;padding:6px;
  border-radius:13px;background:var(--lg-creme);border:1px solid #EFEADC;
}
.pac-acao{
  width:34px;height:34px;border-radius:9px;background:var(--lg-card);border:1px solid var(--lg-borda);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:background .15s,border-color .15s;
}
.pac-acao:hover{background:#EFEADC;border-color:#D8D0BC;}
.pac-acao svg{width:15px;height:15px;stroke:var(--lg-marrom);}

.pac-convite{
  width:100%;padding-top:10px;margin-top:2px;border-top:1px solid var(--lg-borda);
  font-size:12px;color:var(--lg-marrom);display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.pac-convite a{color:var(--lg-oliva);font-weight:700;text-decoration:underline;cursor:pointer;}

.pac-lista-footer{display:flex;align-items:center;justify-content:space-between;margin-top:20px;font-size:13px;color:var(--lg-marrom);}
.pac-pager{display:flex;align-items:center;gap:6px;}
.pac-pager-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--lg-borda);display:flex;align-items:center;justify-content:center;background:var(--lg-card);color:var(--lg-terciario);}
.pac-pager-num{width:30px;height:30px;border-radius:8px;background:var(--lg-oliva);color:var(--lg-creme);display:flex;align-items:center;justify-content:center;font-weight:600;}
