/* ============================================================================
   Base — reset mínimo, body, header, brand, botones-icono.
   ============================================================================ */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
body{ padding-bottom:90px; min-height:100vh; }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; font-size:16px; }

header{
  position:sticky; top:0; z-index:10;
  background:rgba(15,17,21,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);

  /* === Safe Area robusta — Dynamic Island / notch / sistemas no-iOS ===
     · env(safe-area-inset-top) devuelve el inset real reservado por el SO
       (Dynamic Island ≈ 59px, notch ≈ 47px, sin notch ≈ 20px).
     · max(env(...), 8px) garantiza un mínimo de 8px aunque el navegador
       devuelva 0 (Android, desktop, Safari fuera de modo PWA en algunos
       contextos) — nunca habrá colisión con la barra de estado.
     · El "+12px" añadido es respiración premium por encima del status bar
       (grid 4/8/12/16), no se mezcla con el inset del sistema.
     · Bottom 14px ≈ simetría visual con la respiración superior una vez
       restado el border-bottom de 1px.
     · safe-area-inset-left/right cubren iPhone en landscape: el contenido
       no queda pegado al notch lateral. */
  padding-top:    calc(max(env(safe-area-inset-top, 0px), 8px) + 12px);
  padding-right:  max(16px, env(safe-area-inset-right, 0px));
  padding-bottom: 14px;
  padding-left:   max(16px, env(safe-area-inset-left, 0px));
}
.brand{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:44px;  /* asegura una zona de tap cómoda al engranaje */
}
.brand-left{ display:flex; flex-direction:column; min-width:0; flex:1; }
h1{
  margin:0; font-size:18px; font-weight:700; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.meso-pill{
  font-size:11px; color:var(--accent-2);
  /* Separación de 4px (grid de 4): aire jerárquico h1 ↔ subtítulo, sin
     romper la compacidad del header sticky. */
  margin-top:4px;
  cursor:pointer; letter-spacing:.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.h-actions{ display:flex; gap:8px; flex-shrink:0; align-items:center; }
/* Tap target mínimo recomendado por iOS HIG: 44×44 */
.icon-btn{
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  min-width:44px; height:44px; border-radius:12px;
  font-size:16px; cursor:pointer; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap;
}
.icon-btn:active{ transform:scale(.95); }
/* La píldora de "hoy" lleva texto ("02 jun") → necesita ancho auto, no se
   parte en dos líneas. */
.icon-btn#todayPill{
  font-size:12px; font-weight:600; line-height:1.1;
  letter-spacing:.2px;
}