/*
Theme Name: Entre Tizas
Theme URI: https://entretizas.org
Description: Tema de Entre Tizas: pizarra de aula, tizas de colores y marco de madera. Sin JavaScript, sin peticiones a terceros y con el marcado que necesitan buscadores y asistentes. Hecho a partir de la identidad de marca del proyecto.
Author: Entre Tizas
Version: 1.0.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: entretizas
*/

/* ─────────────────────────── la paleta ───────────────────────────
   Los nombres son los de la guía de marca. No se inventa ninguno: si mañana
   hace falta un color más, se añade allí primero y aquí después. */

:root {
  --pizarra:       #172821;   /* fondo, la pizarra de bosque profundo */
  --pizarra-honda: #0f1c16;   /* pozos de sombra */
  --sol:           #FFE66D;   /* tiza amarilla: lo que manda en la página */
  --menta:         #A8E6CF;   /* infantil 0-6 */
  --coral:         #FF8B94;   /* escuela de familias */
  --brisa:         #93C5FD;   /* primaria */
  --lavanda:       #C7B9FF;   /* primaria superior */
  --tiza:          #F8FAF8;   /* texto */
  --tiza-tenue:    #cbd6d0;   /* texto secundario */
  --madera:        #8B5A2B;   /* marcos y bandeja */
  --madera-clara:  #A06D3B;
  --madera-honda:  #593512;

  --letra-mano:  'Caveat', 'Segoe Script', cursive;
  --letra-rotu:  'Fredoka', system-ui, sans-serif;
  --letra-texto: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --ancho: 68rem;
  --ancho-lectura: 40rem;
  --radio: 14px;
  --sombra: 0 10px 30px -12px rgba(0,0,0,.6);
}

/* Las fuentes se sirven desde el propio dominio: ni una petición a Google, que
   es una petición menos, un salto de DNS menos y un problema de privacidad
   menos. Se cargan con swap para que el texto se lea desde el primer momento. */
@font-face { font-family: 'Caveat'; src: url('fuentes/caveat.woff2') format('woff2');
  font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('fuentes/fredoka.woff2') format('woff2');
  font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('fuentes/jakarta.woff2?v=2') format('woff2');
  font-weight: 200 800; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--letra-texto);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tiza);
  background-color: var(--pizarra);
  /* La textura de pizarra es CSS puro: cuatro degradados y una retícula de un
     píxel. Cero imágenes que descargar y se ve igual en cualquier pantalla. */
  background-image:
    radial-gradient(circle at 50% 30%, rgba(40,75,60,.40) 0%, transparent 70%),
    radial-gradient(circle at 80% 80%, rgba(25,45,36,.60) 0%, transparent 60%),
    radial-gradient(circle at 10% 90%, rgba(30,60,48,.30) 0%, transparent 50%),
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 0);
  background-size: 100% 100%, 100% 100%, 100% 100%, 24px 24px;
  background-attachment: fixed;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--sol); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 { font-family: var(--letra-rotu); font-weight: 600; line-height: 1.2;
  margin: 0 0 .5em; color: var(--tiza); }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); margin-top: 2em; }
h3 { font-size: 1.22rem; margin-top: 1.6em; }

p, ul, ol { margin: 0 0 1.15em; }
blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--sol);
  font-family: var(--letra-mano); font-size: 1.35rem; line-height: 1.45; color: var(--sol); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
hr { border: 0; border-top: 1px dashed rgba(248,250,248,.25); margin: 2.5em 0; }

.contenedor { width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto; }
.a-lectura { width: min(var(--ancho-lectura), 100%); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--sol); color: var(--pizarra);
  padding: .6rem 1rem; border-radius: 8px; font-family: var(--letra-rotu); }

/* ─────────────────────────── el marco de madera ───────────────────────────
   La cabecera y el pie son la moldura de la pizarra. El degradado imita la veta
   y las sombras interiores le dan el grosor de una tabla de verdad. */

.marco {
  background: linear-gradient(135deg, var(--madera) 0%, var(--madera-clara) 25%,
              #6E441D 50%, var(--madera) 75%, var(--madera-honda) 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.2), inset 0 -3px 6px rgba(0,0,0,.5),
              0 10px 25px -5px rgba(0,0,0,.5);
}

.cabecera { position: relative; }
.cabecera .marco { padding: .55rem 0; }
.cabecera-cuerpo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  padding: 1.4rem 0 1.1rem; }

.marca { display: inline-flex; flex-direction: column; text-decoration: none; }
.marca-nombre { font-family: var(--letra-mano); font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1; color: var(--sol); }
.marca-lema { font-family: var(--letra-texto); font-size: .82rem; color: var(--tiza-tenue);
  margin-top: .35rem; max-width: 34ch; }

.menu { margin-left: auto; }
.menu ul { display: flex; flex-wrap: wrap; gap: .35rem .55rem; list-style: none; margin: 0; padding: 0; }
.menu a { display: inline-block; padding: .4rem .85rem; border-radius: 999px; font-family: var(--letra-rotu);
  font-size: .95rem; text-decoration: none; color: var(--tiza);
  border: 1px solid rgba(248,250,248,.22); }
.menu a:hover, .menu .current-menu-item > a { background: rgba(255,230,109,.14);
  border-color: var(--sol); color: var(--sol); }

/* ─────────────────────────── etapas ───────────────────────────
   Cada etapa educativa tiene su color de tiza, como en la guía. Se aplica con
   una clase en el elemento, no con un estilo suelto, para que un cambio de
   paleta se haga en un sitio. */

.et-menta   { --tiza-etapa: var(--menta); }
.et-sol     { --tiza-etapa: var(--sol); }
.et-brisa   { --tiza-etapa: var(--brisa); }
.et-lavanda { --tiza-etapa: var(--lavanda); }
.et-coral   { --tiza-etapa: var(--coral); }

.etiqueta { display: inline-block; font-family: var(--letra-rotu); font-size: .78rem;
  letter-spacing: .02em; padding: .18rem .7rem; border-radius: 999px;
  color: var(--tiza-etapa, var(--sol)); border: 1px solid currentColor;
  text-decoration: none; }

/* ─────────────────────────── portada ─────────────────────────── */

.pizarra-hero { padding: 3.2rem 0 2.4rem; text-align: center; }
.pizarra-hero h1 { font-family: var(--letra-mano); font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem);
  color: var(--sol); margin-bottom: .3em; }
.pizarra-hero p { color: var(--tiza-tenue); max-width: 46ch; margin-inline: auto; }

.rejilla { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.tarjeta {
  position: relative; padding: 1.3rem 1.2rem 1.4rem; border-radius: var(--radio);
  background: rgba(255,255,255,.035); border: 1px solid rgba(248,250,248,.14);
  box-shadow: var(--sombra);
}
.tarjeta h3 { margin: .45rem 0 .35rem; font-size: 1.1rem; }
.tarjeta h3 a { color: var(--tiza); text-decoration: none; }
.tarjeta h3 a:hover { color: var(--tiza-etapa, var(--sol)); }
.tarjeta p { color: var(--tiza-tenue); font-size: .95rem; margin: 0; }
.tarjeta .etiqueta { color: var(--tiza-etapa, var(--sol)); }
.tarjeta::after { content: ""; position: absolute; inset: auto 1.2rem 0 1.2rem; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--tiza-etapa, transparent); opacity: .5; }

.mural { margin: 2.6rem 0 3rem; }
.mural h2 { font-family: var(--letra-mano); font-size: 2.1rem; color: var(--sol); margin-bottom: .6em; }

/* ─────────────────────────── entradas ─────────────────────────── */

.entrada { padding: 2.4rem 0 3rem; }
.entrada-cabecera { margin-bottom: 1.8rem; }
.entrada-datos { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
  font-size: .85rem; color: var(--tiza-tenue); }
.entrada-cuerpo { font-size: 1.09rem; }
.entrada-cuerpo img { border-radius: var(--radio); margin: 1.6em auto; }
.entrada-cuerpo figcaption { font-size: .85rem; color: var(--tiza-tenue); text-align: center;
  margin-top: .5em; }

/* Las cajas didácticas de la guía de marca. Son shortcodes, no bloques de
   Gutenberg, y es a propósito: un bloque obliga a JavaScript compilado y a
   mantener una build; un shortcode se escribe igual de rápido, se ve igual y
   no añade ni un kilobyte al navegador. */

.caja { margin: 1.9em 0; padding: 1.25rem 1.35rem; border-radius: var(--radio);
  border: 1px solid; background: rgba(255,255,255,.04); }
.caja > :last-child { margin-bottom: 0; }
.caja-titulo { font-family: var(--letra-rotu); font-size: .95rem; letter-spacing: .04em;
  text-transform: uppercase; margin: 0 0 .55rem; }

.caja-objetivos  { border-color: rgba(168,230,207,.45); }
.caja-objetivos  .caja-titulo { color: var(--menta); }
.caja-materiales { border-color: rgba(147,197,253,.45); }
.caja-materiales .caja-titulo { color: var(--brisa); }

/* El consejo de aula va como el post-it de la guía: papel amarillo, girado y con
   chincheta. La chincheta es un pseudoelemento, no una imagen. */
.caja-consejo {
  background: var(--sol); color: #2a2410; border-color: rgba(0,0,0,.15);
  transform: rotate(-.6deg); box-shadow: 0 12px 24px -14px rgba(0,0,0,.8);
}
.caja-consejo .caja-titulo { color: #6b5a12; }
.caja-consejo a { color: #6b4f00; }
.caja-consejo::before { content: ""; position: absolute; }
.caja-consejo { position: relative; }
.caja-consejo::after {
  content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff9aa2, #c94f5b 70%);
  box-shadow: 0 3px 6px rgba(0,0,0,.5);
}

.caja-pauta { border-color: rgba(255,139,148,.5); background: rgba(255,139,148,.10); }
.caja-pauta .caja-titulo { color: var(--coral); }

.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 1.8em 0; }
.pasos > li { counter-increment: paso; position: relative; padding-left: 3.1rem; margin-bottom: 1.1em; }
.pasos > li::before {
  content: counter(paso); position: absolute; left: 0; top: -.15em;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  font-family: var(--letra-mano); font-size: 1.5rem; color: var(--pizarra);
  background: var(--sol); border-radius: 50% 45% 52% 48%;   /* trazo de tiza, nunca un círculo exacto */
}

.descargable { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin: 2em 0; padding: 1.1rem 1.2rem; border-radius: var(--radio);
  background: rgba(139,90,43,.16); border: 1px solid rgba(160,109,59,.5); }
.descargable p { margin: 0; }
.boton-madera { display: inline-block; padding: .7rem 1.3rem; border-radius: 10px;
  font-family: var(--letra-rotu); text-decoration: none; color: #fff8ec;
  background: linear-gradient(135deg, var(--madera) 0%, var(--madera-clara) 50%, var(--madera-honda) 100%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.25), 0 6px 14px -8px rgba(0,0,0,.8); }
.boton-madera:hover { filter: brightness(1.08); }

/* ─────────────────────────── listados y paginación ─────────────────────────── */

.listado { padding: 2.2rem 0 3rem; }
.listado-cabecera { margin-bottom: 1.8rem; }
.listado-cabecera h1 { font-family: var(--letra-mano); color: var(--sol); }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }

.paginacion { display: flex; flex-wrap: wrap; gap: .4rem; margin: 2.5rem 0 0; }
.paginacion .page-numbers { display: inline-block; padding: .4rem .8rem; border-radius: 8px;
  text-decoration: none; color: var(--tiza); border: 1px solid rgba(248,250,248,.2); }
.paginacion .current { background: var(--sol); color: var(--pizarra); border-color: var(--sol); }

/* ─────────────────────────── buscador ─────────────────────────── */

.buscador { display: flex; gap: .5rem; }
.buscador input[type=search] { flex: 1; min-width: 0; padding: .6rem .9rem; border-radius: 10px;
  border: 1px solid rgba(248,250,248,.25); background: rgba(0,0,0,.25); color: var(--tiza);
  font-family: var(--letra-texto); font-size: 1rem; }
.buscador input[type=search]::placeholder { color: rgba(203,214,208,.7); }
.buscador button { padding: .6rem 1.1rem; border: 0; border-radius: 10px; cursor: pointer;
  font-family: var(--letra-rotu); background: var(--sol); color: var(--pizarra); }

/* ─────────────────────────── pie ─────────────────────────── */

.pie { margin-top: 3rem; }
.pie-cuerpo { display: grid; gap: 1.5rem; padding: 2.2rem 0 2.6rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pie h2 { font-family: var(--letra-rotu); font-size: 1rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--sol); margin: 0 0 .7rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .35rem; }
.pie a { color: var(--tiza-tenue); text-decoration: none; }
.pie a:hover { color: var(--sol); text-decoration: underline; }
.pie-abajo { padding: 1rem 0 1.6rem; font-size: .85rem; color: var(--tiza-tenue);
  border-top: 1px dashed rgba(248,250,248,.18); }

/* La bandeja de tizas del pie: siete trazos de color, que son los de la marca. */
.bandeja { display: flex; gap: .35rem; margin: .9rem 0 0; }
.bandeja span { display: block; width: 2.4rem; height: .5rem; border-radius: 3px; opacity: .85; }

@media (max-width: 640px) {
  .cabecera-cuerpo { padding-top: 1.1rem; }
  .menu { margin-left: 0; width: 100%; }
  .pizarra-hero { padding: 2.2rem 0 1.6rem; }
}

@media print {
  body { background: #fff; color: #111; }
  .cabecera, .pie, .menu, .paginacion { display: none; }
  a { color: #111; }
}