/**
 * Schneider UI — uma boca visual
 * Site + Care OS · cores aveludadas dentro da paleta oficial (551 / 321 / 5473 C)
 * Referência de acolhimento: superfícies macias, teal em pó — sem laranja Clinicorp.
 */

:root {
  /* Oficial */
  --brand-light: #9eb9be;
  --brand-mid: #3e8992;
  --brand-dark: #326f75;

  /* Aveludado — derivado da marca, não substituto */
  --velvet-white: #fbfcfb;
  --velvet-paper: #f3f6f3;
  --velvet-mist: #e8f0f1;
  --velvet-blush: #dce8e7;
  --velvet-teal: #c5dde0;
  --velvet-teal-deep: #b3ced2;

  --ink: #1e3335;
  --ink-2: #2a4548;
  --muted: #6a8285;
  --paper: var(--velvet-paper);
  --paper-2: var(--velvet-mist);
  --line: rgba(158, 185, 190, 0.38);
  --line-strong: rgba(62, 137, 146, 0.2);

  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.92);
  --surface-solid: #ffffff;
  --surface-elevated: rgba(255, 255, 255, 0.96);

  --teal: var(--brand-dark);
  --teal-mid: var(--brand-mid);
  --teal-deep: #2a4548;
  --teal-soft: var(--velvet-mist);
  --teal-bright: var(--brand-mid);
  --accent-soft: var(--brand-light);

  --bubble: #d6ebee;
  --bubble-hover: #c8e4e8;
  --bubble-ink: #1a3336;

  --gold: var(--brand-mid);
  --gold-soft: var(--brand-light);
  --gold-bright: var(--brand-light);

  --coral: #c45c4a;
  --glow-teal: 0 0 14px rgba(158, 185, 190, 0.32);
  --glow-gold: 0 0 12px rgba(158, 185, 190, 0.24);
  --glow-btn: var(--shadow-bubble);

  --font: "Sora", system-ui, sans-serif;
  --display: "Sora", system-ui, sans-serif;
  --sans: "Sora", system-ui, sans-serif;
  --script: "Sora", system-ui, sans-serif;

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

  --shadow: 0 18px 48px rgba(50, 111, 117, 0.06);
  --shadow-soft: 0 8px 22px rgba(50, 111, 117, 0.045);
  --shadow-bubble: 0 6px 18px rgba(50, 111, 117, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(158, 185, 190, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --glass: rgba(255, 255, 255, 0.78);

  --wa-bg: var(--velvet-mist);
  --wa-in: #ffffff;
  --wa-out: #d6ebee;

  /* Fundos compartilhados */
  --sch-bg-hero: radial-gradient(820px 420px at 92% 96%, rgba(158, 185, 190, 0.22), transparent 58%),
    radial-gradient(640px 360px at 8% 12%, rgba(200, 228, 232, 0.35), transparent 62%),
    linear-gradient(168deg, var(--velvet-white) 0%, var(--velvet-paper) 42%, var(--velvet-mist) 100%);

  --sch-bg-app: radial-gradient(900px 480px at 88% 108%, rgba(158, 185, 190, 0.14), transparent 55%),
    linear-gradient(165deg, var(--velvet-white) 0%, var(--velvet-paper) 52%, var(--velvet-blush) 100%);
}

body {
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (hover: hover) and (pointer: fine) {
  body {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: optimizeLegibility;
  }

  body[data-theme="dark"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Grade sutil — acolhimento sem ruído */
.sch-grid-bg {
  background-image: linear-gradient(rgba(158, 185, 190, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158, 185, 190, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
}

.sch-btn,
.btn-primary,
.btn.primary,
.btn.gold,
.btn-send,
.nav-cta,
.btn.soft {
  box-shadow: var(--shadow-bubble);
}

.wa-fab,
.sofia-fab,
.btn-mic {
  position: relative;
}

.wa-fab::after,
.sofia-fab::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  width: 42%;
  height: 28%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}

.bubble-fab {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.4rem 0.35rem 1.05rem;
  width: auto;
  height: auto;
  min-height: 56px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-bubble);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  transition: transform 0.28s var(--ease), box-shadow 0.28s ease, border-color 0.25s ease;
}

.bubble-fab-label {
  white-space: nowrap;
  color: var(--ink);
}

.bubble-fab-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--brand-mid), var(--brand-dark));
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(50, 111, 117, 0.18);
}

.bubble-fab.wa .bubble-fab-icon {
  background: linear-gradient(145deg, #2d7a5a, #1f6b4a);
}

@media (hover: hover) and (pointer: fine) {
  .bubble-fab:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(62, 137, 146, 0.28);
    box-shadow: 0 12px 28px rgba(50, 111, 117, 0.1);
  }

  .btn-primary:hover,
  .btn.primary:hover,
  .btn.gold:hover,
  .nav-cta:hover {
    background: var(--bubble-hover);
  }
}

@media (max-width: 720px) {
  .bubble-fab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .bubble-fab {
    padding: 0.3rem;
    min-height: 56px;
  }
}

.sch-paper {
  background: var(--sch-bg-app);
}

.sch-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

body[data-role] .panel,
body[data-role] .metric,
body[data-role] .column,
body[data-role] .card {
  border-radius: var(--radius);
}