/* ========== VARS ========== */
  :root{
    --safe-top-fallback: 0px;
    --safe-top: max(env(safe-area-inset-top, 0px), var(--safe-top-fallback));
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    --brand: #0E7A5E;
    --text: #111;
    --muted: #6b7280;
    --surface: #fff;
    --border: rgba(0,0,0,.08);

    --appbar-base: 64px;                   /* altura útil do header (sem safe-top) */
    --dock-base:  clamp(56px, 7vh, 64px); /* altura do dock adaptativa */
    --dock-icon:  24px;
    --touch:      44px;
  }

  html, body { margin:0; color:var(--text); background:var(--surface); -webkit-text-size-adjust:100%; }

  /* ========== HEADER (sempre reserva safe-top) ========== */
  .app-header{
    position: sticky; top: 0; z-index: 1000;

    /* TRUQUE: altura total já inclui a área segura do topo */
    height: calc(var(--appbar-base) + var(--safe-top));
    padding-top: var(--safe-top);

    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding-left:  calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
    background: var(--brand); color:#fff;
  }
  .app-header .left, .app-header .right{ display:flex; align-items:center; gap:10px; }
  .app-header .title{ flex:1; text-align:center; font-size:18px; font-weight:600; }
  .app-header .logo{ height:28px; width:auto; display:block; }
  .icon-btn{ height:var(--touch); min-width:var(--touch); display:grid; place-items:center; background:transparent; border:0; color:#fff; border-radius:10px; }

  /* ========== CONTEÚDO (compensa header + reserva o dock) ========== */
  .app-content{
    padding: 12px 16px;
    /* compensa a altura total do header (base + safe-top) */
    padding-top: calc(12px + var(--appbar-base) + var(--safe-top));
    /* reserva espaço pro dock (base + safe-bottom) */
    padding-bottom: calc(12px + var(--dock-base) + var(--safe-bottom));
  }

  /* ========== DOCK ========== */
  .app-dock{
    position: sticky; bottom: 0; z-index: 900;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 4px calc(8px + var(--safe-right)) calc(4px + var(--safe-bottom)) calc(8px + var(--safe-left));
  }
  .dock-nav{ display:flex; align-items:center; justify-content:space-between; min-height:var(--dock-base); gap:6px; }
  .dock-item{
    flex:1 1 20%; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; text-decoration:none; color:var(--muted);
    min-height:var(--touch); border-radius:10px; padding:6px 4px; -webkit-tap-highlight-color:transparent;
  }
  .dock-item:hover{ background:rgba(0,0,0,.03); }
  .dock-item:active{ background:rgba(0,0,0,.06); }
  .dock-item.active{ color:var(--brand); font-weight:600; }
  .dock-icon{ width:var(--dock-icon); height:var(--dock-icon); display:block; object-fit:contain; }
  .dock-label{ font-size:11px; line-height:1.05; text-align:center; }

  /* ========== Landscape: dock um pouco menor ========== */
  @media (orientation: landscape){
    :root{ --dock-base: clamp(48px, 6vh, 56px); }
    .dock-label{ font-size:10px; }
  }

  /* ========== Heurística teclado ========== */
  @media (max-height: 480px){
    .app-dock{ position: static; }
    .app-content{ padding-bottom:16px; }
  }

  /* ========== PATCH anti-zoom iOS (inputs ≥16px) ========== */
  /* Não depende de classe — só vale quando iOS aplicar zoom; aqui já prevenimos */
  input, select, textarea, button { font-size:16px; line-height:1.2; }
  ::placeholder { font-size:16px; }
  .btn, a.btn, .chip, .list-item a, .card a { font-size:16px; }