h1:focus,h1:focus-visible{outline:none}
.topbar{border-bottom:1px solid var(--mud-palette-lines-default)}
.topbar-title{color:var(--mud-palette-text-secondary)}
.mud-button-filled.mud-button-filled-primary{background-color:var(--mud-palette-text-secondary)}
.mud-button-filled.mud-button-filled-primary:hover:not(:disabled),.mud-button-filled.mud-button-filled-primary:focus-visible:not(:disabled),.mud-button-filled.mud-button-filled-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--mud-palette-text-secondary) 82%,#000)}
.profile-avatar{background:#e3c9c4!important;color:#7d3a32!important;font-size:12px!important;font-weight:700}

.brand{font-size:20px;display:flex;align-items:center;gap:10px;padding:26px 20px 0;line-height:1}
.brand-mark{width:30px;height:30px;flex:none;display:block}
.brand-name{font-family:"DM Sans",Arial,sans-serif;font-weight:600;letter-spacing:-.04em;color:#d5dee6}
.brand-name span{font-weight:700;color:#f7f9fb}
.main-nav{margin:40px 12px 0}
.main-nav .mud-nav-link{color:#b9c9d5;border-radius:9px;font-weight:600}
.main-nav .mud-nav-link:hover,.main-nav .mud-nav-link.active{background:#27425a!important;color:#fff!important}
.main-nav .mud-nav-link.active .mud-nav-link-icon{color:#fff!important}
.tenant-card{background:#18364e!important;color:#e8f0f4!important}
.tenant-card .mud-typography-caption{color:#9ab0c0}

.eyebrow{letter-spacing:.11em;font-weight:700;display:block}
.filter-select{max-width:220px;margin-left:auto}
.course-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;width:min(100%,520px);margin-left:auto}
.course-search{flex:1 1 220px;min-width:0}
.course-filters .filter-select{flex:1 1 180px;width:100%;max-width:none;margin-left:0}
@media (max-width:600px){.course-filters{width:100%;margin-left:0}}

.course-card{height:100%;display:flex;flex-direction:column}
.course-card .mud-card-content{flex:1}
.course-art{position:relative;height:151px;padding:19px 20px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden;background:linear-gradient(120deg,#14304a,#336e92)}
.course-art small{position:relative;z-index:1;font-size:10px;letter-spacing:.1em;font-weight:700;opacity:.85}
.course-art strong{position:relative;z-index:1;font-family:Fraunces,Georgia,serif;font-size:28px;line-height:1.05}
.course-page{max-width:1120px;margin:auto}
.course-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#14304a,#336e92)!important;color:#fff!important;border-radius:15px!important}
.course-art.has-cover,.course-hero.has-cover{background-image:linear-gradient(120deg,rgba(20,48,74,.84),rgba(20,48,74,.66)),var(--cover)!important;background-size:cover!important;background-position:center!important}
.course-hero .eyebrow,.course-hero .hero-text{color:#d2e2ec}
.course-cover-preview{display:block;width:min(100%,280px);height:120px;object-fit:cover;border-radius:10px}
.hero-progress{max-width:260px}
.lesson-list{list-style:none;padding:0;margin:0}
.lesson-list li{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--mud-palette-lines-default)}
.lesson-list li:last-child{border-bottom:0}

.access-shell{min-height:100vh;display:flex;flex-direction:column;align-items:stretch}
.access-shell>.mud-container{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%}
.shell-main{display:flex;flex-direction:column;min-height:100vh}
.shell-body{flex:1 0 auto}
.site-footer{margin-top:auto;padding:18px 24px 22px;color:#5b6b79;font-size:13px;line-height:1.4;text-align:center}
.site-footer p{margin:0}
.site-footer a{color:#112b43;font-weight:700}
.login-card{margin:24px auto}
.access-brand{padding:0 0 22px}
.access-brand .brand-name{color:#6b7785}
.access-brand .brand-name span{color:#3d4a56}

#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;width:100%;z-index:2000;padding:.75rem 1.25rem;background:#fff4d6;box-shadow:0 -1px 4px #0003}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:1rem;top:.6rem}

/* Etiqueta en el borde y texto de ayuda dentro. Si no, se pisan. */
.mud-input:has(input[placeholder]:not([placeholder=""]),textarea[placeholder]:not([placeholder=""]))>.mud-input-outlined-border legend{width:auto;padding:0 5px}
.mud-input:has(input[placeholder]:not([placeholder=""]),textarea[placeholder]:not([placeholder=""]))~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined{transform:translate(14px,-6px) scale(.75);transform-origin:top left;max-width:calc((100% - 14px) / .75);background:var(--mud-palette-background);z-index:1}