:root { --midori: #177b75; --midori-dark: #0d5551; --ink: #18302f; --soft: #eff8f7; --line: #d5e4e2; }
.booking-step { color: var(--midori); font-size: 12px; font-weight: 800; letter-spacing: .1em; margin: 0; }
.booking-primary, .booking-action { font: inherit; cursor: pointer; }
.booking-primary, .booking-action { background: var(--midori); border: 0; border-radius: 10px; color: #fff; font-weight: 700; padding: 14px 22px; }
.booking-flow { background: #fff; color: var(--ink); display: flex; flex-direction: column; min-height: 100dvh; }
.booking-flow-head { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px #102d2a0f; position: sticky; top: 0; z-index: 6; }.booking-flow-lockup { align-items: flex-start; display: flex; gap: 12px; margin: 0 auto; max-width: 620px; padding: 18px 20px 15px; }.booking-flow-lockup > div { flex: 1; }.booking-flow-lockup h1 { color: var(--midori-dark); font-size: 23px; line-height: 1.15; margin: 4px 0 0; }.booking-close, .booking-back { background: transparent; border: 0; color: var(--midori-dark); cursor: pointer; font-size: 32px; line-height: 24px; padding: 0; }.booking-back { font-size: 38px; margin-top: 2px; }
/* O cabeçalho do site é HTML do site; em tela inteira o fluxo fica com o topo. */
body.booking-open .header-interno { display: none; }
.booking-flow-body { margin: 0 auto; max-width: 620px; padding: 22px 20px 64px; width: 100%; }
.booking-choice-list { display: grid; gap: 10px; }.booking-choice { background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); cursor: pointer; padding: 16px; text-align: left; width: 100%; }.booking-choice strong, .booking-choice span { display:block; }.booking-choice span { color: #52716e; font-size: 14px; margin-top: 5px; }.booking-choice.is-selected { background: var(--soft); border-color: var(--midori); }
.booking-doctor-banner { align-items: center; background: var(--soft); border-radius: 12px; display: flex; gap: 12px; margin-bottom: 18px; padding: 12px; }.booking-doctor-banner img { border-radius: 50%; height: 54px; object-fit: cover; width: 54px; }.booking-doctor-banner strong, .booking-doctor-banner span { display:block; }.booking-doctor-banner span { font-size: 13px; margin-top: 3px; }
.booking-calendar { display: grid; gap: 8px; grid-template-columns: repeat(5, 1fr); }.booking-day { aspect-ratio: .85; background: #f3f5f5; border: 1px solid transparent; border-radius: 9px; color: #79908e; font-size: 12px; padding: 5px 2px; }.booking-day small, .booking-day strong { display: block; }.booking-day small { font-size: 10px; }.booking-day.is-available { background: #e4f6ef; border-color: #8bcdb4; color: #075f44; cursor: pointer; }.booking-day.is-available::after { content: '•'; color: #159b6a; font-size: 19px; line-height: 5px; }.booking-day.is-available:focus-visible { outline: 3px solid #185cc4; }
.booking-slots { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 18px; }.booking-slot { background: var(--soft); border: 2px solid var(--midori); border-radius: 10px; color: var(--midori-dark); cursor:pointer; font-weight:800; padding: 14px; }.booking-slot small { display:block; font-size:11px; margin-top:4px; }.booking-note { color: #52716e; font-size: 14px; line-height: 1.4; }.booking-loading { align-items:center; display:flex; justify-content:center; min-height:250px; }
.booking-flow a:focus, .booking-flow button:focus, .booking-day.is-available:focus-visible { outline: none; }
.booking-field { display: grid; gap: 6px; margin: 15px 0; }.booking-field input, .booking-field textarea { border: 1px solid #93aaa8; border-radius: 9px; font: inherit; padding: 13px; width: 100%; }.booking-field textarea { min-height: 78px; resize: vertical; }.booking-counter { color:#52716e; font-size:12px; text-align:right; }.booking-check { align-items:center; display:flex; gap:9px; font-size:14px; margin:18px 0; }.booking-check input { margin:0; }.booking-action { width:100%; }.booking-error { background:#fff1f0; border-radius:9px; color:#a4261b; font-size:14px; margin-bottom:12px; padding:10px; }.booking-success { text-align:center; padding:30px 4px; }.booking-success h3 { color:var(--midori-dark); }.booking-success p { line-height:1.5; }
.booking-procedure-list { border:1px solid var(--line); border-radius:11px; display:grid; gap:0; margin:16px 0; overflow:hidden; }.booking-procedure { align-items:center; background:#fff; border:0; cursor:pointer; display:flex; gap:10px; margin:0; padding:12px 13px; }.booking-procedure + .booking-procedure { border-top:1px solid var(--line); }.booking-procedure input { accent-color:var(--midori); margin:0; }.booking-procedure strong, .booking-procedure span { display:block; }.booking-procedure span { color:#52716e; font-size:13px; margin-top:3px; }
.booking-procedure-details { flex:1; margin-top:0 !important; }.booking-procedure-price { color:var(--midori-dark); font-size:14px; margin-left:auto; text-align:right; white-space:nowrap; }.booking-procedure-total { background:var(--soft); border-radius:10px; margin:-3px 0 16px; padding:14px; }.booking-procedure-total p { color:#52716e; font-size:13px; margin:0 0 7px; }.booking-procedure-total strong { color:var(--midori-dark); display:block; font-size:18px; }.booking-payment-note { border-top:1px solid #c8e2df; line-height:1.4; margin:10px 0 0 !important; padding-top:10px; }
.booking-radio-group { border:1px solid var(--line); border-radius:11px; margin:16px 0; padding:0; }.booking-radio-group legend { color:var(--midori-dark); font-size:14px; font-weight:700; margin-left:12px; padding:0 5px; }.booking-radio-group label { align-items:center; cursor:pointer; display:flex; gap:10px; margin:0; padding:13px; }.booking-radio-group label + label { border-top:1px solid var(--line); }.booking-radio-group input { accent-color:var(--midori); margin:0; }.booking-radio-group span { flex:1; }.booking-radio-group span strong, .booking-radio-group span small { display:block; }.booking-radio-group span small { color:#52716e; font-size:13px; line-height:1.35; margin-top:4px; }.booking-radio-group > label > strong { color:var(--midori-dark); font-size:14px; white-space:nowrap; }
.booking-reference { border-top:1px solid var(--line); margin:22px 0; padding-top:18px; }.booking-reference h3 { color:var(--midori-dark); font-size:17px; margin:0 0 6px; }.booking-reference p { color:#52716e; font-size:13px; line-height:1.45; }.booking-reference ul { list-style:none; margin:10px 0 16px; padding:0; }.booking-reference li { align-items:center; border-bottom:1px solid var(--line); display:flex; font-size:13px; gap:12px; justify-content:space-between; padding:9px 0; }.booking-reference li strong { color:var(--midori-dark); white-space:nowrap; }
@media (max-width: 720px) { .booking-flow-lockup { padding: 14px 16px 12px; }.booking-flow-lockup h1 { font-size: 21px; }.booking-flow-body { padding: 18px 16px 48px; }.booking-day { font-size: 11px; } }
.booking-fallback { background: var(--soft); border-radius: 11px; margin-top: 14px; padding: 15px; text-align: center; }.booking-fallback .booking-note { margin: 0 0 12px; }.booking-fallback .booking-action { background: #25d366; color: #0b3320; display: block; }.booking-fallback-phone { color: var(--midori-dark); display: inline-block; font-size: 14px; margin-top: 11px; text-decoration: underline; }
.booking-success-summary { color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.45; margin: 0 0 12px; }
.booking-searching { color: var(--midori); flex-direction: column; gap: 16px; }.booking-searching p { color: #52716e; font-size: 14px; margin: 0; text-align: center; }.booking-searching-art { height: 104px; width: 124px; }
.booking-searching-lens { animation: booking-sweep 3.2s ease-in-out infinite; transform-box: view-box; transform-origin: 0 0; }.booking-searching-row { animation: booking-daypulse 1.8s ease-in-out infinite; }
@keyframes booking-sweep { 0% { transform: translate(34px, 54px); } 30% { transform: translate(62px, 48px); } 55% { transform: translate(84px, 66px); } 80% { transform: translate(44px, 74px); } 100% { transform: translate(34px, 54px); } }
@keyframes booking-daypulse { 0%, 100% { opacity: .22; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .booking-searching-lens, .booking-searching-row { animation: none; opacity: .45; } }
.booking-calendar-hint { margin-top: 22px !important; text-align: center; }
.booking-turnstile { margin-bottom: 14px; }
.booking-success-list { background: var(--soft); border-radius: 10px; color: var(--midori-dark); font-size: 14px; line-height: 1.45; margin: 0 0 14px; padding: 11px 14px; }
.booking-slot-price { background: var(--soft); border-radius: 10px; margin: 18px 0 0; padding: 12px 14px; }.booking-slot-price-row { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin: 0 !important; }.booking-slot-price span { color: #52716e; font-size: 14px; }.booking-slot-price strong { color: var(--midori-dark); font-size: 17px; white-space: nowrap; }.booking-slot-price .booking-payment-note { color: #52716e; font-size: 13px; }
.booking-doctor-banner .booking-registry { color: #6a8785; display: inline; font-size: 12px; margin-left: 8px; white-space: nowrap; }
@media (max-width: 480px) { .booking-doctor-banner .booking-registry { display: block; margin-left: 0; margin-top: 2px; } }
.booking-terms { list-style: none; margin: 4px 0 26px; padding: 0; }.booking-terms li { border-bottom: 1px solid var(--line); color: #3f5d5a; font-size: 14.5px; line-height: 1.5; padding: 13px 0 13px 22px; position: relative; }.booking-terms li:last-child { border-bottom: 0; }.booking-terms li::before { color: var(--midori); content: "•"; font-size: 18px; left: 4px; line-height: 1.2; position: absolute; top: 12px; }

/* A lista em /agendamentos segue os cards de /agenda (lá o CSS é inline na página). */
.agenda-medicos { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 40px; text-align: center; }
.agenda-medicos button { background-color: #fff; border: 0; color: #000; cursor: pointer; display: block; font: inherit; padding: 15px; text-align: center; width: 100%; }
.agenda-medicos button img { display: block; margin: auto; max-width: 138px; }
.agenda-medicos button span { display: inline-block; }
.agenda-medicos button span strong { display: block; }
.agenda-servicos { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agenda-servicos__card button { background-color: #fff; border: 0; color: #000; cursor: pointer; display: block; font: inherit; height: 100%; padding: 24px 20px; text-align: center; width: 100%; }
.agenda-servicos__card strong { display: block; margin-bottom: 4px; }
@media (max-width: 1023px) { .agenda-medicos, .agenda-servicos { grid-template-columns: 1fr; margin-left: auto; margin-right: auto; max-width: 760px; width: 100%; } }
/* Com o fluxo aberto, o esqueleto da página sai de cena: o fluxo fica sozinho. */
body.booking-open .footer, body.booking-open #flashcard, body.booking-open .mobile-nav-toggle, body.booking-open .slide-out-nav { display: none !important; }
.booking-confirm { background: #fff8e6; border: 2px solid #e0a100; border-radius: 12px; margin: 18px 0 6px; padding: 18px 16px; text-align: center; }
.booking-confirm-message { color: #5c4300; font-size: 16px; font-weight: 700; line-height: 1.45; margin: 0 0 14px; }
.booking-confirm .booking-action { background: #25d366; color: #0b3320; display: block; text-decoration: none; }
.booking-confirm-qr { margin: 16px auto 4px; max-width: 180px; }
.booking-confirm-qr svg { background: #fff; border-radius: 8px; display: block; height: auto; width: 100%; }
.booking-confirm-qr figcaption { color: #5c4300; font-size: 13px; line-height: 1.4; margin-top: 8px; }