/* ============================================
   AI4PDG — Global Styles
   Sistema de diseño: Ágere.digital
   Tipografía: Plus Jakarta Sans (títulos + cuerpo) · IBM Plex Mono (prompts)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---- Variables — Sistema Ágere ---- */
:root {
  /* Fondos */
  --bg-base:       #FFFFFF;
  --bg-surface:    #FFFFFF;
  --bg-elevated:   #F4F6FA;
  --bg-card:       #FFFFFF;

  /* Texto */
  --text-primary:  #1A3468;
  --text-secondary:#3D5F9A;
  --text-tertiary: #64748B;

  /* Acento — paleta Ágere */
  --accent:        #3D5F9A;
  --accent-hover:  #1A3468;
  --accent-subtle: rgba(61,95,154,0.07);
  --accent-glow:   rgba(61,95,154,0.14);
  --accent-btn:    #3D5F9A;

  /* Bordes */
  --border:        rgba(26,52,104,0.10);
  --border-hover:  rgba(26,52,104,0.30);
  --border-accent: rgba(61,95,154,0.25);

  /* Métricas */
  --metric-color:  #3D5F9A;

  /* Forma */
  --radius:        0px;
  --radius-sm:     2px;
  --radius-md:     4px;

  /* Animaciones */
  --transition:    .32s cubic-bezier(.4,0,.2,1);
  --ease-out:      cubic-bezier(.16,1,.3,1);

  /* Tipografía */
  --font-heading:  'Plus Jakarta Sans', sans-serif;
  --font-body:     'Plus Jakarta Sans', sans-serif;
  --font-mono:     'IBM Plex Mono', 'Fira Code', 'Courier New', monospace;

  /* Layout */
  --nav-height:    64px;
  --container-max: 1280px;
  --section-gap:   clamp(40px, 6vw, 80px);
  --section-y:     clamp(64px, 10vw, 120px);
}

/* ---- Transitions ---- */
body, .card, nav, .nav-inner, .prompt-block, .badge, .copy-btn {
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; font-weight: 700; }

/* ---- Heading reveal animation ---- */
.line {
  display: block !important;
  overflow: hidden !important;
  padding-bottom: 0.1em;
}
.line-inner {
  display: block !important;
  transform: translateY(110%) !important;
  opacity: 0 !important;
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.line-inner.is-visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
  .line-inner { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* ---- Card reveal animation ---- */
.card-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .card-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

p { color: var(--text-secondary); line-height: 1.7; }

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* ---- Layout ---- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 4rem);
  position: relative;
  z-index: 1;
}

section { position: relative; z-index: 1; }

/* ---- Eyebrow ---- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.eyebrow-line {
  width: 32px;
  height: 0.5px;
  background: var(--accent);
  flex-shrink: 0;
}
.eyebrow-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Accent text ---- */
.accent { color: var(--accent); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-primary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn-primary:hover {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
}
.btn-primary:active { transform: scale(0.97); }

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-hover);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-outline:active { transform: scale(0.97); }

.btn-ghost {
  background: transparent;
  color: var(--accent);
  padding: 8px 0;
}
.btn-ghost:hover { color: var(--accent-hover); }

/* ---- Cards ---- */
.card {
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  padding: 24px;
  transition: all var(--transition);
  position: relative;
}
.card:hover {
  border-color: var(--border-accent);
  background: var(--bg-elevated);
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.card:hover::before { transform: scaleX(1); }

/* ---- Tags / Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0.5px solid var(--border-accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.badge-green  { border-color: #2d9e6840; color: #2d9e68; background: #2d9e6812; }
.badge-yellow { border-color: #c9920040; color: #c99200; background: #c9920012; }
.badge-red    { border-color: #b8404040; color: #b84040; background: #b8404012; }

/* ---- Difficulty indicators ---- */
.diff-easy   { color: #2d9e68; }
.diff-medium { color: #c99200; }
.diff-hard   { color: #b84040; }

/* ---- Copy button ---- */
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent-subtle);
  border: 0.5px solid var(--border-accent);
  color: var(--accent);
  cursor: pointer;
  transition: all var(--transition);
}
.copy-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.copy-btn.copied {
  background: #2d9e681a;
  border-color: #2d9e6840;
  color: #2d9e68;
}

/* ---- Prompt block ---- */
.prompt-block {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-left: 2px solid var(--accent);
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 12px;
}

/* ---- Divider ---- */
.divider {
  width: 100%;
  height: 0.5px;
  background: var(--border);
  margin: var(--section-gap) 0;
}

/* ---- Section header ---- */
.section-header {
  margin-bottom: clamp(32px, 5vw, 64px);
}

/* ---- Grid layouts ---- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-elevated); }
::-webkit-scrollbar-thumb { background: var(--border-hover); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---- Selection ---- */
::selection { background: var(--accent-subtle); color: var(--accent-hover); }

/* ---- Utility ---- */
.text-accent    { color: var(--accent); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-mono      { font-family: var(--font-mono); }
.text-upper     { text-transform: uppercase; letter-spacing: 0.1em; }
.fw-800         { font-weight: 800; }
.mt-sm  { margin-top: 8px; }
.mt-md  { margin-top: 16px; }
.mt-lg  { margin-top: 24px; }
.mt-xl  { margin-top: 40px; }
.mb-sm  { margin-bottom: 8px; }
.mb-md  { margin-bottom: 16px; }
.mb-lg  { margin-bottom: 24px; }
.flex   { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }


/* ================================================================
   PRINT STYLES — Evita cortes de página dentro de bloques
   ================================================================ */
@media print {

  /* Ocultar elementos de navegación y UI */
  #main-nav,
  #main-footer,
  .doc-breadcrumb,
  .doc-print-btn,
  .doc-toc,
  #back-to-top,
  .back-to-top { display: none !important; }

  /* Fondo limpio */
  body { background: white !important; color: #111 !important; }

  /* Layout de documento: una sola columna */
  .doc-layout { grid-template-columns: 1fr !important; }
  .doc-hero { padding-top: 24px !important; }

  /* Salto de página antes de cada sección h2 */
  .doc-content h2 {
    break-before: page;
    page-break-before: always;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Primera h2 no necesita salto de página */
  .doc-content h2:first-of-type {
    break-before: avoid;
    page-break-before: avoid;
  }

  /* Encabezados: nunca quedar solos al final de página */
  h2, h3, h4 {
    break-after: avoid;
    page-break-after: avoid;
    orphans: 3;
    widows: 3;
  }

  /* Bloques que NO deben cortarse entre páginas */
  .doc-table-wrap,
  .flujo-block,
  .caso-block,
  .stack-card,
  .platform-card,
  .roi-card,
  .risk-card,
  .regla-card,
  .phase-card,
  .phase-item,
  .callout,
  .callout-warn,
  .checklist,
  .formula,
  .prompt-block,
  .prompt-example,
  .prompt-inline,
  .ref-list,
  .steps-list li,
  .flujo-steps,
  .phase-timeline,
  tr,
  td,
  th {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Grids: mantener juntos cuando sea posible */
  .platform-grid,
  .roi-grid,
  .risk-grid,
  .reglas-grid,
  .phase-cards,
  .stack-minimal {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Márgenes de página */
  @page {
    margin: 18mm 15mm;
    size: A4 portrait;
  }

  /* Colores para impresión */
  .doc-badge,
  .diff-badge,
  .diff-inmediato,
  .diff-intermedio,
  .diff-avanzado,
  .badge {
    border: 0.5px solid #999 !important;
    background: #f0f0f0 !important;
    color: #333 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .callout,
  .callout-warn {
    border: 0.5px solid #999 !important;
    background: #f9f9f9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .prompt-block,
  .prompt-example,
  .prompt-inline {
    border: 0.5px solid #ccc !important;
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Texto legible */
  a { color: #111 !important; text-decoration: none !important; }
  p, li { color: #333 !important; }
  .text-accent { color: #111 !important; }
  .text-secondary { color: #444 !important; }
  .text-tertiary { color: #666 !important; }
}