/* ============================================================
   Respira Design System v2 — Clean, Modern, Accessible
   ============================================================ */

/* Carregada aqui direto no CSS de propósito — assim nenhum arquivo .html
   precisa ser tocado pra essa fonte funcionar em todas as páginas de uma vez. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root {
  /* Cores base — antes vinham de "--kimi-color-*", variáveis de um host que
     não existe no nosso projeto (nunca eram definidas, só usava sempre o
     fallback). Aqui os valores já são os de verdade, direto. */
  --r-bg: #ffffff;
  /* Antes um cinza neutro (#f5f5f5) sem relação nenhuma com a marca — troquei
     por um branco com um traço bem sutil de verde-sálvia, pra o "respirar" da
     marca aparecer até no fundo da tela, não só nos acentos. Card continua
     branco puro (--r-bg) por cima disso, então o contraste entre "página" e
     "cartão" não se perde. */
  --r-bg-muted: #F3F6F1;
  --r-bg-raised: #fafafa;
  --r-bg-strong: #eef2ec;
  --r-text: #111111;
  --r-text-secondary: #555555;
  --r-text-tertiary: #888888;
  --r-text-quaternary: #aaaaaa;
  --r-border: #e2e2e2;
  --r-danger: #dc2626;
  --r-positive: #16a34a;
  --r-warning: #d97706;

  /* Cor de identidade Respira — antes era um azul genérico de SaaS (#2563eb,
     o "blue-600" padrão do Tailwind, usado em qualquer produto). Trocado por
     um verde-sálvia acinzentado: mantém a leitura "moderno e profissional"
     da estrutura monocromática, mas carrega a identidade calma/respiração
     da marca, em vez de ser uma cor de sistema qualquer. */
  --r-accent: #3D8C7D;
  --r-accent-soft: rgba(61,140,125,0.10);

  /* Calor humano — contraponto ao verde frio do accent. Usado com moderação
     (a ideia é um acento, não uma segunda cor dominante): o núcleo do
     elemento "respiro", pequenos detalhes decorativos, nunca em botão de
     ação principal (isso continua sendo --r-accent, pra não confundir
     hierarquia de ação). */
  --r-warm: #E8A86C;
  --r-warm-soft: rgba(232,168,108,0.12);

  --r-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-font-display: 'Manrope', var(--r-font);
  /* Fonte de identidade — usada só na marca "Respira" e em momentos de
     abertura (telas de login/cadastro), não em headings de tela densa
     (dashboards, tabelas). Um serifado quente demais em toda parte pesaria
     em telas de trabalho; usado como acento pontual, rende mais. */
  --r-font-identidade: 'Fraunces', serif;
  --r-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --r-radius-sm: 6px;
  --r-radius: 10px;
  --r-radius-md: 12px;
  --r-radius-lg: 16px;
  --r-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --r-shadow-hover: 0 4px 12px rgba(0,0,0,0.06);
  --t-fast: 150ms;
  --t-normal: 250ms;

  /* ---- Compatibilidade com páginas mais antigas ----
     Várias telas do sistema (login, dashboards, agenda etc.) foram construídas
     usando nomes de variável diferentes destes (--accent, --musgo, --bg-primary...).
     Em vez de reescrever cada página, essas variáveis antigas agora apontam pras
     novas — assim as duas gerações de tela funcionam com o mesmo style.css. */
  --areia: var(--r-bg-muted);
  --areia-escura: var(--r-border);
  --musgo: var(--r-accent);
  --musgo-escuro: var(--r-accent);
  --vinho: var(--r-danger);
  --mostarda: var(--r-warning);
  --lavanda: #B7B4D6;
  --carvao: var(--r-text);
  --carvao-suave: var(--r-text-secondary);

  --bg-primary: var(--r-bg);
  --bg-secondary: var(--r-bg-muted);
  --text-primary: var(--r-text);
  --text-secondary: var(--r-text-secondary);
  --accent: var(--r-accent);
  --accent-hover: var(--r-accent);
  --border: var(--r-border);
  --card-shadow: var(--r-shadow);
  --card-radius: var(--r-radius-lg);
  --success: var(--r-positive);
  --danger: var(--r-danger);
  --warning: var(--r-warning);
  --gradient: linear-gradient(135deg, #8BA88F, var(--r-accent));

  --font-display: var(--r-font-display);
  --font-body: var(--r-font);
}

/* Classes usadas nas telas mais antigas que não existiam neste sistema novo */
.btn-outline { background: transparent; border: 2px solid var(--r-border); color: var(--r-text); }
.btn-outline:hover { border-color: var(--r-accent); color: var(--r-accent); }

.toggle-tema { width: 48px; height: 24px; background: var(--r-border); border-radius: 12px; cursor: pointer; position: relative; }
.toggle-tema::after { content: ''; width: 20px; height: 20px; background: var(--r-bg); border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: 0.3s; }
.toggle-tema.ativo { background: var(--r-accent); }
.toggle-tema.ativo::after { transform: translateX(24px); }

.respiro {
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--r-bg), var(--r-warm) 130%);
  animation: respirar 5.5s ease-in-out infinite;
  opacity: 0.9;
  box-shadow: 0 0 40px var(--r-warm-soft);
}
/* Anéis concêntricos opcionais — usar como filhos de .respiro quando o
   elemento for grande o bastante pra eles aparecerem (ex: telas de login).
   Em elementos pequenos (o dot de "online agora", por exemplo) só o núcleo
   já basta — anel demais em 12px vira ruído, não sinal. */
.respiro .anel {
  position: absolute; inset: -30%; border-radius: 50%;
  border: 1.5px solid var(--r-accent-soft);
  animation: respirar 5.5s ease-in-out infinite;
}
.respiro .anel:nth-child(2) { animation-delay: 0.6s; border-color: var(--r-warm-soft); }
.respiro .anel:nth-child(3) { inset: -55%; animation-delay: 1.2s; border-color: rgba(0,0,0,0.04); }

@keyframes respirar {
  0%, 100% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.06); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .respiro, .respiro .anel { animation: none; }
}

/* Pontinho de status "online agora" — reaproveita o mesmo ritmo de
   respiração do resto do sistema, só que em escala mínima. Usado hoje no
   mapa de profissionais (dashboard_paciente.html). */
.respiro-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--r-accent);
  border: 2px solid var(--r-bg);
  animation: respirar 5.5s ease-in-out infinite;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: var(--r-font);
  color: var(--r-text);
  background: var(--r-bg-muted);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 { font-family: var(--r-font-display); font-weight: 700; line-height: 1.2; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
.logo { font-family: var(--r-font-identidade); font-weight: 600; }

/* ============================================================
   Layout
   ============================================================ */
.container { max-width: 900px; margin: 0 auto; padding: 24px; }
.container-sm { max-width: 480px; margin: 0 auto; padding: 24px; }
.container-md { max-width: 720px; margin: 0 auto; padding: 24px; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--r-bg);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-md);
  padding: 16px;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.card:hover { box-shadow: var(--r-shadow-hover); transform: translateY(-1px); }
.card-flat {
  background: var(--r-bg-muted);
  border-radius: var(--r-radius);
  padding: 12px 14px;
}
.card-strong {
  background: var(--r-bg-strong);
  border-radius: var(--r-radius-md);
  padding: 16px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--r-radius);
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
  line-height: 1;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: var(--r-text);
  color: var(--r-bg);
}
.btn-primary:hover:not(:disabled) { opacity: 0.85; }

.btn-ghost {
  background: transparent;
  color: var(--r-text);
  border: 1px solid var(--r-border);
}
.btn-ghost:hover:not(:disabled) { background: var(--r-bg-muted); }

.btn-accent {
  background: var(--r-accent);
  color: #fff;
}
.btn-accent:hover:not(:disabled) { opacity: 0.9; }

.btn-danger {
  background: var(--r-danger);
  color: #fff;
}
.btn-danger:hover:not(:disabled) { opacity: 0.9; }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 14px 24px; font-size: 15px; }

/* ============================================================
   Inputs
   ============================================================ */
.input, select.input, textarea.input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius);
  background: var(--r-bg);
  color: var(--r-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, select.input:focus, textarea.input:focus {
  border-color: var(--r-accent);
  box-shadow: 0 0 0 3px var(--r-accent-soft);
}
.input::placeholder { color: var(--r-text-quaternary); }
.input:disabled { background: var(--r-bg-muted); opacity: 0.6; }

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--r-text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================================
   Tags / Chips
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-radius-sm);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tag-online { background: rgba(22,163,74,0.10); color: var(--r-positive); }
.tag-verified { background: var(--r-accent-soft); color: var(--r-accent); }
.tag-premium { background: rgba(147,51,234,0.10); color: #9333ea; }
.tag-warning { background: rgba(217,119,6,0.10); color: var(--r-warning); }
.tag-danger { background: rgba(220,38,38,0.10); color: var(--r-danger); }
.tag-neutral { background: var(--r-bg-muted); color: var(--r-text-tertiary); }

.chip {
  padding: 6px 12px;
  border-radius: var(--r-radius);
  border: 1px solid var(--r-border);
  background: var(--r-bg);
  font-size: 12px;
  font-weight: 600;
  color: var(--r-text-tertiary);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.chip:hover { border-color: var(--r-text); color: var(--r-text); }
.chip.active {
  background: var(--r-text);
  color: var(--r-bg);
  border-color: var(--r-text);
}

/* ============================================================
   Avatars
   ============================================================ */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--r-bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--r-text-tertiary);
  flex-shrink: 0;
}
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }

/* ============================================================
   Navigation
   ============================================================ */
.topbar {
  background: var(--r-bg);
  border-bottom: 1px solid var(--r-border);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar .logo {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.topbar nav { display: flex; gap: 4px; align-items: center; }
.topbar nav a {
  text-decoration: none;
  color: var(--r-text-secondary);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--r-radius);
  transition: all var(--t-fast);
}
.topbar nav a:hover, .topbar nav a.active {
  background: var(--r-bg-muted);
  color: var(--r-text);
}

/* ============================================================
   Stats / Dashboard
   ============================================================ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat-box {
  padding: 16px;
  border-radius: var(--r-radius-md);
  border: 1px solid var(--r-border);
  background: var(--r-bg);
}
.stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--r-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* ============================================================
   Lists & Items
   ============================================================ */
.list-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--r-radius-md);
  border: 1px solid var(--r-border);
  background: var(--r-bg);
  cursor: pointer;
  transition: all var(--t-fast);
}
.list-item:hover { border-color: var(--r-text); box-shadow: var(--r-shadow-hover); }
.list-item .info { flex: 1; min-width: 0; }
.list-item .title {
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.list-item .subtitle {
  font-size: 12px;
  color: var(--r-text-tertiary);
  margin-top: 2px;
}
.list-item .meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
}

/* ============================================================
   Toggle Switch
   ============================================================ */
.toggle-switch {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--r-bg-muted);
  border: 1px solid var(--r-border);
  position: relative;
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.toggle-switch.on {
  background: var(--r-positive);
  border-color: var(--r-positive);
}
.toggle-switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform var(--t-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-switch.on::after { transform: translateX(20px); }

/* ============================================================
   Agenda Grid
   ============================================================ */
.agenda-grid {
  display: grid;
  grid-template-columns: 50px repeat(7, 1fr);
  gap: 1px;
  background: var(--r-border);
  border-radius: var(--r-radius-md);
  overflow: hidden;
  border: 1px solid var(--r-border);
}
.agenda-grid > div {
  background: var(--r-bg);
  padding: 8px 4px;
  font-size: 11px;
  text-align: center;
}
.agenda-grid .time-label {
  background: var(--r-bg-muted);
  font-weight: 600;
  color: var(--r-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.agenda-grid .day-header {
  background: var(--r-bg-strong);
  font-weight: 700;
  padding: 10px 4px;
}
.agenda-slot {
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--t-fast);
  margin: 1px;
}
.agenda-slot.free {
  background: rgba(22,163,74,0.08);
  border: 1px dashed rgba(22,163,74,0.30);
}
.agenda-slot.free:hover { background: rgba(22,163,74,0.15); }
.agenda-slot.booked {
  background: rgba(217,119,6,0.10);
  border: 1px solid rgba(217,119,6,0.25);
}
.agenda-slot.past {
  background: var(--r-bg-muted);
  opacity: 0.4;
  cursor: default;
}

/* ============================================================
   Timeline
   ============================================================ */
.timeline { display: flex; flex-direction: column; gap: 12px; }
.timeline-item { display: flex; gap: 12px; }
.timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--r-border);
  margin-top: 8px;
  flex-shrink: 0;
}
.timeline-dot.active { background: var(--r-accent); }
.timeline-content { flex: 1; padding-bottom: 12px; border-bottom: 1px solid var(--r-border); }
.timeline-date { font-size: 11px; color: var(--r-text-quaternary); margin-bottom: 4px; }
.timeline-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.timeline-text { font-size: 13px; color: var(--r-text-secondary); line-height: 1.5; }

/* ============================================================
   Chat
   ============================================================ */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 500px;
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-md);
  overflow: hidden;
  background: var(--r-bg);
}
.chat-header {
  padding: 12px 16px;
  background: var(--r-bg-strong);
  border-bottom: 1px solid var(--r-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
}
.msg.sent {
  align-self: flex-end;
  background: var(--r-text);
  color: var(--r-bg);
  border-bottom-right-radius: 4px;
}
.msg.recv {
  align-self: flex-start;
  background: var(--r-bg-muted);
  color: var(--r-text);
  border-bottom-left-radius: 4px;
}
.msg.system {
  align-self: center;
  background: rgba(217,119,6,0.10);
  color: var(--r-warning);
  font-weight: 700;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 8px;
}
.msg-time { font-size: 10px; opacity: 0.5; margin-top: 4px; }
.chat-input-row {
  padding: 10px 16px;
  border-top: 1px solid var(--r-border);
  display: flex;
  gap: 8px;
  background: var(--r-bg);
}
.crisis-btn {
  width: calc(100% - 32px);
  margin: 0 16px 10px;
  padding: 12px;
  background: var(--r-danger);
  color: #fff;
  border: none;
  border-radius: var(--r-radius);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}

/* ============================================================
   Alert / Toast
   ============================================================ */
.alerta {
  padding: 12px 16px;
  border-radius: var(--r-radius);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  display: none;
}
.alerta.show { display: block; }
.alerta-erro { background: rgba(220,38,38,0.08); color: var(--r-danger); border: 1px solid rgba(220,38,38,0.15); }
.alerta-sucesso { background: rgba(22,163,74,0.08); color: var(--r-positive); border: 1px solid rgba(22,163,74,0.15); }

/* ============================================================
   Drawer / Modal
   ============================================================ */
.drawer-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 200;
  display: none;
}
.drawer-fundo.aberto { display: block; }
.drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  background: var(--r-bg);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform var(--t-normal);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--r-border);
}
.drawer.aberto { transform: translateX(0); }
.drawer h3 { font-size: 1.1rem; margin-bottom: 4px; }
.drawer .subtitulo { color: var(--r-text-tertiary); font-size: 13px; margin-bottom: 20px; }
.drawer a {
  display: block;
  padding: 12px 10px;
  border-radius: var(--r-radius);
  text-decoration: none;
  color: var(--r-text);
  font-weight: 600;
  font-size: 14px;
  transition: background var(--t-fast);
}
.drawer a:hover { background: var(--r-bg-muted); }

/* ============================================================
   Landing / Hero
   ============================================================ */
.hero {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.hero p {
  font-size: 1.1rem;
  color: var(--r-text-secondary);
  max-width: 520px;
  margin-bottom: 32px;
  line-height: 1.6;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.section { max-width: 1040px; margin: 0 auto; padding: 80px 24px; }
.section h2 { font-size: 1.6rem; margin-bottom: 12px; }
.section-intro { color: var(--r-text-secondary); max-width: 520px; margin-bottom: 40px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

footer {
  text-align: center;
  padding: 48px 24px;
  color: var(--r-text-tertiary);
  font-size: 13px;
  border-top: 1px solid var(--r-border);
}

/* ============================================================
   Misc
   ============================================================ */
.stars { color: var(--r-warning); font-size: 12px; letter-spacing: 1px; }
.price { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; }
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--r-text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 16px;
}
.back-link:hover { color: var(--r-text); }

/* Scrollbar clean */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--r-border); border-radius: 3px; }