/* ==========================================================================
   Estilos Globales y Personalizados - Gisel Jazmin Pittavino · Muleíva
   ========================================================================== */

:root {
  --color-bg-base: #faf6f0;
  --color-bg-card: rgba(255, 255, 255, 0.94);
  --color-terracotta: #c07c68;
  --color-terracotta-dark: #a8624f;
  --color-sage: #5e7161;
  --color-sage-dark: #435345;
  --color-sage-light: #eaf0eb;
  --color-sand: #f3ede2;
  --color-text-main: #2d2623;
  --color-text-muted: #6e655f;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-bg-base);
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-main);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Tipografías */
.font-serif-display {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-handwriting {
  font-family: 'Caveat', cursive, sans-serif;
}

/* Tarjetas y Sombras Orgánicas de Muleíva */
.muleiva-card {
  background: var(--color-bg-card);
  border: 1px solid rgba(224, 214, 203, 0.85);
  box-shadow: 0 4px 20px -3px rgba(192, 124, 104, 0.08), 0 2px 8px -2px rgba(67, 83, 69, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.muleiva-card:hover {
  border-color: rgba(192, 124, 104, 0.45);
  box-shadow: 0 10px 25px -4px rgba(192, 124, 104, 0.12), 0 4px 12px -2px rgba(67, 83, 69, 0.06);
}

.muleiva-accent-badge {
  background-color: #f7ebe6;
  color: #a8624f;
  border: 1px solid #ebd0c7;
}

.muleiva-sage-badge {
  background-color: #eaf0eb;
  color: #435345;
  border: 1px solid #c9d8cc;
}

/* Ocultar barra de scroll nativa para apariencia limpia de app */
.no-scrollbar::-webkit-scrollbar {
  display: none;
  height: 0px;
  width: 0px;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animaciones y Transiciones */
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-content-enter {
  animation: fadeInSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes softPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

.animate-soft-pulse {
  animation: softPulse 2.5s ease-in-out infinite;
}

/* ==========================================================================
   Reglas de Impresión y Generación de PDF A4
   ========================================================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 10mm;
  }

  body {
    background: #ffffff !important;
    color: #1a1614 !important;
    font-size: 10pt !important;
    padding: 0 !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  .no-print {
    display: none !important;
  }

  .print-page {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    background: #ffffff !important;
  }

  .print-break-inside-avoid {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .exp-details-content {
    display: block !important;
  }

  a {
    text-decoration: none !important;
    color: inherit !important;
  }
}