/* PI Cursos: se apoya en los estilos y variables del tema «paraguay-industria».
   Los valores después de la coma son de respaldo por si se usa otro tema. */

.pi-btn-ancho { width: 100%; white-space: normal; text-align: center; }
.pi-enlace-chico { display: inline-block; font-size: var(--t-sm, .875rem); color: var(--azul, #09234b); }
.pi-boton-texto { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font: inherit; }
.pi-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3, 12px); }
.pi-acciones .pi-btn-ancho { width: auto; }
.pi-bloque { margin-top: var(--e-7, 48px); }
.pi-bloque > h2 { font-size: var(--t-xl, 1.6rem); margin-bottom: var(--e-4, 16px); }
.pi-curso-foto { aspect-ratio: 16 / 10; }

/* ---------- Catálogo ---------- */
.pi-grilla-cursos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6, 32px) var(--e-5, 24px); }
.pi-tarjeta-curso { background: var(--papel, #fff); border: 1px solid var(--linea, #dde2e8); border-radius: var(--r-md, 8px); overflow: hidden; gap: 0; }
.pi-tarjeta-curso .foto, .pi-tarjeta-curso .reservado { border-radius: 0; }
.pi-tarjeta-curso__cuerpo { display: grid; gap: var(--e-2, 8px); padding: var(--e-4, 16px) var(--e-4, 16px) var(--e-5, 24px); }
.pi-tarjeta-curso__instructor { color: var(--gris-600, #4d5b6b); font-size: var(--t-sm, .875rem); margin: 0; }
.pi-precio { margin: var(--e-2, 8px) 0 0; font: 600 var(--t-md, 1.125rem)/1.2 var(--f-dato, monospace); color: var(--azul, #09234b); }
@media (max-width: 1024px) { .pi-grilla-cursos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pi-grilla-cursos { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Página del curso ---------- */
.pi-curso-meta { margin-top: var(--e-4, 16px); font-size: var(--t-sm, .875rem); }
.pi-curso__diseno { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--e-7, 48px); align-items: start; }
.pi-curso__principal > :first-child { margin-top: 0; }
.pi-curso__lateral { position: sticky; top: calc(var(--cab, 76px) + 24px); }
.pi-video-publico { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md, 8px); overflow: hidden; background: #000; }
.pi-video-publico iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pi-caja-compra { display: grid; gap: var(--e-3, 12px); padding: var(--e-5, 24px); background: var(--papel, #fff); border: 1px solid var(--linea, #dde2e8); border-top: 4px solid var(--naranja, #f47b12); border-radius: var(--r-md, 8px); box-shadow: var(--sombra-2, none); }
.pi-caja-compra p { margin: 0; }
.pi-caja-compra__etiqueta { font: 600 var(--t-xs, .75rem)/1 var(--f-texto, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--gris-600, #4d5b6b); }
.pi-caja-compra__precio { font: 650 var(--t-2xl, 2rem)/1.1 var(--f-titular, serif); color: var(--azul, #09234b); }
.pi-caja-compra__nota { font-size: var(--t-sm, .875rem); color: var(--gris-600, #4d5b6b); }
.pi-caja-compra__estado { font-weight: 600; color: var(--ok, #1f7a4d); }
.pi-caja-compra__datos { list-style: none; margin: var(--e-2, 8px) 0 0; padding: var(--e-3, 12px) 0 0; border-top: 1px solid var(--linea, #dde2e8); display: grid; gap: var(--e-2, 8px); font-size: var(--t-sm, .875rem); }
.pi-caja-compra__datos li { display: flex; justify-content: space-between; gap: var(--e-3, 12px); }
.pi-caja-compra__datos span { color: var(--gris-600, #4d5b6b); }
.pi-caja-compra__datos strong { text-align: right; color: var(--grafito, #263443); }

.pi-temario { display: grid; gap: var(--e-2, 8px); }
.pi-temario__modulo { background: var(--papel, #fff); border: 1px solid var(--linea, #dde2e8); border-radius: var(--r-md, 8px); }
.pi-temario__modulo summary { display: grid; grid-template-columns: auto 1fr auto; gap: 4px var(--e-3, 12px); align-items: baseline; padding: var(--e-4, 16px); cursor: pointer; list-style: none; }
.pi-temario__modulo summary::-webkit-details-marker { display: none; }
.pi-temario__modulo summary::after { content: "+"; grid-column: 3; grid-row: 1; font-weight: 600; color: var(--azul, #09234b); }
.pi-temario__modulo[open] summary::after { content: "−"; }
.pi-temario__numero { font: 600 var(--t-xs, .75rem)/1.4 var(--f-texto, sans-serif); text-transform: uppercase; letter-spacing: .08em; color: var(--naranja-texto, #b45309); }
.pi-temario__titulo { font-weight: 600; color: var(--azul, #09234b); grid-column: 1 / 3; }
.pi-temario__cuenta { grid-column: 2; grid-row: 1; justify-self: end; font-size: var(--t-xs, .75rem); color: var(--gris-600, #4d5b6b); }
.pi-temario ol { margin: 0; padding: 0 var(--e-4, 16px) var(--e-4, 16px) calc(var(--e-4, 16px) + 1.3em); display: grid; gap: 6px; font-size: var(--t-sm, .875rem); }

@media (max-width: 1024px) {
	.pi-curso__diseno { grid-template-columns: minmax(0, 1fr); gap: var(--e-6, 32px); }
	.pi-curso__lateral { position: static; order: -1; }
	.pi-curso__principal { display: contents; }
	.pi-curso__principal > .pi-video-publico, .pi-curso__principal > .foto { order: -2; }
}

/* ---------- Lección ---------- */
.pi-leccion { padding-block: var(--e-6, 32px) var(--e-8, 64px); }
.pi-leccion__diseno { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--e-6, 32px); align-items: start; }
.pi-leccion__principal { min-width: 0; display: grid; gap: var(--e-5, 24px); }
.pi-leccion__principal > .pi-bloque { margin-top: var(--e-3, 12px); }
.pi-leccion__lateral { position: sticky; top: calc(var(--cab, 76px) + 16px); }

.pi-video { position: relative; background: #000; border-radius: var(--r-md, 8px); overflow: hidden; }
.pi-video__marco { position: relative; aspect-ratio: 16 / 9; width: 100%; }
.pi-video__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pi-video__marca { position: absolute; z-index: 2; top: 10%; left: 10%; max-width: 70%; padding: 2px 6px; pointer-events: none; user-select: none; -webkit-user-select: none; font: 600 clamp(11px, 1.6vw, 15px)/1.35 var(--f-texto, sans-serif); color: rgba(255, 255, 255, .5); text-shadow: 0 0 3px rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .6s; }
.pi-video__marca.pi-oculta { opacity: 0; }
.pi-video__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3, 12px); padding: 8px 12px; background: var(--azul-900, #061733); color: #c3cedd; font-size: var(--t-xs, .75rem); }
.pi-video__pantalla { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--r-sm, 4px); background: transparent; color: #fff; font: 600 var(--t-xs, .75rem)/1 var(--f-texto, sans-serif); cursor: pointer; }
.pi-video__pantalla:hover { border-color: #fff; }
/* Pantalla completa: real (Android, computadora) o simulada (iPhone). La marca sigue visible. */
.pi-video:fullscreen, .pi-video.pi-video--ampliado { display: flex; flex-direction: column; justify-content: center; border-radius: 0; width: 100%; height: 100%; }
.pi-video:-webkit-full-screen { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; }
.pi-video.pi-video--ampliado { position: fixed; inset: 0; z-index: 100000; height: 100vh; height: 100dvh; }
.pi-video:fullscreen .pi-video__marco, .pi-video.pi-video--ampliado .pi-video__marco { flex: 1; aspect-ratio: auto; }
.pi-video:-webkit-full-screen .pi-video__marco { flex: 1; aspect-ratio: auto; }
.pi-sin-desplazar { overflow: hidden; }
@media (max-width: 560px) { .pi-video__aviso { display: none; } .pi-video__barra { justify-content: flex-end; } .pi-video { border-radius: 0; margin-inline: calc(var(--gutter, 20px) * -1); } }

.pi-leccion__texto > :last-child { margin-bottom: 0; }
.pi-archivos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2, 8px); }
.pi-archivos a { display: flex; align-items: center; gap: var(--e-3, 12px); min-height: 52px; padding: 10px 14px; background: var(--papel, #fff); border: 1px solid var(--linea, #dde2e8); border-radius: var(--r-md, 8px); text-decoration: none; font-weight: 600; }
.pi-archivos a:hover { border-color: var(--azul, #09234b); }
.pi-archivos a span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pi-archivos small { color: var(--gris-600, #4d5b6b); font-weight: 400; }
.pi-practica { padding: var(--e-5, 24px); background: var(--naranja-100, #fdeedf); border-radius: var(--r-md, 8px); }
.pi-practica .contenido { font-size: var(--t-base, 1rem); }
.pi-practica__nota { margin: var(--e-2, 8px) 0 0; font-size: var(--t-xs, .75rem); color: var(--gris-600, #4d5b6b); }
.pi-completar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3, 12px); padding: var(--e-4, 16px); background: var(--papel, #fff); border: 1px solid var(--linea, #dde2e8); border-radius: var(--r-md, 8px); }
.pi-completar .btn { flex: 1 1 auto; }
.pi-completar__ok { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--ok, #1f7a4d); }

.pi-navegacion { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3, 12px); }
.pi-navegacion a { display: grid; gap: 2px; padding: 12px 14px; background: var(--papel, #fff); border: 1px solid var(--linea, #dde2e8); border-radius: var(--r-md, 8px); text-decoration: none; min-width: 0; }
.pi-navegacion a:hover { border-color: var(--azul, #09234b); }
.pi-navegacion small { font: 600 var(--t-xs, .75rem)/1.2 var(--f-texto, sans-serif); text-transform: uppercase; letter-spacing: .08em; color: var(--gris-600, #4d5b6b); }
.pi-navegacion span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-navegacion__ant small::before { content: "← "; }
.pi-navegacion__sig { text-align: right; grid-column: 2; }
.pi-navegacion__sig small::after { content: " →"; }

.pi-sin-acceso { display: grid; gap: var(--e-3, 12px); justify-items: start; padding: var(--e-6, 32px); background: var(--papel, #fff); border: 1px dashed var(--linea-fuerte, #c5ccd5); border-radius: var(--r-md, 8px); }
.pi-sin-acceso h2 { font-size: var(--t-xl, 1.5rem); }
.pi-sin-acceso p { margin: 0; color: var(--gris-600, #4d5b6b); }
.pi-sin-acceso__icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--azul-100, #e6ebf3); color: var(--azul, #09234b); }

.pi-indice { background: var(--papel, #fff); border: 1px solid var(--linea, #dde2e8); border-radius: var(--r-md, 8px); padding: var(--e-4, 16px); font-size: var(--t-sm, .875rem); }
.pi-indice summary { display: grid; gap: var(--e-2, 8px); cursor: pointer; font: 650 var(--t-md, 1.125rem)/1.2 var(--f-titular, serif); color: var(--azul, #09234b); list-style: none; }
.pi-indice summary::-webkit-details-marker { display: none; }
.pi-indice__modulo { margin: var(--e-4, 16px) 0 6px; font: 600 var(--t-xs, .75rem)/1.3 var(--f-texto, sans-serif); text-transform: uppercase; letter-spacing: .08em; color: var(--naranja-texto, #b45309); }
.pi-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pi-indice li a { display: flex; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm, 4px); text-decoration: none; color: var(--grafito, #263443); }
.pi-indice li a::before { content: ""; flex-shrink: 0; width: 14px; height: 14px; margin-top: 3px; border: 1.5px solid var(--linea-fuerte, #c5ccd5); border-radius: 50%; }
.pi-indice li.hecha a::before { background: var(--ok, #1f7a4d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 9px no-repeat; border-color: var(--ok, #1f7a4d); }
.pi-indice li.actual a { background: var(--azul-100, #e6ebf3); font-weight: 600; color: var(--azul, #09234b); }
.pi-indice li a:hover { background: var(--blanco, #f5f6f8); }

@media (max-width: 1024px) {
	.pi-leccion__diseno { grid-template-columns: minmax(0, 1fr); }
	.pi-leccion__lateral { position: static; }
	.pi-indice:not([open]) summary .pi-progreso { display: flex; }
}
@media (max-width: 560px) {
	.pi-navegacion { grid-template-columns: minmax(0, 1fr); }
	.pi-navegacion__sig { grid-column: 1; grid-row: 1; }
	.pi-sin-acceso { padding: var(--e-5, 24px); }
	.pi-acciones > *, .pi-acciones .pi-btn-ancho { width: 100%; }
}

/* ---------- Progreso ---------- */
.pi-progreso { display: flex; align-items: center; gap: var(--e-3, 12px); font: 400 var(--t-xs, .75rem)/1.2 var(--f-texto, sans-serif); color: var(--gris-600, #4d5b6b); }
.pi-progreso__barra { flex: 1; height: 8px; border-radius: 99px; background: var(--azul-100, #e6ebf3); overflow: hidden; }
.pi-progreso__barra span { display: block; height: 100%; background: var(--ok, #1f7a4d); border-radius: inherit; }
.pi-progreso__texto { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Mis cursos ---------- */
.pi-mis-cursos { display: grid; gap: var(--e-5, 24px); }
.pi-mis-cursos__saludo { margin: 0; }
.pi-lista-mis-cursos { display: grid; gap: var(--e-4, 16px); }
.pi-mi-curso { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--e-5, 24px); padding: var(--e-4, 16px); background: var(--papel, #fff); border: 1px solid var(--linea, #dde2e8); border-radius: var(--r-md, 8px); align-items: center; }
.pi-mi-curso h2 { font-size: var(--t-lg, 1.375rem); margin: 0; }
.pi-mi-curso__cuerpo { display: grid; gap: var(--e-3, 12px); justify-items: start; }
.pi-mi-curso__cuerpo .pi-progreso { width: 100%; max-width: 420px; }
.pi-mi-curso__vence { margin: 0; font-size: var(--t-sm, .875rem); color: var(--gris-600, #4d5b6b); }
.pi-mi-curso--vencido .foto { filter: grayscale(1); opacity: .7; }
.pi-mi-curso .aviso { margin: 0; }
@media (max-width: 560px) {
	.pi-mi-curso { grid-template-columns: minmax(0, 1fr); gap: var(--e-3, 12px); }
	.pi-mi-curso__cuerpo .btn { width: 100%; }
}
.pi-ingreso { max-width: 420px; display: grid; gap: var(--e-3, 12px); }
.pi-ingreso form p { display: grid; gap: 6px; margin: 0 0 var(--e-3, 12px); }
.pi-ingreso label { font-weight: 600; font-size: var(--t-sm, .875rem); }
.pi-ingreso input[type="password"] { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linea-fuerte, #c5ccd5); border-radius: var(--r-sm, 4px); font: inherit; }
.pi-ingreso .login-remember label { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.pi-ingreso input[type="submit"] { width: 100%; min-height: 44px; border: 0; border-radius: var(--r-sm, 4px); background: var(--azul, #09234b); color: #fff; font: 600 var(--t-sm, .875rem)/1 var(--f-texto, sans-serif); cursor: pointer; }
.pi-ingreso__ayuda { font-size: var(--t-sm, .875rem); }

/* «Mis cursos» vive dentro del contenido de una página: el tema pinta de azul los enlaces de .contenido. */
.contenido .pi-mis-cursos .btn, .contenido .pi-ingreso .btn { text-decoration: none; font-weight: 600; }
.contenido .pi-mis-cursos .btn--secundario, .contenido .pi-mis-cursos .btn--secundario:hover { color: #fff; }
.contenido .pi-mis-cursos .btn--primario, .contenido .pi-mis-cursos .btn--primario:hover { color: var(--azul-900, #061733); }
.contenido .pi-mis-cursos h2 { margin: 0; }
.contenido .pi-mi-curso .foto img, .contenido .pi-mi-curso .reservado { margin: 0; }
@media (max-width: 560px) {
	.pi-mi-curso .reservado { --ratio: 16 / 7; }
	.pi-mi-curso .foto { aspect-ratio: 16 / 7; }
}