/* Mis clases 2.1: shared header presentation for actual class and live preview. */
.c258-header{position:relative;isolation:isolate;display:flex;align-items:center;gap:16px;min-height:126px;padding:22px 24px;overflow:hidden;background:linear-gradient(105deg,var(--class-tint) 10%,color-mix(in srgb,var(--class-ink) 13%,white));border-bottom:1px solid #dce5ee}
.c258-header:after{content:'';position:absolute;width:160px;height:160px;border:24px solid #ffffff50;border-radius:50%;right:32%;bottom:-120px;z-index:-1}.c258-title{min-width:0;flex:1;z-index:1;max-width:65%;padding-right:14px}.c258-title :is(h2,h3){font-size:24px;letter-spacing:-.6px;line-height:1.2;color:#183153;margin:0 0 8px;overflow-wrap:anywhere}.c258-title p{font-size:12px;color:#53677f;line-height:1.45;margin:0}.c258-illustration{position:absolute;inset:0 65px 0 auto;width:35%;max-width:360px;z-index:-1;display:flex;align-items:center;justify-content:center}.c258-illustration .c257-art,.c258-illustration .c257-art:not(.has-cover){border:0;background:none;color:var(--class-ink);border-radius:0;width:100%;height:100%;display:block}.c258-illustration svg{width:100%;height:100%;object-fit:contain}.c258-illustration img{object-fit:cover;mask-image:linear-gradient(90deg,transparent,#000 18%);opacity:.85}.c258-illustration .c257-art:not(.has-cover)>span{display:none}.c258-illustration .c257-art:not(.has-cover):before{content:'';position:absolute;width:100px;height:100px;right:15%;top:10%;border-radius:30px;background:var(--class-ink);opacity:.14;transform:rotate(18deg)}.c258-illustration .c257-art:not(.has-cover) i{width:130px;height:130px;right:40%;top:48%;border:22px solid var(--class-ink);opacity:.1}
.c258-header-actions{margin-left:auto;align-self:flex-start;display:flex;gap:4px;z-index:2;flex:none}.c258-header-actions button{display:grid;place-items:center;width:36px;min-height:36px;padding:6px;border:1px solid #ffffffa0;border-radius:10px;background:#ffffffcf;color:#4b6480}.c258-header-actions>span{color:#58708b;font-size:20px}
.class-hub .c257-class{border-radius:18px}.class-hub .class-sections{gap:20px}.c257-class .c257-secondary{padding:9px 20px 0;gap:4px}.c257-secondary button{background:none;border-radius:8px;min-height:34px;gap:7px}.c257-secondary button+button{border-left:1px solid #e4eaf2}.c257-secondary button small{display:inline-grid;place-items:center;background:#eaf0f7;border-radius:20px;min-width:20px;padding:2px 5px;font-size:10px}.c257-class .class-screen-grid{padding:12px 20px 18px;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(224px,100%),1fr))}.c257-class .class-screen-card{overflow:hidden;position:relative}.c257-class .class-screen-caption{padding:10px 48px 11px 12px;gap:5px;min-height:62px}.class-screen-caption .c258-active-variant{font-size:10px;background:#edf2fc;border-radius:5px;padding:2px 5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c258-screen-menu{position:absolute;right:6px;bottom:7px;width:36px;height:36px;min-height:36px;border:0;border-radius:9px;background:transparent;color:#536a83;z-index:6;font-size:21px;line-height:1}.c258-screen-menu:hover{background:#eaf0fa}.c257-class .class-new-screen{min-height:142px;align-self:stretch;border:1.5px dashed color-mix(in srgb,var(--class-ink) 45%,white)!important}.c257-class:has(.first-screen-help) .class-new-screen{min-height:145px}.c257-class .first-screen-help{padding:14px 20px 0;max-width:680px;line-height:1.5;font-size:13px}
.c258-menu{position:fixed;z-index:1800;width:268px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;background:white;border:1px solid #dce5ef;box-shadow:0 10px 35px #18315327;border-radius:13px;padding:6px;color:#183153}.c258-menu button{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:9px 10px;background:none;border:0;border-radius:8px;text-align:left;color:inherit;font-size:13px;line-height:1.35}.c258-menu button:hover,.c258-menu button:focus-visible{background:#edf3fc}.c258-menu button.danger{color:#a83d4e}.c258-menu button:disabled{opacity:.45}.c258-menu hr{border:0;border-top:1px solid #e5ebf3;margin:5px}.c258-menu button:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}
.b-dialog.c257-dialog{width:min(820px,calc(100vw - 24px));max-width:820px}.c257-dialog>.b-dialog-body{padding:18px}.c257-form{grid-template-columns:1fr 1fr;gap:12px 18px}.c257-form [data-class-preview]{display:block;padding:0;background:none;grid-column:1/-1;border-radius:13px}.c257-form [data-class-preview] .c258-header{min-height:116px;padding:18px}.c257-form [data-class-preview] .c258-title{max-width:62%}.c257-form [data-class-preview] .c257-art{width:100%;height:100%}.c257-form [data-class-preview] .c258-title h3{font-size:22px}.c257-form>label:first-of-type{grid-column:1;grid-row:2}.c257-form>fieldset:first-of-type{grid-column:1;grid-row:3}.c257-form>fieldset:nth-of-type(2){grid-column:2;grid-row:2/span 3}.c257-form .c257-covers{gap:7px}.c257-form .c257-covers svg{height:45px;object-fit:contain}.c257-covers span{font-size:10px;padding:3px 4px}.c257-image-actions{grid-column:1;grid-row:4;gap:7px}.c257-image-actions label{padding:6px;font-size:12px}.c257-image-actions button{font-size:12px;padding:7px}.c257-image-actions input{width:170px;font-size:10px}.c257-form>.b-muted{grid-column:1/-1;margin:0;font-size:11px;line-height:1.4}.c257-form>[data-crop]{grid-column:1/-1}.c257-form>[data-reset]{justify-self:start;font-size:12px;padding:7px;background:none;color:#526985;border:0}.c257-form>[data-error]{grid-column:1/-1}.c257-form>footer{grid-column:1/-1;position:sticky;bottom:-18px;background:white;padding:12px 0 2px;border-top:1px solid #e6ecf4;z-index:3}.c257-form>footer button{min-height:40px}.c257-form [data-class-preview]>strong{display:none}
@media(max-width:600px){.c258-header{padding:18px;min-height:128px}.c258-title{max-width:70%;padding-right:4px}.c258-title :is(h2,h3){font-size:21px}.c258-illustration{right:0;width:35%;opacity:.8}.c258-header-actions{position:absolute;right:8px;top:8px}.c258-title{padding-top:12px}.c257-class .class-screen-grid{padding:12px 14px 14px}.c257-class .c257-secondary{padding:8px 10px 0}.c257-secondary button{font-size:11px;padding:7px}.c257-form{grid-template-columns:1fr}.c257-form>label:first-of-type,.c257-form>fieldset:first-of-type,.c257-form>fieldset:nth-of-type(2),.c257-image-actions{grid-column:1;grid-row:auto}.c257-form .c257-covers{grid-template-columns:repeat(3,minmax(0,1fr))}.c257-form .c257-covers svg{height:36px}.c257-form [data-class-preview] .c258-title{max-width:70%}.c257-form [data-class-preview] .c258-header{padding:14px;min-height:105px}.c257-form [data-class-preview] .c258-title h3{font-size:20px}.c258-screen-menu{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.c258-menu{scroll-behavior:auto}}
.b-dialog.c257-dialog[open]{display:flex;flex-direction:column;overflow:hidden}.c257-dialog>header{flex:none}.c257-dialog>.b-dialog-body{min-height:0;overflow-y:auto}.c257-form>footer{bottom:0;margin:0;padding:10px 0;background:#fff}.c257-form>[data-error]:empty{display:none}