/* Diario de Lectura Bleiro · tema «biblioteca mágica» */
:root{
  --night:#1b1325; --night2:#271a36; --night3:#33224a;
  --plum:#6d388b; --plum-d:#4f2766; --plum-l:#efe3f5; --lilac:#c9a8de;
  --gold:#d9b25c; --gold-d:#a8843a; --gold-l:#f3e2b3;
  --parch:#f7efdf; --parch2:#efe3cb; --paper:#fbf6ec;
  --ink:#2c1f2a; --muted:#7c6a70; --line:#e2d3b5;
  --cream:#fbf6ec;
  --radius:14px;
  --shadow:0 2px 6px rgba(0,0,0,.25),0 14px 40px rgba(10,4,20,.35);
  --title:"Cinzel",Georgia,serif;
  --serif:"Cormorant Garamond","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--sans);color:var(--ink);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 72% 9%,#fff7 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 33% 64%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 86% 42%,#fff6 50%,transparent 51%),
    radial-gradient(1px 1px at 55% 30%,#fff5 50%,transparent 51%),radial-gradient(1.5px 1.5px at 92% 80%,#fff5 50%,transparent 51%),
    radial-gradient(1px 1px at 22% 88%,#fff4 50%,transparent 51%),radial-gradient(1px 1px at 64% 76%,#fff5 50%,transparent 51%),
    radial-gradient(ellipse at 70% -10%,#4b2d6b 0%,transparent 55%),
    radial-gradient(ellipse at 0% 100%,#3a2150 0%,transparent 50%),
    linear-gradient(180deg,var(--night2),var(--night));
  background-attachment:fixed;background-color:var(--night)}
button,input,select,textarea{font:inherit;color:inherit}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.scene,svg.side-art,svg.flourish{stroke:none;width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:.3px}
h1{font-family:var(--title);font-size:30px;font-weight:600}
h2{font-family:var(--serif);font-size:23px;font-weight:700}
h3{font-family:var(--serif);font-size:19px;font-weight:700}
a{color:var(--plum)}

/* ---- Estructura ---- */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:22px 14px 14px;gap:16px;overflow:auto;
  background:linear-gradient(180deg,#2a1b3b,#1d1429);border-right:1px solid #ffffff12;box-shadow:inset -1px 0 0 #d9b25c22;color:#efe6f5}
.brand{display:flex;gap:10px;align-items:center;padding:0 8px 14px;border-bottom:1px solid #d9b25c33}
.brand img{filter:drop-shadow(0 2px 6px #0008)}
.brand strong{display:block;font-family:var(--title);font-size:15px;line-height:1.15;color:var(--gold-l);letter-spacing:.5px}
.brand span{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--lilac)}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#e9dff0;font-family:var(--serif);font-size:17.5px;font-weight:600;border:1px solid transparent;transition:background .15s}
.nav a svg{color:var(--gold);opacity:.85}
.nav a:hover{background:#ffffff0d}
.nav a.on{background:linear-gradient(90deg,#6d388b,#5a2c74);border-color:#d9b25c66;color:#fff;box-shadow:0 4px 14px #0006,inset 0 1px 0 #ffffff22}
.nav a.on svg{color:var(--gold-l);opacity:1}
.side-art{margin-top:auto;opacity:.95}
.sync{font-size:12px;color:#cdbfd8;padding:9px 10px;border-radius:10px;background:#00000033;border:1px solid #ffffff10;display:flex;gap:8px;align-items:center}
.sync b{color:#f2e8f8;font-weight:600}
.topbar{display:none}
.main{padding:28px 36px 70px;max-width:1260px;width:100%;margin:0 auto;outline:none}

/* ---- Cabecera con ilustración ---- */
.hero{position:relative;display:grid;grid-template-columns:1fr minmax(280px,560px);align-items:end;gap:10px;margin-bottom:22px;
  background:linear-gradient(135deg,#3b2453,#24172f);border:1px solid #d9b25c55;border-radius:18px;padding:22px 26px 0;overflow:hidden;box-shadow:var(--shadow)}
.hero::before{content:"";position:absolute;inset:6px;border:1px solid #d9b25c2e;border-radius:13px;pointer-events:none}
.hero h1{color:var(--gold-l);font-size:34px;text-shadow:0 2px 12px #0008}
.hero p{color:#e3d6ec;margin:8px 0 0;font-family:var(--serif);font-size:18px;font-style:italic}
.hero .hero-text{padding-bottom:24px}
.hero .actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.hero .scene{display:block;margin-bottom:-2px}
.flourish{color:var(--gold);max-width:200px;margin:10px 0 0;opacity:.8}

/* ---- Tarjetas de pergamino ---- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:radial-gradient(ellipse at 30% 0%,#fffaf0,transparent 60%),linear-gradient(180deg,var(--parch),var(--parch2));
  border:1px solid #c9a96b;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;inset:5px;border:1px solid #c9a96b66;border-radius:10px;pointer-events:none}
.card::after{content:"";position:absolute;top:9px;left:9px;right:9px;bottom:9px;pointer-events:none;
  background:
    radial-gradient(circle at 0 0,#c9a96b 0 2px,transparent 2.5px) top left/10px 10px no-repeat,
    radial-gradient(circle at 100% 0,#c9a96b 0 2px,transparent 2.5px) top right/10px 10px no-repeat,
    radial-gradient(circle at 0 100%,#c9a96b 0 2px,transparent 2.5px) bottom left/10px 10px no-repeat,
    radial-gradient(circle at 100% 100%,#c9a96b 0 2px,transparent 2.5px) bottom right/10px 10px no-repeat}
.card>*{position:relative;z-index:1}
.card h2,.card h3{margin-bottom:10px}
.card-title{display:flex;align-items:center;gap:8px;font-family:var(--title);font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#6b4f2e;font-weight:600;margin-bottom:10px}
.card-title svg{color:var(--plum);width:18px;height:18px}
.kpi{font-family:var(--serif);font-size:36px;font-weight:700;line-height:1.05;color:var(--plum-d)}
.kpi small{font-family:var(--sans);font-size:13px;color:var(--muted);font-weight:400}
.muted{color:var(--muted)}
.small{font-size:13px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* ---- Botones y campos ---- */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #c9a96b;background:linear-gradient(180deg,#fffaf0,#f1e5cc);padding:9px 15px;border-radius:999px;cursor:pointer;text-decoration:none;color:var(--ink);white-space:nowrap;font-weight:600;box-shadow:0 1px 0 #fff inset,0 2px 6px #0000001f}
.btn:hover{border-color:var(--gold-d);filter:brightness(1.03)}
.btn.primary{background:linear-gradient(180deg,#8048a0,#5b2c75);border-color:#d9b25c;color:#fff7e0;box-shadow:0 0 0 1px #00000040,0 6px 16px #6d388b55,inset 0 1px 0 #ffffff33}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{border-color:transparent;background:transparent;box-shadow:none}
.btn.danger{color:#8a2440}
.btn svg{width:18px;height:18px}
.hero .btn:not(.primary){background:#ffffff14;border-color:#d9b25c88;color:var(--gold-l);box-shadow:none}
.icon-btn{border:0;background:transparent;padding:8px;border-radius:10px;cursor:pointer;display:inline-flex;color:inherit}
.icon-btn:hover{background:#6d388b18}
.input,select.input,textarea.input{width:100%;border:1px solid #d8c49b;background:#fffdf7;border-radius:10px;padding:9px 11px;outline:none}
.input:focus{border-color:var(--plum);box-shadow:0 0 0 3px #6d388b22}
textarea.input{min-height:90px;resize:vertical;font-family:var(--serif);font-size:17px}
label.f{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
label.f>span{font-weight:700;color:#5a4330;font-family:var(--serif);font-size:16px}
.form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.form .s2{grid-column:span 2}.form .s4{grid-column:1/-1}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;padding:12px;border-radius:14px;background:#ffffff0d;border:1px solid #d9b25c33}
.filters .input{width:auto;min-width:150px;background:#fffaf0}

/* ---- Etiquetas y estrellas ---- */
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--plum-l);color:var(--plum-d);border-radius:999px;padding:3px 10px;font-size:12.5px;white-space:nowrap;border:1px solid #6d388b22;font-weight:600}
.chip.st-done{background:#e3efe2;color:#2f5e3f;border-color:#2f5e3f33}
.chip.st-reading{background:#e3eaf6;color:#2c4f80;border-color:#2c4f8033}
.chip.st-tbr{background:#f6ebd2;color:#7a5a17;border-color:#7a5a1733}
.chip.st-hold{background:#ece9ea;color:#555;border-color:#5553}
.chip.st-dnf{background:#f5e1e7;color:#8a2f4d;border-color:#8a2f4d33}
.chip button{border:0;background:transparent;cursor:pointer;padding:0;line-height:1;color:inherit;font-size:15px}
.stars{color:#c99a2e;letter-spacing:1px;white-space:nowrap;text-shadow:0 0 6px #f3d48866}
.stars .off{color:#d8cbb3;text-shadow:none}
.stars .half{background:linear-gradient(90deg,#c99a2e 50%,#d8cbb3 50%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Tabla ---- */
.table-wrap{overflow:auto;border:1px solid #c9a96b;border-radius:var(--radius);background:linear-gradient(180deg,var(--parch),var(--parch2));box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:780px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid #e0cfab;vertical-align:middle}
th{font-family:var(--title);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#6b4f2e;font-weight:600;background:#eadbbb;position:sticky;top:0}
td b{font-family:var(--serif);font-size:17px}
tr.click{cursor:pointer}
tr.click:hover td{background:#fff8e8}
.mini-cover{width:34px;height:50px;border-radius:3px 5px 5px 3px;object-fit:cover;display:block;box-shadow:2px 2px 6px #0004;background:var(--plum)}
.progress{height:8px;background:#e6d6b6;border-radius:99px;overflow:hidden;min-width:70px;box-shadow:inset 0 1px 2px #0002}
.progress i{display:block;height:100%;background:linear-gradient(90deg,#6d388b,#a46ac4);border-radius:99px}

/* ---- Portadas ---- */
.covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:24px 20px}
.cover-card{cursor:pointer;border:0;background:none;padding:0;text-align:left;color:#f1e8f6}
.cover{aspect-ratio:2/3;border-radius:3px 8px 8px 3px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;
  box-shadow:-3px 0 0 #00000055 inset,4px 6px 14px #000a,0 0 0 1px #0006;transition:transform .2s,box-shadow .2s}
.cover-card:hover .cover{transform:translateY(-5px) rotate(-1deg);box-shadow:-3px 0 0 #00000055 inset,8px 14px 26px #000c,0 0 22px #d9b25c44}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover.leather{background-image:radial-gradient(ellipse at 30% 20%,#ffffff22,transparent 55%),repeating-linear-gradient(45deg,#ffffff06 0 2px,transparent 2px 5px)}
.cover.leather::before{content:"";position:absolute;inset:8% 9%;border:1.5px solid #d9b25ccc;border-radius:3px;box-shadow:inset 0 0 0 4px #d9b25c33}
.cover.leather::after{content:"";position:absolute;left:0;top:0;bottom:0;width:9%;background:linear-gradient(90deg,#0006,#0000)}
.cover .ph{position:relative;z-index:1;padding:0 16%;color:var(--gold-l);font-family:var(--title);font-size:13px;line-height:1.25;text-align:center;text-shadow:0 1px 2px #0008;letter-spacing:.5px}
.cover .ph i{display:block;margin:10px auto 0;width:12px;height:12px;border:1.5px solid #d9b25c;transform:rotate(45deg)}
.cover .fav{position:absolute;top:8px;right:8px;z-index:2;background:#fffaf0;border-radius:99px;padding:2px 7px;font-size:12px;color:#a33a63;box-shadow:0 2px 6px #0005}
.cover-card b{display:block;margin-top:10px;font-family:var(--serif);font-size:17px;line-height:1.15;color:#fbf2ff;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cover-card span{font-size:12.5px;color:#cdbfd8}
.cover-card .chip{margin-top:4px}
.card .cover-card,.card .cover-card b{color:var(--ink)}
.card .cover-card span{color:var(--muted)}
.empty{text-align:center;padding:50px 20px;color:#d9cce4;font-family:var(--serif);font-size:19px}
.card .empty{color:var(--muted)}
.empty svg{width:44px;height:44px;color:var(--gold);margin-bottom:10px}

/* ---- Ficha de libro ---- */
.detail{display:grid;grid-template-columns:220px 1fr;gap:28px}
.detail .cover{width:220px}
.detail .cover .ph{font-size:18px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin:16px 0}
.facts div{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.facts b{display:block;color:var(--ink);font-size:17px;font-weight:700;font-family:var(--serif);text-transform:none;letter-spacing:0}
.quote{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.4;border-left:3px solid var(--gold);padding:4px 0 4px 16px;white-space:pre-wrap;color:#3d2a3a}

/* ---- Calendario ---- */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dow{font-family:var(--title);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#6b4f2e;text-align:center;padding:4px 0}
.cal .day{min-height:92px;background:#fffaf0;border:1px solid #e0cfab;border-radius:10px;padding:6px;font-size:12px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal .day.out{background:transparent;border-style:dashed;opacity:.5}
.cal .day.today{border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum),0 0 12px #6d388b33}
.cal .num{font-family:var(--serif);font-weight:700;font-size:16px;color:#5a4330}
.cal .ev{border-radius:5px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-weight:600}
.ev.start{background:#e3eaf6;color:#2c4f80}
.ev.end{background:#e3efe2;color:#2f5e3f}
.legend{display:flex;gap:14px;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.cal-nav h2{text-transform:capitalize;min-width:190px;text-align:center;color:var(--plum-d)}

/* ---- Estantería ---- */
.shelf{position:relative;margin-bottom:30px;padding:16px 18px 0;border-radius:16px 16px 6px 6px;
  background:linear-gradient(180deg,#3a2433,#2b1a27);border:1px solid #d9b25c44;box-shadow:var(--shadow),inset 0 0 40px #0008}
.shelf-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.shelf-head h2{color:var(--gold-l);font-family:var(--title);font-size:19px}
.shelf-head .input{width:auto;background:#fffaf0}
.spines{display:flex;align-items:flex-end;gap:4px;min-height:220px;overflow-x:auto;overflow-y:hidden;padding:12px 6px 0;position:relative}
.shelf::after{content:"";display:block;height:18px;margin:0 -18px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#9a6a46,#6b4329 60%,#4a2d1b);box-shadow:0 6px 12px #0008}
.spine{flex:none;width:50px;border-radius:3px 3px 1px 1px;color:var(--gold-l);display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;padding:10px 0;position:relative;
  box-shadow:inset -5px 0 0 #00000040,inset 3px 0 0 #ffffff1a,2px 0 4px #0006;transition:transform .15s}
.spine::before,.spine::after{content:"";position:absolute;left:4px;right:4px;height:2px;background:#d9b25c;opacity:.85}
.spine::before{top:12px;box-shadow:0 5px 0 #d9b25c88}
.spine::after{bottom:12px;box-shadow:0 -5px 0 #d9b25c88}
.spine span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--title);font-size:11.5px;letter-spacing:.3px;line-height:1.1;max-height:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px #000a}
.spine:hover{transform:translateY(-8px)}
.shelf .muted{color:#cdbfd8}
svg.shelf-deco{stroke:none;width:150px;height:auto;flex:none;align-self:flex-end;margin-bottom:-2px}

/* ---- Gráficos y listas ---- */
.chart{width:100%;height:auto;stroke:none;stroke-width:1}
.chart text{font-family:var(--sans);font-size:11px;fill:var(--muted)}
.donut-wrap{display:flex;align-items:center;gap:18px}
.list{display:flex;flex-direction:column}
.list .li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed #d8c49b}
.list .li:last-child{border-bottom:0}
.list .li>svg{color:var(--plum)}
.thumbs{display:flex;gap:12px;overflow:auto;padding:4px 2px 6px}
.thumbs .cover-card{width:86px;flex:none}
.thumbs .cover-card b{font-size:14px}
.thumbs .cover .ph{font-size:9px}
.note{background:#f3e8f8;border:1px solid #6d388b33;border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--plum-d);display:flex;gap:10px;align-items:flex-start}
.note svg{color:var(--plum);margin-top:1px}
.note.warn{background:#fbf0d9;border-color:#b8861d44;color:#6e4f12}
.note.warn svg{color:#b8861d}
.chips-edit{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.section-title{display:flex;align-items:center;gap:14px;margin:30px 0 14px}
.section-title h2{font-family:var(--title);font-size:20px;color:var(--gold-l)}
.section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#d9b25c88,transparent)}
.on-night{color:#e3d6ec}

/* ---- Ventanas ---- */
.modal{position:fixed;inset:0;background:rgba(15,8,22,.7);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;z-index:50}
.modal[hidden]{display:none}
.modal-card{position:relative;background:radial-gradient(ellipse at 20% 0%,#fffaf0,transparent 60%),linear-gradient(180deg,var(--parch),var(--parch2));border:1px solid #c9a96b;border-radius:18px;width:100%;max-width:900px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-card::before{content:"";position:absolute;inset:6px;border:1px solid #c9a96b77;border-radius:13px;pointer-events:none}
.modal-card>*{position:relative}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.modal-head h2{font-family:var(--title);font-size:22px;color:var(--plum-d)}
.modal-card h1{font-family:var(--serif);font-size:34px;color:var(--plum-d);line-height:1.1}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.cover-pick{display:flex;gap:14px;align-items:center}
.cover-pick .cover{width:80px;flex:none}
.cover-pick .cover .ph{font-size:8px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:linear-gradient(180deg,#3b2453,#24172f);color:var(--gold-l);border:1px solid #d9b25c88;padding:10px 20px;border-radius:99px;font-size:14px;z-index:60;box-shadow:var(--shadow)}
.dot{width:8px;height:8px;border-radius:99px;background:#9a8fa3;display:inline-block;flex:none}
.dot.ok{background:#6cc185;box-shadow:0 0 8px #6cc185}.dot.busy{background:var(--gold)}.dot.err{background:#e05a78}
.seg{display:inline-flex;border:1px solid #c9a96b;border-radius:999px;overflow:hidden}
.seg button{border:0;background:#fffaf0;padding:8px 14px;cursor:pointer;font-weight:600}
.seg button.on{background:var(--plum);color:#fff}

/* ---- Magia: vela y estrellas ---- */
@keyframes flicker{0%,100%{transform:scale(1) translateY(0);opacity:1}25%{transform:scale(1.06,.94) translateY(.5px)}50%{transform:scale(.95,1.07) translateY(-.5px);opacity:.92}75%{transform:scale(1.03,.97)}}
@keyframes glow{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flicker 2.4s ease-in-out infinite}
.flame-glow{animation:glow 3s ease-in-out infinite}
.twinkle{transform-box:fill-box;transform-origin:center;animation:twinkle 3.2s ease-in-out infinite}
.twinkle.d2{animation-delay:1.1s}.twinkle.d3{animation-delay:2.1s}
@media (prefers-reduced-motion:reduce){.flame,.flame-glow,.twinkle{animation:none}}

/* ---- Móvil ---- */
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;z-index:40;width:270px;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}
  .side.open{transform:none}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;background:#24172fee;backdrop-filter:blur(6px);border-bottom:1px solid #d9b25c44;color:var(--gold-l);padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top))}
  .topbar strong{font-family:var(--title);font-size:16px;flex:1}
  .main{padding:16px 14px 60px}
  .hero{grid-template-columns:1fr;padding:18px 18px 0}
  .hero h1{font-size:26px}
  .hero .hero-text{padding-bottom:4px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .form{grid-template-columns:1fr 1fr}
  .form .s2{grid-column:1/-1}
  .detail{grid-template-columns:1fr}
  .detail .cover{width:160px}
  .cal .day{min-height:58px;padding:4px}
  .cal .ev{font-size:10px;padding:1px 3px}
  .covers{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:18px 14px}
  .modal{padding:0}
  .modal-card{border-radius:0;min-height:100%;padding:20px 16px}
  .filters .input{min-width:0;flex:1 1 140px}
}
.hero .muted,.hero label{color:#d9cce4}

/* ---- Libro coleccionable 3D ---- */
.modal-card.m3d{max-width:1060px;padding:0;background:transparent;border:0;box-shadow:none}
.modal-card.m3d::before{display:none}
.c3{--mx:.5;--my:.5;--ang:0;--rar:#d9b25c;position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:0;border-radius:24px;overflow:hidden;
  background:radial-gradient(ellipse at 30% 40%,color-mix(in srgb,var(--book) 55%,transparent),transparent 60%),radial-gradient(ellipse at 100% 0%,#4b2d6b,transparent 55%),linear-gradient(160deg,#1f1430,#120b1c);
  border:1px solid color-mix(in srgb,var(--rar) 70%,transparent);box-shadow:0 0 0 1px #0008,0 30px 90px #000c,0 0 60px color-mix(in srgb,var(--rar) 35%,transparent);color:#efe6f5}
.c3::after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;padding:1px;
  background:conic-gradient(from calc(var(--ang)*1deg),var(--rar),transparent 25%,var(--rar) 50%,transparent 75%,var(--rar));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9}
.r-leg{--rar:#f3c24f}.r-epic{--rar:#b97cff}.r-rare{--rar:#5fb4ff}.r-common{--rar:#9fc7a8}.r-none{--rar:#a99bb5}
.c3-close{position:absolute;top:12px;right:12px;z-index:5;color:#efe6f5;background:#ffffff14}
.c3-close:hover{background:#ffffff26}
.c3-stage{position:relative;min-height:540px;display:flex;align-items:center;justify-content:center;perspective:1300px;cursor:grab;touch-action:none;user-select:none;overflow:hidden}
.c3-stage.grabbing{cursor:grabbing}
.c3-aura{position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rar) 45%,transparent),transparent 65%);filter:blur(10px);animation:glow 4s ease-in-out infinite}
.c3-floor{position:absolute;bottom:62px;width:230px;height:30px;border-radius:50%;background:radial-gradient(ellipse,#000a,transparent 70%);filter:blur(4px)}
.c3-hint{position:absolute;bottom:18px;margin:0;font-size:12px;letter-spacing:1px;color:#cdbfd8aa;text-transform:uppercase}
.spark{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:var(--rar);box-shadow:0 0 8px var(--rar);opacity:0;animation:rise 6s linear infinite}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-560px) scale(1.1);opacity:0}}

.b3{--w:230px;--h:345px;position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;will-change:transform}
.b3-face{position:absolute;backface-visibility:hidden}
.b3-front,.b3-back{inset:0;border-radius:3px 10px 10px 3px;overflow:hidden}
.b3-front{transform:translateZ(calc(var(--t)/2));box-shadow:inset 4px 0 8px #0006}
.b3-front img{width:100%;height:100%;object-fit:cover;display:block}
.b3-back{transform:rotateY(180deg) translateZ(calc(var(--t)/2));background-image:radial-gradient(ellipse at 70% 20%,#ffffff1f,transparent 60%),repeating-linear-gradient(45deg,#ffffff07 0 2px,transparent 2px 5px)}
.b3-back-in{position:absolute;inset:9%;border:1.5px solid #d9b25ccc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--gold-l);text-align:center}
.b3-back-in b{font-family:var(--title);font-size:15px;letter-spacing:1px}
.b3-back-in span{font-family:var(--serif);font-style:italic;font-size:18px}
.b3-back-in em{font-style:normal;font-family:var(--title);font-size:12px;opacity:.8;margin-top:10px}
.b3-spine{width:var(--t);height:var(--h);left:calc(50% - var(--t)/2);transform:rotateY(-90deg) translateZ(calc(var(--w)/2));display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(90deg,#0005,#fff2 50%,#0005);box-shadow:inset 0 14px 0 -11px #d9b25c,inset 0 -14px 0 -11px #d9b25c}
.b3-spine span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--title);font-size:13px;color:var(--gold-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:80%}
.b3-pages{background:repeating-linear-gradient(90deg,#f4ecd8 0 2px,#e2d6bb 2px 3px)}
.b3-pr{width:var(--t);height:calc(var(--h) - 8px);top:4px;left:calc(50% - var(--t)/2);transform:rotateY(90deg) translateZ(calc(var(--w)/2 - 4px))}
.b3-pt,.b3-pb{width:calc(var(--w) - 8px);height:var(--t);left:4px;top:calc(50% - var(--t)/2);background:repeating-linear-gradient(0deg,#f4ecd8 0 2px,#e2d6bb 2px 3px)}
.b3-pt{transform:rotateX(90deg) translateZ(calc(var(--h)/2 - 4px))}
.b3-pb{transform:rotateX(-90deg) translateZ(calc(var(--h)/2 - 4px))}
.b3-leather{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 16%;text-align:center;
  background-image:radial-gradient(ellipse at 30% 20%,#ffffff26,transparent 55%),repeating-linear-gradient(45deg,#ffffff07 0 2px,transparent 2px 5px)}
.b3-leather::before{content:"";position:absolute;inset:7% 8%;border:2px solid #d9b25cdd;box-shadow:inset 0 0 0 5px #d9b25c33}
.b3-title{font-family:var(--title);font-size:22px;line-height:1.2;color:var(--gold-l);text-shadow:0 2px 3px #0009}
.b3-author{font-family:var(--serif);font-style:italic;font-size:15px;color:#f3e2b3cc;margin-top:10px}
.b3-leather i{display:block;margin-top:16px;width:16px;height:16px;border:2px solid #d9b25c;transform:rotate(45deg)}
.b3-holo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.55;
  background:linear-gradient(calc(110deg + var(--ang)*.4deg),transparent 25%,#ff4fd855 38%,#4ffcff55 47%,#fff86a4d 55%,#b97cff55 63%,transparent 75%);
  background-size:250% 250%;background-position:calc(var(--mx)*100%) calc(var(--my)*100%)}
.b3-glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at calc(var(--mx)*100%) calc(var(--my)*100%),#ffffff55,transparent 45%);mix-blend-mode:overlay}

.c3-card{position:relative;margin:18px 18px 18px 0;padding:26px 26px 22px;border-radius:18px;background:linear-gradient(160deg,#ffffff14,#ffffff06);border:1px solid #ffffff1f;backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 #ffffff1f}
.c3-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-right:34px}
.c3-num{font-family:var(--title);font-size:13px;letter-spacing:2px;color:#cdbfd8}
.c3-rarity{font-family:var(--title);font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:5px 12px;border-radius:99px;color:#1b1325;font-weight:700;
  background:linear-gradient(90deg,var(--rar),color-mix(in srgb,var(--rar) 60%,#fff));box-shadow:0 0 16px color-mix(in srgb,var(--rar) 60%,transparent)}
.c3-title{font-family:var(--title);font-size:28px;line-height:1.15;color:#fff;text-shadow:0 0 18px color-mix(in srgb,var(--rar) 40%,transparent)}
.c3-author{font-family:var(--serif);font-style:italic;font-size:18px;color:#d9cce4;margin-top:4px}
.c3-rating{margin:10px 0 16px;color:#f3c24f;font-size:20px;letter-spacing:2px;text-shadow:0 0 10px #f3c24f88}
.c3-rating small{font-size:13px;letter-spacing:0;color:#cdbfd8;margin-left:8px;text-shadow:none}
.c3-stats{display:grid;gap:11px;margin-bottom:16px}
.stat-top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#cdbfd8;margin-bottom:5px}
.stat-top b{color:#fff;letter-spacing:0;text-transform:none;font-size:14px}
.stat-bar{height:7px;border-radius:99px;background:#ffffff14;overflow:hidden}
.stat-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8a4fb0,#c58cff);box-shadow:0 0 10px #b97cff99;animation:fill 1s ease-out both}
.stat-bar.gold i{background:linear-gradient(90deg,#b8862a,#f3c24f);box-shadow:0 0 10px #f3c24f99}
.stat-bar.cyan i{background:linear-gradient(90deg,#2f7fb0,#5fe0ff);box-shadow:0 0 10px #5fe0ff88}
.stat-bar.green i{background:linear-gradient(90deg,#3f8a5a,#7fe0a0);box-shadow:0 0 10px #7fe0a088}
@keyframes fill{from{width:0}}
.c3-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.c3-facts div{background:#0003;border:1px solid #ffffff12;border-radius:10px;padding:8px 10px}
.c3-facts span,.trait span{display:block;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#a99bb5}
.c3-facts b{font-size:14px;color:#fff}
.c3-traits-title{font-family:var(--title);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-l);margin-bottom:8px}
.c3-traits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.trait{border:1px solid color-mix(in srgb,var(--rar) 45%,transparent);background:color-mix(in srgb,var(--rar) 9%,transparent);border-radius:10px;padding:8px 10px;text-align:center}
.trait b{display:block;font-size:13.5px;color:#fff;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trait em{font-style:normal;font-size:11px;color:#cdbfd8}
.c3-review{font-family:var(--serif);font-style:italic;font-size:17px;color:#e9dff0;margin:16px 0 0;border-left:2px solid var(--rar);padding-left:12px}
.c3-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
@media (max-width:820px){
  .modal-card.m3d{min-height:100%}
  .c3{grid-template-columns:1fr;border-radius:0;min-height:100%}
  .c3-stage{min-height:420px}
  .b3{--w:190px;--h:285px}
  .c3-card{margin:0 12px 16px}
  .c3-traits{grid-template-columns:repeat(2,minmax(0,1fr))}
}