/* ===== 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 4px 7px; text-decoration: none;
  color: #94a3b8; font: 600 10px/1.15 system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: color .15s ease, transform .12s ease;
}
.app-tab svg { width: 24px; height: 24px; }
/* Bug real: con 4 tabs angostas ("Trabaja con nosotros" es la más larga),
   el texto envuelve a 2 líneas — .app-tab ya centra la CAJA del label con
   align-items, pero sin esto el texto DENTRO de esa caja se alineaba a la
   izquierda por default del navegador (se veía "pegado al lado" en vez de
   centrado). text-wrap:balance reparte mejor las 2 líneas cuando envuelve
   (en vez de una línea larga + una corta). */
.app-tab span {
  text-align: center;
  text-wrap: balance;
}
.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; } }

/* ...EXCEPTO en el sistema de gestión (app.saludencasa.lat): las enfermeras lo usan
   sobre todo en tablet o celular, así que se mantiene con cara de app también en
   pantallas grandes — nunca cambia a layout de sitio web de escritorio. */
body.app-shell-system .app-tabbar { display: flex !important; }
body.app-shell-system .app-tabbar-spacer { display: block !important; }

/* ===== Barra de CTA fija en móvil — SOLO marketing (16 ago 2026) =====
   Checklist de SEO/CRO pedido por el dueño: mantener un CTA siempre visible
   mientras se lee un artículo largo o una página de distrito, en vez de
   depender solo del botón del hero o del menú hamburguesa. Usa el mismo
   patrón fixed+spacer que .app-tabbar (mismo --safe-bottom), pero con sus
   propias clases para no interferir con la tab bar real del sistema. */
.app-mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 10px 16px calc(10px + var(--safe-bottom));
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -6px 20px rgba(15,23,42,.08);
}
@media (min-width: 1024px) { .app-mobile-cta-bar { display: none; } }
.app-mobile-cta-bar-spacer { height: calc(58px + var(--safe-bottom)); }
@media (min-width: 1024px) { .app-mobile-cta-bar-spacer { display: none; } }

/* Botones/tarjetas más "táctiles" tipo app — pedido explícito del dueño
   (10 ago 2026): la forma real la da cada elemento con su propia clase
   (rounded-full para botones, .app-card/.app-surface-soft para tarjetas).
   Antes este `border-radius: 999px` universal pisaba el radio de CUALQUIER
   tarjeta que también llevara la clase app-cta (por su sombra/animación,
   no por su forma) — así se veían como píldora/círculo sin que nadie lo
   hubiera pedido. Ver también resources/css/app.css (misma clase, para
   cuando esta hoja no carga en marketing... — hoy SÍ carga en los dos, se
   deja el fix acá que es la fuente real). */
.app-cta {
  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); }
}