:root{--bg:#EDF1F4;--sf:#fff;--ink:#1E2A38;--mu:#68788A;--ln:#D7DEE5;--sun:#F2B632;--sunk:#3A2A00}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#10161D;--sf:#18202A;--ink:#E6ECF2;--mu:#8798AA;--ln:#27323E}}
:root[data-theme=dark]{--bg:#10161D;--sf:#18202A;--ink:#E6ECF2;--mu:#8798AA;--ln:#27323E}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
button{font:inherit;color:inherit;background:transparent;border:1px solid var(--ln);border-radius:8px;padding:.35rem .7rem;cursor:pointer}
button:hover{border-color:var(--mu)}
button.pri{background:var(--sun);border-color:var(--sun);color:var(--sunk);font-weight:600}
input,textarea{font:inherit;color:inherit;background:var(--bg);border:1px solid var(--ln);border-radius:8px;padding:.4rem .6rem}
header{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:var(--sf);border-bottom:1px solid var(--ln)}
.brand{font:700 1.2rem Georgia,"Times New Roman",serif;display:flex;align-items:center;gap:.5rem}
.brand:before{content:"";width:.9rem;height:.9rem;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px color-mix(in srgb,var(--sun) 30%,transparent)}
#tabs{display:flex;gap:.3rem;margin-left:.5rem;flex:1;overflow-x:auto}
#tabs button{border-color:transparent;white-space:nowrap}
#tabs button.on{border-color:var(--ink)}
#st{color:var(--mu);font-size:.85rem}
#mn{display:none}
#app{flex:1;display:flex;min-height:0}
aside{width:280px;border-right:1px solid var(--ln);background:var(--sf);display:flex;flex-direction:column}
.sb{display:flex;gap:.4rem;padding:.7rem}
.sb input{flex:1;min-width:0}
#list{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
#list li{padding:.65rem 1rem;border-bottom:1px solid var(--ln);cursor:pointer}
#list li.on{background:color-mix(in srgb,var(--sun) 22%,transparent);box-shadow:inset 3px 0 var(--sun)}
#list li.empty{color:var(--mu);cursor:default}
#list b,#list small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#list small{color:var(--mu)}
#hint{margin:0;padding:.8rem 1rem;color:var(--mu);font-size:.85rem;border-top:1px solid var(--ln)}
body:not([data-v=quick]) #hint{display:none}
body[data-v=vault] aside{display:none}
main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:auto;padding:1.5rem clamp(1rem,5vw,4rem);max-width:58rem;margin:0 auto;width:100%}
#ti{font:700 2rem Georgia,"Times New Roman",serif;border:0;background:none;padding:0;width:100%}
#meta{display:flex;gap:.5rem;margin:.5rem 0}
#meta input{flex:1;min-width:0}
#bd{flex:1;min-height:12rem;resize:none;border:0;background:none;font:1.125rem/1.75 "Iowan Old Style","Palatino Linotype",Georgia,serif;caret-color:var(--sun);padding:.5rem 0}
#bd:focus,#ti:focus{outline:0}
#pv{flex:1;font:1.125rem/1.75 Georgia,serif}
#pv pre,#pv code{background:var(--sf);padding:.1rem .3rem;border-radius:4px;font-family:ui-monospace,monospace}
#pv pre{padding:.7rem;white-space:pre-wrap}
#ed.off>:not(footer){visibility:hidden}
footer{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding-top:.7rem;border-top:1px solid var(--ln)}
#wc{margin-right:auto;color:var(--mu);font-size:.85rem}
.gate{max-width:24rem;margin:8vh auto;display:grid;gap:.7rem}
.vh{display:flex;gap:.5rem;align-items:center}
.vh h2{margin:0 auto 0 0}
.vi{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;padding:.7rem 0;border-bottom:1px solid var(--ln)}
.vi>div{flex:1;min-width:10rem}
.vi small{display:block;color:var(--mu)}
.pw{font-family:ui-monospace,monospace}
#vf{display:grid;gap:.5rem;margin:1rem 0}
#vf .row{display:flex;gap:.4rem;flex-wrap:wrap}
#toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,2rem);background:var(--ink);color:var(--bg);padding:.5rem 1rem;border-radius:8px;opacity:0;pointer-events:none;transition:.2s;max-width:90vw}
#toast.on{opacity:1;transform:translate(-50%,0)}
dialog{border:1px solid var(--ln);border-radius:12px;background:var(--sf);color:var(--ink);padding:1.5rem;width:min(22rem,92vw)}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog form{display:grid;gap:.7rem}
dialog h2{margin:0;font-family:Georgia,serif}
.err{color:#C0392B;margin:0;min-height:1.2em}
@media(max-width:800px){
  #mn{display:inline-block}
  aside{position:fixed;inset:3.6rem 0 0 0;width:auto;z-index:5;transform:translateX(-100%);transition:transform .2s}
  body.sb aside{transform:none}
  #ti{font-size:1.6rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* v2: listas, colores, tarjetas, etiquetas */
.sb{flex-wrap:wrap}.sb input{flex-basis:100%}
#chips{display:flex;gap:.3rem;flex-wrap:wrap;padding:0 .7rem .6rem}
#chips button{font-size:.8rem;padding:.1rem .55rem;border-radius:99px}
#chips button.on{background:var(--sun);border-color:var(--sun);color:var(--sunk)}
[data-c="1"]{--cc:#F28B82}[data-c="2"]{--cc:#FBBC04}[data-c="3"]{--cc:#CCFF90}[data-c="4"]{--cc:#A7FFEB}[data-c="5"]{--cc:#AECBFA}[data-c="6"]{--cc:#D7AEFB}
#ed[data-c]{background:color-mix(in srgb,var(--cc) 20%,var(--bg))}
#list li[data-c]:not(.on){background:color-mix(in srgb,var(--cc) 22%,var(--sf))}
#cl{flex:1;padding:.5rem 0}
.ck{display:flex;align-items:center;gap:.5rem;padding:.2rem 0}
.ck .hd{cursor:grab;color:var(--mu);touch-action:none;user-select:none;padding:0 .2rem}
.ck .tx,.ck #ckn{flex:1;min-width:0;border:0;background:none;font:1.1rem Georgia,serif;padding:.3rem 0}
.ck .tx:focus,#ckn:focus{outline:0}
.ck input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:var(--sun)}
.ck.dn .tx{text-decoration:line-through;color:var(--mu)}
.ck .x{border:0;color:var(--mu)}
.ck.drag{opacity:.6;background:var(--sf)}
.ck.add{color:var(--mu)}
#cow{position:relative}
#pal{position:absolute;bottom:115%;left:0;display:flex;gap:.3rem;background:var(--sf);border:1px solid var(--ln);padding:.4rem;border-radius:8px;z-index:3}
#pal button{width:1.6rem;height:1.6rem;border-radius:50%;padding:0}
body.grid aside{width:auto;flex:1;position:static;transform:none;border:0}
body.grid #ed{display:none}
body.grid #list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.7rem;padding:.7rem;align-content:start}
body.grid #list li{border:1px solid var(--ln);border-radius:10px;max-height:11rem;overflow:hidden}
body.grid #list small{white-space:pre-line;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
#gbtn{display:flex;justify-content:center}
#gw{position:relative;height:40px}
#gb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;font-weight:600}
#gbtn{position:absolute;inset:0;opacity:.01;overflow:hidden;pointer-events:none}
.or{margin:0;text-align:center;color:var(--mu);font-size:.85rem}