:root {
  color-scheme: light;
  --font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-caption: 10px; --text-small: 12px; --text-body: 14px; --text-brand: 15px; --text-title: 22px;
  --weight-medium: 600; --weight-strong: 700; --weight-heavy: 800;
  font-family: var(--font-family);
  font-synthesis: none;
  --bg: #f8fafc; --surface: #fff; --surface-2: #f1f5f9;
  --ink: #0f172a; --muted: #64748b; --line: #e2e8f0;
  --accent: #4f46e5; --accent-hover: #4338ca; --accent-soft: #eef2ff;
  --danger: #be123c; --warning: #b45309; --success: #047857;
  --success-soft: #ecfdf5; --amber-soft: #fef3c7;
  --radius-sm: 10px; --radius: 16px; --radius-lg: 18px;
  --shadow-card: 0 4px 16px rgb(15 23 42 / 4%);
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  background: var(--bg); color: var(--ink);
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.skip-link { position: absolute; top: -60px; left: 16px; z-index: 10; padding: 10px 16px; border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); }
.skip-link:focus { top: 10px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 256px minmax(0, 1fr); }
.app-sidebar { min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 18px 14px; border-right: 1px solid var(--line); background: var(--surface); }
.app-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.app-brand-mark { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #6366f1; color: #fff; font-size: 19px; line-height: 1; }
.app-brand-name { font-size: var(--text-brand); font-weight: var(--weight-heavy); line-height: 1.25; }
.app-brand-subtitle { margin-top: 2px; color: var(--accent); font-size: var(--text-caption); font-weight: var(--weight-strong); letter-spacing: .14em; }
.app-phone-card { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.app-phone-title { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.app-phone-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.app-phone-status::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #94a3b8; }
.app-phone-card[data-ready="true"] .app-phone-status { color: var(--success); }
.app-phone-card[data-ready="true"] .app-phone-status::before { background: #10b981; }
.app-nav-group-label { margin: 0 0 10px; padding: 0 8px; color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.app-nav { display: grid; gap: 4px; }
.app-nav-link { display: flex; align-items: center; gap: 10px; min-height: 40px; min-width: 0; padding: 8px 12px; border-radius: 12px; color: #334155; font-size: 13px; font-weight: 550; text-decoration: none; transition: background .15s ease, color .15s ease; }
.app-nav-link:hover { background: var(--bg); color: var(--accent-hover); }
.app-nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-hover); font-weight: 700; }
.app-nav-icon { width: 18px; height: 18px; flex: none; display: grid; place-items: center; font-size: 16px; line-height: 1; }
.app-sidebar-footer { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 6px 0; border-top: 1px solid var(--line); min-width: 0; }
.app-user-avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--amber-soft); color: var(--warning); font-size: 12px; font-weight: 800; }
.app-user-details { display: grid; gap: 2px; min-width: 0; }
.app-user-name { color: var(--ink); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.app-user-role { color: var(--muted); font-size: 11px; }

.app-workspace { min-width: 0; }
.app-workspace[data-page="operador"] .app-data-status { display: none; }
.app-topbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px clamp(18px, 2vw, 30px); border-bottom: 1px solid var(--line); background: var(--surface); }
.app-breadcrumb { color: var(--muted); font-size: 12px; font-weight: 550; }
.app-breadcrumb span { color: #94a3b8; padding: 0 8px; }
.app-breadcrumb strong { color: var(--ink); font-weight: 700; }
.app-top-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.app-data-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; }
.app-data-status[hidden] { display: none; }
.app-data-status::before { content: ''; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #94a3b8; }
.app-data-status[data-kind="available"] { background: var(--success-soft); color: var(--success); }
.app-data-status[data-kind="available"]::before { background: #10b981; }
.app-data-status[data-kind="stale"] { background: #fff1f2; color: var(--danger); }
.app-data-status[data-kind="stale"]::before { background: var(--danger); }
.app-content { max-width: 1620px; min-width: 0; margin: 0 auto; padding: 20px clamp(18px, 2vw, 30px) 48px; }
.app-notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1.5; }
.app-notice[hidden] { display: none; }
.app-notice-icon { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; }
.app-view { min-width: 0; }

@media (max-width: 900px) {
  .app-shell { display: block; }
  .app-sidebar { gap: 12px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .app-brand { padding: 0; }
  .app-phone-card { padding: 8px 10px; }
  .app-nav-group-label, .app-sidebar-footer { display: none; }
  .app-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .app-nav-link { min-height: 36px; padding: 7px 9px; }
}
@media (max-width: 600px) {
  .app-sidebar { padding: 12px; }
  .app-nav-link { font-size: 12px; }
  .app-nav-icon { display: none; }
  .app-topbar { padding: 12px 16px; }
  .app-top-meta { width: 100%; justify-content: space-between; }
  .app-content { padding: 16px 12px 36px; }
}

/* W7: aviso do modo teste servidor único (teste, sem alta disponibilidade). */
.test-mode-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 8px 16px;
  background: #fff4d6;
  color: #5a3e00;
  border-bottom: 1px solid #e3b341;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.35;
}
@media (prefers-color-scheme: dark) {
  .test-mode-banner { background: #3d2e05; color: #ffe4a3; border-bottom-color: #8a6a16; }
}