/* Zarpa brand palette — mirrors Zarpa.Client/Resources/Styles/Colors.xaml. */
:root {
    --primary: #0B3D5C;
    --accent: #2AA5A0;
    --off-black: #1f1f1f;
    --gray-400: #919191;
    --gray-600: #404040;
    --page-bg: #F2F4F8;
    --card-border: #D8DEE6;
}

* {
    box-sizing: border-box;
    /* The mobile browsers' tap flash is a sharp-cornered rectangle that ignores
       border-radius — replaced by our own :active feedback below. */
    -webkit-tap-highlight-color: transparent;
}

button:active,
a:active {
    filter: brightness(0.95);
}

/* FocusOnNavigate (App.razor) focuses the page's h1 for screen readers;
   that focus is programmatic, so no visible ring. */
h1:focus {
    outline: none;
}

html, body {
    margin: 0;
    min-height: 100vh;
    background: var(--page-bg);
    color: var(--off-black);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 0.25rem 0;
}

.tagline {
    color: var(--gray-600);
    margin: 0 0 1.25rem 0;
}

.page-loading {
    color: var(--gray-600);
}

.error {
    color: #D64545;
    margin: 0.75rem 0 0 0;
}

/* Layout */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.7rem 1.25rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
}

.topbar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    flex: 1;
}

    .topbar-nav a {
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
        padding: 0.4rem 0.75rem;
        border-radius: 8px;
        font-size: 0.95rem;
        transition: background 0.15s ease, color 0.15s ease;
    }

        .topbar-nav a:hover {
            color: white;
            background: rgba(255, 255, 255, 0.08);
        }

        .topbar-nav a.active {
            color: white;
            background: rgba(255, 255, 255, 0.16);
            font-weight: 600;
        }

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-left: auto;
    flex-shrink: 0;
}

.menu-toggle {
    display: none;
    margin-left: auto;
    background: transparent;
    color: white;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}

.nav-user-mobile {
    display: none;
}

/* Mobile: nav collapses behind the hamburger; user block moves into the dropdown. */
@media (max-width: 860px) {
    .menu-toggle {
        display: block;
    }

    .topbar-user {
        display: none;
    }

    .topbar-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0.15rem;
        background: var(--primary);
        padding: 0.5rem 1.25rem 1rem;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    }

        .topbar-nav.open {
            display: flex;
        }

        .topbar-nav a {
            padding: 0.7rem 0.75rem;
        }

    .nav-user-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.9rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        margin-top: 0.5rem;
        padding-top: 0.8rem;
    }
}

.user-name {
    font-size: 0.9rem;
}

.content {
    max-width: 560px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
}

    .btn-primary:disabled {
        opacity: 0.6;
        cursor: default;
    }

.btn-link {
    text-decoration: none;
}

.btn-outline {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Sign-in card */
.auth-wrap {
    display: flex;
    justify-content: center;
    padding-top: 8vh;
}

.auth-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(16, 42, 67, 0.08);
    padding: 2rem 1.75rem;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
}

    .auth-card .auth-logo {
        align-self: center;
        margin-bottom: 0.75rem;
    }

    .auth-card label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--gray-600);
        margin: 0.9rem 0 0.3rem 0;
    }

    .auth-card input {
        border: 1.5px solid var(--card-border);
        border-radius: 10px;
        padding: 0.65rem 0.85rem;
        font-size: 1rem;
        outline: none;
    }

        .auth-card input:focus {
            border-color: var(--accent);
        }

    .auth-card .btn-primary {
        margin-top: 1.4rem;
    }

    .auth-card .field-error {
        color: #D64545;
        font-size: 0.82rem;
        margin: 0.3rem 0 0 0;
    }

.terms-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--gray-600);
    cursor: pointer;
}

    .terms-row input {
        width: 1.05rem;
        height: 1.05rem;
        accent-color: var(--accent);
        flex-shrink: 0;
    }

    .terms-row a {
        color: var(--primary);
        font-weight: 600;
    }

/* Links to the static legal pages, under every page. */
.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 1.2rem;
    padding: 1.5rem 16px 2rem;
    font-size: 0.85rem;
}

    .site-footer a {
        color: var(--gray-600);
    }

.auth-footer {
    text-align: center;
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 1.3rem 0 0 0;
}

    .auth-footer a {
        color: var(--primary);
        font-weight: 600;
    }

.code-input {
    letter-spacing: 0.5em;
    text-align: center;
    font-size: 1.3rem;
}

/* Social sign-in */
.divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gray-400);
    font-size: 0.85rem;
    margin: 1.4rem 0 1rem 0;
}

    .divider::before,
    .divider::after {
        content: "";
        flex: 1;
        border-top: 1px solid var(--card-border);
    }

.btn-social {
    background: white;
    color: var(--off-black);
    border: 1.5px solid var(--card-border);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.55rem;
}

    .btn-social:hover {
        border-color: var(--gray-400);
    }

/* Licenses (home) */
.license-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.license-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

    .license-card:hover {
        border-color: var(--gray-400);
    }

    .license-card.selected {
        border-color: var(--accent);
        background: #EAF6F5;
    }

.license-check {
    margin-left: auto;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.license-code {
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    min-width: 3.2rem;
    text-align: center;
}

.license-name {
    color: var(--off-black);
}

/* Inicio dashboard: two progress cards, wide layout like Perfil/Temas. */
.inicio-page {
    width: min(920px, calc(100vw - 2.5rem));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Landing for visitors without a session (Shared/Landing.razor on "/"). Breaks
   out of the 560px .content column like the dashboard. */
.landing {
    width: min(920px, calc(100vw - 2rem));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.landing-hero {
    text-align: center;
    padding: 1.5rem 0 1rem;
}

    .landing-hero h1 {
        font-size: clamp(1.6rem, 4vw, 2.3rem);
        line-height: 1.2;
        color: var(--primary);
        margin-bottom: 0.8rem;
    }

.landing-lead {
    max-width: 40rem;
    margin: 0 auto 1.5rem;
    font-size: 1.1rem;
    color: var(--gray-600);
}

.landing-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.landing-secondary {
    color: var(--primary);
    font-weight: 600;
}

.landing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 2rem 0;
}

    .landing-grid p {
        margin: 0;
        color: var(--gray-600);
        line-height: 1.55;
    }

@media (max-width: 760px) {
    .landing-grid {
        grid-template-columns: 1fr;
    }
}

.landing-calendar {
    text-align: center;
}

    .landing-calendar h2 {
        font-size: 1.25rem;
        margin-bottom: 0.3rem;
    }

.landing-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1rem;
    line-height: 1.8;
}

    .landing-links a {
        color: var(--primary);
    }

.topbar-guest {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

    .topbar-guest a:not(.btn-outline) {
        color: white;
        text-decoration: none;
        font-size: 0.9rem;
    }

.inicio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    align-items: stretch;
    margin-top: 1rem;
}

@media (max-width: 760px) {
    .inicio-grid {
        grid-template-columns: 1fr;
    }
}

.inicio-card {
    display: flex;
    flex-direction: column;
}

.inicio-hero {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.8rem;
}

.inicio-hero-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--off-black);
}

.inicio-hero-de {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-400);
}

.inicio-hero-label {
    font-size: 0.85rem;
    color: var(--gray-400);
}

.inicio-legend {
    margin-top: 1rem;
}

.inicio-cta {
    margin-top: auto;
    padding-top: 1.1rem;
    text-align: center;
}

/* Two-column pages (Perfil, Temas): card left/right split, centered on the
   viewport because they need more room than the 560px content column. */
.perfil-grid,
.temas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    align-items: start;
    width: min(920px, calc(100vw - 2.5rem));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1rem;
}

/* Temas gets a wider canvas: the topic squares take the lion's share on the
   left, the progress panel stays a narrower right rail. */
.temas-grid {
    width: min(1100px, calc(100vw - 2.5rem));
    grid-template-columns: 2fr 1fr;
}

@media (max-width: 760px) {
    .perfil-grid,
    .temas-grid {
        grid-template-columns: 1fr;
    }
}

.retro-card {
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 16px;
    box-shadow: 3px 3px 0 rgba(16, 42, 67, 0.08);
    padding: 1.3rem 1.4rem 1.5rem;
}

.retro-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--off-black);
    border-bottom: 1.5px dashed var(--card-border);
    padding-bottom: 0.6rem;
    margin: 0 0 1.2rem 0;
}

/* Account deletion block at the bottom of the Datos personales card. */
.danger-zone {
    margin-top: 1.6rem;
    border-top: 1.5px dashed var(--card-border);
    padding-top: 1rem;
}

.danger-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #b3261e;
    margin: 0 0 0.8rem 0;
}

.danger-warning {
    font-size: 0.85rem;
    color: #5b5b5b;
    line-height: 1.5;
    margin: 0 0 0.9rem 0;
}

.danger-actions {
    display: flex;
    gap: 0.7rem;
}

.btn-danger-outline,
.btn-danger,
.btn-cancel {
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    cursor: pointer;
}

.btn-danger-outline {
    background: white;
    color: #b3261e;
    border: 1.5px solid #b3261e;
}

    .btn-danger-outline:hover {
        background: #fdf0ef;
    }

.btn-danger {
    background: #b3261e;
    color: white;
    border: 1.5px solid #b3261e;
}

    .btn-danger:hover:not(:disabled) {
        background: #8f1d17;
    }

.btn-cancel {
    background: white;
    color: var(--off-black);
    border: 1.5px solid var(--card-border);
}

.btn-danger:disabled,
.btn-cancel:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Square license cards (overrides the shared selector inside Perfil only) */
.perfil-grid .license-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.perfil-grid .license-card {
    position: relative;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.55rem;
    aspect-ratio: 1;
    padding: 0.75rem;
    border-radius: 14px;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

    .perfil-grid .license-card:hover {
        transform: translate(-1px, -1px);
        box-shadow: 3px 3px 0 rgba(16, 42, 67, 0.1);
    }

    .perfil-grid .license-card.selected {
        box-shadow: 3px 3px 0 rgba(42, 165, 160, 0.35);
    }

    .perfil-grid .license-card .license-code {
        font-size: 1rem;
        min-width: auto;
        padding: 0.35rem 0.7rem;
    }

    .perfil-grid .license-card .license-name {
        font-size: 0.84rem;
        line-height: 1.25;
        color: var(--gray-600);
    }

    .perfil-grid .license-card .license-check {
        position: absolute;
        top: 0.55rem;
        right: 0.55rem;
        margin-left: 0;
    }

/* Left column of Perfil: titulación with comunidad stacked beneath it. */
.perfil-left {
    display: grid;
    gap: 1.75rem;
}

/* Community flag: every file is 3:2, so a height alone sizes it. */
.comunidad-flag {
    height: 1.5rem;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(16, 42, 67, 0.12);
    flex-shrink: 0;
    vertical-align: middle;
}

    /* Inline next to a name in running text (taglines, headers). */
    .comunidad-flag.inline {
        height: 1em;
        margin: 0 0.3em 0.15em 0.1em;
        border-radius: 2px;
    }

.comunidad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.6rem;
}

.comunidad-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    width: 100%;
    text-align: left;
    font: inherit;
    color: var(--off-black);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

    .comunidad-card:hover {
        border-color: var(--gray-400);
    }

    .comunidad-card.selected {
        border-color: var(--accent);
        background: #EAF6F5;
    }

    .comunidad-card .license-check {
        width: 1.3rem;
        height: 1.3rem;
        font-size: 0.75rem;
    }

.comunidad-name {
    font-size: 0.92rem;
    line-height: 1.25;
}

/* Perfil's left column is narrow — two cards per row at most. */
.perfil-grid .comunidad-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

/* Personal data (right column) */
.retro-avatar {
    width: 4.2rem;
    height: 4.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: 3px 3px 0 rgba(42, 165, 160, 0.45);
    margin-bottom: 1.2rem;
}

.datos-list {
    margin: 0 0 1.2rem 0;
}

.datos-row {
    padding: 0.6rem 0;
    border-bottom: 1.5px dashed var(--card-border);
}

    .datos-row dt {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--gray-400);
        margin-bottom: 0.15rem;
    }

    .datos-row dd {
        margin: 0;
        font-weight: 700;
        color: var(--off-black);
        overflow-wrap: anywhere;
    }

    /* Inline rename of the display name (Nombre -> Editar). */
    .datos-row dt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

.datos-edit {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

    .datos-edit:hover {
        text-decoration: underline;
    }

.datos-editor {
    margin-top: 0.35rem;
}

.datos-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font: inherit;
    color: var(--off-black);
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 10px;
    outline: none;
}

    .datos-input:focus {
        border-color: var(--accent);
    }

    .datos-input:disabled {
        opacity: 0.6;
    }

.datos-actions {
    display: flex;
    gap: 0.7rem;
    margin-top: 0.7rem;
}

    .datos-actions .btn-primary {
        font-size: 0.9rem;
        padding: 0.55rem 1rem;
    }

.retro-tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 99px;
}

    .retro-tag.ok {
        background: #DFF3EC;
        color: #1E7A76;
    }

    .retro-tag.warn {
        background: #FCEFC7;
        color: #8A6D1A;
    }

/* Progress bars (topics + session) */
.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 0.4rem;
}

.progress-track {
    background: var(--card-border);
    border-radius: 99px;
    height: 8px;
    overflow: hidden;
}

.progress-fill {
    background: var(--accent);
    height: 100%;
    border-radius: 99px;
    transition: width 0.25s ease;
}

/* Topics — square cards (left) */
.topic-squares {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    .topic-squares {
        grid-template-columns: repeat(2, 1fr);
    }
}

.topic-square {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    aspect-ratio: 1;
    padding: 0.85rem;
    text-align: center;
    font: inherit;
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

    .topic-square:hover:not(:disabled) {
        border-color: var(--accent);
        background: #F4FBFA;
        transform: translate(-2px, -2px);
        box-shadow: 4px 4px 0 rgba(42, 165, 160, 0.25);
    }

    .topic-square:disabled {
        cursor: default;
        opacity: 0.6;
    }

.topic-num {
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 8px;
    padding: 0.25rem 0.55rem;
}

.topic-square-name {
    color: var(--off-black);
    font-size: 0.86rem;
    line-height: 1.25;
}

.topic-square-empty {
    color: var(--gray-400);
    font-size: 0.78rem;
}

.topic-square-count {
    color: var(--gray-400);
    font-size: 0.78rem;
}

.topic-square-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.2rem;
}

    .topic-square-footer .progress-track {
        display: block;
        flex: 1;
    }

    .topic-square-footer .progress-fill {
        display: block;
    }

.topic-square-pct {
    color: var(--gray-600);
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 2.2rem;
    text-align: right;
}

/* Progress panel (right): donut + legend + totals */
.temas-stats {
    position: sticky;
    top: 5rem;
}

.donut {
    position: relative;
    width: 180px;
    aspect-ratio: 1;
    border-radius: 50%;
    margin: 0.5rem auto 1.2rem;
}

    .donut::after {
        content: "";
        position: absolute;
        inset: 21%;
        background: white;
        border-radius: 50%;
    }

.donut-center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
}

.donut-pct {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--off-black);
}

.donut-sub {
    font-size: 0.8rem;
    color: var(--gray-400);
}

.donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

    .donut-legend li {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 0.9rem;
        color: var(--gray-600);
    }

    .donut-legend strong {
        margin-left: auto;
        color: var(--off-black);
    }

.chip {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    flex-shrink: 0;
}

.chip-ok {
    background: #2AA5A0;
}

.chip-ko {
    background: #D64545;
}

.chip-rest {
    background: #AEBACA;
}

.stats-summary {
    border-top: 1.5px dashed var(--card-border);
    margin: 1.1rem 0 0 0;
    padding-top: 0.9rem;
    font-size: 0.9rem;
    color: var(--gray-600);
}

    .stats-summary strong {
        color: var(--off-black);
    }

/* Practice session */
.back-link {
    display: inline-block;
    color: var(--gray-600);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.session-progress {
    margin-top: 0.75rem;
}

.question-card {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 1.1rem 1.2rem;
    margin-top: 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(16, 42, 67, 0.08);
}

/* TEMPORAL: id de la pregunta en la esquina, para localizar errores en la BD durante las pruebas. */
.debug-id {
    position: absolute;
    top: 3px;
    right: 8px;
    font-size: 0.6rem;
    font-weight: 400;
    color: #9aa5b1;
    user-select: all;
    line-height: 1;
}

.answer-list {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

.answer {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
    touch-action: manipulation;
}

    .answer:hover:not(:disabled) {
        border-color: var(--gray-400);
    }

    .answer:disabled {
        cursor: default;
    }

    /* Same palette as the app's answer cards. */
    .answer.correct {
        background: #DFF3EC;
        border-color: var(--accent);
    }

    .answer.wrong {
        background: #FBE9E9;
        border-color: #D64545;
    }

.answer-letter {
    font-weight: 700;
    color: var(--primary);
    margin-right: 0.55rem;
}

.feedback {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1rem 0 0 0;
}

    .feedback.ok {
        color: var(--accent);
    }

    .feedback.ko {
        color: #D64545;
    }

.btn-explanation {
    background: white;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 10px;
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.8rem;
}

.explanation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

    .explanation-row .btn-next-inline {
        margin-top: 0.8rem;
        padding: 0.55rem 1.4rem;
    }

.explanation-card {
    background: white;
    border-radius: 16px;
    padding: 1.1rem 1.2rem;
    margin-top: 0.8rem;
    box-shadow: 0 4px 10px rgba(16, 42, 67, 0.08);
}

    .explanation-card img {
        max-width: 100%;
        border-radius: 8px;
        cursor: zoom-in;
    }

/* Fullscreen image viewer */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

    .lightbox img {
        max-width: 95vw;
        max-height: 95vh;
        border-radius: 8px;
        background: white;
    }

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: none;
    border-radius: 50%;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.1rem;
    cursor: pointer;
}

    .lightbox-close:hover {
        background: rgba(255, 255, 255, 0.3);
    }

/* Real-exam picker (Examen) */
.examen-page {
    /* Wider than the 560px content column — centered on the viewport. */
    width: min(880px, calc(100vw - 2.5rem));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.year-header {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    border-bottom: 1.5px dashed var(--card-border);
    padding-bottom: 0.4rem;
    margin: 1.6rem 0 0.75rem 0;
}

.exam-list {
    display: grid;
    gap: 0.6rem;
}

.exam-card {
    /* Fixed columns: month | model | status | meta — the chips line up
       vertically across rows, independent of the title's length. */
    display: grid;
    grid-template-columns: 11rem minmax(8.5rem, auto) minmax(6rem, auto) 1fr;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

    .exam-card:hover {
        border-color: var(--accent);
    }

.exam-model-cell,
.exam-status {
    justify-self: start;
}

@media (max-width: 680px) {
    .exam-card {
        grid-template-columns: 1fr auto;
    }

    .exam-meta {
        grid-column: 1 / -1;
    }
}

.status-chip {
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 99px;
    padding: 0.2rem 0.6rem;
}

    .status-chip.apto {
        background: #DFF3EC;
        color: #1E7A76;
    }

    .status-chip.noapto {
        background: #FBE9E9;
        color: #B23B3B;
    }

    .status-chip.empezado {
        background: #EDF1F6;
        color: var(--gray-600);
    }

.exam-title {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}

.exam-month {
    font-weight: 700;
    color: var(--off-black);
}

.exam-model {
    background: var(--primary);
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 0.2rem 0.55rem;
}

.exam-meta {
    color: var(--gray-400);
    font-size: 0.85rem;
    justify-self: end;
    text-align: right;
}

/* Exam simulation session */
.exam-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.exam-topbar-title {
    font-weight: 700;
    color: var(--off-black);
    flex: 1;
}

.exam-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 10px;
    padding: 0.3rem 0.7rem;
}

    .exam-timer.low {
        color: #D64545;
        border-color: #D64545;
    }

.qnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.qnav-btn {
    width: 2.1rem;
    height: 2.1rem;
    font: inherit;
    font-size: 0.8rem;
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--gray-600);
}

    .qnav-btn.answered {
        background: #DFF3EC;
        border-color: var(--accent);
        color: #1E7A76;
    }

    .qnav-btn.current {
        border-color: var(--primary);
        border-width: 2px;
        font-weight: 700;
        color: var(--primary);
    }

.question-img {
    display: block;
    max-width: 100%;
    border-radius: 8px;
    margin-top: 0.8rem;
}

.answer.selected {
    background: #EAF6F5;
    border-color: var(--accent);
    border-width: 2px;
}

.exam-controls {
    display: flex;
    gap: 0.7rem;
    margin-top: 1.1rem;
}

    .exam-controls .btn-primary {
        margin-left: auto;
    }

/* Exam result */
.verdict {
    text-align: center;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: 14px;
    padding: 0.9rem;
    margin-top: 0.75rem;
}

    .verdict.apto {
        background: #DFF3EC;
        color: #1E7A76;
    }

    .verdict.noapto {
        background: #FBE9E9;
        color: #B23B3B;
    }

.result-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.stat {
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 12px;
    padding: 0.7rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--off-black);
}

    .stat-value.ok {
        color: #1E7A76;
    }

    .stat-value.ko {
        color: #D64545;
    }

.stat-label {
    font-size: 0.75rem;
    color: var(--gray-400);
    text-align: center;
}

.section-heading {
    font-size: 1.02rem;
    color: var(--off-black);
    margin: 1.5rem 0 0.7rem 0;
}

.topic-result-list {
    display: grid;
    gap: 0.4rem;
}

.topic-result {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 10px;
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
    color: var(--gray-600);
}

    .topic-result.atlimit {
        border-color: #E0A800;
        background: #FCF3D7;
        color: #8A6D1A;
    }

    .topic-result.exceeded {
        border-color: #D64545;
        background: #FBE9E9;
        color: #B23B3B;
        font-weight: 600;
    }

.topic-note {
    color: var(--gray-400);
    font-size: 0.84rem;
    margin: -0.3rem 0 0.7rem 0;
}

.review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.review-question {
    position: relative;
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-top: 0.8rem;
}

.review-title {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    font-weight: 700;
    color: var(--off-black);
    margin-bottom: 0.7rem;
}

.review-unanswered {
    color: #B23B3B;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.answer.review {
    cursor: default;
}

/* Confirmation modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(11, 61, 92, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.modal-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(16, 42, 67, 0.25);
    padding: 1.5rem 1.6rem;
    width: 100%;
    max-width: 420px;
}

.modal-title {
    font-size: 1.1rem;
    color: var(--off-black);
    margin: 0 0 0.6rem 0;
}

.modal-text {
    color: var(--gray-600);
    font-size: 0.95rem;
    margin: 0 0 1.3rem 0;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
}

.explanation-text {
    color: var(--gray-600);
    font-size: 0.95rem;
}

    .explanation-text p {
        margin: 0.5rem 0;
    }

.btn-next {
    display: block;
    width: 100%;
    margin-top: 1rem;
}

/* Topic completed */
.completed-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    margin-top: 2.5rem;
    text-align: center;
}

.completed-check {
    align-self: center;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.completed-text {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.btn-outline-dark {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 10px;
    padding: 0.65rem 1.2rem;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
}

/* Blazor infrastructure (template defaults, kept as-is below) */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #2AA5A0;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Cargando");
    }

/* Static intro under the spinner in index.html — what crawlers and the first
   paint see before Blazor replaces #app. */
.loading-intro {
    position: absolute;
    inset: calc(20vh + 10rem) 0 auto 0;
    max-width: 32rem;
    margin: 0 auto;
    padding: 0 16px;
    text-align: center;
    color: #555;
}

    .loading-intro h1 {
        font-size: 1.4rem;
        margin: 0 0 0.5rem;
        color: #2AA5A0;
    }

    .loading-intro .loading-legal {
        font-size: 0.85rem;
    }

        .loading-intro .loading-legal a {
            color: #555;
        }

    .loading-intro .loading-links {
        font-size: 0.85rem;
        line-height: 1.8;
    }

        .loading-intro .loading-links a {
            color: #555;
        }

/* Admin — Usuarios tab (AdminUsuarios.razor). Breaks out of the 560px .content
   column and spans the whole viewport (minus a small gutter) so the table has
   room; it still scrolls sideways on phones. */
.admin-page {
    width: calc(100vw - 2.5rem);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1rem;
}

.admin-card {
    padding-bottom: 1rem;
}

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.admin-search,
.admin-select {
    font: inherit;
    font-size: 0.95rem;
    padding: 0.55rem 0.8rem;
    border: 1.5px solid var(--card-border);
    border-radius: 10px;
    background: white;
    color: var(--off-black);
}

.admin-search {
    flex: 1 1 220px;
    min-width: 0;
}

    .admin-search:focus,
    .admin-select:focus {
        outline: none;
        border-color: var(--accent);
    }

.admin-btn {
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
}

.admin-message {
    color: #1E7A76;
    background: #DFF3EC;
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    margin: 0 0 0.9rem 0;
    font-size: 0.9rem;
}

.admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .admin-table th {
        text-align: left;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--gray-400);
        padding: 0.5rem 0.6rem;
        border-bottom: 1.5px solid var(--card-border);
        white-space: nowrap;
    }

    .admin-table td {
        padding: 0.7rem 0.6rem;
        border-bottom: 1px solid #EDF1F6;
        vertical-align: top;
        line-height: 1.4;
    }

    .admin-table tr.is-admin td {
        background: #F7FAFD;
    }

.admin-user-name {
    font-weight: 600;
    color: var(--off-black);
}

.admin-you {
    color: var(--gray-400);
    font-weight: 400;
    font-size: 0.8rem;
    margin-left: 0.25rem;
}

.admin-user-email {
    color: var(--gray-600);
    word-break: break-all;
}

.admin-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.admin-muted {
    color: var(--gray-600);
}

.admin-small {
    font-size: 0.78rem;
    color: var(--gray-400);
}

.admin-block {
    display: block;
    margin-top: 0.3rem;
}

.admin-actions {
    white-space: nowrap;
}

.admin-btn-sm {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    margin: 0 0.25rem 0.25rem 0;
}

.admin-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.status-chip.warn {
    background: #FCEFC7;
    color: #8A6D1A;
}

.status-chip.admin {
    background: var(--primary);
    color: white;
}

/* Admin — Contenido tab (AdminContenido.razor): two stat matrices side by side on
   wide screens, stacked when the viewport cannot fit two 520px columns. */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
    gap: 1.5rem;
    align-items: start;
}

.admin-subtitle {
    margin: 0 0 0.35rem 0;
    font-size: 1.1rem;
}

.admin-hint {
    margin: 0 0 1rem 0;
    color: var(--gray-600);
    font-size: 0.88rem;
}

.admin-table.admin-table-stats {
    min-width: 560px;
}

    .admin-table.admin-table-stats tfoot td {
        font-weight: 600;
        border-top: 1.5px solid var(--card-border);
        border-bottom: none;
        background: #F7FAFD;
    }

/* Temas por titulación: one block per titulación — its exam rules in the heading,
   only its own temas in the table. The four columns fit where the old matrix could
   not, so these tables are allowed to be narrower than the other stat tables. */
.admin-license-block + .admin-license-block {
    margin-top: 1.5rem;
    padding-top: 1.3rem;
    border-top: 1.5px solid var(--card-border);
}

.admin-license-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.5rem;
    margin-bottom: 0.6rem;
}

.admin-license-code {
    margin: 0;
    font-size: 1rem;
    color: var(--off-black);
}

.admin-license-name {
    color: var(--gray-600);
    font-size: 0.9rem;
}

.admin-license-meta {
    flex-basis: 100%;
    color: var(--gray-400);
    font-size: 0.82rem;
}

.admin-table.admin-table-topics {
    min-width: 380px;
}

.admin-num,
.admin-table th.admin-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.admin-dash {
    color: var(--gray-400);
}

.admin-table tr.is-empty td,
.admin-table tr.is-empty .admin-user-name {
    color: var(--gray-400);
}

/* Admin — Convocatorias tab (AdminConvocatorias.razor): last imported sitting vs.
   convocatoria site and next expected sitting per comunidad, with a full-width
   notes row under each one; the site, the date and the notes save on change. */
.admin-table.admin-table-convocatorias {
    min-width: 1100px;
}

/* The Convocatorias card runs edge to edge: .admin-page is 100vw − 2.5rem wide, so
   the card bleeds 1.25rem past it on each side, and the table cancels the card's
   side padding — the rule between comunidades then spans the whole screen. 100vw
   counts the vertical scrollbar, so the page clips the few pixels that spill over. */
.admin-card.admin-card-bleed {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
}

    .admin-card.admin-card-bleed .admin-table-wrap {
        margin-left: -1.4rem;
        margin-right: -1.4rem;
    }

body:has(.admin-card-bleed) {
    overflow-x: clip;
}

    /* Each comunidad is its own row group (tbody.admin-comunidad): the data row
       and its notes read as one block — no rule between them, a thick dark rule and
       some air where the next comunidad starts, and the blocks alternating between
       two light tints — a cool blue and a warm sand, so neighbours never share a
       colour and the boundary is obvious even where the notes run long. */
    .admin-table.admin-table-convocatorias tbody tr:not(.admin-notes-row) td {
        border-bottom: none;
        padding-bottom: 0.4rem;
    }

    .admin-table.admin-table-convocatorias .admin-comunidad tr:first-child td {
        border-top: 4px solid var(--primary);
        padding-top: 0.9rem;
    }

    .admin-table.admin-table-convocatorias .admin-comunidad:nth-of-type(odd) td {
        background: #EAF3FA;
    }

    .admin-table.admin-table-convocatorias .admin-comunidad:nth-of-type(even) td {
        background: #FBF5E9;
    }

    .admin-table.admin-table-convocatorias .admin-comunidad .admin-user-name {
        font-size: 1rem;
        color: #B23B3B;
    }

.admin-notes-row td {
    padding-top: 0;
    padding-bottom: 1rem;
}

.admin-notes-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-400);
    margin-bottom: 0.25rem;
}

.admin-notes {
    display: block;
    width: 100%;
    resize: vertical;
    min-height: 4.5rem;
    line-height: 1.5;
}

.admin-files {
    list-style: none;
    margin: 0.3rem 0 0 0;
    padding: 0;
    font-size: 0.78rem;
    color: var(--gray-600);
}

    .admin-files li {
        word-break: break-all;
    }

.admin-field {
    font: inherit;
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid var(--card-border);
    border-radius: 8px;
    background: white;
    color: var(--off-black);
}

    .admin-field:focus {
        outline: none;
        border-color: var(--accent);
    }

.admin-url {
    width: 100%;
    min-width: 220px;
}

.admin-field:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Suscripción: the three plans side by side, one column on phones. */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}

@media (max-width: 760px) {
    .plan-grid {
        grid-template-columns: 1fr;
    }
}

.plan-card {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.plan-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

.plan-note {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin: 0.3rem 0 1.1rem;
}

.plan-card .btn-primary {
    margin-top: auto;
}

.plan-legal {
    color: var(--gray-400);
    font-size: 0.82rem;
    margin-top: 1rem;
}