/* sim.css: figura, moldura e peças compartilhadas das simulações (05-DESIGN 2.2, 2.3 e 8.5 a 8.8; 06-SIMULACOES 2 e 4).
   Duas camadas: a figura é do site (tokens do chão: --tinta, --tinta-suave, --linha, --acao, --t-*, --d-*);
   dentro de .ar-app valem só os tokens do produto 0.20 (globals.css do SHA 1b7e991, com as correções da 2.3).
   Anotações ficam ao lado da janela; até 860 px de largura, ou com .sim--anotacoes-abaixo na figura, vão para baixo da legenda.
   Movimento: .ar-t anima opacidade e transform em --d-estado; .ar-mov perde o transform com data-sim-movimento="opacidade". */

/* ================= figura (camada do site) ================= */
.sim {
  --sim-anot-w: 17rem;
  --sim-gap: clamp(1.5rem, 2.5vw, 2.5rem);
  --sim-borda: #DEE3E0;
  margin: 0;
  position: relative;
  min-inline-size: 0;
}
.sim__palco {
  position: relative;
  display: grid;
  inline-size: fit-content;
  max-inline-size: 100%;
  grid-template-columns: minmax(0, max-content) var(--sim-anot-w);
  justify-content: start;
  align-items: start;
  column-gap: var(--sim-gap);
}
.sim__palco:not(:has(.sim__anotacoes, .sim__ia)) { grid-template-columns: minmax(0, max-content); }
.sim__janela {
  position: relative;
  inline-size: fit-content;
  max-inline-size: 100%;
  border: 1px solid var(--sim-borda);
  border-radius: 10px;
  overflow: clip;
  background: #F7F9F8;
  box-shadow: var(--e3, 0 18px 44px rgba(11, 61, 46, .12), 0 4px 12px rgba(11, 61, 46, .06));
}
.chao-esmeralda .sim { --sim-borda: rgba(240, 235, 228, .14); }
.chao-esmeralda .sim__janela { box-shadow: var(--e3, 0 24px 60px -12px rgba(2, 14, 10, .60), 0 6px 16px rgba(2, 14, 10, .35)); }

/* sem JavaScript: reserva de espaço e texto do estado final (05-DESIGN 8.5) */
.sim__janela > :not(:defined) {
  display: block;
  inline-size: var(--sim-w, 52rem);
  max-inline-size: 100%;
  aspect-ratio: var(--sim-ar, 16 / 10);
}
.sim__reserva {
  margin: 0;
  padding: 1.25rem;
  font-family: "Jost", "Jost Reserva", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-pequeno, .9375rem);
  line-height: 1.5;
  color: #38423C;
  background: #F7F9F8;
}

.sim__legenda {
  margin-block-start: .75rem;
  max-inline-size: 46ch;
  font-family: "Jost", "Jost Reserva", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: var(--t-mini, .8125rem);
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--tinta-suave, #556059);
}
.sim__legenda > span { display: block; }

/* anotação de rótulo (05-DESIGN 8.7): rótulo real em <strong>, tradução em texto comum */
.sim__anotacoes {
  position: relative;
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Jost", "Jost Reserva", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-pequeno, .9375rem);
  line-height: 1.5;
  letter-spacing: .005em;
  font-weight: 400;
  color: var(--tinta-suave, #556059);
}
.sim__anotacoes li { margin: 0 0 .75rem; transition: opacity var(--d-ui, 200ms) cubic-bezier(.2, .6, .2, 1), display var(--d-ui, 200ms) allow-discrete; }
@starting-style { .sim__anotacoes li { opacity: 0; } }
.sim__anotacoes strong, .sim__anotacoes b { font-weight: 500; color: var(--tinta, #151A17); }
.sim__anotacoes li[style*="top"] { position: absolute; inset-inline: 0; margin: 0; }
.sim__anotacoes li[style*="top"]::before {
  content: "";
  position: absolute;
  inset-block-start: calc(.75em - .5px);
  inset-inline-start: calc(-1 * var(--sim-gap));
  inline-size: calc(var(--sim-gap) - .5rem);
  block-size: 1px;
  background: var(--linha, #DEE3E0);
}
.sim__anotacoes li[style*="top"]::after {
  content: "";
  position: absolute;
  inset-block-start: calc(.75em - 2px);
  inset-inline-start: calc(-1 * var(--sim-gap) - 2px);
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--tinta-suave, #556059);
}

/* marcador "IA" do site (05-DESIGN 8.8): pílula "IA" seguida de frase curta; nunca champagne */
.sim__ia {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inline-size: var(--sim-anot-w);
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  padding-inline-start: 10px;
  font-family: "Jost", "Jost Reserva", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 24px;
  color: var(--tinta, #151A17);
  transition: opacity var(--d-ui, 200ms) cubic-bezier(.2, .6, .2, 1), display var(--d-ui, 200ms) allow-discrete;
}
@starting-style { .sim__ia { opacity: 0; } }
.sim__ia::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: calc(20px + var(--sim-ia-w, 1.05em));
  block-size: 24px;
  box-sizing: border-box;
  border: 1px solid var(--acao, #0B3D2E);
  border-radius: 999px;
}
.sim__ia > span {
  padding-block-start: 1px;
  font-size: var(--t-pequeno, .9375rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--tinta, #151A17);
}
.sim__ia[style*="top"]::after {
  content: "";
  position: absolute;
  inset-block-start: 11.5px;
  inset-inline-start: calc(-1 * var(--sim-gap));
  inline-size: calc(var(--sim-gap) - .5rem);
  block-size: 1px;
  background: var(--linha, #DEE3E0);
}
.chao-esmeralda .sim__ia, .chao-esmeralda .sim__ia > span { color: #F0EBE4; }
.chao-esmeralda .sim__ia::before { border-color: #F0EBE4; }

.sim > .sr-only, .sim .sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* anotações abaixo da legenda: celular (até 860 px, o ponto do motor) ou pedido da página com .sim--anotacoes-abaixo */
@media (max-width: 860px) {
  .sim { display: flex; flex-direction: column; align-items: flex-start; }
  .sim__palco { display: contents; }
  .sim__janela { order: 1; }
  .sim__legenda { order: 2; }
  .sim__ia { order: 3; position: relative; inline-size: auto; margin-block-start: 1rem; }
  .sim__anotacoes { order: 4; position: static; margin-block-start: 1rem; }
  .sim__anotacoes li[style*="top"] { position: static; }
  .sim__anotacoes li::before, .sim__anotacoes li::after, .sim__ia::after { display: none; }
}
.sim.sim--anotacoes-abaixo { display: flex; flex-direction: column; align-items: flex-start; }
.sim--anotacoes-abaixo .sim__palco { display: contents; }
.sim--anotacoes-abaixo .sim__janela { order: 1; }
.sim--anotacoes-abaixo .sim__legenda { order: 2; }
.sim--anotacoes-abaixo .sim__ia { order: 3; position: relative; inline-size: auto; margin-block-start: 1rem; }
.sim--anotacoes-abaixo .sim__anotacoes { order: 4; position: static; margin-block-start: 1rem; }
.sim--anotacoes-abaixo .sim__anotacoes li[style*="top"] { position: static; }
.sim--anotacoes-abaixo .sim__anotacoes li::before, .sim--anotacoes-abaixo .sim__anotacoes li::after, .sim--anotacoes-abaixo .sim__ia::after { display: none; }

/* ================= tokens do produto (escopo .ar-app) ================= */
.ar-app {
  --bg: #F7F9F8; --surface: #FFFFFF; --surface-2: #F1F4F2; --surface-3: #DEE3E0;
  --primary: #0B3D2E; --primary-hover: #08281E; --primary-soft: #DCEFE7;
  --on-primary: #FFFFFF; --on-danger: #FFFFFF; --on-accent: #151A17;
  --accent: #D4C4A8; --accent-hover: #C4AF85;
  --text: #151A17; --text-body: #38423C; --text-muted: #556059; --text-subtle: #626C65; --text-accent: #765C2C;
  --success: #16674F; --warning: #875B17; --danger: #A3302B; --danger-strong: #7E2320;
  --border: #DEE3E0; --border-strong: #6C746D; --ring: rgba(11, 61, 46, .30);
  --shadow-sm: 0 1px 2px rgba(11, 61, 46, .06);
  --shadow-md: 0 4px 14px rgba(11, 61, 46, .08), 0 1px 3px rgba(11, 61, 46, .05);
  --shadow-lg: 0 18px 44px rgba(11, 61, 46, .12), 0 4px 12px rgba(11, 61, 46, .06);
  --stage-incoming: #6C746D; --stage-open-1: #10513E; --stage-open-2: #16674F; --stage-open-3: #1E8163;
  --stage-open-4: #3EA07F; --stage-open-5: #75BFA5; --stage-open-6: #A8741C; --stage-won: #16674F; --stage-lost: #A3302B;
  --chart-1: #0B3D2E; --chart-2: #16674F; --chart-3: #3EA07F; --chart-4: #C4AF85; --chart-5: #75BFA5;
  --crescimento: #8A7649;
  --sidebar-bg: #0B3D2E; --sidebar-hover: #10513E; --sidebar-active-bg: rgba(212, 196, 168, .16);
  --sidebar-fg: #9FB5AA; --sidebar-fg-active: #F0EBE4; --sidebar-accent: #D4C4A8;
  --sidebar-border: rgba(240, 235, 228, .12); --sidebar-muted: #8DA299;
  --warning-text: #875B17; --warning-soft: #F8F1E0; --danger-soft: #F7ECEB; --danger-border: #E4C6C4;
  --info: #3A5F86; --info-soft: #E7EDF3;
  --font-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --font-body: "Jost", "Jost Reserva", "Helvetica Neue", Arial, sans-serif;
  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px; --text-xl: 19px; --text-2xl: 24px; --text-3xl: 26px; --text-4xl: 28px;
  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --sim-ease: cubic-bezier(.77, 0, .175, 1);
  --sim-d: var(--d-estado, 420ms);
  --canal-whatsapp: #1FA46B; --canal-instagram: #C2459B;
  --av-mix: 14%;
  color-scheme: light;
}
/* tema escuro do visitante (05-DESIGN 8.5); a lateral é invariante. data-sim-tema força um tema no laboratório */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ar-app:not([data-sim-tema="claro"]) {
    --bg: #0D110F; --surface: #151A17; --surface-2: #232B27; --surface-3: #2C352F;
    --primary: #3EA07F; --primary-hover: #75BFA5; --primary-soft: #10513E; --on-primary: #071E15; --on-danger: #2A0A08;
    --text: #F0EBE4; --text-body: #C1C8C3; --text-muted: #A5AEA7; --text-subtle: #AEB8B1; --text-accent: #E3D2AD;
    --success: #3EA07F; --warning: #D9A84E; --danger: #D98680; --danger-strong: #E8A19C;
    --border: #232B27; --border-strong: #77827A; --ring: rgba(62, 160, 127, .40);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow-md: 0 4px 14px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4);
    --stage-incoming: #909A93; --stage-open-1: #B0DCCB; --stage-open-2: #75BFA5; --stage-open-3: #3EA07F; --stage-open-4: #1E8163;
    --stage-open-5: #16674F; --stage-open-6: #D9A84E; --stage-won: #3EA07F; --stage-lost: #D98680;
    --chart-1: #75BFA5; --chart-2: #3EA07F; --chart-3: #B0DCCB; --chart-4: #D4C4A8; --chart-5: #C4AF85;
    --crescimento: #D4C4A8;
    --av-mix: 10%; /* avatar no escuro: 14% dava 4,45:1 no verde; 10% passa AA */
    --warning-text: #D9A84E; --warning-soft: #2C2414; --danger-soft: #33201F; --danger-border: #5A302C; --info: #8FB2D9; --info-soft: #1B2836;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .sim { --sim-borda: #2C352F; }
  :root:not([data-theme="light"]) .sim__janela, :root:not([data-theme="light"]) .sim__reserva { background: #0D110F; }
  :root:not([data-theme="light"]) .sim__reserva { color: #C1C8C3; }
}
:root[data-theme="dark"] .ar-app:not([data-sim-tema="claro"]), .ar-app[data-sim-tema="escuro"] {
  --bg: #0D110F; --surface: #151A17; --surface-2: #232B27; --surface-3: #2C352F;
  --primary: #3EA07F; --primary-hover: #75BFA5; --primary-soft: #10513E; --on-primary: #071E15; --on-danger: #2A0A08;
  --text: #F0EBE4; --text-body: #C1C8C3; --text-muted: #A5AEA7; --text-subtle: #AEB8B1; --text-accent: #E3D2AD;
  --success: #3EA07F; --warning: #D9A84E; --danger: #D98680; --danger-strong: #E8A19C;
  --border: #232B27; --border-strong: #77827A; --ring: rgba(62, 160, 127, .40);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow-md: 0 4px 14px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4);
  --stage-incoming: #909A93; --stage-open-1: #B0DCCB; --stage-open-2: #75BFA5; --stage-open-3: #3EA07F; --stage-open-4: #1E8163;
  --stage-open-5: #16674F; --stage-open-6: #D9A84E; --stage-won: #3EA07F; --stage-lost: #D98680;
  --chart-1: #75BFA5; --chart-2: #3EA07F; --chart-3: #B0DCCB; --chart-4: #D4C4A8; --chart-5: #C4AF85;
  --crescimento: #D4C4A8;
  --av-mix: 10%;
  --warning-text: #D9A84E; --warning-soft: #2C2414; --danger-soft: #33201F; --danger-border: #5A302C; --info: #8FB2D9; --info-soft: #1B2836;
  color-scheme: dark;
}
:root[data-theme="dark"] .sim { --sim-borda: #2C352F; }
:root[data-theme="dark"] .sim__janela, :root[data-theme="dark"] .sim__reserva { background: #0D110F; }

/* ================= base dentro da moldura ================= */
.ar-app {
  display: block;
  position: relative;
  inline-size: var(--sim-w, 52rem);
  max-inline-size: 100%;
  block-size: var(--sim-h, auto);
  overflow: clip;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-body);
  background: var(--bg);
  text-align: start;
  -webkit-font-smoothing: antialiased;
}
.ar-app *, .ar-app *::before, .ar-app *::after { box-sizing: border-box; }
.ar-app p { margin: 0; max-inline-size: none; font-size: inherit; line-height: inherit; text-wrap: wrap; }
.ar-app .ar-i { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.ar-app [hidden] { display: none !important; }
.ar-app[data-sim-corte~="baixo"] { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }
.ar-app[data-sim-corte~="direita"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.ar-app[data-sim-corte~="baixo"][data-sim-corte~="direita"] {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent), linear-gradient(to right, #000 calc(100% - 24px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent), linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-composite: intersect;
}

/* números: DM Mono tabular em todo dado (MISSAO 4.2; D-A6-04) */
.ar-app .ar-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-weight: 400; letter-spacing: 0; }
.ar-app .ar-titulo { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xl); line-height: 1.3; color: var(--text); letter-spacing: -.005em; }
.ar-app .ar-trunca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.ar-app .ar-min0 { min-inline-size: 0; }
.ar-app .ar-flex1 { flex: 1 1 auto; min-inline-size: 0; }
.ar-app .ar-forte { font-weight: 600; }
.ar-app .ar-tx { color: var(--text); }
.ar-app .ar-tx-muted { color: var(--text-muted); }
.ar-app .ar-tx-subtle { color: var(--text-subtle); }
.ar-app .ar-tx-accent { color: var(--text-accent); }
.ar-app .ar-tx-success { color: var(--success); }
.ar-app .ar-tx-warning { color: var(--warning); }
.ar-app .ar-tx-danger { color: var(--danger); }
.ar-app .ar-ponto { display: inline-block; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--text-subtle); }

/* transições de estado: só opacidade e transform (05-DESIGN 6.2 a 6.4) */
.ar-app .ar-t { transition: opacity var(--sim-d) var(--sim-ease), transform var(--sim-d) var(--sim-ease); }
.ar-app .ar-t-clip { transition: clip-path var(--sim-d) var(--sim-ease), opacity var(--sim-d) var(--sim-ease); }
.ar-app[data-sim-sem-transicao] *, .ar-app[data-sim-movimento="parado"] * { transition: none !important; }
.ar-app[data-sim-movimento="opacidade"] .ar-mov { transform: none !important; }

/* ================= janela inteira: lateral, topo, conteúdo ================= */
.ar-app .ar-jan { display: grid; grid-template-columns: auto minmax(0, 1fr); block-size: 100%; min-block-size: 0; }
.ar-app .ar-jan__main { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; }
.ar-app .ar-jan__conteudo { flex: 1 1 auto; min-block-size: 0; overflow: clip; padding: 20px 24px; }

.ar-app .ar-lat {
  display: flex; flex-direction: column; inline-size: 248px; block-size: 100%;
  background-color: var(--sidebar-bg);
  background-image: linear-gradient(to bottom, var(--sidebar-bg), var(--sidebar-bg), color-mix(in srgb, var(--sidebar-bg) 78%, black));
  border-inline-end: 1px solid var(--sidebar-border);
  color: var(--sidebar-fg);
}
.ar-app .ar-lat--recolhida { inline-size: 64px; }
.ar-app .ar-lat__marca { display: flex; align-items: center; block-size: 60px; padding: 0 12px; border-block-end: 1px solid var(--sidebar-border); flex-shrink: 0; }
.ar-app .ar-lat--recolhida .ar-lat__marca { justify-content: center; }
.ar-app .ar-lat--recolhida .ar-simbolo { inline-size: 26px; block-size: 26px; }
.ar-app .ar-lat__nav { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; padding: 12px 8px; min-block-size: 0; overflow: clip; }
.ar-app .ar-lat__grupo { display: flex; flex-direction: column; gap: 4px; }
.ar-app .ar-lat__grupo--fim { margin-block-start: auto; }
.ar-app .ar-lat__pulso { margin: 6px 8px; block-size: 10px; }
.ar-app .ar-lat__pulso svg { display: block; inline-size: 100%; block-size: 100%; }
.ar-app .ar-lat__div { margin: 4px 8px; border-block-start: 1px solid var(--sidebar-border); }
.ar-app .ar-lat__titulo { display: flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1.4; color: var(--sidebar-muted); }
.ar-app .ar-lat__faisca { color: var(--accent); opacity: .8; }
.ar-app .ar-lat__item {
  position: relative; display: flex; align-items: center; gap: 12px; min-block-size: 44px; padding: 0 12px;
  border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--sidebar-fg);
}
.ar-app .ar-lat--recolhida .ar-lat__item { justify-content: center; padding: 0; }
.ar-app .ar-lat__item--ativo {
  background: var(--sidebar-active-bg); color: var(--sidebar-fg-active);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sidebar-accent) 18%, transparent), 0 0 14px color-mix(in srgb, var(--sidebar-accent) 12%, transparent);
}
.ar-app .ar-lat__item--ativo::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; block-size: 24px; inline-size: 3px; margin-block-start: -12px; border-radius: 999px; background: var(--sidebar-accent); }
.ar-app .ar-lat__item--ativo .ar-i { color: var(--sidebar-accent); }
.ar-app .ar-lat__rot { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-app .ar-lat__cont { border-radius: 999px; background: #3EA07F; color: #071E15; padding: 2px 6px; font-size: var(--text-xs); font-weight: 500; line-height: 1.2; }
.ar-app .ar-lat__rodape { display: flex; align-items: center; gap: 8px; padding: 12px; border-block-start: 1px solid var(--sidebar-border); overflow: hidden; flex-shrink: 0; }
.ar-app .ar-lat--recolhida .ar-lat__rodape { justify-content: center; }
.ar-app .ar-lat__ini {
  display: flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; flex-shrink: 0; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--sidebar-accent) 22%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sidebar-accent) 35%, transparent);
  font-size: var(--text-sm); font-weight: 600; color: var(--sidebar-fg-active);
}
.ar-app .ar-lat__clinica { font-size: var(--text-sm); font-weight: 600; color: var(--sidebar-fg-active); }

.ar-app .ar-topo { display: flex; align-items: center; gap: 12px; block-size: 60px; flex-shrink: 0; padding: 0 20px; border-block-end: 1px solid var(--border); background: var(--surface); }
.ar-app .ar-topo__menu { display: none; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; color: var(--text-body); }
.ar-app .ar-topo__busca {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; max-inline-size: 28rem; block-size: 40px; padding: 0 12px 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2);
}
.ar-app .ar-topo__ph { flex: 1 1 auto; font-size: var(--text-sm); color: var(--text-subtle); }
.ar-app .ar-kbd { flex-shrink: 0; padding: 2px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-xs); font-weight: 600; line-height: 1.3; color: var(--text-muted); }
.ar-app .ar-topo__icone { display: flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; color: var(--text-muted); }
.ar-app .ar-topo__conta { display: flex; align-items: center; gap: 8px; }
.ar-app .ar-pres { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 500; }
.ar-app .ar-pres__ponto { inline-size: 8px; block-size: 8px; border-radius: 50%; }
.ar-app .ar-pres--online { color: var(--success); } .ar-app .ar-pres--online .ar-pres__ponto { background: var(--success); }
.ar-app .ar-pres--ausente { color: var(--warning-text); } .ar-app .ar-pres--ausente .ar-pres__ponto { background: var(--warning); }
.ar-app .ar-pres--offline { color: var(--text-muted); } .ar-app .ar-pres--offline .ar-pres__ponto { background: var(--text-subtle); }

.ar-app .ar-cab { margin-block-end: 16px; }
.ar-app .ar-cab__desc { margin-block-start: 2px; font-size: var(--text-sm); color: var(--text-muted); }
.ar-app .ar-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-block-end: 1px solid var(--border); background: var(--surface); }
.ar-app .ar-barra .ar-titulo { font-size: var(--text-lg); }

/* ================= Card, Badge, selo IA, botão ================= */
.ar-app .ar-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.ar-app .ar-card--none { padding: 0; } .ar-app .ar-card--sm { padding: 12px; } .ar-app .ar-card--md { padding: 16px; } .ar-app .ar-card--lg { padding: 24px; }
.ar-app .ar-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 1px solid; border-radius: 999px;
  font-size: var(--text-xs); font-weight: 600; line-height: 1.25; white-space: nowrap;
}
.ar-app .ar-badge--neutral, .ar-app .ar-badge--rascunho { color: var(--text-muted); background: var(--surface-2); border-color: var(--border); }
.ar-app .ar-badge--success { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 28%, transparent); }
.ar-app .ar-badge--warning { color: var(--text); background: color-mix(in srgb, var(--warning) 14%, transparent); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.ar-app .ar-badge--danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
/* accent: o produto usa text-accent (champagne); sobre claro vira --text-accent (D-A7-08) */
.ar-app .ar-badge--accent { color: var(--text-accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.ar-app .ar-badge--primary { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 28%, transparent); }
.ar-app .ar-badge--tracejado { border-style: dashed; }
.ar-app .ar-badge--canal { --c: var(--text-muted); color: var(--text); background: color-mix(in srgb, var(--c) 12%, transparent); border-color: color-mix(in srgb, var(--c) 26%, transparent); padding: 2px 8px; }
.ar-app .ar-canal--whatsapp_oficial { --c: var(--canal-whatsapp); }
.ar-app .ar-canal--instagram { --c: var(--canal-instagram); }
.ar-app .ar-canal--site { --c: var(--primary); }
.ar-app .ar-canal--email { --c: var(--primary-soft); }
.ar-app .ar-selo {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: var(--text-xs); font-weight: 600; line-height: 1.25; color: var(--text-accent);
}
.ar-app .ar-botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; block-size: 38px; padding: 0 14px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.ar-app .ar-botao--primario { background: var(--primary); color: var(--on-primary); }
.ar-app .ar-botao--contorno { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-body); }
.ar-app .ar-botao--fantasma { background: transparent; color: var(--text-muted); }
.ar-app .ar-botao--desabilitado { opacity: .5; }
.ar-app .ar-botao--p { block-size: 32px; padding: 0 10px; font-size: var(--text-xs); }

/* ================= StatCard e avatar ================= */
.ar-app .ar-stat { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); min-inline-size: 0; }
.ar-app .ar-stat__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ar-app .ar-stat__rotulo { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .025em; line-height: 1.4; color: var(--text-muted); }
.ar-app .ar-stat__linha { display: flex; align-items: flex-end; gap: 8px; margin-block-start: 12px; min-inline-size: 0; }
.ar-app .ar-stat__valor { font-size: var(--text-3xl); font-weight: 500; line-height: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.ar-app .ar-stat__delta { display: inline-flex; align-items: center; gap: 2px; margin-block-end: 2px; font-size: var(--text-sm); font-weight: 600; }
.ar-app .ar-stat__dica { margin-block-start: 8px; font-size: var(--text-xs); color: var(--text-muted); }
.ar-app .ar-av {
  --av: 28px; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; inline-size: var(--av); block-size: var(--av);
  border: 1px solid var(--border); border-radius: 50%; font-family: var(--font-body); font-weight: 600; line-height: 1; user-select: none;
  font-size: max(12px, calc(var(--av) * .38));
}
.ar-app .ar-av--0 { background: color-mix(in srgb, var(--primary) var(--av-mix), transparent); color: var(--primary); }
.ar-app .ar-av--1 { background: color-mix(in srgb, var(--accent) var(--av-mix), transparent); color: var(--text-accent); }
.ar-app .ar-av--2 { background: color-mix(in srgb, var(--primary-soft) 18%, transparent); color: var(--primary-hover); }
.ar-app .ar-av--3 { background: color-mix(in srgb, var(--warning) var(--av-mix), transparent); color: var(--warning); }
.ar-app .ar-av--4 { background: color-mix(in srgb, var(--success) var(--av-mix), transparent); color: var(--success); }

/* ================= LeadCard (funil) ================= */
.ar-app .ar-lead { position: relative; inline-size: 100%; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.ar-app .ar-lead--warning::before, .ar-app .ar-lead--danger::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 12px; inline-size: 3px; border-radius: 999px; }
.ar-app .ar-lead--warning::before { background: var(--warning); }
.ar-app .ar-lead--danger::before { background: var(--danger); }
.ar-app .ar-lead__linha { display: flex; align-items: flex-start; gap: 10px; }
.ar-app .ar-lead__corpo { flex: 1 1 auto; min-inline-size: 0; }
.ar-app .ar-lead__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ar-app .ar-lead__nome { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; color: var(--text); }
.ar-app .ar-lead__valor { flex-shrink: 0; font-size: var(--text-sm); font-weight: 500; line-height: 1.3; color: var(--text); }
.ar-app .ar-lead__proc { margin-block-start: 2px; font-size: var(--text-sm); color: var(--text-body); }
.ar-app .ar-lead__rodape { display: flex; align-items: center; gap: 8px; margin-block-start: 12px; }
.ar-app .ar-lead__dono { display: flex; align-items: center; gap: 4px; min-inline-size: 0; font-size: var(--text-xs); color: var(--text-muted); }
.ar-app .ar-lead__tempo { display: flex; flex-shrink: 0; align-items: center; gap: 4px; margin-inline-start: auto; font-size: var(--text-xs); color: var(--text-muted); }
.ar-app .ar-lead__tempo.ar-tx-warning { color: var(--warning); }
.ar-app .ar-lead__tempo.ar-tx-danger { color: var(--danger); }
.ar-app .ar-lead__selos { display: flex; align-items: center; gap: 6px; margin-block-start: 8px; }

/* ================= TaskItem (tarefas) ================= */
.ar-app .ar-tarefa { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr); align-items: start; column-gap: 12px; row-gap: 8px; padding: 12px 16px; }
.ar-app[data-sim-arranjo="largo"] .ar-tarefa { display: flex; gap: 12px; }
.ar-app .ar-tarefa--feita { opacity: .6; }
.ar-app .ar-tarefa__check { display: flex; align-items: center; justify-content: center; inline-size: 28px; block-size: 44px; flex-shrink: 0; }
.ar-app .ar-tarefa__caixa { display: flex; align-items: center; justify-content: center; inline-size: 20px; block-size: 20px; border: 2px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: transparent; }
.ar-app .ar-tarefa--feita .ar-tarefa__caixa { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.ar-app .ar-tarefa__tipo { display: flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; flex-shrink: 0; margin-block-start: 2px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-muted); }
.ar-app .ar-tarefa__corpo { flex: 1 1 auto; min-inline-size: 0; }
.ar-app .ar-tarefa__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ar-app .ar-tarefa__nome { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.ar-app .ar-tarefa--feita .ar-tarefa__nome { text-decoration: line-through; text-decoration-color: var(--text-subtle); }
.ar-app .ar-tarefa__desc { margin-block-start: 2px; font-size: var(--text-xs); color: var(--text-muted); }
.ar-app .ar-tarefa__res { display: flex; align-items: flex-start; gap: 6px; margin-block-start: 4px; font-size: var(--text-xs); }
.ar-app .ar-tarefa__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-block-start: 6px; font-size: var(--text-xs); color: var(--text-muted); }
.ar-app .ar-tarefa__pac { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text-body); }
.ar-app .ar-tarefa__vinc { display: inline-flex; align-items: center; gap: 4px; color: var(--text-subtle); overflow: hidden; }
.ar-app .ar-tarefa__ver { display: inline-flex; margin-block-start: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--primary); }
.ar-app .ar-tarefa__lado { grid-column: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-inline-size: 0; }
.ar-app[data-sim-arranjo="largo"] .ar-tarefa__lado { flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: 6px; margin-inline-start: auto; padding-inline-start: 4px; }
.ar-app .ar-tarefa__acoes { display: flex; align-items: center; gap: 4px; }
.ar-app .ar-tarefa__prazo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; white-space: nowrap; border-radius: 999px; font-size: var(--text-xs); color: var(--text-muted); }
.ar-app .ar-tarefa__prazo--vencida { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.ar-app .ar-tarefa--feita .ar-tarefa__prazo { color: var(--text-subtle); }
.ar-app .ar-tarefa__resp { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); }
.ar-app .ar-so-largo { display: none; }
.ar-app[data-sim-arranjo="largo"] .ar-so-largo { display: inline; }

/* ================= AppointmentCard (agenda), sem sala ================= */
.ar-app .ar-ag { position: relative; display: flex; gap: 12px; overflow: hidden; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.ar-app .ar-ag--confirmar { border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.ar-app .ar-ag--falta { opacity: .8; }
.ar-app .ar-ag__faixa { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px; background: var(--ag-cor); }
.ar-app .ar-ag__faixa--tracejada { background: none; border-inline-start: 3px dashed var(--ag-cor); }
.ar-app .ar-ag__hora { display: flex; flex-direction: column; align-items: center; justify-content: center; inline-size: 64px; flex-shrink: 0; padding: 8px 0 8px 4px; border-radius: var(--radius-sm); background: var(--surface-2); }
.ar-app .ar-ag__h { font-size: var(--text-lg); font-weight: 500; line-height: 1; color: var(--text); }
/* o produto usa 0,65rem aqui; o site não desce abaixo de 12 px (06-SIMULACOES 2.4) */
.ar-app .ar-ag__dur { margin-block-start: 4px; font-size: var(--text-xs); color: var(--text-subtle); }
.ar-app .ar-ag__corpo { display: flex; flex: 1 1 auto; flex-direction: column; min-inline-size: 0; }
.ar-app .ar-ag__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ar-app .ar-ag__quem { display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
.ar-app .ar-ag__pac { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.ar-app .ar-ag__proc { font-size: var(--text-xs); color: var(--text-muted); }
.ar-app .ar-ag__selos { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ar-app .ar-ag__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-block-start: 8px; font-size: var(--text-xs); color: var(--text-muted); }
.ar-app .ar-ag__meta span { display: inline-flex; align-items: center; gap: 4px; }
.ar-app .ar-ag__acoes { display: flex; align-items: center; gap: 8px; margin-block-start: 10px; }
.ar-app .ar-ag__mais { display: inline-flex; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px; border-radius: var(--radius-md); color: var(--text-muted); }

/* ================= bolha de mensagem (paciente e equipe) ================= */
.ar-app .ar-msg { display: flex; inline-size: 100%; align-items: flex-end; gap: 8px; }
.ar-app .ar-msg--saida { justify-content: flex-end; }
.ar-app .ar-msg--entrada .ar-av { margin-block-end: 20px; }
.ar-app .ar-msg__col { display: flex; flex-direction: column; max-inline-size: 74%; }
.ar-app .ar-msg--saida .ar-msg__col { align-items: flex-end; }
.ar-app .ar-msg--entrada .ar-msg__col { align-items: flex-start; }
.ar-app .ar-msg__bolha { padding: 8px 12px; font-size: var(--text-sm); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--radius-md); }
.ar-app .ar-msg--entrada .ar-msg__bolha { border-end-start-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-body); }
.ar-app .ar-msg--saida .ar-msg__bolha { border-end-end-radius: var(--radius-sm); background: var(--primary); color: var(--on-primary); }
/* o produto usa 11 px no rodapé da bolha; o site não desce abaixo de 12 px */
.ar-app .ar-msg__rodape { display: flex; align-items: center; gap: 6px; margin-block-start: 4px; padding: 0 2px; font-size: var(--text-xs); color: var(--text-subtle); }
.ar-app .ar-msg__autor { font-weight: 500; color: var(--text-muted); }

/* ================= arranjo estreito (celular): sem lateral, como o produto abaixo de md ================= */
.ar-app[data-sim-arranjo="estreito"] .ar-jan { grid-template-columns: minmax(0, 1fr); }
.ar-app[data-sim-arranjo="estreito"] .ar-lat { display: none; }
.ar-app[data-sim-arranjo="estreito"] .ar-topo { block-size: 56px; gap: 8px; padding: 0 8px; }
.ar-app[data-sim-arranjo="estreito"] .ar-topo__menu { display: flex; }
.ar-app[data-sim-arranjo="estreito"] .ar-topo__busca { flex: 0 0 40px; inline-size: 40px; justify-content: center; padding: 0; }
.ar-app[data-sim-arranjo="estreito"] .ar-topo__ph, .ar-app[data-sim-arranjo="estreito"] .ar-kbd { display: none; }
.ar-app[data-sim-arranjo="estreito"] .ar-jan__conteudo { padding: 16px; }
.ar-app[data-sim-arranjo="estreito"] .ar-stat { padding: 16px; }
.ar-app[data-sim-arranjo="estreito"] .ar-stat__valor { font-size: var(--text-2xl); }

/* tema forçado pela página (laboratório): o fundo da janela acompanha o tema da tela, para a máscara do corte */
.sim__janela:has(> .ar-app[data-sim-tema="escuro"]) { background: #0D110F; }
.sim__janela:has(> .ar-app[data-sim-tema="claro"]) { background: #F7F9F8; }