:root{
  --rojo:#E81E26; --rojo-osc:#B3121A; --dorado:#EBB62E; --dorado-osc:#C99413;
  --tinta:#2B1D1E; --suave:#6E6264; --linea:#E9DEDF; --fondo:#FBF8F8; --blanco:#fff;
  --radio:14px; --fuente:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--fuente);color:var(--tinta);background:var(--fondo);line-height:1.6;font-size:16px;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--rojo-osc)} a:hover{color:var(--rojo)}
h1,h2{line-height:1.2;letter-spacing:-.01em} h1{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800;margin:.4em 0 .6em} h2{font-size:1.2rem;font-weight:700}
.contenedor{width:min(1180px,100% - 2rem);margin-inline:auto}
.suave{color:var(--suave)} .centro{text-align:center}
:focus-visible{outline:3px solid var(--dorado);outline-offset:2px}

/* Barra superior y cabecera, como la web del instituto */
.topbar{background:var(--rojo);color:#fff;font-size:.85rem;padding:.55rem 0}
.topbar .contenedor{display:flex;gap:1.6rem;flex-wrap:wrap}
.cabecera{background:#fff}
.cabecera .fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.marca{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--tinta)}
.marca img{height:62px;width:auto;display:block}
.marca span{font-weight:800;font-style:italic;font-size:1.05rem;border-left:2px solid var(--rojo);padding-left:1rem;color:var(--rojo-osc)}
.menu{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.menu a{padding:.5rem .9rem;border-radius:999px;text-decoration:none;color:var(--tinta);font-weight:600;font-size:.95rem}
.menu a:hover{background:#FCEBEC}
.menu a.on{color:var(--rojo-osc);box-shadow:inset 0 -3px 0 var(--rojo);border-radius:0}
.menu a.btn-pill{background:var(--rojo);color:#fff;margin-left:.4rem;border-radius:999px;box-shadow:none}
.menu a.btn-pill:hover{background:var(--rojo-osc)}
.burger{display:none;background:none;border:1px solid var(--linea);border-radius:10px;font-size:1.4rem;padding:.2rem .7rem;cursor:pointer}
.ola{display:block;width:100%;height:46px;fill:var(--rojo);margin-top:-1px}

.principal{flex:1;padding:1.6rem 0 3rem}
.pie{background:var(--tinta);color:#E8DCDD;font-size:.88rem;padding:1.2rem 0;text-align:center}

/* Botones y formularios */
.btn{display:inline-block;background:var(--rojo);color:#fff;border:2px solid var(--rojo);border-radius:999px;padding:.65rem 1.5rem;font:600 .95rem var(--fuente);cursor:pointer;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--rojo-osc);border-color:var(--rojo-osc);color:#fff}
.btn-dorado{background:var(--dorado);border-color:var(--dorado);color:var(--tinta)} .btn-dorado:hover{background:var(--dorado-osc);border-color:var(--dorado-osc);color:var(--tinta)}
.btn-borde{background:transparent;color:var(--rojo-osc)} .btn-borde:hover{background:var(--rojo);color:#fff}
.btn-chico{padding:.35rem 1rem;font-size:.85rem}
.form{display:grid;gap:1rem} .form-ancho{max-width:760px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:1.5rem}
.form label{display:grid;gap:.35rem;font-weight:600;font-size:.92rem}
.form .dos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
input,select,textarea{font:400 1rem var(--fuente);color:var(--tinta);background:#fff;border:1.5px solid var(--linea);border-radius:10px;padding:.65rem .85rem;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--rojo);outline:none;box-shadow:0 0 0 3px #FBD3D5}
.form label.check{display:flex;align-items:center;gap:.6rem;font-weight:500} .check input{width:auto}
.tarjeta-login{max-width:440px;margin:1.5rem auto;background:#fff;border:1px solid var(--linea);border-top:6px solid var(--dorado);border-radius:var(--radio);padding:2rem}
.tarjeta-login h1{font-size:1.5rem;margin-top:0}

.aviso{padding:.8rem 1rem;border-radius:10px;margin:0 0 1rem;font-weight:500}
.aviso-ok{background:#E8F5E9;color:#1B5E20;border:1px solid #BFE0C2}
.aviso-error{background:#FDE8E9;color:var(--rojo-osc);border:1px solid #F5BBBE}

/* Portada del catálogo */
.portada-bib{background:linear-gradient(135deg,var(--rojo) 0%,var(--rojo-osc) 100%);color:#fff;border-radius:var(--radio);padding:2rem clamp(1.2rem,4vw,3rem);margin-bottom:1.4rem;position:relative;overflow:hidden}
.portada-bib::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:30px solid rgba(235,182,46,.35)}
.portada-bib h1{margin:0 0 1rem;max-width:20ch;font-style:italic;position:relative;z-index:1}
.buscador{display:flex;gap:.6rem;max-width:560px;position:relative;z-index:1}
.buscador input{border-radius:999px;border-color:transparent}
.buscador-claro{margin-bottom:1.2rem}.buscador-claro input{border-color:var(--linea)}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.chips a{padding:.4rem .95rem;border:1.5px solid var(--linea);border-radius:999px;background:#fff;text-decoration:none;color:var(--tinta);font-weight:600;font-size:.88rem}
.chips a small{color:var(--suave);margin-left:.2rem}
.chips a:hover{border-color:var(--rojo)} .chips a.on{background:var(--tinta);border-color:var(--tinta);color:#fff} .chips a.on small{color:#CDBFC0}

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.4rem;margin:1rem 0}
.libro{display:flex;flex-direction:column;gap:.7rem}
.libro-portada{display:block;aspect-ratio:3/4;border-radius:6px 12px 12px 6px;overflow:hidden;box-shadow:-6px 0 0 var(--rojo-osc),0 10px 22px -8px rgba(43,29,30,.45);background:#fff;transition:transform .2s}
.libro-portada:hover{transform:translateY(-4px)}
.libro-portada img{width:100%;height:100%;object-fit:cover;display:block}
.sin-portada{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:1rem;background:linear-gradient(160deg,var(--dorado) 0 55%,var(--rojo) 55% 100%);color:var(--tinta)}
.sin-portada b{font-size:4rem;line-height:1;font-weight:800}
.sin-portada i{color:#fff;font-weight:700;font-size:.85rem}
.libro-info h2{font-size:.98rem;margin:0 0 .15rem} .libro-info h2 a{color:var(--tinta);text-decoration:none} .libro-info h2 a:hover{color:var(--rojo)}
.autor{color:var(--suave);font-size:.88rem;margin:.1rem 0 .6rem}
.paginas{display:flex;gap:.4rem;justify-content:center;margin-top:1.5rem}
.paginas a{min-width:2.4rem;text-align:center;padding:.4rem .6rem;border:1.5px solid var(--linea);border-radius:10px;text-decoration:none;font-weight:600;background:#fff}
.paginas a.on{background:var(--rojo);border-color:var(--rojo);color:#fff}
.vacio{background:#fff;border:2px dashed var(--linea);border-radius:var(--radio);padding:2.2rem;text-align:center;color:var(--suave)}

/* Lector */
.lector-cab{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:1rem}
.lector-cab h1{margin-bottom:.2em} .desc{max-width:70ch;margin:.4rem 0 0}
.visor{width:100%;height:min(82vh,900px);min-height:480px;border:1px solid var(--linea);border-radius:var(--radio);background:#fff}

/* Panel admin */
.barra{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin:1rem 0 1.4rem}
.cifras div{background:#fff;border:1px solid var(--linea);border-left:6px solid var(--dorado);border-radius:var(--radio);padding:1rem 1.2rem}
.cifras b{display:block;font-size:2.1rem;line-height:1.1;color:var(--rojo-osc)} .cifras span{color:var(--suave);font-weight:600}
.tabla-caja{overflow-x:auto;background:#fff;border:1px solid var(--linea);border-radius:var(--radio)}
.tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla th,.tabla td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla th{background:#F6EEEE;font-weight:700} .tabla tr:last-child td{border-bottom:0}
.acciones{display:flex;gap:1rem;align-items:center;white-space:nowrap} .acciones form{margin:0}
.en-linea{display:flex;gap:.4rem;align-items:center} .en-linea input{min-width:150px;padding:.4rem .6rem}
.enlace,.enlace-peligro{background:none;border:0;padding:0;font:600 .92rem var(--fuente);cursor:pointer;color:var(--rojo-osc);text-decoration:underline}
.enlace-peligro{color:#9b1c1c}
.etiqueta{padding:.15rem .7rem;border-radius:999px;font-size:.8rem;font-weight:700}
.etiqueta.ok{background:#E8F5E9;color:#1B5E20}.etiqueta.no{background:#FDE8E9;color:var(--rojo-osc)}
.plegable{margin-bottom:1.2rem}.plegable summary{list-style:none;display:inline-block;margin-bottom:1rem}.plegable summary::-webkit-details-marker{display:none}

@media (max-width:820px){
  .solo-ancho{display:none}
  .burger{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;padding:1rem;border-bottom:3px solid var(--rojo);z-index:20}
  .menu.abierto{display:flex}
  .cabecera{position:relative}
  .menu a.on{box-shadow:none;background:#FCEBEC;border-radius:999px}
  .marca img{height:48px} .marca span{display:none}
  .form .dos{grid-template-columns:1fr}
  .buscador{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.peque{font-size:.85rem;margin-top:.3rem}