/* DOCSOCIOS: tokens de design (iguais ao Figma) + componentes. */

/* Inter (fonte do Figma), variável 100–900, latim (inclui os acentos do português). Licença SIL OFL 1.1: fonts/INTER-LICENSE.txt */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2-variations"), url("/fonts/inter-latin.woff2") format("woff2");
}

/* Tokens do design system do Figma (arquivo DocSócios › Develop): cores, Inter, raios e sombras. */
:root {
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Content Colors */
  --cor-fundo: #f2f4f7;          /* Background Screen */
  --cor-superficie: #ffffff;     /* Shape Primary / Elevated */
  --cor-superficie-2: #f9fafb;
  --cor-borda: #eaecf0;          /* Shape Secondary */
  --cor-borda-forte: #d0d5dd;    /* Shape Tertiary */
  --cor-texto: #101828;          /* Text Primary */
  --cor-texto-suave: #475467;    /* Text Secondary */
  --cor-texto-fraco: #667085;    /* Text Tertiary */

  /* Brand Colors */
  --cor-primaria: #03d37b;       /* Primary Light: botão primário, item ativo, links */
  --cor-primaria-forte: #066e50; /* Secondary Pure: destaques, valores, Premium */
  --cor-primaria-suave: #dbf0ea; /* Extra Primary Light: aba ativa, fundo de ícones */
  --cor-primaria-media: #a7f0d1; /* Extra Primary Mid */
  --cor-sobre-primaria: #ffffff;
  --cor-escura: #1f1f1f;         /* Quaternary Dark: cabeçalho dos modais */

  /* System Colors */
  --cor-sucesso: #489b1c;
  --cor-sucesso-suave: #edf7e7;
  --cor-alerta: #f79009;
  --cor-alerta-suave: #faf0d9;
  --cor-perigo: #db242d;
  --cor-perigo-suave: #ffe8ea;
  --cor-perigo-forte: #7a092b;
  --cor-info: #374bff;
  --cor-info-suave: #ebf1ff;
  --cor-roxo: #066e50;           /* selos de destaque (Premium, gestão) usam o verde escuro da marca */
  --cor-roxo-suave: #dbf0ea;

  --cor-hoje: #effcf6;
  --cor-sombra: rgba(16, 24, 40, 0.06);
  --cor-veu: rgba(16, 24, 40, 0.55);

  --raio-p: 10px;
  --raio: 12px;
  --raio-g: 16px;
  --raio-pilula: 999px;
  --sombra: 0 1px 2px var(--cor-sombra);
  --sombra-alta: 0 8px 8px -4px rgba(16, 24, 40, 0.03), 0 20px 24px -4px rgba(16, 24, 40, 0.08); /* Shadow xl */

  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;

  --texto-xs: 12px;
  --texto-p: 13px;
  --texto-m: 14px;
  --texto-g: 16px;
  --texto-xg: 20px;
  --texto-titulo: 24px;

  --altura-topo: 64px;
  --largura-lateral: 240px;
  --foco: 0 0 0 4px rgba(3, 211, 123, 0.24);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--fonte);
  font-size: var(--texto-m);
  line-height: 1.45;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
a { color: var(--cor-primaria); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--raio-p); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icone { width: 18px; height: 18px; flex: none; }
.texto-suave { color: var(--cor-texto-suave); }
.texto-fraco { color: var(--cor-texto-fraco); font-size: var(--texto-p); }
.numero { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ casca (navegação igual ao Figma) */

.casca { min-height: 100vh; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--esp-5);
  height: 76px; padding: 0 var(--esp-6);
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}
.marca {
  display: flex; align-items: center; gap: var(--esp-2); flex: none;
  color: var(--cor-texto); text-decoration: none;
}
.marca .marca-simbolo { width: 34px; height: auto; }
.marca .marca-nome { width: 112px; height: auto; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: var(--esp-1); }

/* Menu do topo (empresa e médico no computador): ícone em cima, texto embaixo; ativo em verde */
.nav-topo { display: flex; align-items: stretch; align-self: stretch; gap: var(--esp-1); margin-left: var(--esp-4); }
.nav-topo .pop { display: flex; }
.nav-topo-link {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 92px; padding: 0 var(--esp-3);
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  color: var(--cor-texto-suave); font: inherit; font-size: var(--texto-p); text-decoration: none; white-space: nowrap;
}
.nav-topo-link .icone { width: 22px; height: 22px; }
.nav-topo-link:hover { color: var(--cor-texto); }
.nav-topo-link.ativo { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }
.nav-topo-link .contador-nav { position: absolute; top: 12px; left: calc(50% + 6px); margin: 0; }
.nav-topo .painel.menu { top: calc(100% - 4px); left: 0; right: auto; min-width: 200px; }

.usuario .usuario-nome { font-size: var(--texto-g); font-weight: 500; }
.usuario > .icone { width: 16px; height: 16px; color: var(--cor-texto-suave); }
.contador-nav {
  min-width: 18px; padding: 0 5px; border-radius: var(--raio-pilula);
  background: var(--cor-perigo); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600;
}

.conteudo { flex: 1; min-width: 0; padding: var(--esp-6); }
.pagina { max-width: 1280px; margin: 0 auto; }
.pagina-cab {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3);
  margin-bottom: var(--esp-5);
}
.pagina-cab h1 { font-size: var(--texto-titulo); letter-spacing: -0.02em; }
.pagina-cab .subtitulo { width: 100%; margin-top: calc(var(--esp-1) * -1); color: var(--cor-texto-suave); }
.pagina-acoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* Menu lateral (celular): logo no topo, item ativo verde cheio, "Sair" no fim */
.gaveta {
  position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; width: min(300px, 82vw);
  display: flex; flex-direction: column; gap: var(--esp-2);
  padding: var(--esp-6) var(--esp-3) var(--esp-5);
  background: #f7f7f7; border-radius: 0 24px 24px 0; box-shadow: var(--sombra-alta);
  transform: translateX(-105%); transition: transform 0.22s ease; overflow-y: auto;
}
.casca.menu-aberto .gaveta { transform: none; }
.casca.menu-aberto::after { content: ""; position: fixed; inset: 0; z-index: 35; background: var(--cor-veu); }
.gaveta-marca { display: block; text-align: center; margin-bottom: var(--esp-5); }
.gaveta-marca img { width: 96px; height: auto; }
.gaveta-nav { display: flex; flex-direction: column; gap: var(--esp-1); }
.gaveta .nav-link {
  display: flex; align-items: center; gap: var(--esp-3); width: 100%;
  padding: 12px var(--esp-3); border: 0; border-radius: var(--raio); background: none; cursor: pointer;
  color: var(--cor-texto-suave); font: inherit; font-weight: 500; text-align: left; text-decoration: none;
}
.gaveta .nav-link .icone { width: 20px; height: 20px; }
.gaveta .nav-link:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }
.gaveta .nav-link.ativo { background: var(--cor-primaria); color: #fff; }
.gaveta .nav-link.ativo .icone { color: #fff; }
.gaveta .nav-link .contador-nav { margin-left: auto; }
.gaveta-sair { margin-top: auto; color: var(--cor-texto) !important; }

/* Barra inferior do médico (celular): flutuante, item ativo em verde cheio */
.barra-inferior {
  position: fixed; z-index: 20; left: 10px; right: 10px; bottom: 10px;
  display: flex; gap: 2px; padding: 8px;
  background: var(--cor-superficie); border-radius: 24px; box-shadow: var(--sombra-alta);
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.barra-link {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px; border-radius: 20px;
  color: var(--cor-texto-suave); font-size: 11px; text-decoration: none; white-space: nowrap;
}
.barra-link span:not(.contador-nav) { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.barra-link .icone { width: 24px; height: 24px; }
.barra-link.ativo { background: var(--cor-primaria); color: #fff; }
.barra-link .contador-nav { position: absolute; top: 2px; left: calc(50% + 6px); }

.topo-titulo { flex: 1; min-width: 0; text-align: center; font-size: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.so-mobile { display: none !important; }

@media (max-width: 1100px) {
  .nav-topo-link { min-width: 0; padding: 0 var(--esp-2); }
  .usuario .usuario-nome { display: none; }
}

@media (max-width: 860px) {
  .so-desktop { display: none !important; }
  .so-mobile { display: inline-flex !important; }
  .barra-inferior.so-mobile { display: flex !important; }
  .topo { height: 60px; padding: 0 var(--esp-2); gap: var(--esp-2); }
  .topo-acoes { margin-left: 0; }
  .conteudo { padding: var(--esp-4); }
  .modo-medico .conteudo { padding-bottom: 104px; }
  /* No celular o título fica na barra do topo, como no Figma */
  .pagina-cab h1 { display: none; }
  .pagina-cab .subtitulo { margin-top: 0; }
}
/* ------------------------------------------------------------------ botões */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: 36px; padding: 0 var(--esp-4);
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-p);
  background: var(--cor-superficie); color: var(--cor-texto);
  font-weight: 600; font-size: var(--texto-m); cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--cor-superficie-2); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primario { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.btn-primario:hover { background: var(--cor-primaria-forte); border-color: var(--cor-primaria-forte); }
.btn-perigo { color: var(--cor-perigo); border-color: var(--cor-perigo); }
.btn-perigo:hover { background: var(--cor-perigo-suave); }
.btn-perigo-cheio { background: var(--cor-perigo); border-color: var(--cor-perigo); color: #fff; }
.btn-perigo-cheio:hover { filter: brightness(0.92); background: var(--cor-perigo); }
.btn-texto { border-color: transparent; background: transparent; color: var(--cor-primaria); padding: 0 var(--esp-2); }
.btn-texto:hover { background: var(--cor-primaria-suave); }
.btn-pequeno { min-height: 30px; padding: 0 var(--esp-3); font-size: var(--texto-p); }
.btn-icone {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 0; border-radius: var(--raio-p);
  background: transparent; color: var(--cor-texto-suave); cursor: pointer;
}
.btn-icone:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }
.btn-icone .icone { width: 20px; height: 20px; }
.contador {
  position: absolute; top: 3px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--cor-perigo); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.ponto { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-alerta); }

.segmento { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--raio-p); background: var(--cor-superficie-2); border: 1px solid var(--cor-borda); }
.segmento button {
  min-height: 30px; padding: 0 var(--esp-3); border: 0; border-radius: 4px;
  background: transparent; color: var(--cor-texto-suave); font-weight: 600; cursor: pointer;
}
.segmento button[aria-pressed="true"] { background: var(--cor-superficie); color: var(--cor-texto); box-shadow: var(--sombra); }

.usuario {
  display: flex; align-items: center; gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-2); border: 0; border-radius: var(--raio);
  background: transparent; cursor: pointer; text-align: left;
}
.usuario:hover { background: var(--cor-superficie-2); }
.usuario-nome { display: flex; flex-direction: column; font-weight: 600; font-size: var(--texto-p); }
.usuario-nome small { font-weight: 400; color: var(--cor-texto-fraco); font-size: var(--texto-xs); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--cor-primaria-suave); color: var(--cor-primaria-forte);
  font-weight: 700; font-size: var(--texto-p);
}
.avatar-g { width: 64px; height: 64px; font-size: var(--texto-xg); }

/* ------------------------------------------------------------------ popovers */

.pop { position: relative; }
.painel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  width: min(380px, calc(100vw - 24px));
  max-height: 70vh; overflow-y: auto;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
}
.painel-cab {
  position: sticky; top: 0;
  display: flex; align-items: center; gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda);
  font-weight: 700;
}
.painel-cab .btn-texto { margin-left: auto; }
.painel-item {
  display: flex; gap: var(--esp-3); width: 100%;
  padding: var(--esp-3) var(--esp-4); border: 0; border-bottom: 1px solid var(--cor-borda);
  background: transparent; text-align: left; cursor: pointer;
}
.painel-item:last-child { border-bottom: 0; }
.painel-item:hover { background: var(--cor-superficie-2); }
.painel-item.nao-lida { background: var(--cor-primaria-suave); }
.painel-item .icone-tipo { color: var(--cor-primaria); margin-top: 2px; }
.painel-item strong { display: block; font-size: var(--texto-m); }
.painel-item span { display: block; color: var(--cor-texto-suave); font-size: var(--texto-p); }
.painel-item time { display: block; color: var(--cor-texto-fraco); font-size: var(--texto-xs); margin-top: 2px; }
.painel-vazio { padding: var(--esp-5) var(--esp-4); text-align: center; color: var(--cor-texto-fraco); }
.menu { width: 200px; padding: var(--esp-1); }
.menu a, .menu button {
  display: flex; align-items: center; gap: var(--esp-2); width: 100%;
  padding: var(--esp-2) var(--esp-3); border: 0; border-radius: var(--raio-p);
  background: transparent; color: var(--cor-texto); text-decoration: none; cursor: pointer; text-align: left;
}
.menu a:hover, .menu button:hover { background: var(--cor-superficie-2); }

/* ------------------------------------------------------------------ cartões e listas */

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.cartao-corpo { padding: var(--esp-4) var(--esp-5); }
.cartao-cab {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5); border-bottom: 1px solid var(--cor-borda);
}
.cartao-cab h2 { font-size: var(--texto-g); }
.cartao-cab .btn, .cartao-cab .btn-texto { margin-left: auto; }
.pilha { display: flex; flex-direction: column; gap: var(--esp-4); }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--esp-4); align-items: start; }

.barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3);
  margin-bottom: var(--esp-4);
}
.barra .espaco { flex: 1; }
.navegador { display: inline-flex; align-items: center; gap: var(--esp-1); }
.navegador strong { min-width: 160px; text-align: center; font-size: var(--texto-g); }

.lista { display: flex; flex-direction: column; gap: var(--esp-3); }
.item {
  display: flex; align-items: center; gap: var(--esp-4);
  padding: var(--esp-4);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.item-clicavel { cursor: pointer; }
.item-clicavel:hover { border-color: var(--cor-borda-forte); }
.item-data {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 64px; flex: none; padding: var(--esp-2) 0;
  border-radius: var(--raio-p); background: var(--cor-primaria-suave); color: var(--cor-primaria-forte);
}
.item-data .dia { font-size: var(--texto-xg); font-weight: 700; line-height: 1.1; }
.item-data .mes { font-size: var(--texto-xs); text-transform: uppercase; font-weight: 600; }
.item-data .sem { font-size: var(--texto-xs); }
.item-info { flex: 1; min-width: 0; }
.item-info h3 { font-size: var(--texto-g); overflow-wrap: anywhere; }
.item-info p { margin: 2px 0 0; color: var(--cor-texto-suave); overflow-wrap: anywhere; }
.item-meta { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); margin-top: var(--esp-2); color: var(--cor-texto-suave); font-size: var(--texto-p); }
.item-meta span { display: inline-flex; align-items: center; gap: 4px; }
.item-meta .icone { width: 14px; height: 14px; }
.item-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: flex-end; }
.item-valor { font-weight: 700; font-size: var(--texto-g); white-space: nowrap; }
.citacao {
  margin: var(--esp-2) 0 0; padding: var(--esp-2) var(--esp-3);
  border-left: 3px solid var(--cor-borda-forte); background: var(--cor-superficie-2);
  color: var(--cor-texto-suave); font-style: italic; border-radius: 0 var(--raio-p) var(--raio-p) 0;
}
@media (max-width: 640px) {
  .item { flex-wrap: wrap; }
  .item > .item-acoes, .pessoa > .item-acoes { width: 100%; justify-content: stretch; }
  .item > .item-acoes .btn, .pessoa > .item-acoes .btn { flex: 1; }
}

.selo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--texto-xs); font-weight: 600; white-space: nowrap;
  background: var(--cor-superficie-2); color: var(--cor-texto-suave);
}
.selo-info { background: var(--cor-info-suave); color: var(--cor-info); }
.selo-sucesso { background: var(--cor-sucesso-suave); color: var(--cor-sucesso); }
.selo-alerta { background: var(--cor-alerta-suave); color: var(--cor-alerta); }
.selo-perigo { background: var(--cor-perigo-suave); color: var(--cor-perigo); }
.selo-roxo { background: var(--cor-roxo-suave); color: var(--cor-roxo); }

.aviso {
  display: flex; align-items: flex-start; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-p);
  background: var(--cor-info-suave); color: var(--cor-texto);
}
.aviso .icone { color: var(--cor-info); margin-top: 1px; }
.aviso-texto { flex: 1; }
.aviso-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-2); }
.aviso-alerta { background: var(--cor-alerta-suave); }
.aviso-alerta .icone { color: var(--cor-alerta); }
.aviso-sucesso { background: var(--cor-sucesso-suave); }
.aviso-sucesso .icone { color: var(--cor-sucesso); }
.aviso-perigo { background: var(--cor-perigo-suave); }
.aviso-perigo .icone { color: var(--cor-perigo); }

.vazio {
  display: flex; flex-direction: column; align-items: center; gap: var(--esp-2);
  padding: var(--esp-6) var(--esp-4); text-align: center; color: var(--cor-texto-suave);
}
.vazio .icone { width: 40px; height: 40px; color: var(--cor-texto-fraco); }
.vazio h3 { color: var(--cor-texto); font-size: var(--texto-g); }
.vazio p { margin: 0; max-width: 420px; }

.esqueleto { display: flex; flex-direction: column; gap: var(--esp-3); }
.esqueleto span {
  display: block; height: 64px; border-radius: var(--raio);
  background: linear-gradient(90deg, var(--cor-superficie-2), var(--cor-borda), var(--cor-superficie-2));
  background-size: 200% 100%; animation: brilho 1.2s linear infinite;
}
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto span { animation: none; } }

.abas { display: flex; gap: var(--esp-1); border-bottom: 1px solid var(--cor-borda); margin-bottom: var(--esp-4); overflow-x: auto; overflow-y: hidden; }
.abas button {
  padding: var(--esp-2) var(--esp-4); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: transparent; color: var(--cor-texto-suave); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.abas button[aria-selected="true"] { color: var(--cor-primaria-forte); border-bottom-color: var(--cor-primaria); }
.abas .selo { margin-left: 6px; }

/* ------------------------------------------------------------------ resumo */

.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--esp-3); margin-bottom: var(--esp-4); }
.resumo-item { padding: var(--esp-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.resumo-item .rotulo { color: var(--cor-texto-suave); font-size: var(--texto-p); }
.resumo-item .valor { margin-top: 2px; font-size: var(--texto-xg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ formulários */

.form { display: flex; flex-direction: column; gap: var(--esp-4); }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--esp-3) var(--esp-4); }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > span, .campo-rotulo { font-size: var(--texto-p); font-weight: 600; color: var(--cor-texto-suave); }
.campo small { color: var(--cor-texto-fraco); font-size: var(--texto-xs); }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"],
input[type="number"], input[type="search"], input[type="tel"], select, textarea {
  width: 100%; min-height: 38px; padding: 0 var(--esp-3);
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-p);
  background: var(--cor-superficie); color: var(--cor-texto);
}
textarea { padding: var(--esp-2) var(--esp-3); min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cor-primaria); box-shadow: var(--foco); }
.barra select, .barra input { width: auto; }
.dias-semana { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip-check span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 32px; padding: 0 var(--esp-2);
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-p);
  font-size: var(--texto-p); font-weight: 600; color: var(--cor-texto-suave);
}
.chip-check input:checked + span { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.chip-check input:focus-visible + span { box-shadow: var(--foco); }
.alternador { display: flex; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-3) 0; border-bottom: 1px solid var(--cor-borda); cursor: pointer; }
.alternador:last-child { border-bottom: 0; }
.alternador input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--cor-primaria); }
.alternador strong { display: block; }
.alternador span { color: var(--cor-texto-suave); font-size: var(--texto-p); }
.erro-form { color: var(--cor-perigo); font-size: var(--texto-p); font-weight: 600; }
.opcao {
  display: flex; align-items: center; gap: var(--esp-3);
  width: 100%; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--cor-borda); border-radius: var(--raio-p);
  cursor: pointer; background: var(--cor-superficie); text-align: left;
}
.opcao:hover { border-color: var(--cor-borda-forte); }
.opcao:has(input:checked) { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.opcao input { accent-color: var(--cor-primaria); }
.opcao-info { flex: 1; min-width: 0; }
.opcao-info span { display: block; color: var(--cor-texto-suave); font-size: var(--texto-p); }
.lista-opcoes { display: flex; flex-direction: column; gap: var(--esp-2); max-height: 320px; overflow-y: auto; }
.lista-opcoes[aria-busy="true"] { opacity: 0.6; }
.opcao.indisponivel { opacity: 0.6; cursor: not-allowed; }
.opcao .selo { flex: none; }

/* ------------------------------------------------------------------ tabelas */

.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: var(--esp-3) var(--esp-4); text-align: left; border-bottom: 1px solid var(--cor-borda); vertical-align: middle; }
.tabela th { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--cor-texto-fraco); font-weight: 600; background: var(--cor-superficie-2); }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tfoot td { font-weight: 700; background: var(--cor-superficie-2); border-top: 1px solid var(--cor-borda-forte); border-bottom: 0; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: var(--cor-superficie-2); }
.tabela .passado td { color: var(--cor-texto-fraco); }

/* ------------------------------------------------------------------ calendário mensal */

.cal { overflow: hidden; }
.cal-semana, .cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-semana div {
  padding: var(--esp-2); text-align: center;
  font-size: var(--texto-xs); font-weight: 600; text-transform: uppercase; color: var(--cor-texto-fraco);
  background: var(--cor-superficie-2); border-bottom: 1px solid var(--cor-borda);
}
.cal-dia {
  min-height: 116px; padding: var(--esp-1) var(--esp-1) var(--esp-2);
  border-right: 1px solid var(--cor-borda); border-bottom: 1px solid var(--cor-borda);
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.cal-dia:nth-child(7n) { border-right: 0; }
.cal-dia.fora { background: var(--cor-superficie-2); }
.cal-dia.fora .cal-num { color: var(--cor-texto-fraco); }
.cal-dia.hoje { background: var(--cor-hoje); }
.cal-num { align-self: flex-end; padding: 0 var(--esp-1); font-size: var(--texto-p); font-weight: 600; }
.cal-dia.hoje .cal-num {
  background: var(--cor-primaria); color: var(--cor-sobre-primaria); border-radius: 10px; min-width: 22px; text-align: center;
}

.chip-plantao {
  display: block; width: 100%;
  padding: 3px 6px; border: 0; border-left: 3px solid var(--cor-equipe, var(--cor-primaria)); border-radius: 4px;
  background: var(--cor-superficie-2); color: var(--cor-texto);
  font-size: var(--texto-xs); text-align: left; cursor: pointer; line-height: 1.3;
}
.chip-plantao:hover { filter: brightness(0.97); background: var(--cor-primaria-suave); }
.chip-plantao b { font-variant-numeric: tabular-nums; }
.chip-plantao span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cor-texto-suave); }
.chip-plantao.passado { opacity: 0.6; }
.chip-plantao.anunciado { background: var(--cor-alerta-suave); }
.chip-plantao.pessoal { border-left-color: var(--cor-roxo); background: var(--cor-roxo-suave); }
.chip-plantao.vaga { border-left-style: dashed; background: var(--cor-sucesso-suave); }
.chip-plantao.meu { box-shadow: inset 0 0 0 1px var(--cor-primaria); }
.chip-plantao .marcador { float: right; width: 7px; height: 7px; margin: 3px 0 0 4px; border-radius: 50%; background: var(--cor-alerta); }
@media (max-width: 760px) {
  .cal-dia { min-height: 64px; }
  .chip-plantao span { display: none; }
}

/* ------------------------------------------------------------------ escala semanal */

.escala-rolagem { overflow-x: auto; }
.escala { width: 100%; min-width: 860px; border-collapse: collapse; table-layout: fixed; }
.escala th, .escala td { border: 1px solid var(--cor-borda); vertical-align: top; padding: var(--esp-2); }
.escala thead th { background: var(--cor-superficie-2); font-size: var(--texto-p); text-align: center; }
.escala thead th.hoje { background: var(--cor-hoje); }
.escala thead th small { display: block; font-weight: 400; color: var(--cor-texto-fraco); text-transform: capitalize; }
.escala th.setor { width: 150px; text-align: left; background: var(--cor-superficie-2); font-size: var(--texto-p); }
.escala th.setor small { display: block; font-weight: 400; color: var(--cor-texto-fraco); }
.escala td { min-height: 60px; }
.escala td.hoje { background: var(--cor-hoje); }
.turnos { display: flex; flex-direction: column; gap: 4px; }
.escala .add-turno { opacity: 0.35; width: 100%; min-height: 24px; font-size: var(--texto-xs); }
.escala td[data-celula] { cursor: pointer; }
.escala td[data-celula]:hover { background: var(--cor-primaria-suave); }
.escala td:hover .add-turno, .escala .add-turno:focus-visible { opacity: 1; }

/* ------------------------------------------------------------------ modal */

dialog.modal {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: var(--raio-g);
  background: var(--cor-superficie); color: var(--cor-texto);
  box-shadow: var(--sombra-alta);
}
dialog.modal.modal-g { width: min(760px, calc(100vw - 24px)); }
dialog.modal.modal-p { width: min(420px, calc(100vw - 24px)); }
dialog.modal::backdrop { background: var(--cor-veu); }
.modal-caixa { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.modal-cab {
  display: flex; align-items: flex-start; gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5); border-bottom: 1px solid var(--cor-borda);
}
.modal-titulo { flex: 1; font-size: var(--texto-xg); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.modal-titulo small { display: block; margin-top: 2px; font-size: var(--texto-m); font-weight: 400; color: var(--cor-texto-suave); }
.modal-corpo { padding: var(--esp-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--esp-4); }
.modal-rodape {
  display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: flex-end;
  padding: var(--esp-3) var(--esp-5); border-top: 1px solid var(--cor-borda); background: var(--cor-superficie-2);
  border-radius: 0 0 var(--raio-g) var(--raio-g);
}
.modal-rodape:empty { display: none; }
.modal-rodape .esquerda { margin-right: auto; display: flex; gap: var(--esp-2); flex-wrap: wrap; }
@media (max-width: 640px) {
  .modal-corpo { padding: var(--esp-4); }
  .modal-rodape .btn { flex: 1 1 auto; }
}

.info-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--esp-4); margin: 0; }
.info { display: flex; gap: var(--esp-3); }
.info .icone { color: var(--cor-primaria); margin-top: 2px; }
.info dt { font-size: var(--texto-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cor-texto-fraco); }
.info dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.info dd small { display: block; font-weight: 400; color: var(--cor-texto-suave); }
.secao-titulo { font-size: var(--texto-m); font-weight: 700; margin-bottom: var(--esp-2); }
.pessoa { display: flex; align-items: center; gap: var(--esp-3); }
.pessoa-info { flex: 1; min-width: 0; }
.pessoa-info strong { display: block; overflow-wrap: anywhere; }
.pessoa-info span { color: var(--cor-texto-suave); font-size: var(--texto-p); }
.contatos { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* ------------------------------------------------------------------ toasts */

.toasts {
  position: fixed; z-index: 100; left: 50%; bottom: var(--esp-5); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--esp-2); width: min(420px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4); border-radius: var(--raio);
  background: var(--cor-texto); color: var(--cor-superficie);
  box-shadow: var(--sombra-alta); font-weight: 500;
  animation: subir 0.18s ease-out;
}
.toast-erro { background: var(--cor-perigo); color: #fff; }
.toast-sucesso { background: var(--cor-sucesso); color: #fff; }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ login */

.login {
  min-height: 100vh; display: grid; place-items: center; padding: var(--esp-4);
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--cor-primaria-suave), transparent 60%),
    var(--cor-fundo);
}
.login-caixa { width: min(420px, 100%); }
.login-caixa .marca { justify-content: center; font-size: var(--texto-xg); margin-bottom: var(--esp-2); }
.login-caixa .marca svg { width: 36px; height: 36px; }
.login-slogan { text-align: center; color: var(--cor-texto-suave); margin: 0 0 var(--esp-5); }
.login .cartao-corpo { padding: var(--esp-5); }
.demo { margin-top: var(--esp-4); }
.demo h2 { font-size: var(--texto-p); color: var(--cor-texto-suave); margin-bottom: var(--esp-2); font-weight: 600; }
.demo-botoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--esp-2); }
.demo-botoes .btn { justify-content: flex-start; font-weight: 500; }

@media print {
  .topo, .gaveta, .barra-inferior, .barra, .pagina-acoes, .toasts { display: none !important; }
  .casca { display: block; }
  .conteudo { padding: 0; }
  .cartao { box-shadow: none; }
}

/* ------------------------------------------------------------------ telas públicas, plano e pagamento */

.login-caixa.publico { width: min(640px, 100%); }
.login-caixa.publico-largo { width: min(1040px, 100%); }
.publico .marca { justify-content: center; margin-bottom: var(--esp-2); }
.publico-titulo { text-align: center; font-size: var(--texto-titulo); letter-spacing: -0.02em; margin-top: var(--esp-2); }
.publico-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--esp-4); align-items: start; }
.login-rodape { text-align: center; color: var(--cor-texto-suave); margin: var(--esp-4) 0 0; }
.login-esqueci { justify-self: center; align-self: center; font-size: var(--texto-p); font-weight: 500; }
.login-chamadas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); margin-top: var(--esp-3); }
.chamada-conheca { margin-top: var(--esp-2); }
.chamada {
  display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4);
  color: var(--cor-texto); text-decoration: none;
}
.chamada:hover { border-color: var(--cor-primaria); }
.chamada > .icone:first-child { color: var(--cor-primaria); }
.chamada span { flex: 1; display: flex; flex-direction: column; font-size: var(--texto-p); color: var(--cor-texto-suave); }
.chamada strong { color: var(--cor-texto); font-size: var(--texto-m); }

.plano { display: flex; flex-direction: column; gap: var(--esp-3); }
.plano-nome { font-weight: 700; color: var(--cor-primaria-forte); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--texto-p); }
.plano-preco strong { font-size: 32px; letter-spacing: -0.02em; }
.plano-preco span { color: var(--cor-texto-suave); }
.plano p { margin: 0; color: var(--cor-texto-suave); }
.plano ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--esp-2); }
.plano li { display: flex; gap: var(--esp-2); align-items: center; }
.plano li .icone { color: var(--cor-sucesso); }

.pix { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--esp-4); align-items: center; }
.qr { width: 180px; height: 180px; border-radius: var(--raio-p); border: 1px solid var(--cor-borda); }

.faixa { margin-bottom: var(--esp-4); }

.convite { margin-bottom: var(--esp-4); }
.convite-corpo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.convite-codigo { font-size: var(--texto-xg); font-weight: 700; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--cor-primaria-forte); }

/* ------------------------------------------------------------------ busca por raio e mapas */

.busca-controles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4); }
.busca-controles .segmento button { display: inline-flex; align-items: center; gap: 6px; }
.busca-controles .segmento .icone { width: 16px; height: 16px; }
.busca-ponto { display: flex; gap: var(--esp-2); flex: 1 1 280px; }
.busca-ponto[hidden] { display: none; }
.busca-ponto input { flex: 1; min-width: 0; }
.busca-raio { flex: 1 1 220px; }
.busca-raio input[type=range] { accent-color: var(--cor-primaria); padding: 0; border: 0; background: none; }
.busca-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.busca-mapa { overflow: hidden; position: sticky; top: var(--esp-4); }
.busca-lista { min-width: 0; }
.mapa { height: 520px; width: 100%; background: var(--cor-superficie-2); }
.mapa-pequeno { height: 260px; border-radius: var(--raio-p); border: 1px solid var(--cor-borda); overflow: hidden; }
.mapa .vazio { height: 100%; }
.leaflet-container { font: inherit; }

.pino-mapa span {
  display: block; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--cor-pino, var(--cor-primaria)); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.pino-mapa span.pino-destaque { animation: pino-pulso 1.6s ease-in-out infinite; }
@keyframes pino-pulso { 50% { box-shadow: 0 0 0 7px rgba(247, 144, 9, 0.28), 0 2px 6px rgba(0, 0, 0, 0.35); } }
.ponto-atual span { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--cor-info); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(31, 111, 235, 0.25); }

.unidade-icone {
  flex: none; width: 40px; height: 40px; border-radius: var(--raio-p); display: grid; place-items: center;
  background: var(--cor-primaria-suave); color: var(--cor-primaria-forte);
}
.unidade-icone .icone { width: 20px; height: 20px; }
.unidade-item { width: 100%; text-align: left; font: inherit; color: inherit; display: flex; align-items: center; gap: var(--esp-3); }
.unidade-item > .icone:last-child { color: var(--cor-texto-fraco); flex: none; }

/* ------------------------------------------------------------------ documentos */

.destaque-verde { background: var(--cor-primaria-suave); border-color: transparent; }
.progresso-docs { padding: var(--esp-4); display: grid; gap: var(--esp-2); margin-bottom: var(--esp-4); }
.progresso-docs > div:first-child { display: flex; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; }
.progresso-docs span { color: var(--cor-texto-suave); }
.progresso-docs .icone { width: 16px; height: 16px; vertical-align: -3px; color: var(--cor-sucesso); }
.barra-progresso { height: 8px; border-radius: 99px; background: var(--cor-superficie); overflow: hidden; }
.barra-progresso span { display: block; height: 100%; background: var(--cor-primaria); border-radius: inherit; transition: width 0.3s; }

.docs-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--esp-3); }
.doc { position: relative; padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); }
.doc h3 { margin: 0; font-size: var(--texto-m); }
.doc p { margin: 0; color: var(--cor-texto-suave); font-size: var(--texto-p); }
.doc-icone { width: 44px; height: 44px; border-radius: var(--raio-p); display: grid; place-items: center; background: var(--cor-superficie-2); color: var(--cor-texto-suave); }
.doc-ok .doc-icone { background: var(--cor-primaria-suave); color: var(--cor-primaria-forte); }
.doc-estado { position: absolute; top: var(--esp-3); right: var(--esp-3); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-alerta-suave); color: var(--cor-alerta); }
.doc-estado .icone { width: 14px; height: 14px; }
.doc-ok .doc-estado { background: var(--cor-sucesso-suave); color: var(--cor-sucesso); }
.doc-opcional .doc-estado { background: var(--cor-superficie-2); color: var(--cor-texto-fraco); }
.doc-acoes { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: var(--esp-2); }
.doc-acoes label.btn { cursor: pointer; }
.doc.enviando { opacity: 0.55; pointer-events: none; }

.docs-mini { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-mini {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: var(--texto-p);
  background: var(--cor-primaria-suave); color: var(--cor-primaria-forte); text-decoration: none;
}
.doc-mini:hover { text-decoration: underline; }
.doc-mini .icone { width: 14px; height: 14px; }
.doc-mini.doc-falta { background: var(--cor-perigo-suave); color: var(--cor-perigo); }
.doc-mini.doc-opcional-falta { background: var(--cor-superficie-2); color: var(--cor-texto-fraco); }

/* ------------------------------------------------------------------ premium */

.premium-hero {
  text-align: center; padding: var(--esp-6) var(--esp-4); border-radius: var(--raio-g); margin-bottom: var(--esp-4);
  background: linear-gradient(160deg, #066e50, #03a463); color: #fff; display: grid; justify-items: center; gap: var(--esp-2);
}
.premium-hero h2 { margin: 0; font-size: 26px; }
.premium-hero p { margin: 0; opacity: 0.9; max-width: 460px; }
.premium-hero img { background: #fff; border-radius: var(--raio-g); padding: 8px; }
.lista-beneficios { list-style: none; margin: var(--esp-2) 0 0; padding: 0; display: grid; gap: var(--esp-2); text-align: left; }
.lista-beneficios li { display: flex; gap: var(--esp-2); align-items: flex-start; }
.lista-beneficios .icone { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.premium-hero .lista-beneficios .icone { color: #b7f5d4; }
.premium-ativo .lista-beneficios .icone { color: var(--cor-sucesso); }
.premium-ativo { padding: var(--esp-4); display: grid; gap: var(--esp-3); margin-bottom: var(--esp-4); }
.premium-topo { display: flex; align-items: center; gap: var(--esp-3); }
.premium-topo > div { flex: 1; display: flex; flex-direction: column; }
.premium-topo > div span { color: var(--cor-texto-suave); }
.premium-icone { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.planos-seletor { margin-bottom: var(--esp-3); }
.planos-seletor button { display: inline-flex; align-items: center; gap: 6px; }
.plano-cartao { padding: var(--esp-5); display: grid; gap: var(--esp-3); max-width: 520px; }
.plano-cartao .plano-nome { display: flex; align-items: center; gap: 6px; }
.plano-cartao .plano-nome .icone { width: 16px; height: 16px; }
.planos-opcoes { display: grid; gap: var(--esp-2); }

@media (max-width: 860px) {
  .publico-grade { grid-template-columns: 1fr; }
  .login-chamadas { grid-template-columns: 1fr; }
  .pix { grid-template-columns: 1fr; justify-items: center; }
  .busca-grade { grid-template-columns: 1fr; }
  .busca-mapa { position: static; }
  .mapa { height: 320px; }
  .mapa-pequeno { height: 220px; }
  .busca-controles > .btn { width: 100%; }
  .busca-controles .segmento { display: flex; width: 100%; }
  .busca-controles .segmento button { flex: 1; justify-content: center; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
}

/* ------------------------------------------------------------------ ajustes finais (vêm por último para vencer as regras base) */

.pagina-acoes select { width: auto; max-width: 100%; }
.pessoa { flex-wrap: wrap; }
.pessoa-info { min-width: 140px; }

@media (max-width: 860px) {
  .usuario-nome { display: none; }
  .pagina-acoes { margin-left: 0; width: 100%; }
  .cartao-corpo, .cartao-cab { padding-left: var(--esp-4); padding-right: var(--esp-4); }
  .navegador strong { min-width: 0; }
}
/* ------------------------------------------------------------------ componentes no padrão do Figma (vem por último) */

body { line-height: 1.5; }
a { color: var(--cor-primaria-forte); }
.pagina-cab h1 { font-weight: 500; letter-spacing: -0.01em; }           /* Display XS / Medium */
.pagina-cab .subtitulo { font-size: var(--texto-g); }

/* Botões: altura 40, cantos arredondados; primário verde com texto branco */
.btn { min-height: 40px; border-radius: var(--raio); font-weight: 500; border-color: var(--cor-borda-forte); }
.btn-pequeno { min-height: 32px; border-radius: var(--raio-p); }
.btn-primario:hover { background: #02bf6f; border-color: #02bf6f; }
.btn-bloco { width: 100%; }
.btn-texto { color: var(--cor-primaria-forte); }
.btn-icone { border-radius: var(--raio); }

/* Campos: altura 40, borda Shape Tertiary, raio 12 */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"],
input[type="number"], input[type="search"], input[type="tel"], input[type="month"], select, textarea {
  min-height: 40px; border-radius: var(--raio); border-color: var(--cor-borda-forte);
}
textarea { padding-top: 10px; padding-bottom: 10px; }
input::placeholder, textarea::placeholder { color: var(--cor-texto-fraco); }
.campo > span:first-child, .campo-rotulo { color: var(--cor-texto-suave); font-weight: 500; }
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 44px; }
.campo-senha .btn-icone { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; color: var(--cor-texto-suave); }

/* Cartões: raio 16, borda Shape Secondary */
.cartao, .resumo-item { border-radius: var(--raio-g); border-color: var(--cor-borda); }
.tabela th { text-transform: none; letter-spacing: 0; font-size: var(--texto-p); color: var(--cor-texto); font-weight: 500; }

/* Navegação: item ativo em verde da marca */
.nav-link { border-radius: var(--raio); }
.nav-link.ativo { background: var(--cor-primaria-suave); color: var(--cor-primaria-forte); }
.nav-link.ativo .icone { color: var(--cor-primaria); }

/* Abas segmentadas e abas: ativo em Extra Primary Light */
.segmento { border-radius: var(--raio); background: var(--cor-superficie-2); }
.segmento button { border-radius: var(--raio-p); }
.segmento button[aria-pressed="true"] { background: var(--cor-primaria-suave); color: var(--cor-primaria-forte); box-shadow: none; }
.abas button[aria-selected="true"] { color: var(--cor-primaria-forte); border-bottom-color: var(--cor-primaria); }

/* Modais: cabeçalho escuro (Quaternary Dark) com título branco e ✕ */
.modal-cab { background: var(--cor-escura); color: #fff; border-bottom: 0; border-radius: var(--raio-g) var(--raio-g) 0 0; align-items: center; }
.modal-titulo { color: #fff; font-weight: 500; }
.modal-titulo small { color: var(--cor-borda-forte); }
.modal-titulo .icone { color: var(--cor-primaria); vertical-align: -3px; }
.modal-cab .btn-icone { color: #fff; }
.modal-cab .btn-icone:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.modal-rodape { background: var(--cor-superficie); }

/* Avatar e marca */
.avatar { background: var(--cor-primaria-suave); color: var(--cor-primaria-forte); font-weight: 600; }
.marca { gap: 10px; }

/* Login e cadastro: degradê do verde da marca para quase preto, cartão branco centralizado */
.login { background: linear-gradient(180deg, var(--cor-primaria) 0%, var(--cor-primaria-forte) 48%, #14282a 100%); }
.login-caixa { width: min(600px, 100%); }
.login-cartao { border: 0; box-shadow: var(--sombra-alta); }
.login .login-cartao .cartao-corpo { padding: 32px 24px 24px; }
.login-logo { display: block; width: 160px; height: auto; margin: 0 auto 28px; }
.login-titulo { font-size: var(--texto-titulo); font-weight: 500; letter-spacing: -0.01em; }
.login-cartao .login-slogan { text-align: left; margin: 4px 0 0; font-size: var(--texto-g); }
.login-cartao .btn-primario { min-height: 44px; font-size: var(--texto-g); }
.login-rodape { color: rgba(255, 255, 255, 0.85); }
.login-rodape a { color: var(--cor-primaria-media); }
.publico-titulo, .publico .login-slogan { color: #fff; }
.publico .marca .marca-nome { filter: brightness(0) invert(1); }
.demo h2 { color: var(--cor-texto-fraco); font-weight: 500; }
.demo-botoes { grid-template-columns: 1fr 1fr; }
.demo-botoes .btn { justify-content: center; }
.demo-botoes .btn .icone { color: var(--cor-primaria); }

/* Escala: espaço livre tracejado verde com "+" (como no Figma) */
.add-turno {
  width: 100%; min-height: 40px; border: 1.5px dashed var(--cor-primaria); border-radius: var(--raio-g);
  background: transparent; color: var(--cor-primaria);
}
.add-turno:hover { background: var(--cor-primaria-suave); color: var(--cor-primaria-forte); }
.add-turno .icone { width: 16px; height: 16px; }
.escala .add-turno { opacity: 1; min-height: 40px; }
@media (max-width: 420px) {
  .busca-controles .segmento button { font-size: var(--texto-p); gap: 4px; }
  .busca-controles .segmento .selo { padding: 1px 6px; font-size: 10px; }
}

.equipe-cor { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }

/* ------------------------------------------------------------------ telas do médico no padrão do Figma */

/* Abas grandes em pílula (Meus trabalhos · Disponíveis · Solicitações) */
.seletor-grande {
  display: flex; gap: var(--esp-1); padding: 6px; margin-bottom: var(--esp-4);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 20px;
}
.seletor-grande button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: 44px; padding: 0 var(--esp-3); border: 0; border-radius: 16px; background: none; cursor: pointer;
  color: var(--cor-texto-suave); font: inherit; font-weight: 500; white-space: nowrap;
}
.seletor-grande button .icone { width: 20px; height: 20px; }
.seletor-grande button[aria-selected="true"] { background: var(--cor-primaria); color: #fff; }
.seletor-grande button[aria-selected="true"] .selo { background: #fff; color: var(--cor-primaria-forte); }

/* Filtros em chips (Todos · Aguardando · Aprovadas · Recusadas) */
.chips { display: flex; gap: var(--esp-2); overflow-x: auto; margin-bottom: var(--esp-4); padding-bottom: 2px; }
.chip {
  flex: none; padding: 6px 14px; border: 0; border-radius: var(--raio-pilula); cursor: pointer;
  background: var(--cor-borda); color: var(--cor-texto-suave); font: inherit; font-weight: 500;
}
.chip.ativo { background: var(--cor-primaria-forte); color: #fff; }

/* Cartões de hospital / plantão */
.trabalho { padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3); }
.trabalho-clicavel { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.trabalho-clicavel:hover { border-color: var(--cor-borda-forte); }
.trabalho-topo { display: flex; align-items: flex-start; gap: var(--esp-3); }
.trabalho-info { flex: 1; min-width: 0; }
.trabalho-info h3 { margin: 0; font-size: 18px; font-weight: 500; }
.trabalho-info p { margin: 2px 0 0; color: var(--cor-texto-suave); }
.trabalho-local { display: flex; align-items: center; gap: 4px; }
.trabalho-local .icone { width: 16px; height: 16px; }
.trabalho-rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; font-size: var(--texto-p); }
.trabalho-detalhe { display: flex; flex-direction: column; gap: 2px; padding: var(--esp-3); border-radius: var(--raio); background: var(--cor-fundo); }
.trabalho-detalhe span { color: var(--cor-texto-suave); }
.trabalho-selos { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.trabalho-selos .selo .icone { width: 14px; height: 14px; }
.trabalho-valor { display: flex; align-items: center; gap: var(--esp-2); align-self: flex-end; color: var(--cor-primaria-forte); font-size: 18px; font-weight: 700; white-space: nowrap; }
.trabalho-valor .icone { color: var(--cor-texto-suave); }
.em-andamento { display: inline-flex; align-items: center; gap: 6px; color: var(--cor-sucesso); font-weight: 500; }
.em-andamento::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cor-sucesso); }
.link-verde {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--cor-primaria); font: inherit; font-size: var(--texto-g); font-weight: 500;
}
.link-verde .icone { width: 18px; height: 18px; }
.icone-redondo {
  flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cor-primaria); color: #fff;
}
.icone-redondo .icone { width: 28px; height: 28px; }
.icone-redondo-suave { width: 40px; height: 40px; background: var(--cor-fundo); color: var(--cor-primaria-forte); }
.icone-redondo-suave .icone { width: 20px; height: 20px; }
.selo-cheio { background: var(--cor-primaria); color: #fff; }
.selo .icone { width: 14px; height: 14px; }

/* Perfil */
.perfil-cabeca { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: var(--esp-2) 0 var(--esp-5); text-align: center; }
.perfil-cabeca h1 { margin-top: var(--esp-3); font-size: 18px; font-weight: 600; }
.perfil-cabeca p { margin: 0; color: var(--cor-texto-suave); font-size: var(--texto-p); }
.avatar-xg { width: 100px; height: 100px; font-size: 32px; }
.perfil-lista { display: flex; flex-direction: column; gap: var(--esp-3); max-width: 640px; margin: 0 auto; }
.perfil-item { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); color: var(--cor-texto); text-decoration: none; border-radius: 20px; }
.perfil-item:hover { border-color: var(--cor-borda-forte); }
.perfil-item > .icone { color: var(--cor-texto-suave); }
.perfil-item-texto { flex: 1; display: flex; flex-direction: column; }
.perfil-item-texto strong { font-size: 17px; font-weight: 500; }
.perfil-item-texto small { color: var(--cor-texto-suave); font-size: var(--texto-p); }
.perfil-sair { display: flex; max-width: 640px; margin: var(--esp-5) auto 0; border-radius: 16px; }
.perfil-secao { max-width: 640px; margin: var(--esp-5) auto var(--esp-3); font-size: var(--texto-m); font-weight: 600; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
button.perfil-item { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.perfil-item-perigo strong, .perfil-item-perigo .icone-redondo { color: var(--cor-perigo); }

@media (max-width: 520px) {
  .seletor-grande button { padding: 0 var(--esp-2); font-size: var(--texto-p); gap: 6px; }
  .seletor-grande button .icone { display: none; }
  .trabalho-info h3 { font-size: 17px; }
  .icone-redondo { width: 48px; height: 48px; }
}
@media (max-width: 860px) {
  .topo-titulo.so-mobile { display: block !important; }
  .pagina-cab:not(:has(.pagina-acoes, .subtitulo)) { display: none; }
  .barra-link { font-size: 10px; padding: 8px 0; letter-spacing: -0.1px; }
}