:root {
    --bg: #0f172a;
    --bg-soft: #0f172a;
    --surface: rgba(15, 23, 42, 0.7);
    --surface-solid: #0f172a;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --primary: #38bdf8;
    --error: #f43f5e;
    --success: #22c55e;
    --sidebar: rgba(2, 6, 23, 0.9);
    --radius: 1.25rem;
}
* { box-sizing: border-box; margin:0; padding:0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

body.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, #1e293b 0%, #0f172a 55%, #020617 100%);
    color: var(--text);
    padding: 1rem;
}
.auth-container { width: 100%; max-width: 420px; }
.auth-box {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: var(--radius);
    padding: 1rem 1.5rem 1rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    height: 470px;
    display: flex;
    flex-direction: column;
}
.logo{display:flex;justify-content:center;margin-bottom:.35rem;}
.logo img{max-height:55px;}
.tabs{display:flex;gap:.5rem;margin-bottom:.35rem;}
.tab-button{flex:1;background:transparent;border:1px solid transparent;color:var(--muted);padding:.5rem .5rem;border-radius:.9rem;font-weight:600;cursor:pointer;transition:.2s;font-size:.8rem;}
.tab-button.active{background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.3);color:#e2e8f0;}
.fixed-alert{margin-bottom:.35rem;font-size:.7rem;}
.alert{border-radius:.85rem;padding:.5rem .6rem;}
.alert-error{background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.25);}
.alert-success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);}
.forms-wrapper{flex:1;}
.form-tab{display:none;height:100%;flex-direction:column;}
.form-tab.active{display:flex;}
.form-body{flex:1;display:flex;flex-direction:column;gap:.45rem;overflow-y:auto;padding-right:.25rem;}
.input-inline{display:flex;gap:.4rem;align-items:center;}
.input-inline input{flex:1;}
.check-status{width:1.1rem;height:1.1rem;border-radius:9999px;border:1px solid rgba(148,163,184,.2);display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;}
.check-status.ok{background:rgba(34,197,94,.25);border-color:rgba(34,197,94,.35);color:#22c55e;}
.check-status.bad{background:rgba(244,63,94,.15);border-color:rgba(244,63,94,.45);color:#f43f5e;}
label{font-size:.7rem;color:var(--muted);}
input[type="text"],input[type="email"],input[type="password"]{background:rgba(15,23,42,.4);border:1px solid rgba(148,163,184,.25);border-radius:.75rem;padding:.5rem .6rem;color:var(--text);font-size:.8rem;outline:none;transition:border .2s;}
input:focus{border-color:rgba(56,189,248,.7);}
.note{font-size:.65rem;color:var(--muted);}
.form-footer{margin-top:.5rem;}
.btn-primary{width:100%;background:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 100%);border:none;border-radius:.75rem;padding:.55rem .6rem;color:#0f172a;font-weight:700;cursor:pointer;transition:.2s;text-align:center;}
.btn-primary:hover{filter:brightness(1.03);}

/* APP PAGE */
body.app-page{min-height:100vh;background:radial-gradient(circle at top,#1e293b 0%,#020617 70%);color:var(--text);}
.app-layout{display:flex;min-height:100vh;}
.sidebar{width:210px;background:var(--sidebar);border-right:1px solid rgba(148,163,184,.15);display:flex;flex-direction:column;padding:1rem .75rem;gap:1rem;}
.sidebar-header{display:flex;justify-content:center;}
.sidebar-logo{max-width:140px;}
.sidebar-nav{display:flex;flex-direction:column;gap:.4rem;}
.sidebar-link{display:block;padding:.45rem .6rem;border-radius:.65rem;color:var(--muted);text-decoration:none;font-size:.83rem;transition:.15s;}
.sidebar-link:hover{background:rgba(148,163,184,.15);color:#fff;}
.sidebar-link.active{background:rgba(56,189,248,.12);color:#e2e8f0;}
.sidebar-link.logout{margin-top:auto;background:rgba(244,63,94,.08);color:#fca5a5;}
.main-area{flex:1;display:flex;flex-direction:column;}
.topbar{height:70px;border-bottom:1px solid rgba(148,163,184,.15);display:flex;align-items:center;justify-content:space-between;padding:0 1.4rem;gap:1rem;}
.topbar-left .topbar-logo{height:40px;}
.topbar-right{display:flex;align-items:center;gap:.75rem;}
.avatar{width:42px;height:42px;border-radius:9999px;overflow:hidden;border:2px solid rgba(148,163,184,.5);}
.avatar img{width:100%;height:100%;object-fit:cover;}
.user-pill{background:rgba(15,23,42,.3);border:1px solid rgba(148,163,184,.25);padding:.25rem .65rem;border-radius:9999px;font-size:.8rem;}
.coins{display:flex;align-items:center;gap:.35rem;}
.coin-icon{height:30px;width:30px;}
.coin-badge{background:#ef4444;border-radius:9999px;padding:.15rem .45rem;font-size:.7rem;font-weight:700;min-width:38px;text-align:center;}
.content{padding:1.3rem 1.4rem;}
.placeholder-card{background:rgba(15,23,42,.4);border:1px solid rgba(148,163,184,.15);border-radius:1rem;padding:1rem 1.2rem;margin-top:1rem;}

/* PROFILE CARD */
.profile-card{background:rgba(15,23,42,.4);border:1px solid rgba(148,163,184,.15);border-radius:1rem;padding:1rem 1.2rem;margin-top:1rem;display:flex;gap:1rem;flex-wrap:wrap;}
.profile-left{width:180px;display:flex;flex-direction:column;gap:.5rem;align-items:center;}
.profile-avatar{width:110px;height:110px;border-radius:9999px;overflow:hidden;border:2px solid rgba(148,163,184,.4);}
.profile-avatar img{width:100%;height:100%;object-fit:cover;}
.profile-avatar-form input[type="file"]{display:none;}
.file-btn{background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.15);border-radius:.6rem;padding:.4rem .7rem;font-size:.72rem;cursor:pointer;}
.btn-secondary{background:rgba(248,250,252,.03);border:1px solid rgba(148,163,184,.2);border-radius:.6rem;padding:.35rem .7rem;font-size:.72rem;color:#e2e8f0;cursor:pointer;}
.profile-coins{display:flex;align-items:center;gap:.4rem;}
.profile-coins img{width:30px;height:30px;}
.profile-right{flex:1;min-width:230px;display:flex;flex-direction:column;gap:.75rem;}
.profile-form input[type="text"],.profile-form input[type="email"],.profile-form input[type="password"]{width:100%;}
.profile-row{display:flex;gap:1rem;}
.profile-row>div{flex:1;}
.btn-danger{background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.35);color:#fda4af;border-radius:.6rem;padding:.4rem .7rem;font-weight:600;cursor:pointer;}
.cost-pill{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);border-radius:9999px;padding:.05rem .45rem;margin-left:.25rem;font-size:.65rem;vertical-align:middle;}

/* Evitar seleccionar y arrastrar imágenes fácilmente */
img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}