/* guía didáctica table: each row's download cell is one icon-link (the
   student worksheet - same .guide-print-icon used throughout, already on
   brand) plus a small de-emphasized text link to the teacher's solutions,
   NOT a second equal-weight icon - this is a page any visitor can open, so
   the answer key stays available but never as prominent as the worksheet
   itself. */

#materiales { scroll-margin-top: 20px; }

/* Reference-page layout, like the SEO article pages and blog.html: no
   full-screen blackboard hero, the nav sits right above the content.
   .menu-screen otherwise reserves the whole viewport for a .board-area
   this page no longer has (same override shared/article.css uses). */
.menu-screen.article-top { min-height: 0; }

/* The four-column table needs more room than prose does. */
.guide-main .explainer-inner { max-width: 980px; }
/* Intro prose in the readable font, like the table below it. */
.guide-main .explainer-inner > p { font-family: var(--am-readable-font); }

.guide-pdf-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0;
}

.guide-pdf-pair .guide-print-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
  font-size: 13px;
  text-decoration: none;
}
.guide-pdf-pair .guide-print-icon { width: 40px; height: 40px; }
.guide-pdf-pair .guide-print-link span { display: block; }

/* The table sits inside the teal .explainer, whose "a { color: #fff }"
   would otherwise paint these labels white on the white table. */
.guide-table .guide-print-link { color: var(--purple-dark); }

.guide-table .guide-teacher-link {
  font-size: 11.5px;
  color: #847d99;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.guide-table .guide-teacher-link:hover { color: var(--purple-dark); }

/* Level names that are links (e.g. Islas) - same white-on-white trap. */
.guide-table .guide-lvl a { color: inherit; }

/* "Todos los niveles / Solo con fichas PDF" toggle above the table: the
   active one is the normal green pill, the inactive one an outline on the
   teal block, so which view you're in is obvious at a glance. */
.guide-filter { margin: 18px 0 0; }
.guide-filter .age-chip {
  min-height: 44px;
  font-size: clamp(14px, 2vw, 17px);
  padding: 8px 20px;
}
.guide-filter .age-chip[aria-pressed="false"] {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75);
}
.guide-filter .age-chip[aria-pressed="false"]:hover { background: rgba(255, 255, 255, .15); }

/* Phones: fit all four columns (above all the Material one, the point of
   the PDF filter) without a sideways scroll inside the table. */
@media (max-width: 599.98px) {
  .guide-table thead th { white-space: normal; padding: 9px 8px; font-size: 10.5px; letter-spacing: 0; }
  .guide-table tbody td, .guide-table tbody th { padding: 9px 8px; }
  .guide-table .guide-print { white-space: normal; }
  .guide-pdf-pair { flex-direction: column; gap: 4px; }
  .guide-table { font-size: 13.5px; }
  .guide-pdf-pair .guide-print-link { font-size: 11px; }
  .guide-pdf-pair .guide-print-icon { width: 34px; height: 34px; }
  .guide-table .guide-teacher-link { font-size: 10.5px; }
}