/* ═══════════════════════════════════════════════════════
   Globalización y Empleo 2026-2 — FCA UNAM
   Neo-Academic Brutalism
   ═══════════════════════════════════════════════════════ */

/* ── Reset & Base ──────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Brutalism palette */
    --ink: #111;
    --paper: #fafaf7;
    --blush: #fff5f5;
    --rose: #ffe7e7;
    --cream: #fffdf0;
    --mint: #e8fdf5;
    --sky: #eef6ff;
    --lavender: #f0ecff;
    --gold: #ffd93d;
    --coral: #ff6b6b;
    --teal: #4ecdc4;
    --purple: #6c5ce7;
    --green: #27ae60;
    --surface: #fff;
    --text: #22272d;
    --text-muted: #555;
    --cork: #bb7d47;
    --cork-dark: #8b572d;
    --cork-light: #d5a36e;
    --pin-red: #d64747;
    --pin-blue: #4a7cff;
    --pin-green: #2da56d;
    --pin-gold: #f0b429;

    /* Brutalist tokens */
    --border: 3px solid var(--ink);
    --border-thin: 2px solid var(--ink);
    --radius: 16px;
    --radius-sm: 12px;
    --radius-pill: 999px;
    --shadow: 6px 6px 0 var(--ink);
    --shadow-sm: 4px 4px 0 var(--ink);
    --shadow-press: 2px 2px 0 var(--ink);
    --font-body: 'American Typewriter', 'Georgia', 'Times New Roman', serif;
    --font-accent: system-ui, -apple-system, 'Segoe UI', sans-serif;
    --transition: .2s ease;
    --container-max: 980px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 1rem;
    z-index: 1000;
    background: var(--gold);
    color: var(--ink);
    border: var(--border-thin);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: .45rem .75rem;
    font-family: var(--font-accent);
    font-weight: 700;
}

.skip-link:focus {
    top: 1rem;
}

.today-box {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    background: var(--gold);
    color: var(--ink);
    border: var(--border-thin);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: .45rem .85rem;
    font-family: var(--font-accent);
    font-size: .82rem;
    font-weight: 700;
}

.today-label {
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.25rem;
}

a {
    color: var(--purple);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--coral); }

a:focus-visible,
summary:focus-visible {
    outline: 3px dashed var(--purple);
    outline-offset: 3px;
}

/* ── 8-bit icon sizing ─────────────────────────────── */
.icon-8bit {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 6px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.icon-8bit-sm {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 4px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.icon-8bit-lg {
    width: 36px;
    height: 36px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* ── Header ────────────────────────────────────────── */
.site-header {
    background: linear-gradient(135deg, var(--blush) 0%, var(--rose) 100%);
    border-bottom: var(--border);
    padding: 2.5rem 0 2rem;
    position: relative;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.header-text {
    flex: 1 1 0;
    min-width: 0;
}

.header-text h1 {
    font-family: var(--font-body);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: .35rem;
}

.subtitle {
    font-size: 1rem;
    color: var(--text);
    font-weight: 400;
}

.instructor {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--coral);
}

.header-meta {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    width: 100%;
    margin-top: .5rem;
}

.header-today {
    margin-left: auto;
    padding: .35rem .75rem;
    font-size: .78rem;
    box-shadow: 3px 3px 0 var(--ink);
}

/* pill-style tag above the header */
.header-pill {
    display: inline-block;
    background: rgba(255,255,255,.75);
    border: var(--border-thin);
    border-radius: var(--radius-pill);
    padding: .3rem .9rem;
    font-size: .82rem;
    font-family: var(--font-accent);
    letter-spacing: .3px;
    margin-bottom: .65rem;
    color: var(--ink);
}

.header-repo-mobile {
    display: inline-flex;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 700;
    font-family: var(--font-accent);
    transition: all var(--transition);
    border: var(--border-thin);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.badge:hover {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-press);
}

.github-badge {
    background: var(--ink);
    color: #fff;
}
.github-badge:hover {
    color: #fff;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--coral);
}

.views-badge {
    font-weight: 500;
    font-size: .78rem;
    background: var(--cream);
}

/* ── Navigation ────────────────────────────────────── */
.site-nav {
    background: var(--surface);
    border-bottom: var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: .35rem;
    overflow-x: auto;
    padding: .55rem 0;
    -webkit-overflow-scrolling: touch;
}

.nav-links li a {
    display: inline-flex;
    align-items: center;
    padding: .45rem .85rem;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    font-weight: 600;
    font-family: var(--font-accent);
    white-space: nowrap;
    color: var(--ink);
    border: var(--border-thin);
    background: var(--surface);
    box-shadow: 3px 3px 0 var(--ink);
    transition: all var(--transition);
}

.nav-links li a:hover {
    background: var(--blush);
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--ink);
    color: var(--coral);
}

/* ── Main Layout + Corkboard ──────────────────────── */
.home-layout {
    max-width: 1380px;
    margin: 1.25rem auto 0;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, var(--container-max)) minmax(300px, 360px);
    justify-content: center;
    gap: 1.5rem;
    align-items: start;
}

.home-main {
    min-width: 0;
}

body.board-archived .corkboard {
    display: none;
}

/* Columna lateral derecha: pizarrón de hoy + trabajos entregados */
.home-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    align-self: start;
}

.works-board {
    position: sticky;
    top: 5rem;
}

.works-board-kicker {
    margin: 0 0 .4rem .3rem;
    font-family: var(--font-accent);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.works-board .board-scatter {
    gap: 1.8rem 1.2rem;
    padding: .8rem 0 1rem;
}

.corkboard {
    position: sticky;
    top: 5rem;
    align-self: start;
    padding: 1.1rem;
    border: 4px solid var(--ink);
    border-radius: 28px;
    box-shadow: 10px 10px 0 var(--ink);
    background:
        radial-gradient(circle at 18% 16%, rgba(255,255,255,.18) 0 0.3rem, transparent 0.32rem),
        radial-gradient(circle at 78% 24%, rgba(255,255,255,.14) 0 0.22rem, transparent 0.24rem),
        repeating-linear-gradient(135deg, rgba(93,52,23,.12) 0 0.7rem, rgba(255,255,255,.02) 0.7rem 1.4rem),
        linear-gradient(160deg, var(--cork-light) 0%, var(--cork) 58%, var(--cork-dark) 100%);
}

.corkboard-kicker {
    display: inline-block;
    margin-bottom: .55rem;
    padding: .3rem .7rem;
    background: rgba(255,255,255,.68);
    border: var(--border-thin);
    border-radius: var(--radius-pill);
    box-shadow: 3px 3px 0 rgba(0,0,0,.75);
    font-family: var(--font-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
}

.corkboard h2 {
    font-size: 1.5rem;
    line-height: 1.05;
    color: #2e1607;
    margin-bottom: .45rem;
}

.corkboard-lead {
    font-size: .9rem;
    line-height: 1.45;
    color: rgba(31, 16, 8, .88);
    margin-bottom: .95rem;
    max-width: 28ch;
}

.corkboard-notes {
    display: grid;
    gap: .95rem;
}

.board-pin {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff7d4 0 20%, rgba(255,255,255,.15) 21%, transparent 22%), var(--coral);
    border: 2px solid var(--ink);
    box-shadow: 1px 2px 0 rgba(0,0,0,.45);
    z-index: 2;
}

.board-pin-top-left {
    top: .6rem;
    left: .7rem;
}

.board-pin-top-right {
    top: .7rem;
    right: .8rem;
}

.board-pin-bottom-left {
    bottom: .7rem;
    left: .9rem;
}

.board-pin-bottom-right {
    right: .95rem;
    bottom: .8rem;
}

.board-note {
    position: relative;
    padding: .95rem .95rem .9rem;
    border: var(--border-thin);
    border-radius: 10px 18px 12px 16px;
    box-shadow: 5px 5px 0 rgba(0,0,0,.76);
    transform: rotate(-1.3deg);
}

.board-note:nth-child(even) {
    transform: rotate(1.2deg);
}

.board-note::before {
    content: '';
    position: absolute;
    top: .6rem;
    right: 1rem;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    box-shadow: 1px 1px 0 rgba(0,0,0,.35);
}

.note-rose {
    background: #fff3c9;
}

.note-rose::before {
    background: var(--pin-red);
}

.note-sky {
    background: #eef4ff;
}

.note-sky::before {
    background: var(--pin-blue);
}

.note-mint {
    background: #ebfff0;
}

.note-mint::before {
    background: var(--pin-green);
}

.note-cream {
    background: #fff9ea;
}

.note-cream::before {
    background: var(--pin-gold);
}

.note-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: .55rem;
    background: var(--ink);
    color: #fff;
    border-radius: 50%;
    font-family: var(--font-accent);
    font-weight: 800;
    font-size: .92rem;
}

.board-note h3 {
    font-size: 1rem;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: .35rem;
    padding-right: 1.4rem;
}

.board-note p,
.board-video-list {
    font-size: .85rem;
    line-height: 1.45;
    color: var(--text);
}

.note-question {
    margin-top: .6rem;
    padding-top: .55rem;
    border-top: 2px dashed rgba(0,0,0,.24);
    font-weight: 700;
}

.note-foot {
    margin-top: .45rem;
    color: var(--text-muted);
    font-size: .8rem;
}

.note-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.note-links a,
.board-video-list a {
    color: var(--ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.note-links a {
    display: inline-flex;
    align-items: center;
    padding: .35rem .65rem;
    border: var(--border-thin);
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.72);
    box-shadow: 2px 2px 0 var(--ink);
    text-decoration: none;
}

.note-links a:hover {
    color: var(--ink);
    background: var(--blush);
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--ink);
}

.board-video-list {
    margin: .3rem 0 0 1.2rem;
    padding: 0;
}

.board-video-list li + li {
    margin-top: .45rem;
}

/* ── Sections (accordion) ──────────────────────────── */
.section {
    margin: 1.25rem 0;
}

.section h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1rem;
}

.accordion {
    background: var(--surface);
    border-radius: var(--radius);
    border: var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}

.accordion:hover {
    transform: translate(-1px, -1px);
    box-shadow: 7px 7px 0 var(--ink);
}

.accordion-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background var(--transition);
    font-family: var(--font-body);
}

.accordion-header::-webkit-details-marker {
    display: none;
}

.accordion-header::after {
    content: '▸';
    margin-left: auto;
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: transform .3s ease;
    flex-shrink: 0;
}

.accordion[open] > .accordion-header::after {
    transform: rotate(90deg);
}

.accordion-header:hover {
    background: var(--blush);
}

.accordion-body {
    padding: 0 1.25rem 1.25rem;
}

/* ── Announcements ─────────────────────────────────── */
.announcement {
    background: var(--cream);
    border-radius: var(--radius-sm);
    padding: 1.15rem 1.25rem;
    border: var(--border-thin);
    box-shadow: var(--shadow-sm);
    border-left: 6px solid var(--gold);
    margin-bottom: 1rem;
}

.announcement-meta {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    margin-bottom: .4rem;
}

.announcement-date {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    font-family: var(--font-accent);
    color: var(--coral);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 0;
}

.announcement-body > strong {
    display: block;
    font-size: 1rem;
    margin-bottom: .25rem;
    color: var(--ink);
}

.announcement-body p {
    color: var(--text-muted);
    font-size: .92rem;
}

.past-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-bottom: 1rem;
}

.past-mini {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--surface);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    text-decoration: none;
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.25;
    opacity: .55;
    transition: opacity .2s;
}

.past-mini:hover { opacity: .85; }

.past-mini .pm-num {
    font-family: var(--font-accent);
    font-weight: 800;
    font-size: .85rem;
    color: var(--ink);
    min-width: 22px;
}

.past-mini .pm-title {
    font-weight: 600;
    color: var(--ink);
}

/* ── Unit Cards ────────────────────────────────────── */
.units-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.unit-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
    transition: all var(--transition);
    border: var(--border-thin);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.unit-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow);
}

.unit-number {
    width: 44px;
    height: 44px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: .6rem;
    font-family: var(--font-accent);
}

.unit-card h3 {
    font-size: 1rem;
    margin-bottom: .4rem;
    color: var(--ink);
}

.coming-soon {
    color: var(--text-muted);
    font-size: .85rem;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* ── Sessions ──────────────────────────────────────── */
.sessions-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.session-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    transition: all var(--transition);
    border: var(--border-thin);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
}

a.session-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow);
    border-color: var(--coral);
    color: inherit;
}

.session-number {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--ink);
    min-width: 38px;
    text-align: center;
    font-family: var(--font-accent);
}

.session-info h3 {
    font-size: .95rem;
    color: var(--ink);
    margin-bottom: .1rem;
}

.session-info p {
    font-size: .85rem;
    color: var(--text-muted);
}

.session-status {
    margin-left: auto;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    font-family: var(--font-accent);
}

.status-available {
    color: var(--green);
    background: var(--mint);
    padding: .25rem .65rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--green);
}

.session-card.locked {
    opacity: .55;
    cursor: default;
}

.session-card.past {
    opacity: .45;
}

/* ── Timeline / Calendario ─────────────────────────── */
.calendario-bloque {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    border: var(--border-thin);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}

.calendario-bloque h3 {
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: .85rem;
    display: flex;
    align-items: center;
}

.alert-box {
    background: var(--cream);
    border: var(--border-thin);
    border-left: 5px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    font-size: .88rem;
    margin-bottom: .85rem;
    color: var(--text);
}

.timeline {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: .85rem;
}

.timeline-item {
    flex: 1 1 200px;
    background: var(--sky);
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    border: var(--border-thin);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.timeline-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    font-family: var(--font-accent);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .2rem .65rem;
    border-radius: var(--radius-sm);
    margin-bottom: .4rem;
    background: var(--ink);
    color: #fff;
    border: 2px solid var(--ink);
}

.badge-accent {
    background: var(--coral);
    border-color: var(--ink);
    color: #fff;
}

.badge-success {
    background: var(--green);
    border-color: var(--ink);
    color: #fff;
}

.timeline-date {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .15rem;
}

.timeline-event {
    font-size: .82rem;
    color: var(--text-muted);
}

.calendar-table {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.calendar-row {
    display: grid;
    grid-template-columns: minmax(110px, 150px) minmax(140px, 190px) minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
}

.calendar-row {
    padding: .8rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.calendar-table .calendar-row:first-child {
    border-top: none;
}

.calendar-cell {
    min-width: 0;
}

.calendar-cell .timeline-badge {
    margin-bottom: 0;
}

.calendar-date-cell {
    font-size: .88rem;
    font-weight: 700;
    color: var(--ink);
}

.calendar-detail-cell {
    font-size: .84rem;
    color: var(--text-muted);
}

.calendar-link {
    color: var(--teal);
    text-decoration: underline;
    font-weight: 700;
}

.calendar-row.archived {
    opacity: .62;
}

.calendar-note {
    font-size: .84rem;
    color: var(--text-muted);
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.18);
}

.calendar-note strong {
    color: var(--text);
}

.calendario-notas {
    background: var(--cream);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    margin-top: .5rem;
    border: 1px dashed var(--ink);
}

.calendario-notas p {
    font-size: .82rem;
    color: var(--text);
    margin-bottom: .25rem;
}

.calendario-notas p:last-child {
    margin-bottom: 0;
}

.history-list {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.history-item {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .8rem;
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-muted);
    border: 1.5px dashed var(--ink);
    border-radius: var(--radius-sm);
    font-family: var(--font-accent);
    font-size: .8rem;
}

.history-badge {
    display: inline-block;
    padding: .18rem .55rem;
    background: var(--surface);
    color: var(--ink);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-sm);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.expo-fechas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .65rem;
}

.expo-fecha {
    display: inline-block;
    padding: .35rem .8rem;
    background: var(--lavender);
    color: var(--ink);
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 700;
    font-family: var(--font-accent);
    border: var(--border-thin);
    box-shadow: 3px 3px 0 var(--ink);
}

.note {
    font-size: .82rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Resources ─────────────────────────────────────── */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.resource-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
    transition: all var(--transition);
    border: var(--border-thin);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.resource-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow);
    border-color: var(--coral);
    color: var(--text);
}

.resource-icon {
    margin-bottom: .2rem;
}

.resource-card strong {
    font-size: .95rem;
    color: var(--ink);
}

.resource-card p {
    font-size: .8rem;
    color: var(--text-muted);
}

.resource-logbook {
    margin-bottom: 1.2rem;
}

.logbook-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    padding: .55rem 0;
    cursor: pointer;
    list-style: none;
}

.logbook-summary::-webkit-details-marker {
    display: none;
}

.logbook-summary::before {
    content: "▸";
    color: var(--ink);
    font-size: .9rem;
    transition: transform .15s ease;
}

.resource-logbook[open] > .logbook-summary::before {
    transform: rotate(90deg);
}

.logbook-kicker {
    display: inline-block;
    padding: .22rem .55rem;
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius-pill);
    font-family: var(--font-accent);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.logbook-title {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-accent);
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--ink);
}

.log-entry {
    padding-top: .6rem;
}

.log-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: .45rem;
}

.log-entry-date,
.log-entry-badge {
    display: inline-flex;
    align-items: center;
    padding: .28rem .62rem;
    border: var(--border-thin);
    border-radius: var(--radius-pill);
    font-family: var(--font-accent);
    font-size: .73rem;
    font-weight: 800;
}

.log-entry-date {
    background: var(--gold);
    color: var(--ink);
}

.log-entry-badge {
    background: var(--lavender);
    color: var(--ink);
}

.log-entry h4 {
    font-size: 1.02rem;
    color: var(--ink);
    margin-bottom: .25rem;
}

.log-entry-summary {
    font-size: .86rem;
    color: var(--text-muted);
    margin-bottom: .85rem;
}

.log-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.log-entry-note {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .8rem .85rem;
    background: rgba(0, 0, 0, 0.03);
    border: 1.5px dashed var(--ink);
    border-radius: var(--radius-sm);
}

.log-note-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-accent);
    font-size: .88rem;
    font-weight: 800;
}

.log-entry-note h5 {
    font-size: .92rem;
    color: var(--ink);
    margin-bottom: .2rem;
}

.log-entry-note p {
    font-size: .82rem;
    color: var(--text);
    line-height: 1.45;
}

.log-entry-links {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .6rem;
}

.log-entry-links a {
    display: inline-flex;
    align-items: center;
    padding: .32rem .58rem;
    background: var(--surface);
    color: var(--ink);
    border: var(--border-thin);
    border-radius: var(--radius-pill);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: .76rem;
    font-weight: 700;
    font-family: var(--font-accent);
}

.log-entry-links a:hover {
    color: var(--ink);
    background: var(--blush);
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--ink);
}

/* ── Footer ────────────────────────────────────────── */
.site-footer {
    background: var(--ink);
    color: rgba(255,255,255,.85);
    text-align: center;
    padding: 1.75rem 0;
    margin-top: 2.5rem;
    border-top: 4px solid var(--coral);
}

.site-footer a {
    color: var(--gold);
}
.site-footer a:hover {
    color: var(--coral);
}

.footer-content p {
    margin-bottom: .35rem;
    font-size: .92rem;
}

.footer-meta {
    font-size: .78rem;
    opacity: .7;
    font-family: var(--font-accent);
}

.footer-disclaimer {
    font-size: .72rem;
    opacity: .5;
    margin-top: .4rem;
    font-family: var(--font-accent);
}

@media (max-width: 1120px) {
    .home-layout {
        grid-template-columns: minmax(0, var(--container-max));
        max-width: calc(var(--container-max) + 2.5rem);
    }

    .corkboard {
        position: static;
        order: -1;
        margin-bottom: .35rem;
    }

    /* En vertical, la columna lateral baja al final de la página */
    .home-side {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem 2rem;
        margin-top: 1.5rem;
    }

    .works-board {
        position: static;
        flex: 1 1 100%;
    }

    .corkboard-lead {
        max-width: none;
    }

    .log-entry-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
    .home-layout {
        margin-top: 1rem;
        padding: 0 1rem;
        gap: 1rem;
    }

    .corkboard {
        padding: .95rem;
        border-radius: 22px;
        box-shadow: 7px 7px 0 var(--ink);
    }

    .corkboard h2 {
        font-size: 1.28rem;
    }

    .corkboard-kicker {
        font-size: .66rem;
        padding: .28rem .58rem;
    }

    .board-note,
    .board-note:nth-child(even) {
        transform: none;
    }

    .board-note h3 {
        padding-right: 1.2rem;
    }

    .log-entry-note {
        padding: .75rem;
    }

    .site-header {
        padding: 1.6rem 0 1.25rem;
    }

    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: .85rem;
    }

    .header-text h1 {
        font-size: 1.65rem;
        margin-bottom: .2rem;
    }

    .subtitle {
        font-size: .94rem;
        line-height: 1.35;
    }

    .header-meta {
        gap: .45rem .6rem;
        margin-top: .35rem;
    }

    .instructor {
        font-size: .95rem;
    }

    .header-today {
        margin-left: 0;
        padding: .22rem .55rem;
        gap: .45rem;
        font-size: .73rem;
        box-shadow: 2px 2px 0 var(--ink);
    }

    .today-label {
        font-size: .62rem;
        letter-spacing: .1em;
    }

    .badge {
        padding: .35rem .75rem;
        font-size: .78rem;
    }

    .nav-links {
        gap: .2rem;
    }

    .nav-links li a {
        padding: .4rem .6rem;
        font-size: .78rem;
    }

    .units-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .session-card {
        flex-wrap: wrap;
    }

    .session-status {
        margin-left: 0;
        width: 100%;
        text-align: right;
    }

    .timeline {
        flex-direction: column;
    }

    .calendar-row {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .accordion-header {
        font-size: 1.05rem;
        padding: .85rem 1rem;
    }

    .accordion-body {
        padding: 0 1rem 1rem;
    }
}

@media (max-width: 560px) {
    .site-header {
        padding: 1.3rem 0 1.05rem;
    }

    .header-content {
        gap: .65rem;
    }

    .header-text h1 {
        font-size: 1.5rem;
    }

    .subtitle {
        font-size: .88rem;
    }

    .header-meta {
        margin-top: .3rem;
    }

    .instructor {
        font-size: .9rem;
    }

    .header-today {
        padding: .18rem .45rem;
        font-size: .68rem;
    }

    .header-today .today-label {
        display: none;
    }

    .badge {
        padding: .32rem .65rem;
        font-size: .74rem;
    }
}

@media (max-width: 480px) {
    .past-mosaic {
        grid-template-columns: 1fr;
    }

    .units-grid {
        grid-template-columns: 1fr;
    }

    .resources-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Acceso discreto al cronograma de exposiciones ── */
.cronograma-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .55rem .9rem;
    border: 1px dashed var(--border-color, rgba(0,0,0,.25));
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.5);
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.cronograma-link:hover {
    background: var(--blush);
    color: var(--ink);
    border-color: var(--ink);
}

.cronograma-link-go {
    font-size: .78rem;
    opacity: .8;
    white-space: nowrap;
}

/* ── Trabajos digitales entregados: post-its sueltos ── */
.board-scatter {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2.4rem 2.8rem;
    padding: 1rem 0 2rem;
}

.work-note {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 250px;
    padding: 1.6rem 1.1rem 1.1rem;
    border: var(--border-thin);
    border-radius: 10px 18px 12px 16px;
    box-shadow: 5px 6px 9px rgba(0,0,0,.28);
    color: var(--ink);
    text-decoration: none;
    transition: transform .14s ease, box-shadow .14s ease;
}

/* Ángulos y desfases espontáneos, como pegados a mano en huecos del pizarrón */
.work-note:nth-child(5n+1) { transform: rotate(-3.2deg) translateY(0.4rem); }
.work-note:nth-child(5n+2) { transform: rotate(2.6deg)  translateY(2.6rem); }
.work-note:nth-child(5n+3) { transform: rotate(-1.4deg) translateY(-1.2rem); }
.work-note:nth-child(5n+4) { transform: rotate(3.4deg)  translateY(1.8rem); }
.work-note:nth-child(5n+5) { transform: rotate(-2.3deg) translateY(-0.6rem); }

.work-note:hover,
.work-note:focus-visible {
    transform: rotate(0deg) translateY(-5px) scale(1.03);
    box-shadow: 9px 13px 18px rgba(0,0,0,.32);
    outline: none;
    z-index: 3;
}

/* Chincheta clavada arriba del post-it */
.work-note::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    background: radial-gradient(circle at 35% 30%, #fff7d4 0 22%, rgba(255,255,255,.25) 23%, transparent 24%), var(--coral);
    box-shadow: 1px 3px 3px rgba(0,0,0,.4);
    z-index: 2;
}

.work-note.paper-1 { background: #fff3c9; }
.work-note.paper-2 { background: #eef4ff; }
.work-note.paper-3 { background: #ebfff0; }
.work-note.paper-4 { background: #fff9ea; }
.work-note.paper-5 { background: #ffe9ef; }
.work-note.paper-2::before { background: var(--pin-blue); }
.work-note.paper-3::before { background: var(--pin-green); }
.work-note.paper-4::before { background: var(--pin-gold); }
.work-note.paper-5::before { background: var(--pin-red); }

.work-note .wn-team {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: .55rem;
    padding: .25rem .6rem;
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius-pill);
    font-family: var(--font-accent);
    font-weight: 800;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.work-note .wn-title {
    font-size: 1.02rem;
    line-height: 1.22;
    font-weight: 800;
    margin-bottom: .4rem;
}

.work-note .wn-desc {
    font-size: .82rem;
    line-height: 1.42;
    color: var(--text);
    margin-bottom: .85rem;
}

.work-note .wn-members {
    margin: 0 0 .95rem;
    padding: 0;
    list-style: none;
    font-size: .74rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.work-note .wn-cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    background: rgba(255,255,255,.75);
    border: var(--border-thin);
    border-radius: var(--radius-pill);
    box-shadow: 2px 2px 0 var(--ink);
    font-weight: 800;
    font-size: .8rem;
}

.work-note:hover .wn-cta { background: var(--blush); }

@media (max-width: 540px) {
    .board-scatter { gap: 2rem 1rem; }
    .work-note { width: 100%; max-width: 320px; }
    .work-note:nth-child(5n+1),
    .work-note:nth-child(5n+2),
    .work-note:nth-child(5n+3),
    .work-note:nth-child(5n+4),
    .work-note:nth-child(5n+5) { transform: rotate(-1.5deg) translateY(0); }
}

/* ── Print styles ──────────────────────────────────── */
@media print {
    .site-nav, .header-repo-mobile, .views-badge {
        display: none;
    }

    .site-header {
        background: #fff;
        color: #000;
        border-bottom: 2px solid #000;
    }

    .instructor { color: #333; }

    body {
        background: #fff;
        font-size: 11pt;
    }

    .accordion {
        box-shadow: none;
        border: 1px solid #999;
    }

    .section {
        break-inside: avoid;
    }
}