/* =====================================================================
   HORUS — Componentes reutilizables (tema oscuro editorial)
   ===================================================================== */

/* ====== Tarjeta RED ====== */
.red-card { background: var(--card-bg); border: 1px solid var(--linea); border-radius: var(--radio-md); display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; overflow: hidden; position: relative; }
.red-thumb { height: 130px; border-bottom: 1px solid var(--linea); position: relative; background: var(--card-bg-alt); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.red-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; filter: saturate(.9); }
.red-card:hover .red-thumb img { transform: scale(1.06); }
.red-formato-icon { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: rgba(14,17,32,.75); backdrop-filter: blur(4px); border: 1px solid var(--linea); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--border-color); z-index: 2; }
.red-body { padding: 16px; display: flex; flex-direction: column; flex-grow: 1; }
.red-lab-tag { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 10px; border-radius: 12px; width: fit-content; margin-bottom: 10px; color: #10131f; }
.red-titulo { font-weight: 600; font-size: .95rem; margin-bottom: 8px; line-height: 1.3; color: var(--border-color); }
.red-meta { margin-top: auto; font-size: .75rem; font-weight: 500; color: var(--texto-muted); display: flex; justify-content: space-between; align-items: center; }
.red-vistas { background: var(--card-bg-alt); padding: 2px 9px; border-radius: 8px; font-weight: 600; }
.red-exclusivo-overlay { position: absolute; inset: 0; background: rgba(14,17,32,.92); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px; gap: 6px; z-index: 5; }
.red-exclusivo-overlay i { font-size: 1.8rem; color: var(--accent-lime); }

/* ====== Tarjeta RUTA ====== */
.ruta-card { background: var(--card-bg); border: 1px solid var(--linea); border-radius: var(--radio-md); display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: inherit; }
.ruta-portada { height: 150px; border-bottom: 1px solid var(--linea); background: linear-gradient(135deg, var(--card-bg-alt), var(--bg-color)); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ruta-portada img { width: 100%; height: 100%; object-fit: cover; }
.ruta-portada .conteo-reds { position: absolute; bottom: 8px; right: 8px; background: rgba(14,17,32,.75); backdrop-filter: blur(4px); color: #fff; font-size: .7rem; font-weight: 600; padding: 4px 11px; border-radius: 20px; border: 1px solid var(--linea); }
.ruta-body { padding: 18px; display: flex; flex-direction: column; flex-grow: 1; gap: 8px; }
.ruta-titulo { font-weight: 600; font-size: 1.05rem; line-height: 1.3; font-family: 'Space Grotesk', sans-serif; color: var(--border-color); }
.ruta-progreso-bar { height: 8px; background: var(--card-bg-alt); border-radius: 20px; overflow: hidden; }
.ruta-progreso-bar > span { display: block; height: 100%; background: var(--accent-lime); }

/* ====== Insignias ====== */
.insignia-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.insignia-icono { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--linea); box-shadow: 0 14px 30px -10px var(--shadow-color); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #10131f; }
.insignia-icono.bloqueada { background: var(--card-bg-alt) !important; color: var(--texto-tenue); filter: grayscale(1); opacity: .55; box-shadow: none; }
.insignia-nombre { font-weight: 600; font-size: .85rem; color: var(--border-color); }

/* ====== Barra de puntos / nivel ====== */
.chip-puntos { background: var(--card-bg-alt); border: 1px solid var(--linea); color: var(--accent-lime); font-weight: 700; padding: 6px 14px; border-radius: 50px; font-size: .82rem; display: inline-flex; align-items: center; gap: 6px; }
.chip-nivel { background: var(--accent-yellow); color: #10131f; font-weight: 700; padding: 6px 14px; border-radius: 50px; font-size: .82rem; }

/* ====== Visor de contenido ====== */
.visor-header { border-bottom: 1px solid var(--linea); background: var(--card-bg); padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; }
.visor-cerrar { background: var(--accent-red); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: pointer; }
.visor-iframe-wrap { position: relative; width: 100%; border-radius: var(--radio-md); overflow: hidden; }
.visor-iframe-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.visor-video { padding-bottom: 56.25%; height: 0; }
.visor-doc { height: 80vh; }

/* ====== Evaluaciones: quiz ====== */
.quiz-pregunta { background: var(--card-bg); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 22px; margin-bottom: 18px; color: var(--border-color); }
.quiz-opcion { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--linea); border-radius: var(--radio-sm); margin-bottom: 8px; cursor: pointer; font-weight: 500; background: var(--card-bg-alt); color: var(--border-color); transition: all .15s ease; }
.quiz-opcion:hover { border-color: var(--linea-fuerte); background: #262c46; }
.quiz-opcion.seleccionada { background: rgba(215, 242, 76, .14); border-color: var(--accent-lime); color: var(--accent-lime); }
.quiz-opcion input { display: none; }
.quiz-resultado-correcto { background: rgba(79, 214, 166, .14) !important; border-color: var(--exito) !important; color: var(--exito); }
.quiz-resultado-incorrecto { background: rgba(255, 107, 94, .14) !important; border-color: var(--accent-red) !important; color: var(--accent-red); }

/* ====== Evaluaciones: sopa de letras ====== */
.sopa-grid { display: grid; gap: 4px; user-select: none; }
.sopa-celda { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-weight: 700; border: 1px solid var(--linea); background: var(--card-bg-alt); color: var(--border-color); border-radius: 6px; cursor: pointer; font-size: .95rem; }
.sopa-celda.seleccionada { background: rgba(255, 200, 87, .3); border-color: var(--accent-yellow); }
.sopa-celda.encontrada { background: var(--exito); border-color: var(--exito); color: #10131f; }
.sopa-lista-palabras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sopa-palabra { padding: 5px 13px; border: 1px solid var(--linea); border-radius: 20px; font-weight: 600; font-size: .8rem; color: var(--texto-muted); }
.sopa-palabra.encontrada { background: var(--exito); border-color: var(--exito); color: #10131f; text-decoration: line-through; }

/* ====== Credencial digital ====== */
.credencial-card { background: var(--card-bg); border: 1px solid var(--linea); border-radius: 28px; box-shadow: 0 24px 60px -16px var(--shadow-color); padding: 44px; position: relative; overflow: hidden; color: var(--border-color); }
.credencial-sello { width: 108px; height: 108px; border-radius: 50%; border: 2px solid var(--accent-lime); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--accent-lime); background: var(--card-bg-alt); margin: 0 auto 16px; }
.credencial-codigo { font-family: 'Space Grotesk', monospace; font-weight: 700; letter-spacing: 2px; background: var(--card-bg-alt); color: var(--accent-lime); padding: 7px 16px; border-radius: 8px; border: 1px dashed var(--linea-fuerte); display: inline-block; }