/* ===== Salud en Casa — App Shell (capa de estética/comportamiento tipo app) ===== */

:root {
  --sec-teal: #115e59;
  --sec-teal-dark: #134e4a;
  --sec-mint: #14b8a6;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Sensación nativa: sin resaltado al tocar, sin selección accidental en el chrome,
   scroll con inercia y sin "rebote" que arrastre toda la página. */
html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
a, button, .app-tab, nav { -webkit-user-select: none; user-select: none; }
/* Permitir selección donde tiene sentido (contenido) */
p, h1, h2, h3, li, span.selectable, input, textarea { -webkit-user-select: text; user-select: text; }

/* Transición de entrada de página (feel de navegación de app) */
@media (prefers-reduced-motion: no-preference) {
  main { animation: appFade .28s ease both; }
}
@keyframes appFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Barra de navegación inferior (tab bar) ===== */
.app-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-around; align-items: stretch;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-top: 1px solid #e2e8f0;
  padding-bottom: var(--safe-bottom);
  box-shadow: 0 -6px 20px rgba(15,23,42,.06);
}
.app-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 9px 0 7px; text-decoration: none;
  color: #94a3b8; font: 600 10px/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: color .15s ease, transform .12s ease;
}
.app-tab svg { width: 24px; height: 24px; }
.app-tab:active { transform: scale(.92); }
.app-tab.is-active { color: var(--sec-teal); }
.app-tab.is-active svg { stroke: var(--sec-teal); }
.app-tab .app-tab-dot { display: none; }
.app-tab.is-active .app-tab-dot {
  display: block; width: 4px; height: 4px; border-radius: 99px; background: var(--sec-teal);
  margin-top: 2px;
}

/* Mostrar la tab bar solo en móvil */
@media (min-width: 768px) { .app-tabbar { display: none; } }

/* Espaciador en flujo normal para que la tab bar no tape el contenido */
.app-tabbar-spacer { height: calc(64px + var(--safe-bottom)); }
@media (min-width: 768px) { .app-tabbar-spacer { display: none; } }

/* En móvil, el footer "de web" se oculta para no romper la sensación de app */
@media (max-width: 767px) { body.has-tabbar footer { display: none; } }

/* Botones más "táctiles" tipo app */
.app-cta {
  border-radius: 999px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(17,94,89,.25);
  transition: transform .12s ease;
}
.app-cta:active { transform: scale(.97); }

/* Barra superior compacta tipo app en móvil */
@media (max-width: 767px) {
  .app-topbar { padding-top: var(--safe-top); }
}