:root { --bg:#0f1218; --card:#181d26; --line:#2a3140; --txt:#e8ecf3; --mut:#8b95a8; --acc:#3d8bfd; --ok:#2ecc71; --bad:#ff5d5d; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--txt); }
.hidden { display:none !important; }
h1 { margin:0; font-size:22px; letter-spacing:.5px; } h1 span { color:var(--acc); }
h2 { margin:0; font-size:19px; }
.muted { color:var(--mut); } .error { color:var(--bad); min-height:1.2em; }
button { background:var(--acc); color:#fff; border:0; border-radius:8px; padding:8px 14px; font:inherit; cursor:pointer; }
button:hover { filter:brightness(1.1); }
button.ghost { background:transparent; border:1px solid var(--line); color:var(--txt); }
button.danger { background:var(--bad); } button.small { padding:4px 9px; font-size:13px; }
input, select { background:#0c0f14; color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit; width:100%; }
label { display:block; color:var(--mut); font-size:13px; margin:10px 0; } label input, label select { margin-top:4px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; }
#login { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login { width:100%; max-width:360px; } .login button { width:100%; margin-top:8px; }
header { display:flex; align-items:center; gap:24px; padding:12px 22px; border-bottom:1px solid var(--line); background:var(--card); flex-wrap:wrap; position:sticky; top:0; z-index:5; }
nav { display:flex; gap:4px; } nav button { background:transparent; color:var(--mut); } nav button.on { background:#24304a; color:#fff; }
header .right { margin-left:auto; display:flex; gap:8px; align-items:center; }
.asSel { margin:0; display:flex; gap:8px; align-items:center; } .asSel select { margin:0; width:auto; min-width:170px; }
main { padding:22px; max-width:1300px; margin:0 auto; }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.grid.media { grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); margin-top:16px; }
.thumb { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; position:relative; }
.thumb img, .thumb video { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#000; }
.thumb .meta { padding:6px 8px; font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thumb .del { position:absolute; top:6px; right:6px; }
.thumb .tag { position:absolute; top:6px; left:6px; background:#000a; font-size:11px; padding:2px 6px; border-radius:6px; }
.drop { display:block; border:2px dashed var(--line); border-radius:12px; padding:28px; text-align:center; color:var(--mut); cursor:pointer; margin:0; }
.drop.over { border-color:var(--acc); color:var(--txt); } .drop input { display:none; }
.bar { height:6px; background:var(--line); border-radius:3px; margin-top:12px; overflow:hidden; } .bar i { display:block; height:100%; width:0; background:var(--acc); transition:width .2s; }
table.list { width:100%; border-collapse:collapse; background:var(--card); border-radius:12px; overflow:hidden; }
table.list th, table.list td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
table.list th { color:var(--mut); font-weight:500; font-size:13px; } table.list td.acts { text-align:right; white-space:nowrap; }
table.list td.acts button { margin-left:4px; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--bad); margin-right:6px; } .dot.on { background:var(--ok); }
.screen h3 { margin:0 0 6px; font-size:16px; } .screen .acts { display:flex; gap:6px; margin-top:10px; }
.split { display:grid; grid-template-columns:240px 1fr; gap:16px; }
.plist { list-style:none; margin:0; padding:0; } .plist li { padding:10px 12px; border-radius:8px; cursor:pointer; border:1px solid transparent; }
.plist li:hover { background:var(--card); } .plist li.on { background:var(--card); border-color:var(--acc); }
.items { list-style:none; padding:0; margin:12px 0; }
.items li { display:flex; align-items:center; gap:10px; background:#0c0f14; border:1px solid var(--line); border-radius:8px; padding:6px; margin-bottom:6px; }
.items li img, .items li video { width:90px; height:50px; object-fit:cover; border-radius:4px; background:#000; }
.items li .n { flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.items li input { width:70px; padding:4px 6px; }
.pick { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; margin-top:8px; }
.pick .thumb { cursor:pointer; } .pick .thumb:hover { border-color:var(--acc); }
dialog { background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:12px; width:min(420px, 92vw); padding:20px; }
dialog::backdrop { background:#0009; } dialog h3 { margin-top:0; } dialog .btns { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#24304a; padding:10px 18px; border-radius:8px; opacity:0; transition:opacity .2s; pointer-events:none; }
#toast.show { opacity:1; } #toast.bad { background:var(--bad); }
@media (max-width:760px) { .split { grid-template-columns:1fr; } header { gap:10px; } header .right { margin-left:0; flex-wrap:wrap; } }
/* Horarios */
dialog.wide { width:min(720px, 96vw); }
.screen .now { margin-top:8px; }
.rules { max-height:55vh; overflow:auto; margin:10px 0; }
.rule { background:#0c0f14; border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px; }
.rule .rtop { display:flex; gap:6px; align-items:center; } .rule .rtop select { flex:1; }
.rule .days, .rule .dates { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:8px; color:var(--mut); font-size:13px; }
.rule input[type=time], .rule input[type=date] { width:auto; padding:4px 6px; }
.day { margin:0; width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; cursor:pointer; color:var(--mut); user-select:none; }
.day.on { background:var(--acc); border-color:var(--acc); color:#fff; } .day input { display:none; }
.chk { margin:0; display:flex; gap:4px; align-items:center; } .chk input { width:auto; margin:0; }
.sep { width:10px; }
/* v2: acceso, ajustes, actividad, estados */
a { color:var(--acc); } .center { text-align:center; } .small { font-size:12px; } .nowrap { white-space:nowrap; }
.okmsg { color:var(--ok); min-height:1.2em; } .warn { color:#ffb347; } .err { color:var(--bad); }
hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
code { background:#0c0f14; padding:1px 5px; border-radius:4px; font-size:12px; word-break:break-all; }
.qr { background:#fff; padding:8px; border-radius:8px; width:220px; height:220px; }
.banner { background:#3a2a10; color:#ffd89a; padding:10px 22px; border-bottom:1px solid #6b4b16; font-size:14px; }
.btn { display:inline-block; background:var(--acc); color:#fff; border-radius:8px; padding:8px 14px; text-decoration:none; }
.btn.small { padding:5px 10px; font-size:13px; }
.launch { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0; }
.launch > div { background:#0c0f14; border:1px solid var(--line); border-radius:10px; padding:12px; } .launch p { margin:6px 0 10px; }
.thumb .ph { aspect-ratio:16/9; display:grid; place-items:center; font-size:30px; background:#000; }
.thumb .tag.proc { background:#b8860b; } .thumb .tag.err { background:var(--bad); } .thumb .meta.err { color:var(--bad); white-space:normal; }
.items li .ph { width:90px; height:50px; display:grid; place-items:center; background:#000; border-radius:4px; }
.settings { display:grid; gap:16px; max-width:820px; margin-top:14px; } .settings h3 { margin:0 0 6px; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .cols label { margin:6px 0; }
.savebar { position:sticky; bottom:0; padding:12px 0; background:linear-gradient(transparent, var(--bg) 40%); }
tr.warnrow td { background:#2a1616; }
@media (max-width:760px) { .launch, .cols { grid-template-columns:1fr; } }
/* Textos en pantalla */
.txtprev { aspect-ratio:16/9; position:relative; overflow:hidden; background:#000; }
.items li .txtprev { width:90px; height:50px; aspect-ratio:auto; border-radius:4px; flex:none; }
.thumb .editt { position:absolute; top:6px; right:40px; }
dialog.xwide { width:min(1100px, 97vw); }
.txed { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:18px; }
.txform textarea { width:100%; background:#0c0f14; color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit; font-size:16px; resize:vertical; margin-top:4px; }
.emojis { display:flex; flex-wrap:wrap; gap:2px; max-height:96px; overflow:auto; background:#0c0f14; border:1px solid var(--line); border-radius:8px; padding:4px; }
.emo { background:transparent; padding:3px 4px; font-size:20px; line-height:1; border-radius:6px; }
.emo:hover { background:#24304a; }
.checks, .bgtabs { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin:8px 0; }
input[type=color] { width:56px; height:34px; padding:2px; cursor:pointer; }
input[type=color].mini { width:40px; height:28px; }
input[type=range] { padding:0; accent-color:var(--acc); }
.swatches { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; margin:6px 0; }
.sw { aspect-ratio:16/10; border-radius:6px; border:2px solid transparent; padding:0; }
.sw.on { border-color:#fff; box-shadow:0 0 0 2px var(--acc); }
.txprevcol { position:sticky; top:0; align-self:start; }
.txbig { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden; margin-top:8px; border:1px solid var(--line); }
.txbig.vert { aspect-ratio:9/16; width:56%; margin-left:auto; margin-right:auto; }
@media (max-width:860px) { .txed { grid-template-columns:1fr; } }

/* Licencias */
.lic { display:inline-block; font-size:12px; padding:2px 8px; border-radius:10px; margin-top:4px; }
.lic.ok { background:#123824; color:#7ee2a8; } .lic.warn { background:#3a2a10; color:#ffd89a; } .lic.bad { background:#3a1414; color:#ff9b9b; }
.banner.bad { background:#3a1414; color:#ffb4b4; border-bottom-color:#6b1f1f; }
.screen .dev { color:var(--mut); margin-top:6px; }
.renew { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; } .renew button { flex:1; padding:12px; }