/* RM Care — base compartilhada pelo site, pela tela de login e pelo painel.
   Aqui moram: tokens (cores e medidas), reset, tipografia, acessibilidade e os componentes que mais de uma tela usa.
   REGRA: cor só como token de :root (ou rgb(...) de transparência sobre as cores do tema); nada cravado nas telas. */

/* ===== tokens ===== */
:root {
  /* verde do RM Care */
  --p50: #eef8fa; --p100: #d3edf2; --p200: #a7dae4; --p400: #389bab; --p500: #1a7d8f;
  --p600: #0e6474; --p700: #004b57; --p800: #073e48; --p900: #0a323a; --p950: #041e24;
  /* laranja de destaque: a500 só como FUNDO com texto escuro (--ink-on-accent: branco sobre a500 dá 2,9:1);
     a700 é o laranja que se pode usar como TEXTO sobre fundo claro (5,3:1) */
  --a400: #df9a52; --a500: #d88232; --a600: #c96a27; --a700: #a8541a; --a50: #fdf8f0;
  --ink-on-accent: #041e24;
  /* cinzas de texto (t500 é o mais claro que ainda passa de 4,5:1 sobre branco) e fundos */
  --t900: #111827; --t700: #374151; --t600: #4b5563; --t500: #6b7280; --t400: #9ca3af;
  --linha: #e5e7eb; --fundo: #ffffff; --fundo2: #f9fafb;
  /* estados (erro, sucesso): usar estes tokens, nunca hexadecimal solto nas telas */
  --erro: #a1261e; --erro-escuro: #8c1d1d; --erro-fundo: #fdecec; --erro-borda: #e6b3b0; --erro-campo: #d9534f;
  --ok: #17803f; --ok-fundo: #e3f6ea; --ok-texto: #17603a;
  --fundo-painel: #f3f6f8;
  /* sombras e brilhos da identidade (iguais aos cartões e botões da página inicial) */
  --sombra-card: 0 1px 3px rgb(10 50 58 / .06); --sombra-alta: 0 16px 34px rgb(10 50 58 / .12); --brilho-acento: 0 8px 22px rgb(216 130 50 / .3); --sombra-icone: 0 8px 18px rgb(0 75 87 / .22);
  /* marcas de terceiros que aparecem na tela */
  --zap: #15803d; --zap-forte: #116b33; --yt: #e62117; --yt-forte: #c41a11;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio: 16px;
  --suave: cubic-bezier(.22, 1, .36, 1);
}

/* ===== reset e tipografia ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font-family: var(--sans); color: var(--t700); background: var(--fundo); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { overflow-wrap: break-word; font-family: var(--serif); color: var(--t900); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; }
h3, .h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
.mudo { color: var(--t500); }
.peq { font-size: .85rem; }

/* ===== acessibilidade ===== */
:focus-visible { outline: 3px solid var(--a400); outline-offset: 2px; }
main:focus { outline: none; }
[role="region"][tabindex="0"]:focus-visible { outline: 3px solid var(--a400); outline-offset: 2px; border-radius: 12px; }   /* listas que rolam ganham foco por teclado (JS) */
.pular { position: fixed; z-index: 1000; left: 12px; top: -64px; padding: 12px 18px; border-radius: 10px; background: #fff; color: var(--p900); font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgb(0 0 0 / .3); transition: top .15s; }
.pular:focus { top: 12px; outline: 3px solid var(--a400); outline-offset: 2px; }

/* ===== ícones (Lucide, tag {% icone %}) e caixa de ícone ===== */
.ico { flex: none; vertical-align: middle; }
.caixa-ico { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--p50); color: var(--p600); }
.caixa-ico--ambar { background: rgb(223 154 82 / .14); color: var(--a400); border: 1px solid rgb(223 154 82 / .22); }
.caixa-ico--escura { width: 56px; height: 56px; background: rgb(255 255 255 / .1); color: var(--a400); border: 1px solid rgb(255 255 255 / .12); }
.caixa-ico--contorno { width: 52px; height: 52px; background: rgb(255 255 255 / .04); color: var(--a400); border: 1px solid rgb(255 255 255 / .14); }
.caixa-ico--grande { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 24px; }

/* ===== botão ===== */
.botao { display: inline-block; padding: 14px 28px; border: 2px solid transparent; border-radius: 12px; font-weight: 600; text-decoration: none; text-align: center; transition: transform .15s, box-shadow .2s, background .2s; }
.botao:hover { transform: translateY(-1px); }
.botao--p { padding: 10px 20px; font-size: .9rem; border-radius: 10px; }
.botao--g { padding: 16px 36px; font-size: 1.05rem; }
.botao--acento { background: var(--a500); color: var(--ink-on-accent); }
.botao--acento:hover { background: var(--a600); box-shadow: 0 8px 22px rgb(216 130 50 / .3); }
.botao--vazado { background: transparent; border-color: rgb(255 255 255 / .35); color: #fff; cursor: pointer; }
.botao--vazado:hover { background: rgb(255 255 255 / .1); }
.botao--vidro { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .16); color: #fff; backdrop-filter: blur(8px); }
.botao--vidro:hover { background: rgb(255 255 255 / .13); }
.botao--seta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 26px rgb(216 130 50 / .28); }
.botao--seta .seta { transition: transform .3s var(--suave); }
.botao--seta:hover .seta { transform: translateX(5px); }
.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0; }

/* ===== movimento reduzido: nada anima para quem pediu menos movimento ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===== componentes compartilhados (site, login, painel) ===== */
/* botão de sistema: compacto, para telas de trabalho (painel); o .botao puro é o do site */
.botao--sistema { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-width: 1.5px; border-radius: 10px; background: var(--p700); color: #fff; font: 600 .86rem var(--sans); cursor: pointer; }
.botao--sistema:hover { background: var(--p800); }
.botao--claro { background: #fff; border-color: var(--linha); color: var(--t700); }
.botao--claro:hover { background: var(--fundo2); border-color: var(--p200); }
.botao--perigo { background: #fff; border-color: var(--erro-borda); color: var(--erro); }
.botao--perigo:hover { background: var(--erro-fundo); }
.botao--mini { padding: 6px 12px; font-size: .78rem; border-radius: 8px; }

.rotulo { font-size: .86rem; font-weight: 600; color: var(--t900); }
.campo { width: 100%; padding: 10px 14px; border: 1.5px solid var(--linha); border-radius: 10px; background: #fff; color: var(--t900); font: 500 .9rem var(--sans); transition: border-color .2s, box-shadow .2s, background .2s; }
.campo:focus { outline: none; border-color: var(--p500); box-shadow: 0 0 0 4px rgb(56 155 171 / .16); }
.campo--grande { padding: 14px 16px; border-radius: 12px; background: var(--fundo2); font-size: 1rem; }
.campo--grande:focus { background: #fff; }
textarea.campo { resize: vertical; line-height: 1.55; }

.alerta { padding: 12px 16px; border: 1px solid #b7e0c4; border-radius: 10px; background: #effaf2; color: #17603a; font-weight: 600; }
.alerta--error, .alerta--erro { border-color: #e0a3a3; background: #fdf1f1; color: #8c1d1d; }
.alerta--aviso { border-color: var(--a400); background: var(--a50); color: var(--t700); font-weight: 400; font-size: .95rem; border-radius: 14px; padding: 14px 18px; }
.alerta p { margin: 0; } .alerta ul { margin: 0; padding-left: 1.1em; }

.selo { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.selo--ok { background: var(--ok-fundo); color: var(--ok-texto); }
.selo--aviso { background: var(--a50); color: var(--a700); border: 1px solid #f1d3b0; }
.selo--erro { background: var(--erro-fundo); color: var(--erro-escuro); }
.selo--azul { background: var(--p50); color: var(--p700); }
.selo--cinza { background: #eef0f2; color: var(--t600); }

.rolagem { overflow-x: auto; }
.rolagem--moldura { margin: 8px 0 18px; border: 1px solid var(--linha); border-radius: 14px; }
.tabela { width: 100%; min-width: 720px; border-collapse: collapse; }
.tabela th { padding: 12px 16px; background: #f8fafb; color: var(--t500); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.tabela td { padding: 12px 16px; border-top: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:hover { background: #fafcfc; }
.tabela--mono td { font: 500 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; }
/* tabela de texto corrido (páginas legais) */
.tabela--texto { min-width: 640px; font-size: .88rem; line-height: 1.55; }
.tabela--texto th { padding: 12px 14px; border-top: 0; background: var(--fundo2); color: var(--t900); font-size: .78rem; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: normal; }
.tabela--texto td { padding: 12px 14px; vertical-align: top; }
.tabela--texto tbody tr:hover { background: none; }

/* botão ainda não disponível (recurso em produção): visível e legível, mas sem ação (borda tracejada, fundo apagado, etiqueta clara) */
.botao:disabled, .botao[aria-disabled="true"] { border-style: dashed; border-color: var(--p200); background: var(--fundo2); color: var(--t600); cursor: not-allowed; pointer-events: none; }
.botao:disabled:hover { transform: none; background: var(--fundo2); }
.botao .pn-tag { margin-left: 4px; padding: 2px 8px; background: #fff; border: 1px solid var(--linha); color: var(--t600); }

/* indicador de etapas (cadastro e anamnese): 1 Seus dados · 2 Seu acesso ... ; classes por item: atual, feita */
.etapas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 14px; padding: 0; list-style: none; font-size: .8rem; font-weight: 700; color: var(--t500); }
.etapas li { display: flex; align-items: center; gap: 6px; }
.etapas li::before { content: attr(data-n); display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--linha); color: var(--t600); font-size: .75rem; }
.etapas .atual { color: var(--t900); }
.etapas .atual::before { background: var(--p800); color: #fff; }
.etapas .feita::before { content: "\2713"; background: var(--p600); color: #fff; }
.etapas a { color: inherit; text-decoration: none; }
.etapas a:hover { text-decoration: underline; }