:root {
    color-scheme: light;
    font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

.level-page {
    min-height: 100vh;
    background: linear-gradient(var(--level-start), var(--level-end));
}

.site-shell {
    width: min(1100px, 100%);
    min-height: 100vh;
    margin: 0 auto;
    padding: 42px 20px 28px;
    text-align: center;
}

.index-shell { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.series-banner { display: block; width: min(350px, 82vw); height: auto; margin: 0 auto; }
.level-banner { display: block; width: min(238px, 70vw); height: auto; margin: 0 auto 8px; }
.publisher-logo { display: block; width: 54px; height: 94px; object-fit: contain; margin: 28px auto 0; }
.level-title { margin: 0 0 24px; color: #fff; font-size: 1.35rem; }

.covers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.covers a { display: block; transition: transform .2s ease; }
.covers a:hover, .covers a:focus-visible { transform: translateY(-5px); }
.covers img { display: block; width: 190px; height: 265px; object-fit: contain; }

/* Menús de recursos: el mismo centrado y proporción visual de Passport. */
.role-menu,
.resource-menu {
    width: 500px;
    margin: 24px auto 26px;
    float: none;
    left: auto;
}

.role-menu li,
.resource-menu li {
    height: 70px;
    margin-bottom: 5px;
    float: none;
    right: auto;
}

.role-menu .ca-icon,
.resource-menu .ca-icon { line-height: 65px; }

.role-menu .ca-content,
.resource-menu .ca-content { height: 70px; }

.role-menu .ca-main,
.resource-menu .ca-main { margin-top: 10px; }

.session-note { margin: 24px 0 0; color: #fff; font-size: 14px; }
.session-note a { color: #fff; font-weight: bold; }

.login-popup .login-error { color: #ffd7d7; margin: 0 0 8px; }

.resource-shell h1 { color: #fff; font-size: clamp(1.4rem, 4vw, 2rem); }
.resource-list { width: min(760px, 100%); display: grid; gap: 10px; margin: 18px auto; text-align: left; }
.resource-list a { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.75); border-radius: 9px; background: rgba(255,255,255,.94); color: #333; font-size: 16px; text-decoration: none; }
.resource-list a:hover, .resource-list a:focus-visible { background: #e1f0fa; color: #065581; }
.resource-list small { font-size: 13px; color: #555; }

@media (max-width: 600px) {
    .site-shell { padding-top: 26px; }
    .covers { gap: 10px; }
    .covers img { width: 140px; height: 195px; }
}