:root {
    --primary: #579fec; 
    --secondary: #39f300; 
    --bg: #f4f7fa;
    --white: #ffffff;
    --text-dark: #1e293b;
    --text-gray: #64748b;
    --border: #e2e8f0;
    --success: #10b981;
    
    --color-doc: #3498db;
    --color-vistoria: #9b59b6;
    --color-liberacao: #f1c40f;
    --color-pecas: #e0c218;
    --color-servico: #2ecc71;
    --color-entrega: #87a0c4;
    --color-furto: #611616; 
    --color-pt: #e62222;    
    --color-pagamento: #065f46;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text-dark); }

#login-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, #4288cf 100%);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.login-card {
    background: var(--white); padding: 50px; border-radius: 20px; width: 420px;
    text-align: center; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    border-bottom: 6px solid var(--secondary);
}
.login-card h1 { font-family: 'Poppins', sans-serif; font-size: 24px; margin-bottom: 10px; color: var(--primary); }
.login-card p { font-size: 14px; color: var(--text-gray); margin-bottom: 30px; }
.login-card input {
    width: 100%; padding: 15px; border: 2px solid var(--border); border-radius: 10px;
    margin-bottom: 20px; font-size: 18px; text-align: center; outline: none; transition: 0.3s;
}
.login-card input:focus { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(243, 146, 0, 0.1); }
.login-card button {
    width: 100%; padding: 15px; background: var(--primary); color: white;
    border: none; border-radius: 10px; font-weight: 700; cursor: pointer; transition: 0.3s;
}
.login-card button:hover { background: var(--secondary); transform: translateY(-2px); }

#main-app { display: none; }
header {
    background: var(--primary); color: white; padding: 15px 40px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100;
}
.nav-brand { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.nav-brand span { color: var(--secondary); }

.container { max-width: 1600px; margin: 0 auto; padding: 30px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 30px; }
.kpi-card {
    background: var(--white); padding: 20px; border-radius: 16px;
    display: flex; align-items: center; gap: 15px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.kpi-icon {
    width: 50px; height: 50px; border-radius: 12px; display: flex;
    align-items: center; justify-content: center; font-size: 20px; color: white;
}
.kpi-data h3 { font-size: 10px; text-transform: uppercase; color: var(--text-gray); letter-spacing: 1px; }
.kpi-data p { font-size: 22px; font-weight: 700; color: var(--primary); }

.charts-row { display: grid; grid-template-columns: 1.7fr 1.1fr; gap: 25px; margin-bottom: 30px; }
@media(max-width: 1100px) { .charts-row { grid-template-columns: 1fr; } }
.chart-container { background: var(--white); padding: 25px; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.chart-header h2 { font-size: 16px; font-weight: 700; color: var(--primary); border-left: 4px solid var(--secondary); padding-left: 10px; }

.wallet-share-box { background: var(--white); border-radius: 16px; padding: 20px 25px; margin-bottom: 25px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.wallet-share-header { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 8px; text-transform: uppercase; }
.wallet-progress-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #e2e8f0; }
.progress-part-ass { background: var(--primary); transition: width 0.5s ease; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: bold; }
.progress-part-ter { background: var(--secondary); transition: width 0.5s ease; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: bold; }

.table-card { background: var(--white); border-radius: 16px; padding: 25px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.table-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.search-wrapper { position: relative; width: 400px; }
.search-wrapper i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-gray); }
.search-wrapper input {
    width: 100%; padding: 12px 15px 12px 45px; border: 1px solid var(--border);
    border-radius: 10px; background: #f8fafc; outline: none; transition: 0.3s;
}
.search-wrapper input:focus { border-color: var(--primary); background: white; }

.btn-excel {
    background: #107c41; color: white; padding: 12px 24px; border: none;
    border-radius: 10px; font-weight: 700; cursor: pointer; display: flex;
    align-items: center; gap: 10px; transition: 0.3s;
}
.btn-excel:hover { background: #0a5a2f; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(16, 124, 65, 0.2); }

.responsive-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 1000px; }
th { text-align: left; padding: 15px; font-size: 11px; text-transform: uppercase; color: var(--text-gray); border-bottom: 2px solid var(--bg); }
td { padding: 18px 15px; font-size: 14px; border-bottom: 1px solid var(--bg); }
tr:hover { background: #fbfcfe; }

.badge { padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.badge-ass { background: #dcfce7; color: #166534; }
.badge-ter { background: #ffedd5; color: #9a3412; }

.pill-status { padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; display: inline-block; }
.status-standard { background: #f1f5f9; color: #475569; }
.status-furto { background: #1e293b; color: #ffffff; }
.status-pt { background: #fff7ed; color: #c2410c; border: 1px solid #ffedd5; }
.status-pagamento { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }