/**
 * css/views/tutorial.css — la vista del Centro de Aprendizaje.
 * =====================================================================
 * Una hoja por vista, como el resto del proyecto. El escenario de los
 * recorridos (fondo, hueco, tarjeta) NO está acá: vive en css/guias.css,
 * porque es un componente global que puede aparecer sobre cualquier
 * vista, no solo sobre esta.
 * =====================================================================
 */

.tut-header{ margin:6px 0 22px; max-width:640px; }
.tut-titulo{
  font-family:var(--font-d); font-size:1.5rem; font-weight:700;
  letter-spacing:-.01em; margin-bottom:8px;
}
.tut-bajada{ font-size:.88rem; color:var(--muted); line-height:1.6; }

.tut-sec{ margin-bottom:28px; }
.tut-sec-t{
  font-family:var(--font-d); font-size:.72rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--faint);
  margin-bottom:12px;
}

.tut-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
}

.tut-card{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px;
  transition:border-color .15s, transform .15s;
}
/* Solo las recorribles reaccionan: una tarjeta informativa que se
   levanta al pasar el mouse promete un click que no existe. */
.tut-card.recorrible:hover{
  border-color:color-mix(in srgb, var(--accent) 32%, transparent);
  transform:translateY(-1px);
}

.tut-ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--card-2); border:1px solid var(--line-soft);
  font-size:1.15rem;
}
.tut-card.recorrible .tut-ico{
  background:var(--accent-bg);
  border-color:color-mix(in srgb, var(--accent) 20%, transparent);
}

.tut-cuerpo{ flex:1; min-width:0; }
.tut-t{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--font-d); font-size:.92rem; font-weight:600; line-height:1.35;
  margin-bottom:5px;
}
.tut-p{ font-size:.81rem; color:var(--muted); line-height:1.55; }

.tut-nuevo{
  flex:0 0 auto; padding:2px 7px; border-radius:999px;
  background:var(--accent-bg); color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  font-family:var(--font-b); font-size:.6rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
}

.tut-meta{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin-top:10px; font-size:.7rem; color:var(--faint);
}
.tut-sep{ color:var(--line); }
.tut-ok{ color:var(--verde); font-weight:600; }

.tut-acciones{ flex:0 0 auto; display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.tut-btn{
  height:34px; padding:0 15px; border-radius:10px;
  background:var(--accent); color:#0B1020;
  font-family:var(--font-d); font-size:.78rem; font-weight:700; white-space:nowrap;
  transition:filter .15s;
}
.tut-btn:hover{ filter:brightness(1.08); }
.tut-mini{
  height:26px; border-radius:8px; padding:0 8px;
  color:var(--faint); font-size:.68rem; font-weight:600;
  transition:color .15s;
}
.tut-mini:hover{ color:var(--text); }

.tut-vacio{
  padding:36px; text-align:center; color:var(--faint); font-size:.85rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
}

/* En pantallas angostas la columna de acciones pasa abajo del texto: al
   lado, el botón le come el ancho al resumen y quedan tres palabras por
   renglón. */
@media (max-width:560px){
  .tut-grid{ grid-template-columns:1fr; }
  .tut-card{ flex-wrap:wrap; }
  .tut-acciones{ flex-direction:row; align-items:center; width:100%; padding-left:54px; }
}