/* ===== Wone Conect — tema no padrão Apple (Human Interface Guidelines) =====
 *
 * Camada por cima do style.css: troca os tokens e o acabamento dos componentes,
 * sem mexer na estrutura das telas. Tirar este arquivo devolve o visual antigo.
 *
 * Decisões:
 * - Fundo cinza agrupado (#F2F2F7) com cartões brancos: o "grouped" do iOS.
 * - Cor de destaque é a da Wone (verde-água), escurecida para o branco do texto
 *   dos botões passar de 4.5:1. O HIG pede uma cor de destaque do app, não o azul.
 * - Fonte do sistema: SF no Mac e no iPhone. No Windows a SF não existe, então
 *   entra a Inter, a mais próxima dela entre as gratuitas.
 * - Botões em cápsula, campos com 40px de altura, separadores finos, sombras
 *   quase invisíveis. Sem vidro/desfoque: fundo sólido lê melhor.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-hig: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-hig-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --ground: #F2F2F7;
  --surface: #FFFFFF;
  --surface-2: #F2F2F7;
  --rail: #FBFBFD;
  --hover: rgba(118, 118, 128, 0.12);
  --sidebar: #1C1C1E;
  --sidebar-2: #2C2C2E;
  --ink: #1C1C1E;
  --ink-soft: rgba(60, 60, 67, 0.72);
  --ink-faint: rgba(60, 60, 67, 0.5);
  --line: rgba(60, 60, 67, 0.14);
  --accent: #007D70;
  --accent-soft: rgba(0, 125, 112, 0.12);
  --accent-ink: #006B60;
  --on-accent: #FFFFFF;
  --ok: #248A3D;
  --ok-soft: rgba(52, 199, 89, 0.14);
  --warn: #C93400;
  --warn-soft: rgba(255, 149, 0, 0.14);
  --crit: #D70015;
  --crit-soft: rgba(255, 59, 48, 0.12);
  --info: #0040DD;
  --info-soft: rgba(0, 122, 255, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
  --r: 16px;
  --roxo-claro: var(--accent);
  --anel-foco: 0 0 0 4px rgba(0, 125, 112, 0.25);
  --mola: cubic-bezier(0.25, 0.1, 0.25, 1);
}

:root[data-theme="dark"] {
  --ground: #000000;
  --surface: #1C1C1E;
  --surface-2: #2C2C2E;
  --rail: #0B0B0C;
  --hover: rgba(118, 118, 128, 0.24);
  --ink: #FFFFFF;
  --ink-soft: rgba(235, 235, 245, 0.72);
  --ink-faint: rgba(235, 235, 245, 0.45);
  --line: rgba(84, 84, 88, 0.55);
  --accent: #40E0C8;
  --accent-soft: rgba(64, 224, 200, 0.16);
  --accent-ink: #64F0DA;
  --on-accent: #002B26;
  --ok: #30D158; --ok-soft: rgba(48, 209, 88, 0.16);
  --warn: #FF9F0A; --warn-soft: rgba(255, 159, 10, 0.16);
  --crit: #FF453A; --crit-soft: rgba(255, 69, 58, 0.16);
  --info: #0A84FF; --info-soft: rgba(10, 132, 255, 0.16);
  --shadow: none;
  --anel-foco: 0 0 0 4px rgba(64, 224, 200, 0.3);
}

/* ---------- Tipografia ---------- */
body {
  font-family: var(--font-hig);
  font-size: 15px;
  letter-spacing: -0.01em;
  background: var(--ground);
}
.metrica .val, code, .agenda-quando, .ag-hora { font-family: var(--font-hig-mono); }
.metrica .val.texto { font-family: var(--font-hig); }
h1, h2, h3, .card-titulo, .card-header { letter-spacing: -0.02em; }

/* ---------- Barra do topo: título grande, como no iOS ---------- */
header.topbar {
  background: var(--surface);
  border-bottom: 0.5px solid var(--line);
  min-height: 72px;
}
header.topbar h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; }
.topo-empresa { letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 600; color: var(--accent-ink); }

/* ---------- Menu lateral ---------- */
.rail { background: var(--rail); border-right: 0.5px solid var(--line); }
.rbtn { border-radius: 12px; transition: background 200ms var(--mola), transform 100ms var(--mola); }
.rbtn.active { background: var(--accent-soft); color: var(--accent); }
.rbtn .contador-alerta:not(:empty),
.nav-item.sub .contador:not(:empty),
.nav-item.sub .contador-alerta:not(:empty) { background: #FF3B30; color: #fff; border-radius: 9999px; }

.subnav { background: var(--surface); border-right: 0.5px solid var(--line); }
.subnav-topo h2 { font-size: 28px; letter-spacing: -0.025em; }
.nav-item.sub { min-height: 52px; border-radius: 12px; }
.nav-item.sub.active { background: var(--accent-soft); }
.nav-item.sub.active .sub-ic { background: var(--accent); color: var(--on-accent); }

/* ---------- Cartões: agrupados, sem borda, sombra mínima ---------- */
.card {
  border: none;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 20px;
}
.card-titulo { font-size: 17px; font-weight: 600; }
.card-titulo i { color: var(--accent); }

/* ---------- Formulários ---------- */
label { font-size: 13px; font-weight: 500; color: var(--ink-soft); gap: 6px; }
input, select, textarea {
  font-size: 15px;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--surface-2);
  transition: box-shadow 200ms var(--mola), background 200ms var(--mola);
}
textarea { min-height: 80px; }
input[type=checkbox], input[type=radio] { min-height: 0; width: 20px; height: 20px; }
input:focus, select:focus, textarea:focus {
  border-color: transparent;
  background: var(--surface);
  box-shadow: var(--anel-foco);
}

/* ---------- Botões em cápsula ---------- */
button {
  font-size: 14px;
  font-weight: 600;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 9999px;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  transition: transform 100ms var(--mola), filter 200ms var(--mola), background 200ms var(--mola);
}
button:hover { filter: brightness(1.06); }
button:active { transform: scale(0.97); }
/* Secundário: texto na cor do app sobre um fundo levemente tingido */
button.secondary { background: var(--accent-soft); color: var(--accent-ink); }
button.ghost {
  background: var(--hover);
  color: var(--ink);
  border: none;
}
button.ghost:hover { background: var(--accent-soft); color: var(--accent-ink); filter: none; }
button.danger { background: var(--crit); color: #fff; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.nav-item:focus-visible { outline: none; box-shadow: var(--anel-foco); }

/* Seletor segmentado (Uma pessoa / Contatos de uma lista) */
.seg { background: var(--hover); border-radius: 10px; padding: 2px; }
.seg button { min-height: 32px; border-radius: 8px; background: transparent; color: var(--ink); }
.seg button.on { background: var(--surface); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04); }

/* ---------- Listas e linhas ---------- */
.agenda-item, .membro-linha, .pesquisa-linha { border-bottom: 0.5px solid var(--line); }
table th { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
table td, table th { border-color: var(--line); }

/* Avisos */
.diag.alerta, .diag.ok { border-radius: 12px; font-size: 14px; }

/* Prévia do WhatsApp continua escura: é o que o cliente vê no celular */

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}