:root {
  --tema-1: #2563eb;
  --tema-2: #16a34a;
  --tema-3: #d97706;
  --tema-4: #7c3aed;
  --tema-5: #dc2626;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background-color: #f8f9fb;
}

.hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
}

.modulo-card {
  border: none;
  border-radius: 14px;
  border-top: 5px solid #999;
  transition: transform .15s ease, box-shadow .15s ease;
}
.modulo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
}
.modulo-card.tema-1 { border-top-color: var(--tema-1); }
.modulo-card.tema-2 { border-top-color: var(--tema-2); }
.modulo-card.tema-3 { border-top-color: var(--tema-3); }
.modulo-card.tema-4 { border-top-color: var(--tema-4); }
.modulo-card.tema-5 { border-top-color: var(--tema-5); }

.modulo-icono {
  font-size: 2rem;
  color: #334155;
}

/* Tarjeta de fórmula + explicación, reutilizable en todos los módulos */
.formula-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 1.25rem;
}
.formula-card .formula {
  font-size: 1.1rem;
  font-family: "Cambria Math", Georgia, serif;
  background: #f1f5f9;
  padding: .5rem .75rem;
  border-radius: 8px;
  display: inline-block;
}

/* Semáforo de interpretación de resultados */
.semaforo-positivo { border-left: 5px solid #16a34a; background: #f0fdf4; }
.semaforo-negativo { border-left: 5px solid #dc2626; background: #fef2f2; }
.semaforo-neutro    { border-left: 5px solid #64748b; background: #f8fafc; }
.semaforo-positivo, .semaforo-negativo, .semaforo-neutro {
  padding: 1rem 1.25rem;
  border-radius: 10px;
}

@media (max-width: 576px) {
  .hero h1 { font-size: 1.8rem; }
}

/* ===== Módulo Reemplazo de Equipos: paleta más vistosa ===== */
.reemplazo-hero {
  background: linear-gradient(135deg, #b91c1c 0%, #7c2d12 60%, #422006 100%);
}

.herramienta-card {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
  border-bottom: 6px solid transparent;
}
.herramienta-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 28px rgba(0,0,0,.15);
}
.herramienta-1 { border-bottom-color: #ea580c; }
.herramienta-2 { border-bottom-color: #0891b2; }
.herramienta-icono {
  font-size: 2.4rem;
  background: linear-gradient(135deg, #ea580c, #b91c1c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.herramienta-2 .herramienta-icono {
  background: linear-gradient(135deg, #0891b2, #075985);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Paso numerado (wizard visual) usado en vida económica */
.paso-numero {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ea580c, #b91c1c);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* Tabla con fila destacada (mínimo CAE, n óptimo) */
.fila-optima {
  background: linear-gradient(90deg, #fef3c7, #fde68a) !important;
  font-weight: 700;
}
.fila-optima td { border-color: #f59e0b !important; }

.tabla-scroll { max-height: 360px; overflow-y: auto; }

/* ===== Contenedor fijo para gráficos Chart.js =====
   Chart.js con responsive:true necesita un contenedor con altura ya
   definida por CSS; si no la tiene, el canvas puede colapsar a 0px y
   el gráfico queda en blanco (sin ejes, sin nada). */
.chart-box {
  position: relative;
  height: 280px;
  width: 100%;
}
.chart-box canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ===== PWA: tarjeta flotante de instalación ===== */
.pwa-install-card {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1080;
  max-width: 360px;
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .22);
  border: 1px solid rgba(30, 58, 138, .14);
  backdrop-filter: blur(10px);
}

.pwa-install-card[hidden] {
  display: none !important;
}

.pwa-install-icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e3a8a, #16a34a);
  color: #fff;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.pwa-install-body strong {
  display: block;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: .25rem;
}

.pwa-install-body p {
  color: #475569;
  font-size: .9rem;
  line-height: 1.35;
}

.pwa-install-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

@media (max-width: 576px) {
  .pwa-install-card {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    max-width: none;
  }
}

/* ===== Experiencia didáctica: Reemplazo y VAN/TIR ===== */
.module-friendly { --module-ink:#172033; --module-soft:#f6f8fc; }
.text-white-75 { color:rgba(255,255,255,.78); }
.math-card { background:linear-gradient(145deg,#fff,#f7f9fd); border:1px solid #e4e9f2; border-radius:18px; padding:1rem 1.1rem; box-shadow:0 8px 24px rgba(15,23,42,.06); }
.math-card__header { display:flex; align-items:center; gap:.65rem; color:#24324a; }
.math-card__icon { width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:#e8eefc; color:#1e3a8a; }
.math-card__formula { margin:.85rem 0; padding:.8rem .65rem; min-height:72px; display:flex; align-items:center; justify-content:center; overflow-x:auto; background:#fff; border:1px solid #e7ebf2; border-radius:12px; color:#101828; font-size:1.02rem; }
.math-card__formula mjx-container { margin:.25rem 0 !important; }
.math-card__variables { font-size:.78rem; line-height:1.55; color:#536078; padding:.65rem .75rem; background:#eef3fb; border-radius:10px; margin-bottom:.7rem; }
.math-card__explanation { color:#4a556b; line-height:1.55; }
.learning-strip { display:flex; align-items:center; justify-content:center; gap:1rem; background:#fff; border:1px solid #e7ebf2; border-radius:18px; padding:1rem; box-shadow:0 6px 18px rgba(15,23,42,.05); }
.learning-strip>div { display:grid; grid-template-columns:2rem 1fr; column-gap:.6rem; align-items:center; min-width:0; }
.learning-strip span { grid-row:1/3; width:2rem; height:2rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#1e3a8a; color:#fff; font-weight:700; }
.learning-strip strong { color:#172033; line-height:1.1; }
.learning-strip small { color:#68758c; line-height:1.2; }
.learning-strip>i { color:#a6afbe; }
.friendly-form { border-radius:18px !important; background:#fff; }
.friendly-form .form-control,.friendly-form .form-select { border-radius:10px; min-height:44px; border-color:#d9e0eb; }
.friendly-form .form-control:focus,.friendly-form .form-select:focus { border-color:#5f7ecb; box-shadow:0 0 0 .2rem rgba(30,58,138,.1); }
.form-section-title { display:flex; align-items:center; gap:.5rem; font-weight:700; color:#27364e; margin-bottom:1rem; }
.form-text { line-height:1.35; }
.empty-result { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; border:2px dashed #dce3ee; border-radius:20px; background:#fafbfd; color:#6a768a; }
.empty-result>i { font-size:3rem; color:#a5b1c4; margin-bottom:.75rem; }
.empty-result h5 { color:#344157; }
.empty-result p { max-width:450px; margin-bottom:0; }
.metric-card { background:#fff; border:1px solid #e4e9f2; border-radius:16px; padding:.9rem .75rem; display:flex; flex-direction:column; text-align:center; justify-content:center; box-shadow:0 6px 16px rgba(15,23,42,.05); }
.metric-card span { color:#6a768a; font-size:.78rem; text-transform:uppercase; font-weight:700; letter-spacing:.04em; }
.metric-card strong { color:#172033; font-size:1.25rem; line-height:1.25; margin:.25rem 0; }
.metric-card small { color:#8791a2; font-size:.72rem; }
.result-block { margin-top:1rem; }
.result-block h6 { color:#59667b; text-transform:uppercase; letter-spacing:.04em; font-size:.75rem; font-weight:700; margin-bottom:.45rem; }
.result-highlight { border-radius:18px; background:linear-gradient(145deg,#fff,#fafcff); box-shadow:0 8px 22px rgba(15,23,42,.06); }
.result-intro,.decision-rule { display:flex; align-items:center; gap:.8rem; padding:.9rem 1rem; border-radius:14px; background:#edf5ff; color:#284264; }
.result-intro>i,.decision-rule>i { font-size:1.4rem; }
.result-intro div,.decision-rule div { display:flex; flex-direction:column; }
.result-intro small,.decision-rule span { color:#5e718b; }
.friendly-table { border-radius:12px; overflow:hidden; }
@media (max-width:767.98px) {
  .learning-strip { align-items:stretch; flex-direction:column; }
  .learning-strip>i { transform:rotate(90deg); align-self:center; }
  .math-card { padding:.85rem; }
  .math-card__formula { justify-content:flex-start; font-size:.94rem; }
  .metric-card strong { font-size:1.05rem; }
}
.friendly-module-card { border-radius:20px; }
.friendly-module-card h4 { color:#1d293d; }
.mini-math { min-height:62px; display:flex; align-items:center; justify-content:center; padding:.5rem; margin:1rem 0; border-radius:12px; background:#f7f9fc; border:1px solid #e7ebf2; color:#27364e; overflow-x:auto; }
.mini-math mjx-container { margin:0 !important; }
.module-link { display:inline-flex; align-items:center; gap:.4rem; color:#1e3a8a; font-weight:700; }
.concept-note { display:flex; gap:1rem; align-items:flex-start; padding:1rem 1.15rem; border-radius:16px; background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12; }
.concept-note>i { font-size:1.5rem; }
.concept-note p { color:#8b4b2d; }