/* ============================================================
   Atlas Homecare — design system
   Direção "Navy imersivo": paleta das cores da própria logomarca
   (navy, teal, laranja), tipografia Plus Jakarta Sans, formas
   arredondadas (cards 20–26px, botões pill). Substitui a direção
   anterior "Industry" (azul-acinzentado, Barlow, cantos quadrados
   com marcas de registro).
   Fonte hospedada localmente (./fonts) — mesma política de zero
   requisição a terceiros já adotada para mapa/tiles.
   ============================================================ */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-variable.woff2") format("woff2");
}

:root {
  --color-bg: #f7f4ef;
  --color-surface: #ffffff;
  --color-surface-alt: #f1ece4;
  --color-text: #3f3b37;
  --color-divider: color-mix(in srgb, #2b2520 14%, transparent);
  --color-divider-strong: color-mix(in srgb, #2b2520 26%, transparent);

  --color-neutral-100: #f7f4ef;
  --color-neutral-200: #f0e9df;
  --color-neutral-300: #e6ded3;
  --color-neutral-400: #d5cdc2;
  --color-neutral-500: #b3aa9d;
  --color-neutral-600: #8a837c;
  --color-neutral-700: #6b6560;
  --color-neutral-800: #4a4643;
  --color-neutral-900: #2b2520;

  /* Navy — cabeçalho, superfícies escuras, título em destaque */
  --color-navy: #0e2c47;
  --color-navy-700: #12395c;
  --color-navy-soft: #e4ecf1;

  /* Teal — acento de uso geral: ícones, chips, foco, links, estados
     (papel que a rampa única "steel" cumpria no sistema anterior) */
  --color-accent: #2b8ba3;
  --color-accent-light: #4fb3c9;
  --color-accent-100: #e4f1f4;
  --color-accent-200: #cce7ec;
  --color-accent-300: #a8d6de;
  --color-accent-400: #7ec2cd;
  --color-accent-500: #4fb3c9;
  --color-accent-600: #2b8ba3;
  --color-accent-700: #1d6f85;
  --color-accent-800: #155566;
  --color-accent-900: #0c3540;
  --color-accent-2: var(--color-accent);

  /* Laranja — reservado à ação primária (botão CTA e realces pontuais) */
  --color-cta: #f08a34;
  --color-cta-hover: #d9741f;
  --color-cta-active: #c96a17;
  --color-cta-soft: #fcebdb;

  --danger: #b3402a;
  --danger-soft: #fbeae5;

  --st-open: #2563eb;
  --st-open-soft: #e7eefc;
  --st-accepted: #b45309;
  --st-accepted-soft: #fbf0df;
  --st-confirmed: var(--color-accent-700);
  --st-confirmed-soft: var(--color-accent-100);
  --st-completed: #15803d;
  --st-completed-soft: #e5f3ea;
  --st-cancelled: var(--color-neutral-700);
  --st-cancelled-soft: var(--color-neutral-200);

  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--color-navy) 8%, transparent);
  --shadow: 0 6px 20px color-mix(in srgb, var(--color-navy) 10%, transparent);
  --shadow-lg: 0 18px 40px color-mix(in srgb, var(--color-navy) 18%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

/* O `display` do navegador para [hidden] tem especificidade zero e é
   sobreposto por qualquer regra de classe (ex.: .chat-form{display:flex}).
   Sem isto, esconder um elemento via propriedade `hidden` não funciona. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15.5px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

a { color: inherit; }

.ico { display: block; flex: none; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- Header ---------- */

.site-header {
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 10px 0;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-text);
}

.brand-mark { width: 32px; height: 32px; flex: none; object-fit: contain; }

.brand-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.005em;
}
.brand-name em { font-style: normal; color: var(--color-accent-700); font-weight: 600; }

.header-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-neutral-700);
  font-size: 14px;
  margin-right: 4px;
}

@media (max-width: 560px) {
  .header-inner { gap: 10px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-name { font-size: 16px; }
  .header-nav { gap: 6px; }
  .header-nav .btn { padding: 8px 14px; font-size: 13px; }
  /* E-mail da sessão some primeiro — o cargo (badge) já identifica quem
     está logado, e é o texto de comprimento mais imprevisível da barra. */
  .header-user-email { display: none; }
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  white-space: nowrap;
}

.btn-primary { background: var(--color-cta); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--color-cta) 34%, transparent); }
.btn-primary:hover { background: var(--color-cta-hover); }
.btn-primary:active { background: var(--color-cta-active); }

.btn-outline {
  background: var(--color-surface);
  color: var(--color-accent-700);
  border-color: var(--color-divider-strong);
}
.btn-outline:hover { background: var(--color-accent-100); border-color: var(--color-accent); }

.btn-ghost { background: transparent; color: var(--color-accent-700); }
.btn-ghost:hover { background: var(--color-accent-100); }

.btn-danger {
  background: var(--color-surface);
  color: var(--danger);
  border-color: #e3b7a8;
}
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }

.btn-lg { font-size: 16px; padding: 12px 26px; }
.btn-sm { font-size: 13px; padding: 6px 13px; }
.btn-block { width: 100%; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Vista / seções ---------- */

.view {
  flex: 1;
  padding-top: 40px;
  padding-bottom: 64px;
}

.page-head { margin-bottom: 26px; }
.page-head h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 29px;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
}
.page-head p { margin: 0; color: var(--color-neutral-700); }

.dashboard-head {
  padding: 24px 26px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.dashboard-head h1 { font-size: 27px; margin: 4px 0 8px; }
.dashboard-head p { max-width: 46ch; }

.section-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  margin: 34px 0 14px;
  letter-spacing: -0.005em;
}

.eyebrow {
  display: inline-block;
  color: var(--color-accent-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Landing ---------- */

/* ---------- Hero (faixa navy imersiva, sangria total) ---------- */

.landing-hero {
  background: var(--color-navy);
  margin: 0 calc(50% - 50vw);
  padding: 56px calc(50vw - 50%) 96px;
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 48px;
  max-width: 1080px;
  margin: 0 auto;
}

.hero-copy { text-align: left; }

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: color-mix(in srgb, var(--color-accent-light) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent-light) 35%, transparent);
  color: var(--color-accent-light);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
  font-size: 13.5px;
  font-weight: 600;
}
.hero .eyebrow .ico { color: inherit; }

.hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: #fff;
}
.hero h1 .accent { color: var(--color-accent-light); }

.hero p {
  max-width: 46ch;
  margin: 0 0 30px;
  color: #a8c2d3;
  font-size: 17.5px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-actions .btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.hero-actions .btn-outline:hover { background: rgba(255, 255, 255, 0.1); }

.hero-photo {
  position: relative;
  aspect-ratio: 1 / 1;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-float {
  position: absolute;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
}
.hero-float .kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 6px;
}
.hero-float .kicker span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-cta); }
.hero-float strong { display: block; font-size: 15px; color: var(--color-navy); }
.hero-float small { color: var(--color-neutral-700); }
.hero-float.top { right: -18px; top: 34px; }
.hero-float.bottom { left: -22px; bottom: 22px; }

@media (max-width: 820px) {
  .landing-hero { padding: 40px calc(50vw - 50%) 72px; }
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { text-align: center; }
  .hero p { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-photo { max-width: 340px; margin: 40px auto 0; }
  .hero-float { position: static; margin-top: 12px; box-shadow: var(--shadow); }
}

/* ---------- Cartões de estatística (sobrepostos à faixa navy) ---------- */

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: -56px auto 0;
  padding: 0 var(--edge, 0);
  position: relative;
  z-index: 1;
}
.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-lg);
}
.stat-card .icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  margin-bottom: 12px;
}
.stat-card .icon.teal { background: var(--color-accent-100); color: var(--color-accent-700); }
.stat-card .icon.orange { background: var(--color-cta-soft); color: var(--color-cta-active); }
.stat-card strong { display: block; font-size: 15px; color: var(--color-navy); margin-bottom: 4px; }
.stat-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-neutral-700); }

@media (max-width: 900px) {
  .stat-cards { grid-template-columns: 1fr 1fr; margin-top: -32px; }
}
@media (max-width: 560px) {
  .stat-cards { grid-template-columns: 1fr; }
}

/* ---------- Como funciona (landing) ---------- */

.section-head { text-align: center; margin: 0 0 34px; }
.section-head .eyebrow {
  display: inline-block; margin-bottom: 10px;
  color: var(--color-accent-700); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.section-head h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.16;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}

.how-it-works { margin-top: 88px; }

.how-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.how-track {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: var(--shadow);
}
.how-track.dark {
  background: var(--color-navy);
  color: #fff;
  box-shadow: none;
}

.how-track-head { display: flex; align-items: center; gap: 12px; }
.how-track-head .icon {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  display: flex; align-items: center; justify-content: center;
}
.how-track.dark .how-track-head .icon {
  background: color-mix(in srgb, var(--color-accent-light) 18%, transparent);
  color: var(--color-accent-light);
}
.how-track-head h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  margin: 0;
  font-size: 21px;
  letter-spacing: -0.01em;
}

.how-steps { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.how-step { display: flex; gap: 14px; align-items: flex-start; }
.how-step strong { display: block; font-size: 15px; margin-bottom: 3px; }
.how-step p { margin: 0; color: var(--color-neutral-700); font-size: 14px; line-height: 1.55; }
.how-track.dark .how-step p { color: #a8c2d3; }
.how-track .btn { align-self: flex-start; }
.how-track.dark .btn-primary { background: #fff; color: var(--color-navy); box-shadow: none; }
.how-track.dark .btn-primary:hover { background: var(--color-neutral-200); }

.route-stop-badge.on-dark {
  background: var(--color-accent-light);
  color: var(--color-navy-700);
}

@media (max-width: 760px) {
  .how-tracks { grid-template-columns: 1fr; }
}

/* ---------- Cobertura ---------- */

.coverage {
  margin: 88px calc(50% - 50vw) 0;
  padding: 76px calc(50vw - 50%);
  background: var(--color-surface-alt);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
}
.coverage-copy { max-width: 620px; margin: 0 auto; }
.coverage-copy .section-head { text-align: left; margin-bottom: 16px; }
.coverage-copy p { margin: 0 0 26px; color: var(--color-neutral-800); font-size: 16.5px; line-height: 1.65; max-width: 44ch; }
.coverage-copy .hero-actions { justify-content: flex-start; }
.coverage-copy .btn-outline { background: var(--color-surface); border-color: var(--color-neutral-400); color: var(--color-navy); }

.coverage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 620px; margin: 0 auto; }
.coverage-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-xs);
}
.coverage-card.dark { background: var(--color-navy); color: #fff; }
.coverage-card .icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: grid; place-items: center; margin-bottom: 14px;
}
.coverage-card .icon.orange { background: var(--color-cta-soft); color: var(--color-cta-active); }
.coverage-card .icon.teal { background: color-mix(in srgb, var(--color-accent-light) 18%, transparent); color: var(--color-accent-light); }
.coverage-card strong { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 10px; }
.coverage-card p { margin: 0; font-size: 14px; line-height: 1.6; color: #a8c2d3; }
.coverage-card .city-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.coverage-card .city-tags span { padding: 6px 12px; border-radius: var(--radius-pill); background: var(--color-surface-alt); font-size: 13.5px; color: var(--color-neutral-800); }

.coverage-metrics { grid-column: 1 / -1; display: flex; gap: 34px; background: var(--color-surface); border-radius: var(--radius-lg); padding: 22px 26px; box-shadow: var(--shadow-xs); }
.coverage-metrics b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; color: var(--color-navy); }
.coverage-metrics small { font-size: 13px; color: var(--color-neutral-600); }

@media (max-width: 900px) {
  .coverage { grid-template-columns: 1fr; padding: 56px calc(50vw - 50%); }
}
@media (max-width: 560px) {
  .coverage-grid { grid-template-columns: 1fr; }
}

/* ---------- Avaliações ---------- */

.testimonials { margin-top: 88px; }
.testimonials-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.testimonials-rating { display: flex; align-items: center; gap: 12px; }
.testimonials-rating .stars { color: #f0a934; font-size: 18px; letter-spacing: 2px; }
.testimonials-rating b { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--color-navy); }
.testimonials-rating small { font-size: 13px; color: var(--color-neutral-600); line-height: 1.4; }

.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testimonial-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column;
}
.testimonial-card.dark { background: var(--color-navy); color: #fff; }
.testimonial-card .stars { color: #f0a934; font-size: 13px; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-card .side-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #f0a75f; margin-bottom: 14px; }
.testimonial-card p { font-size: 15.5px; line-height: 1.7; margin: 0 0 22px; flex: 1; color: inherit; }
.testimonial-attr { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--color-divider); }
.testimonial-card.dark .testimonial-attr { border-top-color: rgba(255, 255, 255, 0.14); }
.testimonial-avatar { width: 42px; height: 42px; border-radius: var(--radius-pill); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; background: var(--color-accent-100); color: var(--color-accent-700); }
.testimonial-attr strong { display: block; font-size: 14px; }
.testimonial-attr small { color: var(--color-neutral-600); font-size: 12.5px; }
.testimonial-card.dark .testimonial-attr small { color: #a8c2d3; }

@media (max-width: 900px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* ---------- Perguntas frequentes ---------- */

.faq { margin-top: 88px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.faq-intro { position: sticky; top: 84px; }
.faq-intro .section-head { text-align: left; margin-bottom: 16px; }
.faq-intro p { margin: 0 0 22px; color: var(--color-neutral-700); font-size: 16px; line-height: 1.65; max-width: 38ch; }

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-neutral-400); color: var(--color-neutral-700);
}
.faq-item[open] summary .plus { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.faq-item[open] summary .plus svg { transform: rotate(45deg); transition: transform 0.15s var(--ease); }
.faq-item .faq-body { margin: 0; padding: 0 26px 24px; color: var(--color-neutral-700); font-size: 15px; line-height: 1.7; max-width: 66ch; }

@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
}

/* ---------- Selo de confiança (landing) ---------- */

.council-strip {
  margin-top: 52px;
  text-align: center;
}
.council-strip .label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-neutral-600);
  margin-bottom: 16px;
}
.council-strip .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}

.chip {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-300);
  color: var(--color-neutral-800);
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  padding: 7px 15px;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.chip:hover { border-color: var(--color-accent); color: var(--color-accent-700); }

/* ---------- Banner de encerramento (landing) ---------- */

.cta-banner {
  margin: 64px 0;
  padding: 48px 52px;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--color-navy-700), var(--color-accent-600));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-banner h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 10px;
  max-width: 24ch;
}
.cta-banner p { margin: 0; color: #d3e8ef; font-size: 16px; line-height: 1.6; max-width: 52ch; }
.cta-banner .hero-actions { flex: none; }
.cta-banner .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.cta-banner .btn-outline:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 560px) {
  .cta-banner { padding: 32px 24px; }
  .cta-banner .hero-actions { flex: none; flex-direction: column; align-items: stretch; width: 100%; }
  .cta-banner .hero-actions .btn { width: 100%; }
}

/* ---------- Cards e formulários ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 26px 28px;
}

.card + .card { margin-top: 16px; }
/* Fecho de <form> sem classe .card (ex.: professional-edit.js — o form
   embrulha um .dashboard-layout inteiro, não é ele mesmo um card) seguido
   de um .card (ex.: accountSecurityCard()) não caía na regra acima —
   ficavam colados. Mesmo valor, só estendendo o alcance da regra. */
form + .card { margin-top: 16px; }

/* ---------- Localizações conectadas ---------- */
/* margin-bottom simétrico ao margin-top: em request.js (visão do
   profissional) o .route-card pode vir seguido do card de pagamento —
   sem isto, só o espaço de cima existia, o de baixo era zero. */
.route-card { margin-top:16px; margin-bottom:16px; overflow:hidden; background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); }
.route-card-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 26px 16px; }
.route-card h2 { font-family:var(--font-heading); font-weight:600; margin:2px 0 0; font-size:21px; }
.live-pill { display:inline-flex; gap:7px; align-items:center; padding:5px 10px; color:var(--color-neutral-700); background:var(--color-bg); border-radius:var(--radius); font-size:12px; font-weight:600; }
.live-pill span { width:8px; height:8px; border-radius:50%; background:var(--color-neutral-500); }
.live-pill.active { color:var(--st-completed); background:var(--st-completed-soft); }
.live-pill.active span { background:currentColor; box-shadow:0 0 0 5px rgba(21,128,61,.12); }
.live-pill.simulated { color:var(--st-accepted); background:var(--st-accepted-soft); }
.live-pill.simulated span { background:currentColor; box-shadow:0 0 0 5px rgba(180,83,9,.12); }
.route-layout { display:grid; grid-template-columns:minmax(270px,.8fr) minmax(360px,1.2fr); border-top:1px solid var(--color-divider); border-bottom:1px solid var(--color-divider); }
.connected-locations { padding:28px 26px; }
.location-step { display:flex; gap:13px; align-items:flex-start; }
.location-step > div { min-width:0; }
.location-icon { width:38px; height:38px; display:grid; place-items:center; flex:none; color:#fff; background:var(--color-accent-700); border-radius:var(--radius); }
.location-destination .location-icon { background:var(--color-neutral-900); }
.location-label { display:block; color:var(--color-neutral-600); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.location-step strong { display:block; margin:2px 0; overflow-wrap:anywhere; }
.location-step small { display:block; color:var(--color-neutral-700); }
.route-connector { display:flex; min-height:74px; margin-left:18px; align-items:center; }
.route-connector > span { width:2px; height:74px; border-left:2px dashed var(--color-divider-strong); }
.route-metrics { display:flex; flex-direction:column; margin-left:25px; padding:7px 12px; border:1px solid var(--color-divider); border-radius:var(--radius); background:var(--color-bg); }
.route-metrics strong { color:var(--color-accent-700); }
.route-metrics small { color:var(--color-neutral-700); }
.route-map { position:relative; min-height:300px; overflow:hidden; background:var(--color-bg); border-left:1px solid var(--color-divider); }
.leaflet-map { position:absolute; inset:0; }
.route-actions { display:flex; gap:8px; flex-wrap:wrap; padding:16px 26px 22px; }
.route-map-standalone { border-left:0; min-height:220px; border-radius:var(--radius-lg); }
.route-stop-badge {
  display:flex; align-items:center; justify-content:center; flex:none;
  width:28px; height:28px; border-radius:50%;
  background:var(--color-accent-100); color:var(--color-accent-700);
  font-family:var(--font-heading); font-weight:700; font-size:14px;
}
/* Leaflet dá ao divIcon um fundo/borda próprios por padrão — removidos
   aqui para o .route-stop-badge (mesmo círculo numerado da lista de
   paradas) aparecer sem moldura extra por baixo. */
.route-stop-marker-icon { background:none; border:none; }
@media (max-width:760px) {
  .route-layout { grid-template-columns:1fr; }
  .route-map { border-left:0; border-top:1px solid var(--color-divider); min-height:230px; }
}
@media (max-width:560px) {
  .route-card-head { align-items:flex-start; }
  .live-pill { white-space:nowrap; }
  .route-actions .btn { width:100%; }
}

.card-slim { max-width: 460px; margin: 0 auto; }
.card-medium { max-width: 640px; margin: 0 auto; }
.card-wide { max-width: 820px; margin: 0 auto; }

/* ---------- Documentos legais (termos, privacidade) ---------- */

.legal-page { padding: 0; overflow: hidden; }
.legal-header {
  display: flex; align-items: center; height: 68px; padding: 0 32px;
  background: var(--color-navy);
}
.legal-back { color: #c2d6e2; font-size: 14.5px; font-weight: 600; text-decoration: none; }
.legal-back:hover { color: #fff; }

.legal-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 44px;
  padding: 44px 32px 48px;
  align-items: start;
}
.legal-side { position: sticky; top: 84px; }
.legal-doc-switch {
  display: flex; gap: 6px; padding: 5px; border-radius: var(--radius-pill);
  background: var(--color-surface-alt); margin-bottom: 24px;
}
.legal-doc-switch a {
  flex: 1; display: grid; place-items: center; height: 38px;
  border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; color: var(--color-neutral-700);
  text-decoration: none;
}
.legal-doc-switch a.active { background: var(--color-navy); color: #fff; font-weight: 700; }
.legal-nav-label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 12px;
}
.legal-nav { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.legal-nav-link { padding: 9px 14px; border-radius: var(--radius-sm); color: var(--color-neutral-700); text-decoration: none; }
.legal-nav-link.active {
  background: var(--color-surface); color: var(--color-navy); font-weight: 700;
  border-left: 3px solid var(--color-cta);
}

.legal-doc { color: var(--color-neutral-800); font-size: 15px; line-height: 1.65; max-width: 74ch; }
.legal-doc h1 {
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.03em; color: var(--color-navy); margin: 10px 0 8px;
}
.legal-doc .legal-updated { margin: 0 0 22px; color: var(--color-neutral-600); font-size: 13.5px; }
.legal-doc h3 { font-family: var(--font-heading); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; color: var(--color-navy); margin: 30px 0 10px; }
.legal-doc h3:first-of-type { margin-top: 4px; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul { margin: 0 0 14px; padding-left: 20px; }
.legal-doc li { margin: 0 0 6px; }
.legal-doc strong { color: var(--color-navy); font-weight: 700; }
.legal-doc .legal-notice {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 0 32px; padding: 20px; border-radius: var(--radius-lg);
  background: var(--color-accent-100); border: 1px solid var(--color-accent-300); font-size: 14.5px;
}
.legal-notice-icon {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border-radius: var(--radius-pill); background: var(--color-accent); color: #fff; font-size: 15px; font-style: normal;
}
.legal-notice p { margin: 0; color: var(--color-accent-800); }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-side { position: static; }
}

.card h2 { font-family: var(--font-heading); font-weight: 600; margin: 0 0 4px; font-size: 21px; }
.h2-icon { display: flex; align-items: center; gap: 9px; }
.h2-icon .ico { color: var(--color-accent-700); flex: none; }
.card .card-sub { margin: 0 0 20px; color: var(--color-neutral-700); font-size: 14.5px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.form-grid .full { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--color-text);
}
.field .hint { font-weight: 400; color: var(--color-neutral-600); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--ring);
}

.field textarea { resize: vertical; min-height: 84px; }

/* ---------- Seletor de localização por mapa (cadastro/edição) ---------- */

.map-picker-map {
  position: relative;
  min-height: 220px;
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: crosshair;
}
.map-picker-hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--color-neutral-600);
}
.map-picker-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.checks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.checks label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 11px 17px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-neutral-400);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.checks label:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-weight: 600;
}
.checks input { accent-color: var(--color-accent); width: 16px; height: 16px; }

/* ---------- Painel de acesso (login) — prova social + formulário ---------- */

.auth-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  max-width: 960px;
  margin: 24px auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.auth-side {
  background: var(--color-navy);
  color: #fff;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.auth-side .brand { color: #fff; }
.auth-side h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.auth-side p { margin: 0 0 26px; color: #a8c2d3; font-size: 15.5px; line-height: 1.6; max-width: 38ch; }
.auth-trust { display: flex; flex-direction: column; gap: 13px; list-style: none; margin: 0; padding: 0; }
.auth-trust li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: #c2d6e2; }
.auth-trust .ico-badge {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent-light) 16%, transparent);
  color: var(--color-accent-light);
}
.auth-side .foot-note { font-size: 12.5px; color: #5f7f96; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 48px; background: var(--color-surface); }
.auth-form-inner { width: 100%; max-width: 400px; }

@media (max-width: 820px) {
  .auth-split { grid-template-columns: 1fr; max-width: 480px; }
  .auth-side { padding: 36px; }
}

/* ---------- Cadastro (paciente/profissional) — passos + barra lateral ---------- */

.reg-layout {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr;
  gap: 24px;
  align-items: start;
}
.reg-steps { display: flex; flex-direction: column; gap: 18px; }
.reg-step {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-xs);
}
.reg-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.reg-step-head h2 {
  font-family: var(--font-heading); font-weight: 800; font-size: 18px;
  letter-spacing: -0.01em; margin: 0; color: var(--color-navy);
}
.reg-step-head p { flex-basis: 100%; margin: 6px 0 0; font-size: 14px; color: var(--color-neutral-700); }
.reg-step-num {
  display: grid; place-items: center; flex: none;
  width: 27px; height: 27px; border-radius: var(--radius-pill);
  background: var(--color-navy); color: #fff; font-size: 13px; font-weight: 700;
}
.reg-step-tag {
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--color-surface-alt); font-size: 11.5px; font-weight: 700; color: var(--color-neutral-600);
}

.reg-sidebar { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
.reg-sidebar-card { background: var(--color-navy); color: #fff; border-radius: var(--radius-lg); padding: 26px; }
.reg-sidebar-card h3 { margin: 0 0 16px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.reg-progress { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.reg-progress li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #a8c2d3; }
.reg-progress li.current { color: #fff; font-weight: 600; }
.reg-progress .dot {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.28); font-size: 11px; font-weight: 700;
}
.reg-progress li.done .dot { background: var(--color-accent-light); color: #06202f; border-color: transparent; }
.reg-progress li.current .dot { border-color: var(--color-accent-light); color: var(--color-accent-light); }
.reg-sidebar-card .check-inline { color: #c2d6e2; }
.reg-sidebar-card .check-inline a { color: var(--color-accent-light); text-decoration: underline; }
.reg-sidebar-card .btn-primary { width: 100%; margin-top: 18px; }
.reg-sidebar-card .field label { color: #a8c2d3; }
.reg-sidebar-card .field .hint { color: #7b96ab; }
.reg-sidebar-card .field input,
.reg-sidebar-card .field select,
.reg-sidebar-card .field textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.reg-sidebar-card .field input::placeholder,
.reg-sidebar-card .field textarea::placeholder { color: #5f7f96; }
.reg-sidebar-card .checks label { border-color: rgba(255, 255, 255, 0.18); color: #c2d6e2; }
.reg-sidebar-card .checks label:has(input:checked) {
  border-color: var(--color-accent-light); background: color-mix(in srgb, var(--color-accent-light) 16%, transparent); color: #fff;
}
.reg-sidebar-card .form-note { color: #a8c2d3; }
.reg-sidebar-card .form-note a { color: var(--color-accent-light); }
.reg-info-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-xs); }
.reg-info-card .h2-icon { margin-bottom: 10px; }
.reg-info-card .h2-icon .ico { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--color-cta-soft); color: var(--color-cta-active); padding: 7px; box-sizing: border-box; }
.reg-info-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--color-neutral-700); }

@media (max-width: 900px) {
  .reg-layout { grid-template-columns: 1fr; }
  .reg-sidebar { position: static; }
}

/* ---------- Painel (paciente/profissional) — conteúdo + coluna lateral ---------- */

.dashboard-layout {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 22px;
  align-items: start;
  /* .dashboard-layout não é .card, então quando o que vem antes É um
     .card solto (ex.: request.js — card do stepper, sem passar por
     .page-head) a regra .card + .card não pega e os dois ficam colados.
     Colapsa com margens maiores de quem vier antes (.page-head já usa
     26px), então não dobra espaço onde já estava certo. */
  margin-top: 16px;
}
.dashboard-side { display: flex; flex-direction: column; gap: 18px; }
/* Várias seções (vídeo, avaliação, chat…) decidem sozinhas se aparecem e
   ficam vazias quando não — sem isto, o gap do flex ainda abriria espaço. */
.dashboard-side > *:empty { display: none; }
.dashboard-side-card {
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 22px;
}
.dashboard-side-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.dashboard-side-card p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: #a8c2d3; }
.dashboard-side-card .btn-outline { width: 100%; background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.24); }
.dashboard-side-card .btn-outline:hover { background: rgba(255, 255, 255, 0.08); }

@media (max-width: 900px) {
  .dashboard-layout { grid-template-columns: 1fr; }
}

/* ---------- Métricas rápidas do painel (visitas hoje, a liberar, avaliação) ---------- */

.metric-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
.metric-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-xs);
}
.metric-card .metric-label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 8px;
}
.metric-card .metric-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-navy); }
.metric-card .metric-sub { display: block; font-size: 13px; color: var(--color-neutral-600); margin-top: 3px; }

@media (max-width: 640px) {
  .metric-cards { grid-template-columns: 1fr; }
}

/* ---------- Acompanhamento ao vivo (solicitação "a caminho") e Ganhos — modo escuro ----------
   `.request-view-dark` ativa só na etapa "a caminho" do ciclo (ver
   request.js); `.earnings-dark` é a página de Ganhos inteira (ver
   earnings.js) — telas que github.md marca como modo escuro. Mesmo
   padrão de cartão escuro usado em .reg-sidebar-card/.dashboard-side-card/
   .how-track.dark, não um novo tema paralelo. */

.request-view-dark .card,
.earnings-dark .card {
  background: var(--color-navy);
  /* 0.08 era baixo demais pra separar visualmente do fundo bem mais
     escuro da página (.earnings-dark: #071a29) — os cards "A liberar"/
     "Taxa da plataforma" (sem gradiente próprio, ao contrário de
     "Recebido") ficavam quase colados ao fundo. 0.14 já é o que
     .earnings-dark .empty usa nesta mesma tela — só alinhando. */
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.request-view-dark .card h1,
.request-view-dark .card h2,
.request-view-dark .card h3,
.request-view-dark .card strong,
.request-view-dark .card dd,
.earnings-dark .card h1,
.earnings-dark .card h2,
.earnings-dark .card h3,
.earnings-dark .card strong,
.earnings-dark .card dd { color: #fff; }
.request-view-dark .card .card-sub,
.request-view-dark .card p,
.request-view-dark .card .muted,
.request-view-dark .card dt,
.request-view-dark .card small,
.earnings-dark .card .card-sub,
.earnings-dark .card p,
.earnings-dark .card .muted,
.earnings-dark .card dt,
.earnings-dark .card small { color: #a8c2d3; }
.request-view-dark .card .quote-total dd { color: #fff; }
.request-view-dark a,
.earnings-dark a { color: var(--color-accent-light); }
.request-view-dark .btn-outline,
.earnings-dark .btn-outline { border-color: rgba(255, 255, 255, 0.24); color: #fff; background: transparent; }
.request-view-dark .btn-outline:hover,
.earnings-dark .btn-outline:hover { background: rgba(255, 255, 255, 0.08); }
.request-view-dark .btn-ghost,
.earnings-dark .btn-ghost { color: #a8c2d3; }

.request-view-dark .step { color: rgba(255, 255, 255, 0.4); }
.request-view-dark .step.current { color: #fff; }
.request-view-dark .step .dot { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #7b96ab; }
.request-view-dark .step.done { color: var(--color-accent-light); }
.request-view-dark .step.done .dot { background: var(--color-accent-light); border-color: var(--color-accent-light); color: #06202f; }
.request-view-dark .step-sep { background: rgba(255, 255, 255, 0.14); }
.request-view-dark .step-sep.done { background: var(--color-accent-light); }
.request-view-dark .timeline li::after { background: rgba(255, 255, 255, 0.14); }
.request-view-dark .awaiting-card { background: rgba(255, 255, 255, 0.05); }

.earnings-dark { background: #071a29; margin: 0 calc(50% - 50vw); padding: 1px calc(50vw - 50%) 48px; }
.earnings-dark .page-head h1 { color: #fff; }
.earnings-dark .page-head p { color: #a8c2d3; }
.earnings-dark .section-title { color: #fff; }
.earnings-dark .empty { background: var(--color-navy); border-color: rgba(255, 255, 255, 0.14); color: #a8c2d3; }
.earnings-dark .empty .icon { color: #7b96ab; }
.earnings-dark .field input { background: var(--color-navy); border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.earnings-dark .field label { color: #a8c2d3; }

.earning-card.earning-received {
  background: linear-gradient(140deg, var(--color-accent-600), var(--color-navy-700));
  border: 0;
}
.earning-card.earning-received .earning-label,
.earning-card.earning-received small { color: #cfeaf1; }
.earning-card.earning-pending { border: 1px solid color-mix(in srgb, var(--color-cta) 40%, transparent); }
.earning-card.earning-pending .earning-label { color: color-mix(in srgb, var(--color-cta) 55%, white); }

.earnings-dark .entry-group { border-left: 3px solid transparent; }
.earnings-dark .entry-group-pending_release { border-left-color: var(--color-cta); }
.earnings-dark .entry-group-held { border-left-color: var(--color-accent-light); }
.earnings-dark .entry-group-disputed { border-left-color: var(--danger); }
.earnings-dark .entry-list li { border-bottom-color: rgba(255, 255, 255, 0.08); }
.earnings-dark .entry-note { color: #a8c2d3; }

.check-inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--color-neutral-700);
  cursor: pointer;
  padding: 4px 0;
}
.check-inline input { accent-color: var(--color-accent); width: 16px; height: 16px; flex: none; margin-top: 2px; }

.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 22px;
  flex-wrap: wrap;
}

.form-note {
  font-size: 13.5px;
  color: var(--color-neutral-700);
  margin-top: 16px;
}
.form-note a { color: var(--color-accent-700); font-weight: 600; text-decoration: none; }
.form-note a:hover { text-decoration: underline; }

/* ---------- Alertas ---------- */

.alert {
  border-radius: var(--radius);
  padding: 12px 15px;
  font-size: 14.5px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.alert ul { margin: 6px 0 0; padding-left: 20px; }
.alert .small { margin: 6px 0 0; }
.alert-error { background: var(--danger-soft); color: var(--danger); border-color: #f0cfc5; }
.alert-success { background: var(--st-completed-soft); color: var(--st-completed); border-color: #cbe7d4; }
.alert-info { background: var(--st-open-soft); color: #1d4ed8; border-color: #d2dff8; }

/* ---------- Badges de status ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius);
  letter-spacing: 0.01em;
}
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-open      { background: var(--st-open-soft);      color: var(--st-open); }
/* Visita a estabelecimento aguardando confirmação — mesma semântica
   visual de "aberta" (precisa de ação). */
.badge-requested { background: var(--st-open-soft);       color: var(--st-open); }
.badge-accepted  { background: var(--st-accepted-soft);  color: var(--st-accepted); }
/* Estados ativos do ciclo: o ponto pulsa para diferenciar "acontecendo
   agora" de um status parado. */
.badge-en_route    { background: var(--st-accepted-soft); color: var(--st-accepted); }
.badge-in_progress { background: var(--st-completed-soft); color: var(--st-completed); }
/* Esperando resposta do paciente: destaque na cor de atenção. */
.badge-start_pending,
.badge-completion_pending { background: var(--st-accepted-soft); color: var(--st-accepted); }
.badge-en_route::before,
.badge-in_progress::before,
.badge-start_pending::before,
.badge-completion_pending::before { animation: pulse 1.8s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.badge-confirmed { background: var(--st-confirmed-soft); color: var(--st-confirmed); }
.badge-completed { background: var(--st-completed-soft); color: var(--st-completed); }
.badge-cancelled { background: var(--st-cancelled-soft); color: var(--st-cancelled); }

.badge-plain::before { display: none; }
.badge-modality { background: var(--color-accent-100); color: var(--color-accent-700); }
.badge-level {
  background: var(--color-neutral-900);
  color: #fff;
  font-family: var(--font-heading);
  letter-spacing: 0.06em;
}

/* Estado do pagamento — distinto do status da solicitação: um
   "completed" pode estar pending_release, disputed ou released. */
.badge-payment-awaiting_payment { background: var(--st-accepted-soft);  color: var(--st-accepted); }
.badge-payment-held             { background: var(--st-open-soft);      color: var(--st-open); }
.badge-payment-pending_release  { background: var(--st-accepted-soft);  color: var(--st-accepted); }
.badge-payment-released         { background: var(--st-completed-soft); color: var(--st-completed); }
.badge-payment-disputed         { background: var(--danger-soft);       color: var(--danger); }
.badge-payment-refunded         { background: var(--st-cancelled-soft); color: var(--st-cancelled); }
.badge-payment-failed           { background: var(--danger-soft);       color: var(--danger); }

/* QR do PIX (confirmação da cobrança, cartão de pagamento). Tamanho fixo
   — não carrega dado, então vai por classe CSS, não data-*. */
.pix-qr-image {
  display: block;
  width: 180px;
  height: 180px;
  margin: 14px auto 10px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  background: #fff;
}
.pix-copy {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pix-copy-code {
  flex: 1;
  overflow-wrap: anywhere;
  font-size: 0.8rem;
  padding: 8px 10px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  background: var(--color-bg);
}

/* Selo de mensagens não lidas nos painéis — sólido, para chamar mais
   atenção que os badges de status (que são informativos, não um alerta). */
.badge-unread { background: var(--danger); color: #fff; }
.badge-unread::before { display: none; }

/* Solicitação endereçada direto pelo perfil, na fila do profissional —
   cor de CTA (não de status): é uma chamada à ação, não um estado. */
.badge-addressed { background: var(--color-cta-soft); color: var(--color-cta-active); }

/* Contagem regressiva da oferta do despacho ao vivo. */
.offer-countdown { color: var(--color-cta-active); font-weight: 600; }

/* ---------- Seletor de nível de cuidado (N1–N5) ---------- */

.level-picker {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.level-picker legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.level-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.level-card:hover { border-color: var(--color-accent-400); }
.level-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.level-card:has(input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}
.level-card:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.level-code {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  background: var(--color-surface-alt);
  color: var(--color-neutral-600);
}
.level-card:has(input:checked) .level-code { background: var(--color-accent); color: #fff; }

.level-text { flex: 1; min-width: 0; }
.level-text strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15.5px;
}
.level-text small { color: var(--color-neutral-600); font-size: 12.5px; }

.level-price {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
.level-price b {
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}

@media (max-width: 560px) {
  .level-price { display: none; }
}

/* ---------- Confirmação do paciente (Sim/Não) ---------- */

.confirm-card {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}
.confirm-card .confirm-context {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--color-neutral-700);
}
.confirm-card h2 { margin-bottom: 6px; }
.confirm-card .row { margin-top: 14px; }
.confirm-card .btn { min-width: 96px; }
.confirm-timeout {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
  color: var(--st-accepted);
}
.confirm-timeout .ico { color: currentColor; }

.awaiting-card {
  display: flex;
  align-items: center;
  gap: 14px;
}
.awaiting-card p { margin: 2px 0 0; }
.awaiting-mark {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--st-accepted-soft);
  color: var(--st-accepted);
}

/* ---------- Extrato de ganhos ---------- */

.earning-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  /* .earning-cards não é um .card (é só o grid) — a regra .card + .card
     não alcança o filtro de período logo acima, então ficava sem
     nenhum espaço daqui até o card "Recebido". Mesmo valor de sempre. */
  margin-top: 16px;
}
.earning-card { display: flex; flex-direction: column; gap: 2px; }
.earning-card + .earning-card { margin-top: 0; }
.earning-label {
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.earning-value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}
.earning-card small { color: var(--color-neutral-600); font-size: 12px; }
/* O que ainda não caiu na conta usa a cor de espera, não a de sucesso.
   A tela de Ganhos é sempre modo escuro (.earnings-dark) — texto claro
   o bastante para contraste sobre o cartão navy, não o tom escuro usado
   quando esta classe aparecia sobre fundo claro. */
.earning-pending .earning-value { color: color-mix(in srgb, var(--color-cta) 70%, white); }

.entry-group h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  margin: 0 0 10px;
}
.entry-note {
  font-family: var(--font);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-neutral-600);
}

.entry-list { list-style: none; margin: 0; padding: 0; }
.entry-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
}
.entry-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.entry-main { min-width: 0; }
.entry-main strong { display: block; font-size: 14.5px; font-weight: 500; }
.entry-main small { display: block; font-size: 12px; color: var(--color-neutral-600); }

.entry-value { flex: none; text-align: right; }
.entry-value b {
  display: block;
  font-family: var(--font-heading);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.entry-value small { font-size: 11.5px; color: var(--color-neutral-600); }

/* ---------- Perfil público do profissional ---------- */

.pro-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.pro-avatar {
  flex: none;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.02em;
}

/* A foto ocupa exatamente o lugar das iniciais. object-fit: cover porque
   o servidor não recorta nada: uma foto retangular precisa preencher o
   quadrado sem distorcer o rosto. */
.pro-avatar-photo {
  object-fit: cover;
  background: var(--color-neutral-200);
}

/* Tamanhos por classe, não por style inline: a CSP (style-src 'self',
   sem 'unsafe-inline') bloqueia atributo style, e o valor seria
   descartado sem aviso. */
.pro-avatar-sm { width: 52px; height: 52px; font-size: 18px; }
.pro-avatar-md { width: 68px; height: 68px; }
.pro-avatar-lg { width: 96px; height: 96px; font-size: 32px; }

/* Editor de foto: preview ao lado das ações, como o resto dos cards. */
.photo-editor { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* O <label for> do input escondido é o botão de fato — precisa parecer e
   responder como um. */
.photo-actions label.btn { cursor: pointer; }
.hint-error { color: var(--danger); font-weight: 600; }

.pro-identity { flex: 1; min-width: 230px; }
.pro-identity h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(19px, 4.5vw, 24px);
  line-height: 1.2;
  margin: 0 0 4px;
}
.pro-identity p { margin: 0 0 10px; font-size: 14px; }

.pro-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  font-size: 11.5px;
  color: var(--color-accent-700);
}
.pro-badge .ico { color: currentColor; }

.pro-stats {
  display: flex;
  gap: 26px;
  margin: 0;
  flex-wrap: wrap;
}
.pro-stats dt {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-bottom: 2px;
}
.pro-stats dd {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 21px;
}

@media (max-width: 620px) {
  .pro-stats { gap: 18px; width: 100%; padding-top: 4px; border-top: 1px solid var(--color-divider); }
}

/* Tabela de preços agrupada por nível */
.price-group + .price-group { margin-top: 20px; }
.price-group h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-accent-700);
  margin: 0 0 8px;
}

.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-divider);
}
.price-list li:last-child { border-bottom: 0; }
.price-list strong { display: block; font-size: 14.5px; font-weight: 500; }
.price-list small { display: block; font-size: 11.5px; color: var(--color-neutral-600); }

.price-value { flex: none; text-align: right; }
.price-value b {
  font-family: var(--font-heading);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.price-value small { font-style: italic; }

/* Avaliações no perfil */
.rating-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-divider);
}
.rating-summary b { font-family: var(--font-heading); font-size: 22px; }

.review-list { list-style: none; margin: 0; padding: 0; }
.review-list li { padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.review-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.review-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
}
.review-head small { color: var(--color-neutral-600); font-size: 12px; }
.review-list p { margin: 6px 0 0; font-style: italic; color: var(--color-neutral-700); }

/* ---------- Avaliações ---------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.star-on .ico { color: #C9911F; fill: #C9911F; }
.star-off .ico { color: var(--color-neutral-300); fill: var(--color-neutral-300); }

.match-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 4px 0 6px;
  font-size: 12.5px;
}
.match-rating b { font-family: var(--font-heading); font-size: 14px; }
.match-rating small { color: var(--color-neutral-600); }

.rating-card .star-picker {
  display: flex;
  gap: 4px;
  border: 0;
  margin: 0 0 16px;
  padding: 0;
}
.star-option { cursor: pointer; line-height: 0; }
.star-option input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.star-option .ico {
  color: var(--color-neutral-300);
  fill: var(--color-neutral-300);
  transition: color 0.12s var(--ease), fill 0.12s var(--ease);
}
/* Preenche da esquerda até a estrela sob o cursor: o :hover cai na
   estrela apontada e o irmão-geral apaga as seguintes. */
.star-picker:hover .star-option .ico { color: #C9911F; fill: #C9911F; }
.star-picker .star-option:hover ~ .star-option .ico {
  color: var(--color-neutral-300);
  fill: var(--color-neutral-300);
}
.star-option:has(input:checked) ~ .star-option .ico {
  color: var(--color-neutral-300);
  fill: var(--color-neutral-300);
}
.star-picker:not(:hover) .star-option:has(input:checked) .ico,
.star-picker:not(:hover) .star-option:has(~ .star-option input:checked) .ico {
  color: #C9911F;
  fill: #C9911F;
}
.star-option:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.rating-done { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rating-comment { margin: 0; font-style: italic; color: var(--color-neutral-700); }

/* ---------- Conversa ---------- */

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
}

.chat-empty {
  margin: 0;
  text-align: center;
  color: var(--color-neutral-500);
  font-size: 13.5px;
}

.msg {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.msg p { margin: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.msg-meta {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--color-neutral-500);
}

/* Minhas mensagens à direita, na cor da marca. */
.msg-mine {
  align-self: flex-end;
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.msg-mine .msg-meta { color: color-mix(in srgb, #fff 75%, transparent); }

.msg-theirs { align-self: flex-start; }

.chat-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.chat-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: 15px;
  padding: 9px 12px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius);
}
.chat-form input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--ring);
}

@media (max-width: 560px) {
  .msg { max-width: 88%; }
}

/* ---------- Vídeo chamada ---------- */

.video-call-frame {
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg);
}

/* ---------- Preços por procedimento (cadastro do profissional) ------- */

.procedure-prices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.procedure-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
}
.procedure-name { flex: 1; min-width: 190px; }
.procedure-name strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
}
.procedure-name small { color: var(--color-neutral-600); font-size: 12px; }

.procedure-input { flex: none; width: 110px; }
.procedure-input span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-bottom: 3px;
}
.procedure-input input {
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  padding: 6px 9px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius);
}
.procedure-input input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--ring);
}
.procedure-nomat {
  font-size: 11.5px;
  color: var(--color-neutral-500);
  width: 110px;
  padding-bottom: 8px;
}

/* ---------- Preço em listas e resumo financeiro ---------- */

.match-price {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-divider);
}
.match-price b {
  display: block;
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--color-text);
}
.match-price small {
  display: block;
  color: var(--color-neutral-600);
  font-size: 11.5px;
  line-height: 1.35;
}
.match-price small.muted { margin-top: 2px; font-style: italic; }

.queue-payout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
.queue-payout b {
  font-family: var(--font-heading);
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-accent-700);
}

.quote-lines { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.quote-lines > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.quote-lines dt { color: var(--color-neutral-700); font-size: 14px; }
.quote-lines dd { margin: 0; font-variant-numeric: tabular-nums; }
.quote-lines .quote-total {
  border-top: 1px solid var(--color-divider);
  padding-top: 9px;
  margin-top: 3px;
}
.quote-lines .quote-total dt { color: var(--color-text); font-weight: 600; }
.quote-lines .quote-total dd {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  color: var(--color-accent-700);
}

/* ---------- Listas de solicitações / matches ---------- */

.request-list { display: flex; flex-direction: column; gap: 12px; }

.request-item {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-left: 4px solid transparent;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.request-item:hover { border-color: var(--color-divider-strong); box-shadow: var(--shadow); }
/* Em andamento agora (a caminho / em atendimento / aguardando confirmação):
   acento na cor de ação para saltar aos olhos na lista. */
.request-item-active { border-left-color: var(--color-cta); }
/* Oferta endereçada ao profissional, ainda por responder — mesmo
   tratamento do .match-card-offered (despacho ao vivo): borda cheia +
   brilho na cor de ação, porque pede resposta, não só sinaliza estado. */
.request-item-addressed {
  border-color: var(--color-cta);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-cta) 16%, transparent);
}

/* Coluna de linhas do card (título + uma ou mais .meta, ex. cidade/
   distância/data e, embaixo, a observação entre aspas) — sem o gap, as
   linhas ficavam coladas umas nas outras (só a altura da fonte separava),
   parecendo amontoado. */
.request-item .info { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.request-item .title { font-family: var(--font-heading); font-weight: 600; font-size: 16.5px; }
.request-item .meta { color: var(--color-neutral-700); font-size: 13.5px; }
.request-item .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.match-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.match-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.match-card:hover { border-color: var(--color-divider-strong); box-shadow: var(--shadow-xs); }
/* Despacho ao vivo: quem está sendo perguntado agora. */
.match-card-offered {
  border-color: var(--color-cta);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-cta) 16%, transparent);
}
.badge-offered { background: var(--color-cta-soft); color: var(--color-cta-active); margin-bottom: 8px; }
.match-card .name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 2px;
  color: var(--color-accent-800);
  text-decoration: none;
}
.match-card .name:hover { text-decoration: underline; }
.match-card .meta { color: var(--color-neutral-700); font-size: 13.5px; margin-bottom: 8px; }
.match-card .distance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-accent-700);
  font-weight: 600;
  font-size: 13.5px;
}

/* ---------- Stepper de status ---------- */

.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 18px 0 6px;
  flex-wrap: wrap;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral-500);
}

.step .dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-divider);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--color-neutral-500);
  flex: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.step.done { color: var(--color-accent-700); }
.step.done .dot { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.step.current { color: var(--color-text); font-weight: 700; }
.step.current .dot {
  background: var(--color-cta); border-color: var(--color-cta); color: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-cta) 20%, transparent);
}

.step-sep {
  width: 34px;
  height: 2px;
  background: var(--color-divider);
  margin: 0 8px;
  flex: none;
}
.step-sep.done { background: var(--color-accent); }

/* ---------- Timeline de eventos ---------- */

.timeline { list-style: none; margin: 6px 0 0; padding: 0; }

.timeline li {
  position: relative;
  padding: 0 0 16px 24px;
  font-size: 14px;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: 5px; top: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-100);
}
.timeline li::after {
  content: '';
  position: absolute;
  left: 8px; top: 18px; bottom: -2px;
  width: 2px;
  background: var(--color-divider);
}
.timeline li:last-child::after { display: none; }
.timeline .when { color: var(--color-neutral-600); font-size: 12.5px; display: block; }

/* ---------- Detalhes (dl) ---------- */

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 22px;
  margin: 0;
}
.detail-grid div { min-width: 0; }
.detail-grid dt {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-neutral-600);
  margin-bottom: 2px;
}
.detail-grid dd { margin: 0; font-weight: 600; overflow-wrap: break-word; }

/* ---------- Estado vazio ---------- */

.empty {
  text-align: center;
  color: var(--color-neutral-700);
  padding: 42px 20px;
  background: var(--color-surface);
  border: 1px dashed var(--color-divider-strong);
  border-radius: var(--radius-lg);
}
.empty .icon {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--color-neutral-400);
}

/* ---------- Toasts ---------- */

.toasts {
  position: fixed;
  bottom: 22px;
  right: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
  max-width: 360px;
}

.toast {
  background: var(--color-neutral-900);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.22s var(--ease);
}
.toast-error { background: var(--danger); }
.toast-success { background: var(--st-completed); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Aviso de pré-lançamento (landing) ---------- */

.landing-notice {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 90;
  max-width: 380px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px;
  animation: landing-notice-in 0.32s var(--ease);
}
.landing-notice-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--color-neutral-600);
  cursor: pointer;
  padding: 4px;
}
.landing-notice-close:hover { color: var(--color-neutral-900); }
.landing-notice-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-700);
  margin-bottom: 6px;
}
.landing-notice p {
  margin: 0 0 14px;
  padding-right: 18px;
  font-size: 13.5px;
  color: var(--color-neutral-700);
}
.landing-notice .btn-stack-2col { gap: 8px; }

@keyframes landing-notice-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
  .landing-notice { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--color-divider);
  padding: 20px 0;
  color: var(--color-neutral-600);
  font-size: 13px;
  background: var(--color-surface);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--color-neutral-600); text-decoration: none; }
.footer-links a:hover { color: var(--color-accent-700); text-decoration: underline; }

.footer-credit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
.footer-credit img {
  height: 62px;
  width: auto;
  opacity: 0.9;
}

.footer-legal {
  margin-top: 10px;
  font-size: 11px;
  color: var(--color-neutral-500);
  text-align: center;
}

@media (max-width: 560px) {
  .footer-inner { justify-content: center; text-align: center; }
}

/* ---------- Utilitários ---------- */

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.muted { color: var(--color-neutral-700); }
.small { font-size: 13.5px; }
.mt-0 { margin-top: 0; }

.loading {
  text-align: center;
  color: var(--color-neutral-500);
  padding: 40px 0;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .request-item, .match-card, .step .dot, .chip, .toast,
  .badge-en_route::before, .badge-in_progress::before,
  .badge-start_pending::before, .badge-completion_pending::before {
    transition: none;
    animation: none;
  }
}

/* ---------- Correções pontuais: CSP bloqueia style="" inline
   (style-src 'self', sem unsafe-inline) — o que estava embutido no
   markup da landing/acesso não tinha nenhum efeito real. ---------- */

.testimonials-head .section-head { text-align: left; margin-bottom: 0; }
.testimonial-disclaimer { margin: -16px 0 28px; color: var(--color-neutral-600); font-size: 13.5px; }
.auth-form-inner h1 {
  margin: 0 0 6px; font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--color-navy);
}
.auth-form-inner .form-note { text-align: center; }
.reg-title { margin: 8px 0 6px; font-size: 28px; }
#validation-result { margin-top: 10px; }

/* Utilitários de espaçamento — mesma razão acima (nunca usar style=""). */
.u-m-0 { margin: 0; }
.u-mt-0 { margin-top: 0; }
.u-mt-sm { margin-top: 8px; }
.u-mt-md { margin-top: 14px; }
.u-mt-lg { margin-top: 22px; }
.u-mb-sm { margin-bottom: 6px; }
.u-mb-md { margin-bottom: 16px; }
.u-hr { margin: 18px 0; border: 0; border-top: 1px solid var(--color-divider); }

/* Empilhamento de botões da barra lateral (painel do profissional). */
.btn-stack { display: flex; flex-direction: column; gap: 10px; }
.btn-stack-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Cabeçalho "Solicitações compatíveis" + identidade do profissional (painel). */
.dashboard-side-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dashboard-side-head h2 { margin: 0; }
.pro-identity-compact { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pro-identity-compact strong { display: block; font-size: 16.5px; }
.pro-identity-compact .row { gap: 6px; margin-top: 4px; }
.pro-availability-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 14px 16px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06); margin-bottom: 16px;
}
/* O texto do badge nunca quebra dentro do próprio pill (fica achatado e
   ilegível, tipo "Modo" / "disponível" / "desligado" em 3 linhas) — se
   não couber ao lado do botão, o badge inteiro desce pra segunda linha
   (flex-wrap acima cuida disso). */
.pro-availability-bar .badge { white-space: nowrap; }

/* Horário automático de disponibilidade (painel do profissional) — liga o
   "modo disponível" sozinho numa faixa de horário/dias, ver
   professional.js:autoAvailabilityCard(). */
.auto-availability-card {
  margin-bottom: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.auto-availability-time-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.auto-availability-time-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: #a8c2d3;
}
.auto-availability-time-row input[type="time"] {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 6px 8px;
}
.auto-availability-days {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.auto-day-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: #a8c2d3;
  white-space: nowrap;
}
.auto-availability-status {
  margin: 10px 0 0;
  min-height: 1em;
}

/* Cabeçalho do painel do paciente (título + ação, lado a lado). */
.dashboard-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* Filtro de período (Ganhos). */
.range-filter { align-items: flex-end; flex-wrap: wrap; }

/* Modalidades em coluna (editar perfil). */
.checks-col { flex-direction: column; align-items: stretch; }
.card-subhead { margin: 0 0 14px; font-size: 15.5px; }
.card-subhead-tight { margin: 0 0 4px; font-size: 15.5px; }

/* ---------- Painel de mensagens intranet (admin ↔ profissional) ---------- */

.mail-shell {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 820px) {
  .mail-shell { grid-template-columns: 1fr; }
}

.mail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mail-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mail-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-divider-strong); background: var(--color-surface);
  color: var(--color-neutral-700); font: inherit; font-size: 13.5px; cursor: pointer;
}
.mail-tab.active { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

.mail-list { display: flex; flex-direction: column; gap: 8px; }
.mail-row {
  display: block; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--color-divider); background: var(--color-surface);
  font: inherit; cursor: pointer;
}
.mail-row:hover { border-color: var(--color-accent); }
.mail-row-unread { border-left: 3px solid var(--color-cta); font-weight: 600; }
.mail-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mail-row-snippet { margin: 4px 0 0; }

.mail-detail-pane { min-height: 260px; }
.mail-body { white-space: normal; line-height: 1.6; }

.mail-recipient-results {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px; max-height: 220px; overflow-y: auto;
}
.mail-recipient-results:empty { margin-top: 0; }
.mail-recipient-results .mail-row { padding: 8px 12px; }

/* ---------- Vitrine pública (publicações do profissional) ---------- */

.post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.post-item { padding-bottom: 16px; border-bottom: 1px solid var(--color-divider); }
.post-item:last-child { border-bottom: 0; padding-bottom: 0; }
.post-body { margin: 0 0 10px; white-space: pre-wrap; }
.post-photo {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-neutral-600);
  font-size: 13px;
}
.post-actions { display: flex; align-items: center; gap: 8px; }
.post-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--color-neutral-600);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius);
}
.post-like-btn:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.post-like-btn.liked { color: var(--danger); }
.post-like-btn.liked .ico { fill: currentColor; }
.post-like-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.post-delete-btn { color: var(--color-neutral-600); }

.post-composer .photo-editor { align-items: flex-start; }
.post-composer-preview { max-width: 220px; border-radius: var(--radius); overflow: hidden; }
.post-composer-preview img { display: block; width: 100%; }