/* Camada de interface da versão online. A base visual pertence ao protótipo. */
:root { font-size: 14px; }
.page-description, .card-subtitle, .muted, .field-help { line-height: 1.55; }
.nav-item { font-size: 13px; min-height: 45px; }
.card-title { font-size: 15px; }
.card-subtitle, .page-description, .field-help { font-size: 12px; }
.metric-label { font-size: 12px; padding-right: 25px; }
.metric-detail { font-size: 11px; }
.btn { font-size: 12px; min-height: 40px; }
.btn.small { font-size: 11px; min-height: 34px; }
.field label { font-size: 12px; }
.field input, .field select, .field textarea { font-size: 14px; }
.person-name, td { font-size: 12px; }
th { font-size: 10px; }
.badge { font-size: 10px; }
.form-layout { max-width: 1100px; }
.brand-name, .brand-caption { display: block; }
.brand-name { font-size: 20px; line-height: 1.1; letter-spacing: -.6px; }
.brand-mark { flex-shrink: 0; }
.sidebar .brand { padding: 0; gap: 8px; }
.sidebar-bottom { padding-top: 24px; }
.sidebar-user { flex-wrap: wrap; }
.workspace-info span, .user-info span { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }
.topbar .connection-indicator { font-size: 11px; }
.server-status { font-size: 11px; line-height: 1.6; padding: 12px 14px; color: var(--muted); background: #f5f7f2; border-radius: 9px; margin-bottom: 18px; }
.server-status strong { color: var(--pine); display: block; }
.network-banner { display: flex; align-items: center; gap: 10px; color: #9b5f29; background: #fff3df; padding: 12px 36px; border-bottom: 1px solid #eddec8; font-size: 12px; }
.network-banner svg { width: 18px; }
.auth-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .95fr) minmax(420px, 1.05fr); }
.auth-story { padding: 55px clamp(35px, 7vw, 100px); background: #124e43; color: #d5e4d5; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; position: relative; overflow: hidden; }
.auth-story::after { content: ''; position: absolute; width: 450px; height: 450px; border-radius: 50%; border: 70px solid #ffffff04; bottom: -200px; right: -140px; pointer-events: none; }
.auth-story .brand { padding: 0; color: white; }
.auth-story .brand-name, .auth-story .brand-caption { color: white; }
.auth-story h1 { font-size: clamp(32px, 3.8vw, 54px); max-width: 430px; color: #fff; letter-spacing: -1.8px; line-height: 1.13; }
.auth-story p { line-height: 1.8; max-width: 360px; margin-top: 22px; font-size: 14px; color: #b7d1c1; }
.auth-story small { font-size: 11px; color: #aac9b4; }
.auth-graphic { display: flex; gap: 15px; align-items: center; margin-bottom: 35px; color: #a9c892; }
.auth-graphic span { width: 40px; border-top: 1px dashed #7d9e86; }
.auth-graphic svg { width: 30px; height: 30px; }
.auth-main { display: grid; place-items: center; padding: 40px 30px; }
.auth-card { width: 100%; max-width: 410px; }
.auth-card h2 { font-size: 28px; letter-spacing: -.8px; }
.auth-card > p { margin: 10px 0 28px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.auth-card .field { margin-bottom: 18px; }
.auth-card .field input { min-height: 48px; }
.auth-footer { margin-top: 24px; color: var(--muted); font-size: 11px; text-align: center; line-height: 1.7; }
.auth-card .form-error { margin-bottom: 18px; }
.boot-screen { min-height: 80vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; color: var(--muted); }
.onboarding-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 20px 22px 22px; }
.onboarding-step { padding: 18px 15px; border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 12px; background: #fcfdfb; }
.onboarding-step > svg { color: var(--pine); }
.onboarding-step strong { font-size: 13px; }
.onboarding-step p { font-size: 11px; color: var(--muted); line-height: 1.6; flex: 1; }
.onboarding-step .btn { align-self: flex-start; }
.page-content > .card + .card { margin-top: 22px; }
.stacked { display: flex; flex-direction: column; gap: 22px; }
.inline-note { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); line-height: 1.6; margin: 18px 0; }
.route-picker { width: auto; min-width: 160px; }
.online-client-card h2 { padding: 0 22px; }
.online-client-card .client-card-meta { padding: 0 22px; }
.client-card-meta { font-size: 11px; }
.online-client-card .client-name-button { font-size: 17px; }
.client-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.product-row .product-info strong { font-size: 12px; }
.product-row .product-info > span { font-size: 11px; }
.product-row .product-price { font-size: 12px; }
.product-picker { padding-bottom: 8px; }
.online-form .field { margin-bottom: 16px; }
.online-form .field:last-child { margin-bottom: 0; }
.online-form .form-error { margin: 16px 0; }
.summary-row { font-size: 12px; }
.summary-row.balance { margin: 16px 0; }
.order-summary .field-help { margin: 15px 0; }
.delivery-record + .delivery-record { margin-top: 15px; padding-top: 20px; border-top: 1px solid var(--border); }
.delivery-record .delivery-items { font-size: 12px; line-height: 1.8; margin: 12px 0; }
.compact-input { width: 75px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; text-align: right; }
.stat-list { display: flex; flex-direction: column; }
.stat-list .list-row { padding: 15px 0; }
.stat-list .list-row p { font-size: 11px; margin-top: 5px; }
.table-client-button { padding: 0; border: 0; background: transparent; text-align: left; }
.table-client-button .muted { display: block; margin-top: 4px; }
.route-card h2 { padding: 0 22px; }
.route-card .route-card-head { padding: 22px; }
.route-stats { padding: 0 22px; }
.route-card .route-card-actions { display: flex; padding: 22px; gap: 10px; }
.user-role-routes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 10px; }
.check-option { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 12px; cursor: pointer; }
.check-option input { accent-color: var(--pine); }
.checkbox-field { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 14px 0; }
.users-count { font-size: 12px; color: var(--muted); }
.modal-menu { display: flex; flex-direction: column; gap: 7px; }
.modal-menu .nav-item { font-size: 14px; }
.dialog-note { font-size: 12px; line-height: 1.65; color: var(--muted); margin-bottom: 18px; }
.offline-mutation:disabled { opacity: .65; }
.is-saving { cursor: progress; }
.onboarding-card { margin-bottom: 22px; }
.filter-count { font-size: 12px; color: var(--muted); margin: 18px 0; }
.modal .field { margin-bottom: 15px; }
.modal .field.full { margin-bottom: 5px; }
.modal .field-help { margin-top: 5px; }
.modal .form-grid { gap: 12px; }
.form-actions { margin-top: 15px; }
.form-error { line-height: 1.6; }
.online-shell .detail-grid { grid-template-columns: minmax(0,1.7fr) minmax(240px,1fr); }
.online-shell .empty-state { padding: 38px 22px; }
.empty-state p { font-size: 13px; line-height: 1.7; max-width: 460px; }
.empty-state .btn { margin-top: 12px; }
.online-shell .visit-name { font-size: 12px; }
.online-shell .visit-address { font-size: 11px; }
.activity-content p { line-height: 1.6; }
@media (max-width: 1100px) {
  .onboarding-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .online-shell .detail-grid { grid-template-columns: 1fr; }
  .auth-story { padding: 45px 30px; }
  .metric-value { font-size: 23px; }
}
@media (max-width: 760px) {
  .auth-screen { display: block; }
  .auth-story { min-height: auto; padding: 28px 24px; }
  .auth-story > div:not(:first-child), .auth-story > small { display: none; }
  .auth-main { padding: 36px 24px; }
  .auth-card { max-width: 460px; }
  .auth-card h2 { font-size: 26px; }
  .network-banner { padding: 10px 18px; font-size: 11px; }
  .online-shell .topbar { padding-left: 18px; padding-right: 18px; gap: 8px; }
  .online-shell .topbar-actions { gap: 8px; }
  .online-shell .breadcrumb { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; font-size: 11px; }
  .online-shell .topbar .breadcrumb > span:first-child { display: block; font-size: 12px; font-weight: 650; color: var(--pine-dark); }
  .online-shell .breadcrumb > svg { display: none; }
  .online-shell .topbar .btn.small { font-size: 11px; }
  .online-shell .metric-label { font-size: 11px; }
  .online-shell .metric-detail { font-size: 10px; }
  .online-shell .metric-value { font-size: 24px; }
  .online-shell .card-title { font-size: 14px; }
  .online-shell .card-subtitle { font-size: 11px; }
  .online-shell .page-description { font-size: 12px; }
  .online-shell .btn { font-size: 12px; }
  .online-shell .btn.small { font-size: 11px; }
  .online-shell .form-layout { display: flex; flex-direction: column; }
  .online-shell .form-layout > * { width: 100%; }
  .online-shell .order-summary { width: 100%; position: static; }
  .online-shell .field input, .online-shell .field select { font-size: 16px; }
  .onboarding-step { padding: 14px 12px; }
  .onboarding-grid { padding: 18px; }
  .page-actions .route-picker { max-width: 100%; }
  .online-shell .product-row { flex-wrap: wrap; }
  .online-shell .product-info { min-width: 170px; }
  .online-shell .product-price { margin-left: 0 !important; }
  .client-actions .btn { flex: 1; }
  .online-shell .page-content > .detail-hero > .btn { margin-left: 0; }
  .online-shell .client-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .online-shell .client-metrics > :last-child { grid-column: auto; }
  .online-shell .detail-hero h1 { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  .onboarding-grid { grid-template-columns: 1fr; }
  .onboarding-step { display: grid; grid-template-columns: 24px 1fr; gap: 8px 12px; }
  .onboarding-step > p, .onboarding-step > .btn { grid-column: 2; }
  .online-shell .metric-value { font-size: 21px; }
  .online-shell .metric-card { padding-left: 13px; padding-right: 13px; }
  .online-shell .metric-label { padding-right: 0; }
  .online-shell .metric-icon { display: none; }
  .online-shell .topbar .connection-indicator { padding: 6px; font-size: 10px; }
  .online-shell .topbar .connection-indicator svg { display: none; }
  .online-shell .page-header { gap: 14px; }
  .online-shell .page-actions { width: 100%; }
  .online-shell .page-actions .btn { flex: 1; }
}