* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--regular) var(--text)/var(--leading) var(--font); }
a { color: var(--blue-ink); text-underline-offset: var(--s1); }
a:hover { color: var(--orange-ink); }
p, li, legend, a, h1, h2, h3, dd, label, button { overflow-wrap: anywhere; }
h1, h2, h3 { font-weight: var(--bold); }
h1 { font-size: var(--title); line-height: var(--heading-leading); margin: var(--s2) 0 var(--s4); }
h2 { font-size: var(--title-sm); line-height: var(--heading-leading); margin: 0 0 var(--s4); }
h3 { font-size: var(--text-lg); margin: 0 0 var(--s2); }
p { margin: 0 0 var(--s4); }
small, .helptext { font-size: var(--text-small); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
.site-header { background: var(--surface); border-bottom: var(--border) solid var(--line); }
.header-inner { max-width: var(--page); margin: auto; padding: var(--s6) var(--s4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s6); }
.brand { display: inline-flex; flex-direction: column; color: var(--ink); text-decoration: none; position: relative; padding-left: var(--s8); min-height: var(--touch); }
.brand::before { content: ''; width: var(--s6); height: var(--s6); border-radius: var(--radius-leaf); background: var(--green); position: absolute; left: 0; top: var(--s2); transform: rotate(var(--leaf-angle)); }
.brand strong { font-size: var(--brand-size); line-height: var(--heading-leading); }
.brand small { color: var(--muted); }
.main-nav, .tabs, .actions, .week-nav, .inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.main-nav { flex: 1 1 auto; justify-content: flex-end; }
.main-nav a, .tabs a { display: inline-flex; min-height: var(--touch); align-items: center; padding: var(--s2) var(--s3); border-radius: var(--radius-sm); font-weight: var(--bold); text-decoration: none; }
.main-nav a[aria-current], .tabs a[aria-current] { background: var(--blue-soft); color: var(--blue-ink); box-shadow: inset 0 calc(-1 * var(--accent)) var(--blue-ink); }
.main-nav a:hover, .tabs a:hover { background: var(--yellow-soft); color: var(--yellow-ink); }
.main-nav form, .actions form { margin: 0; }
main { max-width: var(--page); margin: auto; padding: var(--s8) var(--s4) var(--s12); min-height: 75vh; }
.site-footer { border-top: var(--border) solid var(--line); padding: var(--s8) var(--s4); color: var(--muted); text-align: center; }
.site-footer strong { color: var(--green-ink); }
.site-footer p { margin: var(--s2) 0 0; }
.eyebrow { color: var(--blue-ink); font-size: var(--text-small); font-weight: var(--bold); letter-spacing: var(--letter-spacing); text-transform: uppercase; margin-bottom: var(--s3); }
.hero, .page-heading { position: relative; isolation: isolate; background: var(--blue-soft); border-radius: var(--radius-hero); padding: var(--s6); margin-bottom: var(--s8); overflow: hidden; }
.hero { background: var(--orange-soft); padding: var(--s8) var(--s6); }
.hero::before { content: ''; position: absolute; z-index: -1; right: calc(-1 * var(--s12)); top: calc(-1 * var(--s12)); width: var(--decoration); height: var(--decoration); background: var(--yellow); border-radius: var(--radius-sun); }
.hero::after { content: ''; position: absolute; z-index: -1; bottom: calc(-1 * var(--s8)); right: var(--s4); width: var(--decoration); height: var(--s16); border-radius: var(--radius-leaf); background: var(--orange); transform: rotate(var(--leaf-angle)); }
.hero .eyebrow { color: var(--orange-ink); }
.hero-copy { max-width: var(--form-width); }
.hero-copy p:last-child, .page-heading p:last-child { margin-bottom: 0; }
.sprout { display: flex; gap: var(--s2); margin-bottom: var(--s6); }
.sprout span { width: var(--s8); height: var(--s4); background: var(--green); border-radius: var(--radius-leaf); }
.sprout span:last-child { background: var(--green-ink); transform: rotate(90deg); }
.page-heading { border-left: var(--accent) solid var(--blue-ink); }
.page-heading .actions { margin-bottom: 0; }
.section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s4); margin: var(--s8) 0 var(--s4); }
.section-heading h2 { margin: 0; }
.muted, .helptext { color: var(--muted); }
.cards, .days { display: grid; gap: var(--s6); margin: var(--s6) 0; }
.card, .day, .panel, .activity-form { min-width: 0; background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--radius); padding: var(--s6); }
.card { display: block; text-decoration: none; color: var(--ink); }
a.card { box-shadow: var(--shadow); }
a.card:hover { border-color: var(--blue-ink); background: var(--blue-soft); color: var(--ink); }
.card h2, .card h3 { margin-top: 0; }
.card p:last-child, .panel p:last-child { margin-bottom: 0; }
.group { position: relative; border-top: var(--accent) solid var(--green); }
.group:nth-child(4n+2) { border-top-color: var(--orange); }
.group:nth-child(4n+3) { border-top-color: var(--blue); }
.group:nth-child(4n) { border-top-color: var(--yellow); }
.group-number { color: var(--green-ink); font-weight: var(--bold); display: block; margin-bottom: var(--s6); }
.card-link { display: inline-flex; align-items: center; gap: var(--s2); color: var(--blue-ink); font-weight: var(--bold); min-height: var(--touch); }
.day { border-top: var(--accent) solid var(--blue); }
.day:nth-child(4n+2) { border-top-color: var(--yellow); }
.day:nth-child(4n+3) { border-top-color: var(--green); }
.day:nth-child(4n) { border-top-color: var(--orange); }
.day-heading { border-bottom: var(--border) solid var(--line); padding-bottom: var(--s4); display: flex; gap: var(--s3); align-items: center; }
.day-number { display: inline-flex; flex: 0 0 var(--touch); width: var(--touch); height: var(--touch); border-radius: var(--radius-sun); background: var(--blue-soft); color: var(--blue-ink); font-size: var(--text-lg); align-items: center; justify-content: center; }
.day h2 { font-size: var(--text-lg); margin: 0; }
.day small { display: block; color: var(--muted); margin-top: var(--s1); font-weight: var(--regular); }
.activity { margin-top: var(--s6); }
.activity + .activity { border-top: var(--border) dashed var(--control-line); padding-top: var(--s6); }
.activity-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.activity-media { margin: var(--s4) 0; }
.activity-media img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.image-fallback { padding: var(--s4); color: var(--orange-ink); background: var(--orange-soft); border-radius: var(--radius-sm); }
.image-fallback p { margin: 0; }
[hidden] { display: none !important; }
.notice, .closure { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4); border-radius: var(--radius-sm); background: var(--blue-soft); color: var(--blue-ink); margin-bottom: var(--s4); overflow-wrap: anywhere; border-left: var(--accent) solid currentColor; }
.notice p, .closure p { margin: 0; }
.notice-success { background: var(--green-soft); color: var(--green-ink); }
.notice-warning, .closure { background: var(--yellow-soft); color: var(--yellow-ink); }
.notice-error, .errorlist { background: var(--orange-soft); color: var(--orange-ink); }
.notice-symbol { font-weight: var(--bold); flex: 0 0 auto; }
.empty-state { background: var(--surface); border: var(--border) dashed var(--control-line); border-radius: var(--radius); padding: var(--s8); text-align: center; grid-column: 1 / -1; }
.empty-state::before { content: ''; display: block; width: var(--s8); height: var(--s8); margin: 0 auto var(--s4); border-radius: var(--radius-sun); background: var(--yellow); }
.empty-state p { max-width: var(--form-width); margin: 0 auto var(--s4); }
.empty-state p:last-child { margin-bottom: 0; }
.field { margin-bottom: var(--s6); min-width: 0; }
label { display: block; font-weight: var(--bold); margin-bottom: var(--s2); }
input, select, textarea { max-width: 100%; min-width: 0; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { display: block; width: 100%; min-height: var(--touch); border: var(--border) solid var(--control-line); border-radius: var(--radius-sm); padding: var(--s3); color: var(--ink); background: var(--surface); }
textarea { resize: vertical; }
input[type=file] { overflow: hidden; }
input::file-selector-button { font: inherit; color: var(--blue-ink); background: var(--blue-soft); border: var(--border) solid var(--control-line); padding: var(--s2); border-radius: var(--radius-sm); margin-right: var(--s2); cursor: pointer; min-height: var(--touch); }
input[type=checkbox], input[type=radio] { accent-color: var(--blue-ink); width: var(--s6); height: var(--s6); flex: 0 0 var(--s6); margin: 0; }
.check-label, .field div label { display: flex; align-items: center; gap: var(--s3); min-height: var(--touch); font-weight: var(--regular); margin: 0; padding: var(--s2) 0; }
.field-group { padding: 0; margin: 0 0 var(--s6); border: 0; min-inline-size: 0; }
.field-group legend { font-weight: var(--bold); margin-bottom: var(--s2); }
.field-group label { display: flex; align-items: center; gap: var(--s3); min-height: var(--touch); padding: var(--s2); font-weight: var(--regular); }
.decision-options { display: grid; gap: var(--s3); }
.decision-options label { padding: var(--s4); border: var(--border) solid var(--control-line); border-radius: var(--radius-sm); }
.decision-options label:has(input[value=aprobar]) { color: var(--green-ink); background: var(--green-soft); }
.decision-options label:has(input[value=rechazar]) { color: var(--orange-ink); background: var(--orange-soft); }
.decision-options label:has(input:checked) { border-width: var(--focus); font-weight: var(--bold); }
.helptext { display: block; margin-top: var(--s2); }
.errorlist { border-radius: var(--radius-sm); padding: var(--s3) var(--s3) var(--s3) var(--s8); margin: var(--s2) 0; }
.field-invalid input, .field-invalid select, .field-invalid textarea { border-color: var(--orange-ink); border-width: var(--focus); }
button, .button { display: inline-flex; justify-content: center; align-items: center; gap: var(--s2); min-height: var(--touch); min-width: var(--touch); padding: var(--s3) var(--s6); border: var(--border) solid var(--blue-ink); border-radius: var(--radius-sm); background: var(--blue-ink); color: var(--surface); font-weight: var(--bold); cursor: pointer; text-decoration: none; max-width: 100%; white-space: normal; }
button:hover, .button:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }
button:active, .button:active { box-shadow: inset 0 0 0 var(--focus) var(--surface); }
.quiet { background: var(--surface); color: var(--blue-ink); }
.quiet:hover { background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue-ink); }
.danger { background: var(--orange-ink); border-color: var(--orange-ink); color: var(--surface); }
.danger-link { color: var(--orange-ink); }
:disabled, .button[aria-disabled=true] { background: var(--line); color: var(--muted); border-color: var(--control-line); cursor: not-allowed; }
.actions { margin: var(--s6) 0; gap: var(--s3); }
.actions > a:not(.button), .back-link, .history, .week-nav a { display: inline-flex; align-items: center; min-height: var(--touch); padding: var(--s2) var(--s3); }
.back-link { padding-left: 0; margin-bottom: var(--s4); }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4); padding: var(--s6); background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--radius); margin: var(--s6) 0; }
.filters label { flex: 1 1 var(--filter-width); min-width: 0; margin-bottom: 0; }
.filters select { margin-top: var(--s2); }
.filters > a { display: inline-flex; align-items: center; min-height: var(--touch); }
.inline { align-items: flex-end; gap: var(--s4); }
.inline .field { margin: 0; flex: 1 1 var(--filter-width); }
.week-nav { justify-content: space-between; margin: var(--s4) 0; }
.week-nav a { background: var(--surface); border: var(--border) solid var(--control-line); border-radius: var(--radius-sm); text-decoration: none; }
details { background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s6); }
summary { cursor: pointer; font-weight: var(--bold); min-height: var(--touch); padding: var(--s2) 0; }
.badge { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3); border-radius: var(--pill); background: var(--paper); color: var(--muted); font-size: var(--text-small); font-weight: var(--bold); }
.badge svg { width: var(--s4); height: var(--s4); flex: 0 0 var(--s4); }
.status-borrador { color: var(--blue-ink); background: var(--blue-soft); }
.status-pendiente { color: var(--yellow-ink); background: var(--yellow-soft); }
.status-rechazada { color: var(--orange-ink); background: var(--orange-soft); }
.status-publicada { color: var(--green-ink); background: var(--green-soft); }
.status-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.availability { color: var(--muted); font-size: var(--text-small); margin: var(--s3) 0 0; }
.metadata { display: grid; gap: var(--s3); margin: var(--s4) 0; }
.metadata div { min-width: 0; }
.metadata dt { color: var(--muted); font-size: var(--text-small); }
.metadata dd { margin: 0; font-weight: var(--bold); }
.auth { max-width: var(--auth); margin: var(--s6) auto; }
.auth .panel { padding: var(--s6); }
.auth button { width: 100%; }
.auth .hero { padding: var(--s6); }
.tabs { border-bottom: var(--border) solid var(--line); padding-bottom: var(--s4); margin-bottom: var(--s6); }
.activity-form { min-inline-size: 0; margin: var(--s6) 0; }
.activity-form legend { font-size: var(--text-lg); font-weight: var(--bold); color: var(--blue-ink); padding: var(--s2) var(--s3); background: var(--blue-soft); border-radius: var(--radius-sm); }
.activity-form.deleted { border-style: dashed; border-color: var(--orange-ink); background: var(--orange-soft); }
.activity-form.deleted::after { content: 'Esta actividad se quitará al guardar.'; color: var(--orange-ink); display: block; margin-top: var(--s3); }
.drop-active { outline: var(--focus) dashed var(--blue-ink); outline-offset: var(--focus-gap); }
.weekly-theme, .weekly-assignments, .weekly-objectives { margin-block: var(--s6); overflow-wrap: anywhere; }
.weekly-theme h2, .weekly-text-list li { white-space: pre-wrap; }
.weekly-assignments { border: var(--border) solid var(--yellow-ink); border-left-width: var(--accent); background: var(--yellow-soft); padding: var(--s6); border-radius: var(--radius); }
.weekly-assignments h2, .weekly-assignments .eyebrow { color: var(--yellow-ink); }
.weekly-text-list { padding-left: var(--s6); }
.weekly-text-list li { padding-block: var(--s2); }
.weekly-text-list li + li { border-top: var(--border) solid var(--control-line); }
.weekly-text-form { min-inline-size: 0; margin-block: var(--s4); padding: var(--s4); overflow-wrap: anywhere; }
.weekly-text-form legend { font-weight: var(--bold); }
.weekly-text-form.deleted { border-style: dashed; border-color: var(--orange-ink); background: var(--orange-soft); }
.weekly-text-form.deleted::after { content: 'Este elemento se quitará al guardar.'; display: block; color: var(--orange-ink); }
.drop-help { color: var(--muted); font-size: var(--text-small); margin-bottom: var(--s6); }
.danger-zone { border-left: var(--accent) solid var(--orange-ink); margin-top: var(--s6); }
.timeline { border-left: var(--accent) solid var(--blue); padding-left: var(--s4); }
.timeline .card { margin-bottom: var(--s4); }
.split { display: grid; gap: var(--s6); align-items: start; }
.skip { position: absolute; top: -100%; left: var(--s4); padding: var(--s4); background: var(--surface); z-index: 10; min-height: var(--touch); }
.skip:focus { top: var(--s2); }
:focus-visible { outline: var(--focus) solid var(--blue-ink); outline-offset: var(--focus-gap); box-shadow: 0 0 0 var(--focus-gap) var(--surface); }
@media (min-width: 768px) {
  .hero { padding: var(--s12); }
  .hero-copy { padding-right: var(--s8); }
  .hero::before { width: calc(var(--decoration) * 1.5); height: calc(var(--decoration) * 1.5); }
  .hero::after { width: calc(var(--decoration) * 1.5); height: var(--s16); right: var(--s8); }
  .cards, .days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split .cards { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) { .days { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .header-inner { gap: var(--s4); }
  .main-nav { justify-content: flex-start; width: 100%; }
  .hero::before { right: calc(-1 * var(--s16)); }
  .hero::after { height: var(--s8); bottom: calc(-1 * var(--s6)); }
  .hero-copy { position: relative; }
  .hero-copy h1, .hero-copy p { position: relative; }
  .actions > *, .actions form button { flex: 1 1 auto; }
  .actions form { width: 100%; }
  .inline button { width: 100%; }
  .panel, .day, .card, .activity-form, .filters { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* A complete weekly sheet, with distinct days and nested activities. */
.planning-sheet { margin-block: var(--s8); padding: var(--s4); border: 2px solid var(--blue-ink); border-radius: var(--radius-lg); background: var(--surface); overflow-wrap: anywhere; }
.planning-sheet-header { padding: var(--s4); border-bottom: 2px solid var(--line); background: var(--blue-soft); border-radius: var(--radius); }
.planning-sheet .days { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s4); align-items: start; }
.planning-sheet .day { min-width: 0; border: 1px solid var(--control-line); background: var(--paper); }
.planning-sheet .day-heading { padding-bottom: var(--s3); border-bottom: 2px solid var(--yellow-ink); }
.planning-sheet .activity { border-top: 1px solid var(--control-line); padding-top: var(--s4); margin-top: var(--s4); }
.planning-sheet .activity-media img { max-width: 100%; height: auto; }
.cards > .card { border-color: var(--control-line); }