/* Rediseño de la página de vídeo (Opción 3 — Ruta de aprendizaje). Todo queda bajo el ámbito ".videoV2" para no afectar a otras páginas que reutilizan los mismos elementos (blockRegistro, cajaMaterial, foroVideo...). Los nombres de clase/id que ya usa el JS existente (videoTema, active2, empezado, completo, boltActive, #lines, navegaLecciones...) se conservan intactos; aquí solo se re-colorea/re-compone visualmente. */ .videoV2 { --v2-bg: #f5f7fa; --v2-bg-raised: #ffffff; --v2-bg-inset: #eef1f5; --v2-ink: #16202b; --v2-ink-dim: #5b6b7a; --v2-ink-faint: #8b98a4; --v2-rule: #e1e7ec; --v2-accent: #2f5fdb; --v2-accent-ink: #ffffff; --v2-accent-wash: #eaf0fe; --v2-good: #1f9d63; --v2-locked: #c9702e; --v2-radius: 10px; } @media (prefers-color-scheme: dark) { .videoV2 { --v2-bg: #10151c; --v2-bg-raised: #171e27; --v2-bg-inset: #1c2430; --v2-ink: #eef2f6; --v2-ink-dim: #93a2b0; --v2-ink-faint: #5f6d79; --v2-rule: rgba(255, 255, 255, .09); --v2-accent: #6f93f2; --v2-accent-ink: #0a1120; --v2-accent-wash: #1a2740; --v2-good: #4bc98a; --v2-locked: #e0904f; } } /* El acento (--v2-accent/-wash) por defecto de arriba es el azul de matemáticas. El resto de la página (unicoos.scss) ya colorea por asignatura a partir de la clase en = slug de la categoría (.quimica/.fisica/.tecnologia/.dibujo/.matematicas, ver View/Layouts/default.ctp:192-200) — mismos colores que $color-*-strong en unicoos.scss. Aquí se reutiliza esa misma clase para que el acento de este rediseño siga a la asignatura en vez de quedarse fijo en azul. */ body.quimica .videoV2 { --v2-accent: #f44336; --v2-accent-wash: #fce8e6; } body.fisica .videoV2 { --v2-accent: #4caf50; --v2-accent-wash: #e6f4e7; } body.tecnologia .videoV2 { --v2-accent: #9c27b0; --v2-accent-wash: #f3e5f7; } body.dibujo .videoV2 { --v2-accent: #607d8b; --v2-accent-wash: #e9edf0; } @media (prefers-color-scheme: dark) { body.quimica .videoV2 { --v2-accent: #ef6b60; --v2-accent-wash: #3a201d; } body.fisica .videoV2 { --v2-accent: #74c686; --v2-accent-wash: #1b2f20; } body.tecnologia .videoV2 { --v2-accent: #c265d6; --v2-accent-wash: #301b34; } body.dibujo .videoV2 { --v2-accent: #93a9b3; --v2-accent-wash: #212a2e; } } /* El artefacto no ocupa el ancho completo del viewport — su .wrap tiene max-width:1180px centrado. El .container del sitio no pone tope máximo (solo min-width en unicoos.scss), así que en monitores anchos esta fila se estiraba de borde a borde. Se replica aquí el límite del artefacto. */ .videoV2 { color: var(--v2-ink); background: var(--v2-bg); padding: 20px 15px 32px; border-radius: 14px; max-width: 1180px; margin: 0 auto; } .videoV2 a { color: inherit; } .videoV2 h1, .videoV2 h2, .videoV2 h3 { text-wrap: balance; } /* --- estructura general: grid propio en vez del row/col de Bootstrap --- El orden importa aquí: en móvil todo apila en orden de fuente (vídeo, luego ruta de lecciones, luego el resto — el usuario pidió explícitamente que la ruta no quede escondida al final tras material/foro). En escritorio, la ruta pasa a ocupar una columna a la izquierda que abarca tanto el vídeo como el contenido de al lado. */ .videoV2 .v2-layout { display: grid; grid-template-columns: 1fr; grid-template-areas: "crumbs" "video" "path" "content"; row-gap: 20px; } .videoV2 .v2-crumbs { grid-area: crumbs; } .videoV2 .v2-video-frame { grid-area: video; } .videoV2 .v2-line-nav { grid-area: path; } .videoV2 .v2-content-area { grid-area: content; min-width: 0; } @media (min-width: 768px) { .videoV2 .v2-layout { grid-template-columns: 280px 1fr; column-gap: 28px; row-gap: 20px; grid-template-areas: "crumbs crumbs" "path video" "path content"; align-items: start; } .videoV2 .v2-line-nav { position: sticky; top: 20px; } } /* --- migas / crumbs --- */ .videoV2 .v2-crumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .videoV2 .v2-pill { font-size: 12px; font-weight: 600; letter-spacing: .01em; padding: 3px 11px; border-radius: 20px; display: inline-block; background: var(--v2-accent-wash); color: var(--v2-accent); } .videoV2 .v2-pill:hover, .videoV2 .v2-pill:focus { background: var(--v2-accent); color: var(--v2-accent-ink); text-decoration: none; } /* La lección actual no tiene una página de navegación propia a la que enlazar (solo asignatura y curso la tienen) — se muestra como "estás aquí", no como link. */ .videoV2 .v2-pill-current { background: var(--v2-bg-inset); color: var(--v2-ink-dim); } /* --- video / muro de registro --- */ .videoV2 .v2-video-frame { position: relative; border-radius: var(--v2-radius); overflow: hidden; background: var(--v2-bg-inset); border: 1px solid var(--v2-rule); } .videoV2 .v2-gate { display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 260px; } .videoV2 .v2-gate-card { background: var(--v2-bg-raised); border: 1px solid var(--v2-rule); border-radius: 12px; padding: 30px 32px; max-width: 440px; text-align: center; box-shadow: 0 12px 30px rgba(16, 32, 50, .10); } .videoV2 .v2-gate-card .v2-ic { font-size: 26px; margin-bottom: 8px; color: var(--v2-accent); } .videoV2 .v2-gate-card h3 { font-size: 1.3rem; margin: 0 0 .35em; font-weight: 700; } .videoV2 .v2-gate-card p { color: var(--v2-ink-dim); font-size: .92rem; margin: 0 0 18px; } /* blockRegistro se reutiliza en otras páginas a ancho completo, ahí sus dos botones van uno junto a otro (col-sm-6); dentro de esta tarjeta de 440px ese ancho no alcanza y el texto se sale del botón, así que aquí se apilan a ancho completo. */ .videoV2 .v2-gate-card .col-xs-12.col-sm-6 { float: none; width: 100%; padding-left: 0; padding-right: 0; margin-bottom: 10px; } .videoV2 .v2-gate-card .col-xs-12.col-sm-6:last-child { margin-bottom: 0; } .videoV2 .v2-gate-card .btn-block { white-space: normal; } /* --- título / descripción --- */ .videoV2 .v2-title-block { margin-top: 20px; } .videoV2 .v2-title-block h1 { font-size: 1.9rem; margin: 0 0 .25em; font-weight: 800; } .videoV2 .v2-title-block .videoDescription { color: var(--v2-ink-dim); font-size: .96rem; max-width: 70ch; font-weight: 400; margin: 0; } /* --- fila de acciones + puntos --- */ .videoV2 .v2-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 6px; } .videoV2 .v2-icon-btn { background: var(--v2-bg-raised); border: 1px solid var(--v2-rule); color: var(--v2-ink-dim); width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; } .videoV2 .v2-icon-btn:hover, .videoV2 .v2-icon-btn:focus { border-color: var(--v2-accent); color: var(--v2-accent); text-decoration: none; } /* Estado "ya está en tu mochila" del botón de mochila. */ .videoV2 .v2-icon-btn-active { background: var(--v2-accent-wash); border-color: var(--v2-accent); color: var(--v2-accent); } .videoV2 .v2-points { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--v2-ink-dim); } /* El indicador de puntos original (.bolt/.boltActive) es un icono fa-bolt cuyo progreso se codifica con "height" (un gauge vertical tipo termómetro), no con "width" — no se puede re-skinear como barra horizontal sin cambiar el eje que representa el progreso. Se oculta y, en su lugar, .v2-points-track/-fill de abajo (nuevas, calculadas en PHP y sincronizadas por JS en cambiaProgreso/ cambiaProgresoAnonymous) hacen de barra horizontal real. */ .videoV2 .infoVideo .fa-bolt { display: none; } .videoV2 .infoVideo { position: static !important; display: flex; align-items: center; } .videoV2 .infoVideo #lines { font-variant-numeric: tabular-nums; color: var(--v2-ink); font-weight: 600; } .videoV2 .v2-points-track { width: 90px; height: 8px; border-radius: 6px; background: var(--v2-bg-inset); overflow: hidden; display: inline-block; vertical-align: middle; } .videoV2 .v2-points-fill { display: block; height: 100%; background: var(--v2-accent); border-radius: 6px; } .videoV2 .v2-register-note { font-size: .82rem; color: var(--v2-ink-faint); margin: 4px 0 0; } .videoV2 .v2-register-note a { color: var(--v2-accent); font-weight: 600; } /* --- pestañas Material / Foro --- */ .videoV2 .v2-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--v2-rule); margin-top: 14px; } .videoV2 .v2-tab-btn { background: none; border: none; padding: 10px 16px; font-size: .9rem; font-weight: 600; color: var(--v2-ink-faint); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .videoV2 .v2-tab-btn.active { color: var(--v2-accent); border-color: var(--v2-accent); } .videoV2 .v2-tab-btn:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; } .videoV2 .v2-tab-panel { display: none; padding: 18px 2px 6px; } .videoV2 .v2-tab-panel.active { display: block; } .videoV2 .v2-material-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .videoV2 .v2-material-list li { display: flex; align-items: center; gap: 12px; padding: 11px 13px; background: var(--v2-bg-raised); border: 1px solid var(--v2-rule); border-radius: 8px; font-size: .9rem; } .videoV2 .v2-material-list .fa { color: var(--v2-accent); } .videoV2 .v2-material-list a { text-decoration: none; } .videoV2 .v2-material-list a:hover { text-decoration: underline; } .videoV2 .v2-lock-tag { margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--v2-locked); border: 1px solid var(--v2-locked); border-radius: 20px; padding: 2px 9px; } .videoV2 .v2-lock-note { font-size: .82rem; color: var(--v2-ink-faint); text-align: center; margin-top: 10px; } .videoV2 .v2-lock-note .btn { margin-left: 6px; } .videoV2 .v2-forum-banner { background: var(--v2-accent-wash); border-radius: 8px; padding: 14px 16px; font-size: .86rem; color: var(--v2-ink-dim); margin-bottom: 14px; } .videoV2 .v2-forum-sorry { background: var(--v2-bg-raised); border: 1px solid var(--v2-rule); border-radius: 8px; } /* --- barra izquierda: ruta de la lección --- */ .videoV2 .v2-line-h { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--v2-ink-faint); margin: 0 0 10px; } .videoV2 .titulo.leccion.cabecera { background: var(--v2-accent); border: none; border-radius: 8px; color: var(--v2-accent-ink); } .videoV2 .titulo.leccion.cabecera a { color: var(--v2-accent-ink); } .videoV2 .videoTemaListado { background: var(--v2-bg-raised); border: 1px solid var(--v2-rule); border-radius: 8px; overflow: hidden; padding: 4px; } .videoV2 .videoTema { border-bottom: 1px solid var(--v2-rule); } .videoV2 .videoTema:last-child { border-bottom: none; } /* La miniatura (.thumbWrapper, 120px) y el desplazamiento a 133px/175px de .pathIcon/.video-title están pensados para esa miniatura. Aquí se oculta y la fila pasa a ser una "estación" fina, como en el diseño aprobado: solo el punto de progreso + el título de la lección. */ .videoV2 .thumbWrapper { display: none; } .videoV2 .videoTema a { color: var(--v2-ink); display: block !important; height: auto; min-height: 44px; padding: 0; } .videoV2 .pathIcon { margin-left: 16px; width: 24px; } /* .video-icon original: position:absolute; top:50%; left:8px; margin-top:-12px; width/height:25px — un sprite de fondo por asignatura. Aquí se sustituye por un punto plano, fijando position/top/left/margin explícitamente (no solo width/height) para que quede centrado sobre la línea: con .pathIcon a 24px de ancho, su centro está en x=12px; .tuberia (4px) se centra ahí con left:10px, y este punto (14px) con left:5px. */ .videoV2 .videoTema .video-icon { position: absolute; top: 50%; left: 5px; margin-top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--v2-bg-inset); border: 2px solid var(--v2-rule); z-index: 20; } .videoV2 .videoTema.empezado .video-icon { border-color: var(--v2-accent); background: var(--v2-accent); } .videoV2 .videoTema.completo .video-icon { border-color: var(--v2-good); background: var(--v2-good); } /* El examen es una parada distinta del recorrido (no un vídeo más): rombo en vez de círculo, como en el artefacto. */ .videoV2 .videoTema .video-icon.test { border-radius: 3px; transform: rotate(45deg); left: 6px; width: 12px; height: 12px; } .videoV2 .videoTema .tuberia { left: 10px; background: var(--v2-rule); } .videoV2 .videoTema .tuberia.completa { background: var(--v2-good); } .videoV2 .videoTema a.active2 { color: var(--v2-accent); font-weight: 700; background: var(--v2-accent-wash); } /* .video-title original: position:absolute;top:0;bottom:0;left:175px — daba por hecho una fila de altura fija (la miniatura de 68/75px). Al ocultar la miniatura la fila pasa a tener min-height, no height fija, así que un título que ocupe dos líneas necesita poder ampliar la fila de verdad: se quita el position:absolute y pasa a fluir en el documento (margen en vez de "left" para dejar sitio al punto/línea). */ .videoV2 .video-title { position: static; color: inherit; font-size: .85rem; font-weight: 500; margin-left: 42px; padding: 8px 10px 8px 0; } .videoV2 .video-title img { width: 16px; margin-left: 4px; vertical-align: middle; } .videoV2 .video-title .v2-dur { font-size: .72rem; font-weight: 400; color: var(--v2-ink-faint); margin-top: 1px; } /* --- anterior / siguiente --- Antes vivían en la barra lateral con col-sm-5/col-sm-offset-*, pensado para el ancho de la barra lateral original (~33% del contenedor). Con la barra ya more estrecha (25%, como en el artefacto) esas dos cajas de ~42% cada una no cababan y se solapaban con el resto. El artefacto las coloca en el contenido principal, una junto a otra con flexbox — se replica aquí, conservando las clases navegaLecciones/leccAnterior/ leccSiguiente/titLeccion (con sus .fa posicionados en absoluto) tal cual. */ .videoV2 .v2-prevnext { display: flex; gap: 12px; margin-top: 20px; } .videoV2 .v2-prevnext > div { flex: 1; } .videoV2 .navegaLecciones { position: relative; background: var(--v2-bg-raised); border: 1px solid var(--v2-rule); border-radius: 8px; padding: 10px 14px !important; } .videoV2 .navegaLecciones:hover { border-color: var(--v2-accent); } .videoV2 .navegaLecciones .titLeccion { color: var(--v2-ink-dim); font-size: .85rem; } .videoV2 .navegaLecciones .titLeccion strong { color: var(--v2-ink); } .videoV2 .navegaLecciones.leccAnterior { padding-left: 34px !important; } .videoV2 .navegaLecciones.leccSiguiente { padding-right: 34px !important; } @media (max-width: 600px) { .videoV2 .v2-prevnext { flex-direction: column; } }