:root {
        --ip-blue: #69779f;
        --ip-blue-dark: #566384;
        --ip-ink: #2f3948;
        --ip-muted: #6d7890;
        --ip-line: #dde3ec;
    }

    body {
        min-height: 100vh;
        color: var(--ip-ink);
        background: #ffffff;
        font-family: Arial, Helvetica, sans-serif;
    }

    .page-shell {
        max-width: 1180px;
        margin: 0 auto;
        padding: 34px 24px 48px;
    }

    .apartado-card {
        width: 164px;
        min-height: 184px;
        border: 1px solid #d9dee8;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 5px rgba(30, 45, 70, .2);
        transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .apartado-card:hover,
    .apartado-card:focus-visible {
        border-color: var(--ip-blue);
        box-shadow: 0 7px 18px rgba(52, 70, 110, .18);
        transform: translateY(-1px);
        outline: 0;
    }

    .apartado-card__image {
        width: 82px;
        height: 82px;
        object-fit: contain;
    }

    .apartado-card__fallback {
        width: 82px;
        height: 82px;
        display: grid;
        place-items: center;
        color: var(--ip-blue-dark);
        font-size: 4.75rem;
        line-height: 1;
    }

    .apartado-card__title {
        font-size: .62rem;
        font-weight: 800;
        line-height: 1.12;
        text-transform: uppercase;
        color: #2e3642;
        overflow-wrap: anywhere;
    }

    .detail-header {
        display: grid;
        grid-template-columns: 92px 1fr;
        align-items: center;
        column-gap: 18px;
        margin-bottom: 56px;
    }

    .detail-header__image {
        width: 82px;
        height: 82px;
        object-fit: contain;
    }

    .detail-header__fallback {
        width: 82px;
        height: 82px;
        display: grid;
        place-items: center;
        color: var(--ip-blue-dark);
        font-size: 5rem;
        line-height: 1;
    }

    .detail-header__title {
        margin: 0;
        color: var(--ip-blue-dark);
        font-size: clamp(1.05rem, 2vw, 1.35rem);
        font-weight: 800;
        line-height: 1.2;
    }

    .year-block {
        margin-bottom: 18px;
    }

    .year-heading {
        background: var(--ip-blue);
        color: #fff;
        border-radius: 4px;
        padding: 5px 12px;
        font-size: 1.15rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .trimester-heading,
    .file-row {
        min-height: 40px;
        border: 1px solid var(--ip-line);
        border-radius: 4px;
        background: #fff;
    }

    .trimester-heading {
        display: flex;
        align-items: center;
        padding: 0 42px;
        color: #3a4350;
        font-size: .78rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .file-row {
        display: grid;
        grid-template-columns: minmax(90px, 132px) 32px 1fr;
        align-items: center;
        gap: 10px;
        padding: 8px 42px;
        margin-bottom: 5px;
        color: var(--ip-muted);
        font-size: .72rem;
        font-weight: 700;
    }

    .file-row__name {
        color: #414b58;
        text-transform: uppercase;
        word-break: break-word;
    }

    .file-row__download {
        width: 28px;
        height: 28px;
        display: inline-grid;
        place-items: center;
        border: 0;
        background: transparent;
        color: #303c4b;
        font-size: 1.1rem;
        text-decoration: none;
    }

    .file-row__download:hover,
    .file-row__download:focus-visible {
        color: var(--ip-blue-dark);
        outline: 0;
    }

    .file-row__label {
        color: #5f8ab0;
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    .file-row__label:hover,
    .file-row__label:focus-visible {
        color: var(--ip-blue-dark);
        text-decoration: underline;
        outline: 0;
    }

    .back-button {
        color: var(--ip-blue-dark);
        border-color: var(--ip-blue);
        font-weight: 700;
    }

    .back-button:hover,
    .back-button:focus-visible {
        background: var(--ip-blue);
        border-color: var(--ip-blue);
        color: #fff;
    }

    .empty-state,
    .error-state {
        border: 1px solid var(--ip-line);
        border-radius: 8px;
        padding: 22px;
        color: var(--ip-muted);
        background: #fff;
        font-weight: 700;
    }

    @media (max-width: 640px) {
        .page-shell {
            padding: 24px 14px 36px;
        }

        .detail-header {
            grid-template-columns: 64px 1fr;
            column-gap: 12px;
            margin-bottom: 30px;
        }

        .detail-header__image,
        .detail-header__fallback {
            width: 58px;
            height: 58px;
        }

        .detail-header__fallback {
            font-size: 3.5rem;
        }

        .trimester-heading,
        .file-row {
            padding-left: 14px;
            padding-right: 14px;
        }

        .file-row {
            grid-template-columns: 1fr 28px;
        }

        .file-row__label {
            grid-column: 1 / -1;
        }
    }