/* Kunda Island — tema oscuro, mobile-first */
:root{
    /* Tema Océano (teal) */
    --bg:#06141a; --bg-2:#0a1b23;
    --card:#0e222b; --card-2:#123240;
    --border:#1c3b45;
    --blue:#14b8a6; --blue-2:#0d9488;
    --green:#22c55e; --yellow:#facc15; --red:#ef4444;
    --text:#eafcf8; --muted:#8fb3b0;
    --radius:16px; --radius-sm:10px;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --sidebar-w:248px; --topbar-h:60px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    background:var(--bg); color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--bg-2); padding:2px 7px; border-radius:6px; font-size:.9em; border:1px solid var(--border)}
h1,h2,h3{margin:0 0 .4em}
hr.sep{border:none; border-top:1px solid var(--border); margin:8px 0}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.ta-right{text-align:right}
.text-ok{color:var(--green)} .text-warn{color:var(--yellow)}

/* ---------- Topbar ---------- */
.topbar{
    position:sticky; top:0; z-index:40; height:var(--topbar-h);
    display:flex; align-items:center; gap:14px; padding:0 16px;
    background:rgba(10,27,35,.92); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
}
.topbar__burger{
    background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer;
    display:none; padding:4px 6px; border-radius:8px;
}
.topbar__brand{color:var(--text); font-weight:700; font-size:1.1rem; display:flex; align-items:center; gap:8px}
.topbar__brand:hover{text-decoration:none}
.topbar__logo{font-size:1.3rem}
.topbar__trip{color:var(--muted); font-size:.9rem; margin-left:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar__user{margin-left:auto; display:flex; align-items:center; gap:12px}
.topbar__name{font-size:.9rem; color:var(--muted); display:flex; align-items:center; gap:6px}
.topbar__bell{position:relative; text-decoration:none; font-size:1.15rem; line-height:1; padding:5px; border-radius:8px; display:inline-flex}
.topbar__bell:hover{background:var(--bg-2)}
.topbar__badge{position:absolute; top:-3px; right:-4px; background:var(--red); color:#fff; font-size:.62rem; font-weight:700; min-width:16px; height:16px; padding:0 4px; border-radius:999px; display:flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 0 2px var(--bg-2)}

/* ---------- Layout ---------- */
.app-body{display:flex; min-height:calc(100vh - var(--topbar-h))}
.sidebar{
    width:var(--sidebar-w); flex-shrink:0; background:var(--bg-2);
    border-right:1px solid var(--border); padding:16px 12px;
    display:flex; flex-direction:column;
}
.content{flex:1; padding:22px; max-width:1080px; width:100%; margin:0 auto}

/* ---------- Nav ---------- */
.nav{display:flex; flex-direction:column; gap:4px}
.nav__item{
    display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:var(--radius-sm);
    color:var(--muted); font-weight:500; font-size:.96rem;
}
.nav__item:hover{background:var(--card); color:var(--text); text-decoration:none}
.nav__item.active{background:var(--blue); color:#fff; box-shadow:var(--shadow)}
.nav__ic{width:22px; text-align:center}
.nav__item--soon{opacity:.5; cursor:not-allowed}
.nav__sep{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:#557a76; margin:16px 0 6px 13px}
.sidebar__foot{margin-top:auto; padding:14px 13px 4px; color:#5f8580; font-size:.8rem; line-height:1.4}
.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:29}

/* ---------- Cards & headings ---------- */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:18px; box-shadow:var(--shadow)}
.card--accent{border-color:var(--blue); background:linear-gradient(180deg,rgba(20,184,166,.12),var(--card))}
.card--muted{background:var(--bg-2); box-shadow:none}
.card__title{font-size:1.05rem; margin-bottom:12px}
.page-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.page-title{font-size:1.5rem; margin:0}
.page-sub{color:var(--muted); margin:4px 0 0}
.mini-title{font-size:.95rem; color:var(--muted); margin:0}

/* ---------- Stat grid ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px}
.stat-grid--3{grid-template-columns:repeat(3,1fr)}
.stat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center}
.stat__val{font-size:1.5rem; font-weight:700; letter-spacing:-.02em}
.stat__val--ok{color:var(--green)} .stat__val--warn{color:var(--yellow)}
.stat__label{color:var(--muted); font-size:.82rem; margin-top:4px}

/* ---------- Progress ---------- */
.progress-head{display:flex; justify-content:space-between; margin-bottom:8px}
.progress{height:14px; background:var(--bg-2); border-radius:999px; overflow:hidden; border:1px solid var(--border)}
.progress__bar{height:100%; background:var(--green); border-radius:999px; transition:width .5s ease}

/* ---------- Grids ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}

/* ---------- Feed ---------- */
.feed{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.feed__item{display:flex; gap:11px}
.feed__dot{width:9px; height:9px; border-radius:50%; background:var(--blue); margin-top:7px; flex-shrink:0}
.feed__text{font-size:.92rem}
.feed__time{color:var(--muted); font-size:.78rem}

/* ---------- Actividad (feed por día) ---------- */
.actday{margin-bottom:16px}
.actday__label{font-size:.95rem; color:var(--muted); margin:0 0 8px; display:flex; align-items:center; gap:6px}
.actday__card{padding:4px 16px}
.actfeed{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.actitem{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--border)}
.actitem:last-child{border-bottom:none}
.actitem__ico{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; background:var(--bg-2)}
.actitem__ico--blue{background:rgba(20,184,166,.16)}
.actitem__ico--green{background:rgba(34,197,94,.16)}
.actitem__ico--yellow{background:rgba(250,204,21,.16)}
.actitem__ico--red{background:rgba(239,68,68,.16)}
.actitem__body{min-width:0; padding-top:3px}
.actitem__text{color:var(--text); line-height:1.4}
.actitem__meta{color:var(--muted); font-size:.78rem; margin-top:2px}

/* ---------- Members ---------- */
.member-list{display:flex; flex-direction:column; gap:12px}
.crew-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin-bottom:18px}
.member{display:flex; flex-direction:column; gap:12px; margin-bottom:0}
.member__head{display:flex; align-items:flex-start; gap:12px}
.member__id{flex:1; min-width:0}
.avatar{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--blue),#22d3ee); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; font-size:1.05rem}
.member__name{font-weight:600; display:flex; align-items:center; gap:8px; margin-bottom:6px}
.badges{display:flex; gap:6px; flex-wrap:wrap}
.member__progress{height:6px; background:var(--bg-2); border-radius:999px; overflow:hidden; border:1px solid var(--border)}
.member__progress-bar{height:100%; background:var(--green); border-radius:999px; transition:width .5s ease}
.member__money{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-top:12px; border-top:1px solid var(--border)}
.member__paid{font-weight:600}
@media (max-width:600px){ .crew-grid{grid-template-columns:1fr} }

/* ---------- Badges & tags ---------- */
.badge{display:inline-block; padding:3px 9px; border-radius:999px; font-size:.74rem; font-weight:600; border:1px solid transparent}
.badge--confirmed,.badge--approved{background:rgba(34,197,94,.15); color:#4ade80; border-color:rgba(34,197,94,.4)}
.badge--pending{background:rgba(250,204,21,.15); color:var(--yellow); border-color:rgba(250,204,21,.4)}
.badge--not_going,.badge--rejected{background:rgba(239,68,68,.15); color:#f87171; border-color:rgba(239,68,68,.4)}
.badge--ppok{background:rgba(20,184,166,.15); color:#5eead4; border-color:rgba(20,184,166,.4)}
.badge--muted{background:var(--bg-2); color:var(--muted); border-color:var(--border)}
.tag{display:inline-block; padding:1px 7px; border-radius:6px; font-size:.68rem; background:var(--bg-2); color:var(--muted); border:1px solid var(--border); text-transform:uppercase; letter-spacing:.04em}
.tag--admin{background:rgba(20,184,166,.2); color:#5eead4; border-color:transparent}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
.table{width:100%; border-collapse:collapse; font-size:.92rem}
.table th,.table td{padding:11px 12px; text-align:left; border-bottom:1px solid var(--border)}
.table th{color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em}
.table tfoot td{border-bottom:none; border-top:2px solid var(--border)}

/* ---------- Forms ---------- */
.form{display:flex; flex-direction:column; gap:14px}
.form--grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field--full{grid-column:1 / -1}
.field--action{display:flex; align-items:flex-end}
.field__label{font-size:.82rem; color:var(--muted); font-weight:500}
.input{
    width:100%; padding:11px 13px; background:var(--bg-2); color:var(--text);
    border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.95rem; font-family:inherit;
}
.input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(20,184,166,.2)}
.input--sm{padding:7px 10px; font-size:.85rem}
select.input{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px}
.preview{max-width:180px; border-radius:var(--radius-sm); border:1px solid var(--border); margin-top:4px}
.inline{display:inline}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:11px 18px; border-radius:var(--radius-sm); border:1px solid transparent;
    font-size:.92rem; font-weight:600; font-family:inherit; cursor:pointer; transition:filter .15s, background .15s;
}
.btn:hover{text-decoration:none; filter:brightness(1.08)}
.btn--primary{background:var(--blue); color:#fff}
.btn--success{background:var(--green); color:#052e16}
.btn--danger{background:var(--red); color:#fff}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn--ghost:hover{background:var(--card-2)}
.btn--sm{padding:7px 12px; font-size:.82rem}
.btn--block{width:100%}
.linkbtn{background:none; border:none; color:var(--blue); cursor:pointer; font-size:.9rem; padding:0; font-family:inherit}

/* ---------- Flash ---------- */
.flash{padding:12px 15px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:.92rem; border:1px solid transparent}
.flash--success{background:rgba(34,197,94,.14); color:#4ade80; border-color:rgba(34,197,94,.4)}
.flash--error{background:rgba(239,68,68,.14); color:#f87171; border-color:rgba(239,68,68,.4)}

/* ---------- Row edit (details) ---------- */
.rowedit{display:inline-block}
.rowedit summary{list-style:none; display:inline-flex}
.rowedit summary::-webkit-details-marker{display:none}
.rowedit__panel{margin-top:12px; padding:14px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-sm); display:flex; flex-direction:column; gap:12px; text-align:left; min-width:min(420px,80vw)}

/* ---------- PayPal box ---------- */
.paypal-box{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0}
.paypal-box code{font-size:1rem; padding:8px 12px}
.note-highlight{background:rgba(250,204,21,.12); border:1px solid rgba(250,204,21,.35); color:#fde68a; padding:9px 12px; border-radius:var(--radius-sm); font-size:.88rem; margin:10px 0}

/* ---------- Contributions list ---------- */
.clist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.clist__item{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--border)}
.clist__item:last-child{border-bottom:none; padding-bottom:0}
.clist__amount{font-weight:600}
.clist__time{color:var(--muted); font-size:.78rem; margin-top:3px}

/* ---------- Approve ---------- */
.approve{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.approve__shot{flex-shrink:0; display:block}
.approve__shot img{width:84px; height:84px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); display:block}
.approve__shot--none{width:84px; height:84px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:var(--bg-2); border-radius:var(--radius-sm); border:1px dashed var(--border); font-size:1.5rem}
.approve__nocap{font-size:.66rem; color:var(--muted)}
.approve__info{flex:1; min-width:150px; display:flex; flex-direction:column; gap:3px}
.approve__amount{font-size:1.2rem; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.approve__actions{display:flex; gap:8px; flex-shrink:0}

/* ---------- Auth ---------- */
body.is-auth .content{max-width:none; display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px}
.auth{width:100%; max-width:390px}
.auth__brand{text-align:center; margin-bottom:22px}
.auth__logo{font-size:3rem}
.auth__brand h1{font-size:1.8rem; margin:6px 0 2px}
.auth__tag{color:var(--muted); margin:0}
.auth__card{margin-bottom:0}
.auth__trip{font-size:.9rem; color:var(--muted); margin:0 0 14px}
.auth__back{margin:14px 0 0; text-align:center}

/* ---------- Planes / Ideas ---------- */
.idea-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin-bottom:18px}
.idea-grid .card{margin-bottom:0}
.idea{display:flex; flex-direction:column; padding:0; overflow:hidden; cursor:pointer; transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease}
.idea:hover,.idea:focus-visible{transform:translateY(-3px); border-color:var(--blue); box-shadow:0 12px 26px rgba(0,0,0,.3); outline:none}
.idea__cover{position:relative; height:150px; background:var(--bg-2); overflow:hidden}
.idea__cover-img{width:100%; height:100%; object-fit:cover; display:block}
.idea__cover-empty{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.8rem; background:linear-gradient(135deg,#16233a,#0c1826)}
.idea__cat{position:absolute; left:10px; bottom:10px; background:rgba(3,8,17,.72); color:#fff; border-radius:999px; padding:3px 10px; font-size:.75rem; backdrop-filter:blur(3px)}
.idea__count{position:absolute; right:10px; top:10px; background:rgba(3,8,17,.72); color:#fff; border-radius:999px; padding:3px 9px; font-size:.72rem; backdrop-filter:blur(3px)}
.idea__flag{position:absolute; right:10px; bottom:10px; border-radius:999px; padding:2px 9px; font-size:.7rem; font-weight:700}
.idea__flag--ok{background:rgba(34,197,94,.92); color:#04140a}
.idea__flag--no{background:rgba(148,163,184,.9); color:#0b1220}
.idea__body{padding:12px 14px; display:flex; flex-direction:column; gap:10px; flex:1}
.idea__title{font-size:1.02rem; margin:0; line-height:1.28}
.idea__foot{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto}
.idea__foot form{margin:0}
.idea--discarded{opacity:.6}
.idea--approved{border-color:rgba(34,197,94,.45)}
.votebtn{background:var(--bg-2); border:1px solid var(--border); color:var(--text); padding:6px 12px; border-radius:999px; cursor:pointer; font-size:.9rem; font-weight:600; font-family:inherit; display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.votebtn:hover{filter:brightness(1.15); border-color:rgba(239,68,68,.5)}
.votebtn--on{background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.4)}

/* Detalle de idea (modal ficha del plan) */
.imodal{position:fixed; inset:0; z-index:100; background:rgba(3,8,17,.82); display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto}
.imodal[hidden]{display:none}
.imodal__card{position:relative; width:100%; max-width:680px; max-height:90vh; overflow-y:auto; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.5)}
.imodal__x{position:absolute; top:12px; right:12px; z-index:5; background:rgba(3,8,17,.55); border:1px solid rgba(255,255,255,.2); color:#fff; width:34px; height:34px; border-radius:50%; font-size:1.1rem; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center}
.imodal__x:hover{background:rgba(3,8,17,.85)}

.ihero{position:relative; height:320px; background:#050d18; overflow:hidden; border-radius:16px 16px 0 0}
.ihero__bg{position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(26px) brightness(.5); transform:scale(1.08)}
.ihero__bg[hidden]{display:none}
.ihero__img{position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block}
.ihero__img[hidden]{display:none}
.ihero__empty{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:1rem}
.ihero__empty[hidden]{display:none}
.ihero__empty-ico{font-size:2.6rem}
.ihero__chips{position:absolute; left:14px; bottom:14px; z-index:2; display:flex; gap:6px; flex-wrap:wrap}
.ichip{background:rgba(3,8,17,.72); color:#fff; border-radius:999px; padding:4px 11px; font-size:.78rem; backdrop-filter:blur(3px)}
.ichip[hidden]{display:none}
.ichip--ok{background:rgba(34,197,94,.92); color:#04140a; font-weight:600}
.ichip--no{background:rgba(148,163,184,.92); color:#0b1220; font-weight:600}
.ihero__count{position:absolute; right:14px; bottom:14px; z-index:2; background:rgba(3,8,17,.72); color:#fff; border-radius:999px; padding:4px 10px; font-size:.74rem; backdrop-filter:blur(3px)}
.ihero__count[hidden]{display:none}
.ihero__nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(3,8,17,.5); border:1px solid rgba(255,255,255,.25); color:#fff; width:42px; height:42px; border-radius:50%; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center}
.ihero__nav:hover{background:rgba(3,8,17,.85)}
.ihero__nav[hidden]{display:none}
.ihero__nav--prev{left:12px}
.ihero__nav--next{right:12px}

.ithumbs{display:flex; gap:8px; padding:12px 16px 0; flex-wrap:wrap}
.ithumbs[hidden]{display:none}
.ithumb{width:58px; height:44px; border-radius:8px; border:2px solid transparent; background:var(--bg-2) center/cover no-repeat; cursor:pointer; padding:0; opacity:.55; transition:opacity .12s, border-color .12s}
.ithumb:hover{opacity:1}
.ithumb--on{opacity:1; border-color:var(--blue)}

.ibody{padding:18px 20px 22px}
.idetail__title{font-size:1.5rem; margin:0 0 10px; line-height:1.22}
.idetail__by{display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.9rem; margin:0 0 14px}
.idetail__avatar{width:30px; height:30px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0}
.idetail__by strong{color:var(--text); font-weight:600}
.idetail__desc{white-space:pre-line; line-height:1.6; margin:0 0 16px; color:var(--text)}
.idetail__actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.votebtn--lg{font-size:1rem; padding:9px 18px}
.idetail__manage{border-top:1px solid var(--border); padding-top:14px; margin-top:16px}
.idetail__manage>summary{cursor:pointer; font-weight:600; color:var(--muted); list-style:none; user-select:none}
.idetail__manage>summary::-webkit-details-marker{display:none}
.idetail__manage>summary:hover{color:var(--text)}
.idetail__manage[open]>summary{color:var(--text); margin-bottom:10px}
.idetail__manage-body{display:flex; flex-direction:column; gap:12px}
textarea.input{resize:vertical; min-height:66px; font-family:inherit; line-height:1.45}
@media (max-width:560px){
    .imodal{padding:0}
    .imodal__card{max-height:100vh; border-radius:0}
    .ihero{height:240px; border-radius:0}
}

/* ---------- Chips de filtro ---------- */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.chip{background:var(--card); border:1px solid var(--border); color:var(--muted); padding:7px 14px; border-radius:999px; cursor:pointer; font-size:.85rem; font-family:inherit}
.chip--on{background:var(--blue); border-color:transparent; color:#fff}
.idea-filterbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.fsel{display:inline-flex; align-items:center; gap:4px; background:var(--bg-2); border:1px solid var(--border); border-radius:999px; padding:5px 10px 5px 14px}
.fsel:focus-within{border-color:var(--blue)}
.fsel__lbl{color:var(--muted); font-size:.85rem}
.fsel__sel{background:transparent; border:none; color:var(--text); font-family:inherit; font-size:.88rem; padding:2px 2px; cursor:pointer; outline:none; max-width:180px}
.fsel__sel option{background:var(--card); color:var(--text)}

/* ---------- Checklist (compras) ---------- */
.checklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.checklist__item{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border)}
.checklist__item:last-child{border-bottom:none}
.checklist__item--bought .checklist__title{text-decoration:line-through; color:var(--muted)}
.checklist__item--not_needed{opacity:.5}
.checklist__title{font-weight:600}
.checklist__actions{display:flex; gap:8px; align-items:center; flex-shrink:0}

/* ---------- Lista de compras ---------- */
.shop-cat{padding:14px 18px; margin-bottom:14px}
.shop-cat__head{font-size:1rem; margin:0 0 4px; display:flex; align-items:center; gap:8px}
.shop-cat__ico{font-size:1.15rem}
.shoplist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.shopitem{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border)}
.shopitem:last-child{border-bottom:none}
.shopitem__check{position:relative; flex-shrink:0; display:inline-flex; cursor:pointer}
.shopitem__check input{position:absolute; inset:0; opacity:0; cursor:pointer; margin:0}
.shopitem__box{width:22px; height:22px; border:2px solid var(--border); border-radius:6px; display:flex; align-items:center; justify-content:center; transition:background .12s, border-color .12s}
.shopitem__box::after{content:'✓'; color:#04140a; font-size:.9rem; font-weight:700; opacity:0; transform:scale(.6); transition:.12s}
.shopitem__check input:checked + .shopitem__box{background:var(--green); border-color:var(--green)}
.shopitem__check input:checked + .shopitem__box::after{opacity:1; transform:scale(1)}
.shopitem__check:hover .shopitem__box{border-color:var(--green)}
.shopitem__main{flex:1; min-width:0}
.shopitem__title{font-weight:600}
.shopitem__meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:2px}
.shopitem__edit{flex-shrink:0; opacity:.7}
.shopitem__edit:hover{opacity:1}
.shopitem--bought .shopitem__title{text-decoration:line-through; color:var(--muted)}
.shopitem--not_needed{opacity:.55}
.shopitem--not_needed .shopitem__title{text-decoration:line-through}

/* ---------- Estado del viaje ---------- */
.statuslist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.statuslist__item{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border)}
.statuslist__item:last-child{border-bottom:none}
.statuslist__icon{font-size:1.15rem; flex-shrink:0}
.statuslist__title{flex:1; font-weight:500}
.statuslist__item--done .statuslist__title{color:var(--muted)}
.statuslist__actions{display:flex; gap:8px; align-items:center; flex-shrink:0}

/* ---------- Modales ---------- */
.modal{position:fixed; inset:0; background:rgba(3,8,17,.72); backdrop-filter:blur(3px); z-index:80; display:flex; align-items:flex-start; justify-content:center; padding:28px 16px; overflow-y:auto}
.modal[hidden]{display:none}
.modal__box{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); width:100%; max-width:560px; margin:auto; box-shadow:0 24px 70px rgba(0,0,0,.5); animation:modalIn .18s ease}
@keyframes modalIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.modal__head{display:flex; justify-content:space-between; align-items:center; padding:15px 18px; border-bottom:1px solid var(--border)}
.modal__head h2{margin:0; font-size:1.1rem}
.modal__close{background:none; border:none; color:var(--muted); font-size:1.5rem; cursor:pointer; line-height:1; padding:0 4px}
.modal__close:hover{color:var(--text)}
.modal__body{padding:18px}
.modal__body .form,.modal__body .form--grid{margin:0}
.modal-actions{display:flex; gap:8px; flex-wrap:wrap}
body.modal-open{overflow:hidden}
.page-head .btn{white-space:nowrap}

/* ---------- Galería de recuerdos ---------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin-bottom:18px}
.memory{margin:0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; display:flex; flex-direction:column}
.memory__media{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--bg-2)}
.memory__cap{padding:8px 10px; font-size:.8rem}
.memory__text{margin-bottom:4px}
.memory__meta{display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--muted); font-size:.72rem}
.memory__meta form{margin:0}

.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px}
.lightbox[hidden]{display:none}
.lightbox__img{max-width:95vw; max-height:90vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox__close{position:absolute; top:14px; right:20px; background:none; border:none; color:#fff; font-size:2rem; cursor:pointer; line-height:1}

/* ---------- Recuerdos 2.0 ---------- */
.page-head__actions{display:flex; gap:10px; flex-wrap:wrap}
.memory{position:relative}
.memory--featured{border:1px solid rgba(250,204,21,.55)}
.memory__star{position:absolute; top:6px; left:6px; z-index:2; font-size:1rem; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.memory__manage{display:flex; gap:8px; align-items:center}
.reactions{display:flex; gap:6px; margin:6px 0}
.reactions form{margin:0}
.react{background:var(--bg-2); border:1px solid var(--border); color:var(--text); border-radius:999px; padding:3px 9px; font-size:.85rem; cursor:pointer; font-family:inherit; line-height:1.3}
.react:hover{filter:brightness(1.2)}
.react--on{background:rgba(20,184,166,.18); border-color:rgba(20,184,166,.5)}
.album{margin-bottom:18px}
.album__day{font-size:1rem; color:var(--muted); margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border)}
.last-memory{display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit}
.last-memory:hover{text-decoration:none; border-color:var(--blue)}
.last-memory__thumb{width:90px; height:90px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; background:var(--bg-2)}
.last-memory__cap{font-weight:600; margin:4px 0}
.memory__foot{display:flex; justify-content:space-between; align-items:center; gap:8px; margin:6px 0 2px}
.memory__summary{display:flex; gap:8px; font-size:.82rem}
.memory__cc{background:none; border:none; color:var(--muted); cursor:pointer; font-size:.82rem; font-family:inherit; padding:0}
.memory__cc:hover{color:var(--text)}

/* ---------- Carrusel de recuerdos ---------- */
.carousel{position:fixed; inset:0; background:rgba(3,8,17,.95); z-index:100; display:flex; flex-wrap:wrap; overflow-y:auto}
.carousel[hidden]{display:none}
.carousel__stage{flex:1 1 58%; display:flex; align-items:center; justify-content:center; padding:24px; min-width:0; min-height:50vh; position:relative; overflow:hidden}
.carousel__bg{position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(30px) brightness(.4); transform:scale(1.1); z-index:0}
.carousel__stage img, .carousel__stage video{position:relative; z-index:1; max-width:100%; max-height:86vh; border-radius:8px; object-fit:contain}
.carousel__panel{flex:1 1 340px; max-width:400px; background:var(--card); border-left:1px solid var(--border); display:flex; flex-direction:column; padding:18px; overflow-y:auto; max-height:100vh}
.cpanel__head{border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:12px}
.cpanel__cap{font-weight:600; font-size:1.05rem; margin-bottom:4px}
.cpanel__comments{flex:1; display:flex; flex-direction:column; gap:10px; overflow-y:auto; margin-bottom:12px; min-height:60px}
.comment{font-size:.9rem; display:flex; gap:6px; align-items:baseline; color:var(--text)}
.comment strong{flex-shrink:0}
.comment span{word-break:break-word}
.cdel{margin-left:auto; background:none; border:none; color:var(--muted); cursor:pointer; font-size:.8rem; flex-shrink:0}
.cdel:hover{color:var(--red)}
.cpanel__form{display:flex; gap:8px}
.cpanel__form .input{flex:1}
.carousel__close{position:fixed; top:14px; right:18px; z-index:3; background:none; border:none; color:#fff; font-size:1.8rem; cursor:pointer; line-height:1}
.carousel__nav{position:fixed; top:44%; z-index:3; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25); color:#fff; width:46px; height:46px; border-radius:50%; font-size:1.7rem; cursor:pointer; display:flex; align-items:center; justify-content:center}
.carousel__nav--prev{left:14px}
.carousel__nav--next{right:14px}
@media (max-width:760px){
    .carousel__stage{flex-basis:100%}
    .carousel__panel{max-width:none; border-left:none; border-top:1px solid var(--border); max-height:none}
    .carousel__nav{top:auto; bottom:calc(50vh)}
}

/* ---------- Responsive ---------- */
@media (max-width:880px){
    .topbar__burger{display:block}
    .topbar__trip{display:none}
    .sidebar{
        position:fixed; top:0; left:-290px; bottom:0; width:280px; z-index:30;
        transition:left .25s ease; box-shadow:var(--shadow);
    }
    .sidebar.open{left:0}
    .sidebar-overlay.open{display:block}
    .stat-grid,.stat-grid--3{grid-template-columns:repeat(2,1fr)}
    .grid-2{grid-template-columns:1fr}
    .content{padding:16px}
    .member__money{text-align:left; min-width:0}

    /* Tabla apilada en móvil */
    .table thead{display:none}
    .table,.table tbody,.table tr,.table td{display:block; width:100%}
    .table tr{border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:10px; padding:6px 10px}
    .table td{border:none; padding:6px 2px; display:flex; justify-content:space-between; gap:12px; text-align:right}
    .table td::before{content:attr(data-label); color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em}
    .table tfoot tr{background:var(--bg-2)}
    .table tfoot td::before{content:""}
}
@media (max-width:520px){
    .stat-grid,.stat-grid--3{grid-template-columns:1fr 1fr}
    .form--grid{grid-template-columns:1fr}
    .page-title{font-size:1.3rem}
}

/* ---------- Notificaciones ---------- */
.notif-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.notif{display:flex; align-items:flex-start; gap:12px; padding:12px 4px; border-bottom:1px solid var(--border)}
.notif:last-child{border-bottom:none}
.notif__icon{font-size:1.2rem; line-height:1.4; flex-shrink:0}
.notif__body{display:flex; flex-direction:column; gap:2px; min-width:0}
.notif__msg{color:var(--text); text-decoration:none; word-break:break-word}
a.notif__msg:hover{color:var(--blue); text-decoration:underline}
.notif__time{color:var(--muted); font-size:.76rem}
.notif__dot{width:8px; height:8px; border-radius:50%; background:var(--blue); flex-shrink:0; margin-left:auto; margin-top:6px}
.notif--unread{background:rgba(20,184,166,.06); border-radius:var(--radius-sm)}
.notif--unread .notif__msg{font-weight:600}

/* ---------- Diálogo de confirmación ---------- */
.confirm{position:fixed; inset:0; z-index:200; background:rgba(3,8,17,.74); display:flex; align-items:center; justify-content:center; padding:20px}
.confirm[hidden]{display:none}
.confirm__box{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:22px; max-width:380px; width:100%; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.5)}
.confirm__icon{font-size:1.9rem; margin-bottom:8px}
.confirm__msg{font-size:1.02rem; margin:0 0 18px; color:var(--text); line-height:1.45}
.confirm__actions{display:flex; gap:10px; justify-content:center}
.confirm__actions .btn{min-width:120px}

/* ---------- Gestión de fotos en editar ---------- */
.pmanage{display:flex; flex-direction:column; gap:6px}
.pmanage__grid{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
.pmanage__item{position:relative; width:74px; height:56px; border-radius:8px; background:var(--bg-2) center/cover no-repeat; border:1px solid var(--border)}
.pmanage__del{position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%; background:var(--red); color:#fff; border:2px solid var(--card); cursor:pointer; font-size:.7rem; line-height:1; display:flex; align-items:center; justify-content:center; padding:0}
.pmanage__del:hover{filter:brightness(1.15)}
.idetail__manage-foot{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.idetail__manage-foot form{margin:0}

/* Previsualización de fotos elegidas (antes de subir) */
.filepreview{display:flex; flex-direction:row; flex-wrap:wrap; gap:10px}
.filepreview[hidden]{display:none}
.filepreview__item{position:relative; width:74px; height:56px; border-radius:8px; background:var(--bg-2) center/cover no-repeat; border:1px solid var(--border); cursor:zoom-in}
.filepreview__del{position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%; background:var(--red); color:#fff; border:2px solid var(--card); cursor:pointer; font-size:.7rem; line-height:1; display:flex; align-items:center; justify-content:center; padding:0}
.filepreview__del:hover{filter:brightness(1.15)}

/* Visor a pantalla completa */
.fslightbox{position:fixed; inset:0; z-index:300; background:rgba(3,8,17,.92); display:flex; align-items:center; justify-content:center; padding:24px}
.fslightbox[hidden]{display:none}
.fslightbox__img{max-width:96vw; max-height:92vh; object-fit:contain; border-radius:8px}
.fslightbox__close{position:fixed; top:16px; right:20px; background:rgba(3,8,17,.55); border:1px solid rgba(255,255,255,.25); color:#fff; width:38px; height:38px; border-radius:50%; font-size:1.2rem; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center}
.fslightbox__close:hover{background:rgba(3,8,17,.85)}