/* ============================================
   MIRAI APA — Main Stylesheet
   Formateador APA 7 • Liquid Glass • iOS 26
   
   Orden de carga:
   1. variables.css  → Temas, tokens, espaciado
   2. layout.css     → Estructura, grid, header, footer
   3. components.css → Botones, cards, inputs, toasts
   4. styles.css     → (Este archivo) Personalizaciones
   ============================================ */

/* ============================================
   IMPORTS
   ============================================ */
@import url('variables.css');
@import url('layout.css');
@import url('components.css');

/* ============================================
   TRANSICIÓN GLOBAL DE TEMA
   Evita el "flash" al cambiar entre temas
   ============================================ */
html {
  transition: background-color var(--transition-normal),
              color var(--transition-normal);
}

html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color 0.4s ease,
              color 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.4s ease,
              transform 0.01ms !important;
}

/* ============================================
   HEADER LOGO
   ============================================ */
.header-logo {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: opacity var(--transition-fast);
}

.header-logo:hover {
  opacity: 0.8;
}

.header-logo img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  object-fit: contain;
}

.header-logo span {
  background: var(--btn-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================
   HEADER NAV (Enlaces como pills)
   ============================================ */
.header-nav {
  display: none;
  gap: var(--space-2);
  align-items: center;
}

@media (min-width: 768px) {
  .header-nav {
    display: flex;
  }
}

.header-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.header-nav a:hover {
  color: var(--text-primary);
  background: var(--glass-surface);
  border-color: var(--glass-border);
}

.header-nav a.active {
  color: var(--btn-text);
  background: var(--btn-gradient);
  border-color: transparent;
  box-shadow: var(--btn-shadow);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.hero-section h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  max-width: 700px;
}

.hero-section h1 span {
  background: var(--btn-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-section p {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  max-width: 550px;
  line-height: var(--line-height-relaxed);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--status-success-bg);
  color: var(--status-success-text);
  border: 1px solid var(--status-success-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.hero-badge .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-success-text);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* ============================================
   PROGRESS BAR (Sección de Progreso)
   ============================================ */
.progress-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.progress-track {
  width: 100%;
  height: 10px;
  background: var(--input-bg);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--input-border);
}

.progress-fill {
  height: 100%;
  background: var(--btn-gradient);
  border-radius: var(--radius-full);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  margin-top: var(--space-3);
}

/* ============================================
   RESULT CARD (Documento Formateado)
   ============================================ */
.result-card {
  background: var(--glass-surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  padding: var(--space-6);
  box-shadow: var(--glass-shadow);
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
}

.result-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.result-filename {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.result-body {
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-5);
}

.result-actions {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--glass-border);
  flex-wrap: wrap;
}

/* ============================================
   INFO CARDS (Soporte / Privacidad)
   ============================================ */
.info-grid .card {
  text-align: center;
  padding: var(--space-5);
}

.info-grid .card-title {
  font-size: var(--font-size-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.info-grid .card-body {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* ============================================
   FOOTER LINKS COMO PILLS
   ============================================ */
.footer-col ul li a {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  font-size: var(--font-size-sm);
}

.footer-col ul li a:hover {
  background: var(--glass-surface);
  transform: translateX(4px);
}

/* ============================================
   SAKURA PETALS (Solo en temas sakura)
   ============================================ */
.sakura-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

[data-theme="sakura-light"] .sakura-container,
[data-theme="sakura-dark"] .sakura-container {
  opacity: 0.25;
}

.sakura-petal {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50% 0 50% 50%;
  opacity: 0.6;
  animation: petalFall linear infinite;
  will-change: transform;
}

[data-theme="sakura-light"] .sakura-petal {
  background: var(--sakura-pink-med);
}

[data-theme="sakura-dark"] .sakura-petal {
  background: rgba(244, 114, 182, 0.4);
}

@keyframes petalFall {
  0% {
    transform: translateY(-10vh) rotate(0deg) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(110vh) rotate(720deg) translateX(80px);
    opacity: 0;
  }
}

/* ============================================
   DARK MODE SPECIFICS
   Ajustes finos para temas oscuros
   ============================================ */
[data-theme="blue-dark"] .header.scrolled,
[data-theme="sakura-dark"] .header.scrolled {
  background: rgba(10, 20, 35, 0.9);
}

[data-theme="blue-dark"] .hero-section h1 span,
[data-theme="sakura-dark"] .hero-section h1 span {
  -webkit-text-fill-color: unset;
  color: var(--text-primary);
  background: none;
}

[data-theme="blue-dark"] .header-logo span,
[data-theme="sakura-dark"] .header-logo span {
  -webkit-text-fill-color: unset;
  color: var(--text-primary);
  background: none;
}

/* ============================================
   PRINT STYLES (Impresión)
   ============================================ */
@media print {
  .theme-selector,
  .sakura-container,
  .toast-container,
  .header,
  .btn,
  .dropzone,
  .upload-area {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  body::before,
  body::after {
    display: none;
  }

  .section,
  .card,
  .glass-card,
  .glass-panel {
    background: white;
    border: 1px solid #ddd;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    break-inside: avoid;
  }
}

/* ============================================
   RESPONSIVE OVERRIDES (styles.css)
   ============================================ */
@media (max-width: 767px) {
  .hero-section {
    padding: var(--space-5) var(--space-3);
  }

  .hero-section h1 {
    font-size: var(--font-size-2xl);
  }

  .hero-section p {
    font-size: var(--font-size-base);
  }

  .result-actions {
    flex-direction: column;
  }

  .result-actions .btn {
    width: 100%;
  }

  .info-grid .card {
    text-align: left;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hero-section h1 {
    font-size: var(--font-size-3xl);
  }
}

/* ============================================
   ANIMACIONES DE ENTRADA (Scroll Reveal)
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays para hijos */
.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > *:nth-child(5) { transition-delay: 320ms; }