/* ============================================================
   wp.css — lo que añade WordPress al sitio

   El diseño es el de las páginas estáticas (los demás archivos de
   esta carpeta). Aquí solo va lo que no existía allí: el contenido
   de las páginas antiguas del panel, la página 404 y la barra de
   administración.
   ============================================================ */

/* --- Barra de administración -------------------------------- */
/* La cabecera es pegajosa; con la barra negra de WordPress arriba
   (solo la ven quienes iniciaron sesión) baja lo que mide la barra. */
.admin-bar .masthead { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .masthead { top: 46px; }
}
@media (max-width: 600px) {
  .admin-bar .masthead { top: 0; }
}

/* --- Encabezado sin foto ------------------------------------- */
.pagehead--simple .pagehead__inner { grid-template-columns: 1fr; }
.pagehead--simple .pagehead__title { max-width: 22ch; }

/* --- Contenido de las páginas antiguas ----------------------- */
.prose {
  max-width: 46rem;
  margin-inline: auto;
  color: var(--ink-soft, var(--ink));
}
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-2); margin-top: 1.6em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.4em; }
.prose a { color: var(--rojo-ink); text-decoration: underline; text-underline-offset: 0.18em; }
.prose ul,
.prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.35em; }
.prose img,
.prose video,
.prose iframe {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}
.prose iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: 0.4em; font-size: var(--step--1); color: var(--muted); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.prose th,
.prose td { padding: 0.6em 0.8em; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--surface-2); }
.prose blockquote {
  margin-inline: 0;
  padding-left: 1em;
  border-left: 3px solid var(--mostaza);
  color: var(--muted);
}

/* Alineaciones del editor de WordPress. */
.prose .aligncenter { display: block; margin-inline: auto; }
.prose .alignleft { float: left; margin: 0.3em 1.2em 0.8em 0; }
.prose .alignright { float: right; margin: 0.3em 0 0.8em 1.2em; }
.prose .alignwide,
.prose .alignfull { max-width: none; }
.prose::after { content: ""; display: table; clear: both; }
.prose .wp-block-button__link {
  display: inline-block;
  padding: 0.7em 1.3em;
  border-radius: var(--r-full);
  background: var(--rojo);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.prose .wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.5em; }
.prose .wp-block-column { flex: 1 1 14rem; }
.prose .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75em; }

@media (max-width: 600px) {
  .prose .alignleft,
  .prose .alignright { float: none; margin: 0 0 1em; }
}

/* --- Lista de entradas (si queda algún blog) ----------------- */
.entradas { display: grid; gap: 1.25rem; max-width: 46rem; margin-inline: auto; padding: 0; list-style: none; }
.entrada { padding: 1.25rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.entrada__fecha { font-size: var(--step--1); color: var(--muted); }
.entrada__titulo { font-size: var(--step-1); margin-top: 0.25rem; }
.entrada__titulo a { color: inherit; text-decoration: none; }
.entrada__titulo a:hover { color: var(--rojo-ink); }
.entradas__paginas { margin-top: 2rem; text-align: center; }

/* --- Página no encontrada ------------------------------------ */
.obra {
  background:
    radial-gradient(60% 50% at 0% 0%, var(--mostaza-tint), transparent 68%),
    radial-gradient(55% 45% at 100% 100%, var(--rojo-tint), transparent 70%),
    var(--surface);
}
.obra__inner {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1.25rem;
  min-height: 52vh;
  text-align: center;
}
.obra__title { font-size: var(--step-4); }
.obra__inner .lede { max-width: 42rem; }
.obra__actions { justify-content: center; margin-top: 0.75rem; }
.obra__volver { margin-top: 0.5rem; }

/* --- Botón de PSE -------------------------------------------- */
/* Aparece solo cuando hay enlace en Ajustes del colegio. */
.canales__pse { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }