/* ============================================================
   JICA LABS — estilos de la sección Aprende
   Se carga después de /css/style.css y reutiliza sus variables.
   ============================================================ */

/* ---------- Listado de tutoriales ---------- */
.tut-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

.tut-card{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; text-decoration:none; color:inherit;
  transition:transform .2s, border-color .2s, background .2s;
}
.tut-card:hover{ transform:translateY(-4px); border-color:#2d3948; background:var(--card-hi); }
.tut-num{
  font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  color:var(--accent); margin-bottom:14px;
}
.tut-card h3{ margin:0 0 8px; font-size:1.18rem; font-weight:750; letter-spacing:-.02em; }
.tut-card p{ margin:0 0 18px; color:var(--muted); font-size:.93rem; flex:1; }
.tut-meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tut-nivel{
  font-size:.7rem; font-weight:700; letter-spacing:.08em; padding:3px 10px; border-radius:99px;
  background:rgba(52,162,253,.14); border:1px solid rgba(52,162,253,.35); color:var(--accent);
}
.tut-min{ font-size:.78rem; color:var(--muted); }

/* Aviso de cámara: en ámbar para que destaque sobre el azul del nivel
   y se lea como advertencia antes de entrar, no como una etiqueta más */
.tut-camara{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.7rem; font-weight:700; letter-spacing:.06em;
  padding:3px 10px; border-radius:99px;
  background:rgba(255,210,63,.13); border:1px solid rgba(255,210,63,.42); color:#ffd23f;
}

/* ---------- Página de tutorial ---------- */
.tut{ max-width:820px; margin:0 auto; padding:52px 0 30px; }
.tut-volver{
  display:inline-flex; align-items:center; gap:7px; color:var(--muted);
  font-size:.88rem; margin-bottom:26px; transition:color .18s;
}
.tut-volver:hover{ color:var(--text); }
.tut h1{ font-size:clamp(1.9rem,5vw,2.7rem); letter-spacing:-.035em; line-height:1.1; margin:0 0 14px; }
.tut .intro{ font-size:1.06rem; color:var(--muted); margin:0 0 8px; }

.paso{ margin:44px 0 0; }
.paso h2{
  font-size:1.25rem; font-weight:750; letter-spacing:-.02em; margin:0 0 12px;
  display:flex; align-items:center; gap:12px;
}
.paso h2::before{
  content:attr(data-n); flex:none;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#04122b; font-size:.85rem; font-weight:800;
}
.paso p{ color:var(--muted); margin:0 0 16px; }
.paso p strong{ color:var(--text); font-weight:650; }
.paso code{
  font-family:var(--mono); font-size:.88em; padding:2px 6px; border-radius:5px;
  background:var(--bg-soft); border:1px solid var(--line); color:var(--accent-2);
}

/* Caja de "pruébalo tú" */
.reto{
  margin:22px 0 0; padding:18px 20px; border-radius:13px;
  background:rgba(140,253,253,.06); border:1px solid rgba(140,253,253,.22);
}
.reto b{ color:var(--accent-2); display:block; margin-bottom:6px; font-size:.82rem; letter-spacing:.08em; }
.reto p{ margin:0; font-size:.93rem; }

/* ---------- Editor de código en vivo ---------- */
.pg{
  margin:18px 0 0; border:1px solid var(--line); border-radius:13px;
  overflow:hidden; background:var(--bg-soft);
}
.pg-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px; background:var(--card); border-bottom:1px solid var(--line);
}
.pg-tag{ font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.14em; color:var(--muted); }
.pg-btn{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  font:inherit; font-size:.78rem; padding:5px 12px; border-radius:8px; cursor:pointer;
  transition:border-color .18s, color .18s;
}
.pg-btn:hover{ border-color:var(--accent); color:var(--accent); }

.pg-code{
  display:block; width:100%; border:0; outline:0; resize:none;
  background:var(--bg-soft); color:#d7e3f4;
  font-family:var(--mono); font-size:.86rem; line-height:1.65;
  padding:16px; tab-size:2; overflow:auto;
}
.pg-code:focus{ background:#0a1020; }

.pg-out{ border-top:1px solid var(--line); background:#0b1220; }
.pg-frame{ display:block; width:100%; height:280px; border:0; }
.pg[data-alto="alto"] .pg-frame{ height:420px; }
.pg[data-alto="bajo"] .pg-frame{ height:120px; }
.pg[data-alto="medio"] .pg-frame{ height:190px; }

/* ---------- Módulos del temario ---------- */
.modulo{ margin-bottom:52px; }
.modulo-head{ margin-bottom:20px; padding-left:14px; border-left:3px solid var(--accent); }
.modulo-head h2{ margin:0 0 4px; font-size:1.3rem; font-weight:750; letter-spacing:-.02em; }
.modulo-head p{ margin:0; color:var(--muted); font-size:.92rem; }

/* Tarjeta de tutorial aún no escrito */
.tut-card.pronto{ border-style:dashed; background:transparent; cursor:default; }
.tut-card.pronto:hover{ transform:none; background:transparent; border-color:var(--line); }
.tut-card.pronto h3, .tut-card.pronto p{ opacity:.55; }

/* Tabla comparativa (usada en "¿qué lenguaje?") */
.tabla{ width:100%; border-collapse:collapse; margin:18px 0 0; font-size:.92rem; }
.tabla th, .tabla td{ padding:11px 13px; text-align:left; border-bottom:1px solid var(--line); }
.tabla th{ color:var(--text); font-weight:650; font-size:.84rem; letter-spacing:.03em; }
.tabla td{ color:var(--muted); }
.tabla tr:last-child td{ border-bottom:0; }
.tabla-wrap{ overflow-x:auto; }

/* ---------- Navegación entre tutoriales ---------- */
.tut-nav{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:56px; padding-top:26px; border-top:1px solid var(--line);
}

@media (max-width:720px){
  .tut{ padding:34px 0 20px; }
  .paso{ margin-top:34px; }
  .pg-frame{ height:230px; }
  .pg-code{ font-size:.8rem; }
}