@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

.sb-classroom,
.sb-classroom *{box-sizing:border-box}
.sb-classroom{
	--sb-classroom-accent:#F30612;
	--sb-classroom-border:#dfe3e8;
	--sb-classroom-muted:#314D17;
	--sb-classroom-soft:#f8f9fb;
	width:100%;
	padding:34px 20px 56px;
	background:#F9F2EA;
	color:#314D17;
	font-family:"Montserrat",Arial,sans-serif;
}
.sb-classroom-shell{width:100%;max-width:1120px;margin:0 auto}
.sb-classroom-header{max-width:800px;margin-bottom:18px}
.sb-classroom-date{margin-bottom:22px;color:#314D17;font-family:"Montserrat",Arial,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase}
.sb-classroom h1{max-width:760px;margin:0 0 26px;color:#F30612;font-family:"Montserrat",Arial,sans-serif;font-size:clamp(34px,5vw,52px);line-height:1.08;letter-spacing:-.035em;font-weight:800}
.sb-classroom-description{max-width:720px;margin:0 0 16px;color:#314D17;font-size:14px;line-height:1.65}
.sb-course-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:590px;margin:14px 0}
.sb-course-stat{display:grid;place-items:center;min-height:62px;padding:8px;border:1px solid var(--sb-classroom-border);border-radius:6px;background:#fff;text-align:center}
.sb-course-stat strong{color:#314D17;font-size:16px;line-height:1.1}
.sb-course-stat span{margin-top:4px;color:var(--sb-classroom-muted);font-size:12px}
.sb-progress-card{max-width:590px;margin:12px 0 20px;padding:12px;border:1px solid var(--sb-classroom-border);border-radius:6px;background:#fff}
.sb-progress-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;color:#314D17;font-size:14px}
.sb-progress-label strong{color:#314D17}
.sb-progress-track{height:6px;overflow:hidden;border-radius:999px;background:#ececf3}
.sb-progress-track span{display:block;height:100%;border-radius:inherit;background:var(--sb-classroom-accent);transition:width .25s ease}

.sb-classroom-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start;max-width:920px}
.sb-course-sidebar{overflow:hidden;border:1px solid var(--sb-classroom-border);border-radius:6px;background:#F9F2EA}
.sb-sidebar-module+.sb-sidebar-module{border-top:1px solid var(--sb-classroom-border)}
.sb-sidebar-module-title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:14px 12px 9px;background:#F9F2EA}
.sb-sidebar-module-title strong{max-width:175px;color:#F30612;font-family:"Montserrat",Arial,sans-serif;font-size:14px;line-height:1.45;font-weight:800}
.sb-sidebar-module-title span{flex:0 0 auto;color:#314D17;font-size:12px;white-space:nowrap}
.sb-sidebar-lessons{padding:4px 7px 8px}
.sb-sidebar-lesson{display:grid;grid-template-columns:16px minmax(0,1fr) 10px;gap:6px;align-items:center;padding:7px 5px;border-radius:5px;color:#314D17!important;text-decoration:none!important}
.sb-sidebar-lesson:hover,.sb-sidebar-lesson.is-active{background:#f6f2ff}
.sb-lesson-play{display:grid;place-items:center;width:14px;height:14px;border:1px solid #d5c5ff;border-radius:50%;color:var(--sb-classroom-accent);font-size:6px}
.sb-lesson-nav-text{min-width:0}
.sb-lesson-nav-text strong{display:block;color:#314D17;font-family:"Montserrat",Arial,sans-serif;font-size:14px;line-height:1.35;font-weight:700}
.sb-lesson-nav-text small{display:block;margin-top:3px;color:#314D17;font-size:12px;text-transform:uppercase}
.sb-complete-dot{width:7px;height:7px;border:1px solid #cfd4dc;border-radius:50%}
.sb-complete-dot.is-complete{border-color:var(--sb-classroom-accent);background:var(--sb-classroom-accent)}

.sb-lesson-stage{overflow:hidden;border:1px solid var(--sb-classroom-border);border-radius:6px;background:#fff;box-shadow:0 7px 18px rgba(15,23,42,.06)}
.sb-video-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#111}
.sb-video-frame iframe{display:block;width:100%!important;height:100%!important;border:0}
.sb-video-poster{position:absolute;inset:0;z-index:3;display:grid;width:100%;height:100%;place-items:center;border:0;background-position:center;background-size:cover;cursor:pointer}
.sb-video-poster[hidden],.sb-video-poster.is-playing{display:none!important}
.sb-video-poster::before{content:"";position:absolute;inset:0;background:rgba(49,77,23,.16)}
.sb-video-poster span{position:relative;display:grid;width:62px;height:62px;place-items:center;padding-left:4px;border-radius:50%;background:#F30612;color:#fff;font-size:24px;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.sb-video-fallback{display:grid;place-items:center;width:100%;height:100%;min-height:260px;color:#fff}
.sb-video-fallback a{color:#fff!important}
.sb-lesson-content{padding:16px 14px 14px}
.sb-free-label{margin-bottom:6px;color:#314D17;font-family:"Montserrat",Arial,sans-serif;font-size:11px;font-weight:800;text-transform:uppercase}
.sb-lesson-content h2{margin:0 0 10px;color:#F30612;font-family:"Montserrat",Arial,sans-serif;font-size:17px;line-height:1.35;font-weight:800}
.sb-lesson-description{margin:0 0 13px;color:#314D17;font-size:11px;line-height:1.65}
.sb-lesson-resources-public{margin:12px 0}
.sb-public-resource-title{margin-bottom:7px;color:#F30612;font-family:"Montserrat",Arial,sans-serif;font-size:10px;font-weight:800;text-transform:uppercase}
.sb-public-resource-links{display:flex;flex-wrap:wrap;gap:7px}
.sb-public-resource{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid #d9ccff;border-radius:5px;background:#faf8ff;color:#314D17!important;font-size:10px;font-weight:700;line-height:1.2;text-decoration:none!important}
.sb-public-resource:hover{background:#f2edff}
.sb-public-resource span{font-size:12px}
.sb-complete-button{margin-top:8px;padding:9px 13px;border:1px solid var(--sb-classroom-accent);border-radius:4px;background:#fff;color:var(--sb-classroom-accent);font-size:14px;font-weight:700;cursor:pointer}
.sb-complete-button.is-complete{background:var(--sb-classroom-accent);color:#fff}
.sb-empty-course{padding:24px;border:1px solid var(--sb-classroom-border);border-radius:6px;background:#fff}
.sb-sidebar-lesson.is-locked{opacity:.55;cursor:not-allowed}
.sb-course-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 16px;border:0;border-radius:8px;background:#F30612;color:#fff!important;font-family:"Montserrat",Arial,sans-serif;font-size:14px;font-weight:800;text-decoration:none!important}
.sb-course-button small{font-size:.9em}
.sb-course-button-disabled{opacity:.55;cursor:not-allowed}
.sb-purchase-callout{display:flex;max-width:760px;align-items:center;justify-content:space-between;gap:16px;margin:16px 0 22px;padding:16px;border:1px solid rgba(49,77,23,.18);border-radius:9px;background:#fff8f8}
.sb-purchase-callout>div{display:flex;flex-direction:column;gap:4px}
.sb-purchase-callout strong,.sb-purchase-callout span{color:#314D17}
.sb-purchase-callout span{font-size:14px}
.sb-locked-course{display:grid;min-height:320px;place-items:center;align-content:center;gap:10px;padding:30px;color:#314D17;text-align:center}
.sb-locked-course p{color:#314D17}
.sb-locked-course h2{color:#F30612;font-family:"Montserrat",Arial,sans-serif}


/* En computador permanece visible TODO el panel de la lección (video + contenido)
   mientras el alumno recorre los módulos de la columna izquierda.
   El sticky se aplica al panel completo, no al video, para que no termine antes de tiempo. */
@media(min-width:801px){
	.sb-classroom-layout{align-items:start}
	.sb-lesson-stage{
		position:sticky;
		top:24px;
		align-self:start;
		overflow:hidden;
		z-index:20;
		max-height:calc(100vh - 48px);
		overflow-y:auto;
		overscroll-behavior:contain
	}
	.sb-video-frame{
		position:relative;
		top:auto;
		z-index:auto;
		border-radius:0;
		box-shadow:none
	}
}
@media(max-width:800px){
	.sb-classroom{padding:24px 14px 40px}
	.sb-classroom-layout{grid-template-columns:1fr}
	.sb-course-sidebar{order:2}
	.sb-lesson-stage{order:1}
	.sb-classroom-header{max-width:none}
	.sb-course-stats,.sb-progress-card{max-width:none}
	.sb-purchase-callout{align-items:stretch;flex-direction:column}
}
@media(max-width:520px){
	.sb-classroom h1{font-size:34px}
	.sb-course-stats{gap:5px}
	.sb-course-stat{min-height:58px}
	.sb-sidebar-module-title strong{max-width:230px}
}