/* === BASE: variáveis, reset, tipografia === */

:root {
    --bg:        #060f1e;
    --surface:   #0a2040;
    --surface2:  #0d3e7a;
    --border:    rgba(144,200,240,.18);
    --orange:    #ff6b35;
    --orange2:   #f7931e;
    --green:     #10b981;
    --blue:      #00a8ff;
    --purple:    #8b5cf6;
    --yellow:    #f59e0b;
    --red:       #ef4444;
    --text:      #f5f4f0;
    --text2:     #c9d8e8;
    --text3:     #4a6070;
    --sidebar-w: 220px;
    --sidebar-collapsed: 64px;
    --topbar-h:  56px;
    --radius:    10px;
    --radius-sm: 6px;
}

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

body {
    font-family: 'IBM Plex Sans', 'DM Sans', sans-serif;
    background: linear-gradient(135deg, #060f1e 0%, #0d3e7a 100%) fixed;
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* Spinner */
.spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--orange);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Alerts */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.alert-error   { background: rgba(239,68,68,.12);  border: 1px solid rgba(239,68,68,.3);  color: #fca5a5; }
.alert-warning { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3); color: #fcd34d; }
.alert-info    { background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.3); color: #93c5fd; }
.alert-success { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); color: #6ee7b7; }

/* Badge */
.badge {
    background: rgba(255,107,53,.15);
    color: var(--orange);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Status */
.status-active { color: var(--green);  font-weight: 600; }
.status-paused { color: var(--yellow); font-weight: 600; }
.status-other  { color: var(--text2); }

/* Variation */
.var-positive { color: var(--green); font-weight: 600; }
.var-negative { color: var(--red);   font-weight: 600; }

/* Loading overlay */
.loading-overlay {
    position: fixed; inset: 0;
    background: rgba(11,17,32,.9);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 2000; gap: 1rem;
}