/* PerfilPro — Stylesheet principal
   Paleta: navy sidebar (#0f2744) + cards brancos + accent sky-blue (#0ea5e9)
   Font Awesome 6 via CDN (não incluído aqui)
*/

/* =================== RESET & VARS =================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --navy:          #0f2744;
    --navy-hover:    #1a3a5c;
    --navy-border:   rgba(255, 255, 255, 0.08);
    --accent:        #0ea5e9;
    --accent-light:  #38bdf8;
    --bg:            #f0f4f8;
    --white:         #ffffff;
    --text-dark:     #1e293b;
    --text-mid:      #475569;
    --text-light:    #94a3b8;
    --border:        #e2e8f0;
    --shadow:        0 1px 4px rgba(0, 0, 0, 0.07);
    --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.10);
    --sidebar-w:     220px;
    --header-h:      56px;
    --radius:        10px;
    --disc-d:        #ef4444;
    --disc-i:        #f97316;
    --disc-s:        #22c55e;
    --disc-c:        #3b82f6;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    background:  var(--bg);
    color:       var(--text-dark);
    font-size:   14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

/* =================== APP WRAPPER =================== */
.app-wrapper {
    display:    flex;
    min-height: 100vh;
}

/* =================== SIDEBAR =================== */
.sidebar {
    width:      var(--sidebar-w);
    min-width:  var(--sidebar-w);
    background: var(--navy);
    position:   fixed;
    top: 0; left: 0; bottom: 0;
    z-index:    100;
    display:    flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.sidebar-logo {
    display:    block;
    padding:    20px 18px 18px;
    font-size:  22px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color:      white;
    border-bottom: 1px solid var(--navy-border);
    margin-bottom: 6px;
}
.sidebar-logo .accent { color: var(--accent-light); }

.sidebar-section {
    font-size:       10px;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.8px;
    color:           rgba(255, 255, 255, 0.25);
    padding:         14px 18px 4px;
}

.sidebar-divider {
    height:     1px;
    background: var(--navy-border);
    margin:     6px 14px;
}

.nav-item {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     9px 18px;
    color:       rgba(255, 255, 255, 0.48);
    font-size:   13px;
    font-weight: 500;
    border-right: 3px solid transparent;
    transition:  all 0.15s ease;
    cursor:      pointer;
}
.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color:      rgba(255, 255, 255, 0.85);
}
.nav-item.active {
    background:          rgba(14, 165, 233, 0.15);
    color:               white;
    border-right-color:  var(--accent);
    font-weight:         600;
}
.nav-item.active .nav-icon { color: var(--accent-light); }

.nav-item .nav-icon {
    width:      18px;
    text-align: center;
    font-size:  13px;
    flex-shrink: 0;
    color:      rgba(255, 255, 255, 0.35);
}
.nav-item:hover .nav-icon { color: rgba(255, 255, 255, 0.7); }

.nav-badge {
    margin-left: auto;
    font-size:   11px;
    font-weight: 700;
    padding:     1px 7px;
    border-radius: 20px;
}
.nav-badge.low  { background: #fee2e2; color: #dc2626; }
.nav-badge.ok   { background: #dcfce7; color: #16a34a; }

.nav-item.danger       { color: rgba(239, 68, 68, 0.65); }
.nav-item.danger:hover {
    color:      #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.sidebar-bottom { margin-top: auto; padding-bottom: 8px; }

/* =================== MAIN AREA =================== */
.app-main {
    margin-left: var(--sidebar-w);
    flex:        1;
    display:     flex;
    flex-direction: column;
    min-height:  100vh;
}

/* =================== HEADER =================== */
.app-header {
    background:  var(--white);
    height:      var(--header-h);
    display:     flex;
    align-items: center;
    justify-content: space-between;
    padding:     0 24px;
    border-bottom: 1px solid var(--border);
    box-shadow:  var(--shadow);
    position:    sticky;
    top: 0;
    z-index:     50;
}

.breadcrumb {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   13px;
    color:       var(--text-light);
}
.breadcrumb .bc-sep { font-size: 9px; color: var(--border); }
.breadcrumb a { color: var(--text-light); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .bc-current { color: var(--text-dark); font-weight: 600; }

.header-right {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.header-credits {
    display:      flex;
    align-items:  center;
    gap:          5px;
    background:   var(--bg);
    border:       1px solid var(--border);
    border-radius: 20px;
    padding:      5px 12px;
    font-size:    12px;
    font-weight:  600;
    color:        var(--text-mid);
}
.header-credits i { color: var(--accent); font-size: 11px; }
.header-credits.unlimited { color: var(--accent); }

.header-avatar {
    width:        36px;
    height:       36px;
    border-radius: 50%;
    background:   linear-gradient(135deg, var(--navy), var(--accent));
    display:      flex;
    align-items:  center;
    justify-content: center;
    color:        white;
    font-weight:  700;
    font-size:    13px;
    cursor:       pointer;
    flex-shrink:  0;
}

.header-user {
    font-size:   13px;
    font-weight: 600;
    color:       var(--text-dark);
    cursor:      pointer;
    display:     flex;
    align-items: center;
    gap:         4px;
}
.header-user i { font-size: 9px; color: var(--text-light); }

/* =================== CONTENT =================== */
.app-content {
    flex:    1;
    padding: 24px;
}

/* =================== PAGE HERO =================== */
.page-hero {
    background:    linear-gradient(135deg, var(--navy) 0%, #1e3a5c 50%, #0369a1 100%);
    border-radius: var(--radius);
    padding:       22px 26px;
    margin-bottom: 24px;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    color:         white;
}
.page-hero-title {
    font-size:   17px;
    font-weight: 700;
    display:     flex;
    align-items: center;
    gap:         8px;
}
.page-hero-title i { color: var(--accent-light); }
.page-hero-sub {
    font-size:  13px;
    color:      rgba(255, 255, 255, 0.55);
    margin-top: 3px;
}

/* =================== STATS CARDS =================== */
.stats-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:                   16px;
    margin-bottom:         24px;
}

.stat-card {
    background:    var(--white);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    padding:       18px 20px;
    border-top:    3px solid var(--accent);
}
.stat-card.green  { border-top-color: var(--disc-s); }
.stat-card.orange { border-top-color: var(--disc-i); }
.stat-card.purple { border-top-color: #8b5cf6; }
.stat-card.red    { border-top-color: var(--disc-d); }

.stat-label {
    font-size:      11px;
    font-weight:    600;
    color:          var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom:  10px;
    display:        flex;
    align-items:    center;
    gap:            6px;
}
.stat-label i { font-size: 12px; }

.stat-value {
    font-size:   30px;
    font-weight: 800;
    color:       var(--text-dark);
    line-height: 1;
    margin-bottom: 4px;
}
.stat-sub {
    font-size: 12px;
    color:     var(--text-light);
}

/* =================== CARD =================== */
.card {
    background:    var(--white);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    padding:       20px;
}
.card-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   16px;
}
.card-title {
    font-size:   14px;
    font-weight: 700;
    color:       var(--text-dark);
    display:     flex;
    align-items: center;
    gap:         8px;
}
.card-title i { color: var(--accent); }

/* =================== BUTTONS =================== */
.btn {
    display:     inline-flex;
    align-items: center;
    gap:         7px;
    padding:     9px 18px;
    border-radius: 8px;
    font-size:   13px;
    font-weight: 600;
    border:      none;
    cursor:      pointer;
    transition:  all 0.15s;
    line-height: 1;
}
.btn-primary   { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-light); }

.btn-secondary {
    background: var(--bg);
    color:      var(--text-mid);
    border:     1px solid var(--border);
}
.btn-secondary:hover { background: var(--border); }

.btn-danger    { background: #fee2e2; color: #dc2626; }
.btn-danger:hover { background: #fecaca; }

.btn-success   { background: #dcfce7; color: #16a34a; }
.btn-success:hover { background: #bbf7d0; }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }

/* =================== FORMS =================== */
.form-group { margin-bottom: 18px; }

.form-label {
    display:       block;
    font-size:     13px;
    font-weight:   600;
    color:         var(--text-mid);
    margin-bottom: 6px;
}
.form-label i { margin-right: 4px; color: var(--accent); }

.form-control {
    width:         100%;
    padding:       10px 12px;
    border:        1px solid var(--border);
    border-radius: 8px;
    font-size:     14px;
    color:         var(--text-dark);
    background:    var(--white);
    transition:    border-color 0.15s, box-shadow 0.15s;
    outline:       none;
    font-family:   inherit;
}
.form-control:focus {
    border-color: var(--accent);
    box-shadow:   0 0 0 3px rgba(14, 165, 233, 0.12);
}
.form-control::placeholder { color: var(--text-light); }

select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 80px; }

/* =================== DISC BADGES =================== */
.disc-badge {
    display:      inline-flex;
    align-items:  center;
    padding:      3px 10px;
    border-radius: 20px;
    font-size:    12px;
    font-weight:  700;
    white-space:  nowrap;
}
.disc-badge.D { background: #fee2e2; color: #dc2626; }
.disc-badge.I { background: #ffedd5; color: #ea580c; }
.disc-badge.S { background: #dcfce7; color: #16a34a; }
.disc-badge.C { background: #dbeafe; color: #2563eb; }

/* =================== ALERTS =================== */
.alert {
    padding:       12px 16px;
    border-radius: 8px;
    font-size:     13px;
    margin-bottom: 16px;
    display:       flex;
    align-items:   flex-start;
    gap:           8px;
}
.alert i { flex-shrink: 0; margin-top: 1px; }
.alert-error   { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.alert-success { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.alert-info    { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.alert-warning { background: #fef9c3; color: #854d0e; border: 1px solid #fef08a; }

/* =================== TABLES =================== */
.table-wrapper { overflow-x: auto; }
table.data-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
}
.data-table th {
    text-align:     left;
    padding:        10px 14px;
    font-size:      11px;
    font-weight:    700;
    color:          var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom:  2px solid var(--border);
    white-space:    nowrap;
}
.data-table td {
    padding:       12px 14px;
    border-bottom: 1px solid var(--border);
    color:         var(--text-dark);
    vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--bg); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* =================== LOGIN PAGE =================== */
.login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--navy) 0%, #0c2340 100%);
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    16px;
}
.login-card {
    background:    white;
    border-radius: 16px;
    padding:       40px;
    width:         100%;
    max-width:     400px;
    box-shadow:    0 20px 60px rgba(0, 0, 0, 0.3);
}
.login-logo {
    font-size:   28px;
    font-weight: 900;
    text-align:  center;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}
.login-logo .accent { color: var(--accent); }
.login-subtitle {
    text-align:    center;
    color:         var(--text-light);
    font-size:     13px;
    margin-bottom: 28px;
}

/* =================== UTILITIES =================== */
.text-muted  { color: var(--text-light); }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.w-full { width: 100%; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

/* =================== EMPTY STATE =================== */
.empty-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-light);
}
.empty-state > i {
    font-size: 48px;
    color: var(--border);
    display: block;
    margin-bottom: 16px;
}
.empty-state h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}
.empty-state p {
    font-size: 13px;
    margin-bottom: 20px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* =================== STATUS BADGES =================== */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.status-badge.ativa      { background: #dcfce7; color: #16a34a; }
.status-badge.arquivada  { background: #f1f5f9; color: #94a3b8; }
.status-badge.pendente   { background: #fef9c3; color: #854d0e; }
.status-badge.respondido { background: #dcfce7; color: #16a34a; }
.status-badge.expirado   { background: #fee2e2; color: #dc2626; }