/* Vida — adaptación móvil dedicada (PWA + Android), paridad con inversion-mobile.css */

/* ── Safe-area arriba (topbar oculto en modo Vida) ── */
.vida-screen .vida-shell {
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}

/* ── Cabecera y tarjetas: menos padding, texto más contenido ── */
.vida-screen .vida-title {
  font-size: 21px;
}

.vida-screen .vida-subtitle {
  font-size: 12.5px;
}

.vida-screen .vida-card {
  padding: 14px 14px;
}

.vida-screen .vida-card-head {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* ── Botones: objetivo táctil mínimo ~44px ── */
.vida-screen .vida-btn-primary,
.vida-screen .vida-btn-outline {
  min-height: 44px;
  padding: 10px 16px;
}

.vida-screen .vida-modal-close {
  min-height: 44px;
}

.vida-screen .vida-overlay-close {
  width: 40px;
  height: 40px;
  font-size: 24px;
}

.vida-screen .vida-link-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.vida-screen .vida-period-select {
  min-height: 40px;
}

.vida-screen .vida-lightbox-btn {
  height: 44px;
}

.vida-screen .vida-lightbox-actions {
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
}

/* ── Filtros de la línea de tiempo: táctiles + sin desborde ── */
.vida-screen .vida-filters {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
}

.vida-screen .vida-filters::-webkit-scrollbar { display: none; }

.vida-screen .vida-filter--icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.vida-screen .vida-filter--text {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.vida-screen .vida-filter--pill {
  height: 38px;
  flex-shrink: 0;
}

/* ── Timeline: más compacta en pantallas estrechas ── */
.vida-screen .vida-timeline-item {
  grid-template-columns: 28px minmax(0, 1fr) 64px;
  gap: 10px;
  padding: 14px 2px 14px 0;
}

.vida-screen .vida-timeline-item .vida-thumb--photo {
  width: 64px;
  height: 48px;
  min-width: 64px;
}

/* ── Modal "Nuevo momento": tipos más grandes al tacto ── */
.vida-screen .vida-moment-type {
  padding: 12px 6px;
  min-height: 44px;
}

/* ── Calendario: pills sin desborde ── */
.vida-screen .vida-cal-pills {
  flex-wrap: wrap;
  gap: 6px;
}

.vida-screen .vida-cal-pill {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* ── Calendario mes: celdas legibles en 360–400px ── */
.vida-screen .vida-month-head,
.vida-screen .vida-month-grid {
  gap: 4px;
}

.vida-screen .vida-month-cell {
  aspect-ratio: 1;
  gap: 2px;
}

.vida-screen .vida-month-num {
  font-size: 11.5px;
}

/* ── Resumen / estadísticas: bajar a 1 columna en pantallas muy estrechas ── */
@media (max-width: 420px) {
  .vida-screen .vida-summary-grid,
  .vida-screen .vida-stats-grid,
  .vida-screen .vida-stats-row {
    grid-template-columns: 1fr;
  }

  .vida-screen .vida-moment-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vida-screen .vida-photo-strip--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Álbum: acciones de foto siempre visibles (no hay :hover táctil) ── */
.vida-screen .vida-foto-actions {
  opacity: 1;
  bottom: 6px;
  right: 6px;
}

.vida-screen .vida-foto-btn {
  width: 36px;
  height: 36px;
}

/* ── Proyecto de vida: pie de acciones apilado en móvil ── */
.vida-screen .pv-footer {
  flex-wrap: wrap;
  padding: 14px 16px;
}

.vida-screen .pv-cancel,
.vida-screen .pv-create {
  flex: 1 1 auto;
  min-height: 44px;
  text-align: center;
  justify-content: center;
}

.vida-screen .pv-photo-x {
  width: 28px;
  height: 28px;
  font-size: 16px;
}

@media (max-width: 380px) {
  .vida-screen .vida-header-actions .vida-btn-primary,
  .vida-screen .vida-header-actions .vida-btn-outline {
    min-width: 0;
    flex-basis: 100%;
  }
}