/* ============================================================================ LMS JUCUM — Sistema de diseño "Modern EdTech" (bespoke, sin dependencias). Estética: plataforma de aprendizaje limpia y contemporánea — lienzo neutro frío, tarjetas blancas con sombras suaves por capas, esquinas redondeadas, jerarquía tipográfica clara y componentes con estados táctiles cómodos. Tematización POR BASE: config.php inyecta --color-primario/-secundario y las fuentes (--ft-*) en el . Aquí se deriva toda la paleta con color-mix() (con respaldo previo para navegadores antiguos). Fuentes: sans de sistema por defecto; cada base puede self-hostear las suyas vía /branding/marca.css. ============================================================================ */ :root { /* --- Marca (config.php la sobreescribe en el ) ------------------ */ --color-primario: #2563eb; --color-secundario: #0ea5e9; /* --- Paleta derivada de la marca (runtime) --------------------------- */ --primario-hover: #1f57cf; --primario-hover: color-mix(in oklch, var(--color-primario) 88%, #000); --primario-activo: #1a4bb5; --primario-activo: color-mix(in oklch, var(--color-primario) 78%, #000); --primario-suave: #eef3fd; --primario-suave: color-mix(in oklch, var(--color-primario) 8%, #fff); --primario-tinte: #dde8fb; --primario-tinte: color-mix(in oklch, var(--color-primario) 15%, #fff); --primario-borde: #cfddf6; --primario-borde: color-mix(in oklch, var(--color-primario) 26%, #fff); --anillo: rgba(37, 99, 235, .28); --anillo: color-mix(in oklch, var(--color-primario) 32%, transparent); --secundario-hover: #0c90cf; --secundario-hover: color-mix(in oklch, var(--color-secundario) 88%, #000); /* --- Neutros (canvas frío, tarjetas blancas) ------------------------- */ --texto: #15181e; --texto-suave: #566070; --texto-tenue: #6b7688; /* >=4.5:1 sobre blanco (WCAG AA texto normal) */ --borde: #e7eaf0; --borde-fuerte: #d7dbe4; --fondo: #f4f6fa; --superficie: #ffffff; --superficie-2: #fafbfd; /* --- Estados --------------------------------------------------------- */ --exito: #15803d; --exito-bg: #e9f7ef; --exito-borde: #b8e6c9; --error: #c2352b; --error-bg: #fdeceb; --error-borde: #f4c6c2; --info: #1d69b8; --info-bg: #eaf2fb; --info-borde: #c3ddf5; --aviso: #b7791f; --aviso-bg: #fdf4e3; /* --- Espaciado ------------------------------------------------------- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; /* --- Radios ---------------------------------------------------------- */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; /* --- Sombras (suaves, frías, por capas) ------------------------------ */ --sombra-xs: 0 1px 2px rgba(20, 28, 46, .06); --sombra-sm: 0 1px 2px rgba(20, 28, 46, .05), 0 2px 6px rgba(20, 28, 46, .05); --sombra: 0 2px 4px rgba(20, 28, 46, .05), 0 8px 20px rgba(20, 28, 46, .07); --sombra-md: 0 4px 8px rgba(20, 28, 46, .06), 0 16px 36px rgba(20, 28, 46, .10); --sombra-lg: 0 12px 28px rgba(20, 28, 46, .12), 0 32px 64px rgba(20, 28, 46, .14); /* --- Tipografía por rol (config.php las sobreescribe) ----------------- */ --ft-titulos: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ft-subtitulos: var(--ft-titulos); --ft-texto: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ft-destacado: var(--ft-titulos); --ancho-max: 1160px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* El atributo hidden SIEMPRE gana (nuestros display:flex/grid en clases lo pisarían con la regla por defecto del navegador). */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--ft-texto); color: var(--texto); background-color: var(--fondo); background-image: radial-gradient(1100px 520px at 100% -8%, var(--primario-suave), transparent 62%); background-attachment: fixed; line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--color-primario); text-decoration: none; } a:hover { color: var(--primario-hover); } img { max-width: 100%; display: block; } ::selection { background: var(--primario-tinte); } .contenedor { width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--sp-5); } /* ---- Tipografía ------------------------------------------------------- */ h1, h2, h3, h4 { color: var(--texto); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 var(--sp-3); } h1, h2 { font-family: var(--ft-titulos); font-weight: 700; } h3, h4 { font-family: var(--ft-subtitulos); font-weight: 600; } h1 { font-size: clamp(1.7rem, 1.35rem + 1.6vw, 2.3rem); } h2 { font-size: clamp(1.3rem, 1.12rem + .8vw, 1.6rem); } h3 { font-size: 1.18rem; } p { margin: 0 0 var(--sp-4); } .destacado { font-family: var(--ft-destacado); font-size: 1.12rem; line-height: 1.55; color: var(--texto-suave); } .eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primario); } /* ---- Cabecera / navegación -------------------------------------------- */ .cabecera { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 30; } .cabecera__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 66px; flex-wrap: wrap; } .marca { display: flex; align-items: center; gap: var(--sp-3); color: var(--texto); } .marca:hover { text-decoration: none; } .marca__logo { height: 38px; width: auto; } .marca__nombre { font-family: var(--ft-titulos); font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; } .nav { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .nav a { color: var(--texto-suave); font-weight: 500; font-size: .93rem; padding: .45rem .7rem; border-radius: var(--r-sm); transition: color .15s, background-color .15s; } .nav a:hover { color: var(--color-primario); background: var(--primario-suave); text-decoration: none; } /* Navegación principal: fila visible en escritorio; el botón ☰ se oculta. */ .nav { position: relative; } .nav-toggle { display: none; } .nav-links { display: flex; align-items: center; gap: var(--sp-2); } /* Menú de usuario desplegable (details/summary, sin dependencias) */ .menu-usuario { position: relative; margin-left: var(--sp-2); } .menu-usuario > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2); padding: .3rem .6rem .3rem .35rem; border-radius: var(--r-full); border: 1px solid var(--borde); background: var(--superficie); font-weight: 600; font-size: .9rem; color: var(--texto); } .menu-usuario > summary::-webkit-details-marker { display: none; } .menu-usuario > summary:hover { border-color: var(--primario-borde); } .avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: inline-grid; place-items: center; background: var(--color-primario); color: #fff; font-size: .76rem; font-weight: 700; } .menu-usuario__nombre { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-usuario__flecha { font-size: .7rem; color: var(--texto-tenue); transition: transform .15s; } .menu-usuario[open] > summary .menu-usuario__flecha { transform: rotate(180deg); } .menu-usuario__pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; z-index: 40; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); box-shadow: var(--sombra-md); padding: var(--sp-2); display: flex; flex-direction: column; gap: 2px; animation: aparecer .14s ease both; } .menu-usuario__pop a { padding: .55rem .7rem; border-radius: var(--r-sm); color: var(--texto); font-weight: 500; font-size: .92rem; } .menu-usuario__pop a:hover { background: var(--primario-suave); color: var(--primario-activo); text-decoration: none; } .menu-usuario__pop hr { border: none; border-top: 1px solid var(--borde); margin: var(--sp-1) 0; } .contenido { padding-top: var(--sp-6); padding-bottom: var(--sp-8); min-height: 64vh; } /* ---- Botones ---------------------------------------------------------- */ .btn { --btn-bg: var(--color-primario); --btn-bg-hover: var(--primario-hover); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); background: var(--btn-bg); color: #fff; padding: .6rem 1.15rem; border: 1px solid transparent; border-radius: var(--r-sm); font-family: inherit; font-size: .95rem; font-weight: 600; line-height: 1.25; cursor: pointer; text-align: center; white-space: nowrap; box-shadow: var(--sombra-xs); transition: background-color .15s ease, transform .06s ease, box-shadow .15s ease, border-color .15s; } .btn:hover { background: var(--btn-bg-hover); color: #fff; text-decoration: none; box-shadow: var(--sombra-sm); } .btn:active { transform: translateY(1px); } .btn--sec { --btn-bg: var(--color-secundario); --btn-bg-hover: var(--secundario-hover); } .btn--fantasma { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); box-shadow: none; } .btn--fantasma:hover { background: var(--superficie-2); color: var(--color-primario); border-color: var(--primario-borde); box-shadow: none; } .btn--peligro { background: var(--superficie); color: var(--error); border-color: var(--error-borde); box-shadow: none; } .btn--peligro:hover { background: var(--error-bg); color: var(--error); } .btn--bloque { display: flex; width: 100%; } .btn--sm { padding: .38rem .7rem; font-size: .85rem; border-radius: var(--r-sm); } .btn--lg { padding: .8rem 1.5rem; font-size: 1.02rem; } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--anillo); } .acciones { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } /* ---- Alertas ---------------------------------------------------------- */ .alerta { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); margin-bottom: var(--sp-4); border: 1px solid; font-size: .93rem; display: flex; gap: var(--sp-2); animation: aparecer .35s ease both; } .alerta--exito { background: var(--exito-bg); border-color: var(--exito-borde); color: #145a32; } .alerta--error { background: var(--error-bg); border-color: var(--error-borde); color: #8a221b; } .alerta--info { background: var(--info-bg); border-color: var(--info-borde); color: #17548f; } /* ---- Superficies / formularios --------------------------------------- */ .tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-sm); padding: var(--sp-5); } .form-estrecho { max-width: 440px; margin: var(--sp-7) auto; } .form-estrecho h1 { text-align: center; font-size: 1.6rem; } /* Estilo base coherente para TODOS los controles (también fuera de .campo: Q&A, quizzes, selects de admin, etc.). Evita el textarea monoespaciado del navegador y los select sin estilizar. No afecta a checkbox/radio/color/file. */ textarea, select, input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="search"], input[type="tel"] { font-family: inherit; font-size: 1rem; line-height: 1.4; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); padding: .55rem .75rem; transition: border-color .15s, box-shadow .15s; } textarea { width: 100%; min-height: 90px; resize: vertical; } select { cursor: pointer; max-width: 100%; } textarea::placeholder, input::placeholder { color: var(--texto-tenue); } textarea:focus, select:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--anillo); } .campo { margin-bottom: var(--sp-4); } .campo label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: var(--sp-2); color: var(--texto); } .campo input, .campo select, .campo textarea { width: 100%; padding: .62rem .8rem; border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); font-size: 1rem; font-family: inherit; color: var(--texto); background: var(--superficie); transition: border-color .15s, box-shadow .15s; } .campo input::placeholder, .campo textarea::placeholder { color: var(--texto-tenue); } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--anillo); } .campo textarea { min-height: 120px; resize: vertical; } .ayuda { font-size: .84rem; color: var(--texto-suave); margin-top: var(--sp-2); } .campo-check { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: .9rem; } .campo-check input { width: auto; margin-top: .2rem; } /* Impresión: comprobantes y certificados limpios (sin cabecera/pie/acciones). */ @media print { .cabecera, .pie, .no-print, .admin-nav { display: none !important; } .contenido { padding: 0 !important; } .tarjeta { border: none !important; box-shadow: none !important; } } /* Contenido de texto largo (páginas legales, informativas). */ .prosa { max-width: 68ch; margin-left: auto; margin-right: auto; } .prosa h1 { margin-bottom: var(--sp-2); } .prosa h2 { font-size: 1.15rem; margin-top: var(--sp-5); margin-bottom: var(--sp-2); } .prosa p { margin: 0 0 var(--sp-3); color: var(--texto-suave); } /* Aula: material de la clase (adjuntos por lección) */ .materiales { border: 1px solid var(--borde); border-radius: var(--r); padding: var(--sp-4); background: var(--superficie-2); } .materiales__tit { margin: 0 0 var(--sp-2); font-size: 1rem; } .materiales__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .materiales__lista a { font-weight: 500; } /* Aula: navegación anterior/siguiente y acciones de la lección */ .leccion-nav { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; } .leccion-acciones { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } /* Aula: preguntas y respuestas (Q&A) */ .qa { margin-top: var(--sp-6); border-top: 1px solid var(--borde); padding-top: var(--sp-4); } .qa-form { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); } .qa-form textarea, .qa-responder textarea { width: 100%; } .qa-orden a.activo { font-weight: 700; color: var(--color-primario); } .qa-hilo { display: flex; gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 1px solid var(--borde); } .qa-voto { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; } .qa-voto__btn { cursor: pointer; border: 1px solid var(--borde); background: var(--superficie); border-radius: var(--r-sm); width: 34px; height: 30px; font-size: .9rem; color: var(--texto-suave); } .qa-voto__btn.votado { background: var(--primario-suave); color: var(--color-primario); border-color: var(--primario-borde); } .qa-voto__n { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; } .qa-hilo__cuerpo { flex: 1; min-width: 0; } .qa-hilo__meta, .qa-resp__meta { font-size: .82rem; color: var(--texto-suave); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0 0 .3rem; } .qa-texto { overflow-wrap: anywhere; } .qa-resp { margin: var(--sp-2) 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-left: 2px solid var(--borde); background: var(--superficie-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .qa-resp--instructor { border-left-color: var(--color-primario); background: var(--primario-suave); } .qa-acciones { margin-top: var(--sp-2); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .qa-responder summary { cursor: pointer; display: inline-block; font-size: .85rem; color: var(--color-primario); } .qa-responder[open] summary { margin-bottom: var(--sp-1); } .qa-eliminar { background: none; border: none; color: var(--error); cursor: pointer; font-size: .8rem; text-decoration: underline; padding: 0; } /* Quizzes / evaluaciones */ .quiz-panel { text-align: center; } .quiz-opts { list-style: none; margin: .3rem 0; padding: 0; } .quiz-opts li { padding: .15rem 0; color: var(--texto-suave); } .quiz-opts li.es-correcta { color: var(--exito); font-weight: 600; } .quiz-opts li.es-marcada-mal { color: var(--error); } .quiz-opcion { display: flex; gap: .5rem; align-items: flex-start; padding: .4rem .2rem; cursor: pointer; } .quiz-opcion input { margin-top: .25rem; } .quiz-input { width: 100%; padding: .5rem .7rem; border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); font-size: 1rem; font-family: inherit; } .quiz-alt-input { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; } .quiz-alt-input input[type=text] { flex: 1; padding: .45rem .6rem; border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); font-family: inherit; } .quiz-resultado { display: flex; align-items: center; gap: var(--sp-4); } .quiz-resultado__pct { font-size: 2.4rem; font-weight: 800; color: var(--color-primario); line-height: 1; } .quiz-resultado.aprobado .quiz-resultado__pct { color: var(--exito); } .quiz-resultado.reprobado .quiz-resultado__pct { color: var(--error); } code { background: var(--primario-suave); padding: .12em .42em; border-radius: 6px; font-size: .9em; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; } /* ---- Hero ------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; color: #fff; text-align: center; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sombra-md); padding: clamp(2.4rem, 1.6rem + 4vw, 4.2rem) var(--sp-5); margin-bottom: var(--sp-7); background: var(--color-primario); background: radial-gradient(760px 420px at 12% -30%, color-mix(in oklch, var(--color-secundario) 60%, transparent), transparent 70%), linear-gradient(140deg, var(--color-primario), var(--primario-activo)); } .hero h1 { color: #fff; font-size: clamp(2rem, 1.4rem + 3vw, 3rem); margin-bottom: var(--sp-3); letter-spacing: -.025em; } .hero p { font-family: var(--ft-destacado); max-width: 600px; margin: 0 auto; opacity: .95; font-size: 1.14rem; line-height: 1.5; } .hero__cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-5); } .hero .btn--fantasma { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); } .hero .btn--fantasma:hover { background: rgba(255,255,255,.24); color: #fff; } /* Eyebrow tipo píldora + CTA de máximo contraste sobre el gradiente de marca */ .hero__eyebrow { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .9rem; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12); margin-bottom: var(--sp-4); } .btn--hero { background: #fff; color: var(--primario-activo); border-color: transparent; box-shadow: var(--sombra-sm); } .btn--hero:hover { background: #fff; color: var(--primario-activo); filter: brightness(.96); } .hero__meta { list-style: none; display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; padding: 0; margin: var(--sp-5) 0 0; font-size: .88rem; opacity: .92; } /* Franja de cifras (social proof honesto desde la BD) */ .cifras { display: flex; gap: var(--sp-6); justify-content: center; flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); margin: calc(-1 * var(--sp-5)) auto var(--sp-6); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-sm); max-width: 640px; text-align: center; } .cifra { display: flex; flex-direction: column; } .cifra__num { font-family: var(--ft-titulos); font-weight: 700; font-size: 1.7rem; color: var(--color-primario); letter-spacing: -.02em; } .cifra__txt { font-size: .82rem; color: var(--texto-suave); } /* Cómo funciona (3 pasos) */ .pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-5); } .paso { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-sm); padding: var(--sp-5); text-align: center; } .paso__num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primario-suave); color: var(--primario-activo); font-family: var(--ft-titulos); font-weight: 700; font-size: 1.15rem; margin-bottom: var(--sp-3); } .paso p { margin: 0; color: var(--texto-suave); font-size: .93rem; } /* Banda CTA final */ .cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; background: var(--primario-suave); border: 1px solid var(--primario-borde); border-radius: var(--r-xl); padding: var(--sp-6); } /* ---- Encabezado de página / secciones -------------------------------- */ .pagina-cab { margin-bottom: var(--sp-6); } .barra-acciones { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; } .barra-acciones h1, .barra-acciones h2 { margin: 0; } /* ---- Grilla de cursos ------------------------------------------------- */ .grid-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--sp-5); } .curso-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; animation: subir .5s ease both; } .grid-cursos .curso-card:nth-child(2){animation-delay:.06s} .grid-cursos .curso-card:nth-child(3){animation-delay:.12s} .grid-cursos .curso-card:nth-child(4){animation-delay:.18s} .grid-cursos .curso-card:nth-child(5){animation-delay:.24s} .grid-cursos .curso-card:nth-child(6){animation-delay:.30s} .curso-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); border-color: var(--primario-borde); } .curso-card__img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--primario-suave); transition: transform .4s ease; } .curso-card:hover .curso-card__img { transform: scale(1.05); } .curso-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; } .curso-card__titulo { font-family: var(--ft-subtitulos); font-size: 1.12rem; font-weight: 600; margin: 0; line-height: 1.3; letter-spacing: -.01em; } .curso-card__titulo a { color: var(--texto); } .curso-card__titulo a:hover { color: var(--color-primario); } .curso-card__desc { color: var(--texto-suave); font-size: .92rem; flex: 1; margin: 0; } .curso-card__meta { color: var(--texto-tenue); font-size: .8rem; margin: 0; } .recurso-card__img { display: block; aspect-ratio: 16/9; background: linear-gradient(140deg, var(--primario-tinte), var(--primario-suave)); display: grid; place-items: center; } .recurso-card__icono { font-family: var(--ft-titulos); font-weight: 700; font-size: 1.6rem; letter-spacing: .1em; color: var(--primario-activo); opacity: .8; } .curso-card__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); } /* ---- Etiquetas / chips ------------------------------------------------ */ .etiqueta { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700; letter-spacing: .01em; padding: .28rem .68rem; border-radius: var(--r-full); border: 1px solid transparent; } .etiqueta--gratis { background: var(--exito-bg); color: var(--exito); border-color: var(--exito-borde); } .etiqueta--pago { background: var(--primario-suave); color: var(--primario-activo); border-color: var(--primario-borde); } .etiqueta--neutro { background: var(--superficie-2); color: var(--texto-suave); border-color: var(--borde-fuerte); } /* ---- Utilidades ------------------------------------------------------- */ .txt-centro { text-align: center; } .mt-1 { margin-top: var(--sp-4); } .mt-2 { margin-top: var(--sp-6); } .vacio { text-align: center; color: var(--texto-suave); padding: var(--sp-7) var(--sp-5); background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--r-lg); } .vacio .btn { margin-top: var(--sp-4); } /* ---- Tablas ----------------------------------------------------------- */ .tabla-scroll { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--borde); box-shadow: var(--sombra-sm); background: var(--superficie); } .tabla { width: 100%; border-collapse: collapse; background: var(--superficie); font-size: .93rem; } .tabla th, .tabla td { padding: .8rem 1rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; } .tabla thead th { background: var(--superficie-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); font-weight: 700; white-space: nowrap; } .tabla tbody tr:last-child td { border-bottom: none; } .tabla tbody tr { transition: background-color .12s; } .tabla tbody tr:hover { background: var(--superficie-2); } /* ---- Tarjetas de estadística (reportes) ------------------------------ */ /* Tarjetas de estadística: 3 columnas (se reparten parejo; 6 KPIs = 2 filas de 3). */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); } .stat { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-sm); padding: var(--sp-4) var(--sp-5); } .stat__rotulo { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); } .stat__num { font-family: var(--ft-titulos); font-size: 2rem; font-weight: 700; color: var(--color-primario); letter-spacing: -.02em; margin-top: var(--sp-1); } /* ---- Shell de administración ----------------------------------------- */ .admin-nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: var(--sp-1); box-shadow: var(--sombra-sm); margin-bottom: var(--sp-6); } .admin-nav a { padding: .55rem .95rem; border-radius: var(--r-sm); font-weight: 600; font-size: .92rem; color: var(--texto-suave); } .admin-nav a:hover { background: var(--superficie-2); color: var(--color-primario); } .admin-nav a.activo { background: var(--primario-suave); color: var(--primario-activo); } /* ---- Vista de curso / reproductor (Fase 2) --------------------------- */ .curso-layout { display: grid; grid-template-columns: 340px 1fr; gap: var(--sp-6); align-items: start; } .curso-aside { position: sticky; top: 84px; } .curso-aside h2 { margin-top: 0; font-size: 1.15rem; } .curso-aside__modulo { font-family: var(--ft-subtitulos); font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-tenue); margin: var(--sp-4) 0 var(--sp-2); } .curso-aside__lecciones { list-style: none; padding: 0; margin: 0; } .curso-aside__lecciones li { display: flex; align-items: flex-start; gap: var(--sp-2); padding: .4rem .55rem; margin: .1rem -.55rem; border-radius: var(--r-sm); } .curso-aside__lecciones li.es-activa { background: var(--primario-suave); } .curso-aside__lecciones li.es-activa a { color: var(--primario-activo); font-weight: 600; } .curso-aside__lecciones a { color: var(--texto-suave); font-size: .93rem; } .curso-aside__lecciones a:hover { color: var(--color-primario); } .lec-estado { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin-top: .05rem; display: inline-grid; place-items: center; border-radius: 50%; font-size: .68rem; color: var(--texto-tenue); border: 1.5px solid var(--borde-fuerte); line-height: 1; } .lec-estado--ok { background: var(--exito); border-color: var(--exito); color: #fff; } .barra-progreso { margin-bottom: var(--sp-4); } .barra-progreso__riel { height: 8px; background: var(--primario-suave); border-radius: var(--r-full); overflow: hidden; } .barra-progreso__relleno { height: 100%; background: linear-gradient(90deg, var(--color-primario), var(--color-secundario)); border-radius: var(--r-full); transition: width .5s ease; } .barra-progreso__texto { font-size: .82rem; color: var(--texto-suave); margin: var(--sp-2) 0 0; } .reproductor { position: relative; aspect-ratio: 16 / 9; background: #0b1220; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-md); } .reproductor__cargando { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.75); font-size: .95rem; } .reproductor #video-target, .reproductor #video-target iframe, .reproductor > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .continuar-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--primario-suave); border: 1px solid var(--primario-borde); border-radius: var(--r-sm); font-size: .95rem; } /* ---- Constructor de curso (admin) ------------------------------------ */ .builder { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } .modulo-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-sm); overflow: hidden; } .modulo-card__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--superficie-2); border-bottom: 1px solid var(--borde); } .modulo-card__cab h3 { margin: 0; font-size: 1.05rem; } .modulo-card__body { padding: var(--sp-2) var(--sp-4) var(--sp-4); } .leccion-fila { display: flex; align-items: center; gap: var(--sp-3); padding: .7rem .2rem; border-bottom: 1px solid var(--borde); } .leccion-fila:last-of-type { border-bottom: none; } .leccion-fila__icono { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--primario-suave); color: var(--primario-activo); font-size: .95rem; } .leccion-fila__txt { flex: 1; min-width: 0; } .leccion-fila__titulo { font-weight: 600; font-size: .96rem; } .leccion-fila__meta { font-size: .8rem; color: var(--texto-tenue); } /* Modales nativos (dialog) para crear/editar en el constructor */ dialog.modal { border: none; border-radius: var(--r-lg); box-shadow: var(--sombra-lg); padding: 0; width: min(540px, calc(100vw - 2rem)); max-height: min(85vh, 720px); color: var(--texto); background: var(--superficie); } dialog.modal::backdrop { background: rgba(13, 20, 33, .5); } .modal__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--superficie); } .modal__cab h3 { margin: 0; font-size: 1.1rem; } .modal__cerrar { background: none; border: none; cursor: pointer; color: var(--texto-tenue); font-size: 1.1rem; line-height: 1; padding: .35rem .5rem; border-radius: var(--r-sm); } .modal__cerrar:hover { background: var(--superficie-2); color: var(--texto); } .modal__body { padding: var(--sp-5); overflow-y: auto; } .modal__body .campo:last-of-type { margin-bottom: var(--sp-4); } .add-buttons { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); } /* ---- Pie -------------------------------------------------------------- */ .pie { border-top: 1px solid var(--borde); background: var(--superficie); margin-top: var(--sp-8); } .pie__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-5) 0; font-size: .9rem; color: var(--texto-suave); } .pie__credito a { font-weight: 600; } /* ---- Animaciones ------------------------------------------------------ */ @keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes aparecer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } .curso-card:hover, .curso-card:hover .curso-card__img { transform: none; } } /* ---- Responsive ------------------------------------------------------- */ @media (max-width: 860px) { .curso-layout { grid-template-columns: 1fr; } .curso-aside { position: static; order: 2; } } @media (max-width: 640px) { .contenedor { padding: 0 var(--sp-4); } .marca__nombre { font-size: 1rem; } .nav { gap: var(--sp-2); flex-wrap: nowrap; } .menu-usuario__nombre { display: none; } /* en móvil, solo el avatar */ .barra-acciones { align-items: stretch; } .stats { grid-template-columns: repeat(2, 1fr); } /* 6 KPIs = 3 filas de 2 */ /* Navegación principal colapsada en un botón ☰ con panel desplegable. */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--borde); background: var(--superficie); font-size: 1.15rem; color: var(--texto); } .nav-links { display: none; } .nav-links.abierto { display: flex; flex-direction: column; gap: 2px; position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; z-index: 40; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); box-shadow: var(--sombra-md); padding: var(--sp-2); animation: aparecer .14s ease both; } .nav-links.abierto a { padding: .55rem .7rem; border-radius: var(--r-sm); } }