:root{
  --bg1:#eef1f6; --bg2:#e5e9f2; --fg:#1d1d1f; --muted:#6e6e73;
  --card:rgba(255,255,255,.72); --card-solid:#fff; --border:rgba(0,0,0,.08);
  --stroke:rgba(0,0,0,.06); --accent:#0a84ff; --accent-ink:#fff;
  --shadow:0 10px 40px rgba(20,30,60,.12); --shadow-sm:0 2px 10px rgba(20,30,60,.08);
  --radius:18px; --radius-sm:12px; --ok:#30d158;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg1:#0d1016; --bg2:#141922; --fg:#f5f5f7; --muted:#9aa0aa;
    --card:rgba(28,32,40,.68); --card-solid:#1b1f27; --border:rgba(255,255,255,.10);
    --stroke:rgba(255,255,255,.08); --accent:#0a84ff; --accent-ink:#fff;
    --shadow:0 12px 48px rgba(0,0,0,.5); --shadow-sm:0 2px 12px rgba(0,0,0,.4);
    --ok:#30d158;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; align-items:flex-start; justify-content:center; padding:min(9vh,88px) 20px 60px;
}
/* Fondo tipo macOS: gradientes suaves + blobs */
.bg{position:fixed; inset:0; z-index:-1; background:
  radial-gradient(60vw 60vw at 12% -8%, rgba(10,132,255,.20), transparent 60%),
  radial-gradient(52vw 52vw at 100% 0%, rgba(191,90,242,.16), transparent 55%),
  radial-gradient(60vw 60vw at 50% 120%, rgba(48,209,88,.12), transparent 55%),
  linear-gradient(180deg,var(--bg1),var(--bg2));
}
.wrap{width:100%; max-width:560px; animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.wrap.wide{max-width:1000px}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

h1{font-size:clamp(30px,5vw,42px); margin:0 0 6px; letter-spacing:-.022em; font-weight:700}
.sub{color:var(--muted); margin:0 0 30px}
.label{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.09em; font-weight:600; margin:26px 0 10px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:8px;box-shadow:0 0 0 4px rgba(48,209,88,.16)}
footer{margin-top:34px; color:var(--muted); font-size:13px}
.back{display:inline-block; margin-bottom:22px; color:var(--muted); text-decoration:none; font-size:14px; transition:color .15s}
.back:hover{color:var(--accent)}

/* Rejilla de accesos (landing) */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.btn{
  display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; color:inherit;
  background:var(--card); backdrop-filter:saturate(1.6) blur(20px); -webkit-backdrop-filter:saturate(1.6) blur(20px);
  border:1px solid var(--border); border-radius:var(--radius); padding:20px 14px; font-weight:600;
  box-shadow:var(--shadow-sm); transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, border-color .16s;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:rgba(10,132,255,.4)}
.btn:active{transform:translateY(0) scale(.99)}

/* Tarjetas de app (página de usuario) */
.cards{display:flex; flex-direction:column; gap:10px}
.card{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit;
  background:var(--card); backdrop-filter:saturate(1.6) blur(20px); -webkit-backdrop-filter:saturate(1.6) blur(20px);
  border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px;
  box-shadow:var(--shadow-sm); transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, border-color .16s;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:rgba(10,132,255,.4)}
.card .ico{
  width:40px;height:40px;flex:0 0 40px;border-radius:11px;display:grid;place-items:center;font-weight:700;
  color:var(--accent-ink); background:linear-gradient(135deg,#0a84ff,#5e5ce6); box-shadow:var(--shadow-sm);
}
.card .t{font-weight:600}
.card .go{margin-left:auto; color:var(--muted); font-size:18px}

.empty{border:1px dashed var(--border); border-radius:var(--radius); padding:30px 20px; color:var(--muted); text-align:center; background:var(--card)}

/* ---------- Panel de Ajustes ---------- */
.admin{margin-top:6px}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px}
.panels{display:grid; grid-template-columns:300px 1fr; gap:18px}
@media (max-width:760px){ .panels{grid-template-columns:1fr} }
.panel{
  background:var(--card); backdrop-filter:saturate(1.6) blur(20px); -webkit-backdrop-filter:saturate(1.6) blur(20px);
  border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm);
}
.panel h2{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 12px; font-weight:600}
.ulist{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.uitem{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; transition:background .12s,border-color .12s;
}
.uitem:hover{background:rgba(127,127,127,.08)}
.uitem.active{background:rgba(10,132,255,.12); border-color:rgba(10,132,255,.35)}
.uitem .nm{font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.uitem .cnt{font-size:12px; color:var(--muted)}
.uitem .warn{color:#ff9f0a; font-size:12px}
.pill{font-size:11px; color:var(--muted); background:rgba(127,127,127,.12); padding:2px 8px; border-radius:20px}

input[type=text],input[type=password],input[type=search]{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--card-solid); color:var(--fg); font:inherit; outline:none; transition:border-color .12s,box-shadow .12s;
}
input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(10,132,255,.18)}
.field{margin-bottom:12px}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:5px; font-weight:600}
.row{display:flex; gap:8px; align-items:center}

button,.b{
  appearance:none; border:1px solid var(--border); background:var(--card-solid); color:var(--fg);
  padding:9px 15px; border-radius:10px; font:inherit; font-weight:600; cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .12s, opacity .12s; box-shadow:var(--shadow-sm);
}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(0)}
button.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent}
button.ghost{background:transparent; box-shadow:none}
button.danger{color:#ff453a}
button:disabled{opacity:.5; cursor:default; transform:none}

.applist{display:flex; flex-direction:column; gap:2px; max-height:56vh; overflow:auto; margin:-4px -6px; padding:4px 6px}
.approw{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; transition:background .12s}
.approw:hover{background:rgba(127,127,127,.07)}
.approw input[type=checkbox]{width:19px; height:19px; accent-color:var(--accent); flex:0 0 auto; cursor:pointer}
.approw .meta{flex:1; min-width:0}
.approw .al{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.approw .au{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.approw .edit{opacity:0; transition:opacity .12s; font-size:12px}
.approw:hover .edit{opacity:1}
.searchbar{margin-bottom:10px}
.count{font-size:12px; color:var(--muted); margin-left:auto}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--card-solid); color:var(--fg); border:1px solid var(--border);
  padding:12px 18px; border-radius:12px; box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; font-weight:600; z-index:50;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{border-color:#ff453a; color:#ff453a}
.hint{font-size:12px; color:var(--muted); margin-top:6px}
.spacer{flex:1}