/* Explorador visual de CIENCIAS NATURALES: superficie autónoma, sin dependencia de la grilla de cursos. */
.science-resources-page {
  --resource-blue: #214e78;
  --resource-blue-soft: #dceaf5;
  --resource-red: #a65a5f;
  --resource-ink: #142238;
  --resource-muted: #55657a;
  --resource-line: #d4e0e9;
  --resource-paper: #f4f7fb;
  --resource-card: #fff;
  background: var(--resource-paper);
}

.resources-hero { padding-bottom: clamp(2.3rem, 5vw, 4.4rem); }
.resources-how { background: #edf3f8; border-block: 1px solid var(--resource-line); }
.resources-how .sci-shell { padding-block: clamp(2.4rem, 5vw, 4.3rem); }
.resources-section-head { max-width: 52rem; }
.resources-section-head h2,
.resources-bridge h2 { color: var(--resource-ink); font-family: "EB Garamond", Georgia, serif; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.025em; line-height: .96; margin: .35rem 0 .85rem; }
.resources-section-head p { color: var(--resource-muted); font-size: 1rem; line-height: 1.6; }
.resources-section-head code { background: #e3edf4; border-radius: .3rem; color: var(--resource-blue); font-family: "Instrument Sans", sans-serif; font-size: .85em; padding: .1em .33em; }

.resources-steps { counter-reset: resource-step; display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 2rem 0 0; padding: 0; }
.resources-steps li { background: rgba(255,255,255,.72); border: 1px solid var(--resource-line); min-height: 8.5rem; padding: 1.2rem 1.25rem 1.15rem; position: relative; }
.resources-steps li::before { color: var(--resource-red); content: "0" counter(resource-step); counter-increment: resource-step; display: block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; margin-bottom: 1.15rem; }
.resources-steps strong { color: var(--resource-ink); display: block; font-size: 1rem; margin-bottom: .25rem; }
.resources-steps span { color: var(--resource-muted); display: block; font-size: .92rem; line-height: 1.45; }

.resources-explorer-section { padding-block: clamp(3rem, 7vw, 6rem); }
.resources-section-head--explorer { margin-bottom: 2rem; }
.resources-explorer { background: var(--resource-card); border: 1px solid var(--resource-line); box-shadow: 0 18px 45px rgba(31,61,89,.08); }
.resources-topic-list { background: #eef4f8; border-bottom: 1px solid var(--resource-line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.resource-topic { align-items: center; background: transparent; border: 0; border-right: 1px solid var(--resource-line); border-bottom: 1px solid var(--resource-line); color: var(--resource-ink); cursor: pointer; display: flex; gap: .75rem; justify-content: flex-start; min-height: 4.75rem; padding: .75rem .9rem; text-align: left; transition: background .16s ease, color .16s ease; }
.resource-topic:nth-child(4n) { border-right: 0; }
.resource-topic:nth-child(n+5) { border-bottom: 0; }
.resource-topic:hover { background: #e2eef5; }
.resource-topic:focus-visible { outline: 3px solid #c04a50; outline-offset: -3px; position: relative; z-index: 1; }
.resource-topic[aria-selected="true"] { background: var(--resource-blue); color: #fff; }
.resource-topic__num { color: #832e35; flex: 0 0 auto; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.resource-topic[aria-selected="true"] .resource-topic__num { color: #ffced0; }
.resource-topic__copy { display: grid; gap: .12rem; }
.resource-topic__label { font-size: .83rem; font-weight: 750; line-height: 1.12; }
.resource-topic__sub { color: #4f6378; font-size: .72rem; line-height: 1.18; }
.resource-topic[aria-selected="true"] .resource-topic__sub { color: #d8eafa; }

.resource-studio { padding: clamp(1rem, 3vw, 2rem); }
.resource-studio__head { align-items: start; border-bottom: 1px solid var(--resource-line); display: flex; gap: 1rem; justify-content: space-between; padding: .1rem 0 1.25rem; }
.resource-studio__head h3 { color: var(--resource-ink); font-family: "EB Garamond", Georgia, serif; font-size: clamp(1.9rem, 3.3vw, 2.8rem); letter-spacing: -.025em; line-height: .98; margin: .28rem 0 .5rem; }
.resource-studio__head p { color: var(--resource-muted); font-family: "Newsreader", Georgia, serif; font-size: 1.05rem; line-height: 1.42; margin: 0; max-width: 47rem; }
.resource-kicker { color: var(--resource-red); display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.resource-counter { border: 1px solid var(--resource-line); color: var(--resource-blue); flex: 0 0 auto; font-size: .74rem; font-weight: 750; letter-spacing: .04em; margin-top: .2rem; padding: .5rem .65rem; text-transform: uppercase; }

.resource-workspace { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1.62fr) minmax(18rem, .88fr); padding-block: 1.35rem; }
.resource-canvas-wrap { background: #f9fcfe; border: 1px solid var(--resource-line); min-width: 0; padding: .6rem; }
.resource-canvas { background: #f8fbfd; display: block; height: auto; max-width: 100%; outline: none; width: 100%; }
.resource-canvas:focus-visible { box-shadow: 0 0 0 3px rgba(192,74,80,.6); }
.resource-canvas-caption { color: var(--resource-muted); font-size: .76rem; line-height: 1.38; margin: .65rem .35rem .15rem; }
.resource-sidepanel { background: #f1f6f9; border: 1px solid var(--resource-line); display: flex; flex-direction: column; min-width: 0; padding: 1rem; }
.resource-summary { color: var(--resource-ink); font-family: "Newsreader", Georgia, serif; font-size: 1.03rem; line-height: 1.43; }
.resource-summary strong { color: var(--resource-blue); font-family: "Instrument Sans", sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.resource-summary h4 { color: var(--resource-ink); font-family: "EB Garamond", Georgia, serif; font-size: 1.55rem; line-height: 1; margin: .45rem 0 .42rem; }
.resource-summary p { margin: 0; }
.resource-controls { border: 0; border-top: 1px solid var(--resource-line); display: grid; gap: .78rem; margin: 1.1rem 0 0; min-inline-size: 0; padding: 1.05rem 0 0; }
.resource-controls legend { color: var(--resource-blue); font-size: .7rem; font-weight: 800; letter-spacing: .1em; padding: 0; text-transform: uppercase; }
.resource-control { display: grid; gap: .38rem; }
.resource-control label { color: var(--resource-ink); display: flex; font-size: .84rem; font-weight: 650; gap: .5rem; justify-content: space-between; line-height: 1.25; }
.resource-control output { color: var(--resource-red); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.resource-control input[type="range"] { accent-color: var(--resource-blue); cursor: pointer; inline-size: 100%; }
.resource-control select { background: #fff; border: 1px solid #b8c9d5; border-radius: .35rem; color: var(--resource-ink); font: inherit; font-size: .86rem; min-height: 2.25rem; padding: .35rem .45rem; width: 100%; }
.resource-control--check { align-items: center; display: flex; gap: .55rem; }
.resource-control--check input { accent-color: var(--resource-blue); block-size: 1.05rem; inline-size: 1.05rem; }
.resource-control--check label { display: block; font-size: .84rem; }
.resource-limit { border-top: 1px solid var(--resource-line); color: var(--resource-muted); font-size: .82rem; line-height: 1.43; margin-top: auto; padding-top: .85rem; }
.resource-limit summary { color: var(--resource-blue); cursor: pointer; font-size: .76rem; font-weight: 750; }
.resource-limit p { margin: .6rem 0 0; }

.resource-fiche { background: #fffdf9; border: 1px solid #e4dcd1; padding: clamp(1rem, 2.8vw, 1.45rem); }
.resource-fiche__head { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.resource-fiche h4 { color: var(--resource-ink); font-family: "EB Garamond", Georgia, serif; font-size: 1.65rem; line-height: 1; margin: .32rem 0 0; }
.resource-fiche__tag { color: var(--resource-red); font-size: .72rem; font-weight: 750; text-align: right; }
.resource-question { color: var(--resource-ink); font-family: "Newsreader", Georgia, serif; font-size: 1.08rem; line-height: 1.45; margin: 1.05rem 0 .7rem; max-width: 62rem; }
.resource-fiche label { color: var(--resource-blue); display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; margin-bottom: .45rem; text-transform: uppercase; }
.resource-fiche textarea { background: rgba(255,255,255,.88); border: 1px solid #c8d3dd; border-radius: 0; box-sizing: border-box; color: var(--resource-ink); font: 1rem/1.5 "Newsreader", Georgia, serif; min-height: 8.5rem; padding: .7rem .8rem; resize: vertical; width: 100%; }
.resource-fiche textarea:focus { border-color: var(--resource-blue); box-shadow: 0 0 0 3px rgba(47,111,166,.16); outline: none; }
.resource-note-help { color: var(--resource-muted); font-size: .76rem; margin: .45rem 0 0; }
.resource-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem; padding-top: 1rem; }
.resource-action { background: #fff; border: 1px solid #9bb2c4; color: var(--resource-blue); cursor: pointer; font: 700 .8rem/1 "Instrument Sans", sans-serif; min-height: 2.65rem; padding: .63rem .85rem; }
.resource-action:hover { background: #e9f2f7; border-color: var(--resource-blue); }
.resource-action:focus-visible { outline: 3px solid rgba(192,74,80,.7); outline-offset: 2px; }
.resource-action--primary { background: var(--resource-blue); border-color: var(--resource-blue); color: #fff; }
.resource-action--primary:hover { background: #173f63; }
.resource-action--quiet { border-color: transparent; color: var(--resource-muted); }
.resource-status { color: var(--resource-muted); font-size: .8rem; line-height: 1.3; min-height: 1.1rem; }

.resources-bridge { background: #eaf2f7; border-top: 1px solid var(--resource-line); padding-block: clamp(2.7rem, 5vw, 4.5rem); }
.resources-bridge__inner { align-items: end; display: flex; gap: 2rem; justify-content: space-between; }
.resources-bridge__inner > div:first-child { max-width: 45rem; }
.resources-bridge p { color: var(--resource-muted); line-height: 1.55; margin: 0; }
.resources-bridge__links { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .65rem; }
.science-resources-page .sci-button--ghost { background: transparent; border: 1px solid var(--resource-blue); color: var(--resource-blue); }

.resource-print-sheet { display: none; }

@media (max-width: 900px) {
  .resources-steps { grid-template-columns: repeat(2, 1fr); }
  .resources-steps li:nth-child(2n) { border-right-color: var(--resource-line); }
  .resources-steps li:nth-child(n+3) { border-bottom: 1px solid var(--resource-line); }
  .resources-topic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resource-topic:nth-child(4n) { border-right: 1px solid var(--resource-line); }
  .resource-topic:nth-child(2n) { border-right: 0; }
  .resource-topic:nth-child(n+5) { border-bottom: 1px solid var(--resource-line); }
  .resource-topic:nth-child(n+7) { border-bottom: 0; }
  .resource-workspace { grid-template-columns: 1fr; }
  .resource-sidepanel { min-height: 0; }
  .resources-bridge__inner { align-items: start; flex-direction: column; }
}

@media (max-width: 560px) {
  .resources-hero .sci-page-hero__grid { gap: 1.4rem; }
  .resources-steps { grid-template-columns: 1fr; }
  .resources-steps li { min-height: 0; }
  .resources-steps li:not(:last-child) { border-bottom: 0; }
  .resources-topic-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .resource-topic { border-bottom: 0; border-right: 1px solid var(--resource-line) !important; flex: 0 0 78%; min-height: 4.45rem; scroll-snap-align: start; }
  .resource-studio { padding: .8rem; }
  .resource-studio__head { display: block; }
  .resource-counter { display: inline-block; margin-top: .75rem; }
  .resource-canvas-wrap { padding: .35rem; }
  .resource-fiche__head { display: block; }
  .resource-fiche__tag { display: block; margin-top: .55rem; text-align: left; }
  .resource-actions { align-items: stretch; display: grid; grid-template-columns: 1fr 1fr; }
  .resource-action { min-width: 0; }
  .resource-action--quiet { grid-column: span 2; }
  .resource-status { grid-column: span 2; }
  .resources-bridge__links { display: grid; width: 100%; }
  .resources-bridge__links .sci-button { text-align: center; }
}

@media print {
  body.science-resources-page > * { display: none !important; }
  body.science-resources-page > .resource-print-sheet { background: #fff; color: #142238; display: block !important; font-family: Georgia, serif; min-height: auto; padding: 0; }
  .resource-print-sheet h1 { font-family: Georgia, serif; font-size: 26pt; line-height: 1; margin: 0 0 5mm; }
  .resource-print-sheet h2 { color: #214e78; font-size: 13pt; margin: 0 0 4mm; }
  .resource-print-sheet p { font-size: 11pt; line-height: 1.42; margin: 0 0 4mm; }
  .resource-print-sheet__meta { border-block: 1px solid #aab9c5; color: #44546a; font-family: Arial, sans-serif; font-size: 8.5pt; margin: 6mm 0; padding: 3mm 0; }
  .resource-print-sheet__visual { border: 1px solid #b7c5d0; display: block; height: auto; margin: 5mm 0; max-width: 100%; }
  .resource-print-sheet__note { background: #f5f7f9; border-left: 3px solid #a65a5f; margin-top: 6mm; padding: 4mm; white-space: pre-wrap; }
  .resource-print-sheet__limit { color: #44546a; font-size: 9pt; }
}