:root{--p:#6741e3;--pd:#4f2eb6;--ps:#eee9ff;--y:#ffb51d;--ok:#16885d;--bad:#cf4052;--warn:#a76c00;--info:#0877ac;--t:#20242c;--m:#707784;--line:#e7e8ee;--bg:#f6f7fb;--card:#fff;--r:20px;--shadow:0 12px 30px #231b4812}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--t);background:var(--bg);min-height:100vh}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}
.shell{min-height:100vh}.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:11px max(15px,calc((100vw - 920px)/2 + 15px));background:#f6f7fbf0;backdrop-filter:blur(16px);border-bottom:1px solid #e7e8eec9}.brand{display:flex;align-items:center;gap:10px}.brand img{width:39px;height:39px;border-radius:13px}.brand span{display:grid}.brand strong{font-size:1rem}.brand small{color:var(--m);font-size:.7rem}.avatar{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--p),#987bf5);color:white;display:grid;place-items:center;font-weight:900}
main{width:min(100%,920px);margin:auto;padding:18px 15px calc(100px + env(safe-area-inset-bottom))}.head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin:3px 0 17px}.head h1{margin:0 0 4px;font-size:1.5rem;line-height:1.1}.head p{margin:0;color:var(--m);font-size:.88rem}.section{display:flex;justify-content:space-between;align-items:center;margin:23px 0 11px}.section h2{font-size:1.04rem;margin:0}.section a{font-size:.82rem;color:var(--p);font-weight:800}
.card{background:var(--card);border:1px solid #e7e8eed9;border-radius:var(--r);box-shadow:var(--shadow);padding:16px}.card+.card{margin-top:11px}.hero{background:linear-gradient(135deg,var(--p),#8f71f1);color:#fff;border:0;padding:22px;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-75px;top:-85px;background:#ffffff17}.hero small{opacity:.83}.hero .big{font-size:2.08rem;font-weight:950;margin:5px 0 14px;letter-spacing:-.04em}
.grid{display:grid;gap:11px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.quick{min-height:108px;display:flex;flex-direction:column;justify-content:space-between}.quick b{font-size:.92rem}.ico{font-size:1.55rem}.stat b{display:block;font-size:1.42rem;margin-top:4px}.stat small{color:var(--m)}
.progress{height:10px;border-radius:999px;background:#e4e3eb;overflow:hidden}.hero .progress{background:#ffffff35}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--y),#ffd568);border-radius:inherit}.plabel{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font-size:.73rem;color:var(--m)}.hero .plabel{color:#ffffffe8}
.list{display:grid;gap:9px}.item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px;display:flex;justify-content:space-between;align-items:center;gap:12px}.main{min-width:0}.main b{display:block;font-size:.91rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.main small{color:var(--m);font-size:.75rem}.side{text-align:right;flex:0 0 auto}.side b{font-size:.87rem}.pos{color:var(--ok)}.neg{color:var(--bad)}
.badge{display:inline-flex;min-height:25px;align-items:center;padding:4px 9px;border-radius:999px;font-size:.68rem;font-weight:850}.success{background:#e7f6ef;color:var(--ok)}.warning{background:#fff3d5;color:var(--warn)}.danger{background:#ffe8eb;color:var(--bad)}.info{background:#e5f4fb;color:var(--info)}.muted{background:#eef0f4;color:var(--m)}
.btn{border:0;border-radius:14px;min-height:46px;padding:11px 15px;font-weight:850;display:inline-flex;align-items:center;justify-content:center;gap:7px}.primary{background:var(--p);color:#fff;box-shadow:0 8px 18px #6741e333}.primary:hover{background:var(--pd)}.soft{background:var(--ps);color:var(--p)}.ghost{background:#fff;border:1px solid var(--line)}.red{background:#ffe8eb;color:var(--bad)}.block{width:100%}.sm{min-height:38px;padding:8px 11px;border-radius:11px;font-size:.78rem}.btn[disabled]{opacity:.5;cursor:not-allowed}
.form{display:grid;gap:13px}.field{display:grid;gap:6px}.field label{font-size:.81rem;font-weight:780}.field small{font-size:.72rem;color:var(--m)}.input,select,textarea{width:100%;min-height:48px;border:1px solid #dfe1e8;border-radius:14px;background:#fff;padding:11px 13px;outline:none;color:var(--t)}textarea{min-height:96px;resize:vertical}.input:focus,select:focus,textarea:focus{border-color:var(--p);box-shadow:0 0 0 4px #6741e31a}.input[readonly]{background:#f0f1f5;color:var(--m)}.actions{display:flex;gap:9px;flex-wrap:wrap}.actions>*{flex:1 1 130px}
.alert{border-radius:14px;padding:12px 13px;margin-bottom:11px;font-size:.84rem;font-weight:680}.alert-success{background:#e7f6ef;color:#116847}.alert-warning{background:#fff3d5;color:#815300}.alert-danger{background:#ffe8eb;color:#962737}.alert-info{background:#e5f4fb;color:#0b6089}.empty{text-align:center;padding:28px 16px;border:1px dashed #d3d5dd;border-radius:18px;background:#fff;color:var(--m)}
.kv{display:grid}.kv div{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid var(--line)}.kv div:last-child{border:0}.kv span{color:var(--m);font-size:.79rem}.kv b{text-align:right;font-size:.84rem}
.reward{padding:0;overflow:hidden}.rimg{height:145px;background:#eee9ff}.rimg img{width:100%;height:100%;object-fit:cover}.rbody{padding:15px}.rbody h3{margin:0 0 5px;font-size:1rem}.rbody p{margin:0 0 10px;color:var(--m);font-size:.78rem;min-height:34px}.rmeta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.cost{font-weight:950;color:var(--p)}
.bottom{position:fixed;left:50%;bottom:0;z-index:30;transform:translateX(-50%);width:min(100%,920px);display:grid;grid-template-columns:repeat(5,1fr);background:#fffffff7;backdrop-filter:blur(18px);border-top:1px solid var(--line);padding:7px 7px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -10px 25px #22203a12}.bottom a{display:grid;place-items:center;gap:2px;padding:4px 1px;border-radius:12px;color:var(--m);font-size:.62rem;font-weight:800}.bottom a.on{background:var(--ps);color:var(--p)}.bottom i{font-style:normal;font-size:1.1rem}
.auth{min-height:100vh;display:grid;place-items:center;padding:22px 15px;background:radial-gradient(circle at 10% 8%,#ffb51d3b,transparent 34%),radial-gradient(circle at 92% 0,#6741e347,transparent 36%),var(--bg)}.authwrap{width:min(100%,430px)}.authbrand{text-align:center;margin-bottom:17px}.authbrand img{width:77px;height:77px;margin:0 auto 11px;border-radius:24px;box-shadow:0 14px 28px #6741e338}.authbrand h1{margin:0;font-size:1.65rem}.authbrand p{margin:5px 0 0;color:var(--m)}.authcard{background:#fff;border:1px solid var(--line);border-radius:25px;padding:20px;box-shadow:var(--shadow)}.links{text-align:center;margin-top:13px;color:var(--m);font-size:.81rem}.links a{color:var(--p);font-weight:850}
.adminnav{display:flex;gap:7px;overflow:auto;padding-bottom:4px;margin-bottom:14px}.adminnav a{white-space:nowrap;padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:.74rem;font-weight:830}.adminnav a.on{background:var(--p);color:#fff;border-color:var(--p)}
.row4{display:grid;grid-template-columns:minmax(0,1fr) 73px 88px 42px;gap:7px;margin-bottom:7px}.remove{border:0;border-radius:11px;background:#ffe8eb;color:var(--bad);font-weight:950}.total{text-align:right;font-size:1.3rem;font-weight:950}
.check{display:flex;gap:11px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:15px}.check input{width:22px;height:22px}
@media(min-width:700px){.head h1{font-size:1.8rem}.desktop2{grid-template-columns:repeat(2,minmax(0,1fr))}.desktop3{grid-template-columns:repeat(3,minmax(0,1fr))}.form2{grid-template-columns:repeat(2,minmax(0,1fr))}.rimg{height:180px}}
@media(max-width:410px){.row4{grid-template-columns:minmax(0,1fr) 67px 80px 39px}}

/* Botones superiores: cuenta y cerrar sesión */
.top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* Botón cerrar sesión */
.logout-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    border: 1px solid #e7e8ee;
    border-radius: 14px;
    background: #ffffff;
    color: #cf4052;
    font-size: 0.78rem;
    font-weight: 850;
    box-shadow: 0 5px 14px rgba(32, 36, 44, 0.07);
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.logout-btn:hover {
    background: #ffe8eb;
}

.logout-btn:active {
    transform: scale(0.96);
}

.logout-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.logout-text {
    line-height: 1;
}

/* En celulares muy pequeños se muestra solo el icono */
@media (max-width: 370px) {
    .logout-btn {
        width: 42px;
        padding: 8px;
    }

    .logout-text {
        display: none;
    }
}