/* ==========================================================================
   SIAB · Colección pública de primer uso
   Pantalla: lectura cómoda. Impresión: A4, portada a sangre completa.
   ========================================================================== */
:root {
  --pu-bg: #070d1a;
  --pu-panel: #0d1627;
  --pu-panel-2: #111d33;
  --pu-ink: #0b1220;
  --pu-text: #eaf2ff;
  --pu-muted: #9fb0c9;
  --pu-soft: #c9d6e8;
  --pu-line: rgba(148, 178, 219, 0.18);
  --pu-violet: #7c3aed;
  --pu-violet-soft: #c4b5fd;
  --pu-mint: #6ee7b7;
  --pu-amber: #fbbf24;
  --pu-danger: #fb7185;
  --pu-white: #ffffff;
  --pu-radius: 18px;
  --pu-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --pu-font: "Segoe UI", "Helvetica Neue", Arial, "DejaVu Sans", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--pu-bg);
  color: var(--pu-text);
  font-family: var(--pu-font);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pu-violet-soft); text-underline-offset: 3px; }
a:hover { color: #ddd6fe; }
img { max-width: 100%; height: auto; }
strong { color: var(--pu-white); }

/* ---------- Barra pública ---------- */
.pu-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 42px);
  background: rgba(7, 13, 26, 0.88);
  border-bottom: 1px solid var(--pu-line);
  backdrop-filter: blur(18px);
}
.pu-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--pu-text); }
.pu-brand img { width: 40px; height: 40px; object-fit: contain; }
.pu-brand span { display: grid; line-height: 1.15; }
.pu-brand strong { font-size: 0.98rem; letter-spacing: 0.02em; }
.pu-brand small { color: var(--pu-muted); font-size: 0.72rem; }
.pu-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.82rem; }
.pu-nav a { color: var(--pu-muted); text-decoration: none; padding: 6px 2px; }
.pu-nav a:hover, .pu-nav a[aria-current="page"] { color: var(--pu-white); }
.pu-nav .pu-nav-cta {
  color: var(--pu-white);
  border: 1px solid rgba(196, 181, 253, 0.36);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.18);
}

/* ---------- Contenedor de lectura ---------- */
.pu-shell { width: min(1120px, 100%); margin: 0 auto; padding: 0 clamp(16px, 4vw, 42px) 64px; }
.pu-doc { width: min(940px, 100%); margin: 0 auto; padding: 44px 0 20px; }
.pu-doc > section, .pu-doc > div.pu-block { margin: 0 0 30px; }
.pu-kicker {
  margin: 0 0 10px;
  color: var(--pu-violet-soft);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pu-title { margin: 0 0 12px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.06; letter-spacing: -0.035em; }
.pu-lead { margin: 0; color: var(--pu-soft); font-size: clamp(1rem, 1.4vw, 1.16rem); max-width: 68ch; }
.pu-doc h2 { margin: 42px 0 12px; font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.18; letter-spacing: -0.02em; }
.pu-doc h3 { margin: 26px 0 8px; font-size: 1.12rem; line-height: 1.3; }
.pu-doc h4 { margin: 20px 0 6px; font-size: 1rem; color: var(--pu-white); }
.pu-doc p { margin: 0 0 12px; color: var(--pu-soft); }
.pu-doc ul, .pu-doc ol { margin: 0 0 16px 1.15rem; padding: 0; color: var(--pu-soft); }
.pu-doc li { margin: 5px 0; }
.pu-doc li > strong { color: var(--pu-white); }

/* ---------- Portada imprimible ---------- */
.cover {
  position: relative;
  width: 210mm;
  height: 297mm;
  margin: 0;
  padding: 24mm 20mm 20mm;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  page: cover;
  page-break-after: always;
  background:
    radial-gradient(700px 380px at 100% 0%, rgba(124, 58, 237, 0.42), transparent 62%),
    radial-gradient(620px 340px at 0% 100%, rgba(52, 211, 200, 0.16), transparent 60%),
    #070d1a;
  font-family: var(--pu-font);
}
.cover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10mm;
  background: linear-gradient(90deg, #6d28d9, #7c3aed 55%, #a78bfa);
}
.cover .cover-logos { display: flex; align-items: center; gap: 14px; }
.cover .cover-logos img.ms { width: 102px; height: auto; }
.cover .cover-logos .sep { width: 1px; height: 34px; background: rgba(255,255,255,.38); }
.cover .cover-logos img.siab { width: 200px; height: auto; }
.cover .cover-body { margin-top: 8mm; }
.cover .kicker {
  margin: 0 0 12px;
  color: #c4b5fd;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 9pt;
  font-weight: 800;
}
.cover h1 { margin: 0 0 10px; color: #fff; font-size: 34pt; line-height: 1.04; letter-spacing: -0.03em; }
.cover .sub { margin: 0; max-width: 155mm; color: #dbe4f2; font-size: 13pt; line-height: 1.4; }
.cover .institution { margin: 18px 0 0; color: #6ee7b7; font-size: 11pt; font-weight: 700; }
.cover .cover-tag {
  display: inline-flex;
  width: fit-content;
  margin: 18px 0 0;
  padding: 5px 12px;
  border: 1px solid rgba(196,181,253,.42);
  border-radius: 999px;
  color: #ddd6fe;
  font-size: 9pt;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cover .meta { color: #aab8cc; font-size: 9.5pt; line-height: 1.55; }
.cover .meta strong { color: #e2e8f0; }
.cover .meta .confidential { color: #fca5a5; }
.cover .cover-index {
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
  color: #c9d6e8;
  font-size: 9pt;
}

/* Portada en pantalla: misma proporción, sin desbordar el móvil. */
@media screen {
  .cover {
    width: 100%;
    max-width: 720px;
    height: auto;
    aspect-ratio: 210 / 297;
    margin: 34px auto 0;
    padding: clamp(22px, 5vw, 46px);
    padding-bottom: max(clamp(22px, 5vw, 46px), 54px);
    border-radius: 24px;
    box-shadow: var(--pu-shadow);
  }
  .cover h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
  .cover .sub { font-size: clamp(.95rem, 1.8vw, 1.1rem); }
  .cover .cover-index { display: none; }
}

/* ---------- Bloques didácticos ---------- */
.pu-step {
  position: relative;
  margin: 22px 0;
  padding: 20px 22px 18px 64px;
  border: 1px solid var(--pu-line);
  border-radius: var(--pu-radius);
  background: linear-gradient(180deg, rgba(17, 29, 51, 0.94), rgba(10, 18, 32, 0.94));
}
.pu-step-num {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  font-size: .82rem;
  font-weight: 800;
}
.pu-step h3 { margin: 0 0 8px; font-size: 1.08rem; }
.pu-step .pu-do, .pu-step .pu-why, .pu-step .pu-for, .pu-step .pu-check { margin: 8px 0 0; font-size: .94rem; }
.pu-step .pu-do::before { content: "Qué hacer"; display: block; color: var(--pu-violet-soft); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px; }
.pu-step .pu-for::before { content: "Para qué"; display: block; color: var(--pu-mint); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px; }
.pu-step .pu-why::before { content: "Por qué"; display: block; color: var(--pu-amber); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px; }
.pu-step .pu-check { padding-top: 9px; border-top: 1px dashed var(--pu-line); color: var(--pu-muted); }
.pu-step .pu-check strong { color: var(--pu-mint); }

.pu-callout {
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 4px solid var(--pu-violet);
  border-radius: 0 12px 12px 0;
  background: rgba(124, 58, 237, .12);
  color: var(--pu-soft);
  font-size: .94rem;
}
.pu-callout.warn { border-color: var(--pu-amber); background: rgba(251, 191, 36, .09); }
.pu-callout.danger { border-color: var(--pu-danger); background: rgba(251, 113, 133, .09); }
.pu-callout strong { display: block; margin-bottom: 3px; color: var(--pu-white); }

.pu-grid { display: grid; gap: 14px; }
.pu-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pu-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pu-grid .pu-card {
  padding: 18px;
  border: 1px solid var(--pu-line);
  border-radius: 16px;
  background: rgba(13, 22, 39, .86);
}
.pu-card h3 { margin: 0 0 6px; font-size: 1rem; }
.pu-card p { margin: 0; font-size: .9rem; color: var(--pu-muted); }
.pu-card .pu-card-label { color: var(--pu-violet-soft); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.pu-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .9rem; table-layout: fixed; }
.pu-table th, .pu-table td { padding: 10px 12px; border-bottom: 1px solid var(--pu-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.pu-table th { color: var(--pu-white); background: rgba(124, 58, 237, .14); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
.pu-table td { color: var(--pu-soft); }

.pu-check-list { list-style: none; margin: 14px 0; padding: 0; }
.pu-check-list li { position: relative; margin: 7px 0; padding-left: 27px; color: var(--pu-soft); font-size: .94rem; }
.pu-check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--pu-mint); font-weight: 900; }

.pu-route { display: grid; gap: 12px; margin: 20px 0; }
.pu-route-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--pu-line);
  border-radius: 14px;
  background: rgba(13, 22, 39, .8);
}
.pu-route-step > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(124,58,237,.22); color: #ddd6fe; font-weight: 800; font-size: .82rem; }
.pu-route-step h3 { margin: 0 0 3px; font-size: .98rem; }
.pu-route-step p { margin: 0; color: var(--pu-muted); font-size: .88rem; }

.pu-role {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(110, 231, 183, .24);
  color: var(--pu-mint);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pu-meta { color: var(--pu-muted); font-size: .82rem; }
.pu-divider { height: 1px; margin: 30px 0; background: var(--pu-line); }
.pu-footer { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--pu-line); color: var(--pu-muted); font-size: .8rem; }
.pu-footer strong { color: var(--pu-soft); }

/* Enlaces de descarga / navegación de documento */
.pu-doc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.pu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 700;
}
.pu-btn:hover { color: #fff; filter: brightness(1.08); }
.pu-btn.ghost { color: var(--pu-text); background: transparent; border-color: var(--pu-line); }
.pu-btn.ghost:hover { border-color: rgba(196,181,253,.48); }
.pu-next { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }

/* ==========================================================================
   Impresión
   ========================================================================== */
@page { size: A4; margin: 18mm 16mm 15mm; }
@page cover { size: A4; margin: 0; }

@media print {
  html, body { background: #fff ; color: #111827; font-size: 10.5pt; }
  .pu-topbar, .pu-nav, .pu-doc-actions, .pu-next, .pu-footer, .screen-only { display: none ; }
  .pu-shell { width: auto; margin: 0; padding: 0; }
  .pu-doc { width: auto; max-width: none; margin: 0; padding: 0; }
  .pu-doc h1, .pu-doc h2, .pu-doc h3, .pu-doc h4 { color: #0b1220; }
  .pu-doc p, .pu-doc li { color: #263449; }
  .pu-doc h2 { margin: 22pt 0 8pt; font-size: 18pt; page-break-after: avoid; }
  .pu-doc h3 { margin: 15pt 0 5pt; font-size: 13pt; page-break-after: avoid; }
  .pu-kicker { color: #5b21b6; font-size: 8pt; }
  .pu-lead { color: #263449; }
  .cover { page: cover; width: 210mm; height: 297mm; margin: 0; border-radius: 0; box-shadow: none; }
  .pu-step { break-inside: avoid; border-color: #d8deea; background: #f8faff; }
  .pu-step .pu-do::before { color: #5b21b6; }
  .pu-step .pu-for::before { color: #047857; }
  .pu-step .pu-why::before { color: #b45309; }
  .pu-step .pu-check { color: #4b5b72; border-color: #d8deea; }
  .pu-callout { border-color: #7c3aed; background: #f3efff; color: #263449; }
  .pu-callout.warn { border-color: #b45309; background: #fff7e6; }
  .pu-callout.danger { border-color: #be123c; background: #fff1f2; }
  .pu-grid .pu-card, .pu-route-step { border-color: #d8deea; background: #fff; }
  .pu-card p, .pu-route-step p, .pu-meta { color: #4b5b72; }
  .pu-table th { background: #efe7ff; color: #2e1065; }
  .pu-table td { color: #263449; border-color: #d8deea; }
  .pu-check-list li { color: #263449; }
  .pu-divider { background: #d8deea; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Biblioteca pública ---------- */
.pu-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 22px 0;
}
.pu-library-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--pu-line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(17, 29, 51, .92), rgba(10, 18, 32, .96));
}
.pu-library-cover { display: block; aspect-ratio: 210 / 297; overflow: hidden; background: #0b1220; }
.pu-library-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.pu-library-card:hover .pu-library-cover img { transform: scale(1.025); }
.pu-library-copy { display: flex; flex-direction: column; flex: 1; padding: 15px 16px 16px; }
.pu-library-num { color: var(--pu-violet-soft); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.pu-library-copy h3 { margin: 6px 0 6px; font-size: 1.02rem; line-height: 1.25; }
.pu-library-copy h3 a { color: var(--pu-white); text-decoration: none; }
.pu-library-copy p { color: var(--pu-muted); font-size: .84rem; flex: 1; margin: 0 0 12px; }
.pu-library-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.pu-btn.small { min-height: 32px; padding: 6px 12px; font-size: .78rem; }

@media screen and (max-width: 860px) {
  .pu-grid.two, .pu-grid.three { grid-template-columns: 1fr; }
  .pu-nav { gap: 4px 10px; }
  .pu-nav a { font-size: .76rem; }
  .pu-doc { padding-top: 25px; }
}
@media screen and (max-width: 560px) {
  .pu-topbar { align-items: flex-start; padding: 12px 14px; }
  .pu-brand small { display: none; }
  .pu-nav .pu-nav-cta { display: none; }
  .pu-step { padding: 52px 16px 16px; }
  .pu-step-num { top: 14px; left: 16px; }
  .pu-library { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pu-library-copy { padding: 11px; }
  .pu-library-copy h3 { font-size: .9rem; }
  .pu-library-copy p { display: none; }
}
@media print {
  .pu-library, .pu-doc-actions, .pu-next { display: none ; }
}


@media screen and (max-width: 560px) {
  /* La quinta portada queda centrada y no deja un hueco a la derecha. */
  .pu-library-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 5px);
    justify-self: center;
  }
}

/* Portada en móvil: se deja crecer para no recortar el pie de la portada. */
@media screen and (max-width: 560px) {
  .cover {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    padding: 22px 20px 62px;
    border-radius: 20px;
  }
  .cover .cover-logos { gap: 9px; }
  .cover .cover-logos img.ms { width: 70px; }
  .cover .cover-logos img.siab { width: 145px; }
  .cover .cover-logos .sep { height: 24px; }
  .cover .cover-body { margin-top: 6px; }
  .cover .kicker { margin-bottom: 7px; font-size: 8px; letter-spacing: .14em; }
  .cover h1 { margin-bottom: 8px; font-size: 30px; }
  .cover .sub { font-size: 13px; line-height: 1.32; }
  .cover .institution { margin-top: 12px; font-size: 10.5px; }
  .cover .cover-tag { margin-top: 10px; padding: 4px 9px; font-size: 8px; }
  .cover .meta { margin-top: 18px; font-size: 8.5px; line-height: 1.4; }
  .cover .cover-index { display: none; }
  .pu-brand strong { font-size: .9rem; white-space: nowrap; }
}

/* Marcas institucionales: SIAB + MindStorms.Lab en cabecera y pie. */
.pu-brand-logos {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}
.pu-brand-logos img { display: block; width: auto; object-fit: contain; }
.pu-brand-logos .pu-logo-si { height: 38px; }
.pu-brand-logos .pu-logo-ms { height: 26px; max-width: 112px; }
.pu-footer-logos { display: inline-flex; align-items: center; gap: 7px; margin-right: 8px; vertical-align: middle; }
.pu-footer-logos img { height: 17px; width: auto; object-fit: contain; }
.pu-footer-logos img + img { height: 14px; }
@media (max-width: 620px) {
  .pu-brand-logos .pu-logo-ms { height: 22px; max-width: 92px; }
  .pu-brand-logos .pu-logo-si { height: 32px; }
}
@media print {
  .pu-brand-logos .pu-logo-ms { filter: grayscale(1); }
}