/* —— Paleta AURORA (claro con morado/celeste) —— */
:root{
  --bg:#f6f7ff;
  --bg-2:#ffffff;
  --panel:#ffffff;
  --primary:#8b5cf6;
  --primary-2:#22d3ee;
  --accent:#7c3aed;
  --paper:#eaf3ff;
  --muted:#5b6b86;
  --ink:#0f172a;
  --line:#e6ecff;
  --shadow:0 12px 28px rgba(27,33,57,.15);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-top: env(safe-area-inset-top);
  --paper-tab-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='60' viewBox='0 0 160 60'><rect fill='%23eaf3ff' width='160' height='60'/><path stroke='%23f43f5e' stroke-width='2' d='M14,0 L14,60'/><g stroke='%2390b7e6' stroke-width='1'><line x1='0' y1='12' x2='160' y2='12'/><line x1='0' y1='24' x2='160' y2='24'/><line x1='0' y1='36' x2='160' y2='36'/><line x1='0' y1='48' x2='160' y2='48'/></g></svg>");
}

*{box-sizing:border-box;-webkit-tap-highlight-color: transparent}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink);
  background: radial-gradient(1000px 700px at 15% -10%, #e9e5ff 0%, #e8f6ff 35%, var(--bg) 60%);
  overflow:hidden;
}

/* Utilidades */
.hidden{display:none !important}
.blurred{filter:blur(4px) brightness(0.9); pointer-events:none}
.btn{border:0; border-radius:14px; padding:12px 18px; font-weight:700; cursor:pointer; transition:.25s transform,.25s background,.25s box-shadow; box-shadow:0 8px 18px rgba(0,0,0,.12)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(90deg,var(--primary),var(--primary-2)); color:#fff}
.btn.ghost{background:#ffffffc0; border:1px solid var(--line); color:#2a3550}
.iconBtn{background:#ffffffd8;border:1px solid var(--line);color:#334155;border-radius:12px;padding:8px 10px;display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;box-shadow:0 6px 14px rgba(0,0,0,.08)}
.iconBtn:disabled{opacity:.5}
.pill{background:#fff; border:1px solid var(--line); padding:8px 12px; border-radius:999px; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.06)}

@keyframes slideOutLeft{from{opacity:1; transform:translateX(0)} to{opacity:0; transform:translateX(-40px)}}
@keyframes slideInRight{from{opacity:0; transform:translateX(40px)} to{opacity:1; transform:translateX(0)}}
.slide-out-left{animation:slideOutLeft .25s forwards}
.slide-in-right{animation:slideInRight .25s forwards}

/* Topbar */
#topbar{position:fixed; left:0; right:0; top:0; height:64px; display:flex; align-items:center; gap:12px; justify-content:space-between; padding:0 14px; background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.65)); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); z-index:20}
#leftGroup{display:flex;align-items:center;gap:12px}
#brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.3px}
#brand img{width:26px;height:26px;border-radius:6px;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,.08)}
#walletNav{display:flex;align-items:center;gap:10px}
#walletLabel{font-size:.92rem;color:#223355;white-space:nowrap;max-width:44vw;overflow:hidden;text-overflow:ellipsis}

/* Sidebar */
#sidebarBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.25);backdrop-filter:blur(2px);z-index:30}
#sidebar{position:fixed;left:0;top:0;bottom:0;width:min(86vw,310px);background:linear-gradient(180deg,#ffffff,#f4f7ff);border-right:1px solid var(--line);box-shadow:var(--shadow);z-index:31;transform:translateX(-100%);transition:transform .25s ease}
#sidebar.open{transform:translateX(0)}
.sb-head{display:flex;align-items:center;gap:8px;padding:16px 16px;border-bottom:1px solid var(--line);font-weight:900;color:#26314f}
.sb-head img{width:22px;height:22px;border-radius:6px}
.sb-search{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.sb-search input{width:100%;border:1px solid var(--line);border-radius:12px;background:#f6f9ff;color:#1f2a44;padding:12px}
.sb-list{padding:10px}
.sb-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#f8fbff;color:#1f2a44;margin:6px 8px;cursor:pointer;box-shadow:0 6px 12px rgba(0,0,0,.05)}
.sb-item:hover{background:#eef6ff}

/* Modal Temas */
.modal{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.35); z-index:60}
.modal-card{background:linear-gradient(180deg,#ffffff,#f5f8ff); border:1px solid var(--line); padding:16px; border-radius:14px; width:min(96vw,560px); color:#1f2a44; box-shadow:var(--shadow)}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:10px}
.swatch{height:38px;border-radius:10px;border:1px solid #e3e8ff;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.06)}

/* Contenido principal */
#content{position:fixed; inset:64px 0 0 0; display:grid; grid-template-columns:1fr; overflow:auto}
#wallet{padding:14px; overflow:auto; touch-action:pan-y}
.wallet-shell{max-width:1080px; margin:0 auto; padding:18px 14px 26px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,#ffffff 0%, #f3f7ff 60%); box-shadow:var(--shadow); position:relative}
.wallet-title{font-size:1.25rem; text-align:center; margin:4px 0 10px 0; color:#1f2a44; font-weight:900}

.cards{display:flex; flex-direction:column; gap:0; padding:12px; perspective:1500px}
.card{position:relative; height:128px; border-radius:16px; margin-top:-70px; background:var(--paper); color:#0b1220; box-shadow:0 12px 28px rgba(27,33,57,.18); border:1px solid #cfe1ff; cursor:grab; user-select:none; transform-style:preserve-3d; transition:transform .25s ease, box-shadow .25s ease, margin .25s ease}
.card:first-child{margin-top:0}
.card:hover{transform:translateY(-6px) rotateX(3deg); box-shadow:0 18px 38px rgba(27,33,57,.22)}
.card.dragging{opacity:.78}
.card .tab{position:absolute; left:0; right:0; top:0; height:36px; border-radius:16px 16px 0 0; border-bottom:1px solid #cbd7ff; background:var(--paper-tab-url); background-size:cover; background-position:center}
.card .title{position:absolute; left:16px; top:8px; right:16px; height:20px; font-weight:900; font-size:1rem; color:#1f3766; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 0 rgba(255,255,255,.8)}
.card .updated{position:absolute; right:14px; bottom:10px; color:#5b6b86; font-size:.8rem}
.card .preview{position:absolute; left:14px; right:14px; top:54px; bottom:12px; overflow:hidden; color:#223; font-size:.95rem}

/* Botón + único */
.plus-slot{margin:18px 12px 0 12px; border-radius:14px; border:1.5px dashed #9dbbff; background:linear-gradient(180deg,#f5f9ff,#eef6ff); height:66px; display:flex; align-items:center; justify-content:flex-end; padding-right:18px; user-select:none}
.plus-slot button{border:0;border-radius:12px;width:48px;height:48px;font-size:24px;font-weight:900; background:linear-gradient(90deg,var(--primary),var(--primary-2)); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.16); cursor:pointer}

/* Navegación inferior minimalista */
.bottomNav{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:12px}
.bottomNav .iconBtn{background:#fff}

/* Editor */
.overlay{position:fixed; inset:0; background:rgba(15,23,42,.18); backdrop-filter:blur(6px); display:grid; place-items:center; z-index:50}
.editor{width:100%; height:100%; background:linear-gradient(180deg,#f5f7ff 0%, #f7f9ff 60%); border-top:1px solid var(--line); box-shadow:var(--shadow); display:flex; flex-direction:column}
.toolbar{display:flex; gap:8px; align-items:center; padding:8px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.8)); flex-wrap:wrap}
.toolbar input[type="text"]{flex:1; min-width:140px; background:#f6f9ff; color:#1f2a44; border:1px solid var(--line); border-radius:12px; padding:10px 12px; outline:none}
.toolbar select{background:#f6f9ff; color:#1f2a44; border:1px solid var(--line); border-radius:10px; padding:8px 10px}
.toolbar .mini{padding:8px 10px; border-radius:10px}
.pageWrap{flex:1; display:grid; place-items:center; overflow:hidden; position:relative}
.page{width:min(820px,92vw); height:calc(100% - 12px); background:white; color:#0b1220; border-radius:14px; box-shadow:0 18px 45px rgba(0,0,0,.15); padding:22px; outline:none; overflow:auto; line-height:1.6; font-size:var(--page-font,16px); font-family:var(--page-font-family, Inter, Arial, sans-serif)}
.fab{position:fixed; right:18px; bottom:calc(18px + var(--safe-bottom)); border-radius:999px; padding:14px 18px; font-weight:800; box-shadow:0 10px 28px rgba(0,0,0,.15); z-index:55}
.danger{background:#c62828; color:white}

/* Menú de Añadir (popover) */
#addMenu{position:absolute; right:12px; top:60px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:var(--shadow); z-index:60}
#addMenu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:10px}
#addMenu button:hover{background:#eef6ff}

/* Sticky oculto */
.sticky{position:absolute; min-width:220px; min-height:120px; max-width:80%; background:rgba(139,92,246,.10); border:1px solid #d9d6ff; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.12); backdrop-filter:blur(2px); overflow:hidden}
.sticky .hd{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; background:linear-gradient(90deg,#ede9fe,#e0f2fe); cursor:move}
.sticky .ttl{font-weight:800; color:#4338ca; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sticky .btns button{border:0;background:transparent;color:#334155;cursor:pointer}
.sticky .bd{padding:10px; color:#1f2a44}
.sticky.min .bd{display:none}
.anchor{color:#7c3aed; text-decoration:underline; text-decoration-color:#a78bfa; cursor:pointer}

/* Bubble de link */
.linkbubble{position:absolute; background:rgba(255,255,255,.85); border:1px solid var(--line); border-radius:12px; padding:8px 12px; box-shadow:0 8px 18px rgba(0,0,0,.12); cursor:move}
.linkbubble a{color:#2563eb; text-decoration:none; font-weight:800}

/* Overlay de búsqueda */
#searchOverlay{position:fixed; inset:64px 0 0 0; background:rgba(255,255,255,.5); backdrop-filter:blur(6px); z-index:45; display:none}
#searchPanel{max-width:900px; margin:24px auto; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--shadow)}
#suggestions .item{padding:10px; border-radius:10px; border:1px solid var(--line); background:#f7fbff; margin:8px 0; cursor:pointer}
#suggestions .item .t{font-weight:800; color:#25304e}
#suggestions .item .p{color:#506080; font-size:.9rem}

/* Switcher de wallets (grid) */
#gridBtn{position:fixed; right:18px; bottom:calc(90px + var(--safe-bottom)); width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); box-shadow:0 10px 24px rgba(0,0,0,.12); z-index:22}
#gridBtn .dots{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;width:20px;height:20px}
#gridBtn .dots span{background:linear-gradient(90deg,var(--primary),var(--primary-2)); border-radius:3px}

#gridOverlay{position:fixed; inset:0; background:rgba(255,255,255,.7); backdrop-filter:blur(6px); z-index:80; display:none}
#gridWrap{max-width:1100px; margin:60px auto; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px}
#grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.tile{border:1px solid var(--line); border-radius:14px; padding:10px; text-align:center; background:#f6f9ff; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.06)}
.tile img{width:64px; height:64px; object-fit:contain; display:block; margin:8px auto}
.tile .n{font-weight:800; color:#273355; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile.add{background:linear-gradient(90deg,var(--primary),var(--primary-2)); color:#fff}

/* Pantalla de inicio (ingresa tu nombre) */
#login{position:fixed; inset:0; display:grid; place-content:center; text-align:center; background:radial-gradient(800px 550px at 50% 0%, #eef1ff 0%, #ffffff 60%); z-index:100}
#loginCard{background:#fff; border:1px solid var(--line); padding:22px; border-radius:16px; box-shadow:var(--shadow); min-width:min(92vw,440px)}
#login img{width:48px; height:48px; border-radius:10px; object-fit:cover}
#login h1{margin:10px 0 2px; font-size:1.6rem}
#login .row{display:flex;gap:8px;margin-top:12px}
#login input{flex:1; border:1px solid var(--line); border-radius:10px; padding:10px; background:#f6f9ff}

/* Context menu (notas) */
.ctx{
  position:fixed; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:8px; box-shadow:var(--shadow); z-index:70;
}
.ctx button{
  display:block; width:180px; text-align:left; background:transparent;
  border:0; padding:10px 12px; border-radius:10px; cursor:pointer;
  color:#1f2a44;
}
.ctx button:hover{ background:#eef6ff; }
.ctx .disabled{ opacity:.5; pointer-events:none; }