/* Área do cliente logado: agendamentos, plano, recibos, perfil e agendar com plano.
   Mobile-first (375 px). Só tokens --c-* do system.css. Sem estilo inline.
   Incluir no index.html depois de system.css. */

.ca-page { display: grid; gap: 16px; min-width: 0; }
.ca-page > .card, .ca-page .card { margin-bottom: 0; }
.ca-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ca-title { margin: 0; font-size: var(--fs-xl, 1.625rem); line-height: 1.2; }
.ca-title:focus { outline: none; }
.ca-section-title { margin: 0; font-size: var(--fs-lg, 1.25rem); line-height: 1.25; }
.ca-lead { margin: 0; font-size: var(--fs-base, 1.0625rem); color: var(--c-muted); line-height: 1.5; }

/* Textos e chips: nunca abaixo de 14 px */
.ca-page .chip, .modal-card .chip { font-size: .875rem; white-space: nowrap; }
.ca-page .kpi-label { font-size: .875rem; letter-spacing: 0; text-transform: none; }

/* Listas e cartões de item */
.ca-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ca-item { display: grid; gap: 12px; padding: 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; min-width: 0; }
.ca-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ca-item__heading { min-width: 0; display: grid; gap: 2px; }
.ca-item__title { margin: 0; font-size: var(--fs-base, 1.0625rem); font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.ca-item__when { margin: 0; font-size: var(--fs-sm, .9375rem); color: var(--c-muted); }
.ca-meta { display: grid; gap: 6px; margin: 0; }
.ca-meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: var(--fs-sm, .9375rem); }
.ca-meta dt { color: var(--c-muted); flex: 0 0 auto; }
.ca-meta dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.ca-meta .ca-meta__total { padding-top: 8px; border-top: 1px solid var(--c-border); font-size: var(--fs-base, 1.0625rem); }
.ca-note { margin: 0; font-size: var(--fs-sm, .9375rem); line-height: 1.5; color: var(--c-muted); }
.ca-note--warn { color: var(--c-warning); }
.ca-note--box { padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-input); }
.ca-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ca-actions > .btn, .ca-actions > a.btn { flex: 1 1 140px; min-height: 48px; margin: 0; text-decoration: none; }
.ca-amount { font-weight: 800; font-variant-numeric: tabular-nums; }
.ca-amount--in { color: var(--c-success); }

/* Estados: vazio, erro */
.ca-empty { display: grid; gap: 12px; justify-items: center; padding: 28px 16px; text-align: center; background: var(--c-surface); border: 1px dashed var(--c-border); border-radius: 16px; }
.ca-empty .ca-note { max-width: 32ch; }
.ca-error { display: grid; gap: 12px; border-color: var(--c-danger); }

/* Histórico recolhível */
.ca-history { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; }
.ca-history > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 16px; font-weight: 750; font-size: var(--fs-base, 1.0625rem); cursor: pointer; list-style: none; }
.ca-history > summary::-webkit-details-marker { display: none; }
.ca-history > summary::after { content: '+'; font-size: 1.5rem; line-height: 1; color: var(--c-muted); }
.ca-history[open] > summary::after { content: '\2212'; }
.ca-history > .ca-list { padding: 0 12px 12px; }

/* Saldo de crédito */
.ca-balance { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ca-balance__value { font-size: var(--fs-xl, 1.625rem); font-weight: 800; color: var(--c-primary-text); font-variant-numeric: tabular-nums; }

/* Plano */
.ca-features { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--fs-sm, .9375rem); }
.ca-features li { padding-left: 22px; position: relative; }
.ca-features li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); }
.ca-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ca-price strong { font-size: var(--fs-xl, 1.625rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.ca-price span { color: var(--c-muted); font-size: var(--fs-sm, .9375rem); }

/* Formulários */
.ca-form { display: grid; gap: 16px; }
.ca-field { display: grid; gap: 6px; }
.ca-field .form-label { margin: 0; }
.ca-page .form-input { width: 100%; min-height: 48px; font-size: 16px; box-sizing: border-box; padding: 10px 12px; }
.ca-form-error { margin: 0; font-size: var(--fs-sm, .9375rem); font-weight: 700; color: var(--c-danger); }
.ca-danger { border-color: color-mix(in srgb, var(--c-danger) 55%, var(--c-border)); }

/* Feedback de toque */
.ca-page .btn:active:not(:disabled), .modal-card .btn:active:not(:disabled), .ca-page .slot-btn:active, .ca-page .selectable-card:active:not(:disabled) { filter: brightness(.9); transform: scale(.98); }

/* Pix */
.ca-pix { display: grid; gap: 12px; justify-items: center; }
.ca-pix > * { max-width: 100%; }
.ca-pix .qr-svg, .ca-pix .ca-qr-img { width: 100%; max-width: 220px; height: auto; background: #fff; padding: 12px; border-radius: 12px; box-sizing: border-box; }
.ca-pix .pix-code-box { width: 100%; max-height: 112px; overflow: auto; margin: 0; font-size: .875rem; overflow-wrap: anywhere; user-select: all; box-sizing: border-box; }
.ca-pix .btn, .ca-pix a.btn { width: 100%; text-decoration: none; }
.ca-pix .ca-note { text-align: center; }

/* Recibo */
.ca-receipt { display: grid; gap: 12px; }
.ca-receipt__shop { margin: 0; font-weight: 800; font-size: var(--fs-lg, 1.25rem); }
.ca-receipt .ca-note--box { text-align: center; text-transform: uppercase; letter-spacing: .02em; }

/* Agendar com plano: opções, passos */
.ca-back { justify-self: start; }
.ca-options { display: grid; gap: 12px; }
.ca-option { display: grid; gap: 4px; width: 100%; padding: 16px; text-align: left; min-height: 64px; }
.ca-option__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ca-option strong { font-size: var(--fs-base, 1.0625rem); }
.ca-option__price { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--c-primary-text); }
.ca-option:disabled { cursor: not-allowed; border-style: dashed; color: var(--c-muted); background: var(--c-elevated); }
.ca-option:disabled::after { content: none; }
.ca-steps { margin: 0; font-size: var(--fs-sm, .9375rem); color: var(--c-muted); }
.ca-slots { display: grid; gap: 8px; min-height: 80px; }
.ca-picker.is-busy .slot-btn { opacity: .6; pointer-events: none; }
.ca-picker .day-strip { margin-inline: -4px; padding-inline: 4px; }
.ca-done { display: grid; gap: 16px; justify-items: center; text-align: center; }
.ca-done .ca-meta { width: 100%; text-align: left; }
.ca-done .ca-actions { width: 100%; }
.ca-done__seal { width: 72px; height: 72px; color: var(--c-success); }
.ca-done__seal circle { fill: color-mix(in srgb, var(--c-success) 12%, var(--c-surface)); stroke: currentColor; stroke-width: 2; }
.ca-done__seal path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ca-booking .summary-bar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.ca-booking { padding-bottom: 8px; }
.ca-turnstile { min-height: 70px; }

/* Impressão do recibo: só o conteúdo do modal sai no papel. */
@media print {
  body.printing-receipt .app-shell, body.printing-receipt #toast-container, body.printing-receipt .startup-loader { display: none !important; }
  body.printing-receipt .modal-backdrop { position: static; display: block; background: none; backdrop-filter: none; padding: 0; }
  body.printing-receipt .modal-card { position: static; max-width: none; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; padding: 0; animation: none; background: #fff; color: #000; }
  body.printing-receipt .modal-card::before { display: none; }
  body.printing-receipt .modal-card .chip, body.printing-receipt .modal-card .price-breakdown, body.printing-receipt .ca-note--box { background: none; color: #000; border-color: #000; }
}