:root{
  --crema:#FFFCF2;
  --crema-card:#FCEFC7;
  --lila:#C8B3E3;
  --lila-soft:#E4D8F2;
  --lila-strong:#7A5CA5;
  --amarillo:#F2C94C;
  --amarillo-soft:#F8E3A3;
  --tinta:#3E3548;
  --tinta-suave:#6E6478;
  --menta:#BFE3D0;
  --radio:26px;
  --sombra:0 8px 0 rgba(122,92,165,.10), 0 16px 34px rgba(122,92,165,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:"Trebuchet MS","Segoe UI Rounded",Verdana,system-ui,sans-serif;
  line-height:1.6;font-size:19px;-webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--lila-strong)}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
code{background:var(--lila-soft);padding:2px 7px;border-radius:6px;font-size:.9em}

/* ---------- Header ---------- */
header.top{position:sticky;top:0;z-index:20;background:rgba(255,252,242,.92);backdrop-filter:blur(8px);border-bottom:3px solid var(--lila-soft)}
.top-inner{display:flex;align-items:center;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:bold;font-size:1.3rem;color:var(--tinta);text-decoration:none}
.brand .logo{width:52px;height:52px;border-radius:50%;background:#FFF6DA;display:grid;place-items:center;box-shadow:0 5px 0 var(--amarillo);flex:none}
nav.main{margin-left:auto;display:flex;gap:8px}
nav.main a{text-decoration:none;color:var(--tinta);font-weight:bold;padding:10px 16px;border-radius:999px;font-size:1.02rem;display:flex;align-items:center;gap:8px}
nav.main a:hover,nav.main a:focus-visible{background:var(--lila-soft);outline:none}
nav.main a .em{font-size:1.15rem}

/* ---------- Flash ---------- */
.flashes{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.flash{padding:14px 20px;border-radius:16px;font-weight:bold;box-shadow:var(--sombra)}
.flash-ok{background:var(--menta);color:#1c5a3a}
.flash-error{background:#F7C9C9;color:#8a2b2b}

/* ---------- Hero ---------- */
.hero{padding:38px 0 10px;text-align:center}
.hero.mini{padding:28px 0 6px}
.hola{display:inline-block;background:var(--amarillo-soft);color:#8a6d12;font-weight:bold;padding:8px 20px;border-radius:999px;font-size:1rem}
.hero h1{font-size:clamp(2rem,5.2vw,3.2rem);margin:.4em 0 .1em;line-height:1.1;text-wrap:balance}
.hero p.sub{font-size:1.2rem;color:var(--tinta-suave);margin:.2em auto 0;max-width:40ch}

.opciones{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:34px 0 10px}
.opcion{border:none;cursor:pointer;text-align:center;text-decoration:none;color:var(--tinta);border-radius:var(--radio);padding:34px 20px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .15s ease;box-shadow:var(--sombra)}
.opcion .icono{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:3rem;margin-bottom:8px}
.opcion .titulo{font-size:1.6rem;font-weight:bold}
.opcion .pista{color:var(--tinta-suave);font-size:1.02rem}
.opcion.leer{background:var(--lila-soft)}
.opcion.leer .icono{background:#fff;box-shadow:0 5px 0 var(--lila)}
.opcion.escuchar{background:var(--amarillo-soft)}
.opcion.escuchar .icono{background:#fff;box-shadow:0 5px 0 var(--amarillo)}
.opcion:hover,.opcion:focus-visible{transform:translateY(-5px);outline:none}

.filtros{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.chip{text-decoration:none;background:#fff;color:var(--tinta);font-weight:bold;padding:10px 18px;border-radius:999px;box-shadow:var(--sombra)}
.chip.on{background:var(--lila-strong);color:#fff}

/* ---------- Secciones ---------- */
section.bloque{padding:38px 0}
.cab{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.cab h2{font-size:1.8rem;margin:0}
.cab .punto{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;flex:none}
.cab .ver-todo{margin-left:auto;text-decoration:none;font-weight:bold;color:var(--lila-strong)}
.vacio{background:#fff;border-radius:var(--radio);padding:26px;text-align:center;color:var(--tinta-suave);box-shadow:var(--sombra)}

/* ---------- Tarjetas de libro ---------- */
.grid-libros{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
.libro{background:#fff;border-radius:var(--radio);padding:16px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:10px;transition:transform .15s ease}
.libro:hover{transform:translateY(-5px)}
.cover{border-radius:18px;aspect-ratio:4/3;display:grid;place-items:center;font-size:3.4rem;text-decoration:none}
.c1{background:linear-gradient(135deg,#CFF0DE,#9FDDBE)}
.c2{background:linear-gradient(135deg,#FBDCC7,#F4B591)}
.c3{background:linear-gradient(135deg,#E4D8F2,#C0A6E0)}
.c4{background:linear-gradient(135deg,#FCEFC7,#F6D976)}
.c5{background:linear-gradient(135deg,#CDE3F7,#9EC6EE)}
.c6{background:linear-gradient(135deg,#F7D0DE,#EFA6BE)}
.libro h3{margin:0;font-size:1.25rem;line-height:1.2}
.libro h3 a{color:var(--tinta);text-decoration:none}
.libro h3 a:hover{text-decoration:underline}
.libro .autor{color:var(--tinta-suave);font-size:.95rem;margin:-4px 0 0}
.acciones{display:flex;gap:10px;margin-top:auto}
.tag{align-self:flex-start;font-size:.8rem;font-weight:bold;padding:4px 12px;border-radius:999px;background:var(--lila-soft);color:var(--lila-strong)}
.tag.audio{background:var(--amarillo-soft);color:#8a6d12}

.btn{flex:1;border:none;cursor:pointer;border-radius:16px;padding:13px 10px;font-family:inherit;font-weight:bold;font-size:1.02rem;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .12s ease;text-decoration:none}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);outline:none}
.btn:focus-visible{box-shadow:0 0 0 4px var(--lila)}
.btn-leer{background:var(--lila-strong);color:#fff}
.btn-oir{background:var(--amarillo);color:var(--tinta)}
.btn.grande{padding:16px 26px;font-size:1.15rem;flex:0 0 auto}

/* ---------- Blog ---------- */
.grid-notas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.nota{background:var(--crema-card);border-radius:var(--radio);padding:22px 24px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:8px}
.nota .fecha{font-size:.88rem;color:var(--tinta-suave);font-weight:bold}
.nota h3{margin:0;font-size:1.25rem}
.nota p{margin:0;color:var(--tinta-suave)}
.nota a{color:var(--lila-strong);font-weight:bold;text-decoration:none;margin-top:4px}
.nota a:hover{text-decoration:underline}
.nota-completa{background:#fff;border-radius:var(--radio);padding:32px;box-shadow:var(--sombra);max-width:760px;margin:10px auto 0}
.nota-completa h1{font-size:2rem;margin:.2em 0 .4em;text-wrap:balance}
.nota-cuerpo{font-size:1.12rem;line-height:1.8}

/* ---------- Ficha de libro ---------- */
.volver{display:inline-block;margin-top:18px;text-decoration:none;font-weight:bold;color:var(--lila-strong)}
.ficha{display:flex;gap:26px;background:#fff;border-radius:var(--radio);padding:26px;box-shadow:var(--sombra);margin-top:12px;flex-wrap:wrap}
.ficha-portada{width:200px;aspect-ratio:4/3;border-radius:18px;display:grid;place-items:center;font-size:5rem;flex:none}
.ficha-info{flex:1;min-width:240px}
.ficha-info h1{font-size:2.1rem;margin:.2em 0 .1em;text-wrap:balance}
.autor-grande{color:var(--tinta-suave);font-size:1.15rem;margin:.1em 0}
.desc{margin:.6em 0 1em}
.ficha-botones{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Lectores ---------- */
.lector-bloque{background:#fff;border-radius:var(--radio);padding:22px;box-shadow:var(--sombra);margin-top:26px}
.lector-titulo{margin:0 0 16px;font-size:1.5rem}
.pdf-marco{border-radius:16px;overflow:hidden;border:3px solid var(--lila-soft)}
.pdf-marco iframe{display:block;width:100%;height:78vh;min-height:520px;border:0;background:#f4f0e6}

.epub-lector{display:flex;align-items:center;gap:10px}
.epub-area{flex:1;min-height:560px;border-radius:16px;border:3px solid var(--lila-soft);background:#fffdf7;overflow:hidden}
.epub-nav{flex:none;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;background:var(--lila-strong);color:#fff;font-size:2rem;line-height:1;display:grid;place-items:center;box-shadow:0 5px 0 rgba(0,0,0,.12);transition:transform .12s ease}
.epub-nav:hover,.epub-nav:focus-visible{transform:scale(1.08);outline:none}
.epub-ayuda{text-align:center;color:var(--tinta-suave);margin-top:12px}

.audio-caja{display:flex;align-items:center;gap:20px;background:linear-gradient(120deg,var(--lila),var(--lila-strong));border-radius:20px;padding:22px 24px;flex-wrap:wrap}
.audio-emoji{width:78px;height:78px;border-radius:18px;background:var(--amarillo);display:grid;place-items:center;font-size:2.4rem;flex:none;box-shadow:0 5px 0 rgba(0,0,0,.12)}
.audio-caja audio{flex:1;min-width:220px;height:52px}

/* ---------- Paneles / formularios ---------- */
.panel-caja{background:#fff;border-radius:var(--radio);padding:32px;box-shadow:var(--sombra);max-width:560px;margin:26px auto 0}
.panel-caja.ancha{max-width:760px}
.panel-caja h1{margin:0 0 .2em}
.panel-caja .sub{color:var(--tinta-suave);margin:0 0 18px}
.form{display:flex;flex-direction:column;gap:16px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:bold}
.form input,.form select,.form textarea{font-family:inherit;font-size:1.05rem;padding:12px 14px;border:2px solid var(--lila-soft);border-radius:14px;background:#fffdf7;color:var(--tinta)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--lila-strong)}
.form .hint{font-weight:normal;color:var(--tinta-suave);font-size:.92rem;margin:0}
.form small.hint{font-weight:normal}
.picker{border:2px solid var(--lila-soft);border-radius:16px;padding:14px}
.picker legend{font-weight:bold;padding:0 8px}
.emoji-grid{display:flex;flex-wrap:wrap;gap:8px}
.emoji-op input{position:absolute;opacity:0;width:0;height:0}
.emoji-op span{display:grid;place-items:center;width:52px;height:52px;font-size:1.7rem;border-radius:14px;background:#fffdf7;border:2px solid transparent;cursor:pointer}
.emoji-op input:checked + span{border-color:var(--lila-strong);background:var(--lila-soft)}
.color-grid{display:flex;flex-wrap:wrap;gap:10px}
.color-op input{position:absolute;opacity:0}
.color-op .cover{width:60px;height:44px;border-radius:12px;border:3px solid transparent;cursor:pointer;aspect-ratio:auto}
.color-op input:checked + .cover{border-color:var(--tinta)}
.pasos{line-height:1.9}

/* ---------- Tabla admin ---------- */
.tabla-wrap{overflow-x:auto;background:#fff;border-radius:var(--radio);box-shadow:var(--sombra)}
.tabla{width:100%;border-collapse:collapse;min-width:560px}
.tabla th,.tabla td{padding:14px 16px;text-align:left;border-bottom:2px solid var(--crema)}
.tabla thead th{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-suave)}
.tabla .mini-emoji{font-size:1.7rem}
.mini-chip{display:inline-block;background:var(--lila-soft);color:var(--lila-strong);font-size:.78rem;font-weight:bold;padding:3px 10px;border-radius:999px;margin:2px}
.mini-chip.audio{background:var(--amarillo-soft);color:#8a6d12}
.acciones-tabla{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.acciones-tabla form{margin:0}
.btn-mini{text-decoration:none;font-weight:bold;font-size:.9rem;padding:7px 12px;border-radius:10px;background:var(--lila-soft);color:var(--lila-strong);border:none;cursor:pointer;font-family:inherit}
.btn-mini:hover{filter:brightness(.96)}
.btn-mini.danger{background:#F7C9C9;color:#8a2b2b}

/* ---------- Footer ---------- */
footer{background:var(--lila-soft);margin-top:40px;padding:26px 0;text-align:center;color:var(--tinta-suave);border-top:3px solid var(--lila)}

@media (max-width:640px){
  .opciones{grid-template-columns:1fr}
  nav.main a span.txt{display:none}
  nav.main a{padding:10px 12px}
  .brand-txt{display:none}
  .epub-area{min-height:460px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}