/* ============================================================
   base.css — Variables, reset, body, animaciones globales
   ============================================================ */

:root {
  --bg:      #0a0a0a;
  --surface: #111111;
  --card:    #161616;
  --border:  #252525;
  --accent:  #e8ff47;
  --accent2: #ff4747;
  --accent3: #47c8ff;
  --text:    #f0f0f0;
  --muted:   #666;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  top: 0 !important;
}

/* Noise overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: 0.4;
}

/* ── Animaciones ── */
@keyframes fadeUp    { from { opacity: 0; transform: translateY(20px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes pulse     { from { opacity: 0.7; }                             to { opacity: 1; } }
@keyframes loadBar   { from { width: 0%; }                                to { width: 100%; } }
@keyframes modalIn   { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes langFadeIn{ from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Print / PDF ── */
@media print {
  /* Reasignar variables a modo claro */
  :root {
    --bg:      #ffffff;
    --surface: #f5f5f5;
    --card:    #f9f9f9;
    --border:  #dddddd;
    --accent:  #5a7a00;
    --accent2: #cc2200;
    --accent3: #006699;
    --text:    #111111;
    --muted:   #555555;
  }

  /* Ocultar todo excepto la rutina */
  #rutinix-nav, #rutinix-footer,
  #hero, #welcome-back,
  #quiz-wrapper, #loading-screen,
  #reviews-section, #features-section, #how-it-works,
  .modal-overlay, .results-actions,
  #gymbot-tab, #gymbot-panel, #gymbot-overlay,
  body::before { display: none !important; }

  /* Mostrar resultados */
  #results-wrapper {
    display: block !important;
    padding: 0 !important;
  }

  body {
    background: #fff !important;
    color: #111 !important;
    padding-top: 0 !important;
    font-size: 11pt;
  }

  /* Cabecera de resultados */
  .results-header { padding: 1rem 0 1.5rem; }
  .results-badge  { background: #111 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .results-title  { font-size: 2.2rem !important; }
  .results-title .highlight { color: #111 !important; }

  /* Profile grid: 4 columnas en print */
  .profile-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 0.5rem !important; margin: 1rem 0 !important; }
  .profile-card { border: 1px solid #ddd !important; padding: 0.6rem !important; break-inside: avoid; }
  .profile-card-value { color: #111 !important; }

  /* Secciones de rutina */
  .routine-section { margin-bottom: 1.5rem !important; break-inside: avoid; }
  .section-header  { border-bottom: 1px solid #ddd !important; padding-bottom: 0.6rem !important; margin-bottom: 0.8rem !important; }
  .section-day-name { color: #111 !important; }
  .section-tag  { background: #f0f0f0 !important; border-color: #ccc !important; color: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .section-rest { background: #f0f0f0 !important; border-color: #ccc !important; color: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Ejercicios */
  .exercise-card  { border: 1px solid #ddd !important; background: #fff !important; padding: 0.5rem 0.75rem !important; break-inside: avoid; }
  .exercise-card::after { display: none !important; }
  .exercise-name  { font-size: 0.88rem !important; }
  .exercise-detail{ color: #555 !important; }
  .ex-thumb       { display: none !important; }
  .exercise-badge { background: #eee !important; color: #333 !important; border-color: #ccc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Tips */
  .tips-title { font-size: 1rem !important; }
  .tip-dot    { background: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tip-item   { font-size: 0.85rem !important; }

  /* Gráfico: ocultar canvas (no se imprime bien) */
  #peso-chart-section { display: none !important; }

  /* Saltos de página */
  .routine-section { page-break-inside: avoid; }
  .divider         { border: none !important; border-top: 1px solid #eee !important; background: none !important; }

  /* Marca de agua / pie */
  #results-wrapper::after {
    content: 'Generado con RUTINIX · rutinix.com';
    display: block;
    text-align: center;
    font-size: 8pt;
    color: #aaa;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
  }
}