/* =====================================================
   AI30 Lessons — Shared stylesheet (light theme)
   Scope: .lesson-ux (interactivo) + .lesson-ux-theory (teoría)
   Version: 1.2.0 (unificado y optimizado)
   ===================================================== */

/* ---------- Design tokens */
:root{
  --ai30-brand:#004b8d;
  --ai30-brand-900:#003b6e;
  --ai30-accent:#00a57e;
  --ai30-panel:#f5f7fa;
  --ai30-ink:#1f2933;
  --ai30-muted:#5b6772;
  --ai30-bg:#ffffff;

  --ai30-r:16px;
  --s1:6px; --s2:10px; --s3:14px; --s4:18px; --s5:24px; --s6:32px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --container-w:900px; /* cambia aquí si quieres 960 etc. */
}

/* ---------- Motion accessibility */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* =====================================================
   CONTENEDOR BASE (mismo ancho para ambos bloques)
   ===================================================== */
.lesson-ux,
.lesson-ux-theory{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  max-width:var(--container-w);
  margin:0 auto;
}

/* =====================================================
   INTERACTIVE LESSON (.lesson-ux)
   ===================================================== */
.lesson-ux{
  background:var(--ai30-bg);
  border-radius:18px;
  box-shadow:0 8px 25px rgba(0,0,0,.08);
  overflow:hidden;
  line-height:1.6;
  position:relative;
}
.lesson-ux *{ box-sizing:border-box; }
.lesson-ux p,.lesson-ux li{ color:var(--ai30-ink); margin:0 0 var(--s3); line-height:1.7; }
.lesson-ux h1{ color:var(--ai30-brand); margin:0 0 var(--s3); line-height:1.25; }
.lesson-ux h2{ color:var(--ai30-brand); margin:0 0 var(--s3); line-height:1.3; font-size:1.18rem; }
.lesson-ux h3{ color:var(--ai30-brand); margin:0 0 var(--s2); line-height:1.3; font-size:1.04rem; }

/* Links: subrayado normal en texto; NO en enlaces con imagen/ícono */
.lesson-ux a{ color:var(--ai30-brand); text-decoration:none; }
.lesson-ux a:hover{ text-decoration:underline; }
.lesson-ux a:has(img),
.lesson-ux a:has(.icon){ text-decoration:none !important; }
.lesson-ux a:has(img):hover,
.lesson-ux a:has(.icon):hover{ text-decoration:none !important; }
.lesson-ux a img{ vertical-align:middle; display:inline-block; }

/* Normaliza casing */
.lesson-ux button,.lesson-ux .options button,.lesson-ux .card,.lesson-ux p,.lesson-ux td{ text-transform:none !important; }

/* Breadcrumb */
.lesson-ux nav.lesson-breadcrumb{
  display:flex; align-items:center; gap:10px; background:#f5f7fb; padding:10px 18px 9px;
  border-bottom:1px solid rgba(0,0,0,.03); font-size:13.1px; color:#2c3a4d;
}
.lesson-ux .crumb-link{ color:var(--ai30-brand); font-weight:500; display:inline-flex; align-items:center; gap:6px; }

/* Header */
.lesson-ux .lesson-header{
  background:
    radial-gradient(circle at top, rgba(123,178,255,.28) 0%, transparent 55%),
    radial-gradient(circle at bottom right, rgba(43,214,160,.16) 0%, transparent 60%);
  padding:var(--s6) var(--s6) var(--s4);
  border-bottom:1px solid rgba(0,0,0,.03);
}
.lesson-ux .lesson-tag{ display:inline-block; background:#e5f7f1; color:#04624b; font-weight:600; font-size:12.8px; padding:4px 12px 5px; border-radius:999px; margin:0 0 var(--s2); }
.lesson-ux .lesson-title{ font-size:2rem; margin:0 0 var(--s2); }
.lesson-ux .lesson-sub{ font-size:.96rem; color:var(--ai30-muted); margin:0; }

/* Progress */
.lesson-ux .progress-wrap{ padding:0 var(--s6) var(--s4); }
.lesson-ux .progress-bar{ height:10px; background:#e5e9ef; border-radius:999px; overflow:hidden; }
.lesson-ux .progress{ height:10px; background:var(--ai30-accent); width:0%; transition:width .3s ease; }

/* Phases */
.lesson-ux .phase{ display:none; padding:var(--s6) var(--s6) var(--s4); }
.lesson-ux .phase.active{ display:block; animation:ai30-fade .2s ease; }
@keyframes ai30-fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* Cards & rhythm */
.lesson-ux .card{ background:var(--ai30-panel); border-radius:var(--ai30-r); padding:var(--s4) var(--s4); margin:var(--s4) 0; }
.lesson-ux .card > h3{ margin-bottom:var(--s2); }
.lesson-ux .phase > :last-child{ margin-bottom:0 !important; }

/* Tables (scrollable on small screens) */
.lesson-ux .table-scroll{ overflow:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
.lesson-ux table.responsive-table{
  width:100%; border-collapse:collapse; text-align:left; background:#fff; min-width:560px;
}
.lesson-ux table.responsive-table th,
.lesson-ux table.responsive-table td{
  padding:12px 10px; border:1px solid #dee3ea; color:var(--ai30-ink); vertical-align:middle;
}
.lesson-ux table.responsive-table th{ background:var(--ai30-brand); color:#fff; font-weight:700; }

/* Buttons */
.lesson-ux .btn{
  background:var(--ai30-brand); color:#fff; border:none; padding:13px 20px; border-radius:14px; cursor:pointer; font-size:16px;
  margin:var(--s2) var(--s1); transition:transform .12s ease, background .2s ease; box-shadow:0 6px 18px rgba(0,0,0,.06); touch-action:manipulation;
}
.lesson-ux .btn:hover{ background:var(--ai30-brand-900); transform:translateY(-1px); }
.lesson-ux .btn:active{ transform:translateY(0); }
.lesson-ux .btn:focus-visible{ outline:3px solid #9ecbff; outline-offset:2px; }
.lesson-ux .btn-secondary{ background:#eef4ff; color:var(--ai30-brand); }
.lesson-ux .btn-area{ text-align:right; margin-top:var(--s3); }

/* Audio */
.lesson-ux .audio-btn{
  background:#e8f8f3; border:none; border-radius:999px; cursor:pointer; font-size:16px;
  padding:8px 10px; margin-left:6px; color:var(--ai30-brand);
}
.lesson-ux .audio-btn:hover{ background:#d3f2e8; }
.lesson-ux .audio-btn:focus-visible{ outline:2px solid #a7f3d0; outline-offset:2px; }

/* Inputs / feedback */
.lesson-ux label{ display:block; font-weight:700; margin:var(--s3) 0 var(--s2); color:var(--ai30-brand); }
.lesson-ux input[type="text"], .lesson-ux textarea{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid #cfd7e3; font-size:16px; background:#fff; color:var(--ai30-ink);
}
.lesson-ux input[type="text"]::placeholder, .lesson-ux textarea::placeholder{ color:#95a1b2; }
.lesson-ux .write-input{ min-height:120px; resize:vertical; }
.lesson-ux .feedback{ margin-top:var(--s2); font-weight:700; min-height:22px; }

/* Options (MCQ) */
.lesson-ux .options button{
  display:block; width:100%; padding:14px; margin:10px 0; border-radius:14px; border:2px solid #dbe2ec; background:#f9fbff; cursor:pointer;
  font-size:16px; color:var(--ai30-brand); font-weight:700; text-align:left; transition:transform .12s ease, background .2s ease, border-color .2s ease;
}
.lesson-ux .options button:hover{ background:#eef4ff; transform:translateY(-1px); }
.lesson-ux .options button:focus-visible{ outline:3px solid #9ecbff; }
.lesson-ux .options button.correct{ background:#d7f8e5; border-color:var(--ai30-accent); color:#0b4a3b; }
.lesson-ux .options button.incorrect{ background:#fde3e3; border-color:#c33; color:#4b0000; }

/* Blockquote */
.lesson-ux blockquote{
  background:#f0f7ff; padding:var(--s3) var(--s4); border-left:6px solid var(--ai30-brand);
  margin:var(--s4) 0; border-radius:12px; color:#0f2744;
}

/* Mobile "to be" cards */
.lesson-ux .tobe-cards{ display:flex; flex-direction:column; gap:var(--s3); }
.lesson-ux .tobe-card{ background:var(--ai30-panel); border-radius:var(--ai30-r); padding:var(--s3) var(--s4); }
.lesson-ux .tobe-card-title{ font-weight:800; color:var(--ai30-brand); margin-bottom:var(--s1); }
.lesson-ux .tobe-card-en{ display:flex; align-items:center; gap:8px; font-weight:700; }
.lesson-ux .tobe-card-es{ font-size:15px; color:#333; }

/* Footer navigation (prev/next) */
.lesson-ux .lesson-footer-nav{
  display:flex; gap:var(--s3); margin-top:var(--s5); background:var(--ai30-panel);
  border-radius:18px; padding:var(--s3); align-items:stretch;
}
.lesson-ux .footer-btn{
  display:flex; align-items:center; gap:12px; background:#ffffff; border:1px solid #cfd7e3; border-radius:16px; padding:12px 16px;
  color:var(--ai30-brand); text-decoration:none; box-shadow:0 6px 14px rgba(0,0,0,.04); flex:1; min-height:64px;
}
.lesson-ux .footer-btn:hover{
  background:var(--ai30-brand); color:#fff; border-color:transparent; transform:translateY(-1px); text-decoration:none;
}
.lesson-ux .footer-btn .icon{ font-size:20px; line-height:1; }
.lesson-ux .footer-btn small{ display:block; font-size:12px; line-height:1.1; opacity:.9; margin-bottom:4px; }
.lesson-ux .footer-btn strong{ display:block; font-size:16px; line-height:1.15; }

/* Bottom sticky nav */
.lesson-ux .bottom-nav{
  position:sticky; bottom:0; left:0; right:0; padding:10px var(--s4) calc(10px + var(--safe-bottom));
  background:rgba(255,255,255,.97); backdrop-filter: blur(10px);
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(0,0,0,.06); z-index:999;
}
.lesson-ux .bottom-nav .btn{ flex:1; margin:0; min-height:44px; }

/* Helpers */
.lesson-ux .exercise-card .answers-wrap{ margin-top:var(--s2); }
.lesson-ux #recorder.card{ padding-bottom:var(--s3); }
.lesson-ux #recorder .btn{ margin:0 var(--s1); }

/* Responsive */
.lesson-ux .desktop-only{ display:block; }
.lesson-ux .mobile-only{ display:none; }

@media (max-width:650px){
  .lesson-ux .lesson-header{ padding:var(--s5) var(--s5) var(--s3); }
  .lesson-ux .lesson-title{ font-size:1.7rem; }
  .lesson-ux .progress-wrap{ padding:0 var(--s5) var(--s3); }
  .lesson-ux .phase{ padding:var(--s5) var(--s5) var(--s4); }
  .lesson-ux .card{ padding:var(--s3) var(--s3); }
  .lesson-ux .lesson-footer-nav{ flex-direction:column; }
  .lesson-ux .footer-btn{ width:100%; }
  .lesson-ux .desktop-only{ display:none; }
  .lesson-ux .mobile-only{ display:block; }
}

/* =====================================================
   THEORY PAGE (.lesson-ux-theory) — misma “caja” que interactivo
   ===================================================== */
.lesson-ux-theory{
  background:var(--ai30-bg);
  border-radius:18px;
  box-shadow:0 8px 25px rgba(0,0,0,.08);
  padding:var(--s6) var(--s6) var(--s5);
  margin-top:24px;
  margin-bottom:60px;
  line-height:1.65;

  /* Rendimiento: evita trabajo hasta que el usuario llegue a esta sección */
  content-visibility:auto;
  contain-intrinsic-size:1000px;
}
.lesson-ux-theory h1,.lesson-ux-theory h2,.lesson-ux-theory h3{ color:var(--ai30-brand); }
.lesson-ux-theory h2{ font-size:1.18rem; line-height:1.3; margin:0 0 var(--s3); }
.lesson-ux-theory h3{ font-size:1.04rem; line-height:1.3; margin:0 0 var(--s2); }
.lesson-ux-theory p,.lesson-ux-theory li{ color:var(--ai30-ink); }
.lesson-ux-theory a{ color:var(--ai30-brand); text-decoration:underline; }
.lesson-ux-theory a:has(img),
.lesson-ux-theory a:has(.icon){ text-decoration:none !important; }
.lesson-ux-theory .box{
  background:#f5f7fa; border-radius:14px; padding:16px 16px 14px; margin-bottom:16px;
  box-shadow:0 1px 12px rgba(0,0,0,0.015);
}
.lesson-ux-theory .tag{
  display:inline-block; background:#e9f2ff; color:#0052a1; font-size:12.5px; padding:3px 10px 4px; border-radius:999px; margin-bottom:7px;
}

/* Tablas (con scroll en móvil) */
.lesson-ux-theory .table-wrap{ width:100%; border-radius:12px; overflow:auto; -webkit-overflow-scrolling:touch; margin-top:10px; }
.lesson-ux-theory table{ width:100%; border-collapse:collapse; min-width:560px; background:#fff; }
.lesson-ux-theory th,.lesson-ux-theory td{ border:1px solid #dbe2ec; padding:9px 10px; text-align:left; }
.lesson-ux-theory th{ background:#004b8d; color:#fff; font-weight:600; white-space:nowrap; }

.lesson-ux-theory .mobile-block{ display:none; }
.lesson-ux-theory .m-card{ background:#ffffff; border:1px solid #e1e6ee; border-radius:12px; padding:10px 13px 8px; margin-bottom:10px; }
.lesson-ux-theory .m-title{ font-weight:600; color:#004b8d; margin-bottom:4px; display:flex; gap:6px; align-items:center; }
.lesson-ux-theory .m-en{ font-weight:500; margin-bottom:3px; }
.lesson-ux-theory .m-es{ font-size:13.5px; color:#506070; }

.lesson-ux-theory details{ background:#eef2f7; border-radius:12px; padding:10px 12px 7px; margin-bottom:10px; }
.lesson-ux-theory summary{ cursor:pointer; font-weight:600; color:#0f2744; list-style:none; display:flex; gap:6px; align-items:center; }
.lesson-ux-theory summary::-webkit-details-marker{ display:none; }
.lesson-ux-theory summary::before{
  content:"+"; width:20px; height:20px; border-radius:7px; background:#fff; display:flex; align-items:center; justify-content:center;
  color:#004b8d; font-weight:700; font-size:13px;
}
.lesson-ux-theory details[open] summary::before{ content:"–"; }

.lesson-ux-theory ul{ margin:3px 0 6px 18px; }
.lesson-ux-theory li{ margin-bottom:5px; }

/* Nav de teoría (coherente con el interactivo) */
.lesson-ux-theory .nav-box{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:var(--s5) 0 0;
}
.lesson-ux-theory .nav-box a.btn{
  background:linear-gradient(180deg,#0a4fa6 0%,#084789 100%);
  color:#fff !important; text-decoration:none !important; border:none; border-radius:14px;
  padding:12px 24px; font-weight:600; box-shadow:0 6px 16px rgba(10,79,166,.18);
  transition:all .2s ease; display:inline-flex; align-items:center; justify-content:center;
  font-size:15.5px; line-height:1.2; min-width:200px;
}
.lesson-ux-theory .nav-box a.btn:hover{
  background:linear-gradient(180deg,#0c59b9 0%,#0a4fa6 100%);
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(10,79,166,.25);
}
.lesson-ux-theory .nav-box a.btn:active{ transform:translateY(0); box-shadow:0 4px 10px rgba(10,79,166,.18); }
.lesson-ux-theory .nav-box a.btn:first-child{
  background:linear-gradient(180deg,#f1f5ff 0%,#e8eefc 100%);
  color:#0a4fa6 !important; border:1px solid #d5def4; box-shadow:0 4px 10px rgba(10,24,46,.08);
}
.lesson-ux-theory .nav-box a.btn:first-child:hover{ background:#e6edfb; transform:translateY(-1px); }

/* ---------- Info-cards (móvil Fase 1) */
.info-cards{ display:flex; flex-direction:column; gap:16px; margin-top:16px; }
.info-card{ background:var(--cc-panel,#f5f8fa); border-radius:12px; padding:14px 16px; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.info-card-title{ font-weight:600; color:var(--cc-primary,#002b5c); margin-bottom:6px; font-size:.95rem; }
.info-card-en{ font-weight:500; margin-bottom:4px; color:#111; display:flex; align-items:center; justify-content:space-between; }
.info-card-es{ font-size:.9rem; color:var(--cc-muted,#5f6b7a); }
.info-card button.audio-btn{ margin-left:8px; flex-shrink:0; }

/* Display switches */
@media (min-width:768px){ .mobile-only{ display:none !important; } }
@media (max-width:767px){ .desktop-only{ display:none !important; } }

/* --------- Responsive teoría: mismos gutters que el interactivo */
@media (max-width:650px){
  .lesson-ux-theory{
    padding:var(--s5) var(--s5) var(--s4);
    margin-top:18px;
  }
}