/* ============================================================
   Estantería de libros · assets/css/estanteria.css
   Todo va con prefijo .est para no chocar con index.php ni con
   las páginas de usuario/admin.
   ============================================================ */
.est{--est-madera:#7a4b29;--est-borde:#543118;--est-tabla:#9c6339;--est-base:#63391a;--est-tinta:#3b2a1a;
     width:100%;max-width:1000px;margin:0 auto;color:var(--est-tinta);font-family:inherit;line-height:1.4;text-align:left}
.est *,.est *::before,.est *::after{box-sizing:border-box}
.est button,.est input,.est select,.est textarea{font:inherit}
.est-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- barra: buscador, categorías, añadir ---- */
.est-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px;padding:10px 12px;
           background:rgba(255,255,255,.95);border:2px solid rgba(84,49,24,.35);border-radius:16px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.est-buscar{flex:1 1 230px;min-width:0}
.est-buscar input{width:100%;padding:9px 12px;font-size:.9rem;color:var(--est-tinta);background:#fffaf2;border:2px solid #d6b48a;border-radius:10px}
.est-buscar input:focus{outline:3px solid #f59e0b;outline-offset:1px}
.est-chips{display:flex;flex-wrap:wrap;gap:6px}
.est-chip{padding:6px 12px;font-size:.78rem;font-weight:800;color:#5b3b1f;background:#fff;border:2px solid #d6b48a;border-radius:999px;cursor:pointer}
.est-chip:hover{border-color:#b45309}
.est-chip[aria-pressed="true"]{color:#1a1a1a;background:#f59e0b;border-color:#b45309}
.est-add{padding:9px 16px;font-size:.88rem;font-weight:800;color:#fff;background:#16a34a;border:2px solid #166534;border-radius:10px;cursor:pointer;box-shadow:0 3px 0 #166534}
.est-add:hover{background:#15803d}
.est-add:active{transform:translateY(3px);box-shadow:none}
.est button:focus-visible,.est a:focus-visible,.est select:focus-visible,.est textarea:focus-visible,.est input:focus-visible{outline:3px solid #fde047;outline-offset:2px}

/* ---- mueble ---- */
.est-marco{padding:8px;background:var(--est-madera);border:12px solid var(--est-borde);border-radius:10px;
           box-shadow:inset 0 0 20px rgba(0,0,0,.4),0 15px 30px rgba(0,0,0,.25)}
.est-estante{display:flex;flex-direction:column;gap:0}
.est-fila{position:relative;display:flex;align-items:flex-end;gap:5px;height:196px;padding:0 16px;
          background:var(--est-tabla);border-bottom:16px solid var(--est-base);box-shadow:inset 0 10px 15px rgba(0,0,0,.25)}
.est-fila::after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:6px;background:rgba(0,0,0,.15);pointer-events:none}

/* ---- lomo ---- */
.est-libro{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
           padding:0;color:var(--i,#fff);background:var(--c,#7c5cff);border:2px solid #222;border-radius:3px 3px 1px 1px;
           cursor:pointer;transform-origin:bottom center;transition:transform .2s cubic-bezier(.34,1.56,.64,1),filter .2s}
.est-libro::before,.est-libro::after{content:"";position:absolute;left:0;right:0;height:6px;background:var(--e,#4c1d95);opacity:.6;border-top:2px solid #222;border-bottom:2px solid #222}
.est-libro::before{top:8px}
.est-libro::after{bottom:8px}
.est-libro:hover,.est-libro:focus-visible{transform:translateY(-9px) scale(1.03);z-index:30;filter:brightness(1.08)}
.est-libro:focus-visible{outline:3px solid #fde047;outline-offset:3px}
.est-incl{transform:rotate(8deg);transform-origin:bottom right}
.est-incl:hover,.est-incl:focus-visible{transform:translateY(-9px) rotate(10deg) scale(1.03)}
.est-ic{margin-top:21px;font-size:16px;line-height:1}
.est-tit{margin:6px 0 26px;max-height:calc(100% - 86px);overflow:hidden;text-align:center;
         writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:800;line-height:1.15;letter-spacing:.1px}
.est-nuevo{color:#fde68a;background:rgba(0,0,0,.18);border:2px dashed #fde68a}
.est-nuevo::before,.est-nuevo::after{display:none}
.est-nuevo .est-ic{font-size:22px;font-weight:800}
.est-pop{animation:est-pop .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes est-pop{0%{transform:translateY(-120px);opacity:0}60%{opacity:1}100%{transform:none}}

/* ---- tooltip ---- */
.est-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:1px;
         min-width:96px;max-width:210px;padding:6px 10px;color:#fff;background:#1f1235;border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,.4);
         font-size:11px;font-weight:700;text-align:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s;z-index:40}
.est-tip b{color:#fcd34d;font-size:11.5px;line-height:1.25;white-space:normal}
.est-tip i{font-style:normal;font-size:10px;color:#cbd5e1;font-weight:600}
.est-libro:hover .est-tip,.est-libro:focus-visible .est-tip{opacity:1;visibility:visible}

/* ---- pie: contadores y expandir ---- */
.est-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:28px}
.est-stats{margin:0;padding:6px 14px;font-size:.82rem;font-weight:800;color:#5b3b1f;background:rgba(255,255,255,.95);border:2px solid rgba(84,49,24,.3);border-radius:999px}
.est-mas{padding:9px 18px;font-size:.88rem;font-weight:800;color:#1a1a1a;background:#fcd34d;border:2px solid #b45309;border-radius:10px;cursor:pointer;box-shadow:0 3px 0 #b45309}
.est-mas:active{transform:translateY(3px);box-shadow:none}
.est-mas[hidden]{display:none}
.est-vacio{position:absolute;left:0;right:0;bottom:40px;padding:0 24px;text-align:center;color:#fde68a;font-weight:800}

/* ---- lector ---- */
.est-ov{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;background:rgba(14,6,30,.94);
        padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.est-ov[hidden]{display:none}
.est-ov-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;color:#fff;background:rgba(255,255,255,.08)}
.est-ov-t{margin-right:auto;min-width:0;font-size:1rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.est-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 14px;font-size:.85rem;font-weight:800;
       color:#fff;text-decoration:none;background:rgba(255,255,255,.16);border:2px solid transparent;border-radius:10px;cursor:pointer}
.est-b:hover{background:rgba(255,255,255,.28)}
.est-b[hidden]{display:none}
.est-b-cerrar{color:#1a1a1a;background:#fcd34d}
.est-b-cerrar:hover{background:#fde68a}
.est-b-peligro{color:#fecaca;background:rgba(220,38,38,.25);border-color:rgba(248,113,113,.5)}
.est-b-peligro:hover{background:rgba(220,38,38,.45)}
.est-b-peligro.est-seguro{color:#fff;background:#dc2626;border-color:#fecaca}
.est-ov-cuerpo{position:relative;flex:1;min-height:0}
.est-ov-cuerpo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#07132b;opacity:0;transition:opacity .25s}
.est-ov-cuerpo iframe.est-listo{opacity:1}
.est-carga{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#e9d5ff;font-weight:700}
.est-ficha{position:absolute;inset:0;overflow:auto;display:grid;place-items:center;padding:24px}
.est-ficha-in{width:min(440px,100%);padding:28px 24px;text-align:center;color:#3b2a1a;background:#fffaf2;border:4px solid #543118;border-radius:20px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.est-ficha-ic{font-size:3.2rem;line-height:1}
.est-ficha-in h3{margin:10px 0 4px;font-size:1.4rem;line-height:1.2;color:#3b2a1a}
.est-ficha-in p{margin:6px 0;color:#5b4630;font-size:.95rem}
.est-ficha-meta{font-size:.82rem;font-weight:700;color:#8a6d4b}
.est-aviso{position:fixed;left:50%;bottom:24px;z-index:2147483600;transform:translate(-50%,14px);padding:9px 16px;font-size:.88rem;font-weight:800;
           color:#1a1a1a;background:#fcd34d;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.2s}
.est-aviso.est-ver{opacity:1;transform:translate(-50%,0)}
html.est-bloqueado,html.est-bloqueado body{overflow:hidden}

/* ---- formulario (administrador) ---- */
.est-dlg{width:min(600px,94vw);max-width:none;max-height:92vh;margin:auto;padding:22px;overflow:auto;color:#3b2a1a;background:#fffaf2;
         border:4px solid #543118;border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.est-dlg::backdrop{background:rgba(14,6,30,.7)}
.est-dlg h3{margin:0 0 4px;font-size:1.35rem;color:#3b2a1a}
.est-dlg p{color:#5b4630}
.est-ayuda{margin:0 0 14px;font-size:.88rem}
.est-campo{display:flex;flex-direction:column;gap:5px;margin:0 0 12px}
.est-campo label,.est-lbl{font-size:.78rem;font-weight:800;color:#5b3b1f}
.est-campo input[type=text],.est-campo select,.est-campo textarea{width:100%;padding:9px 11px;font-size:.92rem;color:#3b2a1a;background:#fff;border:2px solid #d6b48a;border-radius:10px}
.est-campo textarea{resize:vertical;min-height:120px;line-height:1.5}
.est-dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.est-archivo{font-weight:700!important;color:#5b4630!important}
.est-archivo input{display:block;margin-top:4px;max-width:100%;font-size:.85rem}
.est-colores{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.est-color{width:34px;height:34px;padding:0;background:var(--c);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #b8956a;cursor:pointer}
.est-color[aria-checked="true"]{box-shadow:0 0 0 4px #3b2a1a}
.est-color-otro{width:38px;height:34px;padding:0;background:none;border:0;cursor:pointer}
.est-error{margin:0 0 12px;padding:9px 12px;font-size:.88rem;font-weight:700;color:#991b1b;background:#fee2e2;border:2px solid #fca5a5;border-radius:10px}
.est-error[hidden]{display:none}
.est-acciones{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:6px}
.est-b-claro{color:#5b3b1f;background:#fff;border-color:#d6b48a}
.est-b-claro:hover{background:#fff4e0}
.est-b-ok{color:#fff;background:#16a34a;border-color:#166534}
.est-b-ok:hover{background:#15803d}
.est-b-ok[disabled]{opacity:.6;cursor:wait}

@media (max-width:560px){
  .est-dos{grid-template-columns:1fr}
  .est-fila{padding:0 10px}
  .est-marco{border-width:9px;padding:6px}
  .est-ov-bar{padding:8px}
  .est-b{padding:8px 10px;font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .est *,.est-aviso{transition:none!important;animation:none!important}
}