:root{--bg:#F5F3FF;--card:#FFFFFF;--text:#1F1637;--muted:#6B6585;--border:#EDE9FE;--nav:#FFFFFF}
.dark{--bg:#170A56;--card:#241470;--text:#FFFFFF;--muted:#C4B8F0;--border:#3A2A8C;--nav:#1E0F66}
*{-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.muted{color:var(--muted)}

.app-head{display:flex;align-items:center;gap:.75rem;padding:1rem 1rem .25rem}

.card{background:var(--card);border:1px solid var(--border);border-radius:1.25rem;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.inp{width:100%;padding:.8rem 1rem;border-radius:1rem;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:1rem;outline:none}
.inp:focus{border-color:#5A37B4;box-shadow:0 0 0 3px rgba(90,55,180,.2)}
textarea.inp{resize:vertical}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.1rem;border-radius:1rem;font-weight:600;border:0;cursor:pointer;transition:transform .1s,background .2s}
.btn:active{transform:scale(.97)}
.btn-blue{background:#2563EB;color:#fff}
.btn-purple{background:#5A37B4;color:#fff}
.btn-green{background:#22C55E;color:#fff}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-white{background:var(--card);color:var(--text);border:1px solid var(--border)}
.btn-icon{width:2.6rem;height:2.6rem;padding:0;border-radius:.9rem;background:transparent;color:var(--muted);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.btn-icon:disabled{opacity:.3}
.btn-icon.on{background:#5A37B4;color:#fff;border-color:#5A37B4}

/* Botón de borrar universal */
.btn-del{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-width:2.6rem;height:2.6rem;padding:0 .8rem;border:0;border-radius:.9rem;background:#DC2626;color:#fff;font-weight:700;cursor:pointer;transition:all .25s}
.btn-del span{white-space:nowrap}
.btn-del.armed{background:#EAB308;color:#1F1637;padding:0 1.2rem;transform:scale(1.08)}

/* Switch */
.sw{position:relative;display:inline-block;width:3rem;height:1.75rem;flex-shrink:0}
.sw input{opacity:0;width:0;height:0}
.sw span{position:absolute;inset:0;background:#CBD5E1;border-radius:999px;transition:.2s;cursor:pointer}
.sw span:before{content:"";position:absolute;height:1.35rem;width:1.35rem;left:.2rem;top:.2rem;background:#fff;border-radius:50%;transition:.2s}
.sw input:checked+span{background:#5A37B4}
.sw input:checked+span:before{transform:translateX(1.25rem)}

/* Navegación inferior */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:28rem;display:flex;background:var(--nav);border-top:1px solid var(--border);padding:.4rem .25rem calc(.4rem + env(safe-area-inset-bottom));z-index:30;box-shadow:0 -2px 10px rgba(0,0,0,.05)}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.45rem 0;border:0;background:transparent;color:var(--muted);font-size:.65rem;font-weight:600;border-radius:1rem;cursor:pointer}
.nav button i{font-size:1.2rem}
.nav button.active{color:#5A37B4}
.dark .nav button.active{color:#fff;background:rgba(255,255,255,.12)}
.nav button.active:not(:focus-visible){background:rgba(90,55,180,.1)}
.dark .nav button.active{background:rgba(255,255,255,.12)}

/* Carrusel */
.carousel{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;padding:1.1rem}
.dots{display:flex;justify-content:center;gap:.4rem;margin-top:.6rem}
.dot{width:.5rem;height:.5rem;border-radius:999px;background:#CBD5E1;transition:all .2s}
.dot.on{background:#5A37B4;width:1.25rem}
.bars{display:flex;align-items:flex-end;gap:.5rem;height:7rem;margin-top:.8rem}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bars i{display:block;width:100%;border-radius:.6rem .6rem .2rem .2rem;background:linear-gradient(#5A37B4,#2563EB);font-style:normal}
.bars small{font-size:.65rem;color:var(--muted);margin-top:.25rem}

.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pinned{background:#5A37B4;color:#fff;border-radius:1.25rem;padding:1.1rem;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.dark .pinned{background:#5A37B4}

/* Modal */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet{width:100%;max-width:28rem;max-height:90vh;overflow:auto;padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));border-radius:1.5rem 1.5rem 0 0;animation:up .25s ease}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* Toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + env(safe-area-inset-bottom));background:#1F1637;color:#fff;padding:.85rem 1.1rem;border-radius:1rem;display:flex;gap:1rem;align-items:center;z-index:70;box-shadow:0 6px 20px rgba(0,0,0,.3);width:max-content;max-width:92vw;animation:up .2s ease}
.toast button{background:transparent;border:0;color:#93C5FD;font-weight:700;cursor:pointer;padding:0}
.toast.ok{background:#F0FDF4;color:#15803D;border:1px solid #22C55E}

/* Tutorial */
.tut-ov{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:80}
.tut-green{position:fixed;top:.75rem;left:.75rem;right:.75rem;max-width:26rem;margin:0 auto;background:#F0FDF4;color:#22C55E;border:1px solid #22C55E;border-radius:1rem;padding:.8rem 1rem;font-weight:600;font-size:.9rem;z-index:82;text-align:center}
.tut-card{position:fixed;left:1rem;right:1rem;max-width:26rem;margin:0 auto;top:28%;padding:1.25rem;z-index:82}
.tut-arrow{position:fixed;font-size:1.8rem;color:#fff;z-index:83;animation:bounce 1s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.tut-btns{position:fixed;right:.75rem;bottom:calc(92px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;max-width:92vw;z-index:83}
.tut-btns .btn{padding:.65rem .9rem;font-size:.9rem}
.btn-mostaza{background:#EAB308;color:#1F1637}