/* Central do Cliente (portal.spyfisco.com.br): casca própria, sem o menu do escritório. */
.cp-body { margin: 0; background: var(--spy-ground); color: var(--spy-ink); font: 400 14px/1.45 var(--spy-font); }
.cp-shell { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.cp-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--spy-navy); color: #fff; }
.cp-logo { width: 120px; height: auto; }
.cp-top-label { color: var(--spy-navy-text); font-size: 12px; font-weight: 600; }
.cp-top-section::before { content: "/"; margin: 0 8px; color: var(--spy-navy-line); }
.cp-top-section { color: #fff; }
/* No celular só cabe o nome da seção ao lado do logo. */
@media (max-width: 760px) {
  .cp-top-label:has(.cp-top-section) .cp-top-home { display: none; }
  .cp-top-section::before { content: none; }
}
.cp-top-exit { margin-left: auto; }
.cp-top-exit .spy-btn { min-height: 40px; }
.cp-main { flex: 1; width: min(1100px, 100%); margin: 0 auto; padding: 24px 16px 40px; box-sizing: border-box; }
/* Foco visível (WCAG 2.4.7 e 1.4.11) só no portal: marinho sobre o claro, menta sobre o marinho. */
.cp-body :focus-visible { outline: 2px solid var(--spy-navy); outline-offset: 2px; }
.cp-body :is(.cp-top, .spy-stage, .ce-bulk, .lg-stage) :focus-visible { outline-color: var(--spy-mint); }

/* Mensagens: texto em tinta (contraste pleno); o tom vem do fundo e do ícone, nunca só da cor. */
.cp-message { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--spy-r-control); background: var(--spy-mist); color: var(--spy-ink); font-weight: 600; }
.cp-message .icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.cp-message.success { background: color-mix(in srgb, var(--spy-ok-dot) 14%, #fff); }
.cp-message.success .icon { color: var(--spy-ok); }
.cp-message.warning { background: color-mix(in srgb, var(--spy-warn-dot) 16%, #fff); }
.cp-message.warning .icon { color: var(--spy-warn); }
.cp-message.error { background: color-mix(in srgb, var(--spy-danger-dot) 12%, #fff); }
.cp-message.error .icon { color: var(--spy-danger); }
.cp-narrow { display: grid; gap: 20px; width: min(440px, 100%); margin: 0 auto; }
.cp-page { display: grid; gap: 20px; }
.cp-intro { display: grid; gap: 6px; }
.cp-intro h1 { margin: 0; font-size: 26px; line-height: 1.15; }
.cp-intro p { margin: 0; color: var(--spy-muted); }
.cp-hint { margin: 0; color: var(--spy-muted); font-size: 12px; }
.cp-back { color: var(--spy-navy); font-weight: 600; }
.cp-office { display: grid; gap: 12px; }
.cp-office h2 { margin: 0; font-size: 16px; }
.cp-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.cp-company-card { display: flex; flex-direction: row; align-items: center; gap: 12px; color: var(--spy-ink); }
.cp-company-card:hover { border-color: var(--spy-navy); }
.cp-initial, .cp-module-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--spy-navy); color: var(--spy-mint); font-size: 18px; }
.cp-module-icon .icon { width: 22px; height: 22px; }
.cp-company-copy { display: grid; gap: 2px; min-width: 0; }
.cp-company-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-company-copy small { color: var(--spy-muted); }
.cp-chevron { margin-left: auto; transform: rotate(-90deg); color: var(--spy-muted); }
.cp-module { display: grid; gap: 12px; align-content: start; }
.cp-module h2 { margin: 0; font-size: 16px; }
.cp-module small { color: var(--spy-muted); }
.lg-sheet .cp-message { margin: 0; }

@media (min-width: 761px) {
  .cp-top { padding: 16px 32px; }
  .cp-main { padding: 32px; }
  .cp-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}