h2{font-size:1.05rem;margin:0 0 .3rem}
.center{text-align:center;margin:1rem 0}
.block{display:block;width:100%}
.btn{cursor:pointer}
.btn.small{padding:.45rem .8rem;font-size:.85rem}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.2rem}
.in{color:var(--accent)}.out{color:var(--warn)}

.groupbar{display:flex;gap:.4rem;padding:.6rem 1rem;overflow-x:auto;border-bottom:1px solid var(--border);scrollbar-width:none}
.groupbar::-webkit-scrollbar{display:none}
.gchip{flex:none;background:var(--card);border:1px solid var(--border);border-radius:99px;padding:.4rem .9rem;font:inherit;font-size:.85rem;color:var(--muted);cursor:pointer}
.gchip.on{border-color:var(--primary);color:#fff;background:rgba(56,189,248,.12)}

.av{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:.72rem;font-weight:800;color:#06101f;border:2px solid var(--card);margin-right:-6px;flex:none}
.avs{display:inline-flex;padding-left:0;vertical-align:middle;min-height:26px}
.avs .more{font-size:.72rem;color:var(--muted);margin-left:10px;align-self:center}

/* Planes */
.plan{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-top:.8rem}
.plan h3{font-size:1.05rem;margin-bottom:.2rem}
.plan .desc{font-size:.85rem;color:var(--muted);margin-bottom:.7rem}
.opt{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center;background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:.6rem .7rem;margin-bottom:.45rem;position:relative;overflow:hidden}
.opt.lead{border-color:var(--accent)}
.opt .fill{position:absolute;left:0;top:0;bottom:0;background:rgba(45,212,191,.10);z-index:0;transition:width .4s}
.opt>*{position:relative;z-index:1}
.opt .when{font-weight:700;font-size:.9rem;text-transform:capitalize}
.opt .where{font-size:.78rem;color:var(--muted)}
.vote{border:1px solid var(--border);background:var(--card);color:#fff;border-radius:99px;padding:.4rem .8rem;font:inherit;font-size:.82rem;cursor:pointer;display:flex;gap:.4rem;align-items:center}
.vote.on{background:var(--accent);color:#06101f;border-color:var(--accent);font-weight:700}
.plan-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.plan-actions .btn{flex:1;min-width:130px;padding:.6rem;font-size:.85rem}
.tag{display:inline-block;font-size:.7rem;font-weight:700;border-radius:99px;padding:.1rem .55rem;background:rgba(45,212,191,.15);color:var(--accent);margin-left:.4rem;vertical-align:middle}

/* Agenda */
.ev{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-top:.8rem}
.ev .head{display:grid;grid-template-columns:54px 1fr;gap:.8rem;align-items:center;margin-bottom:.8rem}
.datebox{background:linear-gradient(135deg,var(--primary),var(--violet));color:#06101f;border-radius:12px;text-align:center;padding:.4rem 0;line-height:1.1}
.datebox b{font-size:1.4rem;display:block}.datebox small{font-size:.65rem;text-transform:uppercase;font-weight:700}
.ev h3{font-size:1.05rem}.ev .meta{font-size:.82rem;color:var(--muted)}
.rsvp{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-bottom:.6rem}
.rsvp button{border:1px solid var(--border);background:var(--bg-alt);color:var(--muted);border-radius:10px;padding:.5rem .2rem;font:inherit;font-size:.82rem;cursor:pointer}
.rsvp button.on.yes{border-color:var(--accent);color:var(--accent);background:rgba(45,212,191,.1)}
.rsvp button.on.maybe{border-color:var(--warn);color:var(--warn);background:rgba(251,146,60,.1)}
.rsvp button.on.no{border-color:var(--danger);color:var(--danger);background:rgba(248,113,113,.1)}
.going{font-size:.8rem;color:var(--muted);display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem}
.tasks h4{font-size:.9rem;margin:.3rem 0 .4rem}
.task{display:grid;grid-template-columns:24px 1fr auto;gap:.6rem;align-items:center;padding:.45rem 0;border-top:1px solid var(--border);font-size:.9rem}
.task input{width:20px;height:20px;accent-color:var(--accent)}
.task.done span.t{text-decoration:line-through;color:var(--muted)}
.claim{background:none;border:1px dashed var(--primary);color:var(--primary);border-radius:99px;padding:.2rem .7rem;font:inherit;font-size:.78rem;cursor:pointer}
.addtask{display:flex;gap:.5rem;margin-top:.5rem}
.addtask input{flex:1;min-width:0;background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;padding:.55rem .7rem;color:#fff;font:inherit;font-size:.88rem}

/* Gastos */
.saldo{text-align:center;display:grid;gap:.3rem;margin:.8rem 0 1rem;padding:1.2rem}
.saldo b{font-size:2.2rem;line-height:1.1}
.saldo .sub{font-size:.82rem;color:var(--muted)}
.settle{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.65rem .8rem;margin-bottom:.45rem;font-size:.9rem}
.settle .am{margin-left:auto;font-weight:800;color:var(--accent)}
.exp{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.65rem .8rem;margin-bottom:.45rem}
.exp .nm{font-weight:700;font-size:.92rem}.exp .sub{font-size:.76rem;color:var(--muted)}
.exp .am{font-weight:800;text-align:right}

/* Ventana inferior */
dialog{border:1px solid var(--border);border-radius:18px 18px 0 0;background:var(--bg-alt);color:#fff;width:100%;max-width:480px;margin:auto auto 0;padding:1.2rem;overflow:auto;max-height:92vh}
dialog::backdrop{background:rgba(0,0,0,.6)}
.sheet h3{margin-bottom:.6rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.sheet label{display:grid;gap:.25rem;font-size:.85rem;margin-bottom:.7rem;color:var(--muted)}
.sheet input:not([type=checkbox]),.sheet select,.sheet textarea{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.65rem .8rem;color:#fff;font:inherit;width:100%}
.sheet input:focus,.sheet select:focus{outline:2px solid var(--primary);border-color:transparent}
.sheet .two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.sheet .opts-box{border:1px solid var(--border);border-radius:12px;padding:.7rem;margin-bottom:.8rem}
.sheet .opts-box .lbl{font-size:.8rem;color:var(--muted);margin-bottom:.4rem}
.sheet .actions{display:grid;gap:.6rem;margin-top:.6rem}
.checks{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.checks label{display:flex;align-items:center;gap:.4rem;margin:0;background:var(--card);border:1px solid var(--border);border-radius:99px;padding:.3rem .7rem;font-size:.82rem;color:#fff}
.checks input{width:auto;accent-color:var(--accent)}
.x{background:none;border:0;font-size:1.4rem;color:var(--muted);cursor:pointer}
.danger{color:var(--danger);background:none;border:0;font-size:.82rem;margin-top:.5rem;cursor:pointer}

/* Cabecera + barra de grupos siempre visibles y por encima de los planes */
.stickyhead{position:sticky;top:0;z-index:30;background:var(--bg)}
.stickyhead .top{position:static}
.opt,.plan,.ev{position:relative;z-index:0}

/* ===== Version web: aprovecha toda la pantalla ===== */
.confetti{position:fixed;top:-40px;z-index:99;pointer-events:none;animation:fall 2.2s ease-in forwards}
@keyframes fall{to{transform:translateY(112vh) rotate(420deg);opacity:.25}}
.plan,.ev,.settle,.exp,.opt{transition:transform .18s,box-shadow .18s,border-color .18s}
@media (hover:hover){
  .plan:hover,.ev:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.35);border-color:rgba(56,189,248,.45)}
  .opt:hover{border-color:var(--primary)}
}
@media (min-width:900px){
  .shell:not(.as-app){max-width:none;display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto auto 1fr;min-height:100vh}
  .shell:not(.as-app) .demo-banner,.shell:not(.as-app) .stickyhead{grid-column:1 / -1}
  .shell:not(.as-app) .stickyhead .top{padding:1rem 2.5rem}
  .shell:not(.as-app) .top h1{font-size:1.5rem}
  .shell:not(.as-app) .groupbar{padding:.8rem 2.5rem;gap:.6rem}
  .shell:not(.as-app) .gchip{font-size:.95rem;padding:.5rem 1.1rem}
  .shell:not(.as-app) .tabs{position:sticky;top:7.2rem;left:auto;bottom:auto;transform:none;align-self:start;grid-column:1;grid-row:3;width:auto;max-width:none;
    display:flex;flex-direction:column;gap:.35rem;padding:1.5rem 1rem;border:0;background:transparent}
  .shell:not(.as-app) .tabs button{flex-direction:row;display:flex;align-items:center;gap:.8rem;font-size:1rem;padding:.85rem 1.1rem;border-radius:14px;text-align:left;color:var(--muted)}
  .shell:not(.as-app) .tabs button span{font-size:1.3rem}
  .shell:not(.as-app) .tabs button:hover{background:var(--card);color:#fff}
  .shell:not(.as-app) .tabs button.on{background:rgba(56,189,248,.14);color:#fff}
  .shell:not(.as-app) .content{grid-column:2;grid-row:3;width:100%;max-width:1180px;padding:1.8rem 2.5rem 4rem}
  .shell:not(.as-app) .content h2{font-size:1.35rem}
  .shell:not(.as-app) #plans,.shell:not(.as-app) #events{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:1.2rem;align-items:start;margin-top:1rem}
  .shell:not(.as-app) #plans .plan,.shell:not(.as-app) #events .ev{margin-top:0}
  .shell:not(.as-app) #plans>p,.shell:not(.as-app) #events>p{grid-column:1 / -1}
  .shell:not(.as-app) .gcols{display:grid;grid-template-columns:minmax(320px,400px) 1fr;gap:2rem;align-items:start;margin-top:1rem}
  .shell:not(.as-app) .saldo b{font-size:2.8rem}
  .shell:not(.as-app) dialog{margin:auto;border-radius:20px;max-width:560px;max-height:88vh}
  .shell:not(.as-app) .toast{bottom:2rem}
}
@media (min-width:1400px){ .content{max-width:1320px} }
@media (prefers-reduced-motion:reduce){.confetti{display:none}.plan,.ev,.settle,.exp,.opt{transition:none}}

/* Selector Web | App */
.viewtoggle{display:none}
@media (min-width:900px){
  .viewtoggle{display:inline-flex;border:1px solid var(--border);border-radius:99px;overflow:hidden;margin-right:.4rem}
  .viewtoggle button{background:none;border:0;color:var(--muted);font:inherit;font-size:.82rem;padding:.35rem .85rem;cursor:pointer}
  .viewtoggle button.on{background:var(--primary);color:#06101f;font-weight:700}
  .shell.as-app{box-shadow:0 0 0 1px var(--border),0 20px 60px rgba(0,0,0,.45);border-radius:0}
  body:has(.shell.as-app){background:#060b15}
}