/*
 * Área do cliente (OPS-05/US03; protótipo aprovado em 24/09/2026): o shell da BigSolu com o menu simplificado e os
 * mesmos blocos sc-* da agenda online. Só os tokens --sc-* mudam: aqui eles são a paleta escura da Suite.
 */
.ca-app {
  --sc-bg: #070e1d;
  --sc-surface: #0d172b;
  --sc-surface-strong: #111d33;
  --sc-border: #263650;
  --sc-text: #f8fafc;
  --sc-muted: #8da0bb;
  --sc-primary: #2563eb;
  --sc-on-primary: #ffffff;
  --sc-primary-soft: rgba(37, 99, 235, 0.18);
  --sc-input-bg: #071020;
  --sc-success: #45e6b0;
  --sc-success-soft: rgba(16, 185, 129, 0.16);
  --sc-warning: #fbbf24;
  --sc-warning-soft: rgba(245, 158, 11, 0.18);
  --sc-danger: #fb7185;
  --sc-danger-soft: rgba(244, 63, 94, 0.17);
  --sc-info: #7db7ff;
  --sc-info-soft: rgba(59, 130, 246, 0.18);
  --sc-focus: 0 0 0 3px rgba(96, 165, 250, 0.45);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--sc-text);
  background: #0b1120;
}
/* O reset do Tailwind zera o negrito que o protótipo herda do navegador. */
.ca-app :is(h1, h2, h3, strong) { font-weight: 750; }

.ca-header { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 24px; border-bottom: 1px solid rgba(51, 65, 85, 0.5); background: #0f172a; }
.ca-brand { display: flex; align-items: center; gap: 10px; color: #ffffff; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; }
.ca-brand-mark { color: #38bdf8; font-size: 22px; }
.ca-brand-accent { color: #38bdf8; }
.ca-area-label { padding-left: 14px; border-left: 1px solid var(--sc-border); color: var(--sc-muted); font-size: 13px; font-weight: 650; }
.ca-avatar { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #ffffff; background: #4f46e5; font-weight: 800; }
.ca-menu-toggle { display: none; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 10px; color: #e2e8f0; background: transparent; }

.ca-shell { flex: 1 1 auto; display: flex; overflow: hidden; }
.ca-sidebar { flex: 0 0 288px; display: flex; flex-direction: column; padding: 24px 16px 16px; border-right: 1px solid rgba(51, 65, 85, 0.5); background: #1e293b; overflow-y: auto; }
.ca-group-title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0 4px; font-size: 14px; font-weight: 700; }
.ca-group-title i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #93c5fd; background: rgba(37, 99, 235, 0.18); font-size: 13px; }
.ca-nav { display: flex; flex-direction: column; gap: 4px; margin-left: 13px; padding-left: 8px; border-left: 1px solid var(--sc-border); }
.ca-nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: #d5deeb; font-size: 14px; text-decoration: none; }
.ca-nav-item:hover { color: #ffffff; background: rgba(255, 255, 255, 0.05); }
.ca-nav-item.active { color: #ffffff; background: #27446f; font-weight: 650; }
.ca-nav-item i { width: 18px; text-align: center; }
.ca-nav-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sc-border); }
.ca-app .ca-nav-footer .ca-nav-item { width: 100%; height: 44px; justify-content: flex-start; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; }

.ca-main { flex: 1 1 auto; overflow-y: auto; background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 45%), #0b1120; }
.ca-content { max-width: 1120px; margin: 0 auto; padding: 44px 40px 72px; }
.ca-page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.ca-eyebrow { margin: 0 0 8px; color: #60a5fa; font-size: 11px; font-weight: 850; letter-spacing: 0.15em; text-transform: uppercase; }
.ca-page-title { margin: 0; font-size: 32px; line-height: 1.1; letter-spacing: -0.035em; }
.ca-page-copy { margin: 10px 0 0; max-width: 720px; color: #cbd5e1; font-size: 15px; line-height: 1.55; }
.ca-app .ca-link { color: #60a5fa; }
/* Links que agem como botão (telefone e mapa do lugar): a mesma altura e o mesmo peso dos botões ao lado. */
.ca-app a.sc-inline-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 1px solid transparent; border-radius: 12px; color: var(--sc-primary); font-size: 14px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.ca-app a.sc-inline-link.filled { padding: 0 20px; color: var(--sc-text); border-color: var(--sc-border); background: var(--sc-surface-strong); }
.ca-app .sc-danger-outline { color: var(--sc-danger) !important; border: 1px solid var(--sc-danger) !important; }
.ca-card-icon { flex: 0 0 auto; margin-top: 3px; color: var(--sc-primary); }
.ca-app .sc-offer { border-color: var(--sc-warning); background: var(--sc-warning-soft); }
.ca-app .sc-offer .ca-card-icon { color: var(--sc-warning); }
.ca-loading { height: 100vh; display: grid; place-items: center; color: #94a3b8; background: #0b1120; }

/* Tablet: o menu vira trilho de ícones. */
@media (max-width: 1023px) {
  .ca-sidebar { flex-basis: 80px; padding: 20px 10px; }
  .ca-group-title span, .ca-nav-item span, .ca-area-label { display: none; }
  .ca-nav { margin-left: 0; padding-left: 0; border-left: 0; }
  .ca-nav-item, .ca-app .ca-nav-footer .ca-nav-item { justify-content: center; padding: 0; }
  .ca-content { padding: 32px 28px 64px; }
  .ca-privacy { display: none; }
}

/* Celular: o menu vira gaveta aberta pelo botão do cabeçalho. */
@media (max-width: 767px) {
  .ca-header { padding: 0 12px; }
  .ca-menu-toggle { display: inline-grid; }
  .ca-sidebar { display: none; position: fixed; inset: 64px 0 0 0; z-index: 60; flex-basis: auto; padding: 20px 16px; }
  .ca-app.drawer-open .ca-sidebar { display: flex; }
  .ca-app.drawer-open .ca-group-title span, .ca-app.drawer-open .ca-nav-item span { display: inline; }
  .ca-app.drawer-open .ca-nav { margin-left: 13px; padding-left: 8px; border-left: 1px solid var(--sc-border); }
  .ca-app.drawer-open .ca-nav-item, .ca-app.drawer-open .ca-nav-footer .ca-nav-item { justify-content: flex-start; padding: 0 12px; }
  .ca-app.drawer-open .ca-privacy { display: block; }
  .ca-content { padding: 24px 16px 56px; }
  .ca-page-title { font-size: 28px; }
  .ca-page-copy { font-size: 14px; }
}