/* ================================================================
   LIOTTO PEOPLE — DESIGN SYSTEM v1.0
   Base visual: LIOTTO COMUNICA (PROJETO WHATSAPP/web — Next+Tailwind)
   ----------------------------------------------------------------
   Arquitetura em 3 camadas:
     §1 Primitivos   --ds-blue-600, --ds-space-4, --ds-shadow-sm...
     §2 Semânticos   --ds-primary, --ds-background... (triplas HSL,
                     tema claro no :root e escuro em .dark)
     §3 Componentes  --ds-btn-height, --ds-card-padding...
   Depois:
     §4 Ponte legado — realimenta as variáveis antigas do style.css
        (--primary, --bg, --border...) com os tokens novos.
     §5 Adoção      — redefine as classes existentes (.btn, .card,
        .sidebar, .badge...) na identidade COMUNICA.
   ----------------------------------------------------------------
   ORDEM DE CARGA: SEMPRE depois de style.css (index.html).
   Documentação: docs/DESIGN-SYSTEM.md
   Guia vivo:    frontend/design-system.html
   Regra de ouro: componente novo NUNCA usa hex cru — só var(--ds-*)
   ================================================================ */

/* ============================================================
   §1 PRIMITIVOS — valores brutos (paleta Tailwind do COMUNICA)
   Nunca usar direto em componente; alimentam a camada semântica.
   ============================================================ */
:root {
    /* Azul — cor de marca (primária) */
    --ds-blue-50:  #eff6ff;
    --ds-blue-100: #dbeafe;
    --ds-blue-200: #bfdbfe;
    --ds-blue-300: #93c5fd;
    --ds-blue-400: #60a5fa;
    --ds-blue-500: #3b82f6;
    --ds-blue-600: #2563eb;   /* primária (tema claro) */
    --ds-blue-700: #1d4ed8;
    --ds-blue-800: #1e40af;
    --ds-blue-900: #1e3a8a;   /* sidebar (fim do gradiente) */
    --ds-blue-950: #172554;   /* sidebar (início do gradiente) */

    /* Slate — neutros (texto, bordas, fundos) */
    --ds-slate-50:  #f8fafc;
    --ds-slate-100: #f1f5f9;
    --ds-slate-200: #e2e8f0;
    --ds-slate-300: #cbd5e1;
    --ds-slate-400: #94a3b8;
    --ds-slate-500: #64748b;
    --ds-slate-600: #475569;
    --ds-slate-700: #334155;
    --ds-slate-800: #1e293b;
    --ds-slate-900: #0f172a;

    /* Feedback */
    --ds-emerald-100: #d1fae5;
    --ds-emerald-600: #059669;
    --ds-emerald-800: #065f46;
    --ds-amber-100:   #fef3c7;
    --ds-amber-500:   #f59e0b;
    --ds-amber-600:   #d97706;
    --ds-amber-800:   #92400e;
    --ds-red-100:     #fee2e2;
    --ds-red-500:     #ef4444;
    --ds-red-600:     #dc2626;
    --ds-red-800:     #991b1b;
    --ds-violet-100:  #ede9fe;
    --ds-violet-800:  #5b21b6;
    --ds-sky-500:     #0ea5e9; /* brilho do painel de login */

    /* Tipografia */
    --ds-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ds-text-xs:   12px;
    --ds-text-sm:   13px;
    --ds-text-base: 14px;
    --ds-text-md:   16px;
    --ds-text-lg:   18px;
    --ds-text-xl:   20px;
    --ds-text-2xl:  24px;
    --ds-text-3xl:  30px;
    --ds-leading-tight:  1.25;
    --ds-leading-normal: 1.5;

    /* Espaçamento (base 4px) */
    --ds-space-1:  4px;
    --ds-space-2:  8px;
    --ds-space-3:  12px;
    --ds-space-4:  16px;
    --ds-space-5:  20px;
    --ds-space-6:  24px;
    --ds-space-8:  32px;
    --ds-space-10: 40px;
    --ds-space-12: 48px;

    /* Raios */
    --ds-radius-sm:   4px;
    --ds-radius-md:   6px;    /* botões, inputs (rounded-md) */
    --ds-radius-lg:   8px;    /* cards, modais (rounded-lg)  */
    --ds-radius-xl:   12px;
    --ds-radius-2xl:  16px;
    --ds-radius-full: 9999px;

    /* Sombras */
    --ds-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --ds-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
    --ds-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
    --ds-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);

    /* Movimento */
    --ds-transition-fast: 150ms ease;
    --ds-transition-base: 200ms ease;
    --ds-ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);

    /* Camadas (z-index) */
    --ds-z-sidebar:  100;
    --ds-z-dropdown: 900;
    --ds-z-modal:    1000;
    --ds-z-toast:    9999;
}

/* ============================================================
   §2 SEMÂNTICOS — triplas HSL (usar sempre como hsl(var(--ds-x)))
   Valores idênticos ao globals.css do LIOTTO COMUNICA.
   ============================================================ */
:root {
    color-scheme: light;

    --ds-background:            214 40% 98%;
    --ds-foreground:            222.2 47.4% 11.2%;
    --ds-card:                  0 0% 100%;
    --ds-card-foreground:       222.2 47.4% 11.2%;
    --ds-popover:               0 0% 100%;
    --ds-popover-foreground:    222.2 47.4% 11.2%;
    --ds-primary:               221.2 83.2% 53.3%;  /* blue-600 */
    --ds-primary-foreground:    210 40% 98%;
    --ds-secondary:             210 40% 96.1%;
    --ds-secondary-foreground:  222.2 47.4% 11.2%;
    --ds-muted:                 210 40% 96.1%;
    --ds-muted-foreground:      215.4 16.3% 46.9%;
    --ds-accent:                214 95% 93%;        /* blue-100 */
    --ds-accent-foreground:     226 71% 40%;        /* blue-800 */
    --ds-destructive:           0 84.2% 60.2%;
    --ds-destructive-foreground:210 40% 98%;
    --ds-success:               161 94% 30%;        /* emerald-600 */
    --ds-success-foreground:    210 40% 98%;
    --ds-warning:               38 92% 50%;         /* amber-500 */
    --ds-warning-foreground:    24 100% 10%;
    --ds-info:                  226 71% 40%;        /* blue-800 (marinho) */
    --ds-info-foreground:       210 40% 98%;
    --ds-border:                214.3 31.8% 91.4%;
    --ds-input:                 214.3 31.8% 91.4%;
    --ds-ring:                  221.2 83.2% 53.3%;
}

.dark {
    color-scheme: dark;

    --ds-background:            222.2 47.4% 7%;
    --ds-foreground:            210 40% 98%;
    --ds-card:                  222.2 47.4% 10%;
    --ds-card-foreground:       210 40% 98%;
    --ds-popover:               222.2 47.4% 10%;
    --ds-popover-foreground:    210 40% 98%;
    --ds-primary:               217.2 91.2% 59.8%;  /* blue-500 */
    --ds-primary-foreground:    222.2 47.4% 11.2%;
    --ds-secondary:             217.2 32.6% 17.5%;
    --ds-secondary-foreground:  210 40% 98%;
    --ds-muted:                 217.2 32.6% 17.5%;
    --ds-muted-foreground:      215 20.2% 65.1%;
    --ds-accent:                217.2 32.6% 17.5%;
    --ds-accent-foreground:     210 40% 98%;
    --ds-destructive:           0 62.8% 30.6%;
    --ds-destructive-foreground:210 40% 98%;
    --ds-border:                217.2 32.6% 17.5%;
    --ds-input:                 217.2 32.6% 17.5%;
    --ds-ring:                  217.2 91.2% 59.8%;
}

/* ============================================================
   §3 TOKENS DE COMPONENTE
   ============================================================ */
:root {
    /* Botão */
    --ds-btn-height:      36px;                 /* h-9  */
    --ds-btn-height-sm:   32px;                 /* h-8  */
    --ds-btn-height-lg:   40px;                 /* h-10 */
    --ds-btn-px:          16px;
    --ds-btn-radius:      var(--ds-radius-md);
    --ds-btn-font-size:   var(--ds-text-base);
    --ds-btn-font-weight: 500;

    /* Campo de formulário */
    --ds-input-height:    36px;
    --ds-input-px:        12px;
    --ds-input-radius:    var(--ds-radius-md);
    --ds-input-font-size: var(--ds-text-base);

    /* Card */
    --ds-card-radius:  var(--ds-radius-lg);
    --ds-card-padding: var(--ds-space-5);
    --ds-card-shadow:  var(--ds-shadow-sm);

    /* Badge */
    --ds-badge-radius:      var(--ds-radius-full);
    --ds-badge-px:          10px;
    --ds-badge-py:          2px;
    --ds-badge-font-size:   var(--ds-text-xs);
    --ds-badge-font-weight: 600;

    /* Modal */
    --ds-modal-radius:  var(--ds-radius-lg);
    --ds-modal-padding: var(--ds-space-6);
    --ds-modal-shadow:  var(--ds-shadow-lg);
    --ds-modal-overlay: rgb(0 0 0 / 0.5);

    /* Toast */
    --ds-toast-radius: var(--ds-radius-lg);
    --ds-toast-shadow: var(--ds-shadow-lg);

    /* Sidebar (navy — não muda no tema escuro) */
    --ds-sidebar-width:         250px;
    --ds-sidebar-bg-from:       var(--ds-blue-950);
    --ds-sidebar-bg-to:         var(--ds-blue-900);
    --ds-sidebar-foreground:    var(--ds-blue-100);
    --ds-sidebar-muted:         var(--ds-blue-200);
    --ds-sidebar-section:       var(--ds-blue-300);
    --ds-sidebar-item-hover:    rgb(255 255 255 / 0.10);
    --ds-sidebar-item-active:   rgb(255 255 255 / 0.15);
    --ds-sidebar-divider:       rgb(255 255 255 / 0.10);
    --ds-sidebar-item-radius:   var(--ds-radius-lg);

    /* Tabela */
    --ds-table-head-py: 14px;
    --ds-table-cell-px: 16px;
    --ds-table-cell-py: 12px;

    /* Anel de foco */
    --ds-focus-ring: 0 0 0 2px hsl(var(--ds-ring) / 0.35);
}

/* ============================================================
   §4 PONTE LEGADO — realimenta as variáveis do style.css.
   Tudo que já usa var(--primary), var(--bg)... migra de cor
   automaticamente. Não usar estes nomes em código novo.
   ============================================================ */
:root {
    --bg:            hsl(var(--ds-background));
    --bg-card:       hsl(var(--ds-card));
    --bg-hover:      hsl(var(--ds-secondary));
    --border:        hsl(var(--ds-border));
    --text:          hsl(var(--ds-foreground));
    --text-muted:    hsl(var(--ds-muted-foreground));
    --primary:       hsl(var(--ds-primary));
    --primary-hover: hsl(var(--ds-primary) / 0.9);
    --success:       hsl(var(--ds-success));
    --warning:       hsl(var(--ds-warning));
    --danger:        hsl(var(--ds-destructive));
    --info:          hsl(var(--ds-info));
    --sidebar-bg:    var(--ds-sidebar-bg-from);
    --sidebar-w:     var(--ds-sidebar-width);
    --radius:        var(--ds-radius-lg);
}

/* ============================================================
   §5 ADOÇÃO — identidade COMUNICA nas classes existentes.
   Mesmos seletores do style.css; este arquivo carrega depois.
   ============================================================ */

/* ---------- 5.1 Base ---------- */
body {
    font-family: var(--ds-font-sans);
    background: hsl(var(--ds-background));
    color: hsl(var(--ds-foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: hsl(var(--ds-primary) / 0.2); }

/* ---------- 5.2 Sidebar (navy gradiente, texto claro) ---------- */
.sidebar {
    background: linear-gradient(180deg, var(--ds-sidebar-bg-from) 0%, var(--ds-sidebar-bg-to) 100%);
    border-right: none;
}

.sidebar-header { border-bottom: 1px solid var(--ds-sidebar-divider); }

/* Logo colorido sobre navy: chip branco preserva a leitura */
.logo-img {
    background: #fff;
    padding: 6px 10px;
    border-radius: var(--ds-radius-lg);
}

.sidebar-subtitle { color: var(--ds-sidebar-section); }

.nav-item {
    color: var(--ds-sidebar-foreground);
    border-radius: var(--ds-sidebar-item-radius);
    font-weight: 500;
}

.nav-item:hover {
    background: var(--ds-sidebar-item-hover);
    color: #fff;
}

.nav-item.active {
    background: var(--ds-sidebar-item-active);
    color: #fff;
    box-shadow: none;
    font-weight: 600;
}

.nav-item:focus-visible {
    outline: 2px solid rgb(255 255 255 / 0.7);
    outline-offset: -2px;
}

.nav-group-label { color: var(--ds-sidebar-section); }

.nav-menu { scrollbar-color: rgb(255 255 255 / 0.25) transparent; }
.nav-menu::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.25); }
.nav-menu::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.40); }

.sidebar-footer { border-top: 1px solid var(--ds-sidebar-divider); }
.user-nome  { color: #fff; }
.user-papel { color: var(--ds-sidebar-section); }

.logout-btn {
    background: transparent;
    border: 1px solid rgb(255 255 255 / 0.15);
    color: var(--ds-sidebar-muted);
}
.logout-btn:hover {
    background: var(--ds-sidebar-item-hover);
    border-color: rgb(255 255 255 / 0.30);
    color: #fff;
}

/* ---------- 5.3 Cabeçalho de página ---------- */
.page-header {
    padding-bottom: var(--ds-space-4);
    border-bottom: 1px solid hsl(var(--ds-border));
    margin-bottom: var(--ds-space-6);
}

.page-header h1 {
    font-size: var(--ds-text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---------- 5.4 Botões ---------- */
.btn {
    height: var(--ds-btn-height);
    padding: 0 var(--ds-btn-px);
    border-radius: var(--ds-btn-radius);
    font-size: var(--ds-btn-font-size);
    font-weight: var(--ds-btn-font-weight);
    box-shadow: var(--ds-shadow-sm);
    transition: color var(--ds-transition-fast), background var(--ds-transition-fast),
                border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
    white-space: nowrap;
    justify-content: center;
}

.btn:disabled { opacity: 0.5; pointer-events: none; }

.btn-primary { background: hsl(var(--ds-primary)); color: hsl(var(--ds-primary-foreground)); }
.btn-primary:hover { background: hsl(var(--ds-primary) / 0.9); }

/* "Ghost" legado = variante outline do COMUNICA */
.btn-ghost {
    background: hsl(var(--ds-card));
    border: 1px solid hsl(var(--ds-input));
    color: hsl(var(--ds-foreground));
}
.btn-ghost:hover { background: hsl(var(--ds-secondary)); color: hsl(var(--ds-foreground)); }

.btn-success { background: hsl(var(--ds-success)); color: hsl(var(--ds-success-foreground)); }
.btn-success:hover { background: hsl(var(--ds-success) / 0.9); }

.btn-warning { background: hsl(var(--ds-warning)); color: hsl(var(--ds-warning-foreground)); }
.btn-warning:hover { background: hsl(var(--ds-warning) / 0.9); }

.btn-danger { background: hsl(var(--ds-destructive)); color: hsl(var(--ds-destructive-foreground)); }
.btn-danger:hover { background: hsl(var(--ds-destructive) / 0.9); }

.btn-ghost-danger {
    background: transparent;
    border: 1px solid hsl(var(--ds-input));
    color: hsl(var(--ds-destructive));
    box-shadow: none;
}
.btn-ghost-danger:hover { background: var(--ds-red-100); border-color: hsl(var(--ds-destructive)); }

.btn-sm {
    height: var(--ds-btn-height-sm);
    padding: 0 var(--ds-space-3);
    font-size: var(--ds-text-xs);
}

.btn-delete { border-radius: var(--ds-btn-radius); }

/* ---------- 5.5 Formulários ---------- */
.input, .input-search, .select-filter, .form-control {
    height: var(--ds-input-height);
    padding: 0 var(--ds-input-px);
    border: 1px solid hsl(var(--ds-input));
    border-radius: var(--ds-input-radius);
    background: hsl(var(--ds-card));
    color: hsl(var(--ds-foreground));
    font-size: var(--ds-input-font-size);
    box-shadow: var(--ds-shadow-sm);
    transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}

textarea.input, textarea.input-search, textarea.form-control, .textarea {
    padding-top: var(--ds-space-2);
    padding-bottom: var(--ds-space-2);
}

.input::placeholder, .input-search::placeholder, .form-control::placeholder,
textarea::placeholder {
    color: hsl(var(--ds-muted-foreground));
}

.input:focus, .input-search:focus, .select-filter:focus, .form-control:focus,
.login-field input:focus {
    border-color: hsl(var(--ds-ring));
    box-shadow: var(--ds-focus-ring);
}

.input:disabled, .select-filter:disabled, .form-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-label, .form-group label {
    font-size: var(--ds-text-sm);
    font-weight: 500;
    color: hsl(var(--ds-foreground));
}

/* ---------- 5.6 Cards ---------- */
.card {
    border-radius: var(--ds-card-radius);
    padding: var(--ds-card-padding);
    box-shadow: var(--ds-card-shadow);
    border-color: hsl(var(--ds-border));
}

.stat-card {
    border-radius: var(--ds-card-radius);
    box-shadow: var(--ds-card-shadow);
}
.stat-card:hover { box-shadow: var(--ds-shadow-md); }
.stat-card.primary .stat-icon { background: hsl(var(--ds-primary) / 0.10); color: hsl(var(--ds-primary)); }
.stat-card.success .stat-icon { background: hsl(var(--ds-success) / 0.10); color: hsl(var(--ds-success)); }
.stat-card.warning .stat-icon { background: hsl(var(--ds-warning) / 0.12); color: var(--ds-amber-600); }
.stat-card.info    .stat-icon { background: hsl(var(--ds-info) / 0.10);    color: hsl(var(--ds-info)); }

/* ---------- 5.7 Badges (pares 100/800 do COMUNICA) ---------- */
.badge {
    padding: var(--ds-badge-py) var(--ds-badge-px);
    border-radius: var(--ds-badge-radius);
    font-size: var(--ds-badge-font-size);
    font-weight: var(--ds-badge-font-weight);
}

.badge-novo        { background: var(--ds-blue-100);    color: var(--ds-blue-800); }
.badge-analisado   { background: var(--ds-violet-100);  color: var(--ds-violet-800); }
.badge-aprovado    { background: var(--ds-emerald-100); color: var(--ds-emerald-800); }
.badge-entrevista  { background: var(--ds-amber-100);   color: var(--ds-amber-800); }
.badge-rejeitado   { background: var(--ds-red-100);     color: var(--ds-red-800); }
.badge-forte       { background: var(--ds-emerald-100); color: var(--ds-emerald-800); }
.badge-moderada    { background: var(--ds-amber-100);   color: var(--ds-amber-800); }
.badge-fraca       { background: var(--ds-red-100);     color: var(--ds-red-800); }
.badge-ativo       { background: var(--ds-emerald-100); color: var(--ds-emerald-800); }
.badge-experiencia { background: var(--ds-blue-100);    color: var(--ds-blue-800); }
.badge-ferias      { background: var(--ds-amber-100);   color: var(--ds-amber-800); }
.badge-afastado    { background: var(--ds-red-100);     color: var(--ds-red-800); }
.badge-licenca     { background: var(--ds-violet-100);  color: var(--ds-violet-800); }
.badge-desligado   { background: hsl(var(--ds-secondary)); color: hsl(var(--ds-muted-foreground)); }

/* Chips de filtro ativos = accent (azul 100/800) */
.filter-chip {
    background: hsl(var(--ds-accent));
    color: hsl(var(--ds-accent-foreground));
}

/* ---------- 5.8 Tabelas ---------- */
.table-container { border-radius: var(--ds-card-radius); }
.table thead th {
    background: hsl(var(--ds-muted));
    color: hsl(var(--ds-muted-foreground));
}
.table tbody tr:hover { background: hsl(var(--ds-secondary)); }

/* ---------- 5.9 Modais ---------- */
.modal-overlay.active { background: var(--ds-modal-overlay); }
.modal-content {
    background: hsl(var(--ds-card));
    color: hsl(var(--ds-card-foreground));
    border: 1px solid hsl(var(--ds-border));
    border-radius: var(--ds-modal-radius);
    padding: var(--ds-modal-padding);
    box-shadow: var(--ds-modal-shadow);
}

/* ---------- 5.10 Toasts (verde/vermelho/âmbar/azul 600) ---------- */
.toast {
    border-radius: var(--ds-toast-radius);
    box-shadow: var(--ds-toast-shadow);
    font-weight: 500;
}
.toast-success { background: var(--ds-emerald-600); }
.toast-error   { background: var(--ds-red-600); }
.toast-warning { background: var(--ds-amber-600); }
.toast-info    { background: var(--ds-blue-600); }

/* ---------- 5.11 Login (painel navy do COMUNICA) ---------- */
.login-screen {
    background:
        radial-gradient(circle at 18% 12%, hsl(199 89% 48% / 0.16), transparent 30%),
        linear-gradient(145deg, #071b3a 0%, #0b2d62 58%, #123f83 100%);
}

.login-container {
    background: hsl(var(--ds-card));
    border-radius: var(--ds-radius-2xl);
    box-shadow: var(--ds-shadow-xl);
}

.login-field input {
    border-radius: var(--ds-input-radius);
    background: hsl(var(--ds-card));
    color: hsl(var(--ds-foreground));
}

.login-btn {
    height: 44px;
    padding: 0 var(--ds-space-4);
    border-radius: var(--ds-radius-md);
    background: hsl(var(--ds-primary));
    color: hsl(var(--ds-primary-foreground));
    font-size: 15px;
    font-weight: 600;
    box-shadow: var(--ds-shadow-sm);
}
.login-btn:hover { background: hsl(var(--ds-primary) / 0.9); }

/* ---------- 5.12 Notificações e detalhes que carregavam ciano ---------- */
.notif-item.nao-lida { background: hsl(var(--ds-primary) / 0.06); }
#notif-dropdown { border-radius: var(--ds-radius-xl); box-shadow: var(--ds-shadow-lg); }

.vaga-avaliacao-card.mod-disc { color: var(--ds-blue-600); }

.perfil-ideal-card::before {
    background: linear-gradient(180deg, var(--ds-blue-600) 0%, var(--ds-blue-950) 100%);
}

/* ---------- 5.13 Estados de carga ---------- */
.skeleton {
    background: linear-gradient(90deg, hsl(var(--ds-secondary)) 25%, hsl(var(--ds-muted) / 0.6) 50%, hsl(var(--ds-secondary)) 75%);
    background-size: 200% 100%;
    border-radius: var(--ds-radius-lg);
}

.spinner-dark { border-color: hsl(var(--ds-primary) / 0.15); border-top-color: hsl(var(--ds-primary)); }

/* ============================================================
   §6 UTILITÁRIOS
   ============================================================ */

/* Foco visível consistente (padrão COMUNICA: anel + offset) */
.btn:focus-visible,
.login-btn:focus-visible,
.logout-btn:focus-visible,
a:focus-visible {
    outline: 2px solid hsl(var(--ds-ring));
    outline-offset: 2px;
}

/* Barras de rolagem discretas nas áreas claras */
.content ::-webkit-scrollbar { width: 8px; height: 8px; }
.content ::-webkit-scrollbar-thumb { background: hsl(var(--ds-border)); border-radius: var(--ds-radius-full); }
.content ::-webkit-scrollbar-thumb:hover { background: var(--ds-slate-300); }

/* Movimento reduzido: respeitar preferência do usuário */
@media (prefers-reduced-motion: reduce) {
    .stat-card, .dash-vaga-card, .perfil-ideal-card, .vaga-avaliacao-card { transition: none; }
    .stat-card:hover, .dash-vaga-card:hover, .perfil-ideal-card:hover, .vaga-avaliacao-card:hover { transform: none; }
}

/* ============================================================
   §7 REP-P — tela do Registro Eletrônico de Ponto dentro do People
   ============================================================ */

.ponto-abas {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid hsl(var(--ds-border));
    margin-bottom: 24px;
}

.ponto-aba {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 18px;
    font-size: var(--ds-text-base);
    font-weight: 600;
    font-family: inherit;
    color: hsl(var(--ds-muted-foreground));
    cursor: pointer;
    transition: color var(--ds-transition-fast), border-color var(--ds-transition-fast);
    margin-bottom: -1px;
}

.ponto-aba:hover { color: hsl(var(--ds-foreground)); }

.ponto-aba.ativa {
    color: hsl(var(--ds-primary));
    border-bottom-color: hsl(var(--ds-primary));
}

.alerta-rep {
    padding: 12px 16px;
    border-radius: var(--ds-radius-lg);
    font-size: var(--ds-text-base);
    line-height: 1.5;
    margin-bottom: 20px;
}

.alerta-rep-info  { background: hsl(var(--ds-accent)); color: hsl(var(--ds-accent-foreground)); }
.alerta-rep-ok    { background: var(--ds-emerald-100); color: var(--ds-emerald-800); }
.alerta-rep-aviso { background: var(--ds-amber-100);   color: var(--ds-amber-800); }
.alerta-rep-erro  { background: var(--ds-red-100);     color: var(--ds-red-800); }

.nota-rep {
    font-size: var(--ds-text-sm);
    color: hsl(var(--ds-muted-foreground));
    line-height: 1.5;
}

.rep-solicitacao {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid hsl(var(--ds-border));
}

.rep-solicitacao:last-child { border-bottom: none; }

.rep-horario {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
}