/* ============================================================
   MULTI QUALIFICA - BASELINE VISUAL v2 (2026-07-21)
   Aplicado nos 3 sistemas satelites: treinamentos, exames-cargo,
   solicitacoes. Design tokens iguais ao sistema principal (gestao).
   Cores neutras + verde primario. Cards com borda preta 2px de
   identidade. Fonte Inter. Tap targets 44px+ obrigatorios em
   mobile. Zero scroll horizontal.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* P0-10 / P1-12: acessibilidade - sr-only + skip link */
.visually-hidden, .sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
}
.skip-link {
    position: absolute; left: -9999px; top: -9999px;
    background: #0B6E48; color: #fff;
    padding: 10px 16px; text-decoration: none;
    z-index: 99999; border-radius: 0 0 6px 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; top: 0; }

/* ---------- TOKENS ---------- */
:root {
    --brand-primary: #0B6E48; /* P0-6: escurecido de #0F8A5A pra WCAG AA 5.2:1 */
    --brand-primary-dark: #0a6b45;
    --brand-primary-darker: #064D32;
    --brand-primary-light: #4FBF8F;
    --brand-primary-lighter: #d1fae5;
    --brand-primary-bg: #f0fdf4;

    --black: #000000;
    --dark: #111827;
    --gray-900: #1f2937;
    --gray-800: #374151;
    --gray-700: #4b5563;
    --gray-600: #6b7280;
    --gray-500: #9ca3af;
    --gray-400: #d1d5db;
    --gray-300: #e5e7eb;
    --gray-200: #f3f4f6;
    --gray-100: #f9fafb;
    --gray-50:  #fafbfc;
    --white:    #ffffff;

    --success: #10b981;
    --success-light: #d1fae5;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --info: #06b6d4;
    --info-light: #cffafe;

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

    --radius-sm: 6px;
    --radius:    8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --transition-fast: 150ms ease;
    --transition:      200ms ease;
    --transition-slow: 300ms ease;

    --topbar-h: 64px;
    --topbar-h-mobile: 56px;

    /* fluid font sizes */
    --f-xs:  clamp(11px, .70vw + 8px,  12px);
    --f-sm:  clamp(12px, .80vw + 9px,  14px);
    --f-md:  clamp(14px, .90vw + 10px, 15px);
    --f-lg:  clamp(15px, 1.0vw + 11px, 17px);
    --f-xl:  clamp(17px, 1.2vw + 12px, 20px);
    --f-2xl: clamp(20px, 1.6vw + 14px, 26px);
    --f-3xl: clamp(22px, 2.0vw + 15px, 32px);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--f-md);
    line-height: 1.55;
    color: var(--gray-800);
    background: var(--gray-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(15,138,90,.15);
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}
img, video, svg, iframe { max-width: 100%; height: auto; }
video, iframe { display: block; }
button, input, select, textarea { font-family: inherit; }

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }

/* ============================================================
   TOPBAR - PADRAO UNIFORME PROS 3 SISTEMAS
   ============================================================ */
.trein-topbar, .exam-topbar, .sol-topbar {
    background: linear-gradient(135deg, var(--brand-primary-darker) 0%, var(--brand-primary) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    min-height: var(--topbar-h);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    position: sticky;
    top: 0;
    z-index: 100;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}
.trein-brand, .exam-brand, .sol-brand {
    color: #fff !important;
    text-decoration: none;
    display: inline-flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    line-height: 1.1;
    flex-shrink: 0;
}
.trein-logo, .exam-logo, .sol-logo {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -.01em;
}
.trein-logo b, .exam-logo b, .sol-logo b { font-weight: 800; }
.trein-brand small, .exam-brand small, .sol-brand small {
    font-size: 10px;
    opacity: .85;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
}

/* menu */
.trein-menu, .exam-menu, .sol-menu {
    display: flex;
    gap: 2px;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
}
.trein-menu a, .exam-menu a, .sol-menu a {
    color: #fff;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    transition: background var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    white-space: nowrap;
}
.trein-menu a:hover, .exam-menu a:hover, .sol-menu a:hover { background: rgba(255,255,255,.15); }
.trein-menu a.active, .exam-menu a.active, .sol-menu a.active { background: rgba(255,255,255,.25); }
.sol-menu a.sol-menu-primary { background: rgba(255,255,255,.15); font-weight: 700; }
.sol-menu a.sol-menu-primary:hover { background: rgba(255,255,255,.28); }

.trein-user, .exam-user, .sol-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    flex-shrink: 0;
}
.trein-user span, .exam-user span, .sol-user span {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trein-logout, .exam-logout, .sol-logout {
    color: #fff;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: var(--radius);
    opacity: .85;
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.trein-logout:hover, .exam-logout:hover, .sol-logout:hover { opacity: 1; background: rgba(255,255,255,.15); }

/* Hamburger universal (ativo em mobile) */
.mq-hamburger, .exam-menu-toggle {
    display: none;
    background: rgba(255,255,255,.15);
    border: 0;
    color: #fff;
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    font-size: 18px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    margin-left: auto;
}
.mq-hamburger:hover, .exam-menu-toggle:hover { background: rgba(255,255,255,.25); }

/* ---------- Backdrop mobile ---------- */
.mq-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 90;
    opacity: 0;
    transition: opacity var(--transition);
}
.mq-backdrop.open { display: block; opacity: 1; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.trein-main, .exam-main, .sol-main {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    overflow-x: hidden;
    min-width: 0;
}

/* ============================================================
   CARDS
   ============================================================ */
.trein-card, .exam-card, .sol-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    border: 1px solid var(--gray-200);
    max-width: 100%;
    overflow: hidden;
}
/* Tabelas dentro do main viram scroll-container proprio (sem depender de wrapper) */
.trein-main table, .exam-main table, .sol-main table {
    max-width: 100%;
}
.trein-card table, .exam-card table, .sol-card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
.trein-card table td, .trein-card table th,
.exam-card table td, .exam-card table th,
.sol-card table td, .sol-card table th {
    white-space: normal; /* mas cada celula quebra normalmente */
}
/* Se ja tem .*-table-wrap, nao precisa converter tabela em bloco */
.trein-table-wrap table, .exam-table-wrap table, .sol-table-wrap table {
    display: table !important;
    white-space: normal !important;
}
.trein-card h3, .exam-card h3, .sol-card h3 {
    margin: 0 0 16px;
    font-size: var(--f-lg);
    font-weight: 700;
    color: var(--dark);
}

/* Page header */
.trein-page-header, .exam-page-header, .sol-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.trein-page-header h1, .exam-page-header h1, .sol-page-header h1 {
    margin: 0;
    font-size: var(--f-2xl);
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -.02em;
    line-height: 1.2;
}
.trein-page-header .sub, .exam-page-header .sub, .sol-page-header .sub {
    color: var(--gray-600);
    font-size: var(--f-sm);
    margin-top: 4px;
}
.sol-page-header .actions, .trein-page-header .actions, .exam-page-header .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================
   BUTTONS (44px minimo em mobile)
   ============================================================ */
.trein-btn, .exam-btn, .sol-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), transform .08s, box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
    white-space: nowrap;
    color: var(--gray-800);
    background: var(--gray-200);
}
.trein-btn:hover, .exam-btn:hover, .sol-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.trein-btn:active, .exam-btn:active, .sol-btn:active { transform: translateY(0); }

.trein-btn-primary, .exam-btn, .sol-btn-primary {
    background: var(--brand-primary);
    color: #fff !important;
}
.trein-btn-primary:hover, .exam-btn:hover, .sol-btn-primary:hover {
    background: var(--brand-primary-dark);
    color: #fff !important;
}
.trein-btn-secondary, .exam-btn-secondary, .sol-btn-secondary {
    background: var(--gray-200);
    color: var(--gray-800) !important;
}
.trein-btn-secondary:hover, .exam-btn-secondary:hover, .sol-btn-secondary:hover { background: var(--gray-300); }
.trein-btn-danger, .exam-btn-danger, .sol-btn-danger { background: var(--danger); color: #fff !important; }
.trein-btn-danger:hover, .exam-btn-danger:hover, .sol-btn-danger:hover { background: #b91c1c; }
.sol-btn-warn { background: var(--warning); color: #fff !important; }
.sol-btn-warn:hover { background: #b45309; }
.exam-btn-outline { background: #fff; color: var(--brand-primary) !important; border: 1px solid var(--brand-primary); }
.exam-btn-outline:hover { background: var(--brand-primary); color: #fff !important; }
.sol-btn-outline { background: transparent; color: var(--brand-primary) !important; border: 1px solid var(--brand-primary); }
.sol-btn-outline:hover { background: var(--brand-primary-bg); }

.trein-btn-block, .exam-btn-block, .sol-btn-block { width: 100%; padding: 12px 18px; font-size: 15px; }
.trein-btn-sm, .exam-btn-sm, .sol-btn-sm { padding: 10px 12px; min-height: 44px; font-size: 12px; }

/* Bootstrap fallback buttons: min-height */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; -webkit-appearance: none; appearance: none; }
.btn.btn-sm { min-height: 34px; }
.btn.btn-lg { min-height: 52px; }

/* ============================================================
   FORMS - 44px tap target
   ============================================================ */
.trein-form-group, .exam-form-group, .sol-form-group { margin-bottom: 16px; }
.trein-form-group label, .exam-form-group label, .sol-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--gray-700);
}
.trein-form-group input, .trein-form-group select, .trein-form-group textarea,
.exam-form-group input, .exam-form-group select, .exam-form-group textarea,
.sol-form-group input, .sol-form-group select, .sol-form-group textarea,
.form-control, .form-select {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: 15px;
    line-height: 1.3;
    background: #fff;
    color: var(--gray-800);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea.form-control, .trein-form-group textarea, .exam-form-group textarea, .sol-form-group textarea {
    min-height: 100px;
    resize: vertical;
}
select.form-control, .trein-form-group select, .exam-form-group select, .sol-form-group select,
.form-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}
.trein-form-group input:focus, .trein-form-group select:focus, .trein-form-group textarea:focus,
.exam-form-group input:focus, .exam-form-group select:focus, .exam-form-group textarea:focus,
.sol-form-group input:focus, .sol-form-group select:focus, .sol-form-group textarea:focus,
.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(15,138,90,.15);
}
input[type=checkbox], input[type=radio] { min-height: 0; width: 18px; height: 18px; }

/* ============================================================
   TABELAS
   ============================================================ */
.trein-table, .exam-table, .sol-table, .table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 14px;
}
.trein-table th, .trein-table td,
.exam-table th, .exam-table td,
.sol-table th, .sol-table td,
.table th, .table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
}
.trein-table th, .exam-table th, .sol-table th, .table thead th {
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    border-bottom: 2px solid var(--gray-300);
}
.trein-table tr:hover, .exam-table tr:hover td, .sol-table tr:hover, .table tbody tr:hover {
    background: var(--gray-50);
}
.trein-table, .exam-table, .sol-table { min-width: 100%; }

.trein-table-wrap, .exam-table-wrap, .sol-table-wrap {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.trein-table-wrap .trein-table, .exam-table-wrap .exam-table, .sol-table-wrap .sol-table { box-shadow: none; }

/* trein-table nao tinha wrap; garantir overflow */
.trein-main .trein-table { display: table; }

/* ============================================================
   TABELA -> CARDS EM MOBILE (opt-in via classe)
   ============================================================ */
@media (max-width: 640px) {
    .table-responsive-cards thead,
    .sol-table-mobile-cards thead,
    .trein-table-mobile thead,
    .exam-table-mobile thead {
        display: none;
    }
    .table-responsive-cards tbody tr,
    .sol-table-mobile-cards tbody tr,
    .trein-table-mobile tbody tr,
    .exam-table-mobile tbody tr {
        display: block;
        background: #fff;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--gray-200);
        margin-bottom: 10px;
        padding: 10px 12px;
    }
    .table-responsive-cards tbody td,
    .sol-table-mobile-cards tbody td,
    .trein-table-mobile tbody td,
    .exam-table-mobile tbody td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
        border: 0;
        border-bottom: 1px dashed var(--gray-200);
        font-size: 13px;
        text-align: right;
    }
    .table-responsive-cards tbody td:last-child,
    .sol-table-mobile-cards tbody td:last-child,
    .trein-table-mobile tbody td:last-child,
    .exam-table-mobile tbody td:last-child { border-bottom: 0; }
    .table-responsive-cards tbody td::before,
    .sol-table-mobile-cards tbody td::before,
    .trein-table-mobile tbody td::before,
    .exam-table-mobile tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--gray-600);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        text-align: left;
        flex-shrink: 0;
    }
}

/* ============================================================
   GRIDS
   ============================================================ */
.trein-grid, .exam-grid, .sol-grid { display: grid; gap: 16px; }
.trein-grid.cols-2, .exam-grid.cols-2, .sol-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.trein-grid.cols-3, .exam-grid.cols-3, .sol-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.trein-grid.cols-4, .exam-grid.cols-4, .sol-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ============================================================
   KPIs / STAT CARDS
   ============================================================ */
.trein-kpi, .exam-kpi, .sol-kpi {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    position: relative;
    overflow: hidden;
    min-height: 100px;
}
.trein-kpi .label, .exam-kpi .label, .sol-kpi .label {
    font-size: 11px;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    margin-bottom: 6px;
}
.trein-kpi .value, .exam-kpi .value, .sol-kpi .value {
    font-size: 28px;
    font-weight: 800;
    color: var(--brand-primary);
    line-height: 1.1;
    word-break: break-word;
}
.trein-kpi .icon, .exam-kpi .icon, .sol-kpi .icon {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 22px;
    opacity: .18;
    color: var(--brand-primary);
}
.sol-kpi.danger .value, .sol-kpi.danger .icon { color: var(--danger); }
.sol-kpi.warn   .value, .sol-kpi.warn   .icon { color: var(--warning); }

/* ============================================================
   BADGES
   ============================================================ */
.trein-badge, .exam-badge, .sol-badge, .badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.trein-badge-success, .exam-badge-success, .sol-badge-success, .badge.bg-success { background: var(--success-light) !important; color: #065f46 !important; }
.trein-badge-warn,    .exam-badge-warn,    .sol-badge-warn,    .badge.bg-warning { background: var(--warning-light) !important; color: #92400e !important; }
.trein-badge-danger,  .exam-badge-danger,  .sol-badge-danger,  .badge.bg-danger  { background: var(--danger-light)  !important; color: #991b1b !important; }
.trein-badge-info,    .exam-badge-info,    .sol-badge-info,    .badge.bg-info    { background: var(--info-light)    !important; color: #155e75 !important; }
.trein-badge-muted,   .exam-badge-muted,   .sol-badge-muted,   .badge.bg-secondary { background: var(--gray-200) !important; color: var(--gray-700) !important; }
.exam-badge-primary,  .badge.bg-primary { background: var(--brand-primary-bg) !important; color: var(--brand-primary-darker) !important; }

/* ============================================================
   FILTER BAR / EMPTY STATE
   ============================================================ */
.exam-filters, .sol-filter-bar {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    background: #fff;
    padding: 16px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    border: 1px solid var(--gray-200);
}
.exam-filters .exam-form-group, .sol-filter-bar .sol-form-group { margin-bottom: 0; min-width: 160px; flex: 1; }

.trein-empty, .exam-empty, .sol-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-500);
}
.trein-empty i, .exam-empty i, .sol-empty i {
    display: block;
    font-size: 48px;
    margin-bottom: 12px;
    opacity: .35;
}

/* ============================================================
   LOGIN PAGE - split responsivo
   ============================================================ */
.trein-login-page, .exam-login-page, .sol-login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: linear-gradient(135deg, var(--brand-primary-darker) 0%, var(--brand-primary) 100%);
}
.trein-login-side, .exam-login-side, .sol-login-side {
    color: #fff;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}
.trein-login-side h1, .exam-login-side h1, .sol-login-side h1 {
    font-size: clamp(24px, 3vw + 12px, 40px);
    font-weight: 800;
    margin: 0;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.trein-login-side p, .exam-login-side p, .sol-login-side p {
    font-size: clamp(14px, 1vw + 10px, 17px);
    opacity: .92;
    margin: 0;
    line-height: 1.5;
}
.trein-login-card-wrap, .exam-login-card-wrap, .sol-login-card-wrap {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
}
.trein-login-card, .exam-login-card, .sol-login-card { width: 100%; max-width: 400px; }
.trein-login-card h2, .exam-login-card h2, .sol-login-card h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--dark);
    letter-spacing: -.01em;
}
.trein-login-card .sub, .exam-login-card .sub, .sol-login-card .sub {
    color: var(--gray-600);
    margin-bottom: 20px;
    font-size: 14px;
}

/* Perfil tabs (trein) */
.trein-perfil-tabs {
    display: flex;
    gap: 4px;
    background: var(--gray-200);
    border-radius: var(--radius-md);
    padding: 4px;
    margin-bottom: 18px;
}
.trein-perfil-tabs a {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--gray-600);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 13px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.trein-perfil-tabs a.active { background: var(--brand-primary); color: #fff; }

/* ============================================================
   RESPONSIVE (tablet e mobile)
   ============================================================ */
@media (max-width: 1023.98px) {
    .trein-main, .exam-main, .sol-main { padding: 16px; }
}

@media (max-width: 900px) {
    /* Topbar: mostrar hamburger, esconder menu */
    .trein-topbar, .exam-topbar, .sol-topbar {
        min-height: var(--topbar-h-mobile);
        padding: 8px 12px;
        gap: 8px;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    .mq-hamburger, .exam-menu-toggle { display: inline-flex; }
    .trein-user, .exam-user, .sol-user { order: 2; margin-left: 0; }
    .trein-user span, .exam-user span, .sol-user span {
        display: none;
    }

    .trein-menu, .exam-menu, .sol-menu {
        position: fixed;
        top: var(--topbar-h-mobile);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--brand-primary-darker);
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 16px 16px calc(env(safe-area-inset-bottom) + 32px);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--transition-slow);
        z-index: 95;
        max-height: none;
    }
    .trein-menu.open, .exam-menu.open, .sol-menu.open { transform: translateX(0); }
    .trein-menu a, .exam-menu a, .sol-menu a {
        width: 100%;
        padding: 14px 16px;
        border-radius: var(--radius);
        font-size: 15px;
        min-height: 48px;
        justify-content: flex-start;
        gap: 12px;
    }
    .trein-menu a i, .exam-menu a i, .sol-menu a i { width: 20px; text-align: center; }

    /* login split -> single column */
    .trein-login-page, .exam-login-page, .sol-login-page { grid-template-columns: 1fr; }
    .trein-login-side, .exam-login-side, .sol-login-side {
        padding: 32px 20px;
        text-align: center;
        gap: 12px;
        display: flex;
    }
    .trein-login-card-wrap, .exam-login-card-wrap, .sol-login-card-wrap { padding: 24px 16px; }

    /* grids -> uma coluna se muito pequeno */
    .trein-grid.cols-2, .exam-grid.cols-2, .sol-grid.cols-2,
    .trein-grid.cols-3, .exam-grid.cols-3, .sol-grid.cols-3,
    .trein-grid.cols-4, .exam-grid.cols-4, .sol-grid.cols-4 {
        grid-template-columns: 1fr;
    }
    .exam-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .exam-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

    /* cards menor padding */
    .trein-card, .exam-card, .sol-card { padding: 14px; }
    .trein-page-header, .exam-page-header, .sol-page-header { align-items: flex-start; }
}

@media (max-width: 640px) {
    /* Kpis maiores em mobile pra facilitar leitura */
    .trein-kpi, .exam-kpi, .sol-kpi { padding: 14px; min-height: 90px; }
    .trein-kpi .value, .exam-kpi .value, .sol-kpi .value { font-size: 24px; }

    /* Botao block em mobile pra CTAs de formulario */
    .trein-btn-block, .exam-btn-block, .sol-btn-block { padding: 14px; font-size: 15px; }

    /* Filter bar em coluna */
    .exam-filters, .sol-filter-bar { flex-direction: column; align-items: stretch; }
    .exam-filters .exam-form-group, .sol-filter-bar .sol-form-group { width: 100%; min-width: 0; }
}

@media (max-width: 400px) {
    .trein-main, .exam-main, .sol-main { padding: 12px 10px; }
    .trein-brand small, .exam-brand small, .sol-brand small { display: none; }
    .trein-logo, .exam-logo, .sol-logo { font-size: 16px; }
    .trein-page-header h1, .exam-page-header h1, .sol-page-header h1 { font-size: 20px; }
}

/* ============================================================
   BOOTSTRAP OVERRIDES - alerts
   ============================================================ */
.alert {
    border: 0;
    border-left: 4px solid transparent;
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 12px;
    font-size: 14px;
}
.alert-success { background: var(--success-light); color: #065f46; border-left-color: var(--success); }
.alert-warning { background: var(--warning-light); color: #92400e; border-left-color: var(--warning); }
.alert-danger  { background: var(--danger-light);  color: #991b1b; border-left-color: var(--danger); }
.alert-info    { background: var(--info-light);    color: #155e75; border-left-color: var(--info); }

/* Modal seguranca */
.modal-content { border-radius: var(--radius-lg); border: 1px solid var(--gray-300); }

/* ============================================================
   SAFARI/WEBKIT SPECIFIC FIXES
   ============================================================ */
/* iOS: previne zoom no focus de input */
@supports (-webkit-touch-callout: none) {
    input, select, textarea { font-size: 16px !important; }
    .trein-form-group input, .exam-form-group input, .sol-form-group input,
    .trein-form-group select, .exam-form-group select, .sol-form-group select,
    .trein-form-group textarea, .exam-form-group textarea, .sol-form-group textarea {
        font-size: 16px !important;
    }
    /* iOS: 100vh safe */
    .trein-login-page, .exam-login-page, .sol-login-page { min-height: -webkit-fill-available; }
}

/* ============================================================
   UTILITY CLASSES gerais
   ============================================================ */
.mq-hide-mobile { display: initial; }
.mq-hide-desktop { display: none; }
@media (max-width: 900px) {
    .mq-hide-mobile { display: none !important; }
    .mq-hide-desktop { display: initial !important; }
}


/* ============================================================
   TREIN - overrides especificos (player, modulos, camera, assinatura)
   ============================================================ */
.trein-player { background: #000; border-radius: var(--radius-lg); overflow: hidden; }
.trein-player video { width: 100%; display: block; }
.trein-modules { background: #fff; border-radius: var(--radius-lg); padding: 16px; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); }
.trein-module-item { padding: 12px 14px; border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.trein-module-item:hover { background: var(--gray-100); }
.trein-module-item.active { background: var(--brand-primary); color: #fff; }
.trein-module-item .check { color: var(--brand-primary); }
.trein-module-item.active .check { color: #fff; }

.trein-camera { position: relative; background: #000; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.trein-camera video, .trein-camera canvas { width: 100%; display: block; }

.trein-signature { border: 2px dashed var(--gray-300); border-radius: var(--radius-lg); background: #fff; touch-action: none; width: 100%; }

.trein-embed { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--gray-100); }
.trein-embed iframe { display: block; width: 100%; border: 0; }
@media (max-width: 640px) {
    .trein-embed iframe { height: 78vh !important; min-height: 500px !important; }
    .trein-concluir-wrap {
        position: sticky; bottom: 0; left: 0; right: 0;
        background: linear-gradient(to top, rgba(255,255,255,.98) 60%, rgba(255,255,255,0));
        padding: 10px 6px calc(env(safe-area-inset-bottom, 0px) + 12px);
        margin: 8px -14px -14px;
        z-index: 20;
        border-top: 1px solid var(--gray-200);
    }
    .trein-concluir-btn { width: 100%; padding: 14px; font-size: 15px; min-height: 48px; }
}

/* ============================================================
   LOGO com fundo branco arredondado
   ============================================================ */
.trein-login-side-logo, .exam-login-side-logo, .sol-login-side-logo {
    display: block;
    max-width: 220px;
    width: 100%;
    height: auto;
    border-radius: 16px;
    background: #fff;
    padding: 10px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    margin: 0 auto 12px;
}
.trein-login-card-logo, .exam-login-card-logo, .sol-login-card-logo {
    text-align: center;
    margin-bottom: 18px;
}
.trein-login-card-logo img, .exam-login-card-logo img, .sol-login-card-logo img {
    max-width: 200px;
    width: 100%;
    height: auto;
    border-radius: 14px;
    background: #fff;
    padding: 8px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    display: inline-block;
}
.trein-brand-logo, .exam-brand-logo, .sol-brand-logo {
    background: #fff;
    border-radius: 10px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    height: 36px;
}
.trein-brand-logo img, .exam-brand-logo img, .sol-brand-logo img {
    max-height: 28px;
    width: auto;
    display: block;
}
@media (max-width: 640px) {
    .trein-login-side-logo, .exam-login-side-logo, .sol-login-side-logo {
        max-width: 170px;
        border-radius: 12px;
        padding: 8px 12px;
    }
    .trein-login-card-logo img, .exam-login-card-logo img, .sol-login-card-logo img {
        max-width: 160px;
        border-radius: 10px;
        padding: 6px 10px;
    }
}

/* ============================================================
   LOGIN SIDE v2 - centralizado com lista de features
   ============================================================ */
.trein-login-side, .exam-login-side, .sol-login-side {
    color: #fff;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    text-align: center;
    position: relative;
}
.trein-login-side h1, .exam-login-side h1, .sol-login-side h1 {
    font-size: clamp(28px, 3vw + 12px, 42px);
    font-weight: 800;
    margin: 0;
    letter-spacing: -.02em;
    line-height: 1.15;
    text-align: center;
}
.trein-login-side .side-lead, .exam-login-side .side-lead, .sol-login-side .side-lead {
    font-size: clamp(14px, 1vw + 10px, 17px);
    opacity: .92;
    margin: 0;
    line-height: 1.55;
    max-width: 460px;
}
.side-features {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    text-align: left;
}
.side-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.4;
    opacity: .96;
}
.side-features li i {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-top: 1px;
}
.side-features li strong {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 15px;
}
.side-features li span.desc {
    display: block;
    font-size: 13px;
    opacity: .78;
    font-weight: 400;
}
.side-footer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.15);
    opacity: .78;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    width: 100%;
}
.side-footer i { opacity: .85; }
@media (max-width: 900px) {
    .trein-login-side, .exam-login-side, .sol-login-side {
        padding: 36px 24px 24px;
        gap: 12px;
    }
    .side-features { max-width: 100%; margin-top: 6px; gap: 8px; }
    .side-features li { font-size: 14px; }
    .side-features li i { width: 30px; height: 30px; font-size: 13px; }
    .side-footer { margin-top: 14px; padding-top: 12px; font-size: 12px; }
}

/* ============================================================
   FIX CHECKBOX/RADIO - restaurar appearance nativo
   O reset genérico com -webkit-appearance:none quebra o checkbox.
   Aqui sobrescreve com !important pra garantir sobre qualquer form-group.
   ============================================================ */
.trein-form-group input[type=checkbox],
.trein-form-group input[type=radio],
.exam-form-group input[type=checkbox],
.exam-form-group input[type=radio],
.sol-form-group input[type=checkbox],
.sol-form-group input[type=radio],
input[type=checkbox],
input[type=radio] {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: initial !important;
    border-radius: 0 !important;
    background: initial !important;
    background-image: none !important;
    display: inline-block !important;
    vertical-align: middle;
    accent-color: var(--brand-primary);
    cursor: pointer;
    flex: 0 0 auto;
}
.trein-form-group input[type=checkbox]:focus,
.trein-form-group input[type=radio]:focus,
.exam-form-group input[type=checkbox]:focus,
.exam-form-group input[type=radio]:focus,
.sol-form-group input[type=checkbox]:focus,
.sol-form-group input[type=radio]:focus,
input[type=checkbox]:focus,
input[type=radio]:focus {
    outline: 2px solid var(--brand-primary) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* ============================================================
   TREINAMENTOS - Layout com Sidebar (esconde topbar antigo)
   ============================================================ */
body.trein-has-sidebar .trein-topbar { display: none !important; }

.trein-app-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    background: #f4f7f5;
}

.trein-sidebar {
    background: linear-gradient(180deg, #064D32 0%, #0B6E48 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    box-shadow: 2px 0 12px rgba(6, 77, 50, .12);
    z-index: 60;
}
.trein-sidebar-brand {
    padding: 20px 20px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.trein-brand-link {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    height: 44px;
    flex: 1;
    justify-content: center;
}
.trein-brand-link img { max-height: 32px; width: auto; display: block; }
.trein-sidebar-close {
    display: none;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 22px;
    padding: 4px 8px;
    cursor: pointer;
    line-height: 1;
    opacity: .85;
}
.trein-sidebar-close:hover { opacity: 1; }

.trein-sidebar-user {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.10);
}
.trein-user-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.35);
}
.trein-user-meta { display: flex; flex-direction: column; min-width: 0; }
.trein-user-name {
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.2;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.trein-user-role {
    font-size: 11px;
    color: #d5e8dd;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.4;
    margin-top: 1px;
}

.trein-sidebar-menu {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
}
.trein-sidebar-menu::-webkit-scrollbar { width: 6px; }
.trein-sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }
.trein-menu-section {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255,255,255,.55);
    padding: 12px 12px 6px;
    font-weight: 700;
}
.trein-menu-section:first-child { padding-top: 4px; }
.trein-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: rgba(255,255,255,.86);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    transition: background .15s, color .15s, transform .1s;
    min-height: 40px;
}
.trein-menu-item i {
    width: 20px;
    text-align: center;
    font-size: 15px;
    opacity: .95;
    flex-shrink: 0;
}
.trein-menu-item:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
}
.trein-menu-item.active {
    background: #fff;
    color: #064D32;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.trein-menu-item.active i { color: #0B6E48; opacity: 1; }

.trein-sidebar-bottom {
    padding: 12px 12px 18px;
    border-top: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.08);
}
.trein-logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffd0d0;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.15);
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.trein-logout-btn:hover {
    background: rgba(220, 38, 38, .85);
    color: #fff;
    border-color: rgba(220, 38, 38, .85);
}

/* Content area */
.trein-content-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.trein-topbar-slim {
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.trein-menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: var(--brand-primary-darker);
    font-size: 20px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 8px;
    line-height: 1;
}
.trein-menu-toggle:hover { background: var(--gray-100); }
.trein-topbar-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--gray-800);
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.trein-topbar-actions { display: flex; align-items: center; gap: 8px; }
.trein-topbar-logout {
    color: var(--gray-600);
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    transition: background .15s, color .15s;
}
.trein-topbar-logout:hover { background: rgba(220,38,38,.10); color: #dc2626; }

body.trein-has-sidebar .trein-main {
    padding: 24px 28px;
    max-width: 100%;
    width: 100%;
    margin: 0;
    align-self: stretch;
    flex: 1 1 auto;
}

.trein-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 77, 50, .55);
    backdrop-filter: blur(2px);
    z-index: 55;
}

/* Mobile / Tablet: sidebar vira drawer */
@media (max-width: 900px) {
    .trein-app-layout {
        grid-template-columns: 1fr;
    }
    .trein-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        max-width: 88vw;
        height: 100vh;
        max-height: 100vh;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        z-index: 100;
    }
    .trein-sidebar.open { transform: translateX(0); }
    .trein-sidebar-close { display: inline-flex; }
    .trein-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .trein-backdrop.open { display: block; z-index: 90; }
    body.trein-sidebar-open { overflow: hidden; }
    body.trein-has-sidebar .trein-main {
        padding: 16px 14px;
    }
    .trein-topbar-slim { padding: 10px 14px; }
}

/* ============================================================
   TREINAMENTOS - Sidebar v2 (fixed, sem quebrar ao rolar)
   Esta última pilha OVERRIDES as regras anteriores da sidebar.
   ============================================================ */
body.trein-has-sidebar .trein-topbar { display: none !important; }
body.trein-has-sidebar { padding-left: 260px; }
body.trein-has-sidebar .mq-app-footer { margin-left: 0; }

.trein-app-layout {
    display: block;
    min-height: 100vh;
    background: #f4f7f5;
}

/* SIDEBAR - fixed, ocupa altura toda, tem scroll interno */
.trein-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background: linear-gradient(180deg, #064D32 0%, #0B6E48 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 16px rgba(6, 77, 50, .16);
    z-index: 60;
    overflow: hidden;
}

/* Cabeçalho da sidebar: logo 60x60 arredondada + texto ao lado */
.trein-sidebar-brand {
    padding: 18px 18px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    flex-shrink: 0;
}
.trein-brand-badge {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px;
    background: #fff;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.20);
    padding: 8px;
    flex-shrink: 0;
    overflow: hidden;
}
.trein-brand-badge img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}
.trein-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}
.trein-brand-name {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
}
.trein-brand-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255,255,255,.72);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-top: 2px;
}
.trein-sidebar-close {
    display: none;
    background: rgba(255,255,255,.08);
    border: 0;
    color: #fff;
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

/* Usuário */
.trein-sidebar-user {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.14);
    flex-shrink: 0;
}
.trein-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.32);
}
.trein-user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.trein-user-name {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.trein-user-role {
    font-size: 10.5px;
    color: rgba(255,255,255,.68);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 2px;
}

/* Menu scrollável */
.trein-sidebar-menu {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.20) transparent;
}
.trein-sidebar-menu::-webkit-scrollbar { width: 5px; }
.trein-sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }
.trein-sidebar-menu::-webkit-scrollbar-track { background: transparent; }

.trein-menu-section {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.50);
    padding: 14px 12px 6px;
    font-weight: 700;
    line-height: 1;
}
.trein-menu-section:first-child { padding-top: 6px; }

.trein-menu-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 12px !important;
    border-radius: 8px;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    transition: background .15s, color .15s;
    min-height: 40px;
    background: transparent;
}
.trein-menu-item i {
    width: 20px;
    text-align: center;
    font-size: 14px;
    opacity: .95;
    flex-shrink: 0;
}
.trein-menu-item:hover {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
}
.trein-menu-item.active {
    background: #fff !important;
    color: #064D32 !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.trein-menu-item.active i { color: #0B6E48; opacity: 1; }

/* Rodapé fixo com botão sair */
.trein-sidebar-bottom {
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.15);
    flex-shrink: 0;
}
.trein-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffd0d0;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s, border-color .15s;
}
.trein-logout-btn:hover {
    background: rgba(220,38,38,.85);
    color: #fff;
    border-color: rgba(220,38,38,.85);
}
.trein-logout-btn i { font-size: 13px; }

/* Content area (fica à direita da sidebar via padding-left no body) */
.trein-content-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f4f7f5;
}
.trein-topbar-slim {
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    min-height: 56px;
}
.trein-menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: var(--brand-primary-darker);
    font-size: 20px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 8px;
    line-height: 1;
    align-items: center;
    justify-content: center;
}
.trein-menu-toggle:hover { background: var(--gray-100); }
.trein-topbar-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--gray-800);
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

body.trein-has-sidebar .trein-main {
    padding: 24px 28px;
    max-width: 100%;
    width: 100%;
    margin: 0;
    align-self: stretch;
    flex: 1 1 auto;
}
body.trein-has-sidebar .mq-app-footer {
    padding-left: 24px;
    padding-right: 24px;
}

/* Backdrop mobile */
.trein-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 77, 50, .55);
    backdrop-filter: blur(2px);
    z-index: 55;
}

/* Mobile: sidebar vira drawer */
@media (max-width: 900px) {
    body.trein-has-sidebar { padding-left: 0; }
    .trein-sidebar {
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        z-index: 100;
        width: 280px;
        max-width: 88vw;
    }
    .trein-sidebar.open { transform: translateX(0); }
    .trein-sidebar-close { display: inline-flex; }
    .trein-menu-toggle { display: inline-flex; }
    .trein-backdrop.open { display: block; z-index: 90; }
    body.trein-sidebar-open { overflow: hidden; }
    body.trein-has-sidebar .trein-main {
        padding: 16px 14px;
    }
    .trein-topbar-slim { padding: 10px 14px; }
    body.trein-has-sidebar .mq-app-footer { padding-left: 14px; padding-right: 14px; }
}

/* Sidebar sem logo: texto ocupa a linha inteira */
.trein-sidebar-brand a.trein-brand-text {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 2px 0;
}
.trein-sidebar-brand a.trein-brand-text:hover .trein-brand-name { color: rgba(255,255,255,.92); }
.trein-brand-name { font-size: 17px; }


/* ============ Dashboard admin v3 ============ */
.dash-actions-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.dash-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e2e6e3;
    border-radius: 999px;
    color: #34413c;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s ease;
    white-space: nowrap;
}
.dash-chip:hover {
    background: #f4f7f5;
    border-color: #064D32;
    color: #064D32;
    transform: translateY(-1px);
}
.dash-chip i { font-size: 12px; }
.dash-chip-primary {
    background: #064D32;
    color: #fff;
    border-color: #064D32;
}
.dash-chip-primary:hover {
    background: #053e28;
    color: #fff;
    border-color: #053e28;
}

.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.dash-kpi {
    background: #fff;
    border: 1px solid #eef1ef;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: box-shadow .15s ease;
}
.dash-kpi:hover { box-shadow: 0 4px 12px rgba(6,77,50,0.06); }
.dash-kpi-head {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6a7570;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dash-kpi-head i { color: #064D32; opacity: .7; font-size: 13px; }
.dash-kpi-value {
    font-size: 30px;
    font-weight: 800;
    color: #182a22;
    line-height: 1.1;
    margin-top: 2px;
}
.dash-kpi-trend {
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.dash-kpi-trend.up { color: #067a3f; }
.dash-kpi-trend.down { color: #c0392b; }
.dash-kpi-trend.flat { color: #8a938e; }

.dash-section { margin-bottom: 24px; }
.dash-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #34413c;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-section-title i { color: #064D32; font-size: 14px; }

.dash-alerts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.dash-alert {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #eef1ef;
    border-left: 4px solid #6a7570;
    border-radius: 10px;
    color: #182a22;
    text-decoration: none;
    transition: all .15s ease;
}
.dash-alert:hover { transform: translateX(2px); box-shadow: 0 4px 10px rgba(0,0,0,.05); }
.dash-alert-num {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: #182a22;
    min-width: 40px;
    text-align: center;
}
.dash-alert-lbl {
    font-size: 13px;
    color: #34413c;
    line-height: 1.35;
}
.dash-alert-cta {
    font-size: 12px;
    font-weight: 600;
    color: #064D32;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.dash-alert-warn { border-left-color: #f5a623; }
.dash-alert-warn .dash-alert-num { color: #b87400; }
.dash-alert-info { border-left-color: #0f8ac8; }
.dash-alert-info .dash-alert-num { color: #0b6c9c; }
.dash-alert-danger { border-left-color: #c0392b; }
.dash-alert-danger .dash-alert-num { color: #a02c20; }
.dash-alert-muted { border-left-color: #8a938e; }
.dash-alert-muted .dash-alert-num { color: #4d5a54; }

.dash-nothing {
    padding: 14px 18px;
    background: #f4faf6;
    border: 1px solid #d9ecdd;
    color: #067a3f;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-nothing i { font-size: 16px; }

.dash-chart-card { padding: 16px 18px; }
.dash-chart-legend { font-size: 12px; color: #6a7570; margin-bottom: 10px; }
.dash-chart-legend .dash-chart-total {
    font-size: 20px;
    font-weight: 800;
    color: #182a22;
    margin-right: 4px;
}
.dash-sparkbars {
    width: 100%;
    height: 140px;
    display: block;
    margin-bottom: 6px;
}
.dash-sparkbars-axis {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #8a938e;
    padding: 0 2px;
}

.dash-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.dash-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-card-title i { color: #064D32; }

.dash-rank { list-style: none; padding: 0; margin: 0; }
.dash-rank li { padding: 8px 0; border-bottom: 1px solid #f2f5f3; }
.dash-rank li:last-child { border-bottom: 0; }
.dash-rank-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
.dash-rank-name {
    font-size: 13px;
    color: #182a22;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-rank-qtd {
    font-size: 13px;
    font-weight: 700;
    color: #064D32;
    white-space: nowrap;
}
.dash-rank-bar {
    height: 5px;
    background: #eef1ef;
    border-radius: 3px;
    overflow: hidden;
}
.dash-rank-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #064D32, #0a7048);
    border-radius: 3px;
    transition: width .3s ease;
}

.dash-nothing-inline {
    padding: 20px 0;
    text-align: center;
    color: #8a938e;
    font-size: 13px;
}

.dash-logs-card { padding: 6px 12px; }
.dash-logs {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dash-log-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid #f2f5f3;
}
.dash-log-row:last-child { border-bottom: 0; }
.dash-log-ico {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f3f1;
    color: #6a7570;
    font-size: 12px;
    flex-shrink: 0;
}
.dash-log-success .dash-log-ico { background: #e0f2e6; color: #067a3f; }
.dash-log-info .dash-log-ico { background: #e0eff8; color: #0b6c9c; }
.dash-log-warn .dash-log-ico { background: #fdf1dc; color: #b87400; }
.dash-log-danger .dash-log-ico { background: #fce4e1; color: #a02c20; }
.dash-log-body {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}
.dash-log-main {
    font-size: 13px;
    line-height: 1.4;
    color: #34413c;
    overflow: hidden;
    text-overflow: ellipsis;
}
.log-ator { font-weight: 600; color: #182a22; }
.log-ator-sys { font-style: italic; color: #6a7570; }
.dash-log-acao { color: #4d5a54; margin: 0 4px; }
.dash-log-ent { color: #064D32; font-weight: 500; }
.dash-log-time {
    font-size: 11px;
    color: #8a938e;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 1100px) {
    .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-two-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .dash-kpi-grid { grid-template-columns: 1fr; }
    .dash-kpi-value { font-size: 26px; }
    .dash-alert { grid-template-columns: auto 1fr; }
    .dash-alert-cta { grid-column: 2; justify-self: end; margin-top: 4px; }
    .dash-log-body { flex-direction: column; align-items: flex-start; }
}


/* ============ Empresas v3 (listagem + wizard + import) ============ */
.emp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.dash-count { font-size: 15px; font-weight: 600; color: #8a938e; margin-left: 4px; }

.emp-search-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 12px;
}
.emp-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.emp-search-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a938e;
    font-size: 13px;
    pointer-events: none;
}
.emp-search-wrap input {
    padding-left: 38px !important;
    height: 42px;
}
.emp-search-info {
    padding: 8px 12px;
    background: #f4f7f5;
    border: 1px solid #e5eae7;
    border-radius: 8px;
    font-size: 13px;
    color: #34413c;
    margin-bottom: 12px;
}

.emp-tbl thead th {
    background: #f9fbfa;
    font-weight: 600;
    color: #34413c;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .04em;
}
.emp-tbl tbody tr:hover {
    background: #f9fbfa;
}
.emp-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.emp-badge-dup {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    letter-spacing: .02em;
}
.emp-fantasia { font-size: 12px; color: #6a7570; margin-top: 2px; }
.emp-sesmo {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    color: #6a7570;
    background: #f0f3f1;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.emp-doc { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px; color: #34413c; }
.emp-uf { color: #8a938e; }
.emp-colab-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.emp-colab-badge i { font-size: 10px; }
.emp-colab-has { background: #e0f2e6; color: #067a3f; }
.emp-colab-zero { background: #f0f3f1; color: #8a938e; }
.emp-btn-gerenciar { padding: 6px 14px; font-size: 12px; font-weight: 600; }

/* ============ Wizard ============ */
.wizard-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 20px 0;
    padding: 12px 6px;
    background: #fff;
    border: 1px solid #eef1ef;
    border-radius: 10px;
    overflow-x: auto;
}
.wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    flex-shrink: 0;
}
.wizard-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    background: #eef1ef;
    color: #8a938e;
    flex-shrink: 0;
}
.wizard-lbl { font-size: 13px; color: #8a938e; font-weight: 500; white-space: nowrap; }
.wizard-line {
    flex: 1;
    min-width: 20px;
    height: 2px;
    background: #eef1ef;
    border-radius: 2px;
}
.wizard-line-done { background: #064D32; }
.wizard-active .wizard-num { background: #064D32; color: #fff; }
.wizard-active .wizard-lbl { color: #182a22; font-weight: 700; }
.wizard-done .wizard-num { background: #067a3f; color: #fff; }
.wizard-done .wizard-lbl { color: #34413c; }

.wizard-card .form-label { font-weight: 600; font-size: 13px; color: #34413c; margin-bottom: 4px; }
.wizard-card .req { color: #c0392b; }
.wizard-card small.text-muted { display: block; margin-top: 3px; font-size: 11px; }

.wizard-review {
    background: #f9fbfa;
    border: 1px solid #e5eae7;
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 8px;
}
.wizard-review h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6a7570;
    margin: 0 0 10px 0;
    font-weight: 700;
}
.wizard-review dl {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 13px;
}
.wizard-review dt { font-weight: 600; color: #6a7570; }
.wizard-review dd { margin: 0; color: #182a22; }

/* ============ Import CSV ============ */
.import-help {
    background: #f4f7f5;
    border: 1px solid #e5eae7;
    border-radius: 8px;
    padding: 14px;
    font-size: 12px;
    color: #34413c;
}
.import-help strong { display: block; margin-bottom: 6px; color: #182a22; font-size: 13px; }
.import-help ul { list-style: none; padding: 0; margin: 0 0 8px 0; }
.import-help ul li { padding: 3px 0; }

.import-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 8px 0 16px 0;
}
.import-stat {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
}
.import-stat-ok { background: #e0f2e6; color: #067a3f; }
.import-stat-upd { background: #fef3c7; color: #92400e; }
.import-stat-err { background: #fce4e1; color: #a02c20; }

.import-row-ok { background: #f4faf6; }
.import-row-update { background: #fffbf0; }
.import-row-erro { background: #fdf3f2; opacity: .8; }

@media (max-width: 700px) {
    .wizard-lbl { display: none; }
    .wizard-review dl { grid-template-columns: 1fr; gap: 2px 0; }
    .wizard-review dd { margin-bottom: 6px; }
}


/* ============ Empresas v4 (grid grupo expansivel + filtros) ============ */
.emp-filter-card { padding: 14px 16px; }
.emp-filter-form { display: flex; flex-direction: column; gap: 10px; }
.emp-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.emp-filter { display: flex; flex-direction: column; gap: 3px; }
.emp-filter label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6a7570;
    font-weight: 600;
    margin: 0;
}
.emp-filter .form-select {
    font-size: 13px;
    padding: 6px 28px 6px 10px;
    border: 1px solid #dbe1de;
    border-radius: 6px;
    background-color: #fff;
    height: auto;
}
.emp-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: 4px;
}

/* Grid header */
.emp-grid-header {
    display: grid;
    grid-template-columns: 3fr 1.4fr 1.2fr 90px 90px 130px;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: #f9fbfa;
    border: 1px solid #e5eae7;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6a7570;
    font-weight: 600;
}
.emp-col-num { text-align: center; }
.emp-col-acao { text-align: right; }

/* Rows */
.emp-row {
    display: grid;
    grid-template-columns: 3fr 1.4fr 1.2fr 90px 90px 130px;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #e5eae7;
    border-top: none;
    background: #fff;
    transition: background .1s ease;
}
.emp-row-single:hover { background: #f9fbfa; }
.emp-row:last-child, .emp-group:last-of-type > summary,
.emp-group:last-of-type .emp-row-child:last-child { border-radius: 0 0 8px 8px; }

.emp-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.emp-fantasia { font-size: 12px; color: #6a7570; margin-top: 2px; }
.emp-sesmo {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    color: #6a7570;
    background: #f0f3f1;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.emp-doc { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px; color: #34413c; }
.emp-uf { color: #8a938e; }

.emp-colab-badge, .emp-trein-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.emp-colab-badge i, .emp-trein-badge i { font-size: 10px; }
.emp-colab-has { background: #e0f2e6; color: #067a3f; }
.emp-colab-zero { background: #f0f3f1; color: #8a938e; }
.emp-trein-has { background: #e0eff8; color: #0b6c9c; }
.emp-trein-zero { background: #f0f3f1; color: #8a938e; }
.emp-btn-gerenciar { padding: 6px 14px; font-size: 12px; font-weight: 600; }

/* Grupo expansivel (details/summary) */
.emp-group { display: block; margin: 0; }
.emp-group > summary {
    cursor: pointer;
    list-style: none;
    background: #fdfefd;
    border-left: 3px solid #f5a623;
    padding-left: 11px;
}
.emp-group > summary::-webkit-details-marker { display: none; }
.emp-group > summary:hover { background: #f9fbfa; }
.emp-chevron {
    font-size: 11px;
    color: #6a7570;
    transition: transform .18s ease;
    width: 12px;
    flex-shrink: 0;
}
.emp-group[open] .emp-chevron { transform: rotate(90deg); }
.emp-badge-multi {
    display: inline-flex;
    align-items: center;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: .02em;
}
.emp-expandir {
    font-size: 11px;
    color: #6a7570;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.emp-group[open] .emp-expandir { color: #064D32; }

.emp-group-body { background: #f4f7f5; }
.emp-row-child {
    background: #f4f7f5;
    padding-left: 30px;
    border-color: #e5eae7;
}
.emp-child-num {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #92400e;
    background: #fef3c7;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: .04em;
}

@media (max-width: 1100px) {
    .emp-filter-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
    .emp-filter-grid { grid-template-columns: repeat(2, 1fr); }
    .emp-grid-header { display: none; }
    .emp-row { grid-template-columns: 1fr; gap: 6px; padding: 12px; }
    .emp-row-child { padding-left: 12px; border-left: 3px solid #f5a623; }
    .emp-col-num, .emp-col-acao { text-align: left; }
    .emp-col-num::before {
        content: attr(data-lbl);
        font-size: 11px;
        color: #8a938e;
        margin-right: 6px;
    }
}


/* ============ Treinamentos v2 (cards + KPI mini + fieldsets) ============ */

/* KPI mini row */
.trein-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.trein-kpi-mini {
    background: #fff;
    border: 1px solid #eef1ef;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.trein-kpi-mini > i {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f4faf6;
    color: #064D32;
    font-size: 16px;
    flex-shrink: 0;
}
.trein-kpi-mini-value {
    font-size: 22px;
    font-weight: 800;
    color: #182a22;
    line-height: 1;
}
.trein-kpi-mini-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6a7570;
    font-weight: 600;
    margin-top: 4px;
}

/* Grid de cards */
.trein-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.trein-card-item {
    background: #fff;
    border: 1px solid #eef1ef;
    border-radius: 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: all .15s ease;
    overflow: hidden;
}
.trein-card-item:hover {
    box-shadow: 0 6px 20px rgba(6, 77, 50, .08);
    transform: translateY(-2px);
    border-color: #dbe7e0;
}
.trein-card-inativo { opacity: .72; background: #fafafa; }
.trein-card-inativo:hover { opacity: 1; }

.trein-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(90deg, #064D32, #086e46);
    color: #fff;
    min-height: 36px;
}
.trein-card-inativo .trein-card-header {
    background: linear-gradient(90deg, #6a7570, #8a938e);
}
.trein-card-codigo {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    background: rgba(255,255,255,.15);
    padding: 2px 8px;
    border-radius: 4px;
}
.trein-card-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.trein-card-status i { font-size: 10px; }

.trein-card-body {
    padding: 14px 16px 12px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.trein-card-cat {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6a7570;
    font-weight: 700;
    margin-bottom: 4px;
}
.trein-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #182a22;
    margin: 0 0 8px 0;
    line-height: 1.25;
}
.trein-card-desc {
    font-size: 12px;
    color: #4d5a54;
    margin: 0 0 10px 0;
    line-height: 1.4;
}
.trein-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid #f2f5f3;
    border-bottom: 1px solid #f2f5f3;
    margin-bottom: 10px;
}
.trein-card-meta-item {
    font-size: 12px;
    color: #4d5a54;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
.trein-card-meta-item i {
    color: #064D32;
    font-size: 11px;
}

.trein-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
}
.trein-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.4;
}
.trein-tag i { font-size: 9px; }
.trein-tag-info    { background: #e0eff8; color: #0b6c9c; }
.trein-tag-success { background: #e0f2e6; color: #067a3f; }
.trein-tag-warn    { background: #fef3c7; color: #92400e; }
.trein-tag-muted   { background: #f0f3f1; color: #4d5a54; }

.trein-card-footer {
    padding: 10px 14px 12px 14px;
    background: #f9fbfa;
    border-top: 1px solid #eef1ef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.trein-card-stats {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #4d5a54;
    font-weight: 600;
}
.trein-card-stats i { font-size: 10px; color: #064D32; margin-right: 3px; }
.trein-card-actions { display: flex; gap: 4px; }
.trein-card-btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
    line-height: 1.4;
}

/* Fieldset do form novo/editar */
.trein-fieldset {
    border: 1px solid #eef1ef;
    border-radius: 10px;
    padding: 14px 18px 18px 18px;
    margin-bottom: 16px;
    background: #fdfefd;
}
.trein-fieldset legend {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #064D32;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    margin-bottom: 4px;
}
.trein-fieldset legend i { font-size: 11px; }
.trein-form-group .req { color: #c0392b; }

@media (max-width: 1000px) {
    .trein-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .trein-grid-cards { grid-template-columns: 1fr; }
    .trein-kpi-row { grid-template-columns: 1fr; }
    .trein-card-footer { flex-direction: column; align-items: stretch; }
    .trein-card-actions { justify-content: space-between; }
}


/* ============ Treinamentos v3 (grid 2x + capa + form capa) ============ */

/* Override do grid v2 pra 2 colunas fixas */
.trein-grid-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

/* Card com capa em cima */
.trein-card-item {
    background: #fff;
    border: 1px solid #eef1ef;
    border-radius: 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: all .18s ease;
    overflow: hidden;
}
.trein-card-item:hover {
    box-shadow: 0 8px 24px rgba(6, 77, 50, .1);
    transform: translateY(-3px);
    border-color: #cadad2;
}

.trein-card-capa {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f4f7f5;
}
.trein-card-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.trein-card-capa-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #064D32, #086e46 60%, #0a8853);
    color: rgba(255,255,255,.75);
    font-size: 64px;
}
.trein-card-capa-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
    color: #fff;
    gap: 10px;
}
.trein-card-capa.no-img .trein-card-capa-overlay { background: none; }
.trein-card-codigo {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(4px);
    padding: 3px 9px;
    border-radius: 5px;
    color: #fff;
}
.trein-card-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(4px);
    color: #fff;
}
.trein-card-status-inativo { background: rgba(0,0,0,.5); }
.trein-card-inativo .trein-card-capa img { filter: grayscale(.6) brightness(.85); }
.trein-card-inativo .trein-card-capa-fallback { background: linear-gradient(135deg, #6a7570, #8a938e); }

.trein-card-body {
    padding: 16px 18px 12px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.trein-card-cat {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #064D32;
    font-weight: 700;
    margin-bottom: 4px;
}
.trein-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #182a22;
    margin: 0 0 8px 0;
    line-height: 1.25;
}
.trein-card-desc {
    font-size: 13px;
    color: #4d5a54;
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.trein-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid #f2f5f3;
    border-bottom: 1px solid #f2f5f3;
    margin-bottom: 12px;
}
.trein-card-meta-item {
    font-size: 12px;
    color: #4d5a54;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
.trein-card-meta-item i { color: #064D32; font-size: 11px; }
.trein-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}
.trein-card-footer {
    padding: 12px 18px 14px 18px;
    background: #f9fbfa;
    border-top: 1px solid #eef1ef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Preview capa no form */
.trein-capa-preview {
    aspect-ratio: 16 / 9;
    background: #f4f7f5;
    border: 2px dashed #d5dcd8;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trein-capa-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.trein-capa-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #8a938e;
}
.trein-capa-placeholder i { font-size: 32px; }
.trein-capa-placeholder span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

@media (max-width: 900px) {
    .trein-grid-cards { grid-template-columns: 1fr; }
}


/* Wizard checks (treinamento wizard) */
.wizard-checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.wizard-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f9fbfa;
    border: 1px solid #e5eae7;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #34413c;
    transition: all .12s ease;
}
.wizard-check:hover { border-color: #064D32; background: #f0f7f3; }
.wizard-check input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
.wizard-check input:checked + span { font-weight: 700; color: #064D32; }

.wizard-review-dl {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 13px;
}
.wizard-review-dl dt { font-weight: 600; color: #6a7570; }
.wizard-review-dl dd { margin: 0; color: #182a22; }

@media (max-width: 700px) {
    .wizard-review-dl { grid-template-columns: 1fr; gap: 2px 0; }
    .wizard-review-dl dd { margin-bottom: 6px; }
}


/* ============ Perfil + Widget usuario na sidebar-bottom ============ */

/* Widget de usuario no rodape - override */
.trein-sidebar-bottom .trein-sidebar-user-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    color: rgba(255,255,255,.9);
    text-decoration: none;
    transition: all .15s ease;
    cursor: pointer;
}
.trein-sidebar-bottom .trein-sidebar-user-link:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
    transform: translateY(-1px);
    color: #fff;
}
.trein-sidebar-bottom .trein-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    color: #064D32;
    font-weight: 800;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.2);
}
.trein-sidebar-bottom .trein-user-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.trein-sidebar-bottom .trein-user-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.trein-sidebar-bottom .trein-user-name {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trein-sidebar-bottom .trein-user-role {
    font-size: 11px;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.trein-user-chevron {
    font-size: 10px;
    color: rgba(255,255,255,.5);
    flex-shrink: 0;
}
.trein-sidebar-user-link:hover .trein-user-chevron {
    color: #fff;
    transform: translateX(2px);
    transition: all .15s ease;
}

/* Perfil page */
.perfil-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 16px;
    align-items: start;
}
.perfil-grid > .trein-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
}
.perfil-grid > .trein-card:nth-child(2),
.perfil-grid > .trein-card:nth-child(3) {
    grid-column: 2;
}

.perfil-foto-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.perfil-foto-preview {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    background: #f4f7f5;
    border: 4px solid #064D32;
    box-shadow: 0 4px 16px rgba(6,77,50,.15);
}
.perfil-foto-preview img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.perfil-foto-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #064D32, #0a8853);
    color: #fff;
    font-size: 72px;
    font-weight: 800;
}
.perfil-foto-form {
    width: 100%;
    text-align: center;
}

@media (max-width: 800px) {
    .perfil-grid { grid-template-columns: 1fr; }
    .perfil-grid > .trein-card:nth-child(1) { grid-row: 1; }
    .perfil-grid > .trein-card:nth-child(2) { grid-row: 2; }
    .perfil-grid > .trein-card:nth-child(3) { grid-row: 3; }
    .perfil-foto-preview { width: 150px; height: 150px; }
}




/* Explicacao dos requisitos (checkboxes etapa 3) */
.req-explain {
    margin-top: 10px;
    padding: 10px 14px;
    background: #f9fbfa;
    border: 1px solid #e5eae7;
    border-radius: 8px;
    font-size: 12px;
    color: #4d5a54;
    line-height: 1.55;
    display: grid;
    gap: 4px;
}
.req-explain strong { color: #064D32; }

/* Hint (small.text-muted) mais legivel dentro do wizard */
.wizard-card .form-label + input + small.text-muted,
.wizard-card .form-label + select + small.text-muted,
.wizard-card .form-label + textarea + small.text-muted,
.wizard-card small.text-muted {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #6a7570;
}
.wizard-card small.text-muted strong { color: #182a22; }
.wizard-card small.text-muted em { font-style: normal; color: #064D32; font-weight: 600; }


/* Bloco explicativo do tipo de liberacao (wizard etapa 4) */
.lib-explain {
    background: #f4faf6;
    border: 1px solid #cbe4d5;
    border-left: 4px solid #064D32;
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 4px;
}
.lib-explain-title {
    font-size: 14px;
    font-weight: 700;
    color: #064D32;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lib-explain-title i { font-size: 13px; }
.lib-explain-body ul {
    margin: 0 0 10px 20px;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #34413c;
}
.lib-explain-body ul li { margin-bottom: 4px; }
.lib-explain-uso {
    font-size: 13px;
    color: #182a22;
    padding: 8px 12px;
    background: #fff;
    border-radius: 6px;
    border-left: 3px solid #067a3f;
    margin-top: 8px;
}
.lib-explain-aviso {
    font-size: 12px;
    color: #92400e;
    background: #fef3c7;
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lib-explain-aviso i { font-size: 12px; }

/* Explicacao dos requisitos (checkboxes etapa 3) */
.req-explain {
    margin-top: 10px;
    padding: 10px 14px;
    background: #f9fbfa;
    border: 1px solid #e5eae7;
    border-radius: 8px;
    font-size: 12px;
    color: #4d5a54;
    line-height: 1.55;
    display: grid;
    gap: 4px;
}
.req-explain strong { color: #064D32; }

/* Hint (small.text-muted) mais legivel dentro do wizard */
.wizard-card .form-label + input + small.text-muted,
.wizard-card .form-label + select + small.text-muted,
.wizard-card .form-label + textarea + small.text-muted,
.wizard-card small.text-muted {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #6a7570;
}
.wizard-card small.text-muted strong { color: #182a22; }
.wizard-card small.text-muted em { font-style: normal; color: #064D32; font-weight: 600; }

/* Vaga explain - diagrama visual de como funciona vagas */
.vaga-explain {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 16px 18px;
    margin-top: 6px;
}
.vaga-explain-title {
    font-size: 14px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vaga-explain-title i { color: #d97706; }
.vaga-explain-title strong { color: #78350f; }
.vaga-explain-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.vaga-step {
    background: #fff;
    border: 2px solid #fde68a;
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vaga-step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #064D32;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vaga-step-usada { background: #c0392b; }
.vaga-step-restante { background: #067a3f; }
.vaga-step-lbl {
    font-size: 12px;
    color: #34413c;
    line-height: 1.4;
}
.vaga-step-lbl strong { color: #182a22; }
.vaga-arrow {
    color: #d97706;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vaga-explain-notas {
    display: grid;
    gap: 6px;
    font-size: 12px;
    color: #4d5a54;
    line-height: 1.5;
    padding-top: 10px;
    border-top: 1px dashed #fde68a;
}
.vaga-explain-notas > div {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.vaga-explain-notas i {
    color: #d97706;
    font-size: 12px;
    margin-top: 3px;
    flex-shrink: 0;
}
.vaga-explain-notas strong { color: #182a22; }
.vaga-explain-notas em { font-style: normal; color: #064D32; font-weight: 600; }

@media (max-width: 800px) {
    .vaga-explain-flow { grid-template-columns: 1fr; }
    .vaga-arrow { transform: rotate(90deg); padding: 4px 0; }
}


/* Grid de cards de liberacoes */
.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}
.lib-card {
    background: #fff;
    border: 1px solid #eef1ef;
    border-left: 4px solid #067a3f;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lib-card.lib-alerta { border-left-color: #f5a623; }
.lib-card.lib-esgotada { border-left-color: #c0392b; }
.lib-card.lib-pausada { opacity: .7; background: #fafafa; }
.lib-card-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.lib-card-capa {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f4f7f5;
}
.lib-card-capa-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #064D32, #086e46);
    color: rgba(255,255,255,.7);
    font-size: 28px;
}
.lib-card-info { flex: 1; min-width: 0; }
.lib-card-cod {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #6a7570;
    background: #f0f3f1;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 4px;
}
.lib-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.25;
    margin-bottom: 4px;
}
.lib-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #6a7570;
    align-items: center;
}
.lib-card-meta i { color: #064D32; font-size: 10px; margin-right: 2px; }
.lib-card-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 999px;
}
.lib-card-badge-on { background: #e0f2e6; color: #067a3f; }
.lib-card-badge-off { background: #f0f3f1; color: #6a7570; }

.lib-vagas-bar-wrap { padding: 6px 0; }
.lib-vagas-nums {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #4d5a54;
    margin-bottom: 5px;
}
.lib-vagas-nums strong { color: #182a22; }
.lib-vagas-bar {
    height: 6px;
    background: #e0e7e3;
    border-radius: 3px;
    overflow: hidden;
}
.lib-vagas-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #067a3f, #0a8853);
    border-radius: 3px;
    transition: width .3s ease;
}
.lib-alerta .lib-vagas-bar > span { background: linear-gradient(90deg, #f5a623, #d97706); }
.lib-esgotada .lib-vagas-bar > span { background: linear-gradient(90deg, #c0392b, #a02c20); }

.lib-card-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    border-top: 1px solid #f2f5f3;
    padding-top: 8px;
}


/* Grid de cards de liberacoes */
.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}
.lib-card {
    background: #fff;
    border: 1px solid #eef1ef;
    border-left: 4px solid #067a3f;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lib-card.lib-alerta { border-left-color: #f5a623; }
.lib-card.lib-esgotada { border-left-color: #c0392b; }
.lib-card.lib-pausada { opacity: .7; background: #fafafa; }
.lib-card-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.lib-card-capa {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f4f7f5;
}
.lib-card-capa-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #064D32, #086e46);
    color: rgba(255,255,255,.7);
    font-size: 28px;
}
.lib-card-info { flex: 1; min-width: 0; }
.lib-card-cod {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #6a7570;
    background: #f0f3f1;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 4px;
}
.lib-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.25;
    margin-bottom: 4px;
}
.lib-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #6a7570;
    align-items: center;
}
.lib-card-meta i { color: #064D32; font-size: 10px; margin-right: 2px; }
.lib-card-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 999px;
}
.lib-card-badge-on { background: #e0f2e6; color: #067a3f; }
.lib-card-badge-off { background: #f0f3f1; color: #6a7570; }

.lib-vagas-bar-wrap { padding: 6px 0; }
.lib-vagas-nums {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #4d5a54;
    margin-bottom: 5px;
}
.lib-vagas-nums strong { color: #182a22; }
.lib-vagas-bar {
    height: 6px;
    background: #e0e7e3;
    border-radius: 3px;
    overflow: hidden;
}
.lib-vagas-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #067a3f, #0a8853);
    border-radius: 3px;
    transition: width .3s ease;
}
.lib-alerta .lib-vagas-bar > span { background: linear-gradient(90deg, #f5a623, #d97706); }
.lib-esgotada .lib-vagas-bar > span { background: linear-gradient(90deg, #c0392b, #a02c20); }

.lib-card-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    border-top: 1px solid #f2f5f3;
    padding-top: 8px;
}

/* ============ Picker visual de treinamentos ============ */
.picker-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.picker-search-wrap {
    position: relative;
    flex: 1;
    min-width: 240px;
    max-width: 480px;
}
.picker-search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a938e;
    font-size: 13px;
    pointer-events: none;
}
.picker-search-wrap input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid #dbe1de;
    border-radius: 8px;
    font-size: 13px;
    background: #f9fbfa;
    color: #182a22;
}
.picker-search-wrap input:focus {
    outline: none;
    border-color: #064D32;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(6,77,50,.1);
}
.picker-count {
    font-size: 12px;
    color: #6a7570;
    font-weight: 600;
}

.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    max-height: 520px;
    overflow-y: auto;
    padding: 4px;
    background: #f9fbfa;
    border: 1px solid #eef1ef;
    border-radius: 10px;
}
.picker-grid::-webkit-scrollbar { width: 8px; }
.picker-grid::-webkit-scrollbar-track { background: transparent; }
.picker-grid::-webkit-scrollbar-thumb { background: #c8d0cb; border-radius: 4px; }

.picker-card {
    background: #fff;
    border: 2px solid #eef1ef;
    border-radius: 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    cursor: pointer;
    transition: all .15s ease;
    overflow: hidden;
    font-family: inherit;
    position: relative;
}
.picker-card:hover {
    border-color: #cadad2;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(6,77,50,.08);
}
.picker-card.selected {
    border-color: #064D32;
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    box-shadow: 0 6px 20px rgba(6,77,50,.15);
}
.picker-card.selected .picker-card-check { opacity: 1; transform: scale(1); }

.picker-card-capa {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f4f7f5;
}
.picker-card-capa img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.picker-card-capa-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #064D32, #0a7048);
    color: rgba(255,255,255,.75);
    font-size: 42px;
}
.picker-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #064D32;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transform: scale(.6);
    transition: all .18s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 3px 8px rgba(0,0,0,.2);
}

.picker-card-body {
    padding: 10px 12px 12px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.picker-card-cod {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #064D32;
    background: #e0f2e6;
    padding: 2px 8px;
    border-radius: 4px;
    align-self: flex-start;
}
.picker-card-nome {
    font-size: 13px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.3;
}
.picker-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #4d5a54;
    margin-top: auto;
    align-items: center;
}
.picker-card-meta i { color: #064D32; font-size: 10px; margin-right: 2px; }
.picker-tag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 999px;
}
.picker-tag-auto { background: #e0f2e6; color: #067a3f; }
.picker-tag-man  { background: #fef3c7; color: #92400e; }

.picker-empty {
    padding: 30px 20px;
    text-align: center;
    color: #8a938e;
    font-size: 13px;
    background: #f9fbfa;
    border: 1px dashed #dbe1de;
    border-radius: 10px;
    margin-top: 8px;
}

.picker-submit {
    margin-top: 14px;
    padding: 14px 16px;
    background: linear-gradient(90deg, #064D32, #0a7048);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: #fff;
    box-shadow: 0 4px 16px rgba(6,77,50,.2);
    animation: pickerSlideIn .25s ease;
}
@keyframes pickerSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.picker-submit-info { flex: 1; min-width: 200px; }
.picker-submit-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.7);
    font-weight: 700;
}
.picker-submit-nome {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-top: 2px;
}
.picker-submit-qtd {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.picker-submit-qtd label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.7);
    font-weight: 700;
}
.picker-submit-qtd input {
    width: 90px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    text-align: center;
}
.picker-submit-btn {
    background: #fff !important;
    color: #064D32 !important;
    border: none !important;
    font-weight: 700;
    padding: 10px 20px !important;
}
.picker-submit-btn:hover {
    background: #f0f7f3 !important;
    color: #064D32 !important;
}

@media (max-width: 700px) {
    .picker-grid { grid-template-columns: 1fr; max-height: 400px; }
    .picker-submit { flex-direction: column; align-items: stretch; }
    .picker-submit-qtd { flex-direction: row; align-items: center; justify-content: space-between; }
}


/* Grid de cards de liberacoes */
.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}
.lib-card {
    background: #fff;
    border: 1px solid #eef1ef;
    border-left: 4px solid #067a3f;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lib-card.lib-alerta { border-left-color: #f5a623; }
.lib-card.lib-esgotada { border-left-color: #c0392b; }
.lib-card.lib-pausada { opacity: .7; background: #fafafa; }
.lib-card-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.lib-card-capa {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f4f7f5;
}
.lib-card-capa-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #064D32, #086e46);
    color: rgba(255,255,255,.7);
    font-size: 28px;
}
.lib-card-info { flex: 1; min-width: 0; }
.lib-card-cod {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #6a7570;
    background: #f0f3f1;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 4px;
}
.lib-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.25;
    margin-bottom: 4px;
}
.lib-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #6a7570;
    align-items: center;
}
.lib-card-meta i { color: #064D32; font-size: 10px; margin-right: 2px; }
.lib-card-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 999px;
}
.lib-card-badge-on { background: #e0f2e6; color: #067a3f; }
.lib-card-badge-off { background: #f0f3f1; color: #6a7570; }

.lib-vagas-bar-wrap { padding: 6px 0; }
.lib-vagas-nums {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #4d5a54;
    margin-bottom: 5px;
}
.lib-vagas-nums strong { color: #182a22; }
.lib-vagas-bar {
    height: 6px;
    background: #e0e7e3;
    border-radius: 3px;
    overflow: hidden;
}
.lib-vagas-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #067a3f, #0a8853);
    border-radius: 3px;
    transition: width .3s ease;
}
.lib-alerta .lib-vagas-bar > span { background: linear-gradient(90deg, #f5a623, #d97706); }
.lib-esgotada .lib-vagas-bar > span { background: linear-gradient(90deg, #c0392b, #a02c20); }

.lib-card-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    border-top: 1px solid #f2f5f3;
    padding-top: 8px;
}

/* ============ Picker visual de treinamentos ============ */
.picker-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.picker-search-wrap {
    position: relative;
    flex: 1;
    min-width: 240px;
    max-width: 480px;
}
.picker-search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a938e;
    font-size: 13px;
    pointer-events: none;
}
.picker-search-wrap input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid #dbe1de;
    border-radius: 8px;
    font-size: 13px;
    background: #f9fbfa;
    color: #182a22;
}
.picker-search-wrap input:focus {
    outline: none;
    border-color: #064D32;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(6,77,50,.1);
}
.picker-count {
    font-size: 12px;
    color: #6a7570;
    font-weight: 600;
}

.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    max-height: 520px;
    overflow-y: auto;
    padding: 4px;
    background: #f9fbfa;
    border: 1px solid #eef1ef;
    border-radius: 10px;
}
.picker-grid::-webkit-scrollbar { width: 8px; }
.picker-grid::-webkit-scrollbar-track { background: transparent; }
.picker-grid::-webkit-scrollbar-thumb { background: #c8d0cb; border-radius: 4px; }

.picker-card {
    background: #fff;
    border: 2px solid #eef1ef;
    border-radius: 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    cursor: pointer;
    transition: all .15s ease;
    overflow: hidden;
    font-family: inherit;
    position: relative;
}
.picker-card:hover {
    border-color: #cadad2;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(6,77,50,.08);
}
.picker-card.selected {
    border-color: #064D32;
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    box-shadow: 0 6px 20px rgba(6,77,50,.15);
}
.picker-card.selected .picker-card-check { opacity: 1; transform: scale(1); }

.picker-card-capa {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f4f7f5;
}
.picker-card-capa img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.picker-card-capa-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #064D32, #0a7048);
    color: rgba(255,255,255,.75);
    font-size: 42px;
}
.picker-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #064D32;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transform: scale(.6);
    transition: all .18s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 3px 8px rgba(0,0,0,.2);
}

.picker-card-body {
    padding: 10px 12px 12px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.picker-card-cod {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #064D32;
    background: #e0f2e6;
    padding: 2px 8px;
    border-radius: 4px;
    align-self: flex-start;
}
.picker-card-nome {
    font-size: 13px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.3;
}
.picker-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #4d5a54;
    margin-top: auto;
    align-items: center;
}
.picker-card-meta i { color: #064D32; font-size: 10px; margin-right: 2px; }
.picker-tag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 999px;
}
.picker-tag-auto { background: #e0f2e6; color: #067a3f; }
.picker-tag-man  { background: #fef3c7; color: #92400e; }

.picker-empty {
    padding: 30px 20px;
    text-align: center;
    color: #8a938e;
    font-size: 13px;
    background: #f9fbfa;
    border: 1px dashed #dbe1de;
    border-radius: 10px;
    margin-top: 8px;
}

.picker-submit {
    margin-top: 14px;
    padding: 14px 16px;
    background: linear-gradient(90deg, #064D32, #0a7048);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: #fff;
    box-shadow: 0 4px 16px rgba(6,77,50,.2);
    animation: pickerSlideIn .25s ease;
}
@keyframes pickerSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.picker-submit-info { flex: 1; min-width: 200px; }
.picker-submit-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.7);
    font-weight: 700;
}
.picker-submit-nome {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-top: 2px;
}
.picker-submit-qtd {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.picker-submit-qtd label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.7);
    font-weight: 700;
}
.picker-submit-qtd input {
    width: 90px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    text-align: center;
}
.picker-submit-btn {
    background: #fff !important;
    color: #064D32 !important;
    border: none !important;
    font-weight: 700;
    padding: 10px 20px !important;
}
.picker-submit-btn:hover {
    background: #f0f7f3 !important;
    color: #064D32 !important;
}

.picker-preview {
    margin-top: 10px;
    padding: 12px 14px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.5;
    color: #78350f;
}
.picker-preview i {
    color: #d97706;
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}
.picker-preview strong { color: #182a22; }

@media (max-width: 700px) {
    .picker-grid { grid-template-columns: 1fr; max-height: 400px; }
    .picker-submit { flex-direction: column; align-items: stretch; }
    .picker-submit-qtd { flex-direction: row; align-items: center; justify-content: space-between; }
}


/* ============ Matriculas v2 (KPI chips clicaveis + lista visual) ============ */

/* KPIs viraram links/chips clicaveis */
.matr-kpis a.trein-kpi-mini {
    text-decoration: none;
    color: #182a22;
    cursor: pointer;
    transition: all .15s ease;
    border: 1px solid #eef1ef;
}
.matr-kpis a.trein-kpi-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6,77,50,.08);
    border-color: #cadad2;
}
.matr-kpis a.trein-kpi-mini.active {
    border-color: #064D32;
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    box-shadow: 0 3px 12px rgba(6,77,50,.12);
}
.matr-kpi-info > i    { background: #e0eff8; color: #0b6c9c; }
.matr-kpi-warn > i    { background: #fef3c7; color: #92400e; }
.matr-kpi-ok > i      { background: #e0f2e6; color: #067a3f; }
.matr-kpi-danger > i  { background: #fce4e1; color: #a02c20; }

/* Lista de matriculas */
.matr-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.matr-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1.2fr 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #eef1ef;
    border-left: 4px solid #8a938e;
    border-radius: 10px;
    transition: all .12s ease;
}
.matr-row:hover {
    background: #f9fbfa;
    box-shadow: 0 3px 10px rgba(0,0,0,.04);
}
.matr-row-info    { border-left-color: #0b6c9c; }
.matr-row-warn    { border-left-color: #f5a623; }
.matr-row-success { border-left-color: #067a3f; }
.matr-row-danger  { border-left-color: #c0392b; }
.matr-row-muted   { border-left-color: #8a938e; }

.matr-col-colab {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.matr-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #064D32, #0a7048);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.matr-colab-info { min-width: 0; overflow: hidden; }
.matr-colab-nome {
    font-size: 13px;
    font-weight: 700;
    color: #182a22;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.matr-colab-sub {
    font-size: 11px;
    color: #6a7570;
    font-family: 'SFMono-Regular', Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.matr-col-trein {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.matr-trein-capa {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f4f7f5;
}
.matr-trein-capa-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #064D32, #086e46);
    color: rgba(255,255,255,.7);
    font-size: 20px;
}
.matr-trein-info { min-width: 0; overflow: hidden; }
.matr-trein-cod {
    display: inline-block;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #064D32;
    background: #e0f2e6;
    padding: 1px 6px;
    border-radius: 4px;
    margin-bottom: 3px;
}
.matr-trein-nome {
    font-size: 12px;
    color: #182a22;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matr-col-progresso {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.matr-progresso-nums {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    font-weight: 700;
    color: #182a22;
}
.matr-progresso-nums small { font-weight: 500; }
.matr-progresso-bar {
    height: 5px;
    background: #eef1ef;
    border-radius: 3px;
    overflow: hidden;
}
.matr-progresso-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #064D32, #0a8853);
    border-radius: 3px;
    transition: width .3s ease;
}
.matr-row-danger .matr-progresso-bar > span { background: linear-gradient(90deg, #c0392b, #e74c3c); }
.matr-row-warn .matr-progresso-bar > span { background: linear-gradient(90deg, #f5a623, #f39c12); }

.matr-col-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}
.matr-tempo {
    font-size: 11px;
    color: #8a938e;
}

@media (max-width: 900px) {
    .matr-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .matr-col-status { align-items: flex-start; text-align: left; }
    .matr-col-progresso { padding-top: 4px; border-top: 1px dashed #eef1ef; }
}


/* ============ Empresa detalhe v2 ============ */
.emp-breadcrumb { margin-bottom: 4px; }
.emp-breadcrumb a {
    color: #6a7570;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.emp-breadcrumb a:hover { color: #064D32; }

.emp-info-card { padding: 14px 18px; }
.emp-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px 20px;
}
.emp-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}
.emp-info-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6a7570;
    font-weight: 700;
    white-space: nowrap;
}
.emp-info-val {
    font-size: 14px;
    color: #182a22;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}
.emp-info-val a {
    color: #064D32;
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.emp-info-val a:hover { text-decoration: underline; }

.dash-card-sub {
    font-size: 13px;
    color: #6a7570;
    margin: -6px 0 12px 0;
    line-height: 1.4;
}
.dash-card-sub strong { color: #064D32; }

/* Grid de cards de liberacoes */
.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}
.lib-card {
    background: #fff;
    border: 1px solid #eef1ef;
    border-left: 4px solid #067a3f;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lib-card.lib-alerta { border-left-color: #f5a623; }
.lib-card.lib-esgotada { border-left-color: #c0392b; }
.lib-card.lib-pausada { opacity: .7; background: #fafafa; }
.lib-card-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.lib-card-capa {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f4f7f5;
}
.lib-card-capa-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #064D32, #086e46);
    color: rgba(255,255,255,.7);
    font-size: 28px;
}
.lib-card-info { flex: 1; min-width: 0; }
.lib-card-cod {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #6a7570;
    background: #f0f3f1;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 4px;
}
.lib-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.25;
    margin-bottom: 4px;
}
.lib-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #6a7570;
    align-items: center;
}
.lib-card-meta i { color: #064D32; font-size: 10px; margin-right: 2px; }
.lib-card-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 999px;
}
.lib-card-badge-on { background: #e0f2e6; color: #067a3f; }
.lib-card-badge-off { background: #f0f3f1; color: #6a7570; }

.lib-vagas-bar-wrap { padding: 6px 0; }
.lib-vagas-nums {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #4d5a54;
    margin-bottom: 5px;
}
.lib-vagas-nums strong { color: #182a22; }
.lib-vagas-bar {
    height: 6px;
    background: #e0e7e3;
    border-radius: 3px;
    overflow: hidden;
}
.lib-vagas-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #067a3f, #0a8853);
    border-radius: 3px;
    transition: width .3s ease;
}
.lib-alerta .lib-vagas-bar > span { background: linear-gradient(90deg, #f5a623, #d97706); }
.lib-esgotada .lib-vagas-bar > span { background: linear-gradient(90deg, #c0392b, #a02c20); }

.lib-card-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    border-top: 1px solid #f2f5f3;
    padding-top: 8px;
}

/* ============ Picker visual de treinamentos ============ */
.picker-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.picker-search-wrap {
    position: relative;
    flex: 1;
    min-width: 240px;
    max-width: 480px;
}
.picker-search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a938e;
    font-size: 13px;
    pointer-events: none;
}
.picker-search-wrap input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid #dbe1de;
    border-radius: 8px;
    font-size: 13px;
    background: #f9fbfa;
    color: #182a22;
}
.picker-search-wrap input:focus {
    outline: none;
    border-color: #064D32;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(6,77,50,.1);
}
.picker-count {
    font-size: 12px;
    color: #6a7570;
    font-weight: 600;
}

.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    max-height: 520px;
    overflow-y: auto;
    padding: 4px;
    background: #f9fbfa;
    border: 1px solid #eef1ef;
    border-radius: 10px;
}
.picker-grid::-webkit-scrollbar { width: 8px; }
.picker-grid::-webkit-scrollbar-track { background: transparent; }
.picker-grid::-webkit-scrollbar-thumb { background: #c8d0cb; border-radius: 4px; }

.picker-card {
    background: #fff;
    border: 2px solid #eef1ef;
    border-radius: 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    cursor: pointer;
    transition: all .15s ease;
    overflow: hidden;
    font-family: inherit;
    position: relative;
}
.picker-card:hover {
    border-color: #cadad2;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(6,77,50,.08);
}
.picker-card.selected {
    border-color: #064D32;
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    box-shadow: 0 6px 20px rgba(6,77,50,.15);
}
.picker-card.selected .picker-card-check { opacity: 1; transform: scale(1); }

.picker-card-capa {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f4f7f5;
}
.picker-card-capa img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.picker-card-capa-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #064D32, #0a7048);
    color: rgba(255,255,255,.75);
    font-size: 42px;
}
.picker-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #064D32;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transform: scale(.6);
    transition: all .18s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 3px 8px rgba(0,0,0,.2);
}

.picker-card-body {
    padding: 10px 12px 12px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.picker-card-cod {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #064D32;
    background: #e0f2e6;
    padding: 2px 8px;
    border-radius: 4px;
    align-self: flex-start;
}
.picker-card-nome {
    font-size: 13px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.3;
}
.picker-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #4d5a54;
    margin-top: auto;
    align-items: center;
}
.picker-card-meta i { color: #064D32; font-size: 10px; margin-right: 2px; }
.picker-tag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 999px;
}
.picker-tag-auto { background: #e0f2e6; color: #067a3f; }
.picker-tag-man  { background: #fef3c7; color: #92400e; }

.picker-empty {
    padding: 30px 20px;
    text-align: center;
    color: #8a938e;
    font-size: 13px;
    background: #f9fbfa;
    border: 1px dashed #dbe1de;
    border-radius: 10px;
    margin-top: 8px;
}

.picker-submit {
    margin-top: 14px;
    padding: 14px 16px;
    background: linear-gradient(90deg, #064D32, #0a7048);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: #fff;
    box-shadow: 0 4px 16px rgba(6,77,50,.2);
    animation: pickerSlideIn .25s ease;
}
@keyframes pickerSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.picker-submit-info { flex: 1; min-width: 200px; }
.picker-submit-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.7);
    font-weight: 700;
}
.picker-submit-nome {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-top: 2px;
}
.picker-submit-qtd {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.picker-submit-qtd label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.7);
    font-weight: 700;
}
.picker-submit-qtd input {
    width: 90px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    text-align: center;
}
.picker-submit-btn {
    background: #fff !important;
    color: #064D32 !important;
    border: none !important;
    font-weight: 700;
    padding: 10px 20px !important;
}
.picker-submit-btn:hover {
    background: #f0f7f3 !important;
    color: #064D32 !important;
}

.picker-preview {
    margin-top: 10px;
    padding: 12px 14px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.5;
    color: #78350f;
}
.picker-preview i {
    color: #d97706;
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}
.picker-preview strong { color: #182a22; }

@media (max-width: 700px) {
    .picker-grid { grid-template-columns: 1fr; max-height: 400px; }
    .picker-submit { flex-direction: column; align-items: stretch; }
    .picker-submit-qtd { flex-direction: row; align-items: center; justify-content: space-between; }
}


/* Certificados v2 - especifico */
.cert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cert-row {
    display: grid;
    grid-template-columns: 130px 2fr 2fr 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #eef1ef;
    border-left: 4px solid #8a938e;
    border-radius: 10px;
    transition: all .12s ease;
}
.cert-row:hover { background: #f9fbfa; box-shadow: 0 3px 10px rgba(0,0,0,.04); }
.cert-row-info    { border-left-color: #0b6c9c; }
.cert-row-warn    { border-left-color: #f5a623; }
.cert-row-success { border-left-color: #067a3f; }
.cert-row-danger  { border-left-color: #c0392b; }
.cert-row-muted   { border-left-color: #8a938e; }

.cert-col-num { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cert-numero {
    font-size: 15px;
    font-weight: 800;
    color: #064D32;
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.cert-emitido { font-size: 11px; color: #6a7570; }
.cert-codval {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    color: #8a938e;
    background: #f0f3f1;
    padding: 1px 5px;
    border-radius: 3px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cert-col-modo, .cert-col-status {
    display: flex;
    align-items: center;
    justify-content: center;
}
.cert-col-action {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.cert-btn { padding: 6px 10px !important; font-size: 12px !important; }

@media (max-width: 1000px) {
    .cert-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .cert-col-action { justify-content: flex-start; padding-top: 8px; border-top: 1px dashed #eef1ef; }
    .cert-col-modo, .cert-col-status { justify-content: flex-start; }
}


/* ============ Fotos v2 (grid + lightbox) ============ */
.fotos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.foto-card {
    background: #fff;
    border: 1px solid #eef1ef;
    border-top: 4px solid #8a938e;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all .15s ease;
}
.foto-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.foto-card-warn    { border-top-color: #f5a623; }
.foto-card-success { border-top-color: #067a3f; }
.foto-card-danger  { border-top-color: #c0392b; }
.foto-card-muted   { border-top-color: #8a938e; }

.foto-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #0f1614;
    overflow: hidden;
    cursor: zoom-in;
}
.foto-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.foto-preview:hover img { transform: scale(1.03); }

.foto-status-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    backdrop-filter: blur(6px);
    color: #fff;
}
.foto-status-warn    { background: rgba(217,119,6,.9); }
.foto-status-success { background: rgba(6,122,63,.9); }
.foto-status-danger  { background: rgba(192,57,43,.9); }
.foto-status-muted   { background: rgba(74,85,80,.9); }

.foto-zoom-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 10px;
    border-radius: 999px;
    font-weight: 600;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.foto-preview:hover .foto-zoom-hint { opacity: 1; }

.foto-info {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.foto-colab {
    display: flex;
    align-items: center;
    gap: 10px;
}
.foto-trein {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px dashed #eef1ef;
}
.foto-trein-nome {
    font-size: 12px;
    color: #182a22;
    font-weight: 600;
}
.foto-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: #6a7570;
}
.foto-meta i { color: #064D32; font-size: 10px; margin-right: 2px; }
.foto-motivo {
    padding: 6px 10px;
    background: #fdf3f2;
    color: #a02c20;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}
.foto-motivo i { color: #c0392b; }

.foto-actions {
    padding: 10px 14px 12px 14px;
    background: #f9fbfa;
    border-top: 1px solid #eef1ef;
    display: flex;
    gap: 8px;
}
.foto-btn-rej {
    padding: 8px 14px !important;
    min-width: 44px;
}

/* Lightbox */
.foto-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
    animation: lbFadeIn .18s ease;
}
.foto-lightbox.open { display: flex; }
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.foto-lightbox-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.foto-lightbox-inner img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.foto-lightbox-nome {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.foto-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #182a22;
    border: none;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    transition: transform .12s ease;
}
.foto-lightbox-close:hover { transform: scale(1.1); }

@media (max-width: 600px) {
    .fotos-grid { grid-template-columns: 1fr; }
    .foto-lightbox-close { top: 8px; right: 8px; }
}


/* ============ Relatorios v2 ============ */
.rel-periodo-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.rel-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.rel-preset {
    padding: 6px 14px;
    background: #f9fbfa;
    border: 1px solid #e5eae7;
    border-radius: 999px;
    color: #4d5a54;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all .12s ease;
}
.rel-preset:hover { border-color: #064D32; color: #064D32; }
.rel-preset.active {
    background: #064D32;
    color: #fff;
    border-color: #064D32;
}

.rel-periodo-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px dashed #eef1ef;
}
.rel-periodo-inputs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}
.rel-periodo-inputs label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6a7570;
    font-weight: 600;
}
.rel-periodo-inputs input { min-width: 160px; }

.rel-export-link {
    font-size: 11px;
    color: #064D32;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f0f7f3;
    transition: background .12s ease;
}
.rel-export-link:hover { background: #dcede4; color: #064D32; }

/* Donut de distribuicao */
.rel-donut-wrap {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: center;
}
.rel-donut {
    width: 220px;
    height: 220px;
    justify-self: center;
}
.rel-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rel-donut-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f2f5f3;
    font-size: 13px;
}
.rel-donut-item:last-child { border-bottom: none; }
.rel-donut-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}
.rel-donut-lbl { flex: 1; color: #34413c; font-weight: 500; }
.rel-donut-val { color: #6a7570; font-size: 12px; }
.rel-donut-val strong { color: #182a22; font-size: 14px; }

/* Ranking (por treinamento / empresa / instrutor) */
.rel-rank { display: flex; flex-direction: column; gap: 8px; }
.rel-rank-row {
    display: grid;
    grid-template-columns: 1fr auto 100px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f2f5f3;
}
.rel-rank-row:last-child { border-bottom: none; }
.rel-rank-info { min-width: 0; }
.rel-rank-name {
    font-size: 13px;
    font-weight: 700;
    color: #182a22;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rel-rank-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #6a7570;
}
.rel-rank-meta strong { color: #182a22; }
.rel-tag {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}
.rel-tag-ok { background: #e0f2e6; color: #067a3f; }
.rel-tag-warn { background: #fef3c7; color: #92400e; }
.rel-tag-danger { background: #fce4e1; color: #a02c20; }

.rel-rank-tx {
    font-size: 15px;
    font-weight: 800;
    text-align: right;
    min-width: 50px;
}
.rel-rank-tx.ok { color: #067a3f; }
.rel-rank-tx.warn { color: #b87400; }
.rel-rank-tx.danger { color: #a02c20; }

.rel-rank-bar {
    height: 6px;
    background: #eef1ef;
    border-radius: 3px;
    overflow: hidden;
}
.rel-rank-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #064D32, #0a8853);
    border-radius: 3px;
    transition: width .3s ease;
}

@media (max-width: 900px) {
    .rel-donut-wrap { grid-template-columns: 1fr; }
    .rel-donut { width: 180px; height: 180px; }
    .rel-rank-row { grid-template-columns: 1fr auto; }
    .rel-rank-bar { grid-column: 1 / -1; }
}


/* ============ Usuarios v2 (cards) ============ */
.usr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}
.usr-card {
    background: #fff;
    border: 1px solid #eef1ef;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition: all .15s ease;
}
.usr-card:hover {
    border-color: #cadad2;
    box-shadow: 0 6px 20px rgba(6,77,50,.08);
    transform: translateY(-2px);
}
.usr-card-inativo { opacity: .72; background: #fafafa; }
.usr-card-inativo:hover { opacity: 1; }
.usr-card-eu { border-color: #064D32; box-shadow: 0 0 0 1px #064D32; }
.usr-card-badge-eu {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #064D32;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 3px 8px;
    border-radius: 999px;
}

.usr-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.usr-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #064D32, #0a7048);
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.usr-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.usr-avatar-off {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}
.usr-info { min-width: 0; overflow: hidden; flex: 1; }
.usr-nome {
    font-size: 15px;
    font-weight: 700;
    color: #182a22;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.usr-email {
    font-size: 12px;
    color: #6a7570;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.usr-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;
    border-top: 1px solid #f2f5f3;
    border-bottom: 1px solid #f2f5f3;
}
.usr-meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    gap: 8px;
}
.usr-meta-lbl {
    color: #6a7570;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .04em;
}
.usr-meta-val { color: #182a22; font-weight: 500; }

.usr-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.usr-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
}

/* Alerta de senha temporaria */
.senha-alert {
    border: 2px solid #f5a623 !important;
    background: linear-gradient(135deg, #fefce8, #fef9c3) !important;
    margin-bottom: 20px;
}
.senha-alert-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px dashed #fde68a;
}
.senha-alert-head i {
    font-size: 24px;
    color: #d97706;
    margin-top: 2px;
    flex-shrink: 0;
}
.senha-alert-head strong {
    display: block;
    color: #78350f;
    font-size: 15px;
    margin-bottom: 4px;
}
.senha-alert-head small {
    color: #92400e;
    font-size: 12px;
    line-height: 1.4;
}
.senha-alert-body {
    padding-top: 12px;
    display: grid;
    gap: 12px;
}
.senha-alert-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #92400e;
    font-weight: 700;
    margin-bottom: 4px;
}
.senha-alert-val {
    font-size: 13px;
    color: #182a22;
    font-weight: 600;
}
.senha-alert-code {
    display: flex;
    align-items: center;
    gap: 10px;
}
.senha-alert-code code {
    font-size: 18px;
    font-weight: 800;
    padding: 8px 14px;
    background: #fff;
    border: 2px solid #fde68a;
    border-radius: 8px;
    color: #182a22;
    letter-spacing: .06em;
    flex: 1;
}

/* ============ Logs v2 (timeline) ============ */
.logs-card { padding: 8px 14px; }
.logs-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}
.logs-date-sep {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6a7570;
    font-weight: 700;
    padding: 12px 4px 8px 4px;
    border-bottom: 1px dashed #eef1ef;
    margin-bottom: 4px;
}
.logs-date-sep:first-child { padding-top: 4px; }
.logs-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid #f6f7f6;
}
.logs-item:last-child { border-bottom: none; }
.logs-ico {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f3f1;
    color: #6a7570;
    font-size: 12px;
    flex-shrink: 0;
}
.logs-item-success .logs-ico { background: #e0f2e6; color: #067a3f; }
.logs-item-info    .logs-ico { background: #e0eff8; color: #0b6c9c; }
.logs-item-warn    .logs-ico { background: #fef3c7; color: #92400e; }
.logs-item-danger  .logs-ico { background: #fce4e1; color: #a02c20; }

.logs-body { flex: 1; min-width: 0; }
.logs-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    line-height: 1.4;
}
.logs-ator { font-weight: 700; color: #182a22; }
.logs-acao { color: #4d5a54; }
.logs-ent {
    color: #064D32;
    font-weight: 600;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    background: #f0f7f3;
    padding: 1px 6px;
    border-radius: 4px;
}
.logs-item-danger .logs-line { color: #a02c20; }
.logs-item-danger .logs-ator { color: #a02c20; }

.logs-det {
    margin-top: 6px;
    font-size: 11px;
}
.logs-det summary {
    cursor: pointer;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    outline: none;
}
.logs-det summary:hover { color: #064D32; }
.logs-det pre {
    margin: 6px 0 0 0;
    padding: 8px 12px;
    background: #f9fbfa;
    border: 1px solid #eef1ef;
    border-radius: 6px;
    font-size: 11px;
    color: #34413c;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.logs-meta {
    text-align: right;
    flex-shrink: 0;
    min-width: 100px;
}
.logs-time { font-size: 11px; color: #6a7570; }
.logs-ip {
    font-size: 10px;
    color: #8a938e;
    font-family: 'SFMono-Regular', Consolas, monospace;
    margin-top: 2px;
}

/* ============ Configuracoes v2 ============ */
.cfg-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
    align-items: start;
}
.cfg-col { display: flex; flex-direction: column; gap: 16px; }

.cfg-toggles { display: flex; flex-direction: column; gap: 10px; }
.cfg-toggle {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f9fbfa;
    border: 1px solid #e5eae7;
    border-radius: 10px;
    cursor: pointer;
    transition: all .12s ease;
}
.cfg-toggle:hover { border-color: #cadad2; background: #f4f7f5; }
.cfg-toggle.on {
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    border-color: #a5d8b7;
}
.cfg-toggle-ico {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef1ef;
    color: #6a7570;
    font-size: 16px;
}
.cfg-toggle.on .cfg-toggle-ico { background: #064D32; color: #fff; }
.cfg-toggle-info { min-width: 0; }
.cfg-toggle-lbl {
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    margin-bottom: 2px;
}
.cfg-toggle-desc {
    font-size: 12px;
    color: #6a7570;
    line-height: 1.4;
}
.cfg-toggle-switch {
    display: inline-flex;
    align-items: center;
}
.cfg-toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.cfg-switch-track {
    display: inline-block;
    width: 42px;
    height: 24px;
    background: #d1d5d3;
    border-radius: 999px;
    position: relative;
    transition: background .18s ease;
}
.cfg-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform .18s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.cfg-toggle-switch input:checked + .cfg-switch-track { background: #064D32; }
.cfg-toggle-switch input:checked + .cfg-switch-track .cfg-switch-thumb { transform: translateX(18px); }

.cfg-sep {
    border: none;
    border-top: 1px dashed #eef1ef;
    margin: 20px 0;
}

.cfg-status-card { padding: 16px 18px; }
.cfg-status-card.cfg-status-on { border-left: 4px solid #067a3f; }
.cfg-status-card.cfg-status-off { border-left: 4px solid #c0392b; }
.cfg-status-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    padding: 10px 0;
    border-bottom: 1px dashed #eef1ef;
    margin-bottom: 12px;
}
.cfg-status-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6a7570;
    font-weight: 700;
    margin-bottom: 4px;
}
.cfg-status-val { font-size: 14px; color: #182a22; }
.cfg-status-val code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    background: #f0f3f1;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.cfg-status-hint {
    font-size: 12px;
    color: #4d5a54;
    line-height: 1.5;
    margin: 8px 0 0 0;
    padding: 8px 10px;
    background: #f9fbfa;
    border-radius: 6px;
}
.cfg-status-hint i { color: #6a7570; margin-right: 4px; }
.cfg-status-hint code { background: #eef1ef; padding: 1px 4px; border-radius: 3px; font-size: 11px; }

@media (max-width: 1000px) {
    .cfg-grid { grid-template-columns: 1fr; }
    .cfg-status-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .usr-grid { grid-template-columns: 1fr; }
    .cfg-toggle { grid-template-columns: 36px 1fr auto; }
    .logs-meta { min-width: 80px; }
}


/* ============ Usuario editar v2 ============ */
.ued-header-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.ued-header-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #064D32, #0a7048);
    color: #fff;
    font-weight: 800;
    font-size: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.1);
}
.ued-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ued-header-info { flex: 1; min-width: 0; }
.ued-header-nome {
    font-size: 20px;
    font-weight: 700;
    color: #182a22;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.ued-badge-eu {
    background: #064D32;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 3px 8px;
    border-radius: 999px;
}
.ued-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #6a7570;
}
.ued-header-meta i { color: #064D32; font-size: 11px; margin-right: 4px; }

.ued-form { display: flex; flex-direction: column; gap: 16px; }
.ued-form .trein-card { padding: 18px 20px; }

/* Picker de perfil */
.ued-perfil-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ued-perfil-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #f9fbfa;
    border: 2px solid #e5eae7;
    border-radius: 10px;
    cursor: pointer;
    transition: all .12s ease;
    margin: 0;
}
.ued-perfil-card:hover { border-color: #cadad2; }
.ued-perfil-card.selected {
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    border-color: #064D32;
    box-shadow: 0 3px 12px rgba(6,77,50,.1);
}
.ued-perfil-card input { position: absolute; opacity: 0; pointer-events: none; }
.ued-perfil-ico {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eef1ef;
    color: #6a7570;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.ued-perfil-card.selected .ued-perfil-ico { background: #064D32; color: #fff; }
.ued-perfil-titulo {
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    margin-bottom: 3px;
}
.ued-perfil-desc {
    font-size: 12px;
    color: #6a7570;
    line-height: 1.4;
}
.ued-perfil-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #064D32;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    opacity: 0;
    transform: scale(.6);
    transition: all .18s ease;
}
.ued-perfil-card.selected .ued-perfil-check { opacity: 1; transform: scale(1); }

/* Toggle ativo (usa .cfg-toggle mas com estado disabled) */
.ued-toggle-ativo { margin: 0; height: 100%; }
.ued-toggle-ativo.disabled { opacity: .55; cursor: not-allowed; }
.ued-toggle-ativo.disabled input { pointer-events: none; }

/* Senha eye */
.ued-senha-wrap { position: relative; }
.ued-senha-wrap input { padding-right: 42px; }
.ued-senha-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #6a7570;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ued-senha-eye:hover { background: #f0f3f1; color: #182a22; }

/* Canal 2FA picker */
.ued-canal-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 6px;
}
.ued-canal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    background: #f9fbfa;
    border: 2px solid #e5eae7;
    border-radius: 10px;
    cursor: pointer;
    transition: all .12s ease;
    margin: 0;
}
.ued-canal-card:hover { border-color: #cadad2; }
.ued-canal-card.selected {
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    border-color: #064D32;
    box-shadow: 0 3px 12px rgba(6,77,50,.1);
}
.ued-canal-card input { position: absolute; opacity: 0; pointer-events: none; }
.ued-canal-ico { font-size: 28px; margin-bottom: 8px; color: #6a7570; }
.ued-canal-card.selected .ued-canal-ico { color: #064D32; }
.ued-canal-nome {
    font-size: 13px;
    font-weight: 700;
    color: #182a22;
    margin-bottom: 2px;
}
.ued-canal-desc {
    font-size: 11px;
    color: #6a7570;
}
.ued-canal-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #064D32;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    opacity: 0;
    transform: scale(.6);
    transition: all .18s ease;
}
.ued-canal-card.selected .ued-canal-check { opacity: 1; transform: scale(1); }

.req { color: #c0392b; font-weight: 800; }
.dash-card-sub { font-size: 13px; color: #6a7570; margin: -4px 0 12px 0; line-height: 1.45; }
.dash-card-sub strong { color: #064D32; }

@media (max-width: 800px) {
    .ued-perfil-picker { grid-template-columns: 1fr; }
    .ued-canal-picker { grid-template-columns: 1fr; }
    .ued-header-card { flex-direction: column; text-align: center; }
    .ued-header-meta { justify-content: center; }
}


/* ============ Configuracoes v3 (msg customizavel + teste por notif) ============ */
.cfg-notif-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 10px;
}
.cfg-notif-card {
    background: #f9fbfa;
    border: 1px solid #e5eae7;
    border-radius: 10px;
    padding: 12px 14px;
    transition: all .12s ease;
}
.cfg-notif-card.on {
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    border-color: #a5d8b7;
}
.cfg-notif-head {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.cfg-notif-ico {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef1ef;
    color: #6a7570;
    font-size: 16px;
}
.cfg-notif-card.on .cfg-notif-ico { background: #064D32; color: #fff; }
.cfg-notif-info { min-width: 0; }
.cfg-notif-lbl {
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    margin-bottom: 2px;
}
.cfg-notif-desc {
    font-size: 12px;
    color: #6a7570;
    line-height: 1.4;
}
.cfg-notif-body {
    padding-top: 10px;
    border-top: 1px dashed #e5eae7;
}
.cfg-notif-msg-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6a7570;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
}
.cfg-msg-tag {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    background: #eef1ef;
    color: #4d5a54;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cfg-msg-tag-custom {
    background: #fef3c7;
    color: #92400e;
}
.cfg-notif-reset {
    background: transparent;
    border: none;
    color: #6a7570;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.cfg-notif-reset:hover { background: #eef1ef; color: #064D32; }

.cfg-notif-msg {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dbe1de;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
    background: #fff;
    color: #182a22;
    min-height: 74px;
}
.cfg-notif-msg:focus {
    outline: none;
    border-color: #064D32;
    box-shadow: 0 0 0 3px rgba(6,77,50,.1);
}

.cfg-notif-teste {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.cfg-btn-teste {
    padding: 6px 12px !important;
    font-size: 12px !important;
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
}
.cfg-btn-teste:hover {
    background: #1eba57 !important;
    border-color: #1eba57 !important;
}
.cfg-notif-teste small {
    flex: 1;
    min-width: 200px;
    font-size: 11px;
    color: #6a7570;
}


/* Aviso de variaveis */
.cfg-vars-aviso {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    border: 1px solid #fde68a;
    border-left: 4px solid #d97706;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #78350f;
}
.cfg-vars-aviso-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #78350f;
    margin-bottom: 6px;
}
.cfg-vars-aviso-head i { color: #d97706; font-size: 15px; }
.cfg-vars-aviso p { margin: 4px 0; line-height: 1.5; }
.cfg-vars-aviso strong { color: #182a22; }
.cfg-vars-aviso code {
    background: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #92400e;
    border: 1px solid #fde68a;
    font-weight: 600;
}
.cfg-vars-list {
    margin: 8px 0;
    padding-left: 20px;
    font-size: 12px;
}
.cfg-vars-list li { padding: 2px 0; }
.cfg-vars-list code { font-family: 'SFMono-Regular', Consolas, monospace; }

/* Toolbar acima dos cards */
.cfg-notif-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.cfg-notif-toolbar .trein-btn { padding: 6px 12px !important; font-size: 12px !important; }
.cfg-btn-teste-todos {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
    margin-left: auto;
}
.cfg-btn-teste-todos:hover:not(:disabled) {
    background: #1eba57 !important;
    border-color: #1eba57 !important;
}
.cfg-btn-teste-todos:disabled { opacity: .7; cursor: wait; }

/* Details card colapsavel */
details.cfg-notif-card { padding: 0; }
details.cfg-notif-card > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 40px 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    margin: 0;
}
details.cfg-notif-card > summary::-webkit-details-marker { display: none; }
details.cfg-notif-card > summary::marker { display: none; }
details.cfg-notif-card > summary:hover { background: rgba(6,77,50,.04); }
details.cfg-notif-card[open] > summary { border-radius: 10px 10px 0 0; }
.cfg-notif-status {
    display: inline-flex;
    align-items: center;
}
.cfg-notif-chevron {
    font-size: 12px;
    color: #6a7570;
    transition: transform .18s ease;
    margin-left: 4px;
}
details.cfg-notif-card[open] .cfg-notif-chevron { transform: rotate(180deg); color: #064D32; }
details.cfg-notif-card > .cfg-notif-body {
    padding: 12px 14px 14px 14px;
    border-top: 1px dashed #e5eae7;
}

/* Chips de variaveis */
.cfg-vars-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-bottom: 8px;
}
.cfg-vars-chips-lbl {
    font-size: 11px;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    margin-right: 4px;
}
.cfg-var-chip {
    background: #f0f7f3;
    border: 1px solid #cadad2;
    color: #064D32;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .12s ease;
}
.cfg-var-chip:hover {
    background: #064D32;
    color: #fff;
    border-color: #064D32;
    transform: translateY(-1px);
}


/* ============ Card Acesso ao painel + badges listagem ============ */
.acesso-card { padding: 16px 20px; }
.acesso-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px 20px;
    padding: 12px 0;
    border-top: 1px dashed #eef1ef;
    border-bottom: 1px dashed #eef1ef;
    margin: 8px 0 14px 0;
}
.acesso-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acesso-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6a7570;
    font-weight: 700;
}
.acesso-val {
    font-size: 13px;
    color: #182a22;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acesso-val i { margin-right: 4px; }

.acesso-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.acesso-btn-wpp {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
}
.acesso-btn-wpp:hover:not(:disabled) {
    background: #1eba57 !important;
    border-color: #1eba57 !important;
}
.acesso-btn-wpp:disabled {
    background: #eef1ef !important;
    border-color: #eef1ef !important;
    color: #8a938e !important;
    cursor: not-allowed;
}

.acesso-hint {
    font-size: 12px;
    color: #6a7570;
    margin: 14px 0 0 0;
    padding: 10px 12px;
    background: #f4f7f5;
    border-radius: 8px;
    line-height: 1.5;
}
.acesso-hint i { color: #064D32; margin-right: 6px; }

/* Badge de acesso na listagem */
.emp-acesso {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 4px;
    margin-top: 4px;
}
.emp-acesso i { font-size: 9px; }
.emp-acesso-off { background: #fce4e1; color: #a02c20; }
.emp-acesso-nunca { background: #fef3c7; color: #92400e; }


/* ============ Modulo empresa v2 ============ */
.colab-cargo {
    font-size: 12px;
    color: #6a7570;
    padding: 4px 10px;
    background: #f4f7f5;
    border-radius: 6px;
    margin: 4px 0;
    display: inline-block;
    align-self: flex-start;
}

/* Card treinamentos disponiveis */
.empresa-vagas-box {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f9fbfa;
    border: 1px solid #eef1ef;
    border-radius: 8px;
}
.empresa-vagas-nums {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    color: #4d5a54;
    margin-bottom: 5px;
}
.empresa-vagas-restam strong { color: #064D32; font-size: 15px; font-weight: 800; }
.empresa-vagas-total { color: #8a938e; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 11px; }

/* Certificado vencendo */
.cert-vencendo {
    font-size: 10px;
    font-weight: 700;
    color: #a02c20;
    background: #fce4e1;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
    display: inline-block;
}
.cert-vencendo i { font-size: 9px; }

/* Matricular - picker colaborador */
.picker-colab-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.picker-colab-card {
    background: #fff;
    border: 2px solid #eef1ef;
    border-radius: 10px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all .12s ease;
    font-family: inherit;
    text-align: left;
    position: relative;
}
.picker-colab-card:hover {
    border-color: #cadad2;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6,77,50,.05);
}
.picker-colab-card.selected {
    border-color: #064D32;
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    box-shadow: 0 4px 14px rgba(6,77,50,.12);
}
.picker-colab-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #064D32, #0a7048);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.picker-colab-info { min-width: 0; }
.picker-colab-nome {
    font-size: 13px;
    font-weight: 700;
    color: #182a22;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.picker-colab-cpf {
    font-size: 11px;
    color: #6a7570;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.picker-colab-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #064D32;
    color: #fff;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.6);
    transition: all .15s ease;
    flex-shrink: 0;
}
.picker-colab-card.selected .picker-colab-check { opacity: 1; transform: scale(1); }

/* Picker treinamento com checkbox (multiplos) */
.picker-trein-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    margin: 0;
}
.picker-trein-card input[type=checkbox] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.picker-trein-card.disabled {
    opacity: .5;
    cursor: not-allowed;
}
.picker-trein-card.disabled:hover { transform: none; box-shadow: none; }
.picker-card-sem-vaga {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(192, 57, 43, .9);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    padding: 6px 16px;
    border-radius: 6px;
    letter-spacing: .08em;
}

/* Barra de submit matricula */
.matr-submit-bar {
    margin-top: 16px;
    padding: 14px 18px;
    background: linear-gradient(90deg, #064D32, #0a7048);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: #fff;
    box-shadow: 0 4px 20px rgba(6,77,50,.25);
    position: sticky;
    bottom: 12px;
    z-index: 10;
}
.matr-submit-info { flex: 1; min-width: 200px; }
.matr-submit-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.7);
    font-weight: 700;
}
.matr-submit-preview {
    font-size: 13px;
    color: #fff;
    margin-top: 3px;
    line-height: 1.35;
}

/* Modelo CSV pre */
.cfg-modelo-pre {
    background: #182a22;
    color: #a5d8b7;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    font-family: 'SFMono-Regular', Consolas, monospace;
    margin: 0;
}


/* Card colaborador v3 */
.colab-card .usr-actions {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
}
.colab-card .usr-actions form { display: inline-flex; }
.colab-actions .usr-btn { padding: 6px 10px !important; font-size: 12px !important; }
.colab-actions .usr-btn i:only-child { margin: 0; }
.colab-btn-wpp {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
}
.colab-btn-wpp:hover:not(:disabled) {
    background: #1eba57 !important;
    border-color: #1eba57 !important;
}
.cfg-toggle.disabled { opacity: .55; cursor: not-allowed; }
.cfg-toggle.disabled input { pointer-events: none; }


/* ============ Impersonation admin -> empresa ============ */

/* Banner no topo da sidebar (dentro da area empresa) */
.trein-impersona-banner {
    margin: 8px 12px 12px 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f5a623, #d97706);
    border-radius: 10px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(217, 119, 6, .3);
    animation: impPulse 2.4s ease-in-out infinite;
}
@keyframes impPulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(217, 119, 6, .3); }
    50% { box-shadow: 0 4px 20px rgba(217, 119, 6, .55); }
}
.trein-impersona-body { display: flex; flex-direction: column; gap: 4px; }
.trein-impersona-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.trein-impersona-tag i { font-size: 11px; }
.trein-impersona-txt {
    font-size: 11px;
    color: rgba(255,255,255,.92);
    line-height: 1.35;
}
.trein-impersona-txt strong { color: #fff; }
.trein-impersona-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    color: #b8620d;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: all .12s ease;
}
.trein-impersona-btn:hover {
    background: #fef9c3;
    color: #78350f;
    transform: translateY(-1px);
}

/* Botao Entrar como esta empresa no card de acesso */
.acesso-btn-impersona {
    background: #f5a623 !important;
    border-color: #f5a623 !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.acesso-btn-impersona:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
    color: #fff !important;
}


/* Cards em par pra empty state (colab + treinamento) */
.empty-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.empty-card {
    background: #fff;
    border: 1px solid #eef1ef;
    border-radius: 12px;
    padding: 22px 22px 18px 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    transition: all .15s ease;
}
.empty-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.empty-card-primary { border-left: 4px solid #064D32; }
.empty-card-warn { border-left: 4px solid #f5a623; }
.empty-card-ico {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #f0f7f3;
    color: #064D32;
}
.empty-card-warn .empty-card-ico { background: #fef3c7; color: #b8620d; }
.empty-card-ico.empty-ok { background: #e0f2e6; color: #067a3f; }

.empty-card h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #182a22;
}
.empty-card p {
    font-size: 13px;
    color: #4d5a54;
    line-height: 1.5;
    margin: 0;
}
.empty-card p strong { color: #182a22; }

.empty-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.empty-card-actions .trein-btn { padding: 8px 14px; font-size: 13px; font-weight: 600; }
.empty-card-hint {
    font-size: 11px;
    color: #6a7570;
    line-height: 1.5;
    margin-top: 4px;
}

.empty-btn-wpp {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.empty-btn-wpp:hover {
    background: #1eba57 !important;
    border-color: #1eba57 !important;
    color: #fff !important;
}

.empty-hint-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    background: #f4f7f5;
    border: 1px solid #dbe1de;
    border-radius: 10px;
    font-size: 13px;
    color: #4d5a54;
    line-height: 1.5;
}
.empty-hint-card i {
    font-size: 18px;
    color: #064D32;
    margin-top: 1px;
    flex-shrink: 0;
}
.empty-hint-card strong { color: #182a22; }

@media (max-width: 800px) {
    .empty-pair { grid-template-columns: 1fr; }
}


/* Caixa do ID SESMO autogera / personalizar */
.sesmo-box {
    background: #f4faf6;
    border: 1px dashed #a5d8b7;
    border-radius: 10px;
    padding: 10px 12px;
    min-height: 90px;
    display: flex;
    align-items: center;
}
.sesmo-box[data-modo="manual"] {
    background: #fefce8;
    border-color: #fde68a;
    border-style: solid;
}
.sesmo-box .sesmo-auto, .sesmo-box .sesmo-manual {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sesmo-auto-num {
    font-size: 22px;
    font-weight: 800;
    color: #064D32;
    font-family: 'SFMono-Regular', Consolas, monospace;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sesmo-auto-num i { font-size: 14px; color: #067a3f; }
.sesmo-auto-lbl {
    font-size: 11px;
    color: #4d5a54;
    line-height: 1.35;
}
.sesmo-toggle {
    align-self: flex-start;
    margin-top: 4px;
    background: transparent;
    border: none;
    color: #064D32;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sesmo-toggle:hover { background: rgba(6,77,50,.08); }
.sesmo-toggle-back { color: #92400e; }
.sesmo-toggle-back:hover { background: rgba(217,119,6,.1); }

/* Picker de plano */
.plano-picker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.plano-card {
    position: relative;
    background: #fff;
    border: 2px solid #e5eae7;
    border-radius: 10px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    cursor: pointer;
    transition: all .12s ease;
    margin: 0;
}
.plano-card:hover { border-color: #cadad2; transform: translateY(-1px); }
.plano-card input { position: absolute; opacity: 0; pointer-events: none; }
.plano-card.selected {
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    border-color: #064D32;
    box-shadow: 0 4px 14px rgba(6,77,50,.12);
}
.plano-card-ico {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef1ef;
    color: #6a7570;
    font-size: 18px;
}
.plano-card-muted .plano-card-ico { background: #f0f3f1; color: #6a7570; }
.plano-card-info .plano-card-ico { background: #e0eff8; color: #0b6c9c; }
.plano-card-ok .plano-card-ico { background: #e0f2e6; color: #067a3f; }
.plano-card-warn .plano-card-ico { background: #fef3c7; color: #b8620d; }
.plano-card-danger .plano-card-ico { background: #fce4e1; color: #a02c20; }
.plano-card.selected .plano-card-ico { background: #064D32; color: #fff; }

.plano-card-nome {
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.2;
}
.plano-card-preco {
    font-size: 11px;
    color: #6a7570;
    font-weight: 600;
}
.plano-card-check {
    position: absolute;
    top: 8px; right: 8px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #064D32;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    opacity: 0;
    transform: scale(.6);
    transition: all .15s ease;
}
.plano-card.selected .plano-card-check { opacity: 1; transform: scale(1); }

/* Feedback do plano selecionado */
.plano-feedback {
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    border: 1px solid #a5d8b7;
    border-left: 4px solid #064D32;
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 4px;
}
.plano-feedback-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.plano-feedback-head > i {
    font-size: 26px;
    color: #064D32;
    margin-top: 2px;
}
.plano-feedback-titulo {
    font-size: 15px;
    font-weight: 800;
    color: #182a22;
    margin-bottom: 2px;
}
.plano-feedback-preco {
    color: #067a3f;
    font-weight: 700;
}
.plano-feedback-desc {
    font-size: 13px;
    color: #4d5a54;
    line-height: 1.45;
}
.plano-feedback-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 14px;
}
.plano-feedback-lista li {
    font-size: 12px;
    color: #182a22;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.plano-feedback-lista li i {
    color: #067a3f;
    font-size: 11px;
    flex-shrink: 0;
}

@media (max-width: 1000px) {
    .plano-picker { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .plano-picker { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Card plano da empresa (admin/empresas.php?e=X) ============ */
.plano-empresa-card { margin-bottom: 16px; }
.plano-empresa-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}
.plano-empresa-head-left { flex: 1; min-width: 0; }

.plano-atual-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 1fr 1fr;
    gap: 12px;
    padding: 12px;
    background: #f8faf9;
    border: 1px solid #e5eae7;
    border-radius: 10px;
    margin-bottom: 12px;
}
.plano-atual-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff;
    border: 2px solid #e5eae7;
}
.plano-atual-badge .plano-atual-ico {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: #eef1ef;
    color: #6a7570;
    flex-shrink: 0;
}
.plano-atual-muted { background:#fff; }
.plano-atual-muted .plano-atual-ico { background:#f0f3f1; color:#6a7570; }
.plano-atual-info { background: #eff7fb; border-color:#b8dcef; }
.plano-atual-info .plano-atual-ico { background:#d0e5f4; color:#0b6c9c; }
.plano-atual-ok { background:#eef7f0; border-color:#a5d8b7; }
.plano-atual-ok .plano-atual-ico { background:#c8e5d1; color:#067a3f; }
.plano-atual-warn { background:#fffaef; border-color:#f8dc9a; }
.plano-atual-warn .plano-atual-ico { background:#fceec2; color:#b8620d; }
.plano-atual-danger { background:#fdf1ef; border-color:#f2c1b8; }
.plano-atual-danger .plano-atual-ico { background:#f7d5cf; color:#a02c20; }

.plano-atual-nome {
    font-size: 16px;
    font-weight: 800;
    color: #182a22;
    line-height: 1.2;
}
.plano-atual-preco {
    font-size: 12px;
    color: #4d5a54;
    font-weight: 600;
    margin-top: 2px;
}
.plano-atual-item {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #eef1ef;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.plano-atual-lbl {
    font-size: 11px;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}
.plano-atual-val {
    font-size: 15px;
    font-weight: 700;
    color: #182a22;
}

.plano-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.plano-status-ok { background:#e0f2e6; color:#067a3f; }
.plano-status-warn { background:#fef3c7; color:#b8620d; }
.plano-status-danger { background:#fce4e1; color:#a02c20; }
.plano-status-muted { background:#f0f3f1; color:#6a7570; }

.plano-features-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 14px;
    background: #f4faf6;
    border: 1px dashed #a5d8b7;
    border-radius: 8px;
    font-size: 12px;
    color: #182a22;
    margin-bottom: 8px;
}
.plano-features-mini strong { color:#064D32; }
.plano-features-mini span { display:inline-flex; align-items:center; gap:5px; }
.plano-features-mini i { color:#067a3f; font-size: 10px; }

/* Historico */
.plano-hist { margin-top: 8px; }
.plano-hist summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #064D32;
    padding: 8px 12px;
    border-radius: 8px;
    background: #eef7f0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.plano-hist summary::-webkit-details-marker { display: none; }
.plano-hist[open] summary { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.plano-hist-body {
    background: #fff;
    border: 1px solid #eef1ef;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    padding: 4px 0;
}
.plano-hist-item {
    padding: 10px 14px;
    border-bottom: 1px solid #f4f7f5;
    display: grid;
    grid-template-columns: 130px 1fr 140px;
    gap: 8px 14px;
    align-items: center;
    font-size: 13px;
}
.plano-hist-item:last-child { border-bottom: 0; }
.plano-hist-when { color:#6a7570; font-size: 12px; }
.plano-hist-what { color:#182a22; }
.plano-hist-what i { color:#4d5a54; margin: 0 4px; }
.plano-hist-what .text-muted { font-size: 11px; margin-left: 8px; }
.plano-hist-who { color:#6a7570; font-size: 12px; text-align: right; }
.plano-hist-motivo {
    grid-column: 1 / -1;
    color:#4d5a54;
    font-size: 12px;
    background: #f8faf9;
    padding: 6px 10px;
    border-left: 3px solid #a5d8b7;
    border-radius: 4px;
    margin-top: 4px;
}
.plano-hist-motivo i { margin-right: 5px; color: #6a7570; }

/* ============ Modal alterar plano ============ */
.plano-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.plano-modal.open { display: flex; }
.plano-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24, 42, 34, .55);
    backdrop-filter: blur(2px);
}
.plano-modal-panel {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    animation: planoModalIn .2s ease;
}
@keyframes planoModalIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.plano-modal-close {
    position: absolute;
    top: 12px; right: 14px;
    background: transparent;
    border: 0;
    color: #6a7570;
    font-size: 22px;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.plano-modal-close:hover { background: #f0f3f1; color: #182a22; }
.plano-modal-panel h3 {
    margin: 0 0 6px 0;
    font-size: 20px;
    color: #182a22;
    font-weight: 800;
}
.plano-modal-panel h3 i { color: #064D32; margin-right: 6px; }

.plano-venc-shortcuts {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.plano-venc-shortcuts button {
    padding: 4px 10px;
    border: 1px solid #cadad2;
    border-radius: 6px;
    background: #f4faf6;
    color: #064D32;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.plano-venc-shortcuts button:hover { background: #e6f4ec; }
.plano-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eef1ef;
}

@media (max-width: 900px) {
    .plano-atual-grid { grid-template-columns: 1fr; }
    .plano-empresa-head { flex-direction: column; align-items: stretch; }
    .plano-hist-item { grid-template-columns: 1fr; gap: 4px; }
    .plano-hist-who { text-align: left; }
    .plano-modal-panel { padding: 20px 16px; }
}

/* ============ Widget Meu Plano (empresa dashboard) ============ */
.meu-plano-card {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 20px;
    padding: 18px 22px;
    margin-bottom: 18px;
    align-items: center;
}
.meu-plano-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    background: #f4faf6;
    border: 2px solid #cadad2;
}
.meu-plano-muted { background: #f4f7f5; border-color: #dbe1de; }
.meu-plano-info { background:#eff7fb; border-color:#b8dcef; }
.meu-plano-ok { background:#eef7f0; border-color:#a5d8b7; }
.meu-plano-warn { background:#fffaef; border-color:#f8dc9a; }
.meu-plano-danger { background:#fdf1ef; border-color:#f2c1b8; }

.meu-plano-ico {
    width: 56px; height: 56px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: #fff;
    color: #6a7570;
    flex-shrink: 0;
}
.meu-plano-info .meu-plano-ico { color: #0b6c9c; }
.meu-plano-ok .meu-plano-ico { color: #067a3f; }
.meu-plano-warn .meu-plano-ico { color: #b8620d; }
.meu-plano-danger .meu-plano-ico { color: #a02c20; }
.meu-plano-muted .meu-plano-ico { color: #6a7570; }

.meu-plano-tag {
    font-size: 11px;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}
.meu-plano-nome {
    font-size: 22px;
    font-weight: 800;
    color: #182a22;
    line-height: 1.2;
    margin-top: 2px;
}
.meu-plano-preco {
    font-size: 13px;
    color: #4d5a54;
    font-weight: 600;
    margin-top: 2px;
}
.meu-plano-detalhes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    align-items: center;
}
.meu-plano-item { min-width: 0; }
.meu-plano-lbl {
    font-size: 11px;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    margin-bottom: 3px;
}
.meu-plano-val {
    font-size: 15px;
    font-weight: 700;
    color: #182a22;
}
.meu-plano-cta {
    grid-column: 1 / -1;
    padding: 10px 14px;
    background: #f4f7f5;
    border-left: 4px solid #6a7570;
    border-radius: 6px;
    font-size: 13px;
    color: #4d5a54;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}
.meu-plano-cta i { color: #6a7570; font-size: 16px; flex-shrink: 0; }
.meu-plano-cta-warn { background: #fef6dc; border-left-color: #b8620d; color: #92500a; }
.meu-plano-cta-warn i { color: #b8620d; }
.meu-plano-cta-danger { background: #fce8e4; border-left-color: #a02c20; color: #7f1f16; }
.meu-plano-cta-danger i { color: #a02c20; }

@media (max-width: 800px) {
    .meu-plano-card { grid-template-columns: 1fr; padding: 16px; }
    .meu-plano-detalhes { grid-template-columns: 1fr; }
}

/* ============ Pacote automatico de plano ============ */
.pacote-box {
    margin-top: 12px;
    background: #f4faf6;
    border: 1px dashed #a5d8b7;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
}
.pacote-box-none {
    background: #f4f7f5;
    border-color: #dbe1de;
    color: #4d5a54;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 14px;
}
.pacote-box-none i { color: #6a7570; font-size: 14px; }
.pacote-head {
    font-size: 12px;
    font-weight: 800;
    color: #064D32;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pacote-desc {
    color: #4d5a54;
    margin-bottom: 8px;
    font-size: 12px;
}
.pacote-codigos {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.pacote-chip {
    display: inline-block;
    padding: 3px 8px;
    background: #fff;
    color: #064D32;
    border: 1px solid #a5d8b7;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.pacote-chip-all {
    background: #064D32;
    color: #fff;
    border-color: #064D32;
}
.pacote-vagas {
    font-size: 11px;
    color: #6a7570;
    margin-left: 4px;
    font-weight: 600;
}
.pacote-toggle {
    margin-top: 14px;
    padding: 12px 14px;
    background: #fff8ec;
    border: 1px solid #fde4a3;
    border-radius: 8px;
}
.pacote-toggle label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    margin: 0;
    line-height: 1.45;
}
.pacote-toggle input[type=checkbox] {
    margin-top: 3px;
    accent-color: #064D32;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.pacote-toggle span {
    font-size: 12px;
    color: #6b4b0a;
}
.pacote-toggle strong { color: #6b4b0a; }
.pacote-toggle i { color: #b8620d; }

/* ============ Impersonation empresa->colab ============ */
.colab-btn-impersona {
    background: #0b6c9c !important;
    border-color: #0b6c9c !important;
    color: #fff !important;
}
.colab-btn-impersona:hover {
    background: #095c85 !important;
    border-color: #095c85 !important;
    color: #fff !important;
}
.trein-impersona-empcolab {
    background: linear-gradient(135deg, #0b6c9c, #0a5a82) !important;
}
.trein-impersona-empcolab .trein-impersona-tag { color: #cfe6f4 !important; }

/* ============================================================ */
/*  PAINEL COLABORADOR  (dashboard / certificados / assinar)    */
/* ============================================================ */

.col-progress-card {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr auto;
    gap: 18px;
    padding: 14px 22px;
    align-items: center;
    margin-bottom: 18px;
}
.col-progress-info { min-width: 0; }
.col-progress-lbl {
    font-size: 13px;
    font-weight: 800;
    color: #182a22;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.col-progress-desc {
    font-size: 11px;
    color: #6a7570;
    margin-top: 2px;
}
.col-progress-track {
    background: #eef1ef;
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
    min-width: 100px;
}
.col-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #067a3f, #064D32);
    border-radius: 999px;
    transition: width .5s ease;
}
.col-progress-pct {
    font-size: 20px;
    font-weight: 800;
    color: #064D32;
    font-variant-numeric: tabular-nums;
    min-width: 55px;
    text-align: right;
}

.col-section-title {
    font-size: 16px;
    font-weight: 800;
    color: #182a22;
    margin: 18px 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.col-section-title i { color: #064D32; }

.col-empty {
    text-align: center;
    padding: 40px 24px !important;
}
.col-empty-ico {
    font-size: 54px;
    color: #cadad2;
    display: block;
    margin-bottom: 12px;
}
.col-empty h3 {
    font-size: 20px;
    color: #182a22;
    font-weight: 800;
    margin: 0 0 6px 0;
}
.col-empty p {
    font-size: 14px;
    color: #4d5a54;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 14px auto;
}

.col-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.col-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eef1ef;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all .18s ease;
}
.col-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
    border-color: #cadad2;
}
.col-card-info { border-top: 3px solid #0b6c9c; }
.col-card-success { border-top: 3px solid #067a3f; }
.col-card-warn { border-top: 3px solid #b8620d; }
.col-card-danger { border-top: 3px solid #a02c20; }
.col-card-muted { border-top: 3px solid #cadad2; }

.col-card-capa {
    position: relative;
    height: 140px;
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    overflow: hidden;
}
.col-card-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.col-card-capa-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a5d8b7;
    font-size: 48px;
}
.col-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px !important;
    padding: 4px 10px !important;
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,.92) !important;
}
.col-card-body {
    padding: 14px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}
.col-card-codigo {
    font-size: 10px;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.col-card-titulo {
    font-size: 15px;
    font-weight: 700;
    color: #182a22;
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}
.col-card-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #6a7570;
    flex-wrap: wrap;
}
.col-card-meta i { color: #4d5a54; margin-right: 3px; }

.col-card-prog {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}
.col-card-prog-track {
    flex: 1;
    height: 8px;
    background: #eef1ef;
    border-radius: 999px;
    overflow: hidden;
}
.col-card-prog-bar {
    height: 100%;
    background: #cadad2;
    border-radius: 999px;
    transition: width .3s ease;
}
.col-card-prog-info .col-card-prog-bar { background: linear-gradient(90deg, #4a9dc9, #0b6c9c); }
.col-card-prog-success .col-card-prog-bar { background: linear-gradient(90deg, #22a558, #067a3f); }
.col-card-prog-warn .col-card-prog-bar { background: linear-gradient(90deg, #f5b23f, #b8620d); }
.col-card-prog-danger .col-card-prog-bar { background: linear-gradient(90deg, #d9564a, #a02c20); }
.col-card-prog-muted .col-card-prog-bar { background: #cadad2; }
.col-card-prog-pct {
    font-size: 12px;
    font-weight: 700;
    color: #182a22;
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ============ Certificados colaborador ============ */
.col-alert-assinar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #fef6dc, #fef3c7) !important;
    border: 1px solid #fde4a3 !important;
    color: #6b4b0a !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    border-left: 4px solid #b8620d !important;
    margin-bottom: 16px;
}
.col-alert-assinar > i {
    font-size: 22px;
    color: #b8620d;
    flex-shrink: 0;
}
.col-alert-assinar strong { color: #6b4b0a; }

.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.cert-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eef1ef;
    overflow: hidden;
    display: grid;
    grid-template-columns: 90px 1fr;
    transition: all .18s ease;
}
.cert-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.cert-card-selo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #f4faf6, #e6f4ec);
    font-size: 40px;
    color: #067a3f;
    border-right: 1px solid #eef1ef;
}
.cert-card-warn .cert-card-selo { background: linear-gradient(160deg, #fef6dc, #fef3c7); color: #b8620d; }
.cert-card-muted .cert-card-selo { background: #f4f7f5; color: #6a7570; }

.cert-card-body {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cert-card-codigo {
    font-size: 10px;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.cert-card-titulo {
    font-size: 15px;
    font-weight: 800;
    color: #182a22;
    margin: 0;
    line-height: 1.3;
}
.cert-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid #f4f7f5;
    border-bottom: 1px solid #f4f7f5;
}
.cert-card-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.cert-card-meta-item > i {
    color: #6a7570;
    font-size: 12px;
    flex-shrink: 0;
}
.cert-card-meta-lbl {
    font-size: 9px;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}
.cert-card-meta-val {
    font-size: 12px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.2;
}
.cert-card-status { margin: 4px 0; }
.cert-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
}
.cert-card-actions .trein-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    flex: 1;
    justify-content: center;
}
.cert-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f4faf6;
    border: 1px solid #a5d8b7;
    border-left: 4px solid #067a3f;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 18px;
    font-size: 12px;
    color: #4d5a54;
    line-height: 1.5;
}
.cert-hint i { color: #067a3f; font-size: 16px; margin-top: 2px; }
.cert-hint strong { color: #182a22; }

/* ============ Assinar certificado ============ */
.col-breadcrumb {
    font-size: 12px;
    margin-bottom: 6px;
}
.col-breadcrumb a {
    color: #4d5a54;
    text-decoration: none;
}
.col-breadcrumb a:hover { color: #064D32; }

.assinar-wrap {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
    align-items: start;
}
.assinar-info-card {
    padding: 20px !important;
    position: sticky;
    top: 12px;
}
.assinar-info-selo {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #067a3f;
    font-size: 30px;
    margin-bottom: 14px;
}
.assinar-info-card h3 {
    font-size: 16px;
    font-weight: 800;
    color: #182a22;
    margin: 0 0 12px 0;
    line-height: 1.35;
}
.assinar-info-linha {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-top: 1px solid #f4f7f5;
    font-size: 13px;
    gap: 8px;
}
.assinar-info-linha:first-of-type { border-top: 0; }
.assinar-info-linha span { color: #6a7570; }
.assinar-info-linha strong {
    color: #182a22;
    text-align: right;
    word-break: break-word;
    min-width: 0;
}

.assinar-form-card { padding: 24px !important; }
.assinar-legal {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #eff7fb;
    border: 1px solid #b8dcef;
    border-left: 4px solid #0b6c9c;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #182a22;
    line-height: 1.5;
}
.assinar-legal > i {
    color: #0b6c9c;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}
.assinar-legal small { color: #4d5a54; font-size: 12px; }
.assinar-legal a { color: #0b6c9c; }

.assinar-step {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}
.assinar-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #064D32;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 4px;
}
.assinar-step-body { flex: 1; min-width: 0; }
.assinar-step-lbl {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    margin-bottom: 6px;
}
.assinar-input-nome {
    font-size: 15px;
    padding: 10px 12px;
}

.assinar-canvas-wrap {
    position: relative;
    background: #fff;
    border: 2px dashed #cadad2;
    border-radius: 8px;
    height: 220px;
    overflow: hidden;
    margin-bottom: 8px;
}
#pad {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
    touch-action: none;
}
.assinar-canvas-linha {
    position: absolute;
    bottom: 30px;
    left: 20px;
    right: 20px;
    text-align: center;
    font-size: 10px;
    color: #a3b3ac;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    pointer-events: none;
    border-top: 1px dashed #cadad2;
    padding-top: 4px;
}

.assinar-canvas-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.assinar-tip {
    font-size: 11px;
    color: #6a7570;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.assinar-tip i { color: #4d5a54; }

.assinar-aceite {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fff8ec;
    border: 1px solid #fde4a3;
    padding: 12px 14px;
    border-radius: 8px;
    cursor: pointer;
    margin: 0;
    line-height: 1.55;
}
.assinar-aceite input {
    margin-top: 3px;
    accent-color: #064D32;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.assinar-aceite span {
    font-size: 12px;
    color: #6b4b0a;
}
.assinar-aceite strong { color: #182a22; }

.assinar-btn {
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .assinar-wrap { grid-template-columns: 1fr; }
    .assinar-info-card { position: static; }
    .cert-card { grid-template-columns: 1fr; }
    .cert-card-selo {
        border-right: 0;
        border-bottom: 1px solid #eef1ef;
        padding: 14px 0;
    }
    .col-progress-card { grid-template-columns: 1fr; text-align: center; }
    .col-progress-pct { text-align: center; margin-top: 4px; }
    .cert-card-meta { grid-template-columns: 1fr 1fr; }
}

/* Fila de certificados pra assinar (aba Para assinar) */
.assinar-fila {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.assinar-fila-item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #eef1ef;
    border-left: 4px solid #b8620d;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all .15s ease;
}
.assinar-fila-item:hover {
    background: #fffaef;
    border-color: #fde4a3;
    border-left-color: #b8620d;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}
.assinar-fila-selo {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fef6dc, #fef3c7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b8620d;
    font-size: 22px;
    flex-shrink: 0;
}
.assinar-fila-body { min-width: 0; }
.assinar-fila-codigo {
    font-size: 10px;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    font-family: 'SFMono-Regular', Consolas, monospace;
    margin-bottom: 2px;
}
.assinar-fila-titulo {
    font-size: 15px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.3;
    margin-bottom: 4px;
}
.assinar-fila-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #6a7570;
}
.assinar-fila-meta i { color: #4d5a54; margin-right: 3px; }
.assinar-fila-cta .trein-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 700px) {
    .assinar-fila-item {
        grid-template-columns: 44px 1fr;
        gap: 12px;
    }
    .assinar-fila-selo { width: 44px; height: 44px; font-size: 18px; }
    .assinar-fila-cta {
        grid-column: 1 / -1;
        margin-top: 4px;
    }
    .assinar-fila-cta .trein-btn { width: 100%; justify-content: center; }
}

/* ============================================================ */
/*  PROVA COLABORADOR                                           */
/* ============================================================ */

.prova-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.prova-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #eef1ef;
    border-radius: 10px;
    padding: 12px 16px;
}
.prova-info-item > i {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff7fb;
    color: #0b6c9c;
    font-size: 16px;
    flex-shrink: 0;
}
.prova-info-lbl {
    font-size: 11px;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}
.prova-info-val {
    font-size: 18px;
    font-weight: 800;
    color: #182a22;
    line-height: 1;
    margin-top: 2px;
}

.prova-instrucoes {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #eff7fb;
    border: 1px solid #b8dcef;
    border-left: 4px solid #0b6c9c;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    color: #182a22;
    line-height: 1.55;
    margin-bottom: 18px;
}
.prova-instrucoes > i {
    color: #0b6c9c;
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}
.prova-instrucoes strong { color: #182a22; }

.prova-questoes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 90px;
}
.prova-questao {
    background: #fff;
    border: 1px solid #eef1ef;
    border-radius: 12px;
    padding: 20px 22px;
    transition: all .18s ease;
}
.prova-questao.respondida {
    border-color: #a5d8b7;
    background: #fbfefc;
    box-shadow: 0 2px 8px rgba(6,122,63,.05);
}
.prova-questao-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}
.prova-questao-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef1ef;
    color: #4d5a54;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
    transition: all .18s ease;
}
.prova-questao.respondida .prova-questao-num {
    background: #067a3f;
    color: #fff;
}
.prova-questao-enunciado {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.5;
    padding-top: 4px;
}

.prova-questao-alts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 46px;
}
.prova-alt {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: #fff;
    border: 2px solid #eef1ef;
    border-radius: 8px;
    cursor: pointer;
    transition: all .12s ease;
    margin: 0;
    line-height: 1.4;
}
.prova-alt:hover {
    border-color: #cadad2;
    background: #fbfefc;
}
.prova-alt input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.prova-alt-letra {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f4f7f5;
    color: #4d5a54;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    transition: all .12s ease;
    flex-shrink: 0;
}
.prova-alt-texto {
    font-size: 14px;
    color: #182a22;
}
.prova-alt-check {
    color: #067a3f;
    font-size: 16px;
    opacity: 0;
    transform: scale(.5);
    transition: all .15s ease;
}
.prova-alt:has(input[type=radio]:checked) {
    border-color: #067a3f;
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    box-shadow: 0 4px 12px rgba(6,122,63,.1);
}
.prova-alt:has(input[type=radio]:checked) .prova-alt-letra {
    background: #067a3f;
    color: #fff;
}
.prova-alt:has(input[type=radio]:checked) .prova-alt-check {
    opacity: 1;
    transform: scale(1);
}

/* Barra fixa de progresso e acoes no rodape */
.prova-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #eef1ef;
    box-shadow: 0 -6px 20px rgba(0,0,0,.06);
    padding: 12px 24px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    z-index: 100;
}
body.trein-has-sidebar .prova-bar { left: 260px; }
.prova-bar-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #4d5a54;
    min-width: 200px;
}
.prova-bar-info strong { color: #064D32; font-size: 15px; }
.prova-bar-track {
    grid-column: 1;
    grid-row: 2;
    height: 6px;
    background: #eef1ef;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 6px;
}
.prova-bar-info {
    grid-row: 1;
    grid-column: 1;
}
.prova-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #22a558, #067a3f);
    border-radius: 999px;
    transition: width .3s ease;
}
.prova-bar-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    gap: 8px;
    align-items: center;
}
#prova-submit:disabled {
    opacity: .5;
    cursor: not-allowed;
}
#prova-submit.prova-submit-pronto {
    animation: provaSubmitPulse 1.5s ease-in-out;
}
@keyframes provaSubmitPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 122, 63, .5); }
    50% { box-shadow: 0 0 0 10px rgba(6, 122, 63, 0); }
}

@media (max-width: 900px) {
    .prova-info { grid-template-columns: 1fr; }
    .prova-questao-alts { padding-left: 0; }
    .prova-questao { padding: 16px; }
    body.trein-has-sidebar .prova-bar { left: 0; }
    .prova-bar { padding: 10px 16px; grid-template-columns: 1fr; gap: 8px; }
    .prova-bar-actions { grid-column: 1; grid-row: auto; justify-content: space-between; }
    .prova-bar-actions .trein-btn { flex: 1; justify-content: center; }
    .prova-questoes { margin-bottom: 140px; }
}

/* ============ Gabarito impersonation na prova ============ */
.prova-gabarito-alerta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    background: linear-gradient(135deg, #eff7fb, #e0eff8);
    border: 1px solid #b8dcef;
    border-left: 4px solid #0b6c9c;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    color: #182a22;
    line-height: 1.55;
    margin-bottom: 14px;
}
.prova-gabarito-alerta > i {
    color: #0b6c9c;
    font-size: 20px;
}
.prova-gabarito-alerta strong { color: #0a5a82; }
.prova-alt-gabarito {
    border-color: #a5d8b7 !important;
    background: linear-gradient(135deg, #f4faf6, #fbfefc) !important;
}
.prova-alt-gab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #067a3f;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-left: 6px;
}
.prova-alt-gab i { font-size: 10px; }
.prova-questao-head { position: relative; }
.prova-questao-edit {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eff7fb;
    color: #0b6c9c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13px;
    flex-shrink: 0;
    transition: all .15s ease;
    margin-top: 4px;
}
.prova-questao-edit:hover {
    background: #0b6c9c;
    color: #fff;
    transform: scale(1.05);
}

/* ============ CRUD admin de prova (/admin/treinamento_prova.php) ============ */

.q-config-card {
    padding: 20px !important;
    margin-bottom: 14px;
}
.q-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin: 14px 0;
}
.q-config-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #f8faf9;
    border: 1px solid #eef1ef;
    border-radius: 8px;
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
}
.q-config-item:hover { background: #eef7f0; border-color: #a5d8b7; }
.q-config-item input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: #064D32;
    flex-shrink: 0;
}
.q-config-item strong {
    display: block;
    font-size: 13px;
    color: #182a22;
}
.q-config-item small {
    display: block;
    font-size: 11px;
    color: #6a7570;
    margin-top: 2px;
}

/* Lista de questoes */
.q-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.q-item {
    background: #fff;
    border: 1px solid #eef1ef;
    border-radius: 10px;
    padding: 16px 18px;
    transition: all .15s ease;
}
.q-item:hover { box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.q-item-head {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}
.q-item-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef1ef;
    color: #4d5a54;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
}
.q-item-enun {
    font-size: 14px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.4;
}
.q-item-meta {
    display: flex;
    gap: 8px;
}
.q-item-peso {
    font-size: 11px;
    color: #4d5a54;
    padding: 3px 8px;
    background: #eef1ef;
    border-radius: 999px;
    font-weight: 700;
}
.q-item-actions { display: flex; gap: 4px; }
.q-item-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
}
.q-item-del:hover {
    background: #a02c20 !important;
    color: #fff !important;
    border-color: #a02c20 !important;
}

.q-item-alts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 6px;
    padding-left: 44px;
}
.q-item-alt {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    background: #f8faf9;
    border: 1px solid #eef1ef;
    border-radius: 6px;
    font-size: 12px;
}
.q-item-alt-correta {
    background: #eef7f0;
    border-color: #a5d8b7;
    color: #064D32;
}
.q-item-alt-correta i { color: #067a3f; }
.q-item-alt-letra {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eef1ef;
    color: #4d5a54;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.q-item-alt-correta .q-item-alt-letra {
    background: #067a3f;
    color: #fff;
}
.q-item-alt-txt { min-width: 0; }

/* Form de nova/editar questao */
.q-form-card { padding: 24px !important; }
.q-form-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #eef1ef;
}
.q-form-num {
    padding: 6px 14px;
    background: #064D32;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}
.q-form-group {
    margin-bottom: 18px;
}
.q-form-peso-row {
    display: grid;
    grid-template-columns: auto 100px 1fr;
    gap: 12px;
    align-items: center;
}
.q-form-peso-row .form-label { margin: 0; }
.q-form-peso { text-align: center; }
.q-req { color: #a02c20; }

/* Linhas de alternativas do formulario */
.q-alt-row {
    display: grid;
    grid-template-columns: 40px 32px 1fr 36px;
    gap: 8px;
    align-items: center;
    padding: 8px;
    background: #f8faf9;
    border: 1px solid #eef1ef;
    border-radius: 8px;
    margin-bottom: 6px;
}
.q-alt-row:has(input[type=radio]:checked) {
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    border-color: #a5d8b7;
}
.q-alt-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    width: 40px;
    height: 40px;
}
.q-alt-radio input { position: absolute; opacity: 0; pointer-events: none; }
.q-alt-radio span {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid #cadad2;
    background: #fff;
    display: inline-block;
    transition: all .15s ease;
    position: relative;
}
.q-alt-radio input:checked + span {
    background: #067a3f;
    border-color: #067a3f;
}
.q-alt-radio input:checked + span::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.q-alt-radio:hover span { border-color: #067a3f; }
.q-alt-letra {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #eef1ef;
    color: #4d5a54;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}
.q-alt-row:has(input[type=radio]:checked) .q-alt-letra {
    background: #067a3f;
    color: #fff;
}
.q-alt-remove {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid #eef1ef;
    background: #fff;
    color: #a02c20;
    font-size: 13px;
    cursor: pointer;
    transition: all .12s ease;
}
.q-alt-remove:hover {
    background: #a02c20;
    color: #fff;
    border-color: #a02c20;
}
.q-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid #eef1ef;
    margin-top: 8px;
}

@media (max-width: 700px) {
    .q-item-head { grid-template-columns: 32px 1fr; }
    .q-item-meta, .q-item-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .q-item-alts { padding-left: 0; grid-template-columns: 1fr; }
    .q-form-peso-row { grid-template-columns: 1fr; }
    .q-alt-row { grid-template-columns: 32px 24px 1fr 32px; gap: 6px; padding: 6px; }
    .q-alt-radio { width: 32px; height: 32px; }
    .q-alt-radio span { width: 22px; height: 22px; }
    .q-alt-letra { width: 24px; height: 24px; font-size: 11px; }
    .q-alt-remove { width: 32px; height: 32px; }
}

/* ============ FOTO CONCLUSAO COLABORADOR ============ */

.foto-legal {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #eff7fb;
    border: 1px solid #b8dcef;
    border-left: 4px solid #0b6c9c;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    color: #182a22;
    line-height: 1.55;
    margin-bottom: 16px;
}
.foto-legal > i {
    color: #0b6c9c;
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.foto-erro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fce8e4;
    border: 1px solid #f2c1b8;
    border-left: 4px solid #a02c20;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 13px;
    color: #7f1f16;
    line-height: 1.55;
    margin-bottom: 16px;
}
.foto-erro > i {
    color: #a02c20;
    font-size: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}
.foto-erro strong { color: #611810; }
.foto-erro-como {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f2c1b8;
    font-size: 12px;
}
.foto-erro-como ul {
    margin: 6px 0 0 20px;
    padding: 0;
}
.foto-erro-como li { margin: 3px 0; }

.foto-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #eef1ef;
    margin-bottom: 0;
}
.foto-tab {
    padding: 10px 18px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: #6a7570;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: -2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .12s ease;
}
.foto-tab:hover { color: #064D32; background: #f4faf6; }
.foto-tab.active {
    color: #064D32;
    border-bottom-color: #064D32;
    background: #f4faf6;
}

.foto-panel {
    background: #fff;
    border: 1px solid #eef1ef;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    padding: 20px;
}

.foto-viewport {
    position: relative;
    background: #182a22;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    max-width: 640px;
    margin: 0 auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.foto-viewport video { width: 100%; height: 100%; object-fit: cover; display: block; background: #182a22; }
.foto-viewport canvas { width: 100%; height: 100%; object-fit: cover; display: none; }
.foto-viewport-inicial {
    color: #6a7570;
    text-align: center;
    padding: 20px;
    font-size: 14px;
    line-height: 1.6;
}
.foto-viewport-inicial i {
    font-size: 52px;
    color: #4d5a54;
    display: block;
    margin-bottom: 12px;
}
.foto-viewport-inicial strong { color: #cadad2; }

.foto-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.foto-actions .trein-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
}

/* Upload / drop zone */
.foto-drop {
    display: block;
    background: #f8faf9;
    border: 2px dashed #cadad2;
    border-radius: 10px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    max-width: 640px;
    margin: 0 auto 16px auto;
    transition: all .15s ease;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.foto-drop:hover {
    border-color: #067a3f;
    background: #f4faf6;
}
.foto-drop-inicial i {
    font-size: 44px;
    color: #6a7570;
    display: block;
    margin-bottom: 10px;
}
.foto-drop-inicial strong {
    color: #182a22;
    font-size: 15px;
}
.foto-drop-inicial small {
    display: block;
    color: #6a7570;
    font-size: 12px;
    margin-top: 4px;
}
#foto-drop-preview {
    max-width: 100%;
    max-height: 400px;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
    object-fit: contain;
}

/* Sobrescreve/complementa foto CSS anterior */

.foto-check-card { padding: 22px !important; margin-bottom: 14px; }
.foto-check-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.foto-check-item {
    display: grid;
    grid-template-columns: 48px 1fr 32px;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: #f8faf9;
    border: 1px solid #eef1ef;
    border-radius: 10px;
    transition: all .2s ease;
}
.foto-check-ico {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: #eef1ef;
    color: #6a7570;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.foto-check-txt strong {
    display: block;
    font-size: 14px;
    color: #182a22;
}
.foto-check-txt small {
    display: block;
    font-size: 12px;
    color: #6a7570;
    margin-top: 2px;
    line-height: 1.4;
}
.foto-check-status i {
    font-size: 22px;
    display: none;
}
.foto-check-status .foto-check-wait { color: #b8620d; animation: fotoCheckSpin 1.4s linear infinite; }
.foto-check-status .foto-check-ok { color: #067a3f; }
.foto-check-status .foto-check-fail { color: #a02c20; }
.foto-check-item.wait .foto-check-wait { display: inline-block; }
.foto-check-item.ok {
    background: #eef7f0;
    border-color: #a5d8b7;
}
.foto-check-item.ok .foto-check-ico { background: #067a3f; color: #fff; }
.foto-check-item.ok .foto-check-ok { display: inline-block; }
.foto-check-item.fail {
    background: #fce8e4;
    border-color: #f2c1b8;
}
.foto-check-item.fail .foto-check-ico { background: #a02c20; color: #fff; }
.foto-check-item.fail .foto-check-fail { display: inline-block; }
@keyframes fotoCheckSpin { to { transform: rotate(360deg); } }
.foto-check-item { }
.foto-check-item:not(.ok):not(.fail) { }
.foto-check-item:not(.ok):not(.fail) .foto-check-wait { display: inline-block; }

/* Aviso de bloqueio */
.foto-block-alerta {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fce8e4;
    border: 1px solid #f2c1b8;
    border-left: 4px solid #a02c20;
    padding: 14px 16px;
    border-radius: 8px;
    margin-top: 14px;
    font-size: 13px;
    color: #7f1f16;
    line-height: 1.55;
}
.foto-block-alerta > i {
    color: #a02c20;
    font-size: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}
.foto-block-alerta strong { color: #611810; }

/* Sem camera - abrir no celular */
.foto-mobile-alerta {
    margin-top: 14px;
    background: #eff7fb;
    border: 1px solid #b8dcef;
    border-left: 4px solid #0b6c9c;
    padding: 16px 18px;
    border-radius: 10px;
}
.foto-mobile-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}
.foto-mobile-head > i {
    font-size: 36px;
    color: #0b6c9c;
    flex-shrink: 0;
}
.foto-mobile-head strong {
    display: block;
    font-size: 15px;
    color: #0a5a82;
    margin-bottom: 2px;
}
.foto-mobile-head small { color: #4d5a54; font-size: 12px; line-height: 1.4; }
.foto-mobile-link {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.foto-mobile-link input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #b8dcef;
    border-radius: 6px;
    background: #fff;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    color: #182a22;
    min-width: 0;
}
.foto-mobile-qr {
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid #b8dcef;
}
.foto-mobile-qr img {
    display: inline-block;
    max-width: 180px;
    padding: 8px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #b8dcef;
}
.foto-mobile-qr small {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: #6a7570;
}

/* Camera card */
.foto-cam-card { padding: 16px !important; }
.foto-viewport {
    position: relative;
    background: #182a22;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    max-width: 720px;
    margin: 0 auto 14px auto;
}
.foto-viewport video { width: 100%; height: 100%; object-fit: cover; display: block; background: #182a22; }
.foto-viewport canvas { width: 100%; height: 100%; object-fit: cover; display: none; }
.foto-viewport video {
    display: block;
}
.foto-hud {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    pointer-events: none;
}
.foto-hud-badge {
    background: rgba(0,0,0,.65);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(4px);
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.foto-hud-badge i { font-size: 10px; color: #a5d8b7; }

.foto-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.foto-actions .trein-btn {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
}
.foto-btn-env {
    animation: fotoBtnPulse 1.5s ease-in-out infinite;
}
@keyframes fotoBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 122, 63, .5); }
    50% { box-shadow: 0 0 0 12px rgba(6, 122, 63, 0); }
}

/* ============================================================ */
/*  FOTO: QR grande + fluxo mobile 4 passos                     */
/* ============================================================ */
.foto-mobile-alerta {
    background: linear-gradient(135deg, #eff7fb, #d8ecf7);
    border: 1px solid #b8dcef;
    border-left: 4px solid #0b6c9c;
    padding: 20px 22px;
    border-radius: 12px;
    margin-top: 14px;
}
.foto-mobile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #b8dcef;
}
.foto-mobile-head > i {
    font-size: 40px;
    color: #0b6c9c;
    flex-shrink: 0;
}
.foto-mobile-head strong {
    display: block;
    font-size: 17px;
    color: #0a5a82;
    margin-bottom: 3px;
    line-height: 1.2;
}
.foto-mobile-head small {
    color: #4d5a54;
    font-size: 13px;
    line-height: 1.5;
    display: block;
}
.foto-mobile-body {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}
.foto-mobile-qr-big {
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    border: 2px solid #b8dcef;
    text-align: center;
}
.foto-mobile-qr-big img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 228px;
    margin: 0 auto;
}
.foto-mobile-qr-tip {
    margin-top: 10px;
    font-size: 12px;
    color: #0a5a82;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #eff7fb;
    border-radius: 999px;
}
.foto-mobile-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.foto-mobile-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #182a22;
    line-height: 1.4;
}
.foto-mobile-step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #0b6c9c;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}
.foto-mobile-alt {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed #b8dcef;
}
.foto-mobile-alt small {
    display: block;
    color: #4d5a54;
    font-size: 12px;
    margin-bottom: 6px;
}
.foto-mobile-link {
    display: flex;
    gap: 6px;
}
.foto-mobile-link input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #b8dcef;
    border-radius: 6px;
    background: #fff;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 11px;
    color: #182a22;
    min-width: 0;
}
.foto-mobile-link .trein-btn { padding: 8px 14px; font-size: 12px; }

@media (max-width: 700px) {
    .foto-mobile-body { grid-template-columns: 1fr; }
    .foto-mobile-qr-big { max-width: 260px; margin: 0 auto; }
    .foto-mobile-head { flex-direction: column; text-align: center; }
}

.foto-block-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.foto-block-actions .trein-btn { padding: 8px 14px; font-size: 13px; }

/* ============================================================ */
/*  PACOTAO RESPONSIVO GLOBAL                                   */
/* ============================================================ */

/* Base: viewport-aware, touch targets, no horizontal overflow */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
button, .trein-btn, .trein-menu-item, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}
img, video, canvas { max-width: 100%; height: auto; }

/* Sidebar como drawer no mobile (aparecia estranha em alguns cantos) */
@media (max-width: 899px) {
    body.trein-has-sidebar {
        padding-left: 0 !important;
    }
    .trein-sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1000;
        width: 280px !important;
        max-width: 88vw;
    }
    .trein-sidebar.open { transform: translateX(0); }
    .trein-content-wrap { margin-left: 0 !important; padding-left: 0 !important; }
    .trein-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 999;
    }
    .trein-backdrop.open { display: block; }
    .trein-sidebar-close { display: inline-flex !important; }
    .trein-topbar-slim {
        display: flex !important;
        position: sticky;
        top: 0;
        z-index: 100;
        background: #fff;
        border-bottom: 1px solid #eef1ef;
        padding: 10px 14px;
        align-items: center;
        gap: 10px;
    }
    .trein-menu-toggle {
        background: transparent;
        border: 0;
        padding: 8px;
        color: #182a22;
        font-size: 20px;
        border-radius: 6px;
    }
    .trein-topbar-title {
        font-size: 14px;
        font-weight: 700;
        color: #182a22;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .trein-main {
        padding: 14px !important;
    }
}

/* Header/page-header no mobile: quebra em coluna */
@media (max-width: 700px) {
    .trein-page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .trein-page-header h1 {
        font-size: 22px !important;
        line-height: 1.25;
    }
    .trein-page-header .sub {
        font-size: 12px !important;
        line-height: 1.35;
    }
    .trein-page-header .d-flex {
        width: 100%;
        justify-content: flex-start !important;
    }
}

/* KPIs mini: 2 colunas no mobile, 1 no muito pequeno */
@media (max-width: 700px) {
    .dash-kpi-grid, .trein-kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 460px) {
    .dash-kpi-grid, .trein-kpi-row {
        grid-template-columns: 1fr !important;
    }
    .dash-kpi { padding: 12px !important; }
    .dash-kpi-value { font-size: 24px !important; }
}

/* Chips de acao rapida: scroll horizontal em vez de wrap sem controle */
@media (max-width: 700px) {
    .dash-actions-quick {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding-bottom: 6px;
        margin-left: -14px;
        margin-right: -14px;
        padding-left: 14px;
        padding-right: 14px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .dash-actions-quick::-webkit-scrollbar { display: none; }
    .dash-chip { flex-shrink: 0; scroll-snap-align: start; }
}

/* Tabelas: transforma em cards no mobile */
@media (max-width: 700px) {
    .trein-table-wrap { overflow-x: auto; margin: 0 -14px; padding: 0 14px; }
    .trein-table {
        min-width: 560px;
    }
}

/* Modais e cards com muito padding no mobile */
@media (max-width: 700px) {
    .trein-card { padding: 14px !important; }
    .plano-modal-panel { padding: 18px 14px !important; max-height: 95vh; }
    .plano-picker { grid-template-columns: 1fr !important; }
    .plano-atual-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .plano-hist-item { grid-template-columns: 1fr !important; gap: 4px !important; }
}

/* Grids empresa/admin/colab: cards em 1 coluna */
@media (max-width: 700px) {
    .empty-pair, .col-grid, .cert-grid, .emp-info-grid, .acesso-grid, .q-config-grid, .picker-grid {
        grid-template-columns: 1fr !important;
    }
    .emp-info-item, .acesso-item, .plano-atual-item { min-width: 0; }
    .col-card-titulo { min-height: 0 !important; }
}

/* Formularios: campos ficam maiores no mobile pra evitar zoom iOS */
@media (max-width: 700px) {
    input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
    input[type="number"], input[type="date"], input[type="search"], input[type="url"],
    textarea, select {
        font-size: 16px !important;
    }
    .form-control { font-size: 16px !important; }
}

/* Botoes toque acessivel */
@media (max-width: 700px) {
    .trein-btn { min-height: 40px; padding: 10px 14px; font-size: 14px; }
    .trein-btn.trein-btn-block { width: 100%; }
    .trein-menu-item { min-height: 44px; }
}

/* Wizards: header steps mais compacto */
@media (max-width: 700px) {
    .wiz-steps { gap: 4px !important; padding: 10px !important; }
    .wiz-step-lbl { display: none; }
    .wiz-step-num { width: 30px !important; height: 30px !important; font-size: 12px !important; }
}

/* Impersonation banner mobile */
@media (max-width: 700px) {
    .trein-impersona-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    .trein-impersona-btn { text-align: center; justify-content: center; width: 100%; }
}

/* Card acesso: botoes empilham no mobile */
@media (max-width: 700px) {
    .acesso-actions { flex-direction: column; }
    .acesso-actions form, .acesso-actions .trein-btn { width: 100%; }
    .acesso-actions .trein-btn { justify-content: center; }
}

/* Historico de plano: sem grid horizontal apertado */
@media (max-width: 700px) {
    .plano-hist-item { grid-template-columns: 1fr !important; }
    .plano-hist-who { text-align: left !important; }
    .cert-card-actions .trein-btn { flex: 1 1 100%; }
}

/* Barra fixa da prova: adapta pra mobile */
@media (max-width: 700px) {
    .prova-bar {
        padding: 10px 14px !important;
        grid-template-columns: 1fr !important;
    }
    .prova-bar-actions { grid-column: 1 !important; grid-row: 3 !important; }
    .prova-bar-actions .trein-btn { flex: 1; justify-content: center; }
    .prova-questao-alts { padding-left: 0 !important; }
    .prova-questao-head { flex-wrap: wrap; }
}

/* Ass canvas em telas pequenas */
@media (max-width: 700px) {
    .assinar-canvas-wrap { height: 180px; }
    .assinar-step { gap: 10px; }
    .assinar-step-num { width: 26px; height: 26px; font-size: 11px; }
}

/* Chat NOVA nao pode sobrepor barra fixa */
@media (max-width: 700px) {
    #nova-fab, .nova-fab { bottom: 76px !important; }
}

/* Ordena fluxos de foto em coluna no mobile */
@media (max-width: 700px) {
    .foto-check-item { grid-template-columns: 40px 1fr 24px !important; padding: 10px !important; }
    .foto-check-ico { width: 40px !important; height: 40px !important; font-size: 16px !important; }
    .foto-check-status i { font-size: 18px !important; }
    .foto-viewport { border-radius: 8px; }
    .foto-hud-badge { font-size: 10px; padding: 3px 8px; }
    .foto-actions .trein-btn { flex: 1 1 45%; justify-content: center; }
}

/* Table admin: converte pra cards */
@media (max-width: 700px) {
    .admin-table, .empresas-table, .colabs-table {
        border: 0;
    }
    .admin-table thead { display: none; }
    .admin-table tr {
        display: block;
        margin-bottom: 12px;
        background: #fff;
        border: 1px solid #eef1ef;
        border-radius: 8px;
        padding: 10px;
    }
    .admin-table td {
        display: block;
        padding: 4px 0;
        border: 0;
        font-size: 13px;
    }
    .admin-table td::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        color: #6a7570;
    }
}

/* Layouts flex genericos que precisam quebrar */
@media (max-width: 700px) {
    .d-flex.gap-2.flex-wrap { flex-wrap: wrap !important; }
    .d-flex.justify-content-between:not(.no-mobile-stack) { flex-direction: column; gap: 10px; align-items: stretch !important; }
    .d-flex.justify-content-between .trein-btn { width: 100%; justify-content: center; }
}

/* Container principal sem overflow */
.trein-main { max-width: 100%; overflow-x: hidden; }
.trein-content-wrap { max-width: 100%; }

/* ============================================================ */
/*  Guia visual "COMO LIBERAR" na foto.php                       */
/* ============================================================ */
.foto-liberar-guia {
    margin-top: 14px;
    background: #fff;
    border: 2px solid #f5a623;
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 8px 24px rgba(245, 166, 35, .1);
}
.foto-liberar-head { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #fde4a3; }
.foto-liberar-titulo {
    font-size: 18px;
    font-weight: 800;
    color: #6b4b0a;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.foto-liberar-titulo i { color: #b8620d; }
.foto-liberar-sub {
    font-size: 13px;
    color: #4d5a54;
    line-height: 1.5;
}

.foto-liberar-opcoes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.foto-liberar-op {
    position: relative;
    background: #f8faf9;
    border: 1px solid #eef1ef;
    border-radius: 12px;
    padding: 18px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.foto-liberar-op-recomendada {
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    border-color: #a5d8b7;
}
.foto-liberar-badge {
    position: absolute;
    top: -12px;
    left: 14px;
    width: 32px;
    height: 32px;
    background: #b8620d;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.foto-liberar-badge-b { background: #0b6c9c; }
.foto-liberar-badge-c { background: #067a3f; }
.foto-liberar-recom-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 10px;
    background: #067a3f;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.foto-liberar-op-titulo {
    font-size: 15px;
    font-weight: 800;
    color: #182a22;
    line-height: 1.3;
    margin-top: 4px;
}
.foto-liberar-op-desc {
    font-size: 12px;
    color: #4d5a54;
    line-height: 1.5;
}

/* Ilustracao do cadeado */
.foto-liberar-illust {
    position: relative;
    padding: 14px 0 4px 0;
}
.foto-illust-barra {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #cadad2;
    border-radius: 999px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 11px;
    color: #4d5a54;
    overflow: hidden;
}
.foto-illust-cadeado {
    background: #ffe4c4;
    color: #b8620d;
    padding: 4px 7px;
    border-radius: 999px;
    animation: fotoCadeadoPiscar 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes fotoCadeadoPiscar {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(184, 98, 13, .5); }
    50% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(184, 98, 13, 0); }
}
.foto-illust-url {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.foto-illust-seta {
    position: absolute;
    top: 40px;
    left: 22px;
    color: #b8620d;
    font-size: 14px;
    text-align: center;
}
.foto-illust-seta i {
    display: block;
    animation: fotoSetaSubir 1.4s ease-in-out infinite;
}
.foto-illust-seta small {
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: #b8620d;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: -2px;
}
@keyframes fotoSetaSubir {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.foto-liberar-passos {
    padding-left: 20px;
    margin: 8px 0 0 0;
    font-size: 12px;
    color: #182a22;
    line-height: 1.55;
}
.foto-liberar-passos li { margin-bottom: 4px; }
.foto-liberar-passos strong { color: #b8620d; }

/* Aba anonima */
.foto-anonima-cmd {
    padding: 10px 12px;
    background: #eff7fb;
    border: 1px solid #b8dcef;
    border-radius: 8px;
    text-align: center;
}
.foto-anonima-tecla {
    font-size: 15px;
    font-weight: 800;
    color: #0a5a82;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.foto-anonima-tecla kbd {
    background: #fff;
    color: #0a5a82;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #0b6c9c;
    box-shadow: 0 2px 0 #0b6c9c;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
}
.foto-anonima-cmd small {
    display: block;
    font-size: 11px;
    color: #4d5a54;
    margin-top: 6px;
}
.foto-anonima-cmd small kbd { padding: 2px 6px; font-size: 10px; box-shadow: 0 1px 0 #0b6c9c; }

.foto-anonima-cole {
    font-size: 11px;
    color: #6a7570;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .04em;
    margin-top: 4px;
}
.foto-anonima-url {
    display: flex;
    gap: 6px;
}
.foto-anonima-url input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #b8dcef;
    border-radius: 6px;
    background: #fff;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    color: #182a22;
    min-width: 0;
}
.foto-anonima-url .trein-btn { padding: 6px 12px; font-size: 12px; }

/* QR na opcao C */
.foto-anonima-qr {
    display: flex;
    justify-content: center;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    border: 2px solid #a5d8b7;
}
.foto-anonima-qr img {
    display: block;
    width: 100%;
    max-width: 160px;
    height: auto;
}
.foto-liberar-op-recomendada small {
    text-align: center;
    display: block;
    color: #067a3f;
    font-weight: 600;
    font-size: 11px;
}

@media (max-width: 900px) {
    .foto-liberar-opcoes { grid-template-columns: 1fr; }
    .foto-liberar-op-recomendada { order: -1; }
}

/* ============================================================ */
/*  CORRECAO OVERFLOW MOBILE - foto.php e afins                 */
/* ============================================================ */

/* Todos os containers principais precisam permitir shrink */
.foto-check-card,
.foto-liberar-guia,
.foto-liberar-op,
.foto-liberar-opcoes,
.foto-anonima-url,
.foto-mobile-alerta,
.foto-mobile-link,
.foto-mobile-body,
.foto-mobile-side {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Inputs de URL nao esticam o container */
#foto-anonima-input, #foto-mobile-url {
    min-width: 0;
    width: 100%;
    text-overflow: ellipsis;
}
.foto-anonima-url, .foto-mobile-link {
    max-width: 100%;
    overflow: hidden;
}

/* Barra de URL ilustrada nao overflow no mobile */
.foto-illust-barra {
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 10px 6px 34px;
    position: relative;
}
.foto-illust-cadeado {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
}
.foto-illust-barra:has(.foto-illust-cadeado) .foto-illust-cadeado {
    animation: fotoCadeadoPiscar 1.4s ease-in-out infinite;
}
.foto-illust-url {
    padding-left: 4px;
}
.foto-illust-seta { left: 8px; top: 44px; }

/* Passos/lista com padding ok no mobile */
.foto-liberar-passos { padding-left: 22px; }
.foto-liberar-passos strong, .foto-liberar-passos li { word-wrap: break-word; overflow-wrap: break-word; }

/* Card grande + interno com padding menor no mobile pra caber */
@media (max-width: 700px) {
    .foto-liberar-guia { padding: 16px 12px !important; }
    .foto-liberar-op { padding: 20px 12px 14px 12px !important; }
    .foto-check-card { padding: 14px !important; }
    .foto-check-item { padding: 10px !important; grid-template-columns: 36px 1fr 24px !important; gap: 10px !important; }
    .foto-check-ico { width: 36px !important; height: 36px !important; font-size: 15px !important; }
    .foto-check-txt strong { font-size: 13px; }
    .foto-check-txt small { font-size: 11px; }

    /* Grid nao tenta ficar em 3 colunas: 1 coluna direto */
    .foto-liberar-opcoes {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    /* Recomendado fica primeiro (celular = solucao mais rapida) */
    .foto-liberar-op-recomendada { order: -1; }

    /* QR menor e centralizado */
    .foto-anonima-qr { padding: 10px !important; }
    .foto-anonima-qr img { max-width: 200px !important; }

    /* Teclas Ctrl+Shift+N nao quebram feio */
    .foto-anonima-tecla { font-size: 13px; flex-wrap: wrap; }
    .foto-anonima-tecla kbd { padding: 3px 8px; font-size: 11px; }
    .foto-anonima-cmd small { font-size: 10px; }

    /* Titulos ajustados */
    .foto-liberar-titulo { font-size: 16px; }
    .foto-liberar-sub { font-size: 12px; }
    .foto-liberar-op-titulo { font-size: 14px; }
    .foto-liberar-op-desc { font-size: 12px; line-height: 1.45; }

    /* Ilustracao barra url: fonte menor pra caber */
    .foto-illust-barra { font-size: 10px; padding: 6px 8px 6px 30px; }
    .foto-illust-cadeado { padding: 3px 5px; }
    .foto-illust-cadeado i { font-size: 10px; }
    .foto-illust-seta { top: 38px; font-size: 12px; }
    .foto-illust-seta small { font-size: 8px; }

    /* Botao Ja liberei fica full width, altura confortavel touch */
    .foto-liberar-op .trein-btn { width: 100%; justify-content: center; padding: 10px 14px; }

    /* Topbar title com ellipsis nao quebra layout */
    .trein-topbar-title {
        max-width: calc(100vw - 100px);
    }
    .trein-user-name {
        max-width: calc(100% - 40px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* NOVA fab menor e mais afastado do rodape / cookies */
    .nv-fab, #nova-fab {
        width: 48px !important;
        height: 48px !important;
        bottom: 100px !important;
        right: 16px !important;
    }
}

/* Muito pequeno (SE / Galaxy A pequeno) */
@media (max-width: 400px) {
    .foto-liberar-titulo { font-size: 15px; gap: 6px; }
    .foto-liberar-titulo i { font-size: 14px; }
    .foto-check-item { padding: 8px !important; grid-template-columns: 32px 1fr 20px !important; }
    .foto-check-ico { width: 32px !important; height: 32px !important; font-size: 13px !important; }
    .foto-anonima-qr img { max-width: 180px !important; }
    .assinar-input-nome { font-size: 14px; }
    .foto-illust-barra { font-size: 9px; }
}

/* Banner cookies LGPD nao sobrepor fab e conteudo */
#lgpd-cookie-banner {
    max-width: 100vw;
    box-sizing: border-box;
}

/* Overflow no input B: garantir que ele ocupe espaco no flex */
.foto-anonima-url {
    overflow: visible !important;
    flex-wrap: nowrap;
    align-items: stretch;
}
.foto-anonima-url input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.foto-anonima-url .trein-btn { flex: 0 0 auto; }

.foto-mobile-link {
    overflow: visible !important;
    flex-wrap: nowrap;
}
.foto-mobile-link input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Topbar title: ellipsis sempre */
.trein-topbar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Op nao pode ter overflow hidden (impede o flex do input) */
.foto-liberar-op {
    overflow: visible !important;
}

/* Guia guarda overflow */
.foto-liberar-guia {
    overflow: hidden;
}

/* Mobile: URL empilha vertical - input em cima, botao embaixo */
@media (max-width: 700px) {
    .foto-anonima-url, .foto-mobile-link {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .foto-anonima-url input, .foto-mobile-link input {
        width: 100% !important;
        flex: none !important;
        display: block;
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
    .foto-anonima-url .trein-btn, .foto-mobile-link .trein-btn {
        width: 100% !important;
        justify-content: center !important;
        flex: none !important;
    }
    .foto-anonima-url .trein-btn::after {
        content: ' Copiar URL';
    }
    .foto-mobile-link .trein-btn::after {
        content: ' Copiar link';
    }
}

/* Bloco "ja liberou?" com botao de reload gigante */
.foto-liberar-ja-liberou {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #eef7f0, #d8ecdb);
    border: 2px solid #a5d8b7;
    border-radius: 10px;
    margin-bottom: 16px;
}
.foto-liberar-ja-liberou-txt {
    flex: 1;
    font-size: 13px;
    color: #064D32;
    line-height: 1.45;
}
.foto-liberar-ja-liberou-txt strong { color: #044226; font-size: 14px; display: block; margin-bottom: 2px; }
.foto-liberar-reload-btn {
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    animation: fotoReloadPulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes fotoReloadPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 122, 63, .5); }
    50% { box-shadow: 0 0 0 12px rgba(6, 122, 63, 0); }
}
@media (max-width: 700px) {
    .foto-liberar-ja-liberou {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    .foto-liberar-reload-btn { width: 100%; justify-content: center; }
}

/* ============ Tela unica: aba anonima ============ */
.anon-card {
    background: linear-gradient(135deg, #f4faf6, #e6f4ec);
    border: 2px solid #a5d8b7;
    padding: 22px !important;
    margin-top: 14px;
}
.anon-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #a5d8b7;
    margin-bottom: 18px;
}
.anon-ico {
    width: 60px; height: 60px;
    border-radius: 14px;
    background: #064D32;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}
.anon-hero h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 800;
    color: #044226;
}
.anon-hero p {
    margin: 0;
    font-size: 13px;
    color: #4d5a54;
    line-height: 1.5;
}

.anon-passos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.anon-passo {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    color: #182a22;
    line-height: 1.45;
}
.anon-passo-num {
    width: 30px; height: 30px;
    background: #067a3f;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}
.anon-passo kbd {
    background: #fff;
    color: #044226;
    padding: 3px 9px;
    border-radius: 5px;
    border: 1px solid #067a3f;
    box-shadow: 0 2px 0 #067a3f;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    margin: 0 2px;
}
.anon-passo .anon-plus {
    font-weight: 800;
    color: #067a3f;
    margin: 0 2px;
}
.anon-passo small { color: #4d5a54; font-size: 12px; display: inline-block; margin-top: 2px; }
.anon-passo small kbd { font-size: 10px; padding: 1px 6px; box-shadow: 0 1px 0 #067a3f; }

.anon-url-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background: #fff;
    border: 2px solid #a5d8b7;
    border-radius: 10px;
}
.anon-url-row input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #cadad2;
    border-radius: 6px;
    background: #f8faf9;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    color: #182a22;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.anon-url-row .trein-btn {
    padding: 10px 18px;
    font-weight: 700;
    flex-shrink: 0;
    animation: anonPulse 2s ease-in-out infinite;
}
@keyframes anonPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 122, 63, .4); }
    50% { box-shadow: 0 0 0 10px rgba(6, 122, 63, 0); }
}

@media (max-width: 700px) {
    .anon-hero { flex-direction: column; text-align: center; }
    .anon-url-row { flex-direction: column; }
    .anon-url-row .trein-btn { width: 100%; justify-content: center; }
    .anon-passo { flex-wrap: wrap; }
}

/* ============ Face detector overlay + guia ============ */
.foto-viewport { position: relative; }
.face-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
.face-guia {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    background: rgba(24, 42, 34, .88);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    max-width: 92%;
    text-align: center;
    z-index: 3;
    backdrop-filter: blur(4px);
    border: 2px solid transparent;
    transition: all .2s ease;
}
.face-guia-wait { border-color: #f5a623; color: #fde4a3; }
.face-guia-ok { border-color: #22c55e; background: rgba(6, 122, 63, .92); color: #d4f4dc; }
.face-guia-danger { border-color: #a02c20; background: rgba(160, 44, 32, .92); color: #f7d5cf; }

.face-guia-msg { line-height: 1.35; }
.face-guia-msg::before { content: "\f06a "; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 6px; }
.face-guia-ok .face-guia-msg::before { content: "\f00c "; }
.face-guia-danger .face-guia-msg::before { content: "\f071 "; }

/* HUD face status */
.foto-hud-badge#hud-face {
    transition: all .2s ease;
}
.foto-hud-badge.foto-hud-ok { background: rgba(6, 122, 63, .85); }
.foto-hud-badge.foto-hud-ok i { color: #d4f4dc; }
.foto-hud-badge.foto-hud-warn { background: rgba(184, 98, 13, .85); }
.foto-hud-badge.foto-hud-warn i { color: #fde4a3; }
.foto-hud-badge.foto-hud-danger { background: rgba(160, 44, 32, .85); }
.foto-hud-badge.foto-hud-danger i { color: #f7d5cf; }

/* Botao Tirar foto quando desabilitado */
#btn-cap:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: #6a7570 !important;
    border-color: #6a7570 !important;
}

/* ============ Sem camera -> QR celular (foto.php) ============ */
.semcam-card {
    background: linear-gradient(135deg, #eff7fb, #d8ecf7);
    border: 2px solid #b8dcef;
    padding: 22px !important;
    margin-top: 14px;
}
.semcam-body {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 14px;
}
.semcam-qr-wrap {
    background: #fff;
    padding: 14px;
    border-radius: 12px;
    border: 2px solid #b8dcef;
    text-align: center;
}
.semcam-qr-wrap img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
}
.semcam-qr-tip {
    margin-top: 10px;
    font-size: 12px;
    color: #0a5a82;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #eff7fb;
    border-radius: 999px;
}
.semcam-passos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.semcam-alt {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed #b8dcef;
}
.semcam-alt small { color: #4d5a54; font-size: 12px; }
@media (max-width: 700px) {
    .semcam-body { grid-template-columns: 1fr; }
    .semcam-qr-wrap { max-width: 260px; margin: 0 auto; }
}

/* ============ Signature Pad profissional (assinar.php) ============ */
.sig-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f4f7f5;
    border: 1px solid #cadad2;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    flex-wrap: wrap;
    gap: 10px;
}
.sig-cores {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sig-cor {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: #111;
    cursor: pointer;
    padding: 0;
    transition: all .15s ease;
    position: relative;
}
.sig-cor:hover { transform: scale(1.1); }
.sig-cor.ativa {
    border-color: #064D32;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #064D32;
    transform: scale(1.1);
}
.sig-cor-preta { background: #111; }
.sig-cor-azul { background: #0b5394; }
.sig-cor-vermelha { background: #a02c20; }

.sig-status {
    font-size: 12px;
    font-weight: 700;
    color: #4d5a54;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sig-status i { color: #6a7570; }

.sig-canvas-wrap {
    position: relative;
    background: #fff;
    border: 2px solid #cadad2;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    height: 240px;
    overflow: hidden;
    touch-action: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.03);
}
#sig-pad {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.sig-linha {
    position: absolute;
    left: 30px; right: 30px;
    bottom: 40px;
    height: 1px;
    border-bottom: 1px dashed #cadad2;
    pointer-events: none;
}
.sig-placeholder {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: #cadad2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    text-align: center;
}
.sig-placeholder i {
    font-size: 40px;
    color: #cadad2;
}
.sig-placeholder span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #a3b3ac;
}

.sig-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
}
.sig-actions .trein-btn {
    padding: 8px 14px;
    font-size: 13px;
}
.sig-actions .trein-btn:disabled { opacity: .4; cursor: not-allowed; }
.sig-actions .assinar-tip { margin-left: auto; }

@media (max-width: 700px) {
    .sig-canvas-wrap { height: 200px; }
    .sig-toolbar { padding: 8px 10px; gap: 6px; }
    .sig-cor { width: 26px; height: 26px; }
    .sig-actions .assinar-tip { margin-left: 0; width: 100%; }
}

/* ============ Notificacoes bell + dropdown ============ */
.trein-notif-wrap {
    position: relative;
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.trein-notif-bell {
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.75);
    font-size: 18px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: all .12s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.trein-notif-bell:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.trein-notif-bell::after {
    content: 'Notificacoes';
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.trein-notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #f5a623;
    color: #182a22;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 0 0 2px #064D32;
}

.trein-notif-panel {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 8px;
    right: 8px;
    background: #fff;
    color: #182a22;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    max-height: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
}
.trein-notif-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #f4f7f5;
    border-bottom: 1px solid #eef1ef;
}
.trein-notif-head strong { color: #182a22; font-size: 14px; }
.trein-notif-todas {
    background: transparent;
    border: 0;
    color: #064D32;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.trein-notif-todas:hover { background: #eef7f0; }

.trein-notif-lista {
    overflow-y: auto;
    max-height: 400px;
}
.trein-notif-loading, .trein-notif-vazio {
    padding: 30px 20px;
    text-align: center;
    color: #6a7570;
    font-size: 13px;
}
.trein-notif-vazio i { font-size: 32px; color: #cadad2; margin-bottom: 8px; display: inline-block; }

.trein-notif-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #f4f7f5;
    text-decoration: none;
    color: #182a22;
    transition: background .12s ease;
    align-items: flex-start;
}
.trein-notif-item:hover { background: #f8faf9; color: #182a22; text-decoration: none; }
.trein-notif-item.nao-lida { background: #f4faf6; border-left: 3px solid #067a3f; }
.trein-notif-item.nao-lida:hover { background: #eef7f0; }
.trein-notif-item.lida { opacity: .68; }

.trein-notif-icone {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.trein-notif-item.cor-info .trein-notif-icone { background: #e0eff8; color: #0b6c9c; }
.trein-notif-item.cor-ok .trein-notif-icone { background: #e0f2e6; color: #067a3f; }
.trein-notif-item.cor-warn .trein-notif-icone { background: #fef3c7; color: #b8620d; }
.trein-notif-item.cor-danger .trein-notif-icone { background: #fce4e1; color: #a02c20; }

.trein-notif-body { flex: 1; min-width: 0; }
.trein-notif-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.3;
    margin-bottom: 2px;
}
.trein-notif-msg {
    font-size: 12px;
    color: #4d5a54;
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.trein-notif-ago {
    font-size: 10px;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}

@media (max-width: 700px) {
    .trein-notif-panel {
        position: fixed;
        left: 10px; right: 10px; bottom: 76px;
        max-height: 70vh;
    }
}

/* ================================================== */
/*  PAGINA PUBLICA DE VERIFICACAO DE CERTIFICADO       */
/*  Layout premium, tipo "carteira digital oficial"    */
/* ================================================== */

body.verif-body {
    margin: 0;
    background: linear-gradient(180deg, #f4faf6 0%, #eef1ef 100%);
    color: #182a22;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Header institucional */
.verif-header {
    background: #064D32;
    color: #fff;
    padding: 14px 0;
    box-shadow: 0 2px 12px rgba(6,77,50,.15);
    position: relative;
    overflow: hidden;
}
.verif-header::before {
    content: '';
    position: absolute;
    top: 0; right: -80px;
    width: 300px; height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,.05));
    transform: skewX(-20deg);
    pointer-events: none;
}
.verif-header-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}
.verif-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.verif-brand-mark {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #067a3f, #0f8a5a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.verif-brand-name {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
}
.verif-brand-sub {
    font-size: 11px;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 2px;
}
.verif-brand-site {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    transition: all .15s ease;
}
.verif-brand-site:hover { background: rgba(255,255,255,.15); color: #fff; }

/* Main container */
.verif-main {
    flex: 1;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Cards genericos */
.verif-card {
    background: #fff;
    border: 1px solid #eef1ef;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.verif-card-status-ok {
    border-color: #a5d8b7;
    background: linear-gradient(135deg, #fff, #f4faf6);
    box-shadow: 0 8px 30px rgba(6,122,63,.12);
}
.verif-card-status-warn {
    border-color: #fde4a3;
    background: linear-gradient(135deg, #fff, #fef6dc);
}
.verif-card-status-danger {
    border-color: #f2c1b8;
    background: linear-gradient(135deg, #fff, #fce8e4);
}
.verif-card-invalido {
    text-align: center;
    padding: 40px 30px;
}

/* Hero de status */
.verif-status-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}
.verif-selo {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #fff;
    flex-shrink: 0;
    position: relative;
}
.verif-selo::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 24px;
    border: 2px solid;
    opacity: .3;
}
.verif-selo-ok { background: linear-gradient(135deg, #22c55e, #067a3f); }
.verif-selo-ok::before { border-color: #067a3f; }
.verif-selo-warn { background: linear-gradient(135deg, #f5a623, #b8620d); }
.verif-selo-warn::before { border-color: #b8620d; }
.verif-selo-danger { background: linear-gradient(135deg, #d9564a, #a02c20); }
.verif-selo-danger::before { border-color: #a02c20; }
.verif-selo-muted { background: linear-gradient(135deg, #a3b3ac, #6a7570); }

.verif-card h1 {
    font-size: 24px;
    font-weight: 800;
    color: #182a22;
    margin: 0 0 4px 0;
    line-height: 1.2;
}
.verif-card-invalido h1 { margin-top: 18px; }
.verif-sub {
    font-size: 14px;
    color: #4d5a54;
    line-height: 1.55;
    margin: 0;
}

/* Badge contagem verificacoes */
.verif-badge-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(6,77,50,.15);
    border-radius: 999px;
    font-size: 12px;
    color: #4d5a54;
    backdrop-filter: blur(4px);
}
.verif-badge-count i { color: #064D32; }
.verif-badge-count strong { color: #064D32; font-size: 14px; }

/* Titulo secao */
.verif-secao {
    font-size: 14px;
    font-weight: 800;
    color: #4d5a54;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef1ef;
    display: flex;
    align-items: center;
    gap: 8px;
}
.verif-secao i { color: #064D32; font-size: 16px; }

/* Titular */
.verif-titular {
    display: flex;
    align-items: center;
    gap: 18px;
}
.verif-avatar {
    width: 78px; height: 78px;
    border-radius: 50%;
    background: linear-gradient(135deg, #064D32, #067a3f);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(6,77,50,.2);
}
.verif-avatar img { width: 100%; height: 100%; object-fit: cover; }
.verif-titular-info { min-width: 0; }
.verif-titular-nome {
    font-size: 20px;
    font-weight: 800;
    color: #182a22;
    line-height: 1.25;
    margin-bottom: 4px;
    word-break: break-word;
}
.verif-titular-cpf, .verif-titular-emp {
    font-size: 13px;
    color: #4d5a54;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}
.verif-titular-cpf i, .verif-titular-emp i { color: #6a7570; width: 14px; }

/* Treinamento */
.verif-treino { margin-bottom: 14px; }
.verif-treino-codigo {
    display: inline-block;
    padding: 4px 10px;
    background: #eef7f0;
    color: #064D32;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    font-family: 'SFMono-Regular', Consolas, monospace;
    letter-spacing: .04em;
    margin-bottom: 6px;
}
.verif-treino-nome {
    font-size: 18px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.3;
}
.verif-treino-cat {
    font-size: 12px;
    color: #6a7570;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.verif-dados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.verif-dado {
    padding: 10px 12px;
    background: #f8faf9;
    border-radius: 8px;
    border-left: 3px solid #064D32;
}
.verif-dado-lbl {
    font-size: 10px;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    margin-bottom: 3px;
}
.verif-dado-val {
    font-size: 15px;
    font-weight: 700;
    color: #182a22;
    line-height: 1.2;
}
.verif-dado small { display: block; font-size: 11px; color: #6a7570; font-weight: 400; margin-top: 2px; }

/* Card assinatura */
.verif-card-selo {
    border-color: #a5d8b7;
    background: linear-gradient(135deg, #fff, #f4faf6);
}
.verif-assinatura {
    background: #fff;
    border: 1px solid #eef1ef;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.verif-ass-linha {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-top: 1px solid #f4f7f5;
    font-size: 13px;
    flex-wrap: wrap;
}
.verif-ass-linha:first-child { border-top: 0; }
.verif-ass-linha span { color: #6a7570; text-transform: uppercase; font-size: 10px; letter-spacing: .05em; font-weight: 700; }
.verif-ass-linha strong { color: #182a22; text-align: right; font-family: inherit; word-break: break-all; min-width: 0; }
.verif-hash {
    font-family: 'SFMono-Regular', Consolas, monospace !important;
    font-size: 11px !important;
    background: #eef7f0;
    padding: 3px 8px;
    border-radius: 4px;
    color: #064D32 !important;
    word-break: break-all;
}
.verif-legal {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: #eff7fb;
    border: 1px solid #b8dcef;
    border-left: 4px solid #0b6c9c;
    border-radius: 8px;
    font-size: 12px;
    color: #182a22;
    line-height: 1.55;
}
.verif-legal i { color: #0b6c9c; font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.verif-legal a { color: #0b6c9c; font-weight: 600; }

/* Timeline */
.verif-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.verif-timeline::before {
    content: '';
    position: absolute;
    left: 15px; top: 8px; bottom: 8px;
    width: 2px;
    background: #cadad2;
}
.verif-timeline li {
    display: flex;
    gap: 14px;
    padding: 8px 0;
    position: relative;
}
.verif-tl-ico {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #064D32;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px #fff;
}
.verif-tl-body { padding-top: 3px; }
.verif-tl-dt {
    font-size: 11px;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}
.verif-tl-txt {
    font-size: 14px;
    color: #182a22;
    margin-top: 2px;
}

/* Card numero + QR */
.verif-card-acoes {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
}
.verif-cert-num-lbl {
    font-size: 11px;
    color: #6a7570;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    margin-bottom: 4px;
}
.verif-cert-num-val {
    font-size: 24px;
    font-weight: 800;
    color: #064D32;
    font-family: 'SFMono-Regular', Consolas, monospace;
    letter-spacing: .04em;
    margin-bottom: 10px;
}
.verif-cert-codigo {
    font-size: 11px;
    color: #6a7570;
    word-break: break-all;
}
.verif-cert-codigo code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    background: #f4f7f5;
    padding: 2px 6px;
    border-radius: 4px;
    color: #4d5a54;
    display: inline-block;
    margin-top: 3px;
}
.verif-qr-share {
    text-align: center;
    background: #fff;
    padding: 12px;
    border: 1px solid #eef1ef;
    border-radius: 10px;
    min-width: 200px;
}
.verif-qr { display: block; margin: 0 auto 8px auto; max-width: 160px; width: 100%; height: auto; }
.verif-share-lbl { font-size: 10px; color: #6a7570; margin-bottom: 6px; }
.verif-share-row {
    display: flex;
    gap: 4px;
}
.verif-share-row input {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #cadad2;
    border-radius: 6px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    min-width: 0;
    background: #f8faf9;
}
.verif-share-row button {
    border: 0;
    background: #064D32;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}
.verif-copy-ok {
    font-size: 11px;
    color: #067a3f;
    font-weight: 700;
    margin-top: 6px;
}

/* Botoes finais */
.verif-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}
.verif-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: all .15s ease;
    border: 2px solid transparent;
}
.verif-btn-primary { background: #064D32; color: #fff; }
.verif-btn-primary:hover { background: #043826; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(6,77,50,.25); }
.verif-btn-secondary { background: #fff; color: #064D32; border-color: #cadad2; }
.verif-btn-secondary:hover { border-color: #064D32; }
.verif-btn-outline { background: transparent; color: #6a7570; border-color: #cadad2; font-size: 13px; padding: 10px 18px; }
.verif-btn-outline:hover { color: #a02c20; border-color: #a02c20; }

/* Formulario de busca */
.verif-form { max-width: 500px; margin: 20px auto 0 auto; text-align: left; }
.verif-form-lbl {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #4d5a54;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.verif-form-row {
    display: flex;
    gap: 6px;
}
.verif-form-row input {
    flex: 1;
    padding: 12px 14px;
    border: 1.5px solid #cadad2;
    border-radius: 10px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 13px;
    min-width: 0;
}
.verif-form-row input:focus {
    outline: 0;
    border-color: #067a3f;
    box-shadow: 0 0 0 3px rgba(6,122,63,.15);
}
.verif-form-row button {
    padding: 12px 20px;
    border: 0;
    border-radius: 10px;
    background: #064D32;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}
.verif-form-row button:hover { background: #043826; }
.verif-form small { display: block; margin-top: 6px; font-size: 11px; color: #6a7570; }

/* Footer institucional */
.verif-footer {
    background: #182a22;
    color: rgba(255,255,255,.75);
    padding: 24px 0 16px 0;
    margin-top: 20px;
}
.verif-footer-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.verif-footer strong { color: #fff; font-size: 15px; }
.verif-footer small { color: rgba(255,255,255,.55); font-size: 11px; }
.verif-footer-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.verif-footer-links a {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: 13px;
}
.verif-footer-links a:hover { color: #fff; }
.verif-footer-legal {
    max-width: 900px;
    margin: 18px auto 0 auto;
    padding: 12px 20px 0 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 11px;
    color: rgba(255,255,255,.55);
    line-height: 1.6;
}
.verif-footer-legal a { color: rgba(255,255,255,.85); }

/* Responsivo */
@media (max-width: 700px) {
    .verif-header-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .verif-main { padding: 18px 14px; gap: 14px; }
    .verif-card { padding: 18px; border-radius: 12px; }
    .verif-card h1 { font-size: 20px; }
    .verif-status-hero { flex-direction: column; text-align: center; gap: 14px; }
    .verif-selo { width: 66px; height: 66px; font-size: 32px; }
    .verif-titular { flex-direction: column; text-align: center; }
    .verif-titular-cpf, .verif-titular-emp { justify-content: center; }
    .verif-avatar { width: 66px; height: 66px; font-size: 22px; }
    .verif-card-acoes { grid-template-columns: 1fr; text-align: center; }
    .verif-cert-num-val { font-size: 20px; }
    .verif-form-row { flex-direction: column; }
    .verif-form-row button { width: 100%; }
    .verif-btns { flex-direction: column; }
    .verif-btn { justify-content: center; width: 100%; }
    .verif-footer-inner { flex-direction: column; align-items: flex-start; }
    .verif-ass-linha { flex-direction: column; gap: 2px; }
    .verif-ass-linha strong { text-align: left; }
}

/* ============ Banner "IA previa" no topo de admin/fotos.php ============ */
.fotos-ia-banner {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: linear-gradient(135deg, #eef7f0, #d8ecdb);
    border: 1px solid #a5d8b7;
    border-left: 4px solid #067a3f;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 8px 0 16px 0;
}
.fotos-ia-ico {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: #064D32;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.fotos-ia-txt strong {
    display: block;
    font-size: 15px;
    color: #044226;
    margin-bottom: 6px;
}
.fotos-ia-sub {
    font-size: 12px;
    color: #4d5a54;
    line-height: 1.75;
}
.fotos-ia-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #a5d8b7;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #064D32;
    margin: 2px 4px 2px 0;
    white-space: nowrap;
}
.fotos-ia-chip i { color: #067a3f; font-size: 10px; }

/* ============ Painel de analise IA dentro de cada foto ============ */
.foto-ia-panel {
    margin-top: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f4faf6, #eef7f0);
    border: 1px solid #a5d8b7;
    border-radius: 8px;
    font-size: 11.5px;
}
.foto-ia-header {
    font-size: 10px;
    color: #064D32;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #a5d8b7;
}
.foto-ia-header i { color: #064D32; }
.foto-ia-linhas {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.foto-ia-linha {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 3px 0;
    color: #4d5a54;
}
.foto-ia-linha > i {
    color: #6a7570;
    font-size: 11px;
    text-align: center;
}
.foto-ia-linha span {
    font-size: 11px;
    color: #4d5a54;
}
.foto-ia-linha strong {
    font-size: 11px;
    color: #182a22;
    font-weight: 700;
    text-align: right;
    word-break: break-all;
}
.foto-ia-linha.foto-ia-ok > i { color: #067a3f; }
.foto-ia-linha.foto-ia-ok strong { color: #067a3f; }
.foto-ia-linha.foto-ia-warn > i { color: #b8620d; }
.foto-ia-linha.foto-ia-warn strong { color: #b8620d; }
.foto-ia-mapa {
    color: #0b6c9c !important;
    font-weight: 700;
    text-decoration: none;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
}
.foto-ia-mapa:hover { text-decoration: underline; }

/* ============ Video-aula obrigatoria (colaborador/curso.php) ============ */
.vidaula-card {
    background: linear-gradient(135deg, #eff7fb, #d8ecf7);
    border: 2px solid #b8dcef;
    padding: 22px !important;
    margin-bottom: 18px;
}
.vidaula-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #b8dcef;
}
.vidaula-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #0b6c9c;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}
.vidaula-titulo {
    font-size: 20px;
    font-weight: 800;
    color: #0a5a82;
    margin: 0 0 4px 0;
    line-height: 1.25;
}
.vidaula-sub {
    font-size: 13px;
    color: #4d5a54;
    margin: 0;
    line-height: 1.5;
}
.vidaula-progress-box {
    background: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    border: 2px solid #0b6c9c;
    text-align: center;
    min-width: 110px;
    flex-shrink: 0;
}
.vidaula-pct {
    font-size: 26px;
    font-weight: 800;
    color: #0b6c9c;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.vidaula-pct-lbl {
    font-size: 10px;
    color: #4d5a54;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px;
    font-weight: 700;
}

.vidaula-player-wrap {
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
    max-width: 100%;
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 500px;
}
.vidaula-player-wrap video,
.vidaula-player-wrap .plyr,
.vidaula-player-wrap .plyr__video-wrapper,
.vidaula-player-wrap .plyr__video-embed,
.vidaula-player-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    display: block;
    position: absolute;
    top: 0; left: 0;
}
/* Plyr embed do YouTube usa padding-bottom pra aspect ratio; forcamos altura direta */
.vidaula-player-wrap .plyr__video-embed { padding-bottom: 0 !important; }
.vidaula-player-wrap .plyr {
    height: 100% !important;
    max-height: none;
}
/* Container geral nao pode estourar viewport */
.vidaula-card { max-width: 100%; overflow: hidden; box-sizing: border-box; }

.vidaula-progress-bar {
    height: 8px;
    background: #cadad2;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 10px;
}
.vidaula-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #067a3f);
    border-radius: 999px;
    transition: width .3s ease;
}

.vidaula-status {
    padding: 10px 14px;
    background: #fff;
    border-radius: 8px;
    border-left: 3px solid #cadad2;
    font-size: 13px;
    color: #4d5a54;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.vidaula-status i { color: #6a7570; }
.vidaula-status-ok { border-left-color: #067a3f; background: #eef7f0; color: #044226; }
.vidaula-status-ok i { color: #067a3f; }
.vidaula-status-info { border-left-color: #0b6c9c; background: #eff7fb; color: #0a5a82; }
.vidaula-status-info i { color: #0b6c9c; }
.vidaula-status-warn { border-left-color: #b8620d; background: #fef6dc; color: #6b4b0a; }
.vidaula-status-warn i { color: #b8620d; }

.vidaula-avisos {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.vidaula-aviso {
    font-size: 11px;
    color: #4d5a54;
    padding: 5px 10px;
    background: rgba(255,255,255,.7);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.4;
}
.vidaula-aviso strong { color: #182a22; }

/* Trava velocidade dos botoes do Plyr (some botao de speed) */
.plyr__menu__container [data-plyr="speed"] { display: none !important; }

@media (max-width: 700px) {
    .vidaula-header { flex-direction: column; align-items: stretch; }
    .vidaula-progress-box { align-self: flex-end; }
    .vidaula-titulo { font-size: 17px; }
}

/* ============ Admin video-aula (adm treinamento_video.php) ============ */
.vid-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}
.vid-item {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 12px;
    background: #f8faf9;
    border: 1px solid #eef1ef;
    border-radius: 10px;
}
.vid-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vid-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #a3b3ac; font-size: 32px;
    background: #182a22;
}
.vid-tipo-badge {
    position: absolute;
    top: 6px; right: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vid-tipo-yt { background: #ff0000; }
.vid-tipo-up { background: #064D32; }
.vid-info { min-width: 0; }
.vid-titulo { font-size: 15px; font-weight: 700; color: #182a22; margin-bottom: 4px; }
.vid-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #6a7570;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.vid-meta i { color: #4d5a54; margin-right: 3px; }
.vid-link {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    color: #0b6c9c;
    word-break: break-all;
    text-decoration: none;
}
.vid-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #eef1ef;
    margin: 14px 0 18px 0;
}
.vid-tab {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #6a7570;
    cursor: pointer;
    margin-bottom: -2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .12s ease;
}
.vid-tab:hover { color: #064D32; background: #f4faf6; }
.vid-tab.active { color: #0b6c9c; border-bottom-color: #0b6c9c; background: #eff7fb; }
.vid-tab i.fa-youtube { color: #ff0000; }

@media (max-width: 700px) {
    .vid-item { grid-template-columns: 1fr; }
    .vid-thumb { max-width: 100%; }
}

/* Debug panel do player */
.vidaula-debug {
    margin-top: 12px;
    background: #182a22;
    color: #a5d8b7;
    border-radius: 8px;
    padding: 0;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    overflow: hidden;
}
.vidaula-debug summary {
    cursor: pointer;
    padding: 8px 14px;
    background: #044226;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    list-style: none;
    user-select: none;
}
.vidaula-debug summary::-webkit-details-marker { display: none; }
.vidaula-debug summary:hover { background: #067a3f; }
.vidaula-debug-body {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
    font-size: 11px;
    line-height: 1.5;
}
.vidaula-debug-body > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(165,216,183,.15);
}
.vidaula-debug-body span { color: #a3b3ac; }
.vidaula-debug-body strong {
    color: #d4f4dc;
    font-weight: 700;
    font-family: 'SFMono-Regular', Consolas, monospace;
    text-align: right;
    word-break: break-all;
    min-width: 0;
}

@media (max-width: 700px) {
    .vidaula-debug-body { grid-template-columns: 1fr; }
}

/* Botao pular video (impersonation) */
.vidaula-pular {
    margin-top: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #eff7fb, #d8ecf7);
    border: 2px dashed #0b6c9c;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.vidaula-pular-txt {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0a5a82;
    font-size: 13px;
    line-height: 1.4;
    flex: 1;
    min-width: 220px;
}
.vidaula-pular-txt i { color: #0b6c9c; font-size: 18px; }
.vidaula-pular-btn {
    background: #0b6c9c !important;
    border-color: #0b6c9c !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    animation: vidaulaPularPulse 1.8s ease-in-out infinite;
}
.vidaula-pular-btn:hover { background: #0a5a82 !important; border-color: #0a5a82 !important; }
@keyframes vidaulaPularPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(11, 108, 156, .5); }
    50% { box-shadow: 0 0 0 10px rgba(11, 108, 156, 0); }
}
@media (max-width: 700px) {
    .vidaula-pular-btn { width: 100%; justify-content: center; }
}

/* ============ FINANCEIRO ADMIN ============ */
.fin-mrr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 18px 22px !important;
    margin-bottom: 16px;
}
.fin-mrr-lbl { font-size: 11px; color: #6a7570; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 4px; }
.fin-mrr-val { font-size: 26px; font-weight: 800; color: #067a3f; font-variant-numeric: tabular-nums; }

.fin-tabs { display: flex; gap: 4px; border-bottom: 2px solid #eef1ef; margin: 8px 0 16px 0; overflow-x: auto; }
.fin-tab {
    padding: 10px 16px; text-decoration: none; color: #6a7570; font-size: 13px; font-weight: 700;
    border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px; transition: all .12s ease;
}
.fin-tab:hover { color: #064D32; background: #f4faf6; }
.fin-tab.active { color: #064D32; border-bottom-color: #064D32; background: #eef7f0; }
.fin-tab-badge { background: #eef1ef; color: #6a7570; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.fin-tab.active .fin-tab-badge { background: #064D32; color: #fff; }
.fin-tab-warn.active { color: #b8620d; border-bottom-color: #b8620d; background: #fef6dc; }
.fin-tab-warn.active .fin-tab-badge { background: #b8620d; }
.fin-tab-danger.active { color: #a02c20; border-bottom-color: #a02c20; background: #fce8e4; }
.fin-tab-danger.active .fin-tab-badge { background: #a02c20; }

.fin-lista { display: flex; flex-direction: column; gap: 12px; }
.fin-item { background: #fff; border: 1px solid #eef1ef; border-left: 4px solid #6a7570; border-radius: 10px; padding: 16px 18px; }
.fin-item-warn { border-left-color: #b8620d; }
.fin-item-ok { border-left-color: #067a3f; }
.fin-item-danger { border-left-color: #a02c20; }
.fin-item-head { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; margin-bottom: 10px; }
.fin-item-nome { font-size: 15px; font-weight: 700; color: #182a22; }
.fin-item-doc { font-size: 12px; color: #6a7570; margin-top: 2px; font-family: 'SFMono-Regular', Consolas, monospace; }
.fin-item-valor-num { font-size: 20px; font-weight: 800; color: #067a3f; font-variant-numeric: tabular-nums; }
.fin-item-plano { font-size: 11px; color: #6a7570; text-align: right; }
.fin-item-status { text-align: right; }
.fin-item-status-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.fin-badge-ok { background: #e0f2e6; color: #067a3f; }
.fin-badge-warn { background: #fef3c7; color: #b8620d; }
.fin-badge-danger { background: #fce4e1; color: #a02c20; }
.fin-badge-muted { background: #eef1ef; color: #6a7570; }
.fin-item-venc { font-size: 11px; color: #6a7570; margin-top: 4px; }
.fin-atraso { color: #a02c20; font-weight: 700; }
.fin-alerta { color: #b8620d; font-weight: 700; }
.fin-item-meta { padding: 8px 12px; background: #f8faf9; border-radius: 6px; font-size: 12px; color: #4d5a54; margin: 8px 0; }
.fin-motivo { display: block; margin-top: 4px; color: #a02c20; }

.fin-comp { background: #f8faf9; border: 1px solid #eef1ef; border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.fin-comp-head { font-size: 12px; color: #4d5a54; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-comp-head i { color: #6a7570; }
.fin-comp-body { display: grid; grid-template-columns: 180px 1fr; gap: 14px; }
.fin-comp-thumb { display: block; background: #fff; border: 1px solid #cadad2; border-radius: 6px; overflow: hidden; text-align: center; padding: 8px; text-decoration: none; color: #4d5a54; }
.fin-comp-thumb img { max-width: 100%; max-height: 140px; display: block; margin: 0 auto; }
.fin-comp-thumb i { font-size: 40px; color: #a02c20; display: block; margin: 12px 0; }
.fin-comp-ia { font-size: 12px; }
.fin-comp-ia div { padding: 3px 0; border-bottom: 1px dashed #eef1ef; display: flex; justify-content: space-between; gap: 10px; }
.fin-comp-ia div:last-child { border-bottom: 0; }
.fin-comp-ia span { color: #6a7570; }
.fin-comp-ia strong { color: #182a22; word-break: break-all; text-align: right; }

.fin-ia-badge { padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.fin-ia-aprovar { background: #e0f2e6; color: #067a3f; }
.fin-ia-pendente { background: #fef3c7; color: #b8620d; }
.fin-ia-rejeitar { background: #fce4e1; color: #a02c20; }

.fin-item-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef1ef; }

/* ============ EMPRESA PAGAMENTO ============ */
.pag-status-card {
    display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: center;
    padding: 22px !important; margin-bottom: 18px;
}
.pag-status-ico {
    width: 80px; height: 80px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 40px; color: #fff;
}
.pag-status-ok { background: linear-gradient(135deg, #f4faf6, #eef7f0); border: 2px solid #a5d8b7; }
.pag-status-ok .pag-status-ico { background: linear-gradient(135deg, #22c55e, #067a3f); }
.pag-status-vencendo { background: linear-gradient(135deg, #fffaef, #fef6dc); border: 2px solid #fde4a3; }
.pag-status-vencendo .pag-status-ico { background: linear-gradient(135deg, #f5a623, #b8620d); }
.pag-status-vencido { background: linear-gradient(135deg, #fdf1ef, #fce8e4); border: 2px solid #f2c1b8; }
.pag-status-vencido .pag-status-ico { background: linear-gradient(135deg, #d9564a, #a02c20); }
.pag-status-bloqueado { background: linear-gradient(135deg, #fdf1ef, #fce8e4); border: 2px solid #a02c20; }
.pag-status-bloqueado .pag-status-ico { background: linear-gradient(135deg, #a02c20, #7f1f16); }
.pag-status-aguardando { background: linear-gradient(135deg, #eff7fb, #d8ecf7); border: 2px solid #b8dcef; }
.pag-status-aguardando .pag-status-ico { background: linear-gradient(135deg, #4a9dc9, #0b6c9c); }
.pag-status-lbl { font-size: 18px; font-weight: 800; color: #182a22; line-height: 1.3; }
.pag-status-dados { font-size: 13px; color: #4d5a54; margin-top: 6px; }

.pag-upload-card { padding: 22px !important; }
.pag-dados-beneficiario {
    background: #f8faf9; border: 1px solid #eef1ef; border-radius: 8px; padding: 12px 16px; margin: 12px 0 16px 0;
}
.pag-dados-linha {
    display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid #eef1ef; font-size: 13px; align-items: center; gap: 8px;
}
.pag-dados-linha:first-child { border-top: 0; }
.pag-dados-linha span { color: #6a7570; font-size: 12px; }
.pag-dados-linha strong { color: #182a22; word-break: break-all; text-align: right; flex: 1; }
.pag-copy-btn { background: #064D32; color: #fff; border: 0; padding: 4px 10px; border-radius: 6px; cursor: pointer; }

.pag-form { margin-top: 14px; }
.pag-drop {
    display: block; padding: 30px 20px; text-align: center; background: #f8faf9; border: 2px dashed #cadad2; border-radius: 10px; cursor: pointer; margin-bottom: 14px;
}
.pag-drop:hover { background: #f4faf6; border-color: #067a3f; }
.pag-drop input { display: none; }
.pag-drop-inicial i { font-size: 40px; color: #6a7570; display: block; margin-bottom: 10px; }
.pag-drop-inicial strong { color: #182a22; font-size: 15px; }
.pag-drop-inicial small { display: block; color: #6a7570; font-size: 12px; margin-top: 4px; }
.pag-drop-preview img { border-radius: 6px; }
.pag-drop-preview #pag-preview-nome { margin-top: 8px; font-size: 12px; color: #4d5a54; font-weight: 600; }

.pag-btn-enviar { padding: 14px !important; font-size: 15px !important; font-weight: 700 !important; }
.pag-aviso {
    display: flex; gap: 12px; align-items: flex-start; background: #eef7f0; border: 1px solid #a5d8b7; border-left: 4px solid #067a3f;
    padding: 12px 14px; border-radius: 8px; margin-top: 14px; font-size: 12px; color: #044226; line-height: 1.5;
}
.pag-aviso i { color: #067a3f; font-size: 18px; margin-top: 2px; flex-shrink: 0; }
.pag-aviso strong { color: #044226; }

.pag-hist { display: flex; flex-direction: column; gap: 8px; }
.pag-hist-item {
    display: grid; grid-template-columns: 90px 140px 160px 1fr; gap: 12px; align-items: center;
    padding: 10px 14px; background: #f8faf9; border-radius: 8px; border-left: 3px solid #6a7570; font-size: 13px;
}
.pag-hist-warn { border-left-color: #b8620d; }
.pag-hist-ok { border-left-color: #067a3f; }
.pag-hist-danger { border-left-color: #a02c20; }
.pag-hist-comp { font-weight: 700; color: #182a22; font-family: 'SFMono-Regular', Consolas, monospace; }
.pag-hist-valor { font-weight: 700; color: #067a3f; font-variant-numeric: tabular-nums; }
.pag-hist-detalhe { font-size: 12px; color: #4d5a54; }

@media (max-width: 700px) {
    .pag-status-card { grid-template-columns: 1fr; text-align: center; }
    .pag-status-ico { justify-self: center; }
    .fin-item-head { grid-template-columns: 1fr; }
    .fin-item-status { text-align: left; }
    .fin-comp-body { grid-template-columns: 1fr; }
    .pag-hist-item { grid-template-columns: 1fr; gap: 4px; }
    .fin-item-actions .trein-btn { flex: 1; justify-content: center; }
}

.pag-banner-alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-weight: 700; }
.pag-banner-alert i { font-size: 18px; }
.pag-banner-alert a { color: inherit; text-decoration: underline; font-weight: 800; }

/* Card de config no admin financeiro */
.fin-config {
    margin-bottom: 16px;
    padding: 0 !important;
    overflow: hidden;
}
.fin-config summary {
    cursor: pointer;
    padding: 14px 18px;
    background: #f4f7f5;
    font-size: 14px;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fin-config summary::-webkit-details-marker { display: none; }
.fin-config summary:hover { background: #eef1ef; }
.fin-config summary i { color: #064D32; }
.fin-config[open] summary { border-bottom: 1px solid #eef1ef; }
.fin-config-form { padding: 18px; }
.fin-config-secao { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #eef1ef; }
.fin-config-secao:last-of-type { border-bottom: 0; }
.fin-config-secao h4 {
    font-size: 13px;
    color: #4d5a54;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fin-config-secao h4 i { color: #064D32; }