/* ==========================================================================
   Family Learning OS — Painel da família

   Estética: acolhedora e encorajadora (Duolingo) sobre uma base limpa e
   silenciosa. Nada de vermelho de erro em tela de rotina, nada de barra de
   progresso cobrando. A cor forte é reservada para o que celebra.

   Mobile-first de verdade: o registro do dia acontece no celular, de pé, na
   cozinha. No telefone a navegação vai para baixo (polegar) e o botão de
   registrar flutua acima dela.
   ========================================================================== */

:root {
  /* Identidade EEMC — navy #001e3e como marca, azul #1f6feb como interação. */
  --primary: #1f6feb;
  --primary-dark: #0f4fc4;
  --primary-light: #E8F0FB;
  --accent: #001e3e;
  --accent-light: #EEF3FA;
  --navy: #001e3e;
  --navy-deep: #00142a;

  --success: #10B981;
  --success-bg: #D1FAE5;
  --warning: #F59E0B;
  --warning-bg: #FEF3C7;
  --danger: #DC5A5A;
  --danger-bg: #FBE9E9;
  --info: #3B82F6;
  --info-bg: #DBEAFE;

  --bg: #F4F7FB;
  --bg-card: #FFFFFF;
  --bg-muted: #EEF3FA;
  --bg-sidebar: #FFFFFF;

  --text: #0D1B2A;
  --text-muted: #55616E;
  --text-light: #9AA7B6;
  --border: #E2E8F2;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 3px rgba(31, 42, 36, 0.05);
  --shadow-sm: 0 2px 10px rgba(31, 42, 36, 0.06);
  --shadow-md: 0 6px 20px rgba(31, 42, 36, 0.09);
  --shadow-lg: 0 16px 40px rgba(31, 42, 36, 0.16);

  --sidebar-w: 252px;
  --topbar-h: 80px;
  /* A altura REAL que a barra de cima ocupa: ela mais o entalhe do iPhone.
     Quem se posiciona logo abaixo dela usa esta, e não --topbar-h. */
  --barra-total: calc(80px + env(safe-area-inset-top));
  --transition: 0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #D8D2C7; border-radius: var(--radius-full); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Login (card bipartido: formulário + brasão, sobre foto desfocada) ────── */

.login-screen {
  position: fixed; inset: 0; z-index: 500;
  display: none; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(120% 100% at 50% 0%, #0a2b55 0%, #001e3e 50%, #00142a 100%);
  overflow-y: auto;
}
.login-screen.active { display: flex; }
/* Foto de fundo (já entregue desfocada + tint navy pelo PS). Some sem quebrar
   se o arquivo faltar. Nada de blur/escurecido extra aqui, só um véu leve. */
.login-screen::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('/assets/marca/login-bg.jpg') center/cover no-repeat;
}
.login-screen::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(0,20,42,.18), rgba(0,20,42,.32));
}

.login-card {
  position: relative; z-index: 2;
  width: 61vw; max-width: 61vw;          /* o bloco bipartido ocupa 61% da tela */
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .7);
}
.login-left {
  background: #001e3e;                    /* bloco esquerdo (login) */
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: clamp(2rem, 4vw, 3.4rem) 0;
}
.login-fields { width: 73.45%; }         /* título + campos + botão = 73,45% do bloco */
.login-right {
  background: #021a33;                    /* bloco direito (brasão) */
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.login-crest { width: 66.67%; height: auto; }   /* o logo ocupa 66,67% do bloco direito */

.login-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500; font-size: clamp(1.15rem, 1.85vw, 1.95rem);
  letter-spacing: .05em; line-height: 1.1; text-transform: uppercase;
  color: #fff; text-align: left; white-space: nowrap;
}
.login-subtitle {
  font-family: var(--font);
  font-size: clamp(.62rem, .78vw, .74rem); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.82); text-align: left;
  margin: .5rem 0 2rem;
}

.login-left .field { margin-bottom: 1.15rem; }
.login-left .field label {
  display: block; color: #fff; font-size: .82rem; font-weight: 500; margin-bottom: .5rem;
}
.login-left .input {
  width: 100%; background: #fff; border: 1px solid transparent; border-radius: 6px;
  padding: .9rem .95rem; font-size: .95rem; color: var(--navy);
}
.login-left .input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.28); }

.login-left .btn-primary {
  margin-top: .9rem; width: 100%;
  background: #021a33; color: #fff;
  border: 1px solid rgba(255,255,255,.4); border-radius: 100px;
  padding: .95rem 1rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 0 0 4px #001e3e, 0 0 0 5px rgba(255,255,255,.28);
}
.login-left .btn-primary:hover { background: #0a2a52; }

@media (max-width: 820px) {
  .login-card { width: min(92vw, 440px); max-width: none; grid-template-columns: 1fr; }
  .login-right { order: -1; padding: 1.8rem 0 .2rem; }
  .login-crest { width: 44%; }
  .login-fields { width: 84%; }
  .login-title, .login-subtitle { text-align: center; }
}

/* ── Shell ──────────────────────────────────────────────────────────────── */

/* Duas linhas de propósito: navegador que não conhece `dvh` descarta a
   segunda e fica com a primeira. Sem a reserva, a regra inteira cairia. */
.app { display: none; min-height: calc(100vh - var(--barra-total)); }
.app { min-height: calc(100dvh - var(--barra-total)); }
.app.active { display: flex; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  /* A mesma conta da .topbar — que agora inclui o entalhe do iPhone. */
  position: sticky; top: var(--barra-total);
  height: calc(100vh - var(--barra-total));       /* reserva */
  height: calc(100dvh - var(--barra-total));      /* a tela que existe agora */
  display: flex; flex-direction: column;
}

.sidebar-header {
  padding: 1.15rem 1.1rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .7rem;
}
.family-badge {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, #001e3e, #1f6feb);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: .95rem;
  object-fit: cover;
}
.sidebar-family { font-size: .9rem; font-weight: 800; line-height: 1.2; }
.sidebar-user { font-size: .72rem; color: var(--text-muted); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .7rem .6rem; }

.nav-section {
  padding: .9rem .7rem .35rem;
  font-size: .63rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-light);
}

.nav-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .58rem .7rem; margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: .875rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item:hover { background: var(--bg-muted); color: var(--text); }
.nav-item.active { background: var(--primary-light); color: var(--primary-dark); font-weight: 800; }
.nav-badge {
  margin-left: auto; background: var(--accent); color: #fff;
  font-size: .65rem; font-weight: 800;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
}

.sidebar-footer { padding: .8rem; border-top: 1px solid var(--border); display: grid; gap: .4rem; }
.sidebar-btn {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: var(--transition);
}
.sidebar-btn:hover { background: var(--bg-muted); color: var(--text); }
.sidebar-btn svg { width: 15px; height: 15px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Barra azul full-width, acima de tudo. */
.topbar {
  /*
   * A BARRA DESVIA DO ENTALHE DO IPHONE.
   *
   * O app se declara instalável (manifest + apple-mobile-web-app-capable), e
   * instalado na tela de início ele abre sem a barra do Safari: a página passa
   * a começar em y=0, ou seja, DEBAIXO do relógio e da bateria. Sem esta
   * folga, o brasão e o botão de menu ficavam encobertos pelo relógio.
   *
   * `env(safe-area-inset-top)` vale zero em todo lugar que não tem entalhe —
   * no computador e no Android a barra continua com a altura de sempre. Só
   * funciona porque o `viewport-fit=cover` está declarado no index.html.
   */
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  width: 100%;
  background: #001e3e; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; gap: .85rem;
  padding-left: max(1.1rem, env(safe-area-inset-left));
  padding-right: max(1.1rem, env(safe-area-inset-right));
  position: sticky; top: 0; z-index: 300;
}
.topbar:empty { display: none; }   /* logado-fora: sem barra */
.topbar-title { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; color: #fff; }
.topbar-spacer { flex: 1; }
/* Logo branco sempre presente na barra, centralizado. */
.topbar-logo { height: 54px; width: auto; display: block; flex-shrink: 0; }
/* Botão que mostra/esconde a sidebar — branco, visível também no desktop. */
.menu-toggle {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: none; border: 1px solid rgba(255,255,255,.28); cursor: pointer;
  color: #fff; transition: var(--transition);
}
.menu-toggle:hover { background: rgba(255,255,255,.12); }
.menu-toggle svg { width: 20px; height: 20px; }
/* Sino e demais ícones da barra, em branco sobre o navy. */
.topbar .icon-btn { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.28); }
.topbar .icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
/* Desktop: sidebar colapsada libera a tela inteira. */
.app.sidebar-collapsed .sidebar { display: none; }
/* Experiência imersiva (globo): sem shell nenhum. */
body.immersive .topbar,
body.immersive .sidebar,
body.immersive .bottom-nav,
body.immersive .fab { display: none !important; }
body.immersive .content { padding-top: 0; }
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: none; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted); position: relative;
  transition: var(--transition);
}
.icon-btn:hover { background: var(--bg-muted); color: var(--text); }
.icon-btn .dot {
  position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

.content { flex: 1; padding: 1.35rem; max-width: 1240px; width: 100%; }

/* ── Cabeçalho de página ────────────────────────────────────────────────── */

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.page-header h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em; }
.page-header p { font-size: .87rem; color: var(--text-muted); margin-top: .15rem; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Botões ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .58rem 1.05rem;
  border: 1px solid transparent; border-radius: var(--radius-full);
  font-size: .87rem; font-weight: 800;
  cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 0 var(--primary-dark); }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: #4A3006; box-shadow: 0 2px 0 #C9861F; }
.btn-accent:hover:not(:disabled) { background: #D9942F; }
.btn-outline { background: #fff; border-color: var(--border); color: var(--text); }
.btn-outline:hover:not(:disabled) { background: var(--bg-muted); }
.btn-ghost { background: none; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-muted); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: .35rem .75rem; font-size: .78rem; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg { padding: .78rem 1.5rem; font-size: .95rem; }
.btn-full { width: 100%; }

/* ── Cartões ────────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.card-header {
  padding: 1rem 1.15rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  border-bottom: 1px solid var(--border);
}
.card-header h2 {
  font-size: .98rem; font-weight: 800; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: .45rem;
}
.card-header p { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.card-pad { padding: 1.15rem; }
.card-grid { display: grid; gap: 1rem; }

/* ── Métricas ───────────────────────────────────────────────────────────── */

.metrics {
  display: grid; gap: .8rem; margin-bottom: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.metric {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .95rem 1rem;
}
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.metric-label { font-size: .74rem; font-weight: 700; color: var(--text-muted); }
.metric-icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.metric-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; margin-top: .3rem; }
.metric-sub { font-size: .74rem; color: var(--text-muted); }
.metric.amber .metric-icon { background: var(--accent-light); color: #B47416; }
.metric.blue .metric-icon { background: var(--info-bg); color: var(--info); }
.metric.green .metric-icon { background: var(--success-bg); color: #047857; }

/* ── Formulários ────────────────────────────────────────────────────────── */

.field { margin-bottom: 1rem; }
.field label {
  display: block; font-size: .78rem; font-weight: 800;
  margin-bottom: .35rem; color: var(--text);
}
.input, .textarea, .select {
  width: 100%; padding: .62rem .8rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; font-size: .9rem; transition: var(--transition);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(47, 107, 79, .12);
}
.textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.hint { font-size: .74rem; color: var(--text-muted); margin-top: .3rem; }
.form-error {
  color: var(--danger); font-size: .82rem; font-weight: 700;
  min-height: 1.1rem; margin-bottom: .5rem;
}
.form-row { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Seleção em cartão — onboarding e escolhas com peso. */
.choice-grid { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.choice {
  text-align: left; padding: .9rem 1rem;
  background: #fff; border: 2px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  transition: var(--transition); display: flex; gap: .7rem; align-items: flex-start;
}
.choice:hover { border-color: #C9C2B4; }
.choice.selected { border-color: var(--primary); background: var(--primary-light); }
.choice-check {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--border); background: #fff;
  display: flex; align-items: center; justify-content: center; color: transparent;
}
.choice.selected .choice-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.choice-title { font-size: .88rem; font-weight: 800; }
.choice-hint { font-size: .76rem; color: var(--text-muted); margin-top: .1rem; }

/* ── Etiquetas ──────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .55rem; border-radius: var(--radius-full);
  font-size: .7rem; font-weight: 800;
}
.badge-green  { background: var(--success-bg); color: #047857; }
.badge-amber  { background: var(--accent-light); color: #B47416; }
.badge-blue   { background: var(--info-bg); color: #1D4ED8; }
.badge-gray   { background: var(--bg-muted); color: var(--text-muted); }
.badge-red    { background: var(--danger-bg); color: #B91C1C; }
.badge-purple { background: #EDE9FE; color: #6D28D9; }

.area-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .16rem .55rem; border-radius: var(--radius-full);
  font-size: .7rem; font-weight: 800; color: #fff;
}

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: var(--radius-full);
  border: 1.5px solid var(--border); background: #fff;
  font-size: .78rem; font-weight: 700; cursor: pointer;
  transition: var(--transition);
}
.chip:hover { border-color: #C9C2B4; }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ── Criança ────────────────────────────────────────────────────────────── */

.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem; color: #fff; flex-shrink: 0;
  object-fit: cover;
}
.avatar-sm { width: 30px; height: 30px; font-size: .72rem; }
.avatar-lg { width: 76px; height: 76px; font-size: 1.5rem; }

.child-pills { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .35rem; margin-bottom: 1rem; }
.child-pill {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .8rem .35rem .35rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-full);
  background: #fff; cursor: pointer; white-space: nowrap;
  font-size: .84rem; font-weight: 700; transition: var(--transition);
}
.child-pill.on { border-color: var(--primary); background: var(--primary-light); }
.child-pill .avatar { width: 27px; height: 27px; font-size: .68rem; }

/* ── Carrossel (estética Netflix do PRD) ────────────────────────────────── */

.rail { margin-bottom: 1.5rem; }
.rail-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .6rem; }
.rail-head h3 { font-size: .95rem; font-weight: 800; }
.rail-scroll {
  display: flex; gap: .8rem; overflow-x: auto;
  padding-bottom: .5rem; scroll-snap-type: x mandatory;
}
.rail-card {
  width: 158px; flex-shrink: 0; scroll-snap-align: start;
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border);
  cursor: pointer; transition: transform var(--transition), box-shadow var(--transition);
}
.rail-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.rail-cover {
  height: 132px; background: var(--bg-muted);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light); overflow: hidden;
}
.rail-cover img { width: 100%; height: 100%; object-fit: cover; }
.rail-body { padding: .55rem .65rem .7rem; }
.rail-title {
  font-size: .8rem; font-weight: 800; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rail-sub { font-size: .72rem; color: var(--text-muted); margin-top: .12rem; }

/* ── Linha do tempo ─────────────────────────────────────────────────────── */

.timeline { position: relative; padding-left: 1.6rem; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.tl-month {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-light); margin: 1.4rem 0 .7rem -1.6rem; padding-left: 1.6rem;
}
.tl-item { position: relative; margin-bottom: .9rem; }
.tl-dot {
  position: absolute; left: -1.6rem; top: 1.1rem;
  width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid var(--bg); background: var(--primary);
}
.tl-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .85rem 1rem;
}
.tl-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.tl-date { font-size: .72rem; color: var(--text-muted); font-weight: 700; }
.tl-title { font-size: .9rem; font-weight: 800; }
.tl-text { font-size: .84rem; color: var(--text-muted); line-height: 1.6; }
.tl-photo { margin-top: .6rem; border-radius: var(--radius-sm); overflow: hidden; max-height: 260px; }
.tl-photo img { width: 100%; object-fit: cover; }

/* ── Radar de áreas ─────────────────────────────────────────────────────── */

.radar-bars { display: grid; gap: .6rem; }
.radar-row { display: grid; grid-template-columns: 150px 1fr 42px; gap: .6rem; align-items: center; }
.radar-label { font-size: .78rem; font-weight: 700; }
.radar-track { height: 10px; border-radius: var(--radius-full); background: var(--bg-muted); overflow: hidden; }
.radar-fill { height: 100%; border-radius: var(--radius-full); transition: width .5s ease; }
.radar-count { font-size: .76rem; font-weight: 800; color: var(--text-muted); text-align: right; }

/* ── Hábitos ────────────────────────────────────────────────────────────── */

.habit-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: #fff; margin-bottom: .55rem;
}
.habit-check {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 2.5px solid var(--border); background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: transparent; transition: var(--transition);
}
.habit-check:hover { border-color: var(--primary); }
.habit-check.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.habit-name { font-size: .88rem; font-weight: 700; }
.habit-streak {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .74rem; font-weight: 800; color: #B47416;
}
.habit-grid { display: flex; gap: 3px; margin-top: .3rem; }
.habit-day { width: 9px; height: 9px; border-radius: 2px; background: var(--bg-muted); }
.habit-day.on { background: var(--success); }

/* ── Checklist do dia ───────────────────────────────────────────────────── */

.check-row {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .55rem 0; border-bottom: 1px solid var(--border);
}
.check-row:last-child { border-bottom: none; }
.check-box {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--border); background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: transparent;
  transition: var(--transition);
}
.check-box:hover { border-color: var(--primary); }
.check-box.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.check-title { font-size: .87rem; font-weight: 700; }
.check-row.done .check-title { text-decoration: line-through; opacity: .5; }
.check-sub { font-size: .74rem; color: var(--text-muted); }

/* ── Insight (nudge) ────────────────────────────────────────────────────── */

.insight {
  background: linear-gradient(135deg, var(--accent-light), #fff);
  border: 1px solid #F0DDB8; border-radius: var(--radius-lg);
  padding: 1.05rem 1.15rem; margin-bottom: 1rem;
  display: flex; gap: .85rem;
}
.insight-icon {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.insight h3 { font-size: .93rem; font-weight: 800; }
.insight p { font-size: .84rem; color: var(--text-muted); margin-top: .2rem; line-height: 1.6; }
.insight-actions { display: flex; gap: .45rem; margin-top: .7rem; flex-wrap: wrap; }

/* ── Streak ─────────────────────────────────────────────────────────────── */

.streak-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .75rem; border-radius: var(--radius-full);
  background: var(--accent-light); color: #B47416;
  font-size: .78rem; font-weight: 800;
}

/* ── Tabelas ────────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.data th {
  text-align: left; padding: .6rem .9rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); background: var(--bg-muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data td { padding: .65rem .9rem; border-bottom: 1px solid var(--border); }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--bg-muted); }
.row-title { font-weight: 700; }
.row-sub { color: var(--text-muted); font-size: .8rem; }

/* ── Estados ────────────────────────────────────────────────────────────── */

.empty { text-align: center; padding: 2.6rem 1.25rem; color: var(--text-muted); }
.empty svg { color: var(--text-light); margin: 0 auto .8rem; }
.empty h3 { font-size: 1rem; font-weight: 800; color: var(--text); }
.empty p { font-size: .85rem; margin-top: .25rem; max-width: 400px; margin-inline: auto; }

.loading {
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  padding: 3rem; color: var(--text-muted); font-size: .87rem;
}
.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--border); border-top-color: var(--primary);
  animation: spin .7s linear infinite;
}
.spinner.sm { width: 14px; height: 14px; border-width: 2px; }
.spinner.white { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Modal ──────────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(31, 42, 36, .45);
  /*
   * SEM `align-items: center` — de propósito.
   *
   * Centralizar por `align-items` numa caixa que rola tem uma armadilha
   * conhecida: quando o conteúdo é MAIOR que a caixa, ele é centralizado
   * sobre a área de rolagem e a sobra sai pelas duas pontas — e a de cima
   * não volta, porque não existe rolagem para trás do começo. Medido no
   * celular deitado: o modal nascia com o topo em 24px e o pé em 394 numa
   * tela de 390, e o botão de salvar ficava fora.
   *
   * `margin: auto` no filho faz o mesmo trabalho e sabe desistir: centraliza
   * quando sobra espaço, encosta no topo quando não sobra. Nunca corta.
   */
  display: flex;
  padding: 1rem; overflow-y: auto;
  animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  background: #fff; border-radius: var(--radius-lg);
  width: 100%; max-width: 540px;
  margin: auto;                     /* centraliza sem cortar — ver o overlay */
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: rise .2s ease;

  /*
   * A ALTURA DO MODAL DESCONTA A MOLDURA, E USA A TELA QUE EXISTE DE VERDADE.
   *
   * Duas coisas erradas moravam em `max-height: 92vh`:
   *
   * 1. O `.modal-overlay` tem 1rem de folga em cima e embaixo. Com 92vh o
   *    modal podia ficar mais alto do que o espaço entre as folgas, e como o
   *    overlay centraliza com `align-items: center`, o que sobra é cortado —
   *    o pé, onde ficam Salvar e Cancelar. Medido no celular deitado
   *    (844x390): o pé do modal caía em y=392 numa tela de 390. O botão de
   *    salvar existia e não dava para tocar.
   *
   * 2. No iPhone, `vh` mede a tela COMO SE a barra do Safari não estivesse
   *    ali. Com a barra visível — que é o normal — 92vh é mais alto do que a
   *    área que a pessoa enxerga, e o pé do modal fica escondido atrás dela.
   *
   * `dvh` é a altura VISÍVEL agora, e encolhe quando a barra aparece. A linha
   * com `vh` fica antes como reserva para navegador antigo que não conhece
   * `dvh` — ele ignora a segunda e usa a primeira.
   */
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
}
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
.modal.lg { max-width: 820px; }
.modal.xl { max-width: 1060px; }
.modal-head {
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
}
.modal-head h2 { font-size: 1.02rem; font-weight: 800; }
.modal-head p { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.modal-x {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  padding: .3rem; border-radius: var(--radius-sm); flex-shrink: 0;
}
.modal-x:hover { background: var(--bg-muted); color: var(--text); }
.modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
.modal-foot {
  padding: .9rem 1.25rem; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap;
}

/* ── Toast ──────────────────────────────────────────────────────────────── */

#toasts { position: fixed; top: 1rem; right: 1rem; z-index: 600; display: grid; gap: .5rem; }
.toast {
  background: var(--text); color: #fff;
  padding: .7rem 1.05rem; border-radius: var(--radius);
  font-size: .85rem; font-weight: 700; max-width: 340px;
  box-shadow: var(--shadow-md);
  animation: slide .22s ease;
}
@keyframes slide { from { transform: translateX(22px); opacity: 0; } }
.toast.success { background: #146B4D; }
.toast.error { background: #A93B3B; }
.toast.warning { background: #A9761A; }

/* ── Botão flutuante de registro (o FAB do PRD §4.2) ────────────────────── */

.fab {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.35rem; border: none; border-radius: var(--radius-full);
  background: var(--primary); color: #fff;
  font-size: .92rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 24px rgba(47, 107, 79, .38);
  transition: transform var(--transition);
}
.fab:hover { transform: translateY(-2px); }
.fab svg { width: 20px; height: 20px; }

/* ── Registro rápido ────────────────────────────────────────────────────── */

.record-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.record-tab {
  flex: 1; padding: .6rem; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: #fff;
  font-size: .8rem; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  color: var(--text-muted); transition: var(--transition);
}
.record-tab.on { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }

.mic-button {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto;
  border: none; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 6px 20px rgba(47, 107, 79, .32);
  transition: var(--transition);
}
.mic-button.recording { background: var(--danger); animation: pulse 1.4s ease infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 90, 90, .45); }
  50%      { box-shadow: 0 0 0 16px rgba(220, 90, 90, 0); }
}
.mic-hint { text-align: center; font-size: .82rem; color: var(--text-muted); margin-top: .8rem; }

.parsed-box {
  background: var(--primary-light); border: 1px solid #CFE2D7;
  border-radius: var(--radius); padding: .9rem 1rem; margin-top: 1rem;
}
.parsed-box h4 {
  font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--primary-dark); margin-bottom: .5rem;
}

/* ── Grade da semana (planejamento) ─────────────────────────────────────── */

/* A faixa do plano DA SEMANA, acima dos dias. Um objetivo de semana não
   acontece na terça — ele vale os sete dias, e por isso atravessa a grade. */
.week-solta {
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: .7rem .85rem;
  margin-bottom: .8rem;
}
.week-solta h4 {
  display: flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .5rem;
}
.week-solta-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .45rem; }
.week-solta .week-item { cursor: pointer; }

.week-grid {
  display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap: .6rem; overflow-x: auto; padding-bottom: .5rem;
}
.week-col { background: var(--bg-muted); border-radius: var(--radius); padding: .6rem; min-height: 180px; }
.week-col.today { background: var(--primary-light); }
.week-col h4 { font-size: .74rem; font-weight: 800; margin-bottom: .5rem; text-align: center; }
.week-col h4 span { display: block; font-size: .68rem; color: var(--text-muted); font-weight: 700; }
.week-item {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .45rem .55rem; margin-bottom: .4rem; font-size: .76rem;
  cursor: grab; border-left: 3px solid var(--primary);
}
.week-item.done { opacity: .5; border-left-color: var(--success); }
.week-item strong { display: block; font-weight: 700; }
.week-item small { color: var(--text-muted); }

/* ── Galeria ────────────────────────────────────────────────────────────── */

.gallery { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.gallery-item {
  border-radius: var(--radius); overflow: hidden; background: #fff;
  border: 1px solid var(--border); cursor: pointer; transition: var(--transition);
}
.gallery-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.gallery-cover {
  aspect-ratio: 4 / 3; background: var(--bg-muted);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light); overflow: hidden; position: relative;
}
.gallery-cover img { width: 100%; height: 100%; object-fit: cover; }
.gallery-star { position: absolute; top: .4rem; right: .4rem; color: var(--accent); }
.gallery-body { padding: .6rem .7rem .75rem; }

/* ── Progresso ──────────────────────────────────────────────────────────── */

.progress { height: 7px; border-radius: var(--radius-full); background: var(--bg-muted); overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); border-radius: var(--radius-full); transition: width .4s ease; }

/* ── Onboarding ─────────────────────────────────────────────────────────── */

.onb-screen {
  position: fixed; inset: 0; z-index: 300; background: var(--bg);
  display: none; overflow-y: auto; padding: 1.5rem 1rem 3rem;
}
.onb-screen.active { display: block; }
.onb-wrap { max-width: 680px; margin: 0 auto; }
.onb-steps { display: flex; gap: .4rem; margin-bottom: 1.6rem; }
.onb-step { flex: 1; height: 5px; border-radius: var(--radius-full); background: var(--border); }
.onb-step.on { background: var(--primary); }
.onb-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em; }
.onb-sub { font-size: .92rem; color: var(--text-muted); margin: .35rem 0 1.5rem; }
.onb-foot { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1.6rem; }

/* ── Selo de offline ────────────────────────────────────────────────────── */

/* Discreto de propósito: informa sem assustar. A família não precisa entender
   fila de sincronização — precisa saber que o registro dela não se perdeu. */
.offline-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem; border-radius: var(--radius-full);
  background: var(--info-bg); color: #1D4ED8;
  font-size: .74rem; font-weight: 800;
}
.offline-badge.off { background: var(--warning-bg); color: #B45309; }
.offline-badge svg { width: 14px; height: 14px; }

/* ── Mapa de calor (Superpoder 6) ───────────────────────────────────────── */

.heat-scroll { overflow-x: auto; padding-bottom: .4rem; }
.heat-grid { display: flex; gap: 3px; min-width: min-content; }
.heat-week { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.heat-day {
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--bg-muted); display: block;
}
.heat-day.l0 { background: #EDE8DE; }
.heat-day.l1 { background: #C9E0D2; }
.heat-day.l2 { background: #93C4AA; }
.heat-day.l3 { background: #5A9B78; }
.heat-day.l4 { background: var(--primary); }

.week-matrix { display: grid; gap: 4px; overflow-x: auto; }
.wm-row { display: grid; grid-template-columns: 150px repeat(7, 1fr); gap: 4px; align-items: center; }
.wm-head span { font-size: .7rem; font-weight: 800; color: var(--text-muted); text-align: center; }
.wm-label { font-size: .78rem; font-weight: 700; }
.wm-cell {
  height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; color: #fff;
}

/* ── Utilitários ────────────────────────────────────────────────────────── */

.muted { color: var(--text-muted); }
.small { font-size: .8rem; }
.center { text-align: center; }
.stack { display: grid; gap: 1rem; }
.row { display: flex; align-items: center; gap: .6rem; }
.row-wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.mt { margin-top: 1rem; }
.mb { margin-bottom: 1rem; }
.split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1rem; align-items: start; }

/*
 * A BARRA DE BAIXO NASCE DESLIGADA, e o media query do celular a liga.
 *
 * Esta linha morava DEPOIS do bloco `@media (max-width: 860px)`. Como tem a
 * mesma especificidade e vinha por último, ela vencia sempre — em qualquer
 * largura. O resultado: a navegação de polegar, que o comentário lá embaixo
 * chama de "a navegação principal no celular", nunca apareceu para ninguém, e
 * o `.content` seguia reservando 88px de rodapé vazio em toda tela do
 * telefone. Ordem em CSS não é detalhe: é quem ganha.
 */
.bottom-nav { display: none; }

/* ── Responsivo ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .sidebar {
    position: fixed; left: 0; top: var(--barra-total); bottom: 0; z-index: 200;
    height: auto;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .menu-toggle { display: flex; }
  .content { padding: 1rem 1rem 5.5rem; }
  .page-header h1 { font-size: 1.28rem; }

  /* No celular a navegação principal vai para o polegar. */
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: rgba(255,255,255,.96);
    /* O prefixo é para o Safari de iPhone anterior ao 18 — sem ele a barra
       não desfoca e o conteúdo aparece por baixo, sujo. */
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
  }
  .bottom-nav button {
    flex: 1; background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: .12rem;
    padding: .35rem 0; color: var(--text-muted);
    font-size: .64rem; font-weight: 800;
  }
  .bottom-nav button.on { color: var(--primary); }
  .bottom-nav svg { width: 20px; height: 20px; }

  .fab { bottom: 4.6rem; right: 1rem; padding: .8rem 1.1rem; }

  /* No celular a folga da moldura encolhe, para o formulário aproveitar a
     tela — mas continua sendo a tela que existe (`dvh`), e não a de mentira. */
  .modal-overlay { padding: .6rem; }
  .modal {
    max-height: calc(100vh - 1.2rem);
    max-height: calc(100dvh - 1.2rem);
  }
  .radar-row { grid-template-columns: 108px 1fr 34px; }
  .rail-card { width: 140px; }
}

@media (max-width: 480px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric-value { font-size: 1.35rem; }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }
  .wm-row { grid-template-columns: 96px repeat(7, 1fr); }
  .wm-label { font-size: .7rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PALAVRA COMPRIDA NÃO ARREBENTA A TELA

   Um endereço de site colado na descrição, um título sem espaço, um e-mail
   longo: o navegador não quebra palavra por padrão, então o cartão cresce
   além da tela e a página inteira passa a rolar para o lado. Medido no
   celular: um nome de 55 letras empurrava Projetos e Encontros 141 pixels
   para fora, e Hábitos 156.

   `break-word` só quebra quando não cabe de outro jeito — o texto normal
   continua se comportando como sempre.
   ═══════════════════════════════════════════════════════════════════════ */

.app, .modal { overflow-wrap: break-word; }

/* ═══════════════════════════════════════════════════════════════════════
   APARELHO DE TOQUE — celular e tablet, Android e iPhone

   A pergunta certa não é "a tela é estreita", é "quem aponta aqui é um
   dedo": um tablet deitado tem 1024 de largura e continua sendo dedo.

   `pointer: coarse` sozinho, e NÃO `(hover: none) and (pointer: coarse)`.
   A parte do `hover` parece reforçar e na verdade exclui aparelhos de
   verdade: um Galaxy com caneta responde `hover: hover`, porque a caneta
   passa por cima sem tocar — e o celular inteiro escaparia da regra.

   A largura entra como segunda porta, separada por vírgula, para o caso de
   um navegador que responda mal às perguntas de ponteiro: abaixo de 860 o
   app já se comporta como celular de qualquer jeito.
   ═══════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse), (max-width: 860px) {

  /* ── O ZOOM DO IPHONE ─────────────────────────────────────────────────
     O Safari de iPhone dá um zoom automático ao focar qualquer campo com
     letra MENOR que 16px — e não desfaz sozinho. A mãe toca no campo, a
     tela salta, ela preenche às cegas e precisa fechar o zoom com dois
     dedos a cada campo. Todos os campos do app estavam em 14.4px, então
     isso acontecia em TODOS os formulários: passeio, projeto, livro,
     encontro, hábito, portfólio.

     16px é o piso, não uma escolha de estilo. */
  .input, .textarea, .select,
  input, select, textarea { font-size: 16px; }

  /* ── O TAMANHO DO ALVO ────────────────────────────────────────────────
     Medido nas telas: os chips de filtro tinham 29px de altura e os botões
     pequenos, 27 — quase metade dos 44 que a Apple pede e dos 48 do
     Android. Errar o toque num filtro é irritante; errar no botão de
     apagar é pior.

     Cresce só no toque: no computador os controles continuam compactos. */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; padding: .5rem .9rem; }
  .chip { min-height: 44px; padding: .5rem .9rem; }
  .modal-x { min-width: 44px; min-height: 44px; }
  /* O botão que abre o menu lateral tinha 38px — e é o primeiro toque de
     quem quer sair da tela em que está. O sino dos avisos tinha 20. */
  .menu-toggle { min-width: 44px; min-height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; }

  /* Botão só de ícone: sem largura mínima ele fica um quadradinho. */
  .btn svg:only-child { width: 18px; height: 18px; }
  .btn-sm:not(:has(:not(svg))) { min-width: 44px; }

  /* A marcação do hábito é o gesto mais repetido do app — um por dia, por
     hábito, para sempre. Tem de ser o alvo mais fácil da tela. */
  .habit-check { width: 44px; height: 44px; }

  /* A caixinha do checklist tem 22px e crescer estragaria a lista. Então
     ela ganha uma área de toque invisível ao redor, chegando a 44px sem
     mudar um pixel do que aparece. */
  .check-box { position: relative; }
  .check-box::after { content: ''; position: absolute; inset: -11px; }

  /* Linha inteira que responde ao toque — o ranking de estados do mapa, as
     listas que abrem um detalhe. Tinham 31px de altura. */
  .row[onclick], tr[onclick] { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   A FITA DE 28 DIAS DO HÁBITO

   São 28 quadrados de 9px com 3px de folga: 333px que não encolhem. Somados
   à marcação, ao nome e à contagem, a linha exigia 519px — e num celular de
   390 a página inteira passava a rolar para o lado, 145px de vazamento.

   Deixar a linha e a fita quebrarem resolve sem esconder nada: o histórico
   passa para a linha de baixo em vez de sair da tela.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 620px) {
  .habit-row { flex-wrap: wrap; }
  .habit-row .grow { flex: 1 1 55%; }
  .habit-grid { flex-wrap: wrap; }
}

/* ── Impressão ──────────────────────────────────────────────────────────── */

@media print {
  .sidebar, .topbar, .fab, .bottom-nav, .page-actions, #toasts { display: none !important; }
  .content { padding: 0; max-width: none; }
  .card { border: none; box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}