/* PlaneaFiesta — estilos propios que complementan a Tailwind.
   Solo lo que Tailwind no cubre bien: animaciones, efectos y detalles de iOS. */

:root {
  --brand-500: #f5308d;
  --brand-600: #e11d74;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* ---------- Utilidades base ---------- */

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.glass-effect {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.pattern-dots {
  background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px);
  background-size: 20px 20px;
}

.text-gradient {
  background: linear-gradient(135deg, var(--brand-600), #f97316);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Carruseles horizontales con imán */
.snap-x { scroll-snap-type: x mandatory; }
.snap-start-item { scroll-snap-align: start; }

/* ---------- Animaciones de entrada ---------- */

.animate-fade-in { animation: pfFadeIn .6s ease-out forwards; opacity: 0; }
.animate-slide-up { animation: pfSlideUp .6s ease-out forwards; opacity: 0; transform: translateY(24px); }
.animate-scale-in { animation: pfScaleIn .5s ease-out forwards; opacity: 0; transform: scale(.96); }

.animate-delay-100 { animation-delay: .1s; }
.animate-delay-200 { animation-delay: .2s; }
.animate-delay-300 { animation-delay: .3s; }
.animate-delay-400 { animation-delay: .4s; }
.animate-delay-500 { animation-delay: .5s; }

@keyframes pfFadeIn { to { opacity: 1; } }
@keyframes pfSlideUp { to { opacity: 1; transform: translateY(0); } }
@keyframes pfScaleIn { to { opacity: 1; transform: scale(1); } }

/* Quien pidió menos movimiento no ve ninguno, y nada queda invisible. */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-slide-up,
  .animate-scale-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
  * { transition-duration: .01ms !important; }
}

/* ---------- Pantallas internas: lenguaje de app iOS ---------- */

/* Área segura del iPhone bajo la barra de pestañas */
.pb-safe { padding-bottom: calc(var(--safe-bottom) + .25rem); }
.pt-safe { padding-top: var(--safe-top); }

/* El contenido nunca queda debajo de la barra de pestañas */
.app-content { padding-bottom: calc(5rem + var(--safe-bottom)); }
@media (min-width: 768px) { .app-content { padding-bottom: 3rem; } }

/* Lista agrupada tipo Ajustes: separadores finos entre filas, no en los bordes */
.ios-list > * + * { border-top: 1px solid rgba(0, 0, 0, .06); }

/* Realimentación al tocar */
.tappable { transition: transform .12s ease, background-color .12s ease; }
.tappable:active { transform: scale(.98); }

/* Título grande que se encoge al bajar */
.large-title { transition: font-size .2s ease, opacity .2s ease; }
.large-title.is-collapsed { font-size: 1.125rem; }

/* Hoja que sube desde abajo */
.sheet {
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
.sheet.is-open { transform: translateY(0); }
.sheet-backdrop { transition: opacity .3s ease; }

/* Visor de imágenes a pantalla completa */
.pf-lightbox {
  opacity: 0;
  transition: opacity .2s ease;
  /* En iPhone, 100vh se mete debajo de la barra del navegador. */
  height: 100dvh;
  padding-bottom: var(--safe-bottom);
}
.pf-lightbox.is-open { opacity: 1; }
/* Casi opaco: la página de atrás no debe competir con la foto. */
.pf-lightbox-backdrop { background-color: rgba(3, 7, 18, .97); }
.pf-lightbox img { -webkit-user-select: none; user-select: none; }
.pf-lightbox .js-lb-image {
  transition: opacity .15s ease;
  /* La imagen manda: el escenario ya está acotado por el alto disponible. */
  width: auto;
  height: auto;
}

/* ---------- Formularios ---------- */

.field {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid #d1d5db;
  padding: .75rem 1rem;
  font-size: 1rem;
  background-color: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(245, 48, 141, .15);
}
.field:disabled { background-color: #f9fafb; color: #9ca3af; }
.field-error { border-color: #dc2626; }

/* El contador de caracteres se pone ámbar y luego rojo al acercarse al tope */
.char-counter { font-variant-numeric: tabular-nums; }
.char-counter.is-near { color: #b45309; }
.char-counter.is-over { color: #dc2626; font-weight: 600; }

/* ---------- Foco visible ---------- */

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* ---------- Texto enriquecido de las descripciones largas ---------- */

.rich-text p { margin-bottom: .75rem; }
.rich-text ul, .rich-text ol { margin: 0 0 .75rem 1.25rem; }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text a { color: var(--brand-600); text-decoration: underline; }
.rich-text strong { font-weight: 600; }

/* ---------- Impresión ---------- */

@media print {
  header, footer, .app-tabbar, .no-print { display: none !important; }
  body { background: #fff; }
}