/* ===========================
       PALETA — ESCRITÓRIO CLARO
       bg:      #f1f1ef  creme papel
       surface: #FFFFFF
       raised:  #FAFAF8
       line:    #E5E1D8  bege divisória
       ink:     #1E2433  tinta escura
       primary: #2C4A7C  azul ardósia
       accent:  #D97706  âmbar
    =========================== */
    :root {
      --bg:          #f8f8f8;
      --surface:     #FFFFFF;
      --raised:      #FAFAF8;
      --line:        #E5E1D8;
      --line-strong: #D1CBC0;

      --ink:   #1E2433;
      --ink-2: #4B5563;
      --ink-3: #9CA3AF;

      --primary:    #2C4A7C;
      --primary-lt: #EEF2F9;
      --primary-md: #BFCDE4;

      --accent:    #e07b08;
      --accent-lt: #FEF3C7;

      --success:    #166534;
      --success-lt: #DCFCE7;
      --danger:     #b90505;
      --danger-lt:  #FEE2E2;
      --warning:    #e62503;
      --warning-lt: #fcefbd;
      --info:       #155E75;
      --info-lt:    #CFFAFE;

      --font-body:  'Outfit', sans-serif;
      --font-serif: 'Lora', serif;
      --font-mono:  'JetBrains Mono', monospace;

      --radius-sm: 6px;
      --radius:    12px;

      --shadow-xs:   0 1px 3px rgba(30,36,51,.06), 0 1px 2px rgba(30,36,51,.04);
      --shadow-card: 0 4px 16px rgba(30,36,51,.07), 0 1px 4px rgba(30,36,51,.04);

      --tr: 0.18s cubic-bezier(.4,0,.2,1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--ink);
      min-height: 100vh;
      line-height: 1.6;
      font-size: 14px;
    }

  
    .dash-root { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }

    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

    /* ══════════════════════════════
       HEADER
    ══════════════════════════════ */
    .dash-header {
      position: sticky; top: 0; z-index: 100;
      background: rgba(245,243,238,.94);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--line);
      padding: 0 32px;
      height: 60px;
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      box-shadow: var(--shadow-xs);
    }

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

    .brand-icon {
      width: 34px; height: 34px;
      background: var(--primary);
      border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 8px rgba(44,74,124,.28);
      flex-shrink: 0;
    }

    .brand-title { font-family: var(--font-serif); font-size: .98rem; color: var(--ink); }
    .brand-sub   { font-size: .67rem; color: var(--ink-3); font-family: var(--font-mono); text-transform: capitalize; }

    .header-meta { display: flex; align-items: center; gap: 16px; }

    .live-badge {
      display: flex; align-items: center; gap: 5px;
      font-size: .66rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .05em;
      color: var(--success);
      background: var(--success-lt); border: 1px solid #BBF7D0;
      padding: 3px 9px; border-radius: 99px;
    }

    .live-dot {
      width: 5px; height: 5px;
      background: var(--success); border-radius: 50%;
      animation: pulse-dot 1.8s ease infinite;
    }

    @keyframes pulse-dot {
      0%,100% { opacity:1; transform:scale(1); }
      50%     { opacity:.3; transform:scale(.65); }
    }

    .header-clock {
      font-family: var(--font-mono); font-size: .87rem; font-weight: 500; letter-spacing: .06em;
      color: var(--primary);
      background: var(--primary-lt); border: 1px solid var(--primary-md);
      padding: 3px 10px; border-radius: var(--radius-sm);
    }

    .header-date { font-size: .73rem; color: var(--ink-2); font-weight: 500; }

    .header-user { display: flex; align-items: center; gap: 7px; }

    .header-avatar {
      width: 30px; height: 30px;
      background: var(--primary); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .74rem; font-weight: 700; color: #fff;
      box-shadow: var(--shadow-xs);
    }

    .header-username { font-size: .73rem; font-weight: 500; color: var(--ink-2); }

    .btn-refresh {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 5px 13px;
      background: var(--surface); border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      color: var(--ink-2); font-size: .7rem; font-family: var(--font-body); font-weight: 500;
      cursor: pointer; transition: all var(--tr);
      box-shadow: var(--shadow-xs);
    }

    .btn-refresh:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

    /* ══════════════════════════════
       CANVAS
    ══════════════════════════════ */
    .dash-canvas {
      padding: 13px 16px 26px;
      display: flex; flex-direction: column; gap: 9px;
      max-width: 1600px; margin: 0 auto; width: 100%;
    }

    .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

    .section-title {
      font-size: .64rem; font-family: var(--font-mono);
      text-transform: uppercase; letter-spacing: .14em;
      color: var(--ink-3); font-weight: 500;
      display: flex; align-items: center; gap: 7px;
    }

    .section-title::before { content:''; width:18px; height:2px; background:var(--accent); border-radius:2px; }

    /* ══════════════════════════════
       CARD
    ══════════════════════════════ */
    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-card);
      transition: box-shadow var(--tr), border-color var(--tr);
    }

    .card:hover { box-shadow: 0 6px 24px rgba(30,36,51,.1); border-color: var(--line-strong); }

    /* ══════════════════════════════
       KPI GRID
    ══════════════════════════════ */
    .kpi-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
    @media(max-width:1200px){ .kpi-grid{ grid-template-columns:repeat(3,1fr); } }
    @media(max-width:768px) { .kpi-grid{ grid-template-columns:repeat(2,1fr); } }

    .kpi-card {
      padding: 18px 20px 16px;
      display: flex; flex-direction: column; gap: 10px;
      position: relative; overflow: hidden;
    }

    .kpi-card::before {
      content: ''; position: absolute; top:0; left:0; right:0; height:3px;
      background: var(--kpi-color, var(--primary));
      border-radius: var(--radius) var(--radius) 0 0;
    }

    .kpi-card::after {
      content: ''; position: absolute; right:-10px; bottom:-10px;
      width:68px; height:68px; border-radius:50%;
      background: var(--kpi-color, var(--primary)); opacity:.04;
    }

    .kpi-top { display: flex; align-items: flex-start; justify-content: space-between; }

    .kpi-label {
      font-size: .66rem; color: var(--ink-3);
      text-transform: uppercase; letter-spacing: .09em; font-weight: 600;
    }

    .kpi-icon {
      width: 28px; height: 28px; border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      background: var(--kpi-bg, var(--primary-lt)); flex-shrink: 0;
    }

    .kpi-value {
      font-size: 1.85rem; font-weight: 700; line-height: 1;
      color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    }

    .kpi-value .kpi-unit { font-size: .9rem; color: var(--ink-3); font-weight: 400; }

    .kpi-bar-wrap { height: 3px; background: var(--line); border-radius: 99px; overflow: hidden; }

    .kpi-bar-fill {
      height: 100%; border-radius: 99px;
      background: var(--kpi-color, var(--primary));
      transition: width .9s cubic-bezier(.4,0,.2,1);
    }

    .kpi-sub { font-size: .68rem; color: var(--ink-3); }

    /* ══════════════════════════════
       GRÁFICOS + ATIVIDADE
    ══════════════════════════════ */
    .row-charts { display: grid; grid-template-columns: 1fr 1fr 340px; gap: 18px; }
    @media(max-width:1200px){ .row-charts{ grid-template-columns:1fr 1fr; } }
    @media(max-width:900px) { .row-charts{ grid-template-columns:1fr; } }

    .chart-card { padding: 20px; }
    .chart-card-title { font-size: .82rem; font-weight: 600; color: var(--ink); font-family: var(--font-serif); }
    .chart-card-sub   { font-size: .66rem; color: var(--ink-3); margin-bottom: 14px; margin-top: 2px; }
    .chart-wrap { position: relative; height: 200px; }

    .activity-card { padding: 20px; display: flex; flex-direction: column; }

    .activity-list {
      display: flex; flex-direction: column;
      overflow-y: auto; max-height: 252px;
    }

    .activity-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 0; border-bottom: 1px solid var(--line);
    }

    .activity-item:last-child { border-bottom: none; }

    .activity-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      object-fit: cover; flex-shrink: 0;
      border: 2px solid var(--line);
    }

    .activity-info { flex:1; min-width:0; }
    .activity-name  { font-size:.76rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .activity-cargo { font-size:.63rem; color:var(--ink-3); }

    .activity-badge {
      font-size:.59rem; font-weight:700; padding:2px 7px;
      border-radius:99px; text-transform:uppercase; letter-spacing:.07em; flex-shrink:0;
    }

    .activity-time { font-size:.62rem; font-family:var(--font-mono); color:var(--ink-3); text-align:right; }

    .badge-entrada { background:var(--success-lt); color:var(--success); border:1px solid #BBF7D0; }
    .badge-almoco  { background:var(--accent-lt);  color:var(--accent);  border:1px solid #FDE68A; }
    .badge-retorno { background:var(--info-lt);    color:var(--info);    border:1px solid #A5F3FC; }
    .badge-saida   { background:var(--danger-lt);  color:var(--danger);  border:1px solid #FECACA; }

    /* ══════════════════════════════
       FUNCIONÁRIOS + AUSENTES
    ══════════════════════════════ */
    .row-employees { display: grid; grid-template-columns: 1fr 320px; gap: 18px; }
    @media(max-width:1100px){ .row-employees{ grid-template-columns:1fr; } }

    .employee-card { padding: 20px; }

    .emp-tabs {
      display:flex; gap:3px;
      background:var(--bg); padding:3px; border-radius:var(--radius-sm); border:1px solid var(--line);
      width:fit-content;
    }

    .emp-tab {
      padding:4px 13px; border-radius:4px;
      font-size:.69rem; font-weight:500; cursor:pointer;
      border:none; background:transparent; color:var(--ink-2);
      transition:all var(--tr); font-family:var(--font-body);
    }

    .emp-tab.active { background:var(--surface); color:var(--primary); font-weight:600; box-shadow:var(--shadow-xs); }
    .emp-tab:hover:not(.active) { color:var(--primary); }

    .emp-table-wrap { overflow-x:auto; margin-top:14px; }
    .emp-table { width:100%; border-collapse:collapse; }

    .emp-table th {
      font-size:.61rem; text-transform:uppercase; letter-spacing:.09em;
      color:var(--ink-3); text-align:left;
      padding:7px 10px; border-bottom:2px solid var(--line);
      white-space:nowrap; font-weight:600;
    }

    .emp-table td {
      padding:9px 10px; font-size:.77rem;
      border-bottom:1px solid var(--line); vertical-align:middle;
    }

    .emp-table tr:last-child td { border-bottom:none; }
    .emp-table tbody tr:hover td { background:var(--raised); }

    .emp-avatar-cell { display:flex; align-items:center; gap:9px; }

    .emp-photo {
      width:30px; height:30px; border-radius:50%;
      object-fit:cover; border:2px solid var(--line); flex-shrink:0;
    }

    .emp-name  { font-weight:600; color:var(--ink); }
    .emp-cargo { font-size:.64rem; color:var(--ink-3); }

    .status-pill {
      display:inline-flex; align-items:center; gap:5px;
      font-size:.65rem; font-weight:600; padding:3px 9px; border-radius:99px;
    }

    .status-pill .dot { width:5px; height:5px; border-radius:50%; }

    .status-presente { background:var(--success-lt); color:var(--success); }
    .status-presente .dot { background:var(--success); }
    .status-saiu     { background:#F3F4F6; color:#6B7280; }
    .status-saiu .dot { background:#9CA3AF; }
    .status-ausente  { background:var(--danger-lt); color:var(--danger); }
    .status-ausente .dot { background:var(--danger); }

    .reg-chips { display:flex; gap:3px; flex-wrap:wrap; }

    .reg-chip {
      font-size:.59rem; font-family:var(--font-mono);
      padding:1px 5px; border-radius:3px;
      background:var(--primary-lt); color:var(--primary);
      border:1px solid var(--primary-md);
    }

    .atraso-tag    { font-size:.61rem; color:var(--warning); font-family:var(--font-mono); font-weight:500; }
    .horas-worked  { font-family:var(--font-mono); font-size:.75rem; color:var(--primary); font-weight:500; }

    .absent-card { padding:20px; display:flex; flex-direction:column; }

    .absent-list { display:flex; flex-direction:column; gap:7px; overflow-y:auto; max-height:360px; }

    .absent-item {
      display:flex; align-items:center; gap:9px;
      padding:7px 9px;
      background:#FEF7F7; border:1px solid #FECACA; border-radius:var(--radius-sm);
      transition:background var(--tr);
    }

    .absent-item:hover { background:var(--danger-lt); }

    .absent-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid #FECACA; }
    .absent-name   { font-size:.75rem; font-weight:600; color:var(--ink); }
    .absent-cargo  { font-size:.62rem; color:var(--ink-3); }

    /* ══════════════════════════════
       ALERTAS + PADRÕES
    ══════════════════════════════ */
    .row-alerts { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
    @media(max-width:900px){ .row-alerts{ grid-template-columns:1fr; } }

    .alert-card { padding:20px; }
    .alert-list { display:flex; flex-direction:column; gap:8px; }

    .alert-item {
      display:flex; gap:11px; align-items:flex-start;
      padding:11px 12px; border-radius:var(--radius-sm); border:1px solid transparent;
      transition:box-shadow var(--tr);
    }

    .alert-item:hover { box-shadow:var(--shadow-xs); }

    .alert-alto  { background:#FEF7F7; border-color:#FECACA; }
    .alert-medio { background:#FFFBEB; border-color:#FDE68A; }
    .alert-baixo { background:#F0FDFA; border-color:#A5F3FC; }

    .alert-icon-wrap {
      width:26px; height:26px; border-radius:var(--radius-sm);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }

    .alert-icon-alto  { background:var(--danger-lt); }
    .alert-icon-medio { background:var(--accent-lt); }
    .alert-icon-baixo { background:var(--info-lt); }

    .alert-title { font-size:.76rem; font-weight:600; color:var(--ink); }
    .alert-msg   { font-size:.7rem; color:var(--ink-2); margin-top:2px; }
    .alert-acao  { font-size:.62rem; color:var(--ink-3); margin-top:3px; font-style:italic; }

    .padrao-list { display:flex; flex-direction:column; gap:7px; }

    .padrao-item {
      display:flex; align-items:center; gap:10px;
      padding:9px 11px;
      background:var(--raised); border:1px solid var(--line); border-radius:var(--radius-sm);
      transition:border-color var(--tr);
    }

    .padrao-item:hover { border-color:var(--line-strong); }

    .padrao-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
    .padrao-info { flex:1; }
    .padrao-name  { font-size:.75rem; font-weight:600; color:var(--ink); }
    .padrao-cargo { font-size:.62rem; color:var(--ink-3); }

    .sev-badge { font-size:.59rem; font-weight:700; padding:2px 7px; border-radius:99px; text-transform:uppercase; letter-spacing:.04em; }
    .sev-alta  { background:var(--danger-lt);  color:var(--danger);  border:1px solid #FECACA; }
    .sev-media { background:var(--accent-lt);  color:var(--accent);  border:1px solid #FDE68A; }
    .sev-baixa { background:var(--success-lt); color:var(--success); border:1px solid #BBF7D0; }

    /* ══════════════════════════════
       PRODUTIVIDADE + COMPARATIVO
    ══════════════════════════════ */
    .row-cargo { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
    @media(max-width:900px){ .row-cargo{ grid-template-columns:1fr; } }

    .cargo-card { padding:20px; }

    .cargo-table { width:100%; border-collapse:collapse; }

    .cargo-table th {
      font-size:.61rem; text-transform:uppercase; letter-spacing:.09em;
      color:var(--ink-3); text-align:left;
      padding:6px 9px; border-bottom:2px solid var(--line); font-weight:600;
    }

    .cargo-table td { padding:9px 9px; font-size:.77rem; border-bottom:1px solid var(--line); }
    .cargo-table tr:last-child td { border-bottom:none; }
    .cargo-table tbody tr:hover td { background:var(--raised); }

    .cargo-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle; }

    .cargo-bar-mini-bg { height:3px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:3px; }
    .cargo-bar-mini    { height:100%; border-radius:99px; }

    .comp-table { width:100%; border-collapse:collapse; }

    .comp-table th {
      font-size:.61rem; text-transform:uppercase; letter-spacing:.09em;
      color:var(--ink-3); padding:6px 9px; text-align:left;
      border-bottom:2px solid var(--line); font-weight:600;
    }

    .comp-table td { padding:9px 9px; font-size:.77rem; border-bottom:1px solid var(--line); }
    .comp-table tr.is-hoje td { background:var(--primary-lt); }
    .comp-table tr:last-child td { border-bottom:none; }

    .trend-up   { color:var(--success); font-size:.66rem; font-weight:600; }
    .trend-down { color:var(--danger);  font-size:.66rem; font-weight:600; }
    .trend-eq   { color:var(--ink-3);   font-size:.66rem; }

    .tag-hoje {
      font-size:.6rem; font-weight:700; color:var(--primary);
      background:var(--primary-lt); padding:1px 5px; border-radius:99px;
      border:1px solid var(--primary-md); margin-left:4px; font-family:var(--font-mono);
    }

    /* ══════════════════════════════
       BOTTOM ROW
    ══════════════════════════════ */
    .row-bottom { display:grid; grid-template-columns:260px 1fr 260px; gap:18px; }
    @media(max-width:1100px){ .row-bottom{ grid-template-columns:1fr 1fr; } }
    @media(max-width:700px) { .row-bottom{ grid-template-columns:1fr; } }

    .top-card { padding:20px; }
    .top-list  { display:flex; flex-direction:column; gap:10px; }
    .top-item  { display:flex; align-items:center; gap:9px; }

    .top-rank { font-family:var(--font-mono); font-size:.67rem; color:var(--ink-3); width:16px; text-align:right; flex-shrink:0; }
    .top-item:nth-child(1) .top-rank { color:#B45309; font-weight:700; }
    .top-item:nth-child(2) .top-rank { color:#6B7280; font-weight:700; }
    .top-item:nth-child(3) .top-rank { color:#92400E; font-weight:700; }

    .top-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
    .top-item:nth-child(1) .top-avatar { border-color:#FCD34D; }
    .top-item:nth-child(2) .top-avatar { border-color:#D1D5DB; }
    .top-item:nth-child(3) .top-avatar { border-color:#D97706; }

    .top-info  { flex:1; }
    .top-name  { font-size:.76rem; font-weight:600; color:var(--ink); }
    .top-cargo { font-size:.62rem; color:var(--ink-3); }

    .top-score {
      font-family:var(--font-mono); font-size:.74rem; color:var(--accent); font-weight:700;
      background:var(--accent-lt); padding:2px 7px; border-radius:99px; border:1px solid #FDE68A;
    }

    .previsao-list { display:flex; flex-direction:column; gap:7px; }

    .prev-item {
      display:flex; align-items:center; gap:10px;
      padding:9px 12px;
      background:var(--raised); border:1px solid var(--line); border-radius:var(--radius-sm);
      transition:border-color var(--tr);
    }

    .prev-item:hover { border-color:var(--primary-md); }

    .prev-name { font-size:.75rem; font-weight:600; min-width:108px; color:var(--ink); }

    .prev-progress-wrap { flex:1; height:6px; background:var(--line); border-radius:99px; overflow:hidden; }

    .prev-progress {
      height:100%;
      background:linear-gradient(90deg, var(--primary), #6A93CB);
      border-radius:99px; transition:width .8s ease;
    }

    .prev-saida { font-family:var(--font-mono); font-size:.71rem; color:var(--success); font-weight:600; flex-shrink:0; }

    .pico-list  { display:flex; flex-direction:column; gap:10px; }
    .pico-item  { display:flex; flex-direction:column; gap:4px; }
    .pico-header{ display:flex; justify-content:space-between; font-size:.71rem; }
    .pico-hora  { font-family:var(--font-mono); color:var(--ink); font-weight:500; }
    .pico-tipo  { color:var(--ink-3); }
    .pico-qtd   { color:var(--primary); font-weight:700; }
    .pico-bar-bg{ height:5px; background:var(--line); border-radius:99px; overflow:hidden; }
    .pico-bar   { height:100%; background:linear-gradient(90deg, var(--primary), var(--accent)); border-radius:99px; }

    /* ══════════════════════════════
       EMPTY + ANIM
    ══════════════════════════════ */
    .empty-state { text-align:center; padding:22px 16px; color:var(--ink-3); font-size:.74rem; }
    .empty-state svg { opacity:.35; margin-bottom:6px; display:block; margin-inline:auto; }

    @keyframes fadeUp {
      from { opacity:0; transform:translateY(9px); }
      to   { opacity:1; transform:translateY(0); }
    }

    .anim   { opacity:0; animation:fadeUp .35s ease forwards; }
    .anim-1 { animation-delay:.04s; }
    .anim-2 { animation-delay:.09s; }
    .anim-3 { animation-delay:.14s; }
    .anim-4 { animation-delay:.19s; }
    .anim-5 { animation-delay:.24s; }

    .text-mono  { font-family:var(--font-mono); }
    .text-muted { color:var(--ink-3); }
    .text-sm    { font-size:.72rem; }
    .fw-6       { font-weight:600; }