/* Guia de uso: introduccion, instalacion en el celular y videos tutoriales. */

.guia-contenido { max-width: 960px; }
.guia-nota { font-size: 13.5px; margin: 0 0 14px; max-width: 70ch; }
.tarjeta + .guia-nota { margin-top: 12px; }

.guia-bienvenida { display: flex; gap: 18px; align-items: flex-start; border-left: 4px solid var(--marca); }
.guia-bienvenida img { flex: none; border-radius: 12px; }
.guia-bienvenida h2 { font-size: 19px; font-weight: 800; margin: 0 0 6px; }
.guia-bienvenida p { font-size: 14px; line-height: 1.6; color: var(--texto-suave); margin: 0; }

/* Recorrido recomendado: tarjetas numeradas. */
.guia-recorrido { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.guia-recorrido li { display: flex; gap: 14px; align-items: flex-start; }
.guia-recorrido-num, .guia-paso-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--marca); color: #fff; font-weight: 800; font-size: 14px;
}
.guia-recorrido-cuerpo { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.guia-recorrido-cuerpo h4 { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; margin: 3px 0 0; }
.guia-recorrido-cuerpo h4 svg { color: var(--marca-fuerte); flex: none; }
.guia-recorrido-cuerpo p { font-size: 13px; line-height: 1.55; color: var(--texto-suave); margin: 0; }

.guia-consejos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.guia-consejos li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; }
.guia-consejos li > svg { flex: none; margin-top: 2px; color: var(--exito); }

.guia-atajos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 28px; }
.guia-atajo {
  display: flex; gap: 14px; align-items: center; text-align: left; cursor: pointer; font: inherit; color: inherit;
  border: 1px solid var(--borde); transition: border-color .15s, transform .15s;
}
.guia-atajo:hover { border-color: var(--marca); }
.guia-atajo > svg { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--marca-suave); color: var(--marca-fuerte); box-sizing: border-box; }
.guia-atajo .tenue { font-size: 12.5px; }

/* Instalacion: pasos numerados. */
.guia-subtabs { margin-bottom: 16px; }
.guia-pasos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.guia-pasos li { display: flex; gap: 14px; align-items: flex-start; }
.guia-pasos p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; }
.guia-ico { vertical-align: -3px; padding: 2px; border: 1px solid var(--borde-fuerte); border-radius: 5px; box-sizing: content-box; }
.guia-instalar-directo { align-items: center; margin-bottom: 14px; }
.guia-instalar-directo > span { flex: 1; }

/* Videos. */
.guia-categoria + .guia-categoria { margin-top: 8px; }
.guia-categoria .seccion-titulo:first-child { margin-top: 0; }
.guia-contenido:has(.guia-videos) { max-width: 1240px; }
.guia-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px 22px; }
/* Sin caja: la miniatura grande es la protagonista; debajo, solo categoria y titulo. */
.guia-video { display: flex; flex-direction: column; gap: 10px; }
.guia-video-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); margin-top: 2px; }
.guia-video-meta svg { flex: none; }
.guia-video h4 { font-size: 16px; font-weight: 700; line-height: 1.35; margin: 0; }
.guia-video-marco {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--borde);
  border-radius: 18px; overflow: hidden; background: var(--grafito); cursor: pointer;
  box-shadow: 0 6px 18px rgb(0 0 0 / .14); transition: transform .2s, box-shadow .2s;
}
button.guia-video-marco:hover, button.guia-video-marco:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px rgb(0 0 0 / .22); }
.guia-video-marco img, .guia-video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.guia-video-play {
  position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgb(215 25 32 / .92); color: #fff;
  box-shadow: 0 4px 14px rgb(0 0 0 / .35); transition: transform .15s;
}
button.guia-video-marco:hover .guia-video-play, button.guia-video-marco:focus-visible .guia-video-play { transform: scale(1.1); }

/* Panel del SUPERADMIN: formulario con vista previa y lista de videos con miniatura. */
.guia-admin-form { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px 18px; align-items: start; }
.guia-admin-form-par { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 14px; }
.guia-admin-fila { display: flex; gap: 14px; align-items: flex-start; }
.guia-admin-mini { flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: var(--radio-sm); object-fit: cover; background: var(--grafito); }
.guia-admin-info { flex: 1; min-width: 0; }
.guia-admin-acciones { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }

@media (max-width: 640px) {
  .guia-bienvenida { flex-direction: column; gap: 12px; }
  .guia-bienvenida img { width: 44px; height: 44px; }
  .guia-recorrido, .guia-videos { grid-template-columns: 1fr; }
  .guia-admin-form { grid-template-columns: 1fr; }
  .guia-admin-form #gv-vista-previa { order: -1; max-width: 260px; }
  .guia-admin-fila { flex-wrap: wrap; }
  .guia-admin-mini { width: 96px; }
  .guia-admin-acciones { width: 100%; }
}