.pagina--curso {
--pagina-margen: max(20px, calc((100% - 1200px) / 2));
--curso-borde: #e3e6eb;
} .curso-etiqueta {
display: inline-block;
margin: 0 0 12px !important;
border-radius: var(--radio-boton);
padding: 5px 12px;
background: rgba(19, 175, 249, 0.12);
color: var(--azul-hondo);
font: 600 12px/1.2 Roboto, sans-serif !important;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pagina a.curso-boton.curso-boton,
.curso-boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--azul);
border-radius: var(--radio-boton);
padding: 13px 22px;
background: var(--azul);
color: var(--blanco);
font: 600 15px/1 Roboto, sans-serif;
text-decoration: none;
cursor: pointer;
transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.pagina a.curso-boton.curso-boton:hover,
.curso-boton:hover {
border-color: var(--azul-hondo);
background: var(--azul-hondo);
color: var(--blanco);
}
.pagina button.curso-boton--borde,
.pagina a.curso-boton--borde.curso-boton--borde {
border-color: #d6dae3;
background: var(--blanco);
color: var(--noche);
font-weight: 500;
}
.pagina button.curso-boton--borde:hover,
.pagina a.curso-boton--borde.curso-boton--borde:hover {
border-color: var(--azul);
background: var(--blanco);
color: var(--azul-hondo);
}
.pagina a.curso-boton.is-bloqueado,
.pagina a.curso-boton.is-bloqueado:hover {
border-color: #e3e6eb;
background: #eceef2;
color: #9aa1b0;
cursor: not-allowed;
}
.curso-boton .icono {
width: 18px;
height: 18px;
}
.curso-boton--grande {
padding: 16px 28px;
font-size: 16px;
}
.curso-barra {
--p: 0%;
position: relative;
display: block;
overflow: hidden;
height: 6px;
border-radius: 999px;
background: #e3e6eb;
}
.curso-barra span {
position: absolute;
inset: 0 auto 0 0;
width: var(--p);
border-radius: inherit;
background: var(--azul);
transition: width 0.4s ease;
}
.pagina .curso-migas {
margin: 0 0 18px;
}
.pagina .curso-migas a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--texto-suave);
font: 500 14px/1.3 Roboto, sans-serif;
text-decoration: none;
}
.pagina .curso-migas a:hover {
color: var(--azul-hondo);
}
.curso-migas .icono {
width: 16px;
height: 16px;
} .curso-principal > .curso-revision {
margin: 0;
}
.pagina > .curso-revision,
.curso-revision {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 0;
margin-bottom: 24px;
border: 1px solid #f0d58a;
border-radius: 14px;
padding: 12px 16px;
background: #fff8e1;
color: #6b5310;
font: 400 14px/1.5 Roboto, sans-serif;
}
.curso-revision .icono {
flex: none;
width: 18px;
height: 18px;
margin-top: 1px;
} .pagina > .curso-cabecera {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
align-items: center;
gap: clamp(24px, 4vw, 56px);
margin: calc(-1 * clamp(32px, 2.5vw + 20px, 56px)) 0 40px;
border-bottom: 1px solid #eceef2;
padding: clamp(32px, 4vw, 56px) var(--pagina-margen);
background: var(--blanco);
}
body:has(.pagina > .curso-cabecera:first-child) .cabecera--clara {
background: var(--blanco);
}
.pagina .curso-cabecera h1 {
margin: 0 0 14px;
color: var(--noche);
font: 700 clamp(30px, 3.4vw, 44px) / 1.12 Roboto, sans-serif;
letter-spacing: -0.02em;
text-transform: none;
text-wrap: balance;
}
.pagina .curso-cabecera__frase {
margin: 0 0 20px;
color: var(--texto-suave);
font-size: 18px;
line-height: 1.55;
}
.pagina .curso-datos {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
margin: 0;
padding: 0;
list-style: none;
}
.pagina .curso-datos li {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
color: var(--noche);
font: 500 15px/1.3 Roboto, sans-serif;
}
.curso-datos .icono {
width: 20px;
height: 20px;
color: var(--azul-hondo);
}
.curso-cabecera__imagen {
overflow: hidden;
margin: 0;
border-radius: var(--radio-l);
box-shadow: var(--sombra);
}
.curso-cabecera__imagen img {
display: block;
width: 100%;
height: auto;
}
.pagina > .curso-cuerpo {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
align-items: start;
gap: 40px;
margin-top: 0;
margin-bottom: 72px;
}
.curso-principal > * + * {
margin-top: 32px;
}
.curso-avance {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
border: 1px solid var(--curso-borde);
border-radius: var(--radio-l);
padding: 22px 24px;
background: var(--blanco);
}
.curso-avance__texto {
flex: 1 1 260px;
}
.pagina .curso-avance__titulo {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
color: var(--noche);
font: 600 18px/1.3 Roboto, sans-serif;
}
.curso-avance__titulo .icono {
width: 22px;
height: 22px;
color: #1d9a63;
}
.pagina .curso-avance p:not(.curso-avance__titulo) {
margin: 0;
color: var(--texto-suave);
font-size: 15px;
}
.pagina .curso-programa h2 {
margin: 0 0 16px;
color: var(--noche);
font: 700 24px/1.2 Roboto, sans-serif;
text-transform: none;
}
.pagina .curso-descripcion {
color: var(--texto-suave);
font-size: 17px;
line-height: 1.65;
} .pagina .curso-indice {
margin: 0;
border: 1px solid var(--curso-borde);
border-radius: var(--radio-l);
padding: 6px;
background: var(--blanco);
list-style: none;
}
.pagina .curso-indice__paso {
margin: 0;
}
.pagina .curso-indice__paso + .curso-indice__paso {
border-top: 1px solid #f0f1f4;
}
.pagina ol.curso-indice > li.curso-indice__paso > a[href],
.pagina .curso-indice__paso > :is(a, span) {
display: flex;
align-items: flex-start;
gap: 14px;
border-radius: 14px;
padding: 14px 14px;
color: var(--noche);
text-decoration: none;
transition: background var(--transicion);
}
.pagina ol.curso-indice > li.curso-indice__paso > a[href]:hover {
color: var(--noche);
}
.pagina .curso-indice__paso > a:hover {
background: #f4f6f9;
}
.pagina .curso-indice__paso.is-actual > a {
background: rgba(19, 175, 249, 0.08);
}
.curso-indice__icono {
display: grid;
flex: none;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(19, 175, 249, 0.12);
color: var(--azul-hondo);
}
.curso-indice__icono .icono {
width: 18px;
height: 18px;
}
.is-hecha .curso-indice__icono {
background: rgba(29, 154, 99, 0.12);
color: #1d9a63;
}
.is-cerrada .curso-indice__icono {
background: #eceef2;
color: #9aa1b0;
}
.curso-indice__texto {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.curso-indice__n {
color: var(--texto-suave);
font: 600 12px/1.3 Roboto, sans-serif;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.curso-indice__titulo {
font: 500 16px/1.4 Roboto, sans-serif;
}
.curso-indice__detalle {
color: var(--texto-suave);
font: 400 13px/1.3 Roboto, sans-serif;
}
.is-cerrada .curso-indice__titulo {
color: #6b7285;
}
.curso-indice__paso--evaluacion {
background: #fafbfc;
} .curso-lateral {
position: sticky;
top: 130px;
} .curso-tutor {
margin: 0 0 16px;
border: 1px solid rgba(19, 175, 249, 0.3);
border-radius: var(--radio-l);
padding: 24px;
background: linear-gradient(160deg, #eaf7fe 0%, #f6fbfe 100%);
}
.curso-tutor__icono {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-bottom: 14px;
border-radius: 14px;
background: var(--blanco);
color: var(--azul-hondo);
box-shadow: 0 4px 12px rgba(19, 175, 249, 0.15);
}
.curso-tutor__icono .icono {
width: 22px;
height: 22px;
}
.pagina .curso-tutor__titulo {
margin: 0 0 6px;
color: var(--noche);
font: 700 19px/1.25 Roboto, sans-serif;
}
.pagina .curso-tutor > p:not(.curso-tutor__titulo) {
margin: 0 0 16px;
color: var(--texto-suave);
font-size: 15px;
line-height: 1.5;
}
.pagina .curso-tutor .curso-boton {
width: 100%;
box-sizing: border-box;
}
.curso-acceso,
.curso-como {
border: 1px solid var(--curso-borde);
border-radius: var(--radio-l);
padding: 24px;
background: var(--blanco);
}
.pagina .curso-acceso__titulo,
.pagina .curso-como__titulo {
margin: 0 0 8px;
color: var(--noche);
font: 700 20px/1.25 Roboto, sans-serif;
}
.pagina .curso-acceso > p:not(.curso-acceso__titulo) {
margin: 0 0 16px;
color: var(--texto-suave);
font-size: 15px;
line-height: 1.55;
} .curso-acceso--muestra {
margin-top: 28px;
border-color: #bfe0f7;
background: #f2f9fe;
}
.pagina .curso-acceso--muestra > p.curso-acceso__botones {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
}
.curso-acceso--muestra .curso-boton {
text-decoration: none;
}
.pagina .curso-como ol {
margin: 12px 0 0;
padding-left: 1.2em;
color: var(--texto-suave);
font-size: 15px;
line-height: 1.55;
}
.pagina .curso-como li + li {
margin-top: 8px;
} .curso-acceso #wpmem_login legend {
position: absolute !important;
width: 1px !important;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.curso-acceso #wpmem_login {
margin: 0;
border: 0;
padding: 0;
box-shadow: none;
} .pagina > .curso-leccion {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
align-items: start;
gap: 40px;
margin-top: 0;
margin-bottom: 72px;
}
.pagina .curso-leccion h1,
.pagina .curso-evaluacion h1 {
margin: 0 0 24px;
color: var(--noche);
font: 700 clamp(26px, 2.6vw, 34px) / 1.2 Roboto, sans-serif;
letter-spacing: -0.015em;
text-transform: none;
text-wrap: balance;
} .pagina .curso-partes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
margin: 0 0 16px;
padding: 0;
list-style: none;
}
.pagina .curso-partes__parte {
margin: 0;
}
.pagina ol.curso-partes > li > a[href],
.pagina .curso-partes__parte > :is(a, span) {
display: flex;
align-items: center;
gap: 10px;
height: 100%;
border: 1px solid var(--curso-borde);
border-radius: 14px;
padding: 10px 14px;
background: var(--blanco);
color: var(--noche);
text-decoration: none;
transition: border-color var(--transicion), background var(--transicion);
box-sizing: border-box;
}
.pagina ol.curso-partes > li > a[href]:hover {
border-color: var(--azul);
color: var(--noche);
}
.pagina .curso-partes__parte.is-actual > a {
border-color: var(--azul);
background: rgba(19, 175, 249, 0.07);
box-shadow: 0 0 0 1px var(--azul);
}
.curso-partes__icono {
display: grid;
flex: none;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(19, 175, 249, 0.12);
color: var(--azul-hondo);
}
.curso-partes__icono .icono {
width: 16px;
height: 16px;
}
.is-vista .curso-partes__icono {
background: rgba(29, 154, 99, 0.12);
color: #1d9a63;
}
.is-cerrada .curso-partes__icono {
background: #eceef2;
color: #9aa1b0;
}
.curso-partes__texto {
display: flex;
flex-direction: column;
min-width: 0;
}
.curso-partes__n {
color: var(--texto-suave);
font: 600 11px/1.3 Roboto, sans-serif;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.curso-partes__titulo {
font: 500 14px/1.35 Roboto, sans-serif;
}
.is-cerrada .curso-partes__titulo {
color: #6b7285;
}
.curso-video {
margin: 0 0 28px;
}
.pagina .curso-video__titulo {
margin: 0 0 10px;
color: var(--noche);
font: 600 16px/1.3 Roboto, sans-serif;
}
.curso-video__marco {
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: 16px;
background: var(--noche);
}
.curso-video__marco :is(mux-player, iframe) {
display: block;
width: 100%;
height: 100%;
border: 0;
--media-object-fit: contain;
}
.pagina .curso-video__error {
display: grid;
place-items: center;
height: 100%;
margin: 0;
padding: 24px;
color: var(--blanco);
text-align: center;
}
.pagina .curso-video__estado {
display: flex;
align-items: center;
margin: 10px 0 0;
color: var(--texto-suave);
font: 500 14px/1.3 Roboto, sans-serif;
}
.curso-video__visto {
display: none;
align-items: center;
gap: 6px;
color: #1d9a63;
}
.curso-video__visto .icono {
width: 18px;
height: 18px;
}
.curso-video__pendiente {
display: flex;
flex: 1;
align-items: center;
gap: 12px;
}
.curso-video__pendiente .curso-barra {
flex: 1;
max-width: 260px;
}
.curso-video.is-visto .curso-video__visto {
display: inline-flex;
}
.curso-video.is-visto .curso-video__pendiente {
display: none;
}
.pagina .curso-leccion__texto {
margin: 8px 0 28px;
color: #2c3243;
font-size: 17px;
line-height: 1.7;
}
.pagina .curso-recursos {
margin: 0 0 32px;
}
.pagina .curso-recursos h2 {
margin: 0 0 12px;
color: var(--noche);
font: 700 20px/1.3 Roboto, sans-serif;
text-transform: none;
}
.pagina .curso-recursos ul {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.pagina .curso-recursos li {
margin: 0;
}
.pagina .curso-recursos ul > li > a[href],
.pagina .curso-recursos a {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--curso-borde);
border-radius: 14px;
padding: 14px 16px;
background: var(--blanco);
color: var(--noche);
text-decoration: none;
transition: border-color var(--transicion);
}
.pagina .curso-recursos ul > li > a[href]:hover,
.pagina .curso-recursos a:hover {
border-color: var(--azul);
}
.curso-recursos .icono {
flex: none;
width: 20px;
height: 20px;
color: var(--azul-hondo);
}
.curso-recursos__titulo {
flex: 1;
font: 500 15px/1.4 Roboto, sans-serif;
}
.curso-recursos__tipo {
color: var(--texto-suave);
font: 500 12px/1 Roboto, sans-serif;
}
.curso-pasos {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
border-top: 1px solid #eceef2;
padding-top: 24px;
}
.pagina .curso-pasos__aviso {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin: 12px 0 0;
color: var(--texto-suave);
font-size: 14px;
}
.curso-pasos__aviso .icono {
width: 16px;
height: 16px;
}
.curso-pasos__aviso.is-llamada {
animation: curso-llamada 0.5s;
color: var(--noche);
}
@keyframes curso-llamada {
25%,
75% {
transform: translateX(-4px);
}
50% {
transform: translateX(4px);
}
}
.curso-leccion__lateral {
position: sticky;
top: 130px;
}
.pagina .curso-leccion__progreso {
display: grid;
gap: 8px;
margin: 0 0 12px;
color: var(--noche);
font: 600 14px/1.3 Roboto, sans-serif;
}
.curso-leccion__lateral .curso-indice__paso > :is(a, span) {
padding: 10px 12px;
}
.curso-leccion__lateral .curso-indice__detalle {
display: none;
}
.curso-leccion__lateral .curso-indice__titulo {
font-size: 14px;
}
.curso-leccion__lateral .curso-indice__icono {
width: 28px;
height: 28px;
}
.curso-leccion__lateral .curso-indice {
max-height: calc(100vh - 220px);
overflow-y: auto;
} .pagina > .curso-evaluacion {
max-width: 780px;
margin: 0 auto 72px;
padding: 0 20px;
box-sizing: content-box;
}
.pagina .curso-cuestionario__ayuda {
margin: 0 0 24px;
border-radius: 14px;
padding: 14px 18px;
background: #f1f5f9;
color: var(--noche);
font-size: 15px;
line-height: 1.55;
}
.pagina .curso-preguntas {
margin: 0 0 28px;
padding: 0;
list-style: none;
counter-reset: pregunta;
}
.pagina .curso-pregunta {
margin: 0 0 16px;
border: 1px solid var(--curso-borde);
border-radius: var(--radio-l);
padding: 20px 22px;
background: var(--blanco);
counter-increment: pregunta;
}
.curso-pregunta fieldset {
margin: 0;
border: 0;
padding: 0;
}
.pagina .curso-pregunta legend {
display: flex;
gap: 10px;
margin: 0 0 14px;
padding: 0;
color: var(--noche);
font: 600 17px/1.45 Roboto, sans-serif;
}
.curso-pregunta__n {
flex: none;
color: var(--azul-hondo);
}
.pagina .curso-respuesta {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0 0 8px;
border: 1px solid #e3e6eb;
border-radius: 12px;
padding: 12px 14px;
color: #2c3243;
font: 400 16px/1.5 Roboto, sans-serif;
cursor: pointer;
transition: border-color var(--transicion), background var(--transicion);
}
.pagina .curso-respuesta:hover {
border-color: var(--azul);
}
.pagina .curso-respuesta:has(input:checked) {
border-color: var(--azul);
background: rgba(19, 175, 249, 0.07);
}
.curso-respuesta input {
flex: none;
width: 18px;
height: 18px;
margin: 3px 0 0;
accent-color: var(--azul-hondo);
} .curso-cuestionario__progreso {
position: sticky;
z-index: 2;
top: 100px;
margin: 0 0 14px;
border: 1px solid var(--curso-borde);
border-radius: 14px;
padding: 14px 18px;
background: var(--blanco);
}
.pagina .curso-cuestionario__progreso p {
display: flex;
justify-content: space-between;
gap: 12px;
margin: 0 0 10px;
color: var(--noche);
font: 600 15px/1.3 Roboto, sans-serif;
}
.pagina .curso-cuestionario__progreso .curso-cuestionario__criterio {
margin: 10px 0 0;
color: var(--texto-suave);
font: 400 13px/1.3 Roboto, sans-serif;
}
.curso-cuestionario__hechas {
color: var(--texto-suave);
font-weight: 400;
}
.curso-cuestionario.is-de-una .curso-pregunta:not(.is-actual) {
display: none;
}
.curso-cuestionario.is-de-una .curso-pregunta {
margin-bottom: 16px;
padding: 22px 26px;
} .curso-cuestionario.is-de-una .curso-cuestionario__ayuda {
display: none;
}
.curso-cuestionario.is-de-una ~ *,
.pagina--curso:has(.curso-cuestionario.is-de-una) .curso-evaluacion h1 {
margin-bottom: 16px;
}
.curso-cuestionario.is-de-una .curso-pregunta legend {
font-size: 19px;
} .curso-cuestionario.is-de-una .curso-cuestionario__nav {
position: sticky;
z-index: 2;
bottom: 0;
margin: 0 -4px;
padding: 14px 4px calc(14px + env(safe-area-inset-bottom));
background: linear-gradient(to bottom, rgba(249, 249, 249, 0), var(--fondo) 30%);
} body:has(.curso-cuestionario.is-de-una) .volver-area {
display: none !important;
}
.curso-cuestionario__nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.curso-cuestionario__atras {
margin-right: auto;
}
.curso-cuestionario__nav [hidden] {
display: none !important;
}
.curso-cuestionario__siguiente:disabled,
.curso-cuestionario__enviar:disabled {
border-color: #e3e6eb;
background: #eceef2;
color: #9aa1b0;
cursor: not-allowed;
}
.curso-resultado {
display: flex;
align-items: center;
gap: 24px;
margin: 0 0 28px;
border: 1px solid var(--curso-borde);
border-radius: var(--radio-l);
padding: 24px;
background: var(--blanco);
}
.curso-resultado.is-aprobado {
border-color: rgba(29, 154, 99, 0.35);
background: #f3fbf7;
}
.curso-resultado__nota {
flex: none;
color: var(--noche);
font: 700 48px/1 Roboto, sans-serif;
}
.curso-resultado__nota small {
font-size: 24px;
}
.is-aprobado .curso-resultado__nota {
color: #1d9a63;
}
.curso-resultado__icono .icono {
width: 44px;
height: 44px;
color: var(--azul-hondo);
}
.is-aprobado .curso-resultado__icono .icono {
color: #1d9a63;
}
.pagina .curso-resultado__titulo {
margin: 0 0 4px;
color: var(--noche);
font: 700 20px/1.3 Roboto, sans-serif;
}
.pagina .curso-resultado p:not(.curso-resultado__titulo) {
margin: 0 0 14px;
color: var(--texto-suave);
}
.pagina .curso-falladas h2 {
margin: 0 0 10px;
color: var(--noche);
font: 700 18px/1.3 Roboto, sans-serif;
text-transform: none;
}
.pagina .curso-falladas ul {
margin: 0 0 32px;
padding-left: 1.2em;
color: var(--texto-suave);
} .pagina > .curso-verificacion {
max-width: 620px;
margin: 0 auto 72px;
border: 1px solid var(--curso-borde);
border-radius: var(--radio-l);
padding: 40px;
background: var(--blanco);
text-align: center;
box-sizing: border-box;
}
.curso-verificacion__icono .icono {
width: 56px;
height: 56px;
color: #1d9a63;
}
.curso-verificacion--no .curso-verificacion__icono .icono {
color: #c9502f;
}
.pagina .curso-verificacion__etiqueta {
margin: 8px 0 6px;
color: #1d9a63;
font: 700 13px/1.2 Roboto, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.curso-verificacion--no .curso-verificacion__etiqueta {
color: #c9502f;
}
.pagina .curso-verificacion h1 {
margin: 0 0 24px;
color: var(--noche);
font: 700 clamp(24px, 3vw, 32px) / 1.2 Roboto, sans-serif;
text-transform: none;
}
.curso-verificacion dl {
display: grid;
gap: 0;
margin: 0 0 28px;
border-top: 1px solid #eceef2;
text-align: left;
}
.curso-verificacion dl > div {
display: grid;
grid-template-columns: 140px 1fr;
gap: 12px;
border-bottom: 1px solid #eceef2;
padding: 12px 0;
}
.curso-verificacion dt {
color: var(--texto-suave);
font-size: 14px;
}
.curso-verificacion dd {
margin: 0;
color: var(--noche);
font-weight: 500;
} .pagina .mis-cursos {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.pagina .mis-cursos__curso {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 20px;
margin: 0;
border: 1px solid var(--curso-borde);
border-radius: 16px;
padding: 18px 20px;
background: var(--blanco);
}
.pagina a.mis-cursos__titulo {
flex: 1 1 260px;
color: var(--noche);
font: 600 17px/1.35 Roboto, sans-serif;
text-decoration: none;
}
.mis-cursos__estado {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--texto-suave);
font-size: 14px;
}
.mis-cursos__estado--hecho {
color: #1d9a63;
}
.mis-cursos__estado .icono {
width: 18px;
height: 18px;
}
.mis-cursos__curso .curso-barra {
flex: 0 0 160px;
} @media (max-width: 960px) {
.pagina > .curso-cabecera,
.pagina > .curso-cuerpo,
.pagina > .curso-leccion {
grid-template-columns: minmax(0, 1fr);
}
.curso-cabecera__imagen {
order: -1;
}
.curso-lateral,
.curso-leccion__lateral {
position: static;
}
.curso-leccion__lateral .curso-indice {
max-height: none;
}
}
@media (max-width: 600px) {
.curso-resultado {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.pagina > .curso-verificacion {
padding: 28px 20px;
}
.curso-verificacion dl > div {
grid-template-columns: 1fr;
gap: 2px;
}
.curso-pasos .curso-boton {
flex: 1;
}
}