/* ==========================================================
   VOLTACASH — DESIGN SYSTEM
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    --color-primary:#3483fa;
    --color-primary-dark:#2968c8;
    --color-primary-light:#eaf2ff;

    --color-success:#00a650;
    --color-success-dark:#028a43;
    --color-success-light:#e6f8ef;

    --color-danger:#e63946;
    --color-danger-light:#fdecee;

    --color-warning:#f5a524;
    --color-warning-light:#fff4e0;

    --color-info:#0ea5b8;
    --color-info-light:#e6f8fa;

    --color-text:#1a2332;
    --color-text-secondary:#667085;
    --color-text-muted:#98a2b3;

    --color-bg:#f2f4f8;
    --color-card:#ffffff;
    --color-border:#e6e9ef;

    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:20px;
    --radius-full:999px;

    --shadow-sm:0 1px 3px rgba(16,24,40,.06);
    --shadow-md:0 4px 16px rgba(16,24,40,.08);
    --shadow-lg:0 12px 32px rgba(16,24,40,.14);

    --transition:all .18s ease;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    -webkit-text-size-adjust:100%;
}

body{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:var(--color-bg);
    color:var(--color-text);
    padding:24px 16px 48px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

a{
    color:var(--color-primary);
}

::selection{
    background:var(--color-primary-light);
    color:var(--color-primary-dark);
}

:focus-visible{
    outline:2px solid var(--color-primary);
    outline-offset:2px;
}

/* ==========================================================
   LAYOUT
   ========================================================== */

.container{
    max-width:640px;
    margin:0 auto;
}

.hero{
    text-align:center;
    margin-bottom:24px;
}

.hero h1{
    color:var(--color-primary);
    margin-bottom:6px;
    font-size:26px;
}

.hero p{
    color:var(--color-text-secondary);
    font-size:14px;
}

.hero-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:28px;
    gap:16px;
}

.hero-top h1{
    color:var(--color-primary);
    margin-bottom:4px;
    font-size:24px;
    font-weight:800;
    letter-spacing:-.02em;
}

.hero-top p{
    color:var(--color-text-secondary);
    font-size:13px;
}

/* ==========================================================
   CARDS
   ========================================================== */

.saldo-card,
.resultado-card,
.gerador-card,
.historico-card,
.section,
.stat-card{
    background:var(--color-card);
    padding:22px;
    border-radius:var(--radius-lg);
    margin-bottom:18px;
    box-shadow:var(--shadow-md);
    border:1px solid var(--color-border);
}

.saldo-card{
    text-align:center;
    transition:var(--transition);
}

.saldo-card > span{
    display:inline-block;
    font-size:13px;
    font-weight:600;
    color:var(--color-text-secondary);
    margin-bottom:6px;
}

.saldo-card h2{
    color:var(--color-success);
    font-size:28px;
    font-weight:800;
    margin:4px 0;
    letter-spacing:-.02em;
}

.saldo-card small{
    color:var(--color-text-muted);
    font-size:12px;
}

.gerador-card h3,
.historico-card h3,
.section h2{
    font-size:17px;
    font-weight:700;
    margin-bottom:6px;
    letter-spacing:-.01em;
}

.logout-btn{
    text-decoration:none;
    font-size:20px;
    background:var(--color-card);
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    border:1px solid var(--color-border);
    flex-shrink:0;
    transition:var(--transition);
}

.logout-btn:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-1px);
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:18px;
}

.stats-grid .saldo-card{
    margin-bottom:0;
}

@media(max-width:640px){
    .stats-grid{
        grid-template-columns:1fr 1fr;
    }
    .stats-grid .saldo-card:first-child{
        grid-column:1 / -1;
    }
}

/* ==========================================================
   FORMS
   ========================================================== */

label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--color-text-secondary);
    margin-bottom:6px;
}

input[type=text],
input[type=email],
input[type=password],
input[type=url],
input[type=file]{
    width:100%;
    padding:13px 14px;
    border:1.5px solid var(--color-border);
    border-radius:var(--radius-sm);
    margin-bottom:16px;
    font-size:15px;
    font-family:inherit;
    color:var(--color-text);
    background:#fbfbfc;
    transition:var(--transition);
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=url]:focus,
input[type=file]:focus{
    outline:none;
    border-color:var(--color-primary);
    background:#ffffff;
    box-shadow:0 0 0 4px var(--color-primary-light);
}

input::placeholder{
    color:var(--color-text-muted);
}

button,
.btn{
    width:100%;
    background:var(--color-primary);
    color:white;
    border:none;
    padding:14px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-size:15px;
    font-weight:700;
    font-family:inherit;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
    transition:var(--transition);
    box-shadow:0 2px 8px rgba(52,131,250,.25);
}

button:hover,
.btn:hover{
    background:var(--color-primary-dark);
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(52,131,250,.32);
}

button:active,
.btn:active{
    transform:translateY(0);
}

button:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
}

.info{
    margin-top:14px;
    color:var(--color-text-secondary);
    font-size:13px;
    line-height:1.5;
}

.link{
    display:block;
    text-align:center;
    margin-top:16px;
    text-decoration:none;
    color:var(--color-primary);
    font-weight:600;
    font-size:14px;
}

.link:hover{
    text-decoration:underline;
}

.alert{
    background:var(--color-warning-light);
    color:#8a5a06;
    padding:13px 16px;
    border-radius:var(--radius-sm);
    margin-bottom:16px;
    font-size:14px;
    font-weight:500;
    border:1px solid #f6dfb0;
}

.card{
    background:#f8f9fb;
    padding:16px;
    border-radius:var(--radius-sm);
    margin-bottom:15px;
    border:1px solid var(--color-border);
}

.card h3{
    margin-bottom:8px;
}

/* ==========================================================
   AUTH PAGES (login, cadastro, recuperação de senha)
   ========================================================== */

body:has(.auth-card){
    display:flex;
    align-items:center;
    min-height:100vh;
}

.auth-card{
    width:100%;
    max-width:420px;
    margin:0 auto;
    background:var(--color-card);
    padding:36px 32px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    border:1px solid var(--color-border);
}

.logo{
    text-align:center;
    font-size:26px;
    font-weight:800;
    margin-bottom:6px;
    color:var(--color-primary);
    letter-spacing:-.02em;
}

.auth-subtitle{
    text-align:center;
    color:var(--color-text-secondary);
    font-size:13px;
    margin-bottom:28px;
}

h1{
    text-align:center;
    margin-bottom:24px;
    font-size:22px;
    font-weight:800;
    letter-spacing:-.02em;
}

.auth-card h1{
    margin-bottom:20px;
}

.auth-card p{
    text-align:center;
    color:var(--color-text-secondary);
    font-size:14px;
    margin-bottom:20px;
}

.auth-card p strong{
    color:var(--color-text);
}

/* ==========================================================
   BADGES / STATUS
   ========================================================== */

.badge{
    display:inline-block;
    padding:5px 11px;
    border-radius:var(--radius-full);
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.badge-pendente,
.badge-aguardando{
    background:var(--color-warning-light);
    color:#8a5a06;
}

.badge-analise{
    background:var(--color-info-light);
    color:#0a6c78;
}

.badge-aprovado{
    background:var(--color-success-light);
    color:var(--color-success-dark);
}

.badge-recusado{
    background:var(--color-danger-light);
    color:#a4222c;
}

.badge-admin{
    background:var(--color-success-light);
    color:var(--color-success-dark);
    padding:4px 10px;
    border-radius:var(--radius-full);
    font-size:12px;
    font-weight:700;
}

.badge-user{
    background:#eef0f3;
    color:var(--color-text-secondary);
    padding:4px 10px;
    border-radius:var(--radius-full);
    font-size:12px;
    font-weight:700;
}

/* ==========================================================
   HISTÓRICO (dashboard)
   ========================================================== */

.historico-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:18px 0;
    border-bottom:1px solid var(--color-border);
}

.historico-item:last-child{
    border-bottom:none;
    padding-bottom:4px;
}

.historico-item .info-produto{
    flex:1;
    min-width:0;
    max-width:70%;
}

.historico-item strong{
    display:block;
    font-size:14px;
    font-weight:600;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-bottom:4px;
}

.historico-item .meta{
    color:var(--color-text-muted);
    font-size:12px;
    margin-bottom:8px;
}

.historico-item .valor-cashback{
    color:var(--color-success);
    font-weight:700;
    font-size:13px;
}

.historico-acoes{
    display:flex;
    gap:6px;
    flex-shrink:0;
}

.btn-icon{
    width:38px;
    height:38px;
    padding:0;
    border-radius:var(--radius-sm);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    text-decoration:none;
    color:white;
    border:none;
    cursor:pointer;
    box-shadow:none;
    transition:var(--transition);
}

.btn-icon:hover{
    transform:translateY(-1px);
    filter:brightness(0.95);
}

.btn-icon.btn-success{ background:var(--color-success); box-shadow:0 2px 6px rgba(0,166,80,.25); }
.btn-icon.btn-primary{ background:var(--color-primary); box-shadow:0 2px 6px rgba(52,131,250,.25); }
.btn-icon.btn-warning{ background:var(--color-warning); box-shadow:0 2px 6px rgba(245,165,36,.25); }
.btn-icon.btn-info{ background:var(--color-info); box-shadow:0 2px 6px rgba(14,165,184,.25); }
.btn-icon.btn-danger{ background:var(--color-danger); box-shadow:0 2px 6px rgba(230,57,70,.25); }

.empty-state{
    text-align:center;
    padding:32px 16px;
    color:var(--color-text-muted);
    font-size:14px;
}

/* ==========================================================
   PERFIL
   ========================================================== */

.avatar-card{
    text-align:center;
}

.avatar-circle{
    width:84px;
    height:84px;
    border-radius:50%;
    background:var(--color-primary-light);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
    margin:0 auto 14px;
}

.avatar-card h2{
    color:var(--color-text);
    font-size:19px;
    margin-bottom:4px;
}

.avatar-card p{
    color:var(--color-text-secondary);
    font-size:13px;
}

.perfil-btn{
    display:flex;
    align-items:center;
    width:100%;
    text-decoration:none;
    background:#f8f9fb;
    color:var(--color-text);
    padding:14px 16px;
    border-radius:var(--radius-sm);
    margin-bottom:10px;
    font-weight:600;
    font-size:14px;
    border:1px solid var(--color-border);
    transition:var(--transition);
    box-shadow:none;
}

.perfil-btn:hover{
    background:var(--color-primary-light);
    border-color:var(--color-primary);
    transform:none;
}

.sair-btn{
    background:var(--color-danger-light);
    color:#a4222c;
    border-color:#f6c9cd;
}

.sair-btn:hover{
    background:#fbdadd;
    border-color:#f2b3b9;
}

/* ==========================================================
   TOPBAR / ADMIN
   ========================================================== */

.top-menu,
.top-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
    gap:12px;
}

.top-bar h1{
    margin-bottom:0;
    text-align:left;
    font-size:22px;
}

.admin-container,
.admin-page{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

.admin-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 16px;
    background:var(--color-text);
    color:white;
    text-decoration:none;
    border-radius:var(--radius-sm);
    font-size:14px;
    font-weight:600;
    transition:var(--transition);
    box-shadow:var(--shadow-sm);
}

.admin-btn:hover{
    filter:brightness(1.15);
    transform:translateY(-1px);
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:14px;
    margin-bottom:24px;
}

.stat-card h3{
    color:var(--color-text-secondary);
    font-size:13px;
    font-weight:600;
    margin-bottom:8px;
}

.stat-card p{
    font-size:30px;
    font-weight:800;
    color:var(--color-primary);
    letter-spacing:-.02em;
}

.table-wrapper{
    overflow-x:auto;
    border-radius:var(--radius-sm);
    border:1px solid var(--color-border);
}

table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

table th,
table td{
    padding:12px 14px;
    text-align:left;
    border-bottom:1px solid var(--color-border);
    white-space:nowrap;
}

table th{
    background:var(--color-primary);
    color:white;
    font-weight:700;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.03em;
}

table tr:last-child td{
    border-bottom:none;
}

table tbody tr:hover{
    background:#fafbfd;
}

.acoes{
    display:flex;
    gap:8px;
}

.acoes a,
.acoes button{
    flex:1;
    text-align:center;
    text-decoration:none;
    padding:8px 10px;
    border-radius:var(--radius-sm);
    font-size:13px;
    font-weight:700;
    box-shadow:none;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:480px){
    body{
        padding:16px 12px 40px;
    }
    .auth-card{
        padding:28px 22px;
    }
    .saldo-card, .gerador-card, .historico-card, .section{
        padding:18px;
    }
}