/* ReadPage · Nesux — estilos. Oscuro por defecto, claro opcional, primero el celular. */
:root {   /* misma paleta que Nesux VS Code */
  --bg:#0B1220; --bg2:#111b2e; --bg3:#18243a; --borde:rgba(255,255,255,.09); --txt:#E2E8F0; --suave:#CBD5E1; --muted:#94A3B8;
  --acento:#38BDF8; --acento2:#10B981; --azul:#007ACC; --verde:#10B981; --ambar:#FBBF24; --rojo:#F87171; --lee:rgba(56,189,248,.14);
  --morado:rgba(167,139,250,.38); --morado-vivo:rgba(167,139,250,.85);
  --grad:linear-gradient(135deg,#10B981,#007ACC); --sombra:0 18px 40px rgba(0,0,0,.35); --radio:16px; --app:#10B981;
}
:root[data-theme="light"] {
  --bg:#F1F5F9; --bg2:#FFFFFF; --bg3:#EEF2F7; --borde:rgba(15,23,42,.10); --txt:#1E293B; --suave:#334155; --muted:#475569;
  --acento:#007ACC; --acento2:#059669; --verde:#059669; --ambar:#B45309; --rojo:#DC2626; --lee:rgba(0,122,204,.12);
  --morado:rgba(124,58,237,.35); --morado-vivo:rgba(124,58,237,.75);
  --sombra:0 14px 30px rgba(15,23,42,.10); --app:#059669;
}
* { box-sizing:border-box; }
html, body { margin:0; overflow-x:clip; }
body { background:var(--bg); color:var(--txt); font:16px/1.6 "Segoe UI", system-ui, -apple-system, sans-serif; padding-bottom:120px; }
:root:not([data-paleta]) body, :root[data-paleta^="VS Code"] body { background-image:radial-gradient(1200px 600px at 15% -10%, rgba(0,122,204,.18), transparent 60%), radial-gradient(1000px 500px at 90% 10%, rgba(16,185,129,.14), transparent 60%); background-attachment:fixed; }
button { font:inherit; cursor:pointer; color:inherit; }
input, textarea, select { font:inherit; color:var(--txt); background:var(--bg3); border:1px solid var(--borde); border-radius:12px; padding:11px 13px; width:100%; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--acento); outline-offset:1px; }
textarea { resize:vertical; min-height:96px; }

/* ---------- cabecera ---------- */
.top { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:12px 18px;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--borde); }
.marca { display:flex; align-items:center; gap:10px; font-size:1.35rem; letter-spacing:.2px; }
.marca img { border-radius:10px; }
.marca b { background:linear-gradient(90deg,#007ACC,#38BDF8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.marca small { font-size:.72rem; color:var(--muted); margin-left:2px; }
.top-acc { display:flex; gap:8px; }
.ico { width:42px; height:42px; border-radius:12px; border:1px solid var(--borde); background:var(--bg2); display:grid; place-items:center; font-size:1.05rem; }
.ico:hover { border-color:var(--acento); }
.btn-color { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 12px; border-radius:12px; border:1px solid var(--borde);
  background:var(--bg3); color:var(--txt); font-weight:700; font-size:.86rem; white-space:nowrap; }
.btn-color:hover { border-color:var(--acento); }
.btn-color i { width:16px; height:16px; border-radius:5px; background:var(--bg); border:1px solid var(--borde); box-shadow:inset -6px 0 0 var(--acento); flex:none; }
.btn-color span { min-width:104px; text-align:left; }
.instalar { display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 8px; border:none; background:none; border-radius:12px;
  color:var(--app); font-weight:800; font-size:1.12rem; letter-spacing:.2px; white-space:nowrap; transition:filter .2s, background .2s; }
.instalar:hover { background:color-mix(in srgb, var(--app) 12%, transparent); }
.instalar[hidden] { display:none; }
.pasos { margin:4px 0 0; padding-left:22px; color:var(--suave); }
.pasos li { margin:8px 0; }
.pasos b { color:var(--txt); }
@media (max-width:520px) { .marca small, .btn-color span { display:none; } .btn-color { padding:0 12px; } .top { padding:12px; } .top-acc { gap:6px; } .marca { font-size:1.2rem; } }

.aviso-nav { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 12px 0; padding:12px 14px; border-radius:14px;
  border:1px solid var(--ambar); background:color-mix(in srgb, var(--ambar) 12%, var(--bg2)); color:var(--txt); font-size:.92rem; }
.aviso-nav[hidden] { display:none; }
.aviso-nav span { flex:1 1 220px; }
.aviso-nav .prim { width:auto; margin:0; padding:10px 16px; text-align:center; text-decoration:none; }

/* ---------- pestañas (solo celular) ---------- */
.pestanas { display:none; gap:6px; padding:10px 12px 0; }
.pestanas button { flex:1; border:1px solid var(--borde); background:var(--bg2); border-radius:12px; padding:9px 6px; font-weight:700; color:var(--suave); }
.pestanas button.act { border-color:var(--acento); color:var(--txt); background:color-mix(in srgb, var(--acento) 14%, var(--bg2)); }

/* ---------- distribución ---------- */
.app { display:grid; grid-template-columns:minmax(320px,420px) 1fr; gap:18px; max-width:1300px; margin:0 auto; padding:18px; align-items:start; }
.col-izq { display:flex; flex-direction:column; gap:18px; min-width:0; }
.card { background:var(--bg2); border:1px solid var(--morado); border-radius:var(--radio); padding:16px; box-shadow:var(--sombra); min-width:0; }
h2 { font-size:1.12rem; margin:0; }
.ayuda { color:var(--muted); font-size:.86rem; margin:8px 0 0; }
.vacio { color:var(--muted); text-align:center; padding:18px 8px; margin:0; }
.prim { width:100%; margin-top:10px; border:none; border-radius:12px; padding:12px; font-weight:800; color:var(--sobre, #fff);
  background:var(--grad); box-shadow:0 6px 20px rgba(16,185,129,.25); transition:transform .15s, filter .15s; }
.prim:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.08); }
.prim:disabled { opacity:.55; cursor:wait; }
.prim.peligro { background:linear-gradient(90deg,#f87171,#fb923c); color:#1c0707; }
.prim.peligro:disabled { cursor:not-allowed; }
.ds-lista .num { flex:none; }
.ds-lista .est { display:block; color:var(--muted); font-size:.78rem; }
.txt { background:none; border:1px solid var(--borde); border-radius:10px; padding:6px 10px; font-size:.85rem; color:var(--suave); }
.txt:hover { border-color:var(--acento); color:var(--txt); }

/* ---------- agregar ---------- */
.seg { display:flex; background:var(--bg3); border-radius:12px; padding:4px; margin-bottom:12px; }
.seg button { flex:1; border:none; background:none; padding:8px; border-radius:9px; font-weight:700; color:var(--muted); }
.seg button.act { background:var(--bg2); color:var(--txt); box-shadow:0 2px 8px rgba(0,0,0,.2); }

.soltar { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:18px 12px; border:2px dashed var(--borde);
  border-radius:14px; background:var(--bg3); cursor:pointer; transition:border-color .2s, background .2s; }
.soltar:hover, .soltar.sobre, body.soltando .soltar { border-color:var(--acento); background:color-mix(in srgb, var(--acento) 8%, var(--bg3)); }
.soltar input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.soltar-ico { font-size:1.8rem; line-height:1; }
.soltar small { color:var(--muted); font-size:.8rem; }
body.soltando::after { content:"Suelta los archivos para agregarlos a la cola"; position:fixed; inset:12px; z-index:60; display:grid; place-items:center;
  border:3px dashed var(--acento); border-radius:20px; background:rgba(2,6,23,.72); color:#fff; font-size:1.3rem; font-weight:800; pointer-events:none; }

/* ---------- cola ---------- */
.cola-cab { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.cola-acc { display:flex; gap:6px; }
.resumen { margin:10px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.resumen div { background:var(--bg3); border-radius:12px; padding:8px; text-align:center; }
.resumen b { display:block; font-size:1.05rem; }
.resumen span { font-size:.74rem; color:var(--muted); }
.cola { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.item { display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; background:var(--bg3); border:1px solid transparent; border-radius:14px; padding:10px; }
.item[draggable="true"] { cursor:grab; }
.item.actual { border-color:var(--acento); background:color-mix(in srgb, var(--acento) 10%, var(--bg3)); }
.item.leido { opacity:.55; }
.item.arrastrando { opacity:.4; }
.item.sobre { border-color:var(--acento2); border-style:dashed; }
.num { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-weight:800; font-size:.85rem; background:var(--bg2); color:var(--acento); }
.item-txt { min-width:0; cursor:pointer; }
.item-tit { font-weight:700; line-height:1.3; overflow-wrap:anywhere; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.item-sub { font-size:.8rem; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-sub .err { color:var(--rojo); }
.aviso-portada { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; color:var(--ambar); white-space:normal; }
.aviso-portada .txt { padding:3px 8px; font-size:.78rem; }
.item-acc { display:flex; gap:4px; }
.item-acc button { width:30px; height:30px; border-radius:8px; border:1px solid var(--borde); background:var(--bg2); font-size:.8rem; display:grid; place-items:center; }
.item-acc button:hover { border-color:var(--acento); }
.cargando { display:inline-block; width:12px; height:12px; border:2px solid var(--muted); border-top-color:var(--acento); border-radius:50%; animation:gira .8s linear infinite; vertical-align:-2px; }
@keyframes gira { to { transform:rotate(360deg); } }

/* ---------- lector ---------- */
.lector { position:sticky; top:84px; max-height:calc(100vh - 220px); overflow:auto; }
.lector-cab h1 { font-size:clamp(1.3rem,2.6vw,1.8rem); line-height:1.25; margin:0 0 6px; }
.lector-cab .meta { color:var(--muted); font-size:.88rem; display:flex; flex-wrap:wrap; gap:6px 12px; margin-bottom:12px; }
.lector-cab .meta a { color:var(--acento); }
.texto { touch-action:manipulation; }
.texto p { margin:0 0 12px; color:var(--suave); padding:4px 8px; border-radius:8px; cursor:pointer; transition:background .2s; }
.texto p.h { color:var(--txt); font-weight:800; font-size:1.08rem; margin-top:16px; }
.texto p:hover { background:color-mix(in srgb, var(--acento) 6%, transparent); }
.texto p.leyendo { background:var(--lee); color:var(--txt); box-shadow:inset 3px 0 0 var(--verde); }
.texto .pista { color:var(--muted); font-size:.82rem; text-align:center; margin:0 0 12px; }

/* ---------- reproductor ---------- */
.reproductor { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; align-items:center; gap:14px; padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg2) 94%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--borde); }
.rep-info { flex:1; min-width:0; }
.rep-tit { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rep-sub { font-size:.8rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barra { height:5px; background:var(--bg3); border-radius:99px; margin-top:6px; overflow:hidden; }
.barra span { display:block; height:100%; width:0; background:linear-gradient(90deg,#007ACC,#38BDF8,#10B981); transition:width .3s; }
.rep-ctrl { display:flex; align-items:center; gap:6px; }
.rep-ctrl button { height:44px; min-width:44px; padding:0 12px; border-radius:12px; border:1px solid var(--borde); background:var(--bg3); font-weight:800; }
.rep-ctrl button:hover { border-color:var(--acento); }
.rep-ctrl .play { width:54px; height:54px; border-radius:50%; border:none; font-size:1.2rem; color:var(--sobre, #fff); background:var(--grad); box-shadow:0 4px 16px rgba(0,122,204,.35); }

/* ---------- diálogos ---------- */
dialog { border:1px solid var(--borde); border-radius:18px; padding:0; background:var(--bg2); color:var(--txt); width:min(640px, calc(100vw - 24px)); box-shadow:var(--sombra); }
dialog::backdrop { background:rgba(2,6,23,.6); backdrop-filter:blur(3px); }
.dlg { padding:16px; display:flex; flex-direction:column; gap:10px; max-height:85vh; }
.dlg-cab { display:flex; align-items:center; justify-content:space-between; }
.dlg-cab h3 { margin:0; }
.dlg label { display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:.92rem; }
.dlg label.chk { flex-direction:row; align-items:center; font-weight:600; }
.dlg label.chk input { width:auto; }
.ds-acc { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ds-acc .prim { width:auto; margin:0; flex:1; }
.ds-acc span { color:var(--muted); font-size:.85rem; margin-left:auto; }
.ds-lista { list-style:none; margin:0; padding:0; overflow:auto; flex:1; min-height:120px; border:1px solid var(--borde); border-radius:12px; }
.ds-lista li { display:flex; gap:10px; align-items:flex-start; padding:9px 12px; border-bottom:1px solid var(--borde); }
.ds-lista li:last-child { border-bottom:none; }
.ds-lista input { width:auto; margin-top:4px; }
.ds-lista b { display:block; font-size:.92rem; }
.ds-lista small { display:block; color:var(--muted); overflow-wrap:anywhere; }

.toast { position:fixed; left:50%; bottom:110px; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none; z-index:50;
  background:var(--txt); color:var(--bg); padding:10px 16px; border-radius:12px; font-weight:700; transition:all .25s; max-width:90vw; text-align:center; }
.toast.ver { opacity:1; transform:translateX(-50%); }

/* ---------- celular ---------- */
@media (max-width:860px) {
  .pestanas { display:flex; }
  .app { grid-template-columns:1fr; padding:12px; }
  body[data-p="cola"] #p-agregar, body[data-p="cola"] #p-lector { display:none; }
  body[data-p="agregar"] #p-cola, body[data-p="agregar"] #p-lector { display:none; }
  body[data-p="lector"] .col-izq { display:none; }
  .lector { position:static; max-height:none; }
  .reproductor { gap:8px; padding:10px 10px calc(10px + env(safe-area-inset-bottom)); flex-wrap:wrap; }
  .rep-info { flex-basis:100%; }
  .rep-ctrl { width:100%; justify-content:space-between; }
  .rep-ctrl .et { display:none; }
  body { padding-bottom:160px; }
  /* cola: el título usa todo el ancho y los botones van debajo, a la derecha */
  .item { grid-template-columns:30px 1fr; row-gap:8px; }
  .item-acc { grid-column:1 / -1; justify-content:flex-end; gap:8px; }
  .item-acc button { width:38px; height:34px; }
  .item-sub { white-space:normal; }
}
@media (max-width:420px) {
  .top { padding:10px; }
  .marca { gap:7px; font-size:1.05rem; }
  .marca img { width:28px; height:28px; }
  .top-acc { gap:4px; }
  .ico { width:36px; height:36px; font-size:.95rem; }
  .btn-color { height:36px; padding:0 9px; }
  .instalar { height:36px; padding:0 6px; font-size:1rem; gap:4px; }
  .instalar svg { width:19px; height:19px; }
}