:root {
  --header-height: 68px;
  --usage-bar-height: 142px;
  --plan-bar-height: 58px;
  --save-status-height: 22px;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --text: #172033;
  --muted: #64748b;
  --border: #dbe3ee;
  --accent: #2659d9;
  --accent-soft: #e9efff;
  --selected: #dfe9ff;
  --usage-1: #edf9f2;
  --usage-2: #d4f1df;
  --usage-3: #abe1c1;
  --usage-4: #76c797;
  --usage-border: #3c9b65;
  --scroll-track: #e7edf5;
  --scroll-thumb: #a8b4c5;
  --scroll-thumb-hover: #7f8da2;
  --shadow: 0 10px 28px rgb(30 41 59 / 8%);
  --radius: 14px;
}

[data-theme="dark"] {
  --bg: #111827;
  --surface: #182235;
  --surface-muted: #202c40;
  --text: #edf2f7;
  --muted: #a7b4c6;
  --border: #334155;
  --accent: #8ba9ff;
  --accent-soft: #22365e;
  --selected: #294576;
  --usage-1: #1c342c;
  --usage-2: #204638;
  --usage-3: #285c47;
  --usage-4: #317455;
  --usage-border: #62c58a;
  --scroll-track: #111a2a;
  --scroll-thumb: #46566d;
  --scroll-thumb-hover: #60728d;
  --shadow: 0 10px 28px rgb(0 0 0 / 22%);
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { border-radius: 999px; background: var(--scroll-track); }
*::-webkit-scrollbar-thumb { min-width: 28px; min-height: 28px; border: 2px solid var(--scroll-track); border-radius: 999px; background: var(--scroll-thumb); }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
*::-webkit-scrollbar-corner { background: var(--scroll-track); }
html { min-height: 100%; overflow-y: auto; color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body { min-height: 100dvh; margin: 0; min-width: 950px; padding-bottom: 82px; background: var(--bg); color: var(--text); font: 14px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
body.bottom-ad-closed { padding-bottom: 0; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; color: var(--text); background: var(--surface); }
button:hover { border-color: var(--accent); color: var(--accent); }
button.primary { border-color: var(--accent); color: white; background: var(--accent); }
button.primary:hover { filter: brightness(1.08); color: white; }
.app-header { min-height: var(--header-height); padding: 8px 24px; display: flex; align-items: center; justify-content: space-between; gap: 22px; background: var(--surface); }
h1, h2, p { margin: 0; } h1 { font-size: 20px; letter-spacing: -.02em; } h2 { font-size: 16px; letter-spacing: -.01em; }
.eyebrow { margin-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.project-info { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
/* El banner aprovecha la altura de la cabecera y conserva un pequeño margen interior. */
.project-banner { width: clamp(170px, 15vw, 210px); height: calc(var(--header-height) - 16px); line-height: 0; cursor: text; }
.project-banner img { display: block; width: 100%; height: 100%; border-radius: 6px; object-fit: contain; object-position: left center; }
.project-banner .project-banner-dark { display: none; }
[data-theme="dark"] .project-banner .project-banner-light { display: none; }
[data-theme="dark"] .project-banner .project-banner-dark { display: block; }
.project-title-block { min-width: 0; }
.project-name-input { min-width: 0; width: 50%; min-height: 27px; max-height: none; padding: 2px 4px; overflow: hidden; border: 0; border-radius: 5px; color: var(--text); background: transparent; font: inherit; font-size: 17px; font-weight: 700; line-height: 1.18; letter-spacing: -.02em; resize: none; white-space: pre-wrap; word-break: normal; }
.project-name-input:hover { background: var(--surface-muted); }
.project-name-input:focus { background: var(--surface-muted); }
.header-navigation-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.resources-link { display: inline-flex; gap: 7px; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 38px; padding: 7px 12px; border: 1px solid #1976d2; border-radius: 8px; color: #fff; background: #1976d2; font-size: 12px; font-weight: 800; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.resources-link-logo { display: block; flex: 0 0 auto; width: 22px; height: 22px; color: #fff; }
.resources-link:hover, .resources-link:focus-visible { color: #fff; background: #145ea8; border-color: #145ea8; }
.resources-link:focus-visible { outline: 2px solid #1976d2; outline-offset: 2px; }
.programming-sections { display: flex; flex-wrap: nowrap; gap: 4px; }
.programming-sections button { display: inline-flex; align-items: center; height: 38px; padding: 8px 5px; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.programming-sections button[data-programming-section="curriculum"] { border: 4px double var(--accent); }
.programming-sections button:hover, .programming-sections button:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface)); }
.programming-sections button[aria-pressed="true"] { color: white; border-color: var(--accent); background: var(--accent); }
.programming-sections button[data-programming-section="curriculum"][aria-pressed="true"] { border-color: white; }
.plan-badge { flex: 0 0 auto; padding: 5px 9px; border: 1px solid #86a5ff; border-radius: 999px; color: #1746ba; background: #edf2ff; font-size: 11px; font-weight: 800; white-space: nowrap; }
[data-theme="dark"] .plan-badge { color: #dce6ff; border-color: #496ecf; background: #213664; }
.toolbar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.toolbar > button:not(.accent-button), .toolbar > .view-menu-container > button { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 6px 9px; font-size: 10px; font-weight: 750; line-height: 1.2; }
.toolbar > .history-icon-button { width: 32px; padding: 6px; }
.history-icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toolbar > .accent-button { width: 32px; height: 32px; }
.save-status-bar { position: relative; z-index: 40; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; width: 100%; min-height: 22px; padding: 2px 24px; border: 1px solid var(--border); background: var(--surface); text-align: center; }
.save-status-bar .save-status { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.save-status-bar .plan-badge { position: static; padding: 1px 8px; font-size: 10px; line-height: 1.35; }
.save-status { color: var(--muted); font-size: 11px; line-height: 1.25; }
.curriculum-load-progress { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 3px; overflow: hidden; background: #fbe9eb; }
.curriculum-load-progress-fill { display: block; width: var(--progress-width, 0%); height: 100%; background: #c1121f; }
.curriculum-load-progress.is-indeterminate .curriculum-load-progress-fill { width: 35%; animation: curriculum-progress-indeterminate 1.2s ease-in-out infinite; }
@keyframes curriculum-progress-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.curriculum-load-progress[hidden] { display: none; }
/* El círculo muestra la paleta activa y permite recorrer ocho colores sin cambiar el modo claro u oscuro. */
.accent-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 3px solid var(--surface); border-radius: 50%; color: transparent; background: var(--accent); box-shadow: 0 0 0 1px var(--border); }
.accent-button:hover { border-color: var(--surface); color: transparent; filter: brightness(1.08); box-shadow: 0 0 0 2px var(--accent-soft); }
.accent-button:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.view-menu-container { position: relative; }
.view-menu { position: absolute; z-index: 100; top: calc(100% + 6px); right: 0; display: grid; width: 250px; padding: 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow); }
.view-menu[hidden] { display: none; }
.view-menu button { border: 0; padding: 9px 10px; text-align: left; background: transparent; }
.view-menu button:hover, .view-menu button:focus-visible { color: var(--accent); background: var(--accent-soft); outline: none; }
.usage-info-bar { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; height: var(--usage-bar-height); padding: 8px 16px; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--surface); }
.usage-info-bar[hidden] { display: none; }
html[data-section=""][data-curriculum-summary-hidden="true"] .usage-info-bar,
html[data-section="units"][data-curriculum-summary-hidden="true"] .usage-info-bar { display: none; }
html[data-section=""][data-curriculum-summary-hidden="true"] .workspace { height: calc(100dvh - var(--header-height) - var(--save-status-height) - var(--plan-bar-height)); }
html[data-section="units"][data-curriculum-summary-hidden="true"] .workspace,
html[data-section="units"][data-curriculum-summary-hidden="true"] .ad-rail { height: calc(100dvh - var(--header-height) - var(--save-status-height)); }
.free-plan-bar { display: flex; align-items: center; gap: 18px; min-height: var(--plan-bar-height); padding: 8px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface)); }
.plan-info-row { display: flex; align-items: center; gap: 14px; flex: 1 1 420px; min-width: 0; }
.plan-info-row > .plan-summary { min-width: 0; }
.plan-info-row > .resources-link { margin-left: auto; }
.catalog-pickers { display: flex; align-items: center; flex: 1 1 900px; gap: 14px; min-width: 0; }
.community-picker, .stage-picker, .subject-picker { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--text); font-size: 12px; font-weight: 800; }
.community-picker { flex: 0 1 245px; }
.stage-picker { flex: 0 1 170px; }
.subject-picker { flex: 1 1 320px; }
.community-picker select, .stage-picker select, .subject-picker select { min-width: 0; width: 100%; padding: 7px 9px; background: var(--surface); }
.plan-summary { flex: 1 1 auto; color: var(--muted); font-size: 12px; }
.landing-link { flex: 0 0 auto; color: var(--accent); font-size: 12px; font-weight: 750; text-decoration: none; }
.landing-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.local-file-warning { padding: 10px 18px; border-bottom: 1px solid #e5a52e; color: #624109; background: #fff4d6; font-size: 13px; }
.local-file-warning[hidden] { display: none; }
[data-theme="dark"] .local-file-warning { color: #ffe5a6; border-color: #9d6b16; background: #3e2c0d; }
.local-file-warning code { font: inherit; font-weight: 800; }
.usage-summary-row { display: grid; grid-template-rows: repeat(2, minmax(54px, 1fr)); gap: 8px; height: 100%; }
.usage-summary-line { display: flex; align-items: center; gap: 18px; min-width: 0; min-height: 0; padding: 2px 4px 8px; overflow-x: auto; overflow-y: hidden; scrollbar-gutter: stable; }
.usage-summary-line-content { display: flex; align-items: center; gap: 18px; width: max-content; min-width: 100%; }
.usage-summary-group { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.usage-summary-group[hidden], .curriculum-family-toolbar[hidden] { display: none; }
.usage-summary-title { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.usage-bubble { display: inline-flex; align-items: center; justify-content: center; gap: 5px; max-width: 190px; min-height: 30px; padding: 4px 7px; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-muted); font-size: 10px; text-align: center; }
.usage-summary-knowledge .usage-bubble { max-width: 340px; min-height: 30px; }
.usage-bubble:hover { border-color: var(--accent); color: var(--text); }
.usage-summary-row.has-relation-focus .usage-bubble { opacity: .32; }
.usage-summary-row.has-relation-focus .usage-bubble.relation-highlighted { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.usage-summary-row.has-relation-focus .usage-bubble.relation-source { opacity: 1; border-color: var(--accent); color: white; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.usage-summary-row.has-relation-focus .usage-bubble.relation-source .usage-counter { color: var(--accent); background: white; }
.usage-bubble-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-summary-knowledge .usage-bubble-label { white-space: nowrap; line-height: 1.2; }
.usage-bubble .usage-counter { min-width: 20px; height: 20px; padding: 0 5px; font-size: 9px; }
.usage-bubble.usage-level-1 { border-color: var(--usage-border); background: var(--usage-1); }
.usage-bubble.usage-level-2 { border-color: var(--usage-border); background: var(--usage-2); }
.usage-bubble.usage-level-3 { border-color: var(--usage-border); background: var(--usage-3); }
.usage-bubble.usage-level-4 { border-color: var(--usage-border); background: var(--usage-4); }
.usage-bubble.usage-level-1 .usage-counter, .usage-bubble.usage-level-2 .usage-counter, .usage-bubble.usage-level-3 .usage-counter, .usage-bubble.usage-level-4 .usage-counter { color: var(--usage-border); }
.app-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr) 180px; min-width: 0; }
html[data-tutorial-mode="true"] body { padding-bottom: 0; }
html[data-tutorial-mode="true"] .app-layout { grid-template-columns: minmax(0, 1fr); }
html[data-tutorial-mode="true"] .ad-rail,
html[data-tutorial-mode="true"] .bottom-ad { display: none !important; }
/* Ambas vistas suman 3.2fr: la columna de planificación usa .68fr en las dos. */
.workspace { display: grid; grid-template-columns: minmax(260px, .945fr) minmax(420px, 1.575fr) minmax(224px, .68fr); gap: 16px; height: calc(100dvh - var(--header-height) - var(--save-status-height) - var(--usage-bar-height) - var(--plan-bar-height)); min-height: 360px; padding: 16px; }
html[data-section="units"] .workspace { grid-template-columns: minmax(230px, .72fr) minmax(520px, 1.8fr) minmax(224px, .68fr); }
html[data-section="units"] .workspace { height: calc(100dvh - var(--header-height) - var(--save-status-height) - var(--usage-bar-height)); }
html[data-section="situations"] .workspace { grid-template-columns: minmax(280px, .62fr) minmax(0, 2fr); height: calc(100dvh - var(--header-height) - var(--save-status-height)); }
html[data-section="units"] .free-plan-bar,
html[data-section="programming"] .free-plan-bar,
html[data-section="infographic"] .free-plan-bar { display: none; }
html[data-section="situations"] .free-plan-bar,
html[data-section="situations"] .usage-info-bar,
html[data-section="situations"] .cards-column,
html[data-section="situations"] .relationships-column,
html[data-section="situations"] .left-curriculum-switch,
html[data-section="situations"] .collection-panel { display: none; }
html[data-section="situations"] .curriculum-column { display: block; }
html[data-section="situations"] .unit-navigator { height: 100%; }
html[data-section="situations"] .unit-navigator-switch { display: none; }
.situation-workspace { display: none; }
.situation-workspace[hidden] { display: none !important; }
html[data-section="situations"] .situation-workspace { display: grid; align-content: start; min-width: 0; gap: 14px; padding: 16px; overflow: auto; }
.situation-workspace-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.situation-workspace-header h2 { margin: 2px 0 0; font-size: 22px; }
.situation-workspace-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.situation-empty { display: grid; place-items: center; align-content: center; min-height: 320px; gap: 10px; color: var(--muted); text-align: center; }
.situation-empty h2 { color: var(--text); }
.situation-meta-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.situation-meta-item { display: grid; gap: 3px; min-width: 0; padding: 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); }
.situation-meta-item strong { color: var(--muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.situation-meta-item span { overflow-wrap: anywhere; font-size: 12px; font-weight: 700; }
.situation-detail-section { display: grid; gap: 9px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.situation-detail-section > h3, .situation-detail-section > summary { margin: 0; color: var(--text); font-size: 16px; font-weight: 800; }
.situation-detail-section > summary { cursor: pointer; }
.situation-detail-section > p { color: var(--muted); font-size: 12px; white-space: pre-wrap; }
.situation-units-grid, .situation-activities-list, .situation-curriculum-list, .situation-indicator-units { display: grid; gap: 9px; }
.situation-units-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.situation-unit-card, .situation-activity-card, .situation-curriculum-card, .situation-indicator-card { display: grid; gap: 7px; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); }
.situation-unit-card.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.situation-unit-select { display: grid; gap: 7px; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.situation-unit-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.situation-unit-card h4, .situation-activity-card h4, .situation-curriculum-card h4, .situation-indicator-card h4 { margin: 0; font-size: 13px; }
.situation-activity-heading { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.situation-activity-heading h4 { min-width: 0; padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.situation-activity-collapse, .activity-collapse { flex: 0 0 auto; width: 32px; min-width: 32px; height: 32px; padding: 0; border: 0; color: var(--accent); background: transparent; font-size: 26px; font-weight: 900; line-height: 1; transition: transform .15s ease, background-color .15s ease; }
.situation-activity-collapse[aria-expanded="true"], .activity-collapse[aria-expanded="true"] { transform: rotate(90deg); }
.situation-activity-collapse:hover, .situation-activity-collapse:focus-visible, .activity-collapse:hover, .activity-collapse:focus-visible { background: var(--accent-soft); }
.situation-activity-body { display: grid; gap: 7px; }
.situation-activity-body[hidden] { display: none; }
.situation-unit-card p, .situation-activity-card p, .situation-indicator-card p { color: var(--muted); font-size: 11px; }
.situation-activity-meta, .situation-chip-list { display: flex; flex-wrap: wrap; gap: 5px; }
.situation-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 999px; background: var(--surface); font-size: 10px; line-height: 1.25; }
.situation-chip span { overflow-wrap: anywhere; }
.situation-chip button { min-width: 18px; padding: 0 3px; border: 0; color: var(--muted); background: transparent; font-size: 14px; }
.situation-chip button:hover { color: var(--danger); }
.situation-curriculum-group { display: grid; gap: 5px; }
.situation-curriculum-group > strong { color: var(--muted); font-size: 10px; }
.situation-activity-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.situation-activity-detail { padding: 7px; border-radius: 7px; background: var(--surface); font-size: 11px; white-space: pre-wrap; }
.situation-activity-detail strong { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.situation-activity-links { display: flex; flex-wrap: wrap; gap: 6px; }
.situation-activity-links a { font-size: 11px; }
.situation-indicator-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.situation-indicator-group { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 6px 8px; border-radius: 7px; background: var(--surface); font-size: 10px; }
.situation-summary-item.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.situation-general-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html[data-section="units"] .workspace,
html[data-section="units"] .ad-rail { height: calc(100dvh - var(--header-height) - var(--save-status-height) - var(--usage-bar-height)); }
html[data-section="units"] .left-curriculum-switch,
html[data-section="units"] .collection-panel,
html[data-section="units"] .drag-instructions,
html[data-section="units"] .cards-heading .panel-heading,
html[data-section="units"] #toggle-all-cards-button { display: none; }
html[data-section="units"] .cards-heading { justify-content: flex-end; margin-bottom: 10px; }
html[data-section="units"] .cards-column { padding: 14px; }
html[data-section="units"] .card { gap: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); }
html[data-section="units"] .card-header { padding: 0 0 11px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
html[data-section="units"] .card-toggle,
html[data-section="units"] .card-drag-handle { display: none; }
html[data-section="units"] .card-body { gap: 14px; }
html[data-section="units"] .relationships-column { padding: 14px; }
html[data-section="units"] .usage-info-bar { grid-template-rows: minmax(0, 1fr); }
html[data-section="units"] .relationships-column .curriculum-family-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; flex: 0 0 auto; gap: 8px; padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-muted); }
html[data-section="units"] .relationships-column .curriculum-family-toolbar[hidden] { display: none; }
html[data-section="units"] .relationships-column .curriculum-family-toolbar::before { content: 'Situaciones de aprendizaje'; color: var(--text); font-size: 13px; font-weight: 800; }
html[data-section="units"] .relationships-column .family-summary.is-situation-summary { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); max-height: 270px; padding: 0; overflow: auto; }
html[data-section="units"] .relationships-column .family-summary.is-situation-summary .situation-summary-item { height: 96px; min-height: 96px; }
html[data-section="units"] .relationships-column .family-summary.is-situation-summary .situation-summary-content { overflow: auto; }
.programming-chapter-panel,
.programming-editor-panel,
.programming-preview-panel,
.infographic-panel { display: none; }
html[data-section="infographic"] .usage-info-bar { display: none; }
html[data-section="infographic"] .workspace { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - var(--header-height) - var(--save-status-height)); }
html[data-section="infographic"] .curriculum-column,
html[data-section="infographic"] .cards-column,
html[data-section="infographic"] .relationships-column,
html[data-section="infographic"] .programming-chapter-panel,
html[data-section="infographic"] .programming-editor-panel,
html[data-section="infographic"] .programming-preview-panel { display: none; }
html[data-section="infographic"] .infographic-panel { display: flex; min-height: 0; flex-direction: column; padding: 16px; }
.infographic-activity-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-left: auto; color: var(--muted); font-size: 11px; }
.infographic-zoom-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 0; flex: 0 0 auto; font-size: 12px; }
.infographic-zoom-controls input { width: 140px; padding: 0; box-shadow: none; accent-color: var(--accent); }
.infographic-zoom-controls output { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.infographic-zoom-controls button { padding: 4px 9px; }
.infographic-viewport { flex: 1; min-height: 0; margin-top: 10px; overflow: auto; }
.infographic-viewport .infographic-board { margin-top: 0; overflow: visible; flex: none; }
.infographic-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.infographic-title-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; width: 100%; }
.infographic-title-actions button { flex: 0 0 auto; margin-bottom: 1px; }
.infographic-heading > p { max-width: 520px; color: var(--muted); font-size: 12px; }
.infographic-board { display: grid; grid-template-rows: auto minmax(330px, 1fr); min-height: 0; flex: 1; margin-top: 14px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); }
.infographic-board.infographic-without-situations { grid-template-rows: minmax(0, 1fr); }
.infographic-board.infographic-without-situations .infographic-situations { display: none; }
.infographic-situations { display: flex; flex-wrap: wrap; align-content: start; gap: 10px; min-height: 0; padding: 14px; border-top: 2px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface)); }
.infographic-lane-title { grid-column: 1 / -1; margin: 0; color: var(--accent); font-size: 12px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.infographic-situations > .infographic-lane-title, .infographic-situations > .infographic-empty { flex: 0 0 100%; }
.infographic-situation { flex: 1 1 calc(33.333333% - 6.666667px); overflow-wrap: anywhere; display: grid; min-width: 0; gap: 7px; padding: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 10px; background: var(--surface); }
.infographic-situation h3, .infographic-unit h3 { margin: 0; font-size: 13px; }
.infographic-situation p { color: var(--muted); font-size: 11px; }
.infographic-situation-list, .infographic-unit-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.infographic-situation-list li, .infographic-unit-list li { padding: 5px 6px; border-radius: 6px; background: var(--surface-muted); font-size: 11px; line-height: 1.35; }
.infographic-situation-list li.infographic-activity, .infographic-unit-list li.infographic-activity { border: 1px solid var(--border); background: #ffffff; color: #172033; }
.infographic-situation-list li.infographic-activity.is-evaluable, .infographic-unit-list li.infographic-activity.is-evaluable { border-color: #2563eb; background: #e8f0ff; }
.infographic-situation-list li.infographic-activity.is-situation, .infographic-unit-list li.infographic-activity.is-situation { border-color: #db2777; background: #fce7f3; }
.infographic-lane-title { grid-column: 1 / -1; }
.infographic-terms { display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); min-width: 0; }
.infographic-term { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-height: 0; padding: 14px; }
.infographic-term + .infographic-term { border-left: 2px solid var(--accent); }
.infographic-term-label { color: var(--accent); font-size: 13px; font-weight: 850; text-align: center; }
.infographic-units { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-content: start; gap: 10px; }
.infographic-unit { display: grid; align-content: start; gap: 7px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.infographic-unit-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.infographic-unit-weeks { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 750; }
.infographic-item-label { color: var(--accent); font-weight: 800; }
.infographic-curriculum-row { display: flex; align-items: flex-start; gap: 4px; }
.infographic-knowledge-row { flex-direction: column; }
.infographic-knowledge-row .infographic-curriculum-codes { width: 100%; justify-content: flex-start; }
.infographic-curriculum-codes { display: flex; flex: 1; flex-wrap: wrap; gap: 4px; }
.infographic-curriculum-code { padding: 2px 5px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 5px; background: var(--surface); color: var(--text); cursor: help; font-weight: 750; }
.infographic-empty { align-self: center; color: var(--muted); font-size: 12px; font-style: italic; }
html[data-section="programming"] .usage-info-bar { display: none; }
html[data-section="programming"] .workspace {
  grid-template-columns: minmax(200px, .65fr) minmax(360px, 1.4fr) minmax(240px, .8fr);
  height: calc(100dvh - var(--header-height) - var(--save-status-height));
}
html[data-section="programming"] .curriculum-column,
html[data-section="programming"] .cards-column,
html[data-section="programming"] .relationships-column { display: none; }
html[data-section="programming"] .programming-chapter-panel,
html[data-section="programming"] .programming-editor-panel,
html[data-section="programming"] .programming-preview-panel { display: flex; min-height: 0; flex-direction: column; }
html[data-section="programming"] .ad-rail { height: calc(100dvh - var(--header-height) - var(--save-status-height)); }
.programming-chapter-panel,
.programming-editor-panel,
.programming-preview-panel { padding: 16px; }
.programming-panel-heading,
.programming-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.programming-help,
.programming-editor-description { margin-top: 7px; color: var(--muted); font-size: 12px; }
.programming-chapter-list { display: grid; align-content: start; gap: 14px; min-height: 0; margin-top: 13px; overflow: auto; padding: 2px; }
.programming-chapter-group { display: grid; gap: 5px; }
.programming-chapter-group h3 { margin: 0 0 2px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.programming-chapter-item { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: stretch; gap: 4px; }
.programming-chapter-button { display: grid; grid-template-columns: 39px minmax(0, 1fr); align-items: center; gap: 7px; width: 100%; padding: 9px; text-align: left; }
.programming-chapter-button[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.programming-chapter-include { display: grid; place-items: center; cursor: pointer; }
.programming-chapter-include input { appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid #9aa5b1; border-radius: 3px; background: transparent; cursor: pointer; }
.programming-chapter-include input:checked { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m3 9 4 4 8-9' fill='none' stroke='%2327804a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
.programming-chapter-include input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.programming-chapters-toggle { align-self: flex-start; margin-top: 4px; padding: 6px 9px; font-size: 11px; }
.programming-chapter-number { color: var(--accent); font-size: 10px; font-weight: 800; }
.programming-chapter-name { font-size: 11px; font-weight: 700; line-height: 1.3; }
.programming-chapter-status { color: var(--usage-border); font-weight: 900; text-align: center; }
.programming-chapter-badge { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 800; }
.programming-editor-panel { gap: 4px; }
.programming-editor-content { display: grid; align-content: start; gap: 13px; min-height: 0; margin-top: 12px; overflow: auto; padding: 2px; }
.programming-options-fieldset { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 11px; border: 1px solid var(--border); border-radius: 10px; }
.programming-options-fieldset legend { padding: 0 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.programming-text-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); cursor: pointer; font-size: 12px; line-height: 1.45; }
.programming-text-option:not(:has(> input)) { grid-template-columns: minmax(0, 1fr); cursor: default; }
.programming-text-option:hover,
.programming-text-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.programming-text-option input { width: auto; margin: 3px 0 0; accent-color: var(--accent); }
.programming-rich-content { display: grid; min-width: 0; gap: 7px; }
.programming-rich-controls { display: flex; justify-content: flex-end; gap: 4px; }
.programming-rich-controls button { min-width: 27px; padding: 2px 6px; font-size: 12px; font-weight: 800; }
.programming-rich-editor { min-height: 72px; padding: 4px 2px; color: var(--text); cursor: text; font-size: 13px; line-height: 1.6; outline: none; }
.programming-rich-editor:focus { box-shadow: inset 0 -2px 0 var(--accent); }
.programming-rich-editor p { margin: 0 0 10px; }
.programming-rich-editor p:last-child { margin-bottom: 0; }
.programming-pdf-option { display: flex; align-items: flex-start; gap: 9px; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); cursor: pointer; }
.programming-pdf-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.programming-pdf-option input { flex: 0 0 auto; width: auto; margin: 3px 0 0; accent-color: var(--accent); }
.programming-rich-editor ul, .programming-rich-editor ol { margin: 0 0 10px; padding-left: 22px; }
.programming-rich-editor strong, .programming-rich-editor b { font-weight: 800; }
.programming-inline-choice { margin: 10px 0; background: var(--surface-muted); }
.programming-preview-panel .programming-panel-heading button { flex: 0 0 auto; padding: 6px 8px; font-size: 10px; }
.programming-preview-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.programming-document-selectors,
.programming-document-format { display: grid; gap: 3px; min-width: 0; margin: 14px 0 0; padding: 7px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); }
.programming-document-selectors legend,
.programming-document-format legend { padding: 0 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.programming-document-selectors label,
.programming-document-format label { display: block; cursor: pointer; }
.programming-document-selectors input,
.programming-document-format input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.programming-document-selectors span,
.programming-document-format span { display: flex; align-items: center; min-height: 36px; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 750; line-height: 1.25; }
.programming-document-format span { justify-content: center; text-align: center; }
.programming-document-selectors label:hover span,
.programming-document-format label:hover span { color: var(--accent); background: var(--surface); }
.programming-document-selectors input:checked + span,
.programming-document-format input:checked + span { border-color: var(--accent); color: white; background: var(--accent); box-shadow: none; }
.programming-document-selectors input:focus-visible + span,
.programming-document-format input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.programming-annex-group { display: grid; gap: 7px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.programming-annex-group h3 { margin: 0; font-size: 12px; }
.programming-annex-codes { display: flex; flex-wrap: wrap; gap: 6px; }
.programming-annex-code { min-width: 47px; padding: 6px 8px; font-size: 11px; }
.programming-annex-code[aria-pressed="true"] { border-color: var(--accent); color: white; background: var(--accent); }
.programming-annex-code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.programming-annex-empty { margin: 0; color: var(--muted); font-size: 11px; }
.programming-annex-all { font-weight: 750; }
html[data-section="programming"] .programming-preview-panel { overflow-y: auto; }
.programming-document-format { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.programming-export-button { width: 100%; margin-top: 14px; padding: 11px 12px; color: white; font-weight: 800; }
.programming-export-notice { margin: 12px 0 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); color: var(--text); font-size: 12px; line-height: 1.6; }
.programming-export-notice strong { display: block; margin-bottom: 5px; }
.programming-preview-content { display: grid; align-content: start; gap: 12px; min-height: 0; margin-top: 14px; overflow: auto; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-muted); }
.programming-preview-content h3 { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
.programming-preview-content p { white-space: pre-wrap; font-size: 12px; line-height: 1.55; }
.programming-preview-rich-text { font-size: 12px; line-height: 1.6; }
.programming-preview-rich-text p { margin: 0 0 11px; white-space: normal; }
.programming-preview-rich-text ul, .programming-preview-rich-text ol { margin: 0 0 11px; padding-left: 22px; }
.programming-preview-rich-text strong, .programming-preview-rich-text b { font-weight: 800; }
.programming-document-selectors label[hidden] { display: none; }
.descriptor-matrix-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.descriptor-matrix { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 11px; }
.descriptor-matrix caption { padding: 9px; text-align: left; font-weight: 700; }
.descriptor-matrix th, .descriptor-matrix td { border: 1px solid var(--border); padding: 5px 7px; text-align: center; white-space: nowrap; }
.descriptor-matrix tbody th { position: sticky; left: 0; background: var(--surface-muted); text-align: left; }
.descriptor-matrix thead th { background: var(--surface-muted); }
.descriptor-matrix tbody td:not(:empty) { font-weight: 800; color: var(--accent); }
.programming-empty { color: var(--muted); font-style: italic; }
.ad-rail { display: flex; flex-direction: column; gap: 12px; height: calc(100dvh - var(--header-height) - var(--save-status-height) - var(--usage-bar-height) - var(--plan-bar-height)); min-height: 0; padding: 16px 0 16px 16px; overflow: auto; }
.ad-rail-right { padding: 16px 16px 16px 0; }
.ad-label { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ad-card { display: grid; gap: 9px; padding: 15px; border: 1px solid #b7cafb; border-radius: 14px; background: linear-gradient(155deg, #edf3ff, #fff); box-shadow: var(--shadow); }
.ad-card-secondary { border-color: #bddecf; background: linear-gradient(155deg, #ecfbf4, #fff); }
[data-theme="dark"] .ad-card { border-color: #36528e; background: linear-gradient(155deg, #1f3158, #182235); }
[data-theme="dark"] .ad-card-secondary { border-color: #285a49; background: linear-gradient(155deg, #173c33, #182235); }
.ad-kicker { color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ad-card strong { font-size: 15px; line-height: 1.25; }
.ad-card p { color: var(--muted); font-size: 11px; }
.ad-card .ad-action { justify-self: start; padding: 6px 9px; color: var(--accent); background: var(--surface); font-size: 11px; font-weight: 800; }
.bottom-ad { position: fixed; z-index: 40; right: 16px; bottom: 14px; left: 16px; display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 62px; padding: 10px 54px 10px 18px; border: 1px solid #7699f5; border-radius: 16px; color: #fff; background: linear-gradient(100deg, #173b9a, #2b63dc 55%, #1749bc); box-shadow: 0 18px 46px rgb(15 23 42 / 30%); }
.bottom-ad[hidden] { display: none; }
.bottom-ad > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; }
.bottom-ad .ad-label { color: #cbd8ff; }
.bottom-ad span:last-child { color: #e2e9ff; font-size: 12px; }
.bottom-ad-cta { flex: 0 0 auto; color: #173b9a; border-color: #fff; background: #fff; font-weight: 800; }
.bottom-ad-close { position: absolute; top: 50%; right: 13px; width: 34px; height: 34px; padding: 0; transform: translateY(-50%); border-color: rgb(255 255 255 / 35%); color: #fff; background: rgb(255 255 255 / 12%); font-size: 23px; line-height: 1; }
.bottom-ad-close:hover { color: #fff; border-color: #fff; }
.workspace.hide-left { grid-template-columns: minmax(0, 1fr) minmax(224px, .68fr); }
.workspace.hide-right { grid-template-columns: minmax(260px, .9fr) minmax(420px, 1.5fr); }
.workspace.hide-left.hide-right { grid-template-columns: minmax(420px, 1fr); }
/* En Unidades didácticas estas reglas deben superar la cuadrícula específica de tres columnas. */
html[data-section="units"] .workspace.hide-left { grid-template-columns: minmax(0, 1fr) minmax(224px, .68fr); }
html[data-section="units"] .workspace.hide-right { grid-template-columns: minmax(230px, .72fr) minmax(0, 1fr); }
html[data-section="units"] .workspace.hide-left.hide-right { grid-template-columns: minmax(0, 1fr); }
html[data-section="programming"] .workspace.hide-left { grid-template-columns: minmax(360px, 1fr) minmax(240px, .8fr); }
html[data-section="programming"] .workspace.hide-right { grid-template-columns: minmax(200px, .65fr) minmax(360px, 1fr); }
html[data-section="programming"] .workspace.hide-left.hide-right { grid-template-columns: minmax(0, 1fr); }
html[data-section="programming"] .workspace.hide-left .programming-chapter-panel,
html[data-section="programming"] .workspace.hide-right .programming-preview-panel { display: none; }
.workspace.hide-left .curriculum-column, .workspace.hide-right .relationships-column { display: none; }
.curriculum-column { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-width: 0; overflow: hidden; }
.unit-navigator { display: flex; min-height: 0; padding: 14px; flex-direction: column; gap: 10px; }
.unit-navigator[hidden] { display: none; }
.unit-navigator-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.unit-navigator-help { color: var(--muted); font-size: 11px; }
.unit-navigator-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.unit-navigator-switch button { display: grid; min-width: 0; min-height: 54px; padding: 7px 8px; overflow: visible; overflow-wrap: anywhere; text-align: center; text-overflow: clip; white-space: normal; line-height: 1.2; place-items: center; }
#unit-navigator-units-content { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 10px; }
#unit-situations-slot { min-height: 0; overflow: auto; }
#unit-navigator-units-content[hidden], #unit-situations-slot[hidden] { display: none !important; }
.unit-navigator #unit-situations-slot .curriculum-family-toolbar { display: flex; align-items: stretch; flex-direction: column; gap: 9px; }
.unit-navigator #unit-situations-slot .curriculum-family-toolbar::before { content: 'Situaciones de aprendizaje'; color: var(--text); font-size: 13px; font-weight: 800; }
.unit-navigator #unit-situations-slot .curriculum-family-toolbar > #create-family-button { width: 100%; }
.unit-navigator #unit-situations-slot .family-summary.is-situation-summary { display: grid; grid-template-columns: minmax(0, 1fr); max-height: none; padding: 0; overflow: visible; }
.unit-navigator #unit-situations-slot .family-summary.is-situation-summary .situation-summary-item { width: 100%; max-width: none; min-height: 96px; }
.unit-navigator-list { display: grid; align-content: start; flex: 1; gap: 8px; min-height: 0; overflow: auto; padding: 2px; }
.unit-navigator-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; width: 100%; padding: 10px; cursor: grab; text-align: left; }
.unit-navigator-card:active { cursor: grabbing; }
.unit-navigator-card.unit-navigator-card-dragging { opacity: .55; }
.unit-navigator-card[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.unit-navigator-card.is-external { border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.unit-navigator-card.is-external[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.unit-navigator-card.unit-navigator-reorder-before { box-shadow: 0 -4px 0 var(--accent); }
.unit-navigator-card.unit-navigator-reorder-after { box-shadow: 0 4px 0 var(--accent); }
.unit-navigator-card-heading { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.unit-navigator-drag { color: var(--muted); font-size: 15px; font-weight: 800; line-height: 1; }
.unit-navigator-card-heading strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.unit-navigator-order { color: var(--accent); font-size: 10px; font-weight: 800; }
.unit-navigator-duration { color: var(--accent); font-size: 10px; font-weight: 800; white-space: nowrap; }
.unit-navigator-detail { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.unit-navigator-subject { grid-column: 1 / -1; overflow: hidden; color: var(--text); font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.unit-navigator-actions { display: grid; gap: 8px; }
.unit-navigator-add { width: 100%; }
.relationship-view-switch.left-curriculum-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.left-curriculum-switch #left-view-families { grid-column: 1 / -1; }
.left-curriculum-switch button { min-width: 0; overflow: hidden; border: 1px solid var(--border); text-overflow: ellipsis; white-space: nowrap; }
.left-curriculum-switch button[aria-pressed="true"] { border-color: var(--accent); }
.collection-panel[hidden] { display: none; }
.curriculum-drag-hint { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.curriculum-drag-hint.needs-attention { font-weight: 750; animation: curriculum-drag-nudge 1.6s ease-in-out infinite; }
@keyframes curriculum-drag-nudge { 0%, 35%, 100% { transform: translateX(0); } 7%, 21% { transform: translateX(-2px); } 14%, 28% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .curriculum-drag-hint.needs-attention { animation: none; } }
.curriculum-family-panel { overflow: auto; }
.curriculum-family-panel .curriculum-family-toolbar { align-items: flex-start; flex-direction: column; }
.curriculum-family-panel .curriculum-family-toolbar > #create-criterion-family-button { width: 100%; }
.curriculum-family-panel .family-summary { width: 100%; padding-bottom: 2px; overflow: visible; flex-wrap: wrap; }
.curriculum-family-panel .family-summary-item { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: start; width: 100%; padding: 9px 10px; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 9px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 82%, var(--surface)), color-mix(in srgb, var(--accent-soft) 32%, var(--surface))); text-align: left; cursor: grab; }
.curriculum-family-panel .family-summary-item:hover, .curriculum-family-panel .family-summary-item:focus-visible { border-color: var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 96%, var(--surface)), color-mix(in srgb, var(--accent-soft) 48%, var(--surface))); outline: none; }
.curriculum-family-panel .family-summary-content { display: grid; min-width: 0; gap: 4px; }
.curriculum-family-panel .family-summary-heading { display: flex; align-items: center; gap: 7px; min-width: 0; }
.curriculum-family-panel .family-summary-name { flex: 1; font-size: 12px; font-weight: 800; }
.curriculum-family-panel .family-usage-counter { min-width: 21px; height: 21px; color: var(--family-color); }
.curriculum-family-panel .family-summary-criteria,
.curriculum-family-panel .family-summary-units { overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.relationship-content { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 10px; }
.relationship-content[hidden], .right-planning-panel[hidden] { display: none; }
.right-planning-panel { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
.planning-sessions-field { display: grid; flex: none; grid-template-columns: minmax(0, 1fr) 76px; align-items: end; gap: 8px; margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.planning-sessions-field span { padding-bottom: 8px; }
.planning-sessions-field input { min-width: 0; text-align: center; }
.planning-summary { flex: none; font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.planning-heading { margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.planning-chart { display: block; flex: 1; width: 100%; height: 0; min-height: 0; }
.planning-unit-chart-scroll { flex: 1; min-height: 0; overflow: auto; }
.planning-unit-chart { display: block; width: 100%; height: auto; }
.planning-axis-label { fill: var(--text); font-size: 10px; font-weight: 600; }
.planning-unit-end { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 3; }
.planning-session-resize { cursor: ns-resize; touch-action: none; }
.planning-session-resize-hit { fill: transparent; pointer-events: all; }
.planning-session-resize-line { stroke: var(--muted); stroke-width: 2; pointer-events: none; }
.planning-session-resize:hover .planning-session-resize-line, .planning-session-resize:focus .planning-session-resize-line, .planning-session-resize.is-dragging .planning-session-resize-line { stroke: var(--accent); stroke-width: 4; }
.planning-session-resize-value { fill: var(--text); font-size: 12px; font-weight: 800; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; pointer-events: none; }
.planning-activity-link { cursor: pointer; }
.planning-activity-link:focus { outline: none; }
.planning-activity-link:hover .planning-activity, .planning-activity-link:focus .planning-activity { stroke: var(--text); stroke-width: 2; }
.activity.activity-navigation-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.planning-unit { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.planning-unit.is-overbooked { stroke: #dc2626; stroke-width: 3; }
.planning-unit-link { cursor: pointer; }
.planning-unit-link:hover .planning-unit, .planning-unit-link:focus .planning-unit { fill: var(--selected); stroke-width: 3; }
.planning-unit-link:focus { outline: none; }
.planning-empty { fill: var(--surface-muted); stroke: var(--border); }
.planning-unit-title { fill: var(--text); font-size: 10px; font-weight: 800; }
.planning-activity { fill: #ffffff; stroke: var(--border); stroke-width: 1; }
.planning-activity.is-evaluable { fill: #e8f0ff; stroke: #2563eb; }
.planning-activity.is-situation { fill: #fce7f3; stroke: #db2777; }
.planning-activity-label { fill: #172033; font-size: 10.5px; font-weight: 800; pointer-events: none; }
.planning-activity-legend { display: flex; flex: none; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 8px; color: var(--muted); font-size: 10px; }
.planning-activity-key { display: inline-flex; align-items: center; gap: 4px; }
.planning-activity-key i { display: block; width: 9px; height: 9px; border: 1px solid var(--border); border-radius: 2px; background: #ffffff; }
.planning-activity-key.is-evaluable i { border-color: #2563eb; background: #e8f0ff; }
.planning-activity-key.is-situation i { border-color: #db2777; background: #fce7f3; }
.planning-session-warnings { display: grid; flex: none; gap: 5px; margin: 0 0 8px; }
.planning-session-warnings:empty { display: none; }
.planning-session-warnings p { margin: 0; padding: 6px 8px; border: 1px solid #dc2626; border-radius: 6px; color: #991b1b; background: #fef2f2; font-size: 10px; font-weight: 700; line-height: 1.35; }
.planning-label { fill: var(--text); font-size: 13px; font-weight: 600; }
.planning-marker { stroke: var(--text); stroke-width: 1; stroke-dasharray: 4 3; }
.planning-marker-hit { cursor: ns-resize; stroke: transparent; stroke-width: 16; pointer-events: stroke; touch-action: none; }
.planning-marker-hit:hover, .planning-marker-hit.is-dragging { stroke: color-mix(in srgb, var(--accent) 18%, transparent); }
.planning-marker-hit:focus { outline: none; stroke: color-mix(in srgb, var(--accent) 25%, transparent); }
.planning-term { fill: var(--text); font-size: 12px; font-weight: 600; }
.cards-column { container-type: inline-size; display: flex; min-width: 0; flex-direction: column; padding: 18px; }
.workspace-detail-view, .workspace-canvas-view { min-height: 0; }
.workspace-detail-view { display: flex; flex: 1; flex-direction: column; }
.workspace-detail-view[hidden], .workspace-canvas-view[hidden], .canvas-intro[hidden], .canvas-board[hidden] { display: none; }
.workspace-canvas-view { flex: 1; overflow: auto; padding: 2px; }
.canvas-intro { display: grid; place-items: center; gap: 14px; min-height: 100%; padding: 28px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-muted); text-align: center; }
.planning-sessions-label.is-missing { display: inline-block; animation: canvas-callout-vibration 3.2s ease-in-out infinite; }
.canvas-intro h2 { margin-top: 3px; transform-origin: center; }
/* La llamada de atención se concentra al final de cada ciclo para mantener la lectura cómoda. */
@keyframes canvas-callout-vibration {
  0%, 78%, 92%, 100% { transform: translateX(0) rotate(0); }
  80%, 88% { transform: translateX(-2px) rotate(-0.2deg); }
  82%, 86%, 90% { transform: translateX(2px) rotate(0.2deg); }
  84% { transform: translateX(-1px) rotate(-0.1deg); }
}
@media (prefers-reduced-motion: reduce) { .canvas-intro h2, .planning-sessions-label.is-missing { animation: none; } }
.canvas-intro > p { max-width: 500px; color: var(--muted); }
.canvas-setup-form { display: flex; align-items: end; gap: 10px; }
.canvas-setup-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: left; }
.canvas-setup-form input { width: 150px; }
.canvas-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 12px; }
.canvas-board-toolbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 2px; }
.canvas-board-toolbar p { color: var(--muted); font-size: 12px; }
.canvas-unit { display: grid; align-content: start; gap: 10px; min-height: 200px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-muted); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.canvas-unit.drop-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); transform: translateY(-2px); }
.canvas-unit-header { display: flex; align-items: center; gap: 7px; }
.canvas-unit-title { min-width: 0; font-weight: 800; }
.canvas-unit-remove { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; color: var(--muted); background: transparent; font-size: 18px; }
.canvas-unit-terms legend { color: var(--muted); font-size: 12px; }
.canvas-unit-terms .unit-terms-buttons { margin-top: 5px; }
.canvas-unit-terms .unit-terms-buttons button { flex: 1 1 0; min-width: 0; padding: 6px 4px; }
.canvas-unit-duration { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.canvas-unit-duration input { max-width: 132px; }
.canvas-code-groups { display: grid; gap: 7px; }
.canvas-code-group { display: grid; gap: 5px; }
.canvas-code-group h3 { color: var(--muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.canvas-code-list { display: flex; flex-wrap: wrap; gap: 5px; }
.canvas-code { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--surface); font-size: 11px; font-weight: 800; cursor: grab; }
.canvas-code.dragging { opacity: .5; }
.canvas-code.relation-highlighted { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.canvas-code.relation-source { color: white; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.canvas-code-button, .canvas-code-remove { border: 0; border-radius: 0; color: inherit; background: transparent; }
.canvas-code-button { padding: 4px 6px; font: inherit; cursor: pointer; }
.canvas-code-button:focus-visible, .canvas-code-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.canvas-code-remove { padding: 2px 5px; font-size: 14px; line-height: 1; cursor: pointer; }
.canvas-code-remove:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.canvas-drop-placeholder { margin-top: auto; padding: 9px; border: 1px dashed var(--border); border-radius: 7px; color: var(--muted); font-size: 11px; text-align: center; }
.relationships-column { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.panel { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.situation-panel, .relationship-panel { padding: 18px; display: flex; flex-direction: column; gap: 13px; }
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.compact-field { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.unit-schedule-row { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.unit-terms { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; }
.unit-terms legend, .duration-stepper-field legend { margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.unit-terms-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.unit-terms-buttons button { font-size: 12px; }
.unit-terms-buttons button[aria-pressed="true"] { color: var(--text); background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.unit-terms-buttons button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.duration-stepper-field { flex: 0 0 auto; margin: 0; padding: 0; border: 0; }
.duration-stepper { display: grid; grid-template-columns: 34px minmax(62px, auto) 34px; align-items: stretch; }
.duration-step-button { padding: 7px; border-radius: 0; font-size: 17px; line-height: 1; }
.duration-step-button:first-child { border-radius: 8px 0 0 8px; }
.duration-step-button:last-child { border-radius: 0 8px 8px 0; }
.duration-step-value { display: grid; place-items: center; padding: 4px 7px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text); background: var(--surface-muted); font-size: 12px; white-space: nowrap; }
.cards-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cards-actions button { white-space: nowrap; }
.unit-card-navigation { display: flex; gap: 4px; }
.unit-card-navigation[hidden] { display: none; }
.unit-card-navigation button { min-width: 36px; min-height: 36px; padding: 0 8px; font-size: 18px; font-weight: 800; }
.curriculum-family-toolbar { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 34px; }
.curriculum-family-toolbar > #create-family-button { flex: 0 0 auto; width: auto; color: white; border-color: var(--accent); background: var(--accent); }
.curriculum-family-toolbar > #create-criterion-family-button { flex: 0 0 auto; width: auto; color: white; border-color: var(--accent); background: var(--accent); }
.family-summary { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: 6px; min-width: 0; padding: 2px 2px 7px; overflow-x: auto; overflow-y: hidden; }
.family-summary:empty { display: none; }
.family-summary-item { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 6px; width: auto; min-width: 0; max-width: 100%; padding: 4px 8px; border: 1px solid var(--family-color, var(--border)); border-radius: 999px; color: var(--text); background: color-mix(in srgb, var(--family-color, var(--surface)) 50%, transparent); font-size: 11px; cursor: grab; }
.family-summary-item:active { cursor: grabbing; }
.family-criteria-fieldset { min-width: 0; max-height: min(52vh, 480px); margin: 12px 0 0; padding: 10px; overflow: auto; border: 1px solid var(--border); border-radius: 9px; }
.family-criteria-fieldset legend { padding: 0 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.family-criteria-list { display: grid; gap: 6px; }
.family-criterion-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; padding: 7px; border-radius: 7px; background: var(--surface-muted); font-size: 12px; }
.family-criterion-option input { width: auto; margin-top: 3px; }
.family-summary-item.dragging { opacity: .5; }
.family-summary-color { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }
.family-summary-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.situation-summary-item { align-items: flex-start; max-width: 360px; cursor: default; }
.situation-summary-content { display: grid; gap: 3px; min-width: 0; }
.situation-details { color: var(--muted); font-size: 10px; line-height: 1.3; }
.situation-assignment { color: var(--muted); font-size: 10px; line-height: 1.3; white-space: normal; }
.family-summary.is-situation-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-self: stretch; overflow: hidden; }
.family-summary.is-situation-summary .situation-summary-item { width: 100%; max-width: none; height: 74px; min-height: 74px; padding: 7px 8px; overflow: hidden; border-radius: 10px; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 82%, var(--surface)), color-mix(in srgb, var(--accent-soft) 32%, var(--surface))); }
.family-summary.is-situation-summary .situation-summary-item:hover, .family-summary.is-situation-summary .situation-summary-item:focus-visible { border-color: var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 96%, var(--surface)), color-mix(in srgb, var(--accent-soft) 48%, var(--surface))); outline: none; }
.family-summary.is-situation-summary .situation-summary-content { min-height: 0; overflow: hidden; }
.family-summary.is-situation-summary .situation-assignment { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
input, textarea, select { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; color: var(--text); background: var(--surface-muted); outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { flex: 1; min-height: 170px; resize: vertical; }
.relationship-panel { min-height: 0; }
.cards-heading { margin-bottom: 14px; }
.drag-instructions { margin: -6px 0 14px; color: var(--muted); font-size: 12px; }
.cards-list { display: grid; align-content: start; grid-template-columns: minmax(0, 1fr); gap: 12px; overflow: auto; padding: 2px; }
.card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-muted); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card.drop-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); transform: translateY(-2px); }
.card.card-dragging { opacity: .55; }
.card.reorder-before { box-shadow: 0 -4px 0 var(--accent); }
.card.reorder-after { box-shadow: 0 4px 0 var(--accent); }
.card.card-navigation-target { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.card-header { display: flex; align-items: center; gap: 8px; }
.card-drag-handle { flex: 0 0 auto; padding: 4px 8px; color: var(--muted); font-size: 20px; line-height: 1; cursor: grab; touch-action: none; }
.card-drag-handle:active { cursor: grabbing; }
.card-drag-handle:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.card-title { flex: 1 1 auto; min-width: 0; font-weight: 700; } .card-subject-field { display: grid; flex: 0 1 250px; gap: 3px; min-width: 150px; color: var(--muted); font-size: 10px; font-weight: 800; } .card-subject-field input { min-width: 0; padding: 6px 8px; font-size: 12px; } .card-toggle, .unit-parts-toggle { flex: 0 0 auto; padding: 5px 8px; font-size: 11px; } .card-body { display: grid; gap: 10px; } .card.is-collapsed .card-body { display: none; } .card textarea { min-height: 120px; resize: vertical; }
.card-actions { display: flex; justify-content: flex-end; }
.unit-part { border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.unit-part > summary { padding: 9px 11px; color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.unit-part-body { display: grid; gap: 10px; padding: 0 11px 11px; }
.unit-part:not([open]) > .unit-part-body { display: none; }
.unit-part .unit-description-field, .unit-part .unit-overview-section, .unit-part .card-curriculum-elements, .unit-part .activities-section, .unit-part .unit-diversity-section { border: 0; padding: 0; background: transparent; }
.unit-overview-section { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.unit-form-section-heading h3 { margin: 0; font-size: 14px; }
.unit-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.unit-overview-field, .unit-description-field { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.unit-overview-field textarea { min-height: 76px; }
.unit-overview-resources textarea, .unit-overview-teacherReflection textarea { font-weight: 400; }
.unit-overview-resources, .unit-overview-teacherReflection { grid-column: 1 / -1; }
.unit-indicator-fieldset { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); }
.indicator-collapsible { grid-column: 1 / -1; min-width: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); }
.indicator-collapsible > summary { padding: 9px 10px; color: var(--text); font-size: 12px; font-weight: 800; cursor: pointer; }
.indicator-collapsible-body { padding: 0 10px 10px; }
.indicator-collapsible-body > .unit-indicator-fieldset { padding: 0; border: 0; background: transparent; }
.unit-indicator-fieldset legend { padding: 0 4px; color: var(--text); font-size: 12px; font-weight: 800; }
.unit-indicator-help { margin: 0 0 8px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.unit-indicator-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.unit-indicator-group { min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.unit-indicator-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 6px; }
.unit-indicator-group-heading h4 { margin: 0; color: var(--text); font-size: 11px; line-height: 1.25; }
.unit-indicator-status { flex: 0 0 auto; min-width: 28px; padding: 3px 5px; border-radius: 999px; color: #fff; font-size: 9px; font-weight: 800; line-height: 1; text-align: center; }
.unit-indicator-status.is-green { background: #16803c; }
.unit-indicator-status.is-yellow { color: #584400; background: #f5c542; }
.unit-indicator-status.is-red { background: #c93030; }
.unit-indicator-options { display: grid; gap: 5px; }
.unit-indicator-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px; color: var(--text); font-size: 10px; font-weight: 500; line-height: 1.25; }
.unit-indicator-option input { width: auto; margin-top: 1px; accent-color: var(--accent); }
.unit-description-field textarea { color: var(--text); font-weight: 400; }
.card-curriculum-elements { display: grid; gap: 10px; padding: 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.curriculum-elements-heading, .linked-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.curriculum-elements-title { margin: 0; font-size: 13px; }
.curriculum-groups-toggle-all, .curriculum-group-toggle { flex: 0 0 auto; padding: 4px 7px; font-size: 10px; }
.curriculum-elements-content { display: grid; gap: 10px; }
.external-unit-curriculum-help { margin: 0; color: var(--muted); font-size: 11px; }
.external-unit-curriculum-field { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.external-unit-curriculum-field textarea { min-height: 72px; color: var(--text); font-weight: 400; }
.linked-group { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.linked-group:first-child { padding-top: 0; border-top: 0; }
.linked-group h3 { margin: 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.linked-group-body[hidden] { display: none; }
.drop-placeholder { padding: 8px; border: 1px dashed var(--border); border-radius: 7px; color: var(--muted); font-size: 12px; text-align: center; }
.linked-list { display: grid; gap: 6px; }
.linked-item { display: flex; align-items: start; gap: 6px; padding: 7px 8px; border-radius: 7px; color: var(--text); background: var(--accent-soft); font-size: 11px; line-height: 1.35; }
.linked-item.linked-item-family { border: 3px solid; padding: 5px 6px; background: color-mix(in srgb, var(--family-color) 14%, var(--surface)); }
.linked-item span { flex: 1; min-width: 0; }
.linked-item.draggable-linked { cursor: grab; }
.linked-item.draggable-linked:active { cursor: grabbing; }
.linked-item.dragging { opacity: .45; }
.linked-item.related-hover { color: white; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.linked-item.related-hover .remove-linked { color: white; }
.remove-linked { flex: 0 0 auto; padding: 0; width: 22px; height: 22px; border: 0; color: var(--muted); background: transparent; font-size: 18px; line-height: 1; }
.activities-section { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.activities-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.activities-heading h3 { margin: 0; font-size: 12px; }
.activities-heading button { padding: 5px 8px; font-size: 11px; }
.activities-list { display: grid; gap: 8px; }
.activity-add-bottom { justify-self: end; }
.unit-diversity-section { display: grid; gap: 9px; padding-top: 10px; border-top: 1px solid var(--border); }
.unit-diversity-section > .activities-heading h3 { max-width: 78%; }
.diversity-help { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.diversity-students { display: grid; gap: 10px; }
.diversity-student { border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.diversity-student-summary { display: flex; align-items: center; gap: 7px; padding: 10px; color: var(--text); font-size: 12px; cursor: pointer; }
.diversity-student-summary strong { font-weight: 800; }
.diversity-student-summary span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.diversity-student-body { display: grid; gap: 9px; padding: 0 10px 10px; }
.diversity-student:not([open]) > .diversity-student-body { display: none; }
.diversity-student-header { display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.diversity-student-header .unit-overview-field { flex: 1; }
.diversity-remove { flex: 0 0 auto; padding: 7px 9px; color: #b42318; font-size: 11px; }
.diversity-curricular { display: grid; gap: 7px; padding: 9px; border-radius: 8px; background: var(--surface-muted); }
.diversity-curricular h4, .diversity-access h4, .diversity-measure-row h4 { margin: 0; color: var(--text); font-size: 11px; line-height: 1.25; }
.diversity-curriculum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.diversity-curriculum-field { min-width: 0; margin: 0; padding: 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.diversity-curriculum-field legend { padding: 0 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.diversity-curriculum-options, .diversity-measure-options { display: grid; gap: 5px; }
.diversity-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px; color: var(--text); font-size: 10px; font-weight: 500; line-height: 1.3; }
.diversity-option input { width: auto; margin-top: 1px; accent-color: var(--accent); }
.diversity-empty { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.diversity-access { display: grid; gap: 4px; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); }
.diversity-access p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.diversity-measure-row { display: grid; grid-template-columns: minmax(135px, .35fr) minmax(0, 1fr); gap: 10px; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); }
.diversity-measure-row h4 { display: flex; align-items: center; padding-right: 9px; border-right: 1px solid var(--border); }
.activity { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(210px, 1.5fr) minmax(120px, .8fr); gap: 8px; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; }
.activity-body { display: grid; grid-column: 1 / -1; gap: 8px; min-width: 0; }
.activity-body[hidden] { display: none; }
.activity-situation-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.activity-situation-field legend { padding: 0; margin-bottom: 5px; }
.activity-situation-options { display: grid; align-content: start; gap: 6px; max-height: 150px; overflow-y: auto; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); }
.activity-situation-options label { display: flex; align-items: flex-start; gap: 7px; color: var(--text); font-weight: 400; cursor: pointer; }
.activity-situation-options input { flex: 0 0 auto; width: auto; margin: 2px 0 0; accent-color: var(--accent); }
.activity-evaluation-row { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.activity-evaluation-row > * { min-width: 0; }
.activity.drop-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.activity.activity-dragging { opacity: .55; }
.activity.activity-reorder-before { box-shadow: 0 -4px 0 var(--accent); }
.activity.activity-reorder-after { box-shadow: 0 4px 0 var(--accent); }
.activity-row { display: grid; grid-template-columns: 32px 32px minmax(0, 1fr) 78px auto auto; grid-column: 1 / -1; align-items: end; gap: 7px; }
.activity-name-field input { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.activity-drag-handle { align-self: end; justify-self: start; width: 32px; min-height: 32px; padding: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: grab; touch-action: none; }
.activity-drag-handle:active { cursor: grabbing; }
.activity-drag-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.activity-sessions-field input { min-width: 0; text-align: center; }
.activity-planning-fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.activity-planning-fields .activity-field { min-width: 0; }
.activity-planning-fields .activity-field select, .activity-planning-fields .activity-field input { min-width: 0; }
.activity-planning-fields .activity-adjustment-field { grid-column: 1 / -1; }
.activity-adjustment-field textarea { min-height: 74px; resize: vertical; }
.activity-methods-fields { display: grid; grid-column: 1 / -1; gap: 6px; margin: 0; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); }
.activity-methods-fields legend { padding: 0 4px; color: var(--text); font-size: 11px; font-weight: 800; }
.activity-method-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; }
.activity-method-option { display: flex; align-items: flex-start; min-width: 0; gap: 5px; color: var(--text); font-size: 10px; font-weight: 500; line-height: 1.2; }
.activity-method-option input { flex: 0 0 auto; width: auto; margin-top: 1px; }
.activity-method-other-controls { display: flex; gap: 7px; }
.activity-method-other-controls input { flex: 1 1 auto; min-width: 0; }
.activity-method-other-controls button { flex: 0 0 auto; }
.activity-method-other-list { display: flex; flex-wrap: wrap; gap: 5px; }
.activity-method-other { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; color: var(--text); background: var(--accent-soft); font-size: 10px; }
.activity-method-other button { width: 18px; height: 18px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 15px; line-height: 1; }
.activity-field input[hidden] { display: none; }
.activity-evaluable-field { display: inline-flex; align-items: center; align-self: end; gap: 6px; min-height: 36px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface-muted); font-size: 11px; font-weight: 700; cursor: pointer; }
.activity-evaluable-field input { width: auto; margin: 0; accent-color: var(--accent); }
.activity-remove { align-self: end; padding: 8px; color: #b42318; }
.activity-attachments { display: grid; grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 8px; padding: 8px; border-radius: 7px; background: var(--surface-muted); }
.activity-attachments-label { padding-top: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.activity-attachment-controls { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; gap: 6px; }
.activity-file-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: var(--surface); font-size: 11px; font-weight: 600; cursor: pointer; }
.activity-file-button input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.activity-attachment-controls input { min-width: 0; padding: 6px 8px; font-size: 12px; }
.activity-attachment-controls button { padding: 6px 8px; font-size: 11px; white-space: nowrap; }
.activity-url-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.activity-url-dialog form > label { display: grid; gap: 6px; min-width: 0; }
.activity-url-dialog input { width: 100%; min-width: 0; }
.activity-attachments-list { grid-column: 2; display: grid; gap: 5px; }
.activity-attachments-list:empty { display: none; }
.activity-attachment { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; max-width: 100%; gap: 6px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font-size: 11px; }
.activity-attachment a { min-width: 0; color: var(--accent); overflow-wrap: anywhere; white-space: normal; }
.activity-attachment button { width: 18px; height: 18px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 15px; line-height: 1; }
.activity-details { border-top: 1px solid var(--border); }
.activity-details summary { padding-top: 8px; color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; }
.activity-details[open] { display: grid; gap: 8px; }
.activity-field { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 700; }
.activity-description-field { grid-column: 1 / -1; }
.activity textarea { min-height: 64px; color: var(--text); font-weight: 400; }
.activity textarea.activity-description { min-height: 90px; }
.assessment-groups { display: grid; gap: 7px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); }
.assessment-groups-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.assessment-groups h4 { margin: 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.assessment-groups-heading button { padding: 4px 7px; font-size: 11px; }
.assessment-groups-list { display: grid; gap: 5px; }
.assessment-group { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(130px, .65fr) auto; gap: 6px; align-items: center; }
.assessment-group-criteria { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.assessment-row-criteria { display: flex; width: 100%; flex-wrap: wrap; align-items: center; min-height: 34px; gap: 4px; padding: 5px 7px; overflow: visible; border: 1px dashed var(--border); border-radius: 7px; color: var(--muted); background: var(--surface); text-align: left; white-space: normal; cursor: pointer; }
.assessment-row-criteria:hover, .assessment-row-criteria:focus-visible { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); outline: none; }
.assessment-criterion-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 5px; border-radius: 5px; color: var(--text); background: var(--accent-soft); }
.assessment-group select { padding: 5px 7px; font-size: 11px; }
.remove-assessment-group { width: 24px; height: 24px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 17px; }
.assessment-criteria-dialog { width: min(440px, calc(100vw - 32px)); max-height: min(680px, calc(100vh - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface); box-shadow: 0 18px 48px rgba(15, 23, 42, .28); }
.assessment-criteria-dialog::backdrop { background: rgba(15, 23, 42, .38); }
.assessment-criteria-form { display: grid; gap: 12px; padding: 18px; }
.assessment-criteria-form h2 { margin: 0; font-size: 18px; }
.assessment-criteria-form > p { margin: -5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.assessment-criteria-form fieldset { display: grid; min-width: 0; max-height: 340px; margin: 0; padding: 10px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.assessment-criteria-form legend { padding: 0 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.assessment-criteria-options { display: grid; gap: 6px; }
.assessment-criterion-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; padding: 7px; border-radius: 7px; font-size: 12px; line-height: 1.35; }
.assessment-criterion-option:hover { background: var(--surface-muted); }
.assessment-criterion-option input { width: auto; margin-top: 2px; }
.assessment-criteria-empty { margin: 0; color: var(--muted); font-size: 12px; }
.assessment-criteria-form menu { display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; }
.activity-criteria-label { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.activity-criteria-list { display: flex; flex-wrap: wrap; gap: 6px; }
.activity-criterion { width: auto; align-items: center; padding: 5px 7px; font-size: 12px; font-weight: 700; }
.activity-criterion span { flex: 0 0 auto; }
.activity-remove-criterion { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; font-size: 16px; line-height: 1; }
.activity-remove-criterion:hover { color: var(--accent); background: var(--surface-muted); }
.activity-actions { display: flex; justify-content: flex-end; }
.activity-actions button { padding: 4px 7px; font-size: 11px; }
.relationship-help { color: var(--muted); font-size: 12px; }
.relationship-view-switch { display: grid; grid-template-columns: 1.35fr .85fr; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); }
.relationship-view-switch button { border: 0; padding: 7px 5px; color: var(--muted); background: transparent; font-size: 11px; }
.relationship-view-switch button[aria-pressed="true"] { color: white; background: var(--accent); }
.relationship-actions { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); }
.relationship-actions button { border: 0; padding: 7px 5px; color: var(--muted); background: transparent; font-size: 11px; }
.relationship-actions button:hover, .relationship-actions button:focus-visible { color: var(--text); background: var(--accent-soft); outline: none; }
.relationship-tree { display: grid; flex: 1; align-content: start; gap: 8px; min-height: 0; overflow: auto; padding-right: 2px; }
.tree-node { border-left: 2px solid var(--border); }
.tree-node + .tree-node { margin-top: 5px; }
.tree-node summary { display: flex; align-items: baseline; gap: 6px; padding: 7px 8px; border-radius: 7px; cursor: pointer; list-style: none; font-size: 12px; }
.tree-node summary::-webkit-details-marker { display: none; }
.tree-node summary::before { content: '›'; flex: 0 0 auto; color: var(--accent); font-size: 17px; line-height: 1; transition: transform .15s ease; }
.tree-node[open] > summary::before { transform: rotate(90deg); }
.tree-node summary:hover { background: var(--surface-muted); }
.tree-node summary.unit-navigation-link { cursor: pointer; }
.tree-node summary.unit-navigation-link:hover .tree-node-label, .tree-node summary.unit-navigation-link:focus-visible .tree-node-label { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.tree-node-label { flex: 1; min-width: 0; }
.tree-count { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.tree-children { display: grid; gap: 4px; margin: 2px 0 5px 12px; padding-left: 7px; }
.tree-leaf { padding: 6px 8px; border-left: 2px solid var(--accent-soft); color: var(--text); font-size: 11px; line-height: 1.35; }
.tree-leaf.activity-leaf { color: var(--muted); }
.tree-leaf.unit-description-leaf { color: var(--muted); border-left-color: var(--border); font-style: italic; }
.tree-section-label { margin: 5px 0 2px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.selected-elements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: auto; }
.selection-group { padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); }
.selection-group h3 { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.selection-group ul { margin: 0; padding-left: 18px; font-size: 12px; }
.selection-group li + li { margin-top: 4px; }
.empty-state { color: var(--muted); font-size: 13px; }
.collection-panel { display: flex; flex-direction: column; padding: 14px; min-height: 0; }
.count { display: grid; place-items: center; min-width: 27px; height: 27px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 12px; font-weight: 700; }
.element-list { display: grid; gap: 7px; margin-top: 12px; overflow: auto; padding-right: 2px; }
.knowledge-group, .knowledge-subgroup { min-width: 0; border-left: 2px solid var(--border); }
.knowledge-hierarchy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.knowledge-hierarchy-actions button { padding: 6px 7px; border-color: var(--border); color: var(--muted); background: var(--surface-muted); font-size: 11px; }
.knowledge-hierarchy-actions button:hover, .knowledge-hierarchy-actions button:focus-visible { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.knowledge-group + .knowledge-group { margin-top: 5px; }
.knowledge-heading { display: flex; align-items: baseline; gap: 7px; padding: 7px 8px; border-radius: 7px; cursor: pointer; list-style: none; line-height: 1.35; }
.knowledge-heading::-webkit-details-marker { display: none; }
.knowledge-heading::before { content: '›'; flex: 0 0 auto; color: var(--accent); font-size: 17px; line-height: 1; transition: transform .15s ease; }
.knowledge-group[open] > .knowledge-heading::before, .knowledge-subgroup[open] > .knowledge-heading::before { transform: rotate(90deg); }
.knowledge-heading:hover { background: var(--surface-muted); }
.knowledge-heading.draggable-linked { cursor: grab; }
.knowledge-heading.draggable-linked:active { cursor: grabbing; }
.knowledge-heading.dragging { opacity: .48; background: var(--accent-soft); }
.knowledge-heading > span:first-of-type { flex: 1; min-width: 0; }
.knowledge-group-heading { color: var(--text); font-size: 13px; font-weight: 800; }
.knowledge-subgroup-heading { color: var(--muted); font-size: 12px; font-weight: 700; }
.knowledge-heading-count { display: grid; place-items: center; flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 800; }
.knowledge-group-contents, .knowledge-subgroup-contents { display: grid; gap: 7px; margin: 3px 0 7px 10px; padding-left: 7px; }
.knowledge-subgroup + .knowledge-subgroup { margin-top: 3px; }
.element-item { display: grid; gap: 5px; width: 100%; text-align: left; padding: 9px; line-height: 1.3; font-size: 13px; cursor: grab; }
.element-item.has-family { border-width: 3px; background: color-mix(in srgb, var(--family-color) 12%, var(--surface)); }
.element-main-row { display: flex; align-items: start; gap: 7px; }
.element-value { flex: 1; min-width: 0; }
.usage-counter { display: grid; place-items: center; flex: 0 0 auto; min-width: 23px; height: 23px; padding: 0 6px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 800; }
.usage-units { overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.element-item.usage-level-1 { border-color: var(--usage-border); background: var(--usage-1); }
.element-item.usage-level-2 { border-color: var(--usage-border); background: var(--usage-2); }
.element-item.usage-level-3 { border-color: var(--usage-border); background: var(--usage-3); }
.element-item.usage-level-4 { border-color: var(--usage-border); background: var(--usage-4); }
.element-item.usage-level-1 .usage-counter, .element-item.usage-level-2 .usage-counter, .element-item.usage-level-3 .usage-counter, .element-item.usage-level-4 .usage-counter { color: var(--usage-border); }
.element-item:active { cursor: grabbing; }
.element-item.dragging { opacity: .45; }
.element-item.selected { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.element-item.summary-revealed { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.family-criteria-fieldset { min-width: 0; max-height: min(52vh, 480px); margin: 12px 0 0; padding: 10px; overflow: auto; border: 1px solid var(--border); border-radius: 9px; }
.family-criteria-fieldset legend { padding: 0 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.family-criteria-list { display: grid; gap: 6px; }
.family-criterion-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; padding: 7px; border-radius: 7px; background: var(--surface-muted); font-size: 12px; }
.family-criterion-option input { width: auto; margin-top: 3px; }
.document-export-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.document-export-fieldset legend { margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.odt-format-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.document-export-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; min-height: 90px; padding: 11px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.document-export-option:hover, .document-export-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.document-export-option input { width: auto; margin: 2px 0 0; accent-color: var(--accent); }
.document-export-option span { display: grid; gap: 5px; }
.document-export-option strong { color: var(--text); font-size: 14px; }
.document-export-option small { color: var(--muted); font-size: 12px; line-height: 1.35; }
#odt-format-dialog { width: min(520px, 90vw); }
.import-panel { padding: 14px; }
.import-panel p { margin: 7px 0 12px; color: var(--muted); font-size: 12px; }
#spreadsheet-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-button { display: inline-block; padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.file-button:hover { color: var(--accent); border-color: var(--accent); }
dialog { width: min(420px, 90vw); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
dialog::backdrop { background: rgb(15 23 42 / 45%); } dialog form { display: grid; gap: 12px; } .dialog-description, .selected-file { color: var(--muted); } .source-separator { margin: -3px 0; color: var(--muted); font-size: 12px; text-align: center; } .selected-file { margin: -6px 0 0; font-size: 12px; } .source-feedback { min-height: 20px; color: var(--muted); font-size: 12px; } menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 6px 0 0; }
@media (max-width: 1150px) {
  .app-layout { display: block; }
  .ad-rail { height: auto; min-height: 0; padding: 10px 16px 0; display: grid; grid-template-columns: auto repeat(2, minmax(220px, 1fr)); align-items: stretch; }
  .ad-rail-right { padding: 10px 16px 16px; }
  .ad-rail > .ad-label { writing-mode: vertical-rl; display: grid; place-items: center; }
  .ad-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 10px 13px; }
  .ad-card p { display: none; }
  .workspace { height: auto; }
}
@media (max-width: 1500px) {
  .app-header { align-items: flex-start; flex-direction: column; }
  .project-info { grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; }
  .project-title-block { width: 100%; }
  .header-navigation-row { grid-row: 2; grid-column: 1 / -1; width: 100%; margin-top: 8px; }
  .programming-sections { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  body { min-width: 0; padding-bottom: 110px; }
  .free-plan-bar { align-items: stretch; flex-direction: column; gap: 7px; }
  .plan-info-row { flex: none; width: 100%; }
  .catalog-pickers { flex: none; width: 100%; align-items: stretch; flex-direction: column; }
  .community-picker, .stage-picker, .subject-picker { flex: none; align-items: stretch; flex-direction: column; }
  .ad-rail { grid-template-columns: 1fr; }
  .ad-rail > .ad-label { writing-mode: initial; display: block; }
  .workspace { height: auto; grid-template-columns: 1fr; }
  html[data-section="units"] .workspace { grid-template-columns: 1fr; }
  html[data-section="situations"] .workspace { height: auto; grid-template-columns: 1fr; }
  html[data-section="situations"] .unit-navigator { max-height: 430px; }
  .situation-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-section="programming"] .workspace { height: auto; grid-template-columns: 1fr; }
  html[data-section="programming"] .programming-chapter-panel,
  html[data-section="programming"] .programming-editor-panel,
  html[data-section="programming"] .programming-preview-panel { max-height: none; }
  html[data-section="infographic"] .workspace { height: auto; }
  html[data-section="infographic"] .infographic-panel { min-height: auto; }
  .infographic-board { grid-template-rows: auto auto; }

  .infographic-terms { grid-template-columns: 1fr; }
  .infographic-term + .infographic-term { border-top: 2px solid var(--accent); border-left: 0; }
  .infographic-terms { min-width: 0; }
  .programming-chapter-list,
  .programming-editor-content,
  .programming-preview-content { max-height: none; overflow: visible; }
  .curriculum-column { grid-template-columns: 1fr; grid-template-rows: auto minmax(500px, 1fr); overflow-x: hidden; }
  .cards-column { min-height: 500px; }
  .activity { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .family-summary.is-situation-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .canvas-board { grid-template-columns: 1fr; }
  .canvas-setup-form { align-items: stretch; flex-direction: column; }
  .canvas-setup-form input { width: 100%; }
  .bottom-ad { right: 8px; bottom: 8px; left: 8px; align-items: flex-start; flex-direction: column; gap: 7px; padding: 12px 52px 12px 14px; }
  .bottom-ad > div { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .project-info { grid-template-columns: auto minmax(0, 1fr); }
  .header-navigation-row { flex-wrap: wrap; }
  .programming-sections { width: 100%; }
}
@media (max-width: 560px) {

  html[data-section="units"] .relationships-column .curriculum-family-toolbar { grid-template-columns: 1fr; }
  html[data-section="units"] .relationships-column .curriculum-family-toolbar > #create-family-button { width: 100%; }
  .curriculum-family-toolbar { align-items: stretch; flex-direction: column; }
  .family-summary.is-situation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity { grid-template-columns: 1fr; }
  .card-header { align-items: end; flex-wrap: wrap; }
  .card-subject-field { flex: 1 1 calc(100% - 92px); }
  .situation-general-fields, .situation-activity-details { grid-template-columns: 1fr; }
  .unit-overview-grid, .unit-indicator-groups, .diversity-curriculum-grid { grid-template-columns: 1fr; }
  .diversity-student-header, .diversity-measure-row { grid-template-columns: 1fr; display: grid; }
  .diversity-remove { justify-self: stretch; }
  .diversity-measure-row h4 { padding: 0 0 7px; border-right: 0; border-bottom: 1px solid var(--border); }
  .activity-row { grid-template-columns: minmax(0, 1fr) 78px; }
  .activity-evaluation-row { grid-template-columns: 1fr; }
  .activity-evaluable-field, .activity-actions { justify-self: stretch; }
  .activity-actions button { width: 100%; }
  .activity-attachments { grid-template-columns: 1fr; }
  .activity-attachments-label { padding-top: 0; }
  .activity-attachment-controls { grid-template-columns: 1fr auto; }
  .activity-attachment-controls input { grid-column: 1 / -1; }
  .activity-attachments-list { grid-column: 1; }
}
@container (max-width: 720px) { .canvas-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 470px) { .canvas-board { grid-template-columns: minmax(0, 1fr); } }

/* Ocultación temporal de la publicidad en la versión gratuita. */
body { padding-bottom: 0; }
.app-layout { grid-template-columns: minmax(0, 1fr); }
.app-layout > .ad-rail,
.bottom-ad { display: none !important; }

/* Centrar el texto de todos los botones, incluidos los enlaces con aspecto de botón. */
button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button, .resources-link, .comparison-action { text-align: center !important; justify-content: center !important; }

/* Condiciones accesibles en el pie, también en archivos sin conexión. */
.app-status-links { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; margin-left: auto; color: var(--text, #172033); font-size: 11px; white-space: nowrap; }
.app-status-links .app-footer-contact { display: block; width: auto; margin: 0; padding: 3px 6px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-weight: 400; line-height: inherit; text-align: center; text-decoration: underline; cursor: pointer; }
.app-status-links .app-footer-contact:focus-visible { outline: 2px solid #2358da; outline-offset: -3px; }
.app-status-links summary { padding: 3px 6px; text-align: center; cursor: pointer; text-decoration: underline; }
.app-status-links summary:focus-visible { outline: 2px solid #2358da; outline-offset: -3px; }
.app-terms-content { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; white-space: normal; text-align: left; font-size: 13px; background: var(--surface, #fff); border-top: 1px solid var(--border, #dce4f0); max-height: max(120px, min(70dvh, calc(100dvh - var(--save-status-bottom, 200px)))); overflow-y: auto; padding: 16px max(20px, calc((100% - 900px) / 2)); line-height: 1.6; }
.app-license-content .license-document { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.6; }
.app-terms-content h1 { font-size: 24px; }
.app-terms-content h2 { font-size: 18px; margin-top: 24px; }



.programming-add-block { width: 100%; margin: 8px 0 4px; font-size: 12px; padding: 9px; }
.programming-chapter-item { grid-template-columns: minmax(0, 1fr) 24px; }
.programming-chapter-button { grid-template-columns: 14px 39px minmax(0, 1fr); cursor: grab; }
.programming-chapter-button:active { cursor: grabbing; }
.programming-chapter-item.is-drop-target { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.programming-block-title { display: grid; gap: 6px; margin: 12px 0; font-size: 12px; }
.programming-block-title input { width: 100%; box-sizing: border-box; font: inherit; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }

.activity-type-field { margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); }
.activity-type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.activity-type-option { display: flex; align-items: center; gap: 5px; color: var(--text); font-size: 11px; font-weight: 500; }
.activity-type-option input { width: auto; margin: 0; }

.situation-activity-title { display: block; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.situation-activity-title:hover { text-decoration: underline; }
.situation-activity-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.infographic-attachment-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; }
.infographic-attachment-links a { color: var(--text); text-decoration: underline; overflow-wrap: anywhere; }

.activity-classroom-button { justify-self: start; }
.classroom-share-dialog { width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.classroom-share-dialog form > label { display: grid; gap: 6px; }
.classroom-share-dialog input, .classroom-share-dialog textarea { width: 100%; min-width: 0; font-weight: 400; }
.classroom-share-widget { min-height: 0; }
.classroom-local-files { color: var(--muted); font-size: 13px; }

/* La infografía llena la altura disponible bajo la cabecera, también en móvil. */
html[data-section="infographic"] body { display: flex; flex-direction: column; height: 100dvh; padding-bottom: 0; overflow: visible; }
html[data-section="infographic"] .app-header,
html[data-section="infographic"] .save-status-bar { flex: 0 0 auto; }
html[data-section="infographic"] .app-layout { flex: 1; min-height: 0; }
html[data-section="infographic"] .workspace { flex: 1; height: 100%; min-height: 360px; }
html[data-section="infographic"] .infographic-panel { min-height: 0; }

.classroom-choose-class { display: inline-flex; align-items: center; justify-content: center; padding: 8px 11px; border: 1px solid var(--accent); border-radius: 8px; color: white; background: var(--accent); text-align: center; text-decoration: none; }
.classroom-choose-class:hover { color: white; filter: brightness(1.08); }
.classroom-choose-class:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.classroom-choose-class[hidden] { display: none; }
.classroom-share-dialog menu { flex-wrap: wrap; }

html[data-section="notebook"] .workspace{display:none}
#notebook{min-width:0;width:100%;padding:16px;margin:0}
#notebook[hidden]{display:none}
.notebook-layout{display:grid;grid-template-columns:minmax(230px,.72fr) minmax(520px,1.8fr) minmax(224px,.68fr);gap:16px;height:calc(100dvh - var(--header-height) - var(--save-status-height));min-height:360px}
.notebook-layout>.panel{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;overflow:auto;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.notebook-layout h2,.notebook-layout h3,.notebook-layout h4,.notebook-layout p{margin:0}
.notebook-layout h2{font-size:17px}.notebook-layout h3{font-size:14px}.notebook-layout h4{font-size:13px;padding:10px;border-radius:8px;background:var(--surface-muted);border:1px solid var(--border)}
.notebook-layout p,.notebook-layout small{font-size:12px;line-height:1.5;color:var(--muted)}
.notebook-layout .notebook-activity-title{font-weight:700;color:var(--text)}
.notebook-toolbar{display:flex;flex-direction:column;gap:10px}
.notebook-layout input,.notebook-layout select,.notebook-layout textarea{width:100%;min-width:0;border:1px solid var(--border);border-radius:8px;padding:9px;color:var(--text);background:var(--surface);font:inherit}
.notebook-layout textarea{min-height:120px;resize:vertical;font-size:12px}
.notebook-criterion{display:block;width:100%;text-align:left;padding:10px;font-size:12px;background:var(--surface-muted)}
.notebook-criterion[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.notebook-student{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-muted)}
.notebook-student input:not([type=number]){flex:1;min-width:0}.notebook-student input[type=number]{width:100px}
@media(max-width:900px){.notebook-layout{height:auto;grid-template-columns:1fr}.notebook-layout>.panel{overflow:visible}.notebook-controls{grid-row:1}}

.notebook-student{flex-wrap:wrap;gap:8px}.notebook-student-order{display:flex;gap:3px;align-items:center}.notebook-student-order button{padding:4px 7px;font-size:12px}.notebook-student-order button[draggable]{cursor:grab}.notebook-student.is-dragging{opacity:.5}.notebook-student.is-drop-target{border-color:var(--accent);background:var(--accent-soft)}.notebook-grades .notebook-student input[type=number]{width:75px}

.notebook-activity-cards{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}.notebook-activity-card{flex:1 1 210px;min-width:0;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-muted);display:flex;flex-direction:column;gap:10px}.notebook-criterion-buttons{display:flex;flex-wrap:wrap;gap:6px}.notebook-criterion-buttons .notebook-criterion{width:auto;min-width:44px;text-align:center}.notebook-mark-table{overflow:auto;max-width:100%;flex-shrink:0}.notebook-mark-table .notebook-student,.notebook-mark-header{display:grid;gap:8px;align-items:center;width:max-content;min-width:100%;padding:10px;margin:0;border-radius:0}.notebook-mark-header{position:sticky;top:0;z-index:1;background:var(--surface-muted);border:1px solid var(--border);font-size:11px}.notebook-mark-header small{display:block;font-size:10px;overflow-wrap:anywhere}.notebook-mark-table .notebook-student input[type=number]{width:100%}.notebook-select-all{display:flex;align-items:center;gap:8px;font-size:12px}.notebook-layout input[type=checkbox]{width:auto;flex:none}.notebook-student-order{gap:1px}.notebook-student-order button{padding:4px}.notebook-student-order input{margin-left:3px}

.notebook-group-list,.notebook-load-panel{display:flex;flex-direction:column;gap:12px;min-width:0}.notebook-group-list[hidden],.notebook-load-panel[hidden]{display:none}.notebook-grades>.relationship-view-switch{flex-shrink:0}

.notebook-choice-list{flex:0 0 auto;overflow:visible;grid-template-columns:minmax(0,1fr);width:100%}.notebook-choice{cursor:pointer;grid-template-columns:minmax(0,1fr);min-height:54px}.notebook-choice:active{cursor:pointer}.notebook-choice[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}.notebook-choice-title{font-size:12px;overflow-wrap:anywhere}.notebook-controls>h3{font-size:14px}.notebook-choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.notebook-student-dialog{width:min(600px,calc(100vw - 40px));max-height:85dvh;overflow:auto;padding:24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:var(--shadow)}.notebook-student-dialog::backdrop{background:rgb(15 23 42 / 50%)}.notebook-student-dialog[open]{display:flex;flex-direction:column;gap:14px}.notebook-student-dialog textarea{width:100%;min-height:220px;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--surface-muted);color:var(--text);resize:vertical}.notebook-student-dialog p,.notebook-student-dialog small{font-size:12px;line-height:1.5;color:var(--muted)}.notebook-grades>.panel-heading{flex-wrap:wrap;gap:8px}

.notebook-central-table .notebook-student span{font-size:12px;overflow-wrap:anywhere}.notebook-central-table .notebook-student input[type=number]{width:100%}

.notebook-header-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}.notebook-header-actions button{min-width:0;padding:8px 5px;font-size:12px}

.notebook-criterion-progress{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;color:var(--muted);white-space:nowrap}

.notebook-periods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.notebook-periods button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}.notebook-grading-terms{display:flex;flex-direction:column;gap:8px}.notebook-grading-terms small{font-size:11px;color:var(--muted)}.notebook-grading-terms.is-different{border:2px solid #d97706;background:color-mix(in srgb,#d97706 12%,var(--surface));border-radius:10px;padding:10px}.notebook-grading-terms.is-different legend{color:#b45309;font-weight:700}.notebook-grading-terms.is-different .unit-terms-buttons button[aria-pressed="true"]{border-color:#d97706;background:color-mix(in srgb,#d97706 22%,var(--surface));color:var(--text)}.notebook-activity-cards[hidden]{display:none}.notebook-central-table output{font-weight:700;text-align:center}

.notebook-activity-cards{max-height:240px;overflow:auto;flex-shrink:0}.notebook-central-table{scroll-margin-block:16px;min-height:44px}

.notebook-unit-choice-row{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:8px;align-items:stretch}.notebook-term-cycle{font-size:12px;font-weight:700;padding:6px;min-width:0;border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.notebook-term-cycle.is-different{border-color:#d97706;background:color-mix(in srgb,#d97706 20%,var(--surface));color:var(--text)}

.notebook-central-table{width:100%}.notebook-central-table .notebook-student,.notebook-central-table .notebook-mark-header{width:100%;min-width:0;box-sizing:border-box}.notebook-central-table .notebook-student>span{min-width:0;white-space:normal;overflow-wrap:anywhere}.notebook-central-table .notebook-mark-header>*{min-width:0;overflow-wrap:anywhere}.notebook-central-table .notebook-student input[type=number]{min-width:0;padding:8px 3px}

.notebook-delete-student{width:32px;min-width:0;padding:5px;font-size:20px;color:var(--muted)}.notebook-delete-student:hover{color:#dc2626;border-color:#dc2626}

.notebook-unit-choice-row.is-evaluation-unit .notebook-choice{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}.notebook-evaluation-indicator{font-size:10px;font-weight:700;color:var(--accent)}

.notebook-criterion-bubble{display:inline-flex;align-items:center;gap:5px;padding-right:8px;border:1px solid var(--border);border-radius:9px;background:var(--surface)}.notebook-criterion-bubble>.notebook-criterion{border:0;margin:0}.notebook-criterion-bubble>input[type=checkbox]{width:15px;height:15px;margin:0;accent-color:var(--accent);cursor:pointer}.notebook-criterion-bubble:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}

.notebook-average-wrap{position:relative;display:block;text-align:center}.notebook-average{display:block;padding:8px 2px;border-radius:6px;cursor:help}.notebook-average:focus-visible{outline:2px solid var(--accent)}.notebook-average-tooltip{display:none;position:fixed;z-index:20;right:0;bottom:100%;width:max-content;max-width:min(360px,70vw);padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);box-shadow:var(--shadow);font-size:11px;font-weight:400;text-align:left;white-space:pre-line;pointer-events:none}.notebook-average-wrap:hover .notebook-average-tooltip,.notebook-average-wrap:focus-within .notebook-average-tooltip{display:block}

.notebook-central-table .notebook-mark-header>:not(:first-child){text-align:center}.notebook-central-table .notebook-student input[type=number]{text-align:center}.notebook-central-table .notebook-student>output,.notebook-central-table .notebook-average-wrap,.notebook-central-table .notebook-average{text-align:center}

.notebook-layout>.notebook-controls{overflow-y:auto;overflow-x:hidden;min-height:0;max-height:100%;overscroll-behavior-y:contain;scrollbar-gutter:stable}.notebook-controls>*{flex-shrink:0}.notebook-controls .notebook-choice-list{flex:0 0 auto}@media(max-width:900px){.notebook-layout>.notebook-controls{max-height:70dvh;overflow-y:auto}}

html[data-section="notebook"] .free-plan-bar{display:none}#notebook-timeline[hidden]{display:none}#notebook-timeline{padding:10px 18px;border-bottom:1px solid var(--border);background:var(--surface)}.notebook-timeline-dates{display:flex;justify-content:space-between;align-items:center;gap:14px}.notebook-timeline-dates label{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.notebook-timeline-dates input{border:1px solid var(--border);border-radius:7px;padding:5px;color:var(--text);background:var(--surface-muted);font:inherit}.notebook-timeline-dates strong{font-size:12px}.notebook-timeline-status{margin:6px 0;font-size:10px;color:var(--muted)}.notebook-timeline-scroll{overflow-x:auto;max-width:100%}.notebook-timeline-chart{position:relative;height:98px;border:1px solid var(--border);border-radius:8px;overflow:hidden}.notebook-timeline-month{position:absolute;top:0;height:24px;text-align:center;font-size:11px;font-weight:700;border-right:1px solid var(--border);background:var(--accent-soft);padding:4px;overflow:hidden;white-space:nowrap}.notebook-timeline-half{position:absolute;top:24px;height:74px;border-right:1px solid var(--border);font-size:9px;color:var(--muted);text-align:center;padding-top:4px}.notebook-timeline-unit{position:absolute;top:48px;height:36px;min-width:0;border-radius:5px;background:var(--accent-soft);border-color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px;font-size:11px}.notebook-timeline-unit[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent);font-weight:700}.notebook-timeline-today{position:absolute;top:0;bottom:0;width:2px;background:#ef4444;z-index:2;pointer-events:none}.notebook-timeline-today span{position:absolute;top:80px;left:4px;font-size:9px;color:#ef4444;font-weight:700}html[data-section="notebook"] .notebook-layout{height:calc(100dvh - var(--header-height) - var(--save-status-height) - var(--usage-bar-height) - 174px);min-height:340px}@media(max-width:900px){.notebook-timeline-dates{flex-wrap:wrap}.notebook-timeline-dates strong{display:none}html[data-section="notebook"] .notebook-layout{height:auto}}

.notebook-timeline-holiday{position:absolute;top:24px;bottom:0;background:rgb(234 179 8 / 22%);border-inline:1px solid #ca8a04;pointer-events:auto}.notebook-timeline-holiday.is-easter{background:rgb(34 197 94 / 18%);border-color:#16a34a}.notebook-timeline-holiday>span{position:absolute;bottom:0;left:0;right:0;font-size:9px;line-height:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}

.notebook-periods{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.notebook-periods .notebook-choice{padding:8px 3px;font-size:10px;min-height:54px;overflow-wrap:anywhere;text-align:center}

.annual-calendar-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}.annual-calendar-dates label{font-size:10px;color:var(--muted);display:grid;gap:4px}.annual-calendar-dates input{min-width:0;width:100%;padding:5px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font:inherit}#right-planning-panel.is-calendar-annual{overflow:auto}.annual-calendar-graph{display:grid;grid-template-columns:105px minmax(0,1fr);flex:none;min-height:500px}.annual-calendar-graph svg{display:block;width:100%;height:100%;min-height:0}.annual-calendar-axis-line{stroke:var(--muted);stroke-width:1}.annual-calendar-holiday{fill:var(--accent-soft)}.annual-calendar-holiday.is-christmas{fill:#fef3c7}.annual-calendar-holiday.is-easter{fill:#dcfce7}.annual-calendar-holiday-label{fill:#172033;font-size:8px;font-weight:700}.annual-calendar-axis .planning-axis-label{font-size:9px}

html[data-section="notebook"] .usage-info-bar{display:none}html[data-section="notebook"] .notebook-layout{height:calc(100dvh - var(--header-height) - var(--save-status-height) - 174px);min-height:340px}@media(max-width:900px){html[data-section="notebook"] .notebook-layout{height:auto}}

.notebook-timeline-unit{cursor:grab;touch-action:pan-y;user-select:none}.notebook-timeline-unit.is-moving{cursor:grabbing;z-index:3;opacity:.85;box-shadow:0 0 0 2px var(--accent)}.notebook-timeline-unit:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

.notebook-qualitative{display:flex;flex-direction:column;gap:6px;min-width:0;padding:4px}.notebook-qual-row{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:6px;align-items:center}.notebook-qual-code{font-size:11px;overflow-wrap:anywhere;text-align:left}.notebook-qual-code small{display:block;font-size:9px;color:var(--muted)}.notebook-qual-subhead{font-size:9px;font-weight:700;color:var(--muted)}.notebook-qual-scale{display:flex;align-items:center;justify-content:space-between;gap:8px}.notebook-layout .notebook-qual-scale input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;min-width:18px;padding:0;margin:0;border:2px solid var(--border);border-radius:50%;background:var(--surface);cursor:pointer}.notebook-layout .notebook-qual-scale input[type=radio]:checked{border-color:var(--qual-color);background:var(--qual-color);box-shadow:inset 0 0 0 3px var(--surface)}.notebook-qual-scale input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.notebook-central-table .notebook-student{align-items:start}.notebook-qual-header small{line-height:1.4}

@media(min-width:901px){html[data-section=""] .workspace:not(.hide-left):not(.hide-right){grid-template-columns:minmax(260px,.945fr) minmax(420px,1.575fr) minmax(224px,.68fr)}html[data-section=""] .workspace.hide-left:not(.hide-right){grid-template-columns:minmax(0,1fr) minmax(224px,.68fr)}}html[data-section=""] .relationships-column{padding:14px}html[data-section=""] #right-planning-panel{overflow:auto}html[data-section=""] .planning-chart{flex:none;width:100%;height:auto;min-height:480px}html[data-section=""] .planning-unit-title{font-size:12.5px}html[data-section=""] .planning-activity-label{font-size:12px}html[data-section=""] .planning-label{font-size:15px}html[data-section=""] .planning-term{font-size:14px}html[data-section=""] .planning-activity-legend{font-size:12px}

.notebook-qualitative{display:flex;flex-direction:column;gap:8px;align-content:start}.notebook-qualitative .notebook-qual-row{grid-template-columns:minmax(0,1fr) 54px;gap:3px}.notebook-qualitative .notebook-qual-subhead{grid-column:1 / -1;grid-template-columns:1fr 1fr}.notebook-qualitative .notebook-qual-scale{gap:3px}.notebook-layout .notebook-qual-scale input[type=radio]{width:14px;height:14px;min-width:14px}.notebook-qual-toggle{font-size:11px;align-self:center;background:var(--accent-soft);border-color:var(--accent);color:var(--text)}

html[data-section=""] .planning-chart{width:80%;margin-inline:auto}html[data-section=""] .planning-unit-title,html[data-section=""] .planning-activity-label,html[data-section=""] .planning-label,html[data-section=""] .planning-term,html[data-section=""] .planning-session-resize-value,html[data-section=""] .planning-activity-legend{font-size:14px}

.annual-planning-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start;flex:none;margin-bottom:10px}.annual-planning-settings .planning-sessions-field{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0;min-width:0}.annual-planning-settings .planning-sessions-field>span{min-height:32px;font-size:12px}.annual-planning-settings input{width:100%;min-width:0}

.notebook-qualitative .notebook-qual-row:not(.notebook-qual-subhead){grid-template-columns:max-content minmax(0,1fr);justify-content:stretch;gap:8px}.notebook-qualitative .notebook-qual-scale{justify-content:flex-start;gap:3px}.notebook-student-name-cell{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;font-size:12px;overflow-wrap:anywhere}.notebook-student-master{justify-content:flex-start;gap:8px}

.notebook-qual-legend .notebook-qual-level-1{color:#dc2626}.notebook-qual-legend .notebook-qual-level-2{color:#b88700}.notebook-qual-legend .notebook-qual-level-3{color:#16a34a}[data-theme="dark"] .notebook-qual-legend .notebook-qual-level-1{color:#f87171}[data-theme="dark"] .notebook-qual-legend .notebook-qual-level-2{color:#facc15}[data-theme="dark"] .notebook-qual-legend .notebook-qual-level-3{color:#4ade80}.notebook-qual-legend [class^="notebook-qual-level-"]{font-weight:700}

html[data-section=""] .planning-chart text,html[data-section=""] .planning-activity-legend{font-family:inherit;font-size:11px;font-weight:400;line-height:1.35}

.notebook-student-cards{display:grid;gap:8px;width:100%;overflow:visible}.notebook-student-cards>.notebook-mark-header{display:none}.notebook-student-cards .notebook-student-card{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) 28px!important;grid-template-areas:"number name delete" "order acs acs";width:100%;min-width:0;box-sizing:border-box;gap:5px 7px;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface);transition:background .15s,border-color .15s}.notebook-student-cards .notebook-student-card:focus-within{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}.notebook-student-cards .notebook-student-card.is-acs{border-color:var(--accent);background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 24%,var(--surface)),color-mix(in srgb,var(--accent) 4%,var(--surface)));box-shadow:inset 3px 0 0 var(--accent)}.notebook-student-number{grid-area:number;color:var(--accent);font-size:11px;font-weight:800;text-align:center}.notebook-student-cards .notebook-student-name{grid-area:name;width:100%;padding:3px 0;border:1px solid transparent;background:transparent;color:var(--text);font:inherit;font-size:12px;font-weight:700;min-width:0}.notebook-student-cards .notebook-student-name:focus{border-color:var(--accent);outline:none}.notebook-student-cards .notebook-delete-student{grid-area:delete;padding:2px 5px}.notebook-student-cards .notebook-student-order{grid-area:order;grid-column:1/3;justify-self:start;gap:4px}.notebook-student-cards .notebook-student-order button{padding:1px 5px;font-size:11px;background:transparent}.notebook-student-cards .notebook-student-acs{grid-area:acs;grid-column:2/4;justify-self:end;display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);cursor:pointer}.notebook-student-acs input{margin:0;accent-color:var(--accent)}.notebook-student-card.is-acs .notebook-student-acs{color:var(--text);font-weight:700}.notebook-acs-badge{display:inline-block;padding:2px 6px;border-radius:5px;background:var(--accent-soft);color:var(--accent);font-size:10px!important;font-weight:700}

.notebook-unit-heading{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}.notebook-unit-heading h2{margin:0;flex:1;min-width:0}.notebook-unit-view-actions{display:flex;justify-content:flex-end;gap:6px;margin-left:auto;flex-wrap:wrap}.notebook-unit-view-actions button{font-size:11px;padding:7px 10px}.notebook-unit-view-actions button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast,#fff)}

.planning-chart text,.planning-activity-legend{font-family:inherit;font-size:11px;font-weight:400;line-height:1.35}

.notebook-student-cards .notebook-student-card{grid-template-columns:22px minmax(0,1fr) 26px 20px max-content!important;grid-template-areas:"number name delete selection acs";gap:5px;align-items:center}.notebook-student-cards .notebook-student-order{grid-area:selection;grid-column:auto;justify-self:center}.notebook-student-cards .notebook-student-order input{margin:0}.notebook-student-cards .notebook-student-acs{grid-area:acs;grid-column:auto;justify-self:end;white-space:nowrap}.notebook-student-cards .notebook-student-name{font-size:12px}

.notebook-student-cards button.notebook-student-acs{display:block;padding:4px 6px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--muted);font-size:10px;font-weight:700;cursor:pointer}.notebook-student-cards button.notebook-student-acs[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast,#fff)}

.setup-needs-attention{display:inline-block;animation:curriculum-drag-nudge 1.6s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.setup-needs-attention{animation:none}}

.notebook-student-cards .notebook-student-card{grid-template-columns:26px 22px minmax(0,1fr) max-content 26px!important;grid-template-areas:"selection number name acs delete"}.notebook-student-cards button.notebook-student-acs{height:26px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.notebook-student-cards .notebook-student-order input[type=checkbox]{width:26px;height:26px;min-width:26px;margin:0;accent-color:var(--accent)}

[title]:not([title=""]),[title]:not([title=""]) *,[aria-describedby]:not([aria-describedby=""]),[aria-describedby]:not([aria-describedby=""]) *,svg :has(> title),svg :has(> title) *{cursor:help!important}

.notebook-group-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.notebook-group-heading h3{margin:0}.notebook-delete-group{font-size:11px;padding:5px 8px}

.notebook-edit-students[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast,#fff)}.notebook-delete-student[hidden],.notebook-delete-group[hidden]{display:none!important}

.notebook-assessment-decisions{display:grid;gap:6px}.notebook-assessment-decision{display:grid;gap:5px;width:100%;text-align:left;padding:9px;border:1px solid var(--border);border-radius:9px;background:var(--surface)}.notebook-assessment-decision strong{font-size:11px}.notebook-assessment-decision span{font-size:11px;line-height:1.4}.notebook-assessment-decision.is-different{background:#fef3c7;border-color:#eab308;color:#713f12}

.notebook-assessment-decision{margin:0;min-width:0}.notebook-assessment-decision legend{font-size:11px;font-weight:700;padding:0 4px}.notebook-assessment-option{display:flex;align-items:flex-start;gap:7px;cursor:pointer}.notebook-layout .notebook-assessment-option input[type=radio]{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--accent)}.notebook-assessment-option span{flex:1;min-width:0}.notebook-assessment-decision small{font-size:10px}

.annual-planning-settings .planning-sessions-field{flex-direction:row;align-items:center;justify-content:space-between;gap:8px}.annual-planning-settings .planning-sessions-field>span{min-height:0;flex:1;line-height:1.3}.annual-planning-settings .planning-sessions-field input{flex:0 0 66px;width:66px;min-width:0;padding:7px 5px}

.notebook-continuous-modes{display:grid;gap:7px;margin:3px 0 0 23px;padding:9px;border-left:2px solid var(--accent)}.notebook-continuous-modes label{display:flex;align-items:center;gap:7px;font-size:11px}.notebook-layout .notebook-continuous-modes input[type=radio]{width:16px;height:16px;margin:0;flex:none;accent-color:var(--accent)}

.notebook-evaluation-average{display:block;text-align:center;font-weight:700;padding:8px 2px;color:var(--accent)}

.notebook-central-table .notebook-grade-fail{background:rgb(239 68 68 / 18%);border-color:rgb(239 68 68 / 40%)}.notebook-central-table .notebook-grade-pass{background:rgb(34 197 94 / 18%);border-color:rgb(34 197 94 / 40%)}

.notebook-central-table .notebook-qualitative{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box;padding:10px 0 4px}.notebook-central-table .notebook-qualitative .notebook-qual-row{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:start;justify-content:stretch;gap:8px;width:100%}.notebook-central-table .notebook-qual-code{font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}.notebook-central-table .notebook-qual-scale{padding-top:1px}.notebook-central-table .notebook-qual-header{text-align:left;padding-top:6px}