/*
|--------------------------------------------------------------------------
| Colecciona 360 - app.css
| Reingeniería visual operativa V11
|--------------------------------------------------------------------------
| Un solo CSS global para toda la plataforma.
| Enfoque: lúdico, moderno, liviano, responsivo.
|--------------------------------------------------------------------------
*/

:root{
    --bg-warm:#fff0c9;
    --bg-cool:#dff7ff;
    --ink:#071633;
    --muted:#61718a;
    --line:#dce7f3;
    --card:#ffffff;
    --dark:#111827;
    --dark-2:#0f172a;
    --green:#21c87a;
    --teal:#14b8a6;
    --blue:#2854d8;
    --pink:#ec4899;
    --yellow:#facc15;
    --red:#ef4444;
    --orange:#fb923c;
    --shadow:0 18px 46px rgba(15,23,42,.075);
    --shadow-soft:0 12px 28px rgba(15,23,42,.06);
    --radius-xl:32px;
    --radius-lg:26px;
    --radius-md:18px;
    --radius-sm:14px;
}

*{box-sizing:border-box}

html,body{
    margin:0;
    min-height:100%;
}

body{
    background:
        radial-gradient(circle at 4% 0%,rgba(250,204,21,.34),transparent 24%),
        radial-gradient(circle at 96% 0%,rgba(125,211,252,.36),transparent 30%),
        linear-gradient(115deg,var(--bg-warm),#fff8ed 44%,var(--bg-cool));
    color:var(--ink);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body.menu-open{overflow:hidden}

a{color:inherit}

img{max-width:100%}

/* Layout */
.app-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
}

.app-main{
    min-width:0;
    padding:30px 34px;
}

/* Sidebar */
.mobile-topbar,
.menu-backdrop{
    display:none;
}

.sidebar{
    position:sticky;
    top:0;
    height:100vh;
    overflow:auto;
    padding:22px 16px 26px;
    color:#fff;
    background:
        radial-gradient(circle at 12% 2%,rgba(236,72,153,.22),transparent 22%),
        linear-gradient(180deg,#151827,#0f172a);
    border-right:1px solid rgba(255,255,255,.08);
    z-index:50;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:2px 10px 24px;
}

.brand-mark{
    width:52px;
    height:52px;
    border-radius:20px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    font-size:23px;
    background:linear-gradient(135deg,#fb923c,#ec4899,#38bdf8);
    box-shadow:0 16px 36px rgba(56,189,248,.20);
}

.brand-copy strong{
    display:block;
    color:#fff;
    font-size:21px;
    line-height:1.05;
    letter-spacing:-.035em;
}

.brand-copy span{
    display:block;
    margin-top:5px;
    color:#dbeafe;
    font-size:13px;
    line-height:1.25;
}

.active-album-card{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:92px;
    margin:0 10px 22px;
    padding:12px;
    color:#0f172a;
    text-decoration:none;
    border-radius:22px;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(226,232,240,.96);
    box-shadow:0 14px 32px rgba(2,6,23,.14);
}

.active-album-logo{
    width:48px;
    height:48px;
    border-radius:16px;
    overflow:hidden;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    display:grid;
    place-items:center;
    flex:0 0 auto;
}

.active-album-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.active-album-info{
    min-width:0;
    flex:1;
}

.active-album-label{
    display:block;
    color:#64748b;
    font-size:10px;
    line-height:1;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:5px;
}

.active-album-info strong{
    display:block;
    color:#0f172a;
    font-size:13px;
    line-height:1.16;
    font-weight:950;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.active-album-info small{
    display:block;
    margin-top:4px;
    color:#475569;
    font-size:10px;
    font-weight:900;
    text-align:right;
}

.mini-progress{
    height:5px;
    margin-top:8px;
    overflow:hidden;
    border-radius:999px;
    background:#e5e7eb;
}

.mini-progress span{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--green),#38bdf8);
}

.menu{
    display:grid;
    gap:7px;
}

.menu-title{
    margin:18px 12px 7px;
    color:#93a4bd;
    font-size:11px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.09em;
}

.menu-link{
    min-height:46px;
    padding:11px 13px;
    border-radius:16px;
    color:#f8fafc;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:16px;
    font-weight:950;
    transition:background .16s ease, transform .16s ease;
}

.menu-link-main{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.menu-icon{
    width:22px;
    flex:0 0 auto;
    text-align:center;
}

.menu-link:hover,
.menu-link.is-active{
    background:rgba(255,255,255,.11);
    transform:translateX(2px);
}

.menu-badge{
    min-width:22px;
    height:22px;
    padding:0 7px;
    border-radius:999px;
    background:var(--red);
    color:#fff;
    font-size:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:950;
}

/* Global components */
.hero{
    border-radius:var(--radius-xl);
    padding:38px 34px;
    color:#fff;
    background:
        radial-gradient(circle at 96% 0%,rgba(34,197,94,.18),transparent 34%),
        linear-gradient(135deg,#15213f 0%,#2854d8 48%,#0f7c70 100%);
    box-shadow:0 18px 46px rgba(15,23,42,.10);
}

.hero h1{
    margin:0;
    color:#fff;
    font-size:clamp(36px,4vw,54px);
    line-height:1;
    letter-spacing:-.06em;
    font-weight:950;
}

.hero p{
    margin:18px 0 0;
    color:#fff;
    font-size:19px;
    line-height:1.35;
}

.card{
    background:rgba(255,255,255,.96);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    padding:22px;
}

.card.flat{
    box-shadow:none;
    background:#f8fafc;
}

.grid{
    display:grid;
    gap:22px;
}

.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.btn{
    min-height:48px;
    border:0;
    border-radius:18px;
    padding:12px 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:#0f172a;
    background:#eaf7ff;
    font:inherit;
    font-weight:950;
    text-decoration:none;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn.primary{
    color:#fff;
    background:linear-gradient(135deg,var(--green),var(--teal));
}

.btn.dark{
    color:#fff;
    background:#111827;
}

.btn.soft{
    color:#0f172a;
    background:#eaf7ff;
}

.btn.danger{
    color:#fff;
    background:linear-gradient(135deg,#ef4444,#f97316);
}

.input,
select,
textarea{
    width:100%;
    min-height:48px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    color:var(--ink);
    padding:12px 14px;
    font:inherit;
    outline:none;
}

.input:focus,
select:focus,
textarea:focus{
    border-color:var(--green);
    box-shadow:0 0 0 4px rgba(33,200,122,.15);
}

label{
    display:block;
    margin-bottom:7px;
    color:#334155;
    font-size:13px;
    font-weight:950;
}

.alert{
    border-radius:20px;
    padding:14px 16px;
    background:#fff7ed;
    color:#9a3412;
    border:1px solid #fed7aa;
    font-weight:750;
}

.alert.ok{
    background:#ecfdf5;
    color:#047857;
    border-color:#bbf7d0;
}

.muted{
    color:var(--muted);
}

.page-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.section-title{
    margin:28px 0 22px;
    color:var(--ink);
    font-size:31px;
    line-height:1.12;
    letter-spacing:-.035em;
    font-weight:950;
}

/* Dashboard */
.kpi{
    min-height:154px;
    padding:30px 32px;
    display:flex;
    align-items:center;
    gap:24px;
}

.kpi .emoji{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    font-size:32px;
    line-height:1;
}

.kpi b{
    display:block;
    color:var(--ink);
    font-size:34px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.045em;
}

.kpi p{
    margin:18px 0 0;
    color:var(--muted);
    font-size:19px;
}

.album-card{
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    align-items:center;
    gap:24px;
    min-height:236px;
}

.album-card.compact{
    min-height:0;
}

.album-logo{
    width:96px;
    height:96px;
    border-radius:24px;
    overflow:hidden;
    background:#f8fafc;
    display:grid;
    place-items:center;
    object-fit:cover;
}

.album-card h3{
    margin:0 0 15px;
    color:var(--ink);
    font-size:23px;
    line-height:1.22;
    font-weight:950;
    letter-spacing:-.025em;
}

.progress{
    height:14px;
    width:100%;
    max-width:310px;
    border-radius:999px;
    overflow:hidden;
    background:#e5e7eb;
}

.progress span{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--green),#38bdf8);
}

/* Mis colecciones */
.collection-card{
    display:grid;
    gap:16px;
    border:1px solid var(--line);
}

.collection-card.is-active{
    border-color:rgba(33,200,122,.75);
    box-shadow:0 18px 45px rgba(33,200,122,.14);
}

.collection-header{
    display:flex;
    align-items:center;
    gap:14px;
}

.collection-logo{
    width:64px;
    height:64px;
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(135deg,#ecfeff,#f0fdf4);
    border:1px solid #dbeafe;
    display:grid;
    place-items:center;
    flex:0 0 auto;
}

.collection-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.collection-title{
    margin:0;
    color:var(--ink);
    font-size:22px;
    line-height:1.15;
    font-weight:950;
    letter-spacing:-.03em;
}

.collection-meta{
    margin:4px 0 0;
    color:var(--muted);
}

.collection-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.collection-stat{
    padding:12px;
    border-radius:18px;
    background:#f8fafc;
}

.collection-stat b{
    display:block;
    font-size:20px;
    line-height:1;
}

.collection-stat span{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:13px;
}

/* Mi álbum */
.c360-hero{
    border-radius:var(--radius-xl);
    padding:34px;
    color:#fff;
    background:
        radial-gradient(circle at 96% 0%,rgba(34,197,94,.18),transparent 34%),
        linear-gradient(135deg,#15213f 0%,#2854d8 48%,#0f7c70 100%);
    box-shadow:0 18px 46px rgba(15,23,42,.10);
}

.c360-hero h1{
    margin:0;
    color:#fff;
    font-size:clamp(34px,4vw,50px);
    line-height:1;
    letter-spacing:-.055em;
    font-weight:950;
}

.c360-hero p{
    margin:16px 0 0;
    color:#fff;
    font-size:18px;
}

.c360-card{
    background:rgba(255,255,255,.96);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    padding:20px;
}

.c360-btn{
    min-height:48px;
    border:0;
    border-radius:18px;
    padding:12px 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(135deg,var(--green),var(--teal));
    font:inherit;
    font-weight:950;
    text-decoration:none;
    cursor:pointer;
}

.c360-input,
.c360-select,
.c360-textarea{
    width:100%;
    min-height:48px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    color:var(--ink);
    padding:12px 14px;
    font:inherit;
    outline:none;
}

.album-toolbar{
    margin:22px 0;
}

.album-toolbar-row{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(190px,.5fr) minmax(190px,.5fr) auto;
    gap:12px;
    align-items:center;
}

.save-status{
    color:var(--muted);
    font-weight:750;
}

.album-stats{
    margin:20px 0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.album-stat{
    display:flex;
    align-items:center;
    gap:13px;
}

.album-stat-icon{
    width:50px;
    height:50px;
    border-radius:18px;
    display:grid;
    place-items:center;
    font-size:25px;
    background:#eef2ff;
}

.album-stat b{
    display:block;
    font-size:28px;
    line-height:1;
    letter-spacing:-.04em;
}

.album-stat span{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-weight:750;
}

.album-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(218px,1fr));
    gap:16px;
}

.sticker-card{
    border-radius:24px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
    padding:16px;
    display:grid;
    gap:12px;
    transition:transform .14s ease;
}

.sticker-card:hover{
    transform:translateY(-2px);
}

.sticker-card.is-owned{
    border-color:rgba(33,200,122,.45);
    background:linear-gradient(135deg,#ffffff,#f0fdf4);
}

.sticker-section{
    display:inline-flex;
    border-radius:999px;
    background:#eef2ff;
    color:#312e81;
    font-weight:950;
    font-size:12px;
    padding:7px 11px;
    margin-bottom:8px;
}

.sticker-code{
    font-size:28px;
    font-weight:950;
    line-height:1;
    letter-spacing:-.05em;
}

.sticker-desc{
    color:#51627a;
    line-height:1.25;
    min-height:34px;
}

.empty-state{
    padding:34px;
    text-align:center;
    color:var(--muted);
    border-radius:26px;
    background:rgba(255,255,255,.76);
    border:1px dashed var(--line);
}

.skeleton{
    background:linear-gradient(90deg,#e5e7eb,#f8fafc,#e5e7eb);
    background-size:200% 100%;
    animation:skeleton 1.2s infinite;
    min-height:160px;
    border-radius:24px;
}

@keyframes skeleton{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}

/* Intercambios */
.tabs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.trade-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.choice-card{
    box-shadow:none;
    background:#f8fafc;
    display:flex;
    gap:10px;
    align-items:center;
}

.message-bubble{
    box-shadow:none;
    margin-bottom:10px;
    max-width:720px;
}

.message-bubble.mine{
    margin-left:auto;
    background:#ecfdf5;
}

.message-bubble.other{
    background:#f8fafc;
}

/* Tables */
.table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 10px;
}

.table th{
    text-align:left;
    padding:10px 12px;
    color:#475569;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.table td{
    background:#fff;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:14px 12px;
    vertical-align:top;
}

.table td:first-child{
    border-left:1px solid var(--line);
    border-radius:16px 0 0 16px;
}

.table td:last-child{
    border-right:1px solid var(--line);
    border-radius:0 16px 16px 0;
}

/* Auth / public */
.auth-page{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,480px);
    background:
        radial-gradient(circle at 15% 10%,rgba(250,204,21,.34),transparent 26%),
        radial-gradient(circle at 85% 0%,rgba(56,189,248,.34),transparent 30%),
        linear-gradient(135deg,#fff4d8,#f8fbff);
}

.auth-hero{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
}

.auth-hero-card{
    width:min(720px,100%);
    border-radius:34px;
    padding:44px;
    color:#fff;
    background:linear-gradient(135deg,#15213f,#2854d8 52%,#0f7c70);
    box-shadow:var(--shadow-strong);
}

.auth-hero-card h1{
    margin:0;
    font-size:54px;
    line-height:1;
    letter-spacing:-.06em;
}

.auth-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
}

.auth-card{
    width:min(430px,100%);
    display:grid;
    gap:14px;
}

.auth-card h1{
    margin:0;
    font-size:32px;
    letter-spacing:-.04em;
}

.pending-shell{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:20px;
}

/* Responsive */
@media(max-width:1100px){
    .grid-3,
    .grid-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .trade-columns{
        grid-template-columns:1fr;
    }
}

@media(max-width:980px){
    .app-shell{
        display:block;
    }

    .mobile-topbar{
        display:flex;
        align-items:center;
        gap:14px;
        min-height:78px;
        padding:14px 18px;
        background:#111827;
        color:#fff;
        position:sticky;
        top:0;
        z-index:60;
    }

    .mobile-menu-btn{
        width:42px;
        height:42px;
        border:0;
        border-radius:14px;
        background:rgba(255,255,255,.10);
        color:#fff;
        font-size:20px;
        font-weight:950;
        cursor:pointer;
    }

    .mobile-topbar strong{
        font-size:20px;
        letter-spacing:-.03em;
    }

    .menu-backdrop{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(15,23,42,.52);
        backdrop-filter:blur(2px);
        z-index:80;
        opacity:0;
        pointer-events:none;
        transition:.18s ease;
    }

    body.menu-open .menu-backdrop{
        opacity:1;
        pointer-events:auto;
    }

    .sidebar{
        position:fixed;
        inset:0 auto 0 0;
        width:min(88vw,330px);
        height:100vh;
        transform:translateX(-105%);
        transition:.2s ease;
        z-index:90;
        box-shadow:24px 0 55px rgba(2,6,23,.36);
    }

    body.menu-open .sidebar{
        transform:translateX(0);
    }

    .app-main{
        padding:18px;
    }

    .hero{
        padding:30px 26px;
        border-radius:28px;
    }

    .hero h1{
        font-size:42px;
    }

    .grid-3,
    .grid-4{
        grid-template-columns:1fr;
    }

    .kpi{
        min-height:124px;
        padding:24px;
    }

    .album-toolbar-row{
        grid-template-columns:1fr;
    }

    .album-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .auth-page{
        grid-template-columns:1fr;
    }

    .auth-hero{
        display:none;
    }
}

@media(max-width:620px){
    .app-main{
        padding:14px;
    }

    .hero{
        padding:26px 22px;
        border-radius:24px;
    }

    .hero h1{
        font-size:34px;
    }

    .hero p{
        margin-top:14px;
        font-size:16px;
    }

    .card{
        padding:18px;
        border-radius:22px;
    }

    .grid,
    .grid-2,
    .grid-3,
    .grid-4{
        grid-template-columns:1fr;
        gap:14px;
    }

    .album-card{
        grid-template-columns:82px minmax(0,1fr);
        gap:16px;
        min-height:180px;
    }

    .album-logo{
        width:82px;
        height:82px;
        border-radius:20px;
    }

    .album-card h3{
        font-size:19px;
    }

    .collection-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .album-stats{
        grid-template-columns:1fr;
    }

    .album-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .sticker-card{
        padding:12px;
        border-radius:20px;
    }

    .sticker-code{
        font-size:22px;
    }

    .sticker-desc{
        font-size:13px;
    }

    .table{
        border-spacing:0;
    }

    .table thead{
        display:none;
    }

    .table tr{
        display:block;
        margin-bottom:14px;
        background:#fff;
        border:1px solid var(--line);
        border-radius:18px;
        padding:12px;
    }

    .table td{
        display:grid;
        grid-template-columns:112px minmax(0,1fr);
        gap:10px;
        border:0!important;
        border-radius:0!important;
        padding:8px 0;
    }

    .table td::before{
        content:attr(data-label);
        color:#64748b;
        font-size:12px;
        font-weight:950;
    }
}

/* ========================================================================
   MI ÁLBUM - UX/UI V11.5 PRO
   Página principal del proyecto: lúdica, limpia, compacta y responsiva.
   Mantiene un solo CSS global: assets/css/app.css
======================================================================== */

/* Fondo alineado con dashboard y páginas operativas */
body.page-mi-album{
    background:
        radial-gradient(circle at 4% 0%, rgba(255,206,71,.30), transparent 24%),
        radial-gradient(circle at 96% 0%, rgba(125,211,252,.34), transparent 30%),
        linear-gradient(110deg, #fff0c7, #fff8ec 43%, #e3f7ff) !important;
}

body.page-mi-album .c360-shell,
body.page-mi-album .app,
body.page-mi-album .main-wrap{
    background:transparent !important;
}

body.page-mi-album .c360-main,
body.page-mi-album .main{
    background:transparent !important;
    padding:28px 32px !important;
}

/* Hero principal */
body.page-mi-album .c360-hero,
body.page-mi-album .hero{
    border-radius:31px !important;
    padding:34px 32px !important;
    color:#fff !important;
    background:
        radial-gradient(circle at 96% 0%, rgba(34,197,94,.18), transparent 34%),
        linear-gradient(135deg, #15213f 0%, #2646b6 48%, #0f7c70 100%) !important;
    box-shadow:0 18px 45px rgba(15,23,42,.10) !important;
    border:0 !important;
}

body.page-mi-album .c360-hero h1,
body.page-mi-album .hero h1{
    color:#fff !important;
    font-size:clamp(38px,4vw,56px) !important;
    line-height:1 !important;
    letter-spacing:-.065em !important;
    font-weight:950 !important;
    margin:0 !important;
}

body.page-mi-album .c360-hero p,
body.page-mi-album .hero p{
    color:#fff !important;
    font-size:19px !important;
    margin:18px 0 0 !important;
}

/* Toolbar */
body.page-mi-album .album-toolbar{
    margin:22px 0 16px !important;
    padding:20px 22px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid #dbe6f2 !important;
    border-radius:24px !important;
    box-shadow:0 18px 45px rgba(15,23,42,.07) !important;
}

body.page-mi-album .album-toolbar-row{
    display:grid !important;
    grid-template-columns:minmax(260px,1.4fr) minmax(205px,.50fr) minmax(205px,.50fr) auto !important;
    gap:12px !important;
    align-items:center !important;
}

body.page-mi-album .album-toolbar input,
body.page-mi-album .album-toolbar select{
    min-height:50px !important;
    border:1px solid #dbe6f2 !important;
    border-radius:18px !important;
    background:#fff !important;
    color:#071633 !important;
    font-size:15px !important;
    padding:12px 16px !important;
    outline:0 !important;
}

body.page-mi-album .album-toolbar input:focus,
body.page-mi-album .album-toolbar select:focus{
    border-color:#20c878 !important;
    box-shadow:0 0 0 4px rgba(32,200,120,.14) !important;
}

body.page-mi-album #saveAllBtn{
    min-height:50px !important;
    white-space:nowrap !important;
    border-radius:18px !important;
    padding:12px 22px !important;
    background:linear-gradient(135deg,#20c878,#17bda7) !important;
    color:#fff !important;
    border:0 !important;
    font-weight:950 !important;
    box-shadow:0 12px 28px rgba(32,200,120,.22) !important;
}

body.page-mi-album .save-status{
    margin-top:8px !important;
    color:#50627c !important;
    font-size:13px !important;
    font-weight:850 !important;
}

/* Resumen de secciones: cards reales con barra */
body.page-mi-album #sectionStatusGrid,
body.page-mi-album .album-section-status-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(158px,1fr)) !important;
    gap:10px !important;
    margin:16px 0 18px !important;
    padding:0 !important;
}

body.page-mi-album .album-section-status-card{
    background:rgba(255,255,255,.96) !important;
    border:1px solid #dbe6f2 !important;
    border-radius:16px !important;
    box-shadow:0 10px 26px rgba(15,23,42,.06) !important;
    padding:12px 13px !important;
    cursor:pointer !important;
    transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease !important;
}

body.page-mi-album .album-section-status-card:hover{
    transform:translateY(-1px) !important;
    border-color:#20c878 !important;
    box-shadow:0 14px 30px rgba(32,200,120,.16) !important;
}

body.page-mi-album .album-section-status-card.is-active{
    border-color:#20c878 !important;
    background:linear-gradient(135deg,#ffffff 0%,#ecfff5 100%) !important;
}

body.page-mi-album .album-section-status-title{
    display:block !important;
    color:#1d2390 !important;
    font-size:11px !important;
    line-height:1.15 !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    margin:0 0 8px !important;
}

body.page-mi-album .album-section-status-track{
    display:block !important;
    width:100% !important;
    height:10px !important;
    background:#e5e7eb !important;
    border-radius:999px !important;
    overflow:hidden !important;
}

body.page-mi-album .album-section-status-fill{
    display:block !important;
    height:100% !important;
    background:linear-gradient(90deg,#20c878,#38bdf8) !important;
    border-radius:999px !important;
}

body.page-mi-album .album-section-status-meta{
    display:block !important;
    margin-top:7px !important;
    color:#071633 !important;
    font-size:10.5px !important;
    line-height:1.1 !important;
    font-weight:850 !important;
}

/* KPIs */
body.page-mi-album .album-stats{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
    margin:16px 0 18px !important;
}

body.page-mi-album .album-stat{
    min-height:96px !important;
    padding:20px 22px !important;
    display:flex !important;
    align-items:center !important;
    gap:15px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid #dbe6f2 !important;
    border-radius:24px !important;
    box-shadow:0 18px 45px rgba(15,23,42,.07) !important;
}

body.page-mi-album .album-stat-icon{
    width:48px !important;
    height:48px !important;
    border-radius:17px !important;
    background:#eef2ff !important;
    display:grid !important;
    place-items:center !important;
    font-size:25px !important;
    flex:0 0 auto !important;
}

body.page-mi-album .album-stat b{
    display:block !important;
    color:#071633 !important;
    font-size:30px !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:-.045em !important;
}

body.page-mi-album .album-stat span{
    display:block !important;
    margin-top:8px !important;
    color:#50627c !important;
    font-size:15px !important;
    font-weight:850 !important;
}

/* Grid de figuritas: menos ancho que V11.4, pero cómodo */
body.page-mi-album #albumGrid.album-grid,
body.page-mi-album #albumGrid,
body.page-mi-album .album-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(174px,1fr)) !important;
    gap:14px !important;
    align-items:stretch !important;
}

/* Card figurita */
body.page-mi-album #albumGrid .sticker-card,
body.page-mi-album .sticker-card{
    position:relative !important;
    background:#ffffff !important;
    border:1px solid #dbe6f2 !important;
    border-radius:20px !important;
    box-shadow:0 12px 30px rgba(15,23,42,.07) !important;
    padding:14px 13px !important;
    display:grid !important;
    gap:11px !important;
    min-height:300px !important;
    overflow:hidden !important;
    transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

body.page-mi-album #albumGrid .sticker-card:hover,
body.page-mi-album .sticker-card:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 16px 38px rgba(15,23,42,.10) !important;
}

/* Diferenciación fuerte de figuritas que SÍ tiene */
body.page-mi-album #albumGrid .sticker-card.is-owned,
body.page-mi-album .sticker-card.is-owned{
    border:2px solid #16c784 !important;
    background:
        radial-gradient(circle at 90% 0%, rgba(32,200,120,.20), transparent 34%),
        linear-gradient(135deg,#e9fff3 0%,#ffffff 62%,#f0fff6 100%) !important;
    box-shadow:0 14px 34px rgba(22,199,132,.18) !important;
}

body.page-mi-album #albumGrid .sticker-card.is-owned::after,
body.page-mi-album .sticker-card.is-owned::after{
    content:"✓ Tengo";
    position:absolute;
    top:10px;
    right:10px;
    background:linear-gradient(135deg,#20c878,#17bda7);
    color:#fff;
    border-radius:999px;
    padding:5px 8px;
    font-size:10px;
    font-weight:950;
    line-height:1;
    box-shadow:0 8px 18px rgba(32,200,120,.22);
}

body.page-mi-album .sticker-top{
    min-height:86px !important;
}

body.page-mi-album .sticker-section{
    display:inline-flex !important;
    align-items:center !important;
    max-width:calc(100% - 58px) !important;
    background:#eef2ff !important;
    color:#1d2390 !important;
    border-radius:999px !important;
    padding:7px 12px !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    margin:0 0 9px !important;
}

body.page-mi-album .sticker-card:not(.is-owned) .sticker-section{
    max-width:100% !important;
}

body.page-mi-album .sticker-code{
    display:block !important;
    color:#071633 !important;
    font-size:26px !important;
    line-height:.95 !important;
    font-weight:1000 !important;
    letter-spacing:-.055em !important;
    margin:0 !important;
}

body.page-mi-album .sticker-desc{
    margin:10px 0 0 !important;
    color:#50627c !important;
    font-size:12px !important;
    line-height:1.28 !important;
    min-height:34px !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
}

/* Botones Tengo/Falta */
body.page-mi-album .sticker-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    align-items:center !important;
}

body.page-mi-album .sticker-toggle{
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    outline:0 !important;
    border-radius:16px !important;
    min-height:41px !important;
    padding:9px 8px !important;
    font:inherit !important;
    font-size:13px !important;
    font-weight:950 !important;
    cursor:pointer !important;
    transition:transform .14s ease, opacity .14s ease !important;
}

body.page-mi-album .sticker-toggle:hover{
    transform:translateY(-1px) !important;
}

body.page-mi-album .sticker-toggle.owned{
    background:#e0f2fe !important;
    color:#075985 !important;
}

body.page-mi-album .sticker-toggle.missing{
    background:#111827 !important;
    color:#ffffff !important;
}

body.page-mi-album .sticker-card.is-owned .sticker-toggle.owned,
body.page-mi-album .sticker-toggle.owned.active{
    background:linear-gradient(135deg,#20c878,#17bda7) !important;
    color:#ffffff !important;
}

body.page-mi-album .sticker-card.is-owned .sticker-toggle.missing{
    background:#ffe3ea !important;
    color:#c41244 !important;
}

body.page-mi-album .sticker-card:not(.is-owned) .sticker-toggle.missing.active{
    background:#111827 !important;
    color:#ffffff !important;
}

/* Cantidad / checks / precio */
body.page-mi-album .sticker-numbers{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
}

body.page-mi-album .sticker-number{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
}

body.page-mi-album .sticker-number label{
    color:#071633 !important;
    font-size:13px !important;
    font-weight:650 !important;
    margin:0 !important;
}

body.page-mi-album .sticker-number input,
body.page-mi-album .sticker-dup-input{
    width:70px !important;
    min-height:41px !important;
    border:1px solid #dbe6f2 !important;
    border-radius:15px !important;
    background:#fff !important;
    color:#071633 !important;
    text-align:center !important;
    padding:8px !important;
    font:inherit !important;
    font-size:14px !important;
    outline:0 !important;
}

body.page-mi-album .sticker-number input:focus,
body.page-mi-album .sticker-price:focus{
    border-color:#20c878 !important;
    box-shadow:0 0 0 4px rgba(32,200,120,.14) !important;
}

body.page-mi-album .sticker-checks{
    display:grid !important;
    gap:8px !important;
    font-size:11.5px !important;
    line-height:1.1 !important;
}

body.page-mi-album .sticker-checks label{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
    color:#071633 !important;
    font-size:11.5px !important;
    line-height:1.1 !important;
    font-weight:650 !important;
}

body.page-mi-album .sticker-checks input{
    width:15px !important;
    height:15px !important;
    accent-color:#20c878 !important;
    margin:0 !important;
}

body.page-mi-album .sticker-price{
    width:100% !important;
    min-height:41px !important;
    border:1px solid #dbe6f2 !important;
    border-radius:15px !important;
    background:#fff !important;
    color:#071633 !important;
    padding:9px 13px !important;
    font:inherit !important;
    font-size:14px !important;
    outline:0 !important;
}

body.page-mi-album .sticker-save{
    min-height:42px !important;
    border:0 !important;
    border-radius:16px !important;
    background:linear-gradient(135deg,#20c878,#17bda7) !important;
    color:#fff !important;
    font:inherit !important;
    font-size:13px !important;
    font-weight:950 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    cursor:pointer !important;
    box-shadow:0 10px 22px rgba(32,200,120,.18) !important;
}

/* Vacío */
body.page-mi-album #albumGrid .empty-state,
body.page-mi-album .empty-state{
    padding:34px !important;
    text-align:center !important;
    color:#50627c !important;
    border-radius:26px !important;
    background:rgba(255,255,255,.76) !important;
    border:1px dashed #dbe6f2 !important;
}

/* Responsive */
@media(max-width:1280px){
    body.page-mi-album #albumGrid.album-grid,
    body.page-mi-album #albumGrid,
    body.page-mi-album .album-grid{
        grid-template-columns:repeat(auto-fill,minmax(166px,1fr)) !important;
    }

    body.page-mi-album #sectionStatusGrid,
    body.page-mi-album .album-section-status-grid{
        grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
    }
}

@media(max-width:980px){
    body.page-mi-album .album-toolbar-row{
        grid-template-columns:1fr !important;
    }

    body.page-mi-album .album-stats{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    body.page-mi-album #albumGrid.album-grid,
    body.page-mi-album #albumGrid,
    body.page-mi-album .album-grid{
        grid-template-columns:repeat(auto-fill,minmax(164px,1fr)) !important;
    }
}

@media(max-width:620px){
    body.page-mi-album .c360-main,
    body.page-mi-album .main{
        padding:14px !important;
    }

    body.page-mi-album .c360-hero,
    body.page-mi-album .hero{
        border-radius:26px !important;
        padding:28px 24px !important;
    }

    body.page-mi-album .c360-hero h1,
    body.page-mi-album .hero h1{
        font-size:34px !important;
    }

    body.page-mi-album .c360-hero p,
    body.page-mi-album .hero p{
        font-size:17px !important;
        margin-top:16px !important;
    }

    body.page-mi-album .album-stats{
        grid-template-columns:1fr !important;
    }

    body.page-mi-album #sectionStatusGrid,
    body.page-mi-album .album-section-status-grid{
        display:flex !important;
        overflow-x:auto !important;
        gap:10px !important;
    }

    body.page-mi-album .album-section-status-card{
        min-width:148px !important;
    }

    body.page-mi-album #albumGrid.album-grid,
    body.page-mi-album #albumGrid,
    body.page-mi-album .album-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }

    body.page-mi-album #albumGrid .sticker-card,
    body.page-mi-album .sticker-card{
        min-height:292px !important;
        border-radius:18px !important;
        padding:12px !important;
    }

    body.page-mi-album .sticker-code{
        font-size:23px !important;
    }

    body.page-mi-album .sticker-desc{
        font-size:11.5px !important;
    }

    body.page-mi-album .sticker-toggle{
        min-height:38px !important;
        font-size:12.5px !important;
        padding:7px 8px !important;
    }

    body.page-mi-album .sticker-number input,
    body.page-mi-album .sticker-dup-input{
        width:62px !important;
    }
}

/* ========================================================================
   FIN MI ÁLBUM - UX/UI V11.5 PRO
======================================================================== */

/* ========================================================================
   MI ÁLBUM - FONDO OPERATIVO + FIX FAVICON V11.6
   Objetivo: alinear el fondo de mi_album.php con dashboard.php.
   Mantiene un solo CSS global: assets/css/app.css
======================================================================== */

html,
body.page-mi-album{
    min-height:100% !important;
    background:
        radial-gradient(circle at 4% 0%, rgba(255,206,71,.30), transparent 24%),
        radial-gradient(circle at 96% 0%, rgba(125,211,252,.34), transparent 30%),
        linear-gradient(110deg, #fff0c7 0%, #fff8ec 43%, #e3f7ff 100%) !important;
    background-attachment:fixed !important;
}

/* Capa de seguridad: si algún contenedor pinta un color sólido, se verá el degradé */
body.page-mi-album::before{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    z-index:-1 !important;
    pointer-events:none !important;
    background:
        radial-gradient(circle at 4% 0%, rgba(255,206,71,.30), transparent 24%),
        radial-gradient(circle at 96% 0%, rgba(125,211,252,.34), transparent 30%),
        linear-gradient(110deg, #fff0c7 0%, #fff8ec 43%, #e3f7ff 100%) !important;
}

/* Quita fondos sólidos heredados solo en Mi álbum */
body.page-mi-album .c360-shell,
body.page-mi-album .app,
body.page-mi-album .app-shell,
body.page-mi-album .main-wrap,
body.page-mi-album .layout,
body.page-mi-album .layout-content,
body.page-mi-album .page,
body.page-mi-album .page-content,
body.page-mi-album .content,
body.page-mi-album .main-content,
body.page-mi-album .c360-main,
body.page-mi-album .main{
    background:transparent !important;
}

/* Mantiene la separación visual del contenido */
body.page-mi-album .c360-main,
body.page-mi-album .main{
    position:relative !important;
    isolation:isolate !important;
}

/* Refuerzo del hero para que quede idéntico al estilo operativo */
body.page-mi-album .c360-hero,
body.page-mi-album .hero{
    background:
        radial-gradient(circle at 96% 0%, rgba(34,197,94,.18), transparent 34%),
        linear-gradient(135deg, #15213f 0%, #2646b6 48%, #0f7c70 100%) !important;
    box-shadow:0 18px 45px rgba(15,23,42,.10) !important;
}

/* ========================================================================
   FIN MI ÁLBUM - FONDO OPERATIVO + FIX FAVICON V11.6
======================================================================== */

/* ========================================================================
   MI ÁLBUM - SECCIONES MÁS VISIBLES V11.7
   Agranda el resumen de secciones sin tocar las cards de figuritas.
======================================================================== */

body.page-mi-album #sectionStatusGrid,
body.page-mi-album .album-section-status-grid{
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important;
    gap:14px !important;
    margin:18px 0 20px !important;
}

body.page-mi-album .album-section-status-card{
    min-height:92px !important;
    padding:16px 17px !important;
    border-radius:20px !important;
    box-shadow:0 14px 32px rgba(15,23,42,.07) !important;
}

body.page-mi-album .album-section-status-card.is-active{
    border-width:2px !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(32,200,120,.16), transparent 36%),
        linear-gradient(135deg,#ffffff 0%,#ecfff5 100%) !important;
}

body.page-mi-album .album-section-status-title{
    font-size:12.5px !important;
    margin-bottom:10px !important;
}

body.page-mi-album .album-section-status-track{
    height:12px !important;
}

body.page-mi-album .album-section-status-meta{
    margin-top:9px !important;
    font-size:11.5px !important;
}

@media(max-width:1280px){
    body.page-mi-album #sectionStatusGrid,
    body.page-mi-album .album-section-status-grid{
        grid-template-columns:repeat(auto-fill,minmax(176px,1fr)) !important;
    }
}

@media(max-width:620px){
    body.page-mi-album #sectionStatusGrid,
    body.page-mi-album .album-section-status-grid{
        display:flex !important;
        overflow-x:auto !important;
        gap:12px !important;
        padding-bottom:8px !important;
    }

    body.page-mi-album .album-section-status-card{
        min-width:178px !important;
        min-height:88px !important;
    }
}

/* ========================================================================
   FIN MI ÁLBUM - SECCIONES MÁS VISIBLES V11.7
======================================================================== */