.cursos-app {
    --curso-primary: #007f41;
    --curso-border: #dfe5e2;
    --curso-muted: #637169;
    color: #24312b;
}
.cursos-app * { box-sizing: border-box; }
.cursos-app #cursosConteudo { min-width: 0; }
.cursos-app h1, .cursos-app h2, .cursos-app h3 { font-weight: 700; margin: 0; }
.cursos-app h1 { font-size: clamp(1.4rem, 3vw, 2rem); }
.cursos-app h2 { font-size: 1.15rem; }
.cursos-app h3 { font-size: 1rem; }
.cursos-app p { color: var(--curso-muted); white-space: pre-line; overflow-wrap: anywhere; }
.cursos-app a { text-decoration: none; }
.cursos-app .cursos-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    padding: 1.5rem; margin-bottom: 1rem; background: #eff7f2;
    border: 1px solid var(--curso-border); border-radius: .75rem;
}
.cursos-app .cursos-hero img { width: min(14rem, 30vw); max-height: 6rem; object-fit: contain; }
.cursos-app .cursos-hero p { margin: .75rem 0 0; }
.cursos-app .cursos-eyebrow { color: var(--curso-primary); text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; font-weight: 700; }
.cursos-app .cursos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem; }
.cursos-app .curso-card { border: 1px solid var(--curso-border); background: white; border-radius: .75rem; overflow: hidden; box-shadow: 0 3px 12px #163e2310; display: flex; flex-direction: column; }
.cursos-app .curso-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.cursos-app .curso-heading { display: flex; align-items: center; gap: .75rem; }
.cursos-app .curso-icon, .cursos-app .modulo-number { display: grid; place-items: center; flex: none; background: #e6f3eb; color: var(--curso-primary); border-radius: .6rem; width: 2.75rem; height: 2.75rem; font-weight: 700; }
.cursos-app .curso-heading small { color: var(--curso-muted); }
.cursos-app .curso-card footer { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; background: #f7f9f8; padding: 1rem 1.25rem; border-top: 1px solid var(--curso-border); }
.cursos-app .curso-progress { height: .55rem; margin-top: auto; border-radius: 1rem; background: #e7ece9; overflow: hidden; }
.cursos-app .curso-progress span { display: block; height: 100%; background: #169b53; }
.cursos-app .curso-button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; padding: .65rem 1rem; border: 1px solid var(--curso-primary); border-radius: .4rem; background: var(--curso-primary); color: white; font-weight: 600; text-align: center; }
.cursos-app .curso-button:hover { background: #006333; color: white; }
.cursos-app .curso-button[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.cursos-app .curso-button:disabled { opacity: .55; cursor: wait; }
.cursos-app .curso-secondary { background: white; color: var(--curso-primary); }
.cursos-app .curso-back { display: inline-block; color: var(--curso-primary); font-weight: 600; margin-bottom: 1rem; }
.cursos-app .cursos-state { padding: 1.25rem; background: #f5f8f6; border: 1px solid var(--curso-border); border-radius: .5rem; }
.cursos-app .modulos-list, .cursos-app .aulas-list { display: grid; gap: 1rem; }
.cursos-app .modulo-card, .cursos-app .aula-card { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem; border: 1px solid var(--curso-border); border-radius: .75rem; background: white; }
.cursos-app .modulo-content { flex: 1; min-width: 0; }
.cursos-app .modulo-content p { margin: .5rem 0; }
.cursos-app .aula-viewed { border-left: 4px solid #169b53; }
.cursos-app .aula-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 1.25rem; }
.cursos-app .aula-main { min-width: 0; }
.cursos-app .aula-topbar { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; align-items: baseline; }
.cursos-app .aula-video { width: 100%; aspect-ratio: 16/9; max-height: 65vh; display: block; background: #000; border-radius: .6rem; }
.cursos-app .aula-nav { display: flex; justify-content: space-between; gap: .75rem; margin: 1rem 0; }
.cursos-app .aula-detalhes { padding: 1.25rem; border: 1px solid var(--curso-border); border-radius: .6rem; }
.cursos-app .aula-detalhes p { margin: .75rem 0; }
.cursos-app .aula-materiais { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.cursos-app .aula-status { color: var(--curso-muted); font-size: .85rem; }
.cursos-app .aula-status.concluida { color: var(--curso-primary); }
.cursos-app .curso-curriculo { border: 1px solid var(--curso-border); border-radius: .6rem; overflow: hidden; align-self: start; background: white; }
.cursos-app .curso-curriculo header { padding: 1rem; background: #eff7f2; }
.cursos-app .curso-curriculo details { border-top: 1px solid var(--curso-border); }
.cursos-app .curso-curriculo summary { padding: 1rem; cursor: pointer; font-weight: 600; }
.cursos-app .curriculo-aula { display: flex; gap: .6rem; padding: .8rem 1rem; color: #33483c; border-top: 1px solid #edf0ee; }
.cursos-app .curriculo-aula:hover, .cursos-app .curriculo-aula[aria-current="page"] { background: #e6f3eb; color: var(--curso-primary); }
.cursos-app .curriculo-aula i { margin-top: .25rem; }
.cursos-app .curriculo-aula span { min-width: 0; overflow-wrap: anywhere; }
.cursos-app :is(a, button, summary):focus-visible { outline: 3px solid #f3ad21; outline-offset: 3px; }
@media (max-width: 991px) {
    .cursos-app .aula-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .cursos-app .cursos-hero { align-items: flex-start; flex-direction: column; padding: 1rem; gap: 1rem; }
    .cursos-app .cursos-hero img { width: 10rem; }
    .cursos-app .modulo-card, .cursos-app .aula-card { flex-wrap: wrap; padding: 1rem; }
    .cursos-app .modulo-card > .curso-button, .cursos-app .aula-card > .curso-button, .cursos-app .curso-card footer > * { width: 100%; }
    .cursos-app .aula-nav .curso-button { padding: .5rem; font-size: .85rem; }
}