:root { --fondo:#f4f4f6; --tarj:#fff; --borde:#d4d4d8; --txt:#111; --suave:#666; --azul:#2563eb; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; background:var(--fondo); color:var(--txt); font:16px/1.4 -apple-system, system-ui, "Segoe UI", sans-serif; }
header { padding: max(14px, env(safe-area-inset-top)) 16px 6px; }
h1 { margin:0; font-size:28px; }
main { padding: 8px 16px max(24px, env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; }
button { font: inherit; cursor: pointer; border-radius: 12px; border:1px solid var(--borde); background:#fff; color:var(--txt); min-height:48px; padding:8px 14px; }
button.grande, label.grande, label.sec { background:var(--azul); border-color:var(--azul); font-size:20px; font-weight:700; min-height:64px; width:100%; }
button.sec { width:100%; margin-top:10px; }
button.peligro { color:#ff6b6b; }
.vacio { color:var(--suave); text-align:center; margin:36px 8px; }
#lista { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
#lista li { display:flex; gap:12px; align-items:center; background:var(--tarj); border:1px solid var(--borde); border-radius:14px; padding:10px; cursor:pointer; }
#lista img { width:56px; height:72px; object-fit:cover; border-radius:6px; background:#fff; flex:none; }
#lista .t { flex:1; min-width:0; }
#lista .n { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#lista .s { color:var(--suave); font-size:13px; }
.hoja { position:fixed; inset:0; z-index:5000; background:#0007; display:flex; align-items:flex-end; justify-content:center; }
.hoja .cuerpo { background:var(--tarj); width:100%; max-width:640px; max-height:92vh; overflow:auto; border-radius:20px 20px 0 0; padding:16px 16px max(18px, env(safe-area-inset-bottom)); }
.hoja .cab { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.hoja .cab h2 { flex:1; margin:0; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hoja .cab button { min-height:40px; }
.paginas { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; }
.paginas img { height:200px; border-radius:8px; background:#fff; flex:none; }
.rejilla { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.rejilla button.princ { background:var(--azul); border-color:var(--azul); font-weight:700; }
.rejilla .ancho { grid-column: 1 / -1; }
.toast { position:fixed; left:50%; bottom:max(24px, env(safe-area-inset-bottom)); transform:translateX(-50%); background:#111; color:#fff; padding:10px 16px; border-radius:20px; z-index:20000; font-size:15px; }
label.grande, label.sec { display:flex; align-items:center; justify-content:center; text-align:center; border-radius:12px; border:1px solid var(--borde); cursor:pointer; user-select:none; -webkit-user-select:none; }
label.grande { background:var(--azul); border-color:var(--azul); color:#fff; font-size:20px; font-weight:700; min-height:64px; width:100%; }
label.sec { background:#fff; color:var(--txt); min-height:48px; width:100%; margin-top:10px; }
.ent { position:fixed; left:-9999px; top:0; width:1px; height:1px; opacity:0; }
[hidden] { display:none !important; }