/* IN-FOTON - Main Stylesheet */
/* Cores e tipografia do Guia da Identidade Visual IN-Foton.
   Titulos: Sofia Pro Soft Bold (fonte comercial); enquanto nao houver licenca web, cai no Nunito. */


:root {
    --dica-fundo: #1A2332;       /* balão de dica (texto branco); no escuro vira claro com texto escuro */
    --dica-texto: #FFFFFF;
    /* Paleta IN-Foton (manual da marca) */
    --brand-azul: #003150;
    --brand-azul-profundo: #002039;
    --brand-cinza: #EDEDED;
    --primary: #003150;
    --sidebar-bg: #002039;
    --sidebar-accent: #FBBA00; /* barrinha do item ativo no menu lateral */
    --primary-dark: #002039;
    --primary-light: #C7D6E2;
    --primary-lighter: #E5EDF3;
    --danger: #C2063B; /* ODS escuro: 6,2:1 com texto branco (o #E7343F tinha 4,2:1) */
    --danger-light: #FBD9DB;
    --success: #008137;
    --success-light: #D3EFDB;
    --info: #005D95;
    --info-light: #D2E6F2;
    --warning: #F39200;
    /* Caixas de status nas telas do usuário (UI-13): parecer (verde) e pendência (amarelo) */
    --success-texto: #008137;     /* texto verde sobre fundo claro; no escuro vira verde claro */
    --success-fundo: #F4FCEF;
    --success-borda: #B2F2BB;
    --aviso-fundo: #FFFBE6;
    --aviso-borda: #FFE066;
    --aviso-destaque: #F59F00;
    --aviso-texto: #8D6200;
    --aviso-texto-forte: #5C3F00;
    /* Cartão de cada pergunta do formulário */
    --campo-fundo: #F5F6F8;
    --campo-borda: #E5E7EB;
    /* Texto sobre fundo colorido: sempre branco, não muda com o tema (antes era var(--white),
       que no tema escuro virava quase preto). */
    --on-color: #FFFFFF;
    --link: #003150;              /* texto/links na cor da marca; no escuro vira azul claro */
    --borda-campo: #8A9199;       /* borda de campo com 3,3:1 (era #DEE2E6, 1,3:1) */
    --anel-foco: rgba(0, 49, 80, 0.45);
    /* Escala tipográfica (UI-19): use estes tamanhos; nada de rem solto. */
    --fs-xs: 0.75rem;
    --fs-sm: 0.85rem;
    --fs-base: 0.95rem;
    --fs-md: 1.05rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.85rem;
    /* Regras da marca: o amarelo #FBBA00 nunca é texto sobre fundo claro (1,73:1); as cores ODS
       claras (amarelo, laranja, verde-claro, azul-claro) não levam texto branco. */
    --font-title: 'Sofia Pro Soft', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --gray-50: #F8F9FA;
    --gray-100: #F1F3F5;
    --gray-200: #E9ECEF;
    --gray-300: #DEE2E6;
    --gray-400: #CED4DA;
    --gray-500: #6C757D; /* texto secundário: 4,7:1 no branco (era #ADB5BD, 2,1:1) */
    --gray-600: #5C6670; /* texto de apoio: 5,9:1 (era #868E96, 3,3:1) */
    --gray-700: #495057;
    --gray-800: #343A40;
    --gray-900: #1A2332;
    --white: #FFFFFF;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
    --radius: 8px;
    --radius-lg: 12px;
    --sidebar-width: 250px;
    --transition: all 0.2s ease;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--gray-100);
    color: var(--gray-800);
    line-height: 1.6;
    font-size: 14px;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--primary-dark); }

h1, h2, h3, h4, h5 { font-family: var(--font-title); font-weight: 700; }

/* ===== LOGIN ===== */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #002039 0%, #003150 55%, #005D95 100%);
}

.login-container { width: 100%; max-width: 500px; padding: 1rem; }

.login-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}
.login-logo {
    width: 360px;          /* maior para as duas linhas abaixo de "IN-FOTON" ficarem legíveis */
    max-width: 100%;
    height: auto;
    margin-bottom: 0.75rem;
}
.login-header p {
    color: var(--gray-600);
    margin-top: 0.5rem;
}

/* ===== LAYOUT ===== */
.app-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--on-color);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width 0.3s ease;
}

.sidebar-brand {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 70px;
}
.sidebar-logo {
    height: auto;
    flex-shrink: 0;
}
.sidebar-logo-full { width: 156px; }
.sidebar-logo-mini { width: 32px; display: none; }

/* Collapse toggle button */
.sidebar-collapse-btn {
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: var(--gray-500);
    cursor: pointer;
    padding: 0.4rem;
    text-align: center;
    font-size: var(--fs-xs);
    transition: var(--transition);
}
.sidebar-collapse-btn:hover { color: var(--on-color); background: rgba(255,255,255,0.05); }

.sidebar-nav {
    flex: 1;
    padding: 0.75rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.48rem 0.7rem;
    color: var(--gray-400);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: 8px;
    position: relative;
    transition: var(--transition);
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-nav a:hover {
    color: var(--on-color);
    background: rgba(255,255,255,0.06);
}
/* Item ativo: fundo suave destacado + barrinha de acento à esquerda */
.sidebar-nav a.active {
    color: var(--on-color);
    background: rgba(255,255,255,0.10);
    font-weight: 600;
}
.sidebar-nav a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 62%;
    border-radius: 3px;
    background: var(--sidebar-accent);
}
.nav-icon { font-size: var(--fs-base); flex-shrink: 0; }

.sidebar-user {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: var(--gray-500);
    font-size: var(--fs-sm);
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}
.sidebar-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}
.sidebar-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.sidebar-pw-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--gray-500);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: var(--fs-xs);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    align-self: flex-start;
    white-space: nowrap;
}
.sidebar-pw-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-pw-btn svg { flex-shrink: 0; }
.sidebar.collapsed .sidebar-user { padding: 0.75rem 0; align-items: center; }
.sidebar.collapsed .sidebar-user-row { justify-content: center; }
.sidebar.collapsed .sidebar-pw-btn { padding: 4px; border: none; align-self: center; }
.sidebar.collapsed .sidebar-pw-btn .nav-label { display: none; }

/* Password modal (shared by sidebar and home) */
.pw-modal h2 { margin: 0 0 1rem; font-size: var(--fs-lg); color: var(--gray-900); }
.pw-modal label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--gray-700); margin: 0.7rem 0 0.25rem; }
.pw-modal input[type="password"] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--borda-campo);
    border-radius: 6px;
    font-size: var(--fs-base);
    box-sizing: border-box;
    background: var(--white);
    color: var(--gray-800);
}
.pw-modal input[type="password"]:focus { outline: 2px solid var(--link); outline-offset: -1px; }
.pw-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 1.25rem; }
.pw-modal-actions .btn { padding: 0.5rem 1rem; border-radius: 6px; font-size: var(--fs-base); cursor: pointer; border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-700); }
.pw-modal-actions .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-color); }
.pw-modal-actions .btn-primary:disabled { opacity: 0.6; cursor: wait; }
.pw-error { margin-top: 0.75rem; display: none; }
.pw-success-toast {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: #D4EFDF;
    color: #1E8449;
    border-left: 4px solid #2ECC71;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    display: none;
}
.sidebar-logout-btn {
    color: var(--gray-500);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}
.sidebar-logout-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

/* ===== SIDEBAR COLLAPSED ===== */
.sidebar.collapsed {
    width: 60px;
}
.sidebar.collapsed .sidebar-logo-full { display: none; }
.sidebar.collapsed .sidebar-logo-mini { display: block; }
.sidebar.collapsed .sidebar-brand { padding: 1.25rem 0.5rem; }
.sidebar.collapsed .collapse-icon { transform: rotate(180deg); display: inline-block; }
.sidebar.collapsed .sidebar-nav a {
    justify-content: center;
    padding: 0.55rem 0;
    gap: 4px;
}
.sidebar.collapsed .sidebar-nav a .nav-badge { margin-left: 0; }
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .nav-icon { font-size: var(--fs-md); }
.sidebar.collapsed .sidebar-user { padding: 0.75rem 0; justify-content: center; }
.sidebar.collapsed .sidebar-user-name { display: none; }
.sidebar.collapsed .dark-toggle {
    padding: 0.6rem 0;
    gap: 0;
}

.sidebar.collapsed ~ .main-content {
    margin-left: 60px;
}

.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: 2rem;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}

.main-full {
    margin-left: 0;
}

/* Tabelas largas alargam a página (scroll horizontal sempre visível no rodapé da janela),
   mas o topo (breadcrumb, título+botões, filtros, alertas) fica preso à área visível
   via position:sticky, em vez de sumir para a direita. */
.main-content > .breadcrumb,
.main-content > .page-header,
.main-content > .search-filter,
.main-content > .viewport-pin {
    position: sticky;
    left: calc(var(--sidebar-width) + 2rem);
    max-width: calc(100vw - var(--sidebar-width) - 4rem - var(--barra-rolagem, 12px));
}
.sidebar.collapsed ~ .main-content > .breadcrumb,
.sidebar.collapsed ~ .main-content > .page-header,
.sidebar.collapsed ~ .main-content > .search-filter,
.sidebar.collapsed ~ .main-content > .viewport-pin {
    left: calc(60px + 2rem);
    max-width: calc(100vw - 60px - 4rem - var(--barra-rolagem, 12px));
}
.main-full > .breadcrumb,
.main-full > .page-header,
.main-full > .search-filter,
.main-full > .viewport-pin {
    left: 2rem;
    max-width: calc(100vw - 4rem - var(--barra-rolagem, 12px));
}

/* Abas da página Configurações */
.config-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 1.25rem;
}
.config-tab {
    padding: 0.55rem 1.2rem;
    border-radius: 8px 8px 0 0;
    color: var(--gray-500);
    font-weight: 600;
    font-size: var(--fs-base);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.config-tab:hover { color: var(--link); background: var(--gray-100); }
.config-tab.active {
    color: var(--link);
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-bottom: 2px solid var(--white);
}
body.dark-theme .config-tab.active { background: var(--gray-100); border-bottom-color: var(--gray-100); }

/* Banner inline de filtro vindo da Visão Geral (não confundir com .alert, que é toast fixo) */
.visao-filter-note {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--info-light);
    color: #1A5276;
    border-left: 4px solid var(--info);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-weight: 600;
}
body.dark-theme .visao-filter-note {
    background: #1c2b33;
    color: #9ec5f4;
    border-left-color: #3987e5;
}
/* Cabeçalho dentro de card largo (ex.: "Submissões" + botão Excel):
   padding do main (2rem) + padding do card (1.5rem) */
.main-content .card > .card-header-row {
    position: sticky;
    left: calc(var(--sidebar-width) + 3.5rem);
    max-width: calc(100vw - var(--sidebar-width) - 7rem - var(--barra-rolagem, 12px));
}
.sidebar.collapsed ~ .main-content .card > .card-header-row {
    left: calc(60px + 3.5rem);
    max-width: calc(100vw - 60px - 7rem - var(--barra-rolagem, 12px));
}

/* ===== PAGE HEADER ===== */
.page-header {
    display: flex;
    justify-content: flex-end;   /* só os botões da tela (ex.: "+ Novo", "Voltar"), à direita */
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
/* O nome da tela já aparece no caminho (breadcrumb): o título grande fica só para leitor de tela
   e para a estrutura da página (continua sendo o <h1>). */
.page-header h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* Sem botões, o bloco não ocupa espaço. */
.page-header:not(:has(> :not(h1))) { margin-bottom: 0; }

/* ===== CARDS ===== */
.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.card h3 {
    font-size: var(--fs-md);
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--gray-800);
}
.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.card-header-row h3 { margin-bottom: 0; }
/* Botões de cima da lista: dentro do card da lista, à direita, em btn-sm (padrão da tela Respostas). */
.card-header-row.lista-acoes { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.btn-csv {
    background: #217346;
    color: var(--on-color);
    font-weight: 600;
}
.btn-csv:hover {
    background: #1a5c38;
    color: var(--on-color);
}

/* ===== TABLES ===== */
.table-responsive { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
}
.table th,
.table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}
.table th {
    font-weight: 600;
    color: var(--gray-700);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--primary-lighter);
}
.table tbody tr:hover { background: var(--gray-50); }
.table-sm td, .table-sm th { padding: 0.5rem; }
.text-center { text-align: center; }

th.sortable { cursor: pointer; position: relative; padding-right: 1.5rem; }
th.sortable:hover { color: var(--link); }
th.sortable::after {
    content: '\2195';
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-xs);
    color: var(--gray-400);
}
th.sortable.sort-asc::after { content: '\2191'; color: var(--link); }
th.sortable.sort-desc::after { content: '\2193'; color: var(--link); }

.actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
}
.table td { white-space: nowrap; }
.table td.text-wrap { white-space: normal; word-break: break-word; }
.entry-grid-section .table td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
}
.table td .form-inline-row {
    margin-bottom: 0;
}

/* ===== FORMS ===== */
.form-group {
    margin-bottom: 1rem;
}
.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.35rem;
    color: var(--gray-700);
    font-size: var(--fs-base);
}

.form-control {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--gray-300);
    border-radius: 6px;
    font-size: var(--fs-base);
    transition: var(--transition);
    background: var(--white);
    color: var(--gray-800);
}
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--anel-foco);
}
.form-control-sm { padding: 0.4rem 0.5rem; font-size: var(--fs-sm); }

select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; }

.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.form-col { flex: 1; min-width: 200px; }

.form-inline-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal;
    margin-bottom: 0.25rem;
}
.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--link);
}


/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: var(--fs-base);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    line-height: 1.4;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn svg { flex-shrink: 0; }

.btn-primary { background: var(--primary); color: var(--on-color); }
.btn-primary:hover { background: var(--primary-dark); color: var(--on-color); }

.btn-secondary { background: var(--gray-200); color: var(--gray-700); }
.btn-secondary:hover { background: var(--gray-300); color: var(--gray-700); }

.btn-danger { background: var(--danger); color: var(--on-color); }
.btn-danger:hover { background: #9E052F; color: var(--on-color); }
/* Vermelho claro: ação reversível que ainda assim interrompe (ex.: Cancelar envio) */
.btn-danger-soft { background: #FBE3E8; color: #8A1C33; border: 1px solid #F2B8C4; }
.btn-danger-soft:hover { background: #F6CDD6; color: #6E1227; }
body.dark-theme .btn-danger-soft { background: #4A1B27; color: #F5B8C6; border-color: #7A2E40; }
body.dark-theme .btn-danger-soft:hover { background: #5C2232; color: #FBD3DC; }

.btn-info { background: var(--info); color: var(--on-color); }
.btn-info:hover { background: #004A77; color: var(--on-color); }

.btn-success { background: var(--success); color: var(--on-color); }
.btn-success:hover { background: #006B2D; color: var(--on-color); }


.btn-sm { padding: 0.35rem 0.75rem; font-size: var(--fs-sm); }
.btn-lg { padding: 0.85rem 2rem; font-size: var(--fs-md); }
.btn-block { width: 100%; }

/* ===== BADGES ===== */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: var(--fs-xs);
    font-weight: 500;
}
.badge-gestor { background: #EADCF8; color: #5A2580; }
.badge-coordenacao { background: var(--primary-light); color: #002039; }
.badge-user { background: var(--gray-200); color: #495057; }
.badge-active { background: #D3EFDB; color: #00602A; }
.badge-inactive { background: #FBD9DB; color: #8E0A2C; }
/* Status: um conjunto só (lista, home e modais), fundo claro + texto escuro da cor ODS, >= 4,5:1 */
.badge-status-progress  { background: #FFF1DC; color: #7A4300; border: 1px solid #F3C98A; }
.badge-status-ready     { background: #DDF3EA; color: #00603F; border: 1px solid #9ED8BF; }
.badge-status-final     { background: #DDEBF6; color: #00477A; border: 1px solid #A9C8E2; }
.badge-status-pendencia { background: #FFF2C4; color: #6B4A00; border: 1px solid #F0CF6A; }
.badge-status-corrigido { background: #D2E6F2; color: #00426B; border: 1px solid #9CC6E0; }
.badge-status-approved  { background: #D9F0E1; color: #00602A; border: 1px solid #9CD3AE; }
.badge-status-cancelado { background: #ECEEF0; color: #495057; border: 1px solid #C4C9CE; text-decoration: line-through; }

/* Caixas de agrupamento (group box) em formulários — adapta-se ao tema claro/escuro */
.form-box {
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 0.75rem 1.25rem 1rem;
    margin: 0 0 1.25rem;
    min-width: 0;
}
.form-box > legend {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--gray-800);
    padding: 0 0.5rem;
    width: auto;
    margin: 0;
}
.form-box .checkbox-label { margin-bottom: 0; }

/* ===== ALERTS ===== */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: var(--fs-md);
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 1;
    transition: opacity 0.4s ease;
    min-width: 250px;
    text-align: center;
    font-weight: 600;
}
.alert-success { background: var(--success-light); color: #0B5A26; border-left: 4px solid var(--success); }
.alert-error { background: var(--danger-light); color: #7A0E14; border-left: 4px solid var(--danger); }
.alert-info { background: var(--info-light); color: #1A5276; border-left: 4px solid var(--info); }

/* ===== CADASTRO VIEW (USER) ===== */
.cadastro-body {
    background: var(--gray-100);
    min-height: 100vh;
}

.cadastro-topbar {
    background: var(--white);
    border-bottom: 3px solid var(--primary);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}
.cadastro-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.cadastro-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cadastro-topbar-logo { width: 150px; height: auto; }
.cadastro-topbar-center {
    flex: 1;
    text-align: center;
}
.cadastro-topbar-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}
.cadastro-topbar-desc {
    font-size: var(--fs-sm);
    color: var(--gray-500);
    margin-top: 1px;
}
.cadastro-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cadastro-topbar-user {
    font-size: var(--fs-sm);
    color: var(--gray-600);
    font-weight: 500;
}

.cadastro-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
}

/* Sections (fieldsets) */
.cadastro-section {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.5rem 1.5rem 1rem;
    margin-bottom: 1.25rem;
}
.cadastro-section-title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--link);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 0.5rem;
    background: var(--white);
}

.cadastro-subsection {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.25rem 1.25rem 0.5rem;
    margin: 0.5rem 0 1rem;
    background: var(--gray-50, #f8f9fa);
}
.cadastro-subsection-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0 0.4rem;
    background: var(--gray-50, #f8f9fa);
}

/* Fields grid */
.cadastro-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
}
.cadastro-field {
    margin-bottom: 1rem;
}
.cadastro-field-full { width: 100%; }
.cadastro-field-half { width: calc(50% - 0.625rem); }
.cadastro-field {
    background: var(--campo-fundo);
    border: 1px solid var(--campo-borda);
    border-radius: 6px;
    padding: 0.75rem 1rem;
}
.cadastro-field > .cadastro-label,
.cadastro-field > label {
    margin-top: 0;
}

.cadastro-label {
    display: block;
    font-weight: 500;
    font-size: var(--fs-sm);
    color: var(--gray-700);
    margin-bottom: 0.3rem;
}

.cadastro-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin-top: 0.3rem;
}

/* Footer / LGPD */
.cadastro-footer {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-top: 1.25rem;
}
.cadastro-footer-actions {
    margin-top: 1rem;
    text-align: right;
}

.required { color: var(--danger); }


/* LGPD Modal */
.lgpd-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.lgpd-modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 700px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.lgpd-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--gray-200);
}
.lgpd-modal-header h2 {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.4;
}
.lgpd-modal-close {
    background: none;
    border: none;
    font-size: var(--fs-xl);
    color: var(--gray-500);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}
.lgpd-modal-close:hover { color: var(--gray-800); }
.lgpd-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    font-size: var(--fs-base);
    color: var(--gray-700);
    line-height: 1.7;
}
.lgpd-modal-body p {
    margin-bottom: 1rem;
    text-align: justify;
}
.lgpd-modal-body p:last-child { margin-bottom: 0; }
.lgpd-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    text-align: right;
}

.autosave-indicator {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--primary);
    color: var(--on-color);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.autosave-indicator.show { opacity: 1; }

.upload-area {
    border: 2px dashed var(--gray-300);
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    transition: var(--transition);
}
.upload-area:hover { border-color: var(--link); }
.uploaded-file {
    margin-top: 0.5rem;
    font-size: var(--fs-sm);
    color: var(--gray-600);
}

.text-muted { color: var(--gray-500); font-size: var(--fs-sm); }


/* ===== MOBILE TOPBAR ===== */
.mobile-topbar {
    display: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Mobile topbar */
    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 150;
        background: var(--sidebar-bg);
        padding: 0.6rem 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .mobile-topbar-toggle {
        background: none;
        border: 1.5px solid rgba(255,255,255,0.3);
        color: var(--on-color);
        font-size: var(--fs-lg);
        padding: 0.3rem 0.6rem;
        border-radius: 6px;
        cursor: pointer;
        line-height: 1;
    }
    .mobile-topbar-toggle:hover { background: rgba(255,255,255,0.1); }
    .mobile-topbar-logo {
        height: 40px;
        width: auto !important;
    }

    .app-layout {
        flex-direction: column;
    }

    /* Sidebar */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease, width 0.3s ease;
        width: var(--sidebar-width);
        top: 0;
    }
    .sidebar.collapsed { width: var(--sidebar-width); }
    .sidebar.collapsed .sidebar-logo-full { display: block; }
    .sidebar.collapsed .sidebar-logo-mini { display: none; }
    .sidebar.collapsed .nav-label { display: inline; }
    .sidebar.collapsed .sidebar-nav a { justify-content: flex-start; padding: 0.75rem 1.5rem; gap: 0.75rem; border-left: 3px solid transparent; }
    .sidebar.collapsed .sidebar-user { padding: 0.75rem 1.5rem; justify-content: space-between; }
    .sidebar.collapsed .sidebar-user-name { display: inline; }
    .sidebar.collapsed .sidebar-brand { padding: 1.25rem 1.5rem; }
    .sidebar.collapsed .nav-icon { font-size: var(--fs-md); }
    .sidebar-collapse-btn { display: none; }
    .sidebar.open { transform: translateX(0); }

    /* Main content with topbar offset */
    .main-content, .sidebar.collapsed ~ .main-content {
        margin-left: 0;
        padding: 1rem;
        padding-top: calc(1rem + 52px);
    }

    .page-header { align-items: flex-start; }

    /* Sidebar recolhida no mobile: topo preso à largura da tela */
    .main-content > .breadcrumb,
    .main-content > .page-header,
    .main-content > .search-filter,
    .main-content > .viewport-pin,
    .sidebar.collapsed ~ .main-content > .breadcrumb,
    .sidebar.collapsed ~ .main-content > .page-header,
    .sidebar.collapsed ~ .main-content > .search-filter,
    .sidebar.collapsed ~ .main-content > .viewport-pin {
        left: 1rem;
        max-width: calc(100vw - 2rem - var(--barra-rolagem, 12px));
    }
    .main-content .card > .card-header-row,
    .sidebar.collapsed ~ .main-content .card > .card-header-row {
        left: 2.5rem;
        max-width: calc(100vw - 5rem - var(--barra-rolagem, 12px));
    }

    .form-row { flex-direction: column; gap: 0; }
    .form-col { min-width: 100%; }


    .table th, .table td { padding: 0.5rem; font-size: var(--fs-sm); }
    .actions { flex-direction: column; }

    .login-card { padding: 1.5rem; }

    /* Cadastro responsive */
    .cadastro-topbar-inner { padding: 0.75rem 1rem; }
    .cadastro-topbar-desc { display: block; font-size: var(--fs-xs); line-height: 1.35; }
    .cadastro-container { padding: 1rem; }
    .cadastro-field-half { width: 100%; }
    .cadastro-topbar-left { gap: 0.5rem; }
    .cadastro-topbar-title { font-size: var(--fs-md); }
}

@media (max-width: 480px) {
    .cadastro-container { padding: 0.75rem; }
    .cadastro-section { padding: 0.5rem 1rem 0.5rem; }
    .cadastro-subsection { padding: 0.25rem 0.75rem 0.25rem; margin: 0.4rem 0 0.75rem; }
    .btn { padding: 0.5rem 1rem; font-size: var(--fs-sm); }
}

/* ===== BREADCRUMBS ===== */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-sm);
    color: var(--gray-500);
    margin-bottom: 0.75rem;
}
.breadcrumb a { color: var(--gray-500); }
.breadcrumb a:hover { color: var(--link); }
.breadcrumb-sep { color: var(--gray-400); }

/* ===== PROGRESS BAR (User Form) ===== */
.progress-bar-container {
    background: var(--gray-200);
    border-radius: 20px;
    height: 22px;
    overflow: hidden;
    position: relative;
    margin-bottom: 1.25rem;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* ===== FIELD VALIDATION ===== */
.field-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 2px var(--danger-light) !important; }

/* ===== MULTI-LIST FLASH ===== */
@keyframes multiFlash {
    0% { background: var(--success-light); }
    100% { background: var(--gray-50); }
}
.multi-row-flash { animation: multiFlash 0.8s ease; }

.multi-list-empty {
    font-size: var(--fs-sm);
    color: var(--gray-500);
    font-style: italic;
    padding: 6px 0;
}

.multi-list-count {
    font-size: var(--fs-sm);
    color: var(--gray-600);
    margin-top: 4px;
    font-weight: 500;
}

/* ===== NOTIFICATION BADGE ===== */
.nav-badge {
    background: var(--danger);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: auto;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}

/* ===== LOADING STATES ===== */
.btn-loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}
.btn-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btnSpin 0.6s linear infinite;
    margin-left: 6px;
    vertical-align: middle;
}
@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

/* ===== INLINE SAVE FLASH ===== */
@keyframes rowFlash {
    0% { background: var(--success-light); }
    100% { background: transparent; }
}
.row-flash { animation: rowFlash 1s ease; }

/* ===== DRAG AND DROP ===== */
.drag-handle {
    cursor: grab;
    color: var(--gray-400);
    font-size: var(--fs-md);
    user-select: none;
    padding: 0 4px;
    line-height: 1;
}
.drag-handle:active { cursor: grabbing; }
tr.drag-over { outline: 2px dashed var(--primary); outline-offset: -2px; background: var(--primary-lighter) !important; }
tr.dragging { opacity: 0.4; }

/* ===== TOOLTIP BADGE ===== */
.badge-tooltip {
    position: relative;
    cursor: help;
}
.badge-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dica-fundo);
    color: var(--dica-texto);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: var(--fs-xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
}
.badge-tooltip:hover::after { opacity: 1; }

/* ===== BOTÕES DE AÇÃO SÓ COM O DESENHO (ver iconizarAcoes em app.js) ===== */
/* O nome da ação (data-tip) aparece no balão preso à janela (.gantt-dica, app.js), não em ::after: a dica em CSS subia
   acima do botão e, na primeira linha da tabela, ficava cortada pela .table-responsive (overflow). */
.btn-icone {
    padding: 0.35rem 0.5rem;
    gap: 4px;
}
.acao-contagem {
    display: inline-block;
    background: #fff;
    color: #343a40;
    font-weight: 700;
    border-radius: 999px;
    padding: 0 6px;
    margin-left: 4px;
    min-width: 18px;
    text-align: center;
    font-size: var(--fs-xs);
    line-height: 16px;
}

/* ===== SEARCH FILTER ===== */
.search-filter {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.search-filter input {
    max-width: 350px;
}

/* ===== DARK THEME ===== */
.dark-toggle {
    background: none;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: var(--gray-500);
    cursor: pointer;
    padding: 0.5rem;
    margin-top: 0.35rem;
    font-size: var(--fs-sm);
    transition: var(--transition);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    font-family: inherit;
    margin-top: 0.5rem;
}
.dark-toggle:hover { color: var(--on-color); background: rgba(255,255,255,0.05); }

body.dark-theme {
    /* Neutros derivados do azul profundo da marca; o cartão é mais claro que a página. */
    --gray-50: #0E1E2E;
    --gray-100: #0B1724;
    --gray-200: #1A3047;
    --gray-300: #27415C;
    --gray-400: #7D93A8;
    --gray-500: #A5B6C6;
    --gray-600: #B9C8D5;
    --gray-700: #CFDAE4;
    --gray-800: #E3EAF1;
    --gray-900: #F2F6F9;
    --white: #102233;
    --shadow: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
    --primary-lighter: #13304A;
    --primary-light: #1E4466;
    --link: #8EC2E8;              /* links e títulos: ~8:1 no fundo escuro */
    --borda-campo: #5B7690;
    --anel-foco: rgba(142, 194, 232, 0.55);
    --success-light: #0F3A22;
    --danger-light: #4A1218;
    --info-light: #0F3550;
    --success-texto: #86E0A9;
    --success-fundo: #0C2618;
    --success-borda: #1F5C38;
    --aviso-fundo: #2B2306;
    --aviso-borda: #6B5714;
    --aviso-texto: #F2CC60;
    --aviso-texto-forte: #FBE3A0;
    --campo-fundo: #0D1C2B;
    --campo-borda: #1F3851;
}
body.dark-theme .form-control:focus { border-color: var(--link); }
body.dark-theme .card,
body.dark-theme .form-control,
body.dark-theme .table tbody tr:hover { background: var(--white); }
body.dark-theme .form-control { color: var(--gray-800); border-color: var(--borda-campo); }
body.dark-theme .table th { background: var(--primary-lighter); color: var(--gray-700); }
body.dark-theme .table td { border-bottom-color: var(--gray-200); }
body.dark-theme .btn-secondary { background: var(--gray-200); color: var(--gray-700); }
body.dark-theme .btn-primary { color: #ffffff; }
body.dark-theme .badge-coordenacao { color: #ddeae4; }
body.dark-theme .lgpd-modal,
body.dark-theme .lgpd-modal-body { background: var(--white); color: var(--gray-700); }
body.dark-theme .lgpd-modal-header,
body.dark-theme .lgpd-modal-footer { border-color: var(--gray-300); }

/* Menu lateral e barra do celular têm fundo escuro: cinzas claros próprios nos dois temas. */
.sidebar, .mobile-topbar {
    --gray-500: #ADB5BD;
    --gray-400: #CED4DA;
    --gray-600: #CED4DA;
    --link: #FFFFFF;
}

/* Keep sidebar with light-theme colors even when dark theme is active */
body.dark-theme .sidebar {
    --gray-900: #1A2332;
    --gray-800: #212529;
    --gray-700: #495057;
    --gray-600: #6C757D;
    --gray-500: #ADB5BD;
    --gray-400: #CED4DA;
    --gray-300: #DEE2E6;
    --gray-200: #E9ECEF;
    --gray-100: #F8F9FA;
    --gray-50:  #F8F9FA;
    --white:    #FFFFFF;
    --primary:  #002039;
    --primary-lighter: #E6F2FF;
    --primary-light:   #B3D9FF;
}

/* ===== DUPLICATE BUTTON ===== */
/* Duplicar/Replicar: ação secundária (o laranja #ea580c tinha 3,6:1 e fugia da paleta) */
.btn-duplicate { background: #E5EDF3; color: #003150; border: 1px solid #A9C8E2; }
.btn-duplicate:hover { background: #D2E1EC; color: #002039; }
.btn-duplicate svg { stroke: currentColor; }

/* ===== USER FORM PROGRESS BAR ===== */
.form-progress {
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    position: sticky;
    top: 8px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
}
.form-progress-main { flex: 1; min-width: 0; }
#form-progress-next { flex: 0 0 auto; }
.form-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: var(--fs-sm);
}
.form-progress-label { font-weight: 600; color: var(--gray-700); }
.form-progress-text { color: var(--gray-600); }
.form-progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: 999px;
    overflow: hidden;
}
.form-progress-fill {
    height: 100%;
    background: var(--info);
    border-radius: 999px;
    transition: width 0.4s ease;
}
.form-progress-fill.complete {
    background: var(--success);
}

/* ===== USER FORM REAL-TIME VALIDATION ===== */
.cadastro-field.field-invalid .form-control,
.cadastro-field.field-invalid .custom-combo-trigger,
.cadastro-field.field-invalid textarea {
    border-color: #fa5252 !important;
    box-shadow: 0 0 0 2px rgba(250, 82, 82, 0.12);
}
.cadastro-field.field-invalid .cadastro-label {
    color: #c92a2a;
}

/* ===== MULTI-LIST EMPTY/COUNT/FLASH ===== */
.multi-list-empty {
    margin: 6px 0 0;
    font-size: var(--fs-sm);
    color: var(--gray-500);
    font-style: italic;
}
.multi-list-count {
    margin-top: 6px;
    font-size: var(--fs-sm);
    color: var(--gray-600);
    text-align: right;
}
.multi-list-count-current { font-weight: 600; color: #2563eb; }
@keyframes multiRowFlash {
    0%   { background: #d3f9d8 !important; box-shadow: 0 0 0 2px #51cf66; }
    100% { background: var(--gray-50) !important; box-shadow: none; }
}
.multi-row.multi-row-flash {
    animation: multiRowFlash 0.8s ease;
}

/* Aviso fixo de salvamento que falhou (formulário) */
.nf-faixa-salvamento {
    position: fixed; left: 0; right: 0; top: 0; z-index: 3000;
    background: #FBD9DB; color: #7A0E14; border-bottom: 3px solid #C2063B;
    padding: 0.6rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    font-size: var(--fs-base); box-shadow: var(--shadow-lg);
}
.nf-faixa-salvamento.nf-faixa-ok { background: #D3EFDB; color: #0B5A26; border-bottom-color: #008137; }
.upload-enviando { font-size: var(--fs-sm); color: #005D95; margin-top: 0.35rem; font-weight: 600; }

/* ===== Acessibilidade (DT-18) ===== */
/* Foco visível só para quem navega pelo teclado; no menu escuro, o amarelo da marca. */
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.sidebar :focus-visible, .mobile-topbar :focus-visible { outline-color: #FBBA00; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.custom-combo-trigger:focus-visible, .custom-combo-option:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.custom-combo-option:focus { background: var(--primary-lighter); }
/* Barra de progresso fica logo abaixo do topo fixo do formulário (a altura é medida no JS). */
.form-progress { top: calc(var(--altura-topo, 0px) + 8px); }
@media (max-width: 768px) {
    .mobile-topbar-logo { width: 150px !important; height: auto !important; }
}
@media (max-width: 600px) {
    .cadastro-topbar-inner { flex-wrap: wrap; row-gap: 0.4rem; }
    .cadastro-topbar-center { order: 3; flex-basis: 100%; }
    .cadastro-topbar-user { display: none; }
}

/* Data fora do período da pergunta */
.data-periodo-erro { display: none; margin-top: 0.35rem; font-size: var(--fs-sm); font-weight: 600; color: #B42318; }

/* Botão de fechar dos avisos (app.js) */
.alert { position: relative; padding-right: 2.5rem; }
.alert-fechar { position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%); background: none; border: none; font-size: var(--fs-lg); line-height: 1; color: inherit; opacity: 0.7; cursor: pointer; padding: 0.15rem 0.35rem; }
.alert-fechar:hover, .alert-fechar:focus-visible { opacity: 1; }

/* Erro da pergunta em texto, além da cor (UX-10; form-pagina-2.js) */
.erro-campo { margin-top: 0.35rem; font-size: var(--fs-sm); font-weight: 600; color: #B42318; }
.erro-campo::before { content: "\26A0\FE0E  "; }
body.dark-theme .erro-campo { color: #FDA29B; }

/* ===== JANELAS E MENSAGENS: componente único (UI-7) =====
   Fundo: .modal-overlay (escondido; .show = aberto); .modal-overlay--topo = alinhado em cima com rolagem.
   Caixa: .modal-caixa (720px); .modal-caixa--p (420px); .modal-caixa--g (900px).
   As classes antigas (.pw-modal*, .approve-modal*, .pendencias-modal*, .uq-modal*) são apelidos.
   Cores pelas variáveis do tema: a janela escurece no tema escuro. Mensagens: .msg-erro / .msg-ok. */
.modal-overlay, .pw-modal-overlay, .approve-modal-overlay, .pendencias-modal-overlay, .uq-modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 9000;
    align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.show, .pw-modal-overlay.show, .approve-modal-overlay.show, .pendencias-modal-overlay.show, .uq-modal-overlay.show { display: flex; }
.modal-overlay--topo, .pendencias-modal-overlay, .uq-modal-overlay { align-items: flex-start; padding: 2rem 1rem; overflow-y: auto; }
.modal-caixa, .pw-modal, .approve-modal, .pendencias-modal, .uq-modal {
    background: var(--white); color: var(--gray-800); border-radius: 10px; width: 100%;
    max-width: 720px; padding: 1.75rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.modal-caixa--p, .pw-modal { max-width: 420px; padding: 1.75rem 1.75rem 1.5rem; }
.modal-caixa--g, .pendencias-modal, .uq-modal { max-width: 900px; padding: 1.5rem 1.75rem; }
.modal-caixa h2, .approve-modal h2, .pendencias-modal h2, .uq-modal h2 { color: var(--gray-900) !important; }
.msg-erro, .pw-error { color: #922B21; background: #FADBD8; border-left: 3px solid #C0392B; padding: 0.5rem 0.7rem; border-radius: 4px; font-size: var(--fs-sm); margin-top: 0.6rem; }
.msg-ok { color: #0B5D2A; background: var(--success-light); border-left: 3px solid var(--success); padding: 0.5rem 0.7rem; border-radius: 4px; font-size: var(--fs-sm); margin-top: 0.6rem; }
body.dark-theme .msg-erro, body.dark-theme .pw-error { color: #FECDCA; background: var(--danger-light); border-left-color: #F97066; }
body.dark-theme .msg-ok { color: #A6F4C5; }

/* ===== Botão de tema das telas sem o menu lateral (UI-13) =====
   tema.js liga todo .tema-toggle: alterna body.dark-theme, grava em localStorage('dark-theme')
   e troca o ícone (.tema-toggle-icone) entre lua e sol. */
.tema-toggle { padding: 0.35rem 0.55rem; }
.tema-toggle-icone { display: inline-flex; align-items: center; }
.tema-toggle--flutuante { position: fixed; top: 1rem; right: 1rem; z-index: 50; }
/* Logo: a versão escura (logo.png) some no tema escuro e entra a branca (logobranco.png). */
.logo-tema-escuro { display: none; }
body.dark-theme .logo-tema-claro { display: none; }
body.dark-theme .logo-tema-escuro { display: inline-block; }

/* ===== Tela "sem questionário" (UI-18) ===== */
.sem-form-card { text-align: center; }
.sem-form-titulo { font-size: var(--fs-lg); margin-bottom: 0.5rem; }
.sem-form-texto { color: var(--gray-600); }
.sem-form-sair { margin-top: 1rem; }

/* ===== Tela inicial do usuário (UI-18; antes era um <style> dentro de home.php) =====
   O fundo em degradê e a barra do topo são da marca e ficam iguais nos dois temas;
   o cartão e o que está dentro dele seguem as variáveis (escurecem no tema escuro). */
.home-body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, #002039 0%, #003150 60%, #005D95 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--gray-800);
}
.home-topbar {
    background: rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.home-topbar-left { display: flex; align-items: center; gap: 12px; }
.home-topbar-logo { width: 150px; height: auto; }
.home-topbar-user {
    color: #E4EDF3;
    font-size: var(--fs-base);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.home-topbar-user-row { display: flex; align-items: center; gap: 12px; }
.home-topbar-user .home-user-name { font-weight: 600; }
.home-topbar-user .btn { color: #E4EDF3; border-color: rgba(255,255,255,0.25); background: transparent; }
.home-topbar-user .btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.home-topbar-user .btn-pw,
.home-topbar-user .tema-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #E4EDF3;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}
.home-topbar-user .btn-pw:hover,
.home-topbar-user .tema-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.home-topbar-user .btn-pw svg { flex-shrink: 0; }
.home-topbar-acoes { display: flex; align-items: center; gap: 8px; }

.home-wrapper { max-width: 760px; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.home-hero { text-align: center; color: #fff; margin-bottom: 2rem; }
.home-hero h1 { font-size: var(--fs-2xl); font-weight: 700; margin: 0 0 0.5rem; line-height: 1.25; }
.home-hero p { font-size: var(--fs-md); color: #C8D9E6; margin: 0; line-height: 1.5; }

.home-card {
    background: var(--white);
    border-radius: 14px;
    padding: 2rem 2.25rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    margin-bottom: 1.5rem;
}

/* Situação (pílula): cores de status próprias, como os .badge-status-*; no escuro, versão própria abaixo */
.home-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.home-status-dot { width: 9px; height: 9px; border-radius: 50%; }
.home-status.in-progress { background: #fff7e6; color: #b66708; border: 1px solid #ffe2a8; }
.home-status.in-progress .home-status-dot { background: #f59f00; }
.home-status.complete { background: #e6fcf5; color: #0b7a5b; border: 1px solid #a3e9d3; }
.home-status.complete .home-status-dot { background: #008137; }
.home-status.finalized { background: #e7f5ff; color: #1864ab; border: 1px solid #a5d8ff; }
.home-status.finalized .home-status-dot { background: #1c7ed6; }
.home-status.approved { background: #d3f9d8; color: #2b8a3e; border: 1px solid #b2f2bb; }
.home-status.approved .home-status-dot { background: #2b8a3e; }
.home-status.cancelado { background: var(--gray-200); color: var(--gray-700); }
.home-status.cancelado .home-status-dot { background: var(--gray-500); }
.home-status.pendencia { background: #fff3bf; color: #b07a00; border: 1px solid #ffe066; }
.home-status.pendencia .home-status-dot { background: #f59f00; }
.home-status.home-status--mini { font-size: var(--fs-xs); padding: 3px 10px; margin: 0; }
.home-encerrado { margin: 0 0 0.6rem; padding: 0.5rem 0.75rem; border-radius: 6px; background: var(--gray-200); color: var(--gray-700); font-size: var(--fs-sm); font-weight: 600; }

.btn-iniciar-novo { background: var(--primary); color: var(--on-color); border: 1px solid var(--primary); }
.btn-iniciar-novo:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--on-color); }

.home-progress-section { margin-bottom: 1.5rem; }
.home-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: var(--fs-base);
}
.home-progress-header--rodape { margin-top: 6px; margin-bottom: 0; }
.home-progress-label { font-weight: 600; color: var(--gray-900); }
.home-progress-numbers { color: var(--gray-600); font-size: var(--fs-sm); }
.home-progress-percent { font-size: var(--fs-xl); font-weight: 700; color: var(--gray-900); }
.home-progress-bar { height: 14px; background: var(--gray-200); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.home-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4dabf7, #2563eb);
    border-radius: 999px;
    transition: width 0.6s ease;
}
.home-progress-fill.complete { background: linear-gradient(90deg, #13A538, #008137); }

.home-questionnaire { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--gray-200); }
.home-questionnaire-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--gray-600);
    font-weight: 600;
    margin-bottom: 4px;
}
.home-questionnaire-title { font-size: var(--fs-lg); font-weight: 700; color: var(--gray-900); margin: 0 0 0.35rem; }
.home-questionnaire-desc { font-size: var(--fs-base); color: var(--gray-500); margin: 0; line-height: 1.45; }
/* Cabeçalho do questionário com vários preenchimentos: título à esquerda, "Iniciar novo" à direita */
.home-cabecalho-multi { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.home-cabecalho-texto { flex: 1; min-width: 0; }
.home-form-inline { margin: 0; flex-shrink: 0; }

.home-actions { display: flex; flex-direction: column; gap: 10px; }
.home-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--primary-dark);
    color: var(--on-color);
    border: none;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}
.home-btn-primary:hover { background: #001528; color: var(--on-color); }
.home-btn-primary.complete { background: var(--success); }
.home-btn-primary.complete:hover { background: #006B2D; }
.home-seta { font-size: var(--fs-md); }

.home-meta {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-200);
    font-size: var(--fs-sm);
    color: var(--gray-600);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.home-meta strong { color: var(--gray-700); }

/* Lista de preenchimentos (questionário com vários preenchimentos) */
.home-vazio { padding: 1rem; background: var(--gray-50); border-radius: 8px; text-align: center; color: var(--gray-500); }
.home-instance-list { list-style: none; padding: 0; margin: 0; }
.home-instance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: var(--white);
}
.home-instance-info { flex: 1; min-width: 0; }
.home-instance-status { margin-bottom: 0.3rem; }
.home-instance-envio { font-size: var(--fs-sm); color: var(--gray-600); margin-bottom: 0.3rem; }
.home-instance-campo { font-size: var(--fs-base); color: var(--gray-900); margin-bottom: 0.25rem; word-break: break-word; }
.home-instance-progresso { font-size: var(--fs-sm); color: var(--gray-600); }
.home-instance-acoes { display: flex; gap: 0.5rem; flex-shrink: 0; align-items: center; }

@media (max-width: 600px) {
    .home-card { padding: 1.5rem 1.25rem; }
    .home-hero h1 { font-size: var(--fs-xl); }
    .home-progress-percent { font-size: var(--fs-lg); }
}

/* ===== Pendências da análise (tela inicial e formulário do usuário) ===== */
.home-pendencias, .form-pendencias {
    background: var(--aviso-fundo);
    border: 1px solid var(--aviso-borda);
    border-left: 4px solid var(--aviso-destaque);
    border-radius: 8px;
}
.home-pendencias { margin-bottom: 1.25rem; padding: 1rem 1.1rem; }
.form-pendencias { margin: 0 0 1rem; padding: 0.85rem 1rem; }
.home-pendencias h3 { margin: 0 0 0.6rem; font-size: var(--fs-base); color: var(--aviso-texto); }
.form-pendencias h3 { margin: 0 0 0.4rem; font-size: var(--fs-base); color: var(--aviso-texto); }
.home-pendencias-intro, .form-pendencias-intro { margin: 0 0 0.6rem; font-size: var(--fs-sm); color: var(--aviso-texto); }
.home-pendencias ul, .form-pendencias ul { margin: 0; padding-left: 1.1rem; }
.home-pendencias li, .form-pendencias li { font-size: var(--fs-base); color: var(--aviso-texto-forte); white-space: pre-wrap; }
.home-pendencias li { margin-bottom: 0.3rem; }
.form-pendencias li { margin-bottom: 0.35rem; }
.home-pendencias .pend-meta, .form-pend-meta { font-size: var(--fs-xs); color: var(--aviso-texto); opacity: 0.85; }
.form-pend-meta { margin-top: 0.15rem; }
/* Comunicações da equipe (informativas): mesmo quadro das pendências, em azul */
.home-comunicacoes, .form-comunicacoes { background: #EAF3FA; border: 1px solid #A9C8E2; border-left: 4px solid #005D95; border-radius: 8px; }
.home-comunicacoes { margin-bottom: 1.25rem; padding: 1rem 1.1rem; }
.form-comunicacoes { margin: 0 0 1rem; padding: 0.85rem 1rem; }
.home-comunicacoes h3, .form-comunicacoes h3 { margin: 0 0 0.5rem; font-size: var(--fs-base); color: #005D95; }
.home-comunicacoes-intro, .form-comunicacoes-intro { margin: 0 0 0.6rem; font-size: var(--fs-sm); color: #1A5276; }
.home-comunicacoes ul, .form-comunicacoes ul { margin: 0; padding-left: 1.1rem; }
.home-comunicacoes li, .form-comunicacoes li { font-size: var(--fs-base); color: #0F3B5C; white-space: pre-wrap; margin-bottom: 0.35rem; }
.home-comunicacoes .pend-meta, .form-comunicacoes .form-pend-meta { color: #1A5276; opacity: 0.85; }
body.dark-theme .home-comunicacoes, body.dark-theme .form-comunicacoes { background: #0F2A3F; border-color: #2B5A8F; border-left-color: #4C9BD6; }
body.dark-theme .home-comunicacoes h3, body.dark-theme .form-comunicacoes h3, body.dark-theme .home-comunicacoes-intro, body.dark-theme .form-comunicacoes-intro, body.dark-theme .home-comunicacoes .pend-meta, body.dark-theme .form-comunicacoes .form-pend-meta { color: #A9C9F5; }
body.dark-theme .home-comunicacoes li, body.dark-theme .form-comunicacoes li { color: #D6E6F7; }
.pend-anexo { margin-top: 0.25rem; }
.pend-anexo-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--link); }

/* ===== Formulário do usuário (UI-18; inclui o que era <style> dentro de form.php) ===== */
.deps-pending { display: none !important; }
.form-selo-preview { font-size: var(--fs-sm); }
.form-barra-pdf { text-align: right; margin-bottom: 0.5rem; }
/* Botão que parece desabilitado (pré-visualização / formulário travado) */
.btn-inativo { opacity: 0.5; cursor: not-allowed; }
#form-progress-next { white-space: nowrap; }

/* Aviso dentro da página (o .alert normal é flutuante) */
.alert.alert-estatico {
    position: static;
    transform: none;
    min-width: 0;
    text-align: left;
    font-weight: normal;
    font-size: var(--fs-base);
    margin-bottom: 1rem;
}
.alert.alert-rodape { top: auto; bottom: 1rem; }
.form-aviso-lgpd { margin-top: 0.75rem; }

/* Parecer da análise (caixa verde) */
.form-parecer {
    border: 1px solid var(--success-borda);
    background: var(--success-fundo);
    border-radius: 6px;
    margin-bottom: 1rem;
    overflow: hidden;
}
.form-parecer-titulo {
    background: var(--success-light);
    color: var(--success-texto);
    padding: 8px 14px;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--success-borda);
}
.form-parecer-texto { padding: 12px 14px; white-space: pre-wrap; line-height: 1.5; color: var(--gray-800); font-size: var(--fs-base); }
.form-parecer-anexo { padding: 0 14px 12px; }
.form-parecer-anexo a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--success-texto); }

/* Bloco de perguntas soltas (fora de grupo) */
.cadastro-section.cadastro-section-solta { border: none; padding-top: 1rem; }
/* Descrição de grupo, subgrupo, grade ou pergunta */
.form-dica { font-size: var(--fs-sm); color: var(--gray-600); }
.form-dica--grupo { margin: 0 0 1rem; padding: 0 4px; }
.form-dica--grade { margin: 0 0 0.5rem; }
.form-dica--pergunta { margin: 2px 0 4px; }
.form-legenda-obrigatorio { font-size: var(--fs-sm); color: var(--gray-600); margin-top: 0.75rem; }
.lgpd-versao { font-size: var(--fs-sm); color: var(--gray-700); }

/* Campos */
.auto-expand-text, .entry-auto-expand { resize: none; overflow: hidden; min-height: 38px; }
.campo-moeda { display: flex; align-items: center; gap: 6px; }
.campo-moeda-simbolo { font-weight: 600; color: var(--gray-700); }
.checkbox-label.form-check-sim { margin-top: 0.4rem; }
.checkbox-label.checkbox-label-bloco { display: block; }
.combobox-desc-input { margin-top: 6px; }

/* Grade de registros (subgrupo repetível): na página e dentro da janela do registro */
.entry-grid-section {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--gray-50);
}
.entry-grid-cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.entry-grid-titulo { margin: 0; font-size: var(--fs-sm); font-weight: 700; }
.table.entry-grid-tabela { margin-bottom: 0; background: var(--white); table-layout: fixed; width: 100%; word-wrap: break-word; }
.entry-grid-tabela th { font-size: var(--fs-sm); }
.entry-grid-tabela th.entry-grid-th-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-grid-tabela td { font-size: var(--fs-sm); }
.entry-grid-tabela .actions { gap: 4px; }
.entry-grid-col-acoes { width: 180px; }
.text-muted.entry-grid-vazio { margin: 0; font-size: var(--fs-sm); }

/* Janela do registro (aberta pelo form-pagina-2.js) */
.lgpd-modal.entry-modal { max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; }
.lgpd-modal-body.entry-modal-corpo { padding: 16px 20px 24px; overflow-y: auto; flex: 1; min-height: 300px; }
.lgpd-modal-footer.entry-modal-rodape { display: flex; justify-content: flex-end; gap: 8px; }

/* Lista múltipla: combo + linhas escolhidas */
.multi-combo-linha { display: flex; gap: 8px; align-items: center; }
.multi-combo-custom { flex: 1; }
.multi-grid { margin-top: 8px; }
.multi-row {
    padding: 6px 10px;
    border: 1px solid var(--gray-300);
    margin-bottom: 4px;
    border-radius: 4px;
    background: var(--gray-50);
    flex-wrap: wrap;
}
.multi-row--linha, .multi-row-topo { display: flex; justify-content: space-between; align-items: center; }
.multi-row-nome { font-weight: 500; }
.btn.btn-remover-item { padding: 2px 8px; }
.multi-desc-input { margin-top: 4px; font-size: var(--fs-base); }

/* Pergunta filha "Exibir abaixo", inserida abaixo da opção/pergunta pai */
.cadastro-field-embedded {
    margin-top: 8px !important;
    margin-left: 0 !important;
    padding: 8px 10px;
    border-left: 3px solid var(--primary-light);
    background: rgba(200, 217, 230, 0.18);
    border-radius: 0 6px 6px 0;
    width: 100% !important;
    box-sizing: border-box;
}
body.dark-theme .cadastro-field-embedded { background: rgba(142, 194, 232, 0.08); }
.multi-row .cadastro-field-embedded { flex-basis: 100%; margin-top: 6px !important; background: var(--white); }
/* Subgrupos embutidos (fieldset.cadastro-subsection ou entry-grid-section) */
fieldset.cadastro-subsection.cadastro-field-embedded,
.entry-grid-section.cadastro-field-embedded {
    margin-top: 8px !important;
    margin-left: 0 !important;
    border-left: 3px solid var(--primary-light);
}
.multi-row fieldset.cadastro-subsection.cadastro-field-embedded,
.multi-row .entry-grid-section.cadastro-field-embedded { flex-basis: 100%; background: var(--white); }

/* Somente leitura / pré-visualização: trava os cartões de pergunta, mas deixa os botões
   de fora deles (ex.: "Visualizar" na lista de registros). */
body.locked .cadastro-field { pointer-events: none; }
body.locked .cadastro-field input,
body.locked .cadastro-field textarea,
body.locked .cadastro-field select { background: var(--gray-100) !important; color: var(--gray-700) !important; }
body.locked .form-control { cursor: not-allowed; }

/* Combo próprio (lista com texto de apoio por opção) */
.custom-combo { position: relative; width: 100%; }
.custom-combo-trigger { display: flex; align-items: center; cursor: pointer; min-height: 38px; gap: 6px; user-select: none; }
.custom-combo-trigger .custom-combo-arrow { margin-left: auto; font-size: var(--fs-xs); color: var(--gray-500); }
.custom-combo-placeholder { color: var(--gray-500); }
.custom-combo-info { color: var(--gray-500); font-size: 0.85em; }
.custom-combo-info::before { content: '\2014\00a0'; }
.custom-combo-trigger .custom-combo-info { margin-left: 6px; }
.custom-combo-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    color: var(--gray-800);
    border: 1px solid var(--gray-400);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.custom-combo.open .custom-combo-dropdown { display: block; }
.custom-combo.open .custom-combo-trigger { border-radius: 6px 6px 0 0; border-color: var(--gray-400); }
.custom-combo-option { padding: 8px 12px; cursor: pointer; }
.custom-combo-option .custom-combo-info,
.multi-row .custom-combo-info { display: block; }
.custom-combo-option:hover { background: var(--gray-100); }
.custom-combo-option.selected { background: var(--primary-lighter); }
/* Dica flutuante: fundo escuro nos dois temas */
.custom-tooltip {
    position: fixed;
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: var(--fs-sm);
    max-width: 400px;
    word-wrap: break-word;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ===== Tema escuro nas telas do usuário (UI-13) =====
   Quase tudo já escurece pelas variáveis; aqui ficam as cores de status e de texto
   que não têm variável própria. */
body.dark-theme .home-status.in-progress { background: rgba(245, 159, 0, 0.14); color: #F8C76B; border-color: rgba(245, 159, 0, 0.4); }
body.dark-theme .home-status.complete { background: rgba(12, 166, 120, 0.14); color: #63E6BE; border-color: rgba(12, 166, 120, 0.4); }
body.dark-theme .home-status.finalized { background: var(--info-light); color: var(--link); border-color: #1F5C8A; }
body.dark-theme .home-status.finalized .home-status-dot { background: var(--link); }
body.dark-theme .home-status.approved { background: var(--success-light); color: var(--success-texto); border-color: var(--success-borda); }
body.dark-theme .home-status.approved .home-status-dot { background: var(--success-texto); }
body.dark-theme .home-status.pendencia { background: var(--aviso-fundo); color: var(--aviso-texto); border-color: var(--aviso-borda); }
body.dark-theme .home-btn-primary:not(.complete) { background: #1E4466; }
body.dark-theme .home-btn-primary:not(.complete):hover { background: #27577F; }
body.dark-theme .alert-success { color: #A6F4C5; }
body.dark-theme .alert-info { color: #B9DDF5; }
body.dark-theme .alert-error { color: #FECDCA; }
body.dark-theme .cadastro-field.field-invalid .cadastro-label { color: #FDA29B; }
body.dark-theme .data-periodo-erro { color: #FDA29B; }
body.dark-theme .upload-enviando,
body.dark-theme .multi-list-count-current { color: var(--link); }

/* ===== Configurações > Visão Geral e aviso do painel (PM-13) ===== */
.config-visao-geral { max-width: 1100px; }
.config-visao-geral-ajuda { font-size: var(--fs-sm); color: var(--gray-700); margin-bottom: 1rem; }
.config-visao-geral-questionario { max-width: 640px; margin-bottom: 1.5rem; }
.config-visao-geral-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.75rem 1.25rem; margin-bottom: 1.25rem; }
.config-visao-geral-familia { border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 0.6rem 0.9rem; max-height: 260px; overflow-y: auto; }
.config-visao-geral-familia legend { font-weight: 700; font-size: var(--fs-sm); padding: 0 0.3rem; }
.config-visao-geral-familia .checkbox-label { display: flex; gap: 6px; font-size: var(--fs-sm); margin: 0.2rem 0; }
.config-visao-geral-campos { font-size: var(--fs-xs); color: var(--gray-600); margin-bottom: 0.35rem; }
.config-visao-geral-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.visao-aviso-config { margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: var(--radius); border-left: 4px solid var(--warning); background: var(--aviso-fundo, #FFF4E5); color: var(--gray-800); font-size: var(--fs-sm); }
.visao-aviso-config ul { margin: 0.4rem 0 0.5rem 1.2rem; }

/* Balões de dica no tema escuro: fundo claro e texto escuro (contraste ~13:1) */
body.dark-theme { --dica-fundo: #E3EAF1; --dica-texto: #0B1724; }

/* Menu lateral e barra do celular: logo sem as duas linhas abaixo de "IN-FOTON", que nesse
   tamanho ficam ilegíveis (decisão do Ecio, 07/10/2026). O arquivo continua inteiro: a máscara
   mostra os 82% de cima (curvas e "IN-FOTON") e a faixa da esquerda até o pé (fim das curvas),
   e esconde só o canto de baixo à direita, onde ficam as duas linhas. */
.logo-sem-linhas {
    -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 82%, 37% 100%;
    -webkit-mask-position: 0 0, 0 0;
    -webkit-mask-repeat: no-repeat;
    mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    mask-size: 100% 82%, 37% 100%;
    mask-position: 0 0, 0 0;
    mask-repeat: no-repeat;
}

/* "Limpar filtro": último item da linha de filtros, à direita e embaixo (se a linha quebrar) */
.filtro-limpar { margin-left: auto; align-self: flex-end; white-space: nowrap; }

/* Cadastro do usuário: e-mails da equipe por tipo */
.emails-equipe { border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 0.6rem 0.9rem; }
.emails-equipe legend { font-weight: 700; font-size: var(--fs-sm); padding: 0 0.3rem; }
.emails-equipe .checkbox-label { display: flex; gap: 6px; align-items: baseline; margin: 0.25rem 0; }
.emails-equipe-dica { font-size: var(--fs-xs); color: var(--gray-600); margin: 0.35rem 0 0; }

/* Filtros em mais de uma linha: cada linha é um bloco; entre as linhas, o mesmo 1rem da Auditoria */
.filtros-form { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 0.5rem; }
.filtros-form > .filtros-linha { gap: 1rem; margin-bottom: 0; }

/* Compra/Serviço: etapas depois da aprovação */
.badge-status-realizada { background: #E0ECFF; color: #1A4C99; border: 1px solid #A9C6F5; }
.badge-status-entregue  { background: #C8EBD4; color: #00491F; border: 1px solid #7FC497; font-weight: 700; }
.badge-status-aprovado-compra { background: #EDE4FF; color: #4B2A8A; border: 1px solid #C7B3EF; } /* Aprovado em Compra/Serviço: ainda falta realizar e entregar */
body.dark-theme .badge-status-realizada { background: #16304F; color: #A9C9F5; border-color: #2B5A8F; }
body.dark-theme .badge-status-entregue  { background: var(--success-light); color: var(--success-texto); border-color: var(--success-borda); }
body.dark-theme .badge-status-aprovado-compra { background: #2E2050; color: #D6C6F7; border-color: #5A3F93; }

/* ===== Projetos (menu Projetos) ===== */
.projeto-tabs { flex-wrap: wrap; }
.projeto-titulo { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.projeto-origem { color: var(--gray-600); font-size: var(--fs-sm); margin: -0.5rem 0 1rem; }
.projeto-dica { color: var(--gray-600); font-size: var(--fs-sm); margin: 0 0 0.75rem; font-weight: 400; }
.projeto-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.projeto-grade-leitura { border: 0; padding: 0; margin: 0; min-width: 0; }
.projeto-campo-largo { grid-column: 1 / -1; }
.projeto-multi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.35rem 1rem; }
.projeto-arquivo-atual { display: flex; gap: 1rem; align-items: center; font-size: var(--fs-sm); margin-bottom: 0.35rem; }
.projeto-arquivo-atual:empty { display: none; }
.campo-original { font-size: var(--fs-xs); font-weight: 600; color: var(--aviso-texto); background: var(--aviso-fundo); border: 1px solid var(--aviso-borda); border-radius: 4px; padding: 0 0.3rem; margin-left: 0.25rem; }
.projeto-tabela td { vertical-align: top; }
.projeto-tabela tr.linha-atrasada td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.texto-alerta { color: var(--danger); font-weight: 600; }
body.dark-theme .texto-alerta { color: #F97066; }
.projeto-perigo { border-left: 3px solid var(--danger); }
.badge-projeto-enquadramento { background: #FFF1DC; color: #7A4300; }
.badge-projeto-execucao { background: #DDEBF6; color: #00477A; }
.badge-projeto-suspenso { background: #ECEEF0; color: #495057; }
.badge-projeto-concluido { background: #D9F0E1; color: #00602A; }
.badge-projeto-cancelado { background: #FBD9DB; color: #8E0A2C; }
/* Pergunta/grupo/subgrupo base do sistema (leva informação para Projetos): não se altera nem exclui. */
.badge-base { background: var(--aviso-fundo); color: var(--aviso-texto-forte); border: 1px solid var(--aviso-borda); cursor: help; }
.aviso-base { background: var(--aviso-fundo); border: 1px solid var(--aviso-borda); border-left: 4px solid var(--aviso-destaque); color: var(--aviso-texto-forte); padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: var(--fs-sm); }
@media (max-width: 768px) {
    .projeto-grade { grid-template-columns: 1fr; }
}
body.dark-theme .badge-projeto-enquadramento { background: var(--aviso-fundo); color: var(--aviso-texto); }
body.dark-theme .badge-projeto-execucao { background: var(--info-light); color: #A9C9F5; }
body.dark-theme .badge-projeto-suspenso { background: var(--gray-200); color: var(--gray-700); }
body.dark-theme .badge-projeto-concluido { background: var(--success-light); color: var(--success-texto); }
body.dark-theme .badge-projeto-cancelado { background: var(--danger-light); color: #FECDCA; }

/* Prévia do projeto (projetos.previa): marca na lista/ficha, botão "Gerar prévia" em Respostas e o liga/desliga
   "Considerar prévias" no alto das telas de números (_previas_alternar.php). */
.badge-previa { background: #EDE7F6; color: #4A2A8A; border: 1px dashed #8E6CC9; cursor: help; }
body.dark-theme .badge-previa { background: rgba(142, 108, 201, 0.18); color: #CDB9F2; border-color: #8E6CC9; }
.form-previa { display: inline; margin-left: 0.25rem; }
.btn-previa { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; vertical-align: middle;
    border: 1px solid var(--gray-300); border-radius: 6px; background: var(--white); color: var(--primary); cursor: pointer; }
.btn-previa:hover, .btn-previa:focus-visible { border-color: var(--primary); background: var(--primary-lighter); }
.btn-previa svg { width: 15px; height: 15px; }
.btn-previa.tem-previa { color: #6B46B0; border-color: #8E6CC9; }
body.dark-theme .btn-previa.tem-previa { color: #CDB9F2; }
.previas-alternar { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--gray-700); text-decoration: none; white-space: nowrap; user-select: none; }
.previas-alternar:hover { color: var(--primary); text-decoration: none; }
.previas-trilho { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--gray-400); transition: background 0.15s; flex-shrink: 0; }
.previas-bolinha { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: left 0.15s; }
.previas-alternar.ligado .previas-trilho { background: var(--success); }
.previas-alternar.ligado .previas-bolinha { left: 18px; }

/* Grupos do menu lateral (Gestão, Questionários, Geral). Recolhido: vira só uma linha divisória. */
.nav-grupo {
    padding: 0.9rem 0.7rem 0.3rem;
    font-size: 0.66rem; /* menor que os itens (--fs-sm) */
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    overflow: hidden;
}
.nav-grupo:first-child { padding-top: 0.2rem; }
.sidebar.collapsed .nav-grupo { padding: 0.5rem 0.4rem; }
.sidebar.collapsed .nav-grupo::after { content: ''; display: block; border-top: 1px solid rgba(255,255,255,0.15); }
.sidebar.collapsed .nav-grupo:first-child { display: none; }
@media (max-width: 768px) {
    .sidebar.collapsed .nav-grupo { padding: 0.9rem 0.7rem 0.3rem; }
    .sidebar.collapsed .nav-grupo::after { display: none; }
    .sidebar.collapsed .nav-grupo:first-child { display: block; padding-top: 0.2rem; }
}

/* Configurações > Tipos de Usuário: itens do menu por tipo */
.config-tipos-usuario { max-width: 1100px; }
.config-tipos-usuario-ajuda { font-size: var(--fs-sm); color: var(--gray-700); margin: 0.25rem 0 1rem; }
.config-tipos-usuario-tabela th:not(:first-child), .config-tipos-usuario-tabela td:not(:first-child) { width: 110px; white-space: nowrap; }
.config-tipos-usuario-grupo td { background: var(--gray-100); font-weight: 700; font-size: var(--fs-sm); }
.config-tipos-usuario-nota { font-size: var(--fs-xs); color: var(--gray-600); margin-left: 0.4rem; }
.config-tipos-usuario-caixa { display: inline-flex; justify-content: center; margin: 0; }
.config-tipos-usuario-caixa input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.55; }
.config-tipos-usuario-acoes { display: flex; justify-content: flex-end; }

/* Questionário > "Aprovado por (na ordem)": lista com caixa, posição e setas */
.aprovado-por-lista { list-style: none; margin: 0 0 0.5rem; padding: 0; max-width: 420px; }
.aprovado-por-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.4rem; border-radius: 6px; }
.aprovado-por-item.marcado { background: var(--gray-100); }
.aprovado-por-item .checkbox-label { flex: 1; margin: 0; }
.aprovado-por-ordem { width: 2rem; text-align: right; font-weight: 700; font-size: var(--fs-sm); color: var(--link); }
.aprovado-por-setas { display: flex; gap: 2px; }
.aprovado-por-setas .btn { padding: 0 0.45rem; line-height: 1.6; font-size: 0.7rem; }

/* Questionários: marca "Principal" (o que gera Projetos) e balão de ajuda */
.q-principal { font-size: var(--fs-xs); font-style: italic; color: var(--gray-600); margin-left: 0.35rem; }
.q-principal + .ajuda { margin-left: 0.2rem; }

/* Ajuda: círculo com "?" na frente do título (função ajuda() em config/init.php). O balão (.ajuda-balao) é
   um só, preso à janela e posicionado pelo app.js: sobe se couber, senão desce, sem sair pelas bordas. */
.ajuda {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 16px; height: 16px; margin-right: 0.35rem; border-radius: 50%;
    border: 1px solid var(--gray-500); color: var(--gray-600); font-size: 0.7rem; font-weight: 700; font-style: normal;
    line-height: 1; text-transform: none; letter-spacing: normal; cursor: help; vertical-align: middle;
}
.ajuda-balao {
    position: fixed; display: none; z-index: 1000;
    width: max-content; max-width: min(280px, calc(100vw - 16px)); white-space: normal; text-align: left;
    background: var(--dica-fundo); color: var(--dica-texto);
    padding: 6px 10px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 400; line-height: 1.4;
    pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Visão Geral: nome do painel em texto fixo (é sempre o questionário principal) */
.visao-painel-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; font-size: var(--fs-base); }

/* Grade em blocos da ficha do projeto (Metas/Submetas, Entregas e etapas): faixa de título por grupo e as linhas abaixo. */
.grade-grupos tr.grade-grupos-espaco td { height: 1.25rem; padding: 0; border: 0; background: var(--white); }
.grade-grupos tbody tr.grade-grupos-espaco:hover, .grade-grupos tbody tr.grade-grupos-cab:hover { background: transparent; }
.grade-grupos tr.grade-grupos-cab td { background: var(--primary-lighter); border-top: 3px solid var(--primary); border-bottom: 1px solid var(--primary-light); padding: 0.55rem 0.75rem; }
.grade-grupos-num { display: inline-block; background: var(--primary); color: var(--on-color); font-weight: 700; font-size: var(--fs-sm); border-radius: 4px; padding: 0.1rem 0.5rem; margin-right: 0.5rem; }
.grade-grupos-titulo { font-weight: 700; color: var(--link); }
.grade-grupos-resumo { color: var(--gray-600); font-size: var(--fs-sm); margin-left: 0.5rem; }
.grade-grupos td.grade-grupos-id { font-weight: 700; white-space: nowrap; }
.grade-grupos tr.grade-grupos-preenchida td:first-child { box-shadow: inset 3px 0 0 var(--success); }
.grade-grupos tr.grade-grupos-vazia td { color: var(--gray-600); }
.grade-grupos-nao { font-size: var(--fs-xs); color: var(--gray-600); white-space: nowrap; }
body.dark-theme .grade-grupos tr.grade-grupos-cab td { border-top-color: var(--link); }
body.dark-theme .grade-grupos-num { background: var(--link); color: #0B1724; }
.grade-grupos-linha2 { display: block; margin: 0.3rem 0 0; }
.grade-grupos tr.etapa-concluida td:first-child { box-shadow: inset 3px 0 0 var(--success); }
.grade-grupos tr.etapa-andamento td:first-child { box-shadow: inset 3px 0 0 var(--info); }
.grade-grupos tr.etapa-cancelada td { color: var(--gray-600); text-decoration: line-through; }
.grade-grupos tr.etapa-cancelada td:last-child { text-decoration: none; }
/* TRL apontado pelas etapas (aba Entregas). */
.badge-trl { background: #EDE4FF; color: #4B2A8A; border: 1px solid #C7B3EF; margin-left: 0.35rem; }
body.dark-theme .badge-trl { background: #2E2050; color: #D6C6F7; border-color: #5A3F93; }
.trl-etapa { font-size: var(--fs-xs); font-weight: 600; color: var(--gray-600); white-space: nowrap; margin-left: 0.25rem; }
/* Combo com segunda linha (combo-info.js): o select fica atrás da lista, só para o POST e a validação. */
.combo-info-select { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
.custom-combo-trigger.disabled { cursor: default; opacity: 0.65; }
.combo-info .custom-combo-dropdown { max-height: 360px; }
/* Dados gerais: título da parte de planejamento dentro da grade de campos. */
.projeto-grade-secao { grid-column: 1 / -1; margin: 0.75rem 0 0.75rem; padding-top: 1rem; border-top: 1px solid var(--gray-200); font-size: var(--fs-md); }
.grade-grupos-acao { float: right; }
.grade-grupos-acao form { display: inline; }
.grade-grupos tr.etapa-dispensada td { color: var(--gray-500); font-style: italic; }
.grade-grupos tr.etapa-dispensada td:first-child { box-shadow: inset 3px 0 0 var(--gray-400); }
.grade-grupos tr.grade-grupos-cab td.grade-grupos-data { font-weight: 700; white-space: nowrap; vertical-align: middle; }
/* Colunas curtas da grade em blocos: só a largura do conteúdo (a Etapa fica com o resto e a faixa da entrega quebra linha). */
.grade-grupos th.col-min { width: 1%; white-space: nowrap; }
.grade-grupos th.col-quebra { white-space: normal; }
/* Marco dentro da entrega (aba Entregas). */
.grade-grupos tr.marco-linha td { background: var(--aviso-fundo); }
.grade-grupos tr.marco-linha td.grade-grupos-id { color: var(--aviso-destaque); }
.grade-grupos tr.marco-concluido td.grade-grupos-id { color: var(--success); }
.marco-rotulo { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; color: var(--aviso-texto); margin-right: 0.25rem; }
/* Balão do Gantt (app.js): a que entrega, etapa ou marco a barra/losango se refere. */
.gantt-dica { display: none; position: fixed; z-index: 10000; max-width: 380px; background: var(--dica-fundo); color: var(--dica-texto); font-size: var(--fs-xs); line-height: 1.4; padding: 0.45rem 0.6rem; border-radius: 6px; box-shadow: var(--shadow-lg); pointer-events: none; }
/* Entrega × submeta (aba Entregas). */
.entrega-submetas { display: block; margin-top: 0.2rem; }
.entrega-submeta { font-weight: 700; cursor: help; border-bottom: 1px dotted currentColor; }
.submetas-meta { margin-bottom: 0.9rem; }
.submetas-meta-titulo { font-weight: 700; margin-bottom: 0.35rem; }
.submetas-item { display: flex; gap: 0.4rem; align-items: flex-start; margin: 0.2rem 0 0.2rem 0.5rem; font-weight: 400; }
.submetas-item input { margin-top: 0.25rem; }
.submetas-item .badge { white-space: nowrap; }
/* Lista de etapas: coluna Marco (checkbox que grava na hora) e Dispensada com o motivo no balão. */
.form-inline-caixa { display: inline; margin: 0; }
.etapa-marco { font-size: var(--fs-xs); font-weight: 700; color: #1f6fb2; white-space: nowrap; margin-left: 0.25rem; }
.dispensa-caixa { display: inline-block; padding: 2px; }
.dispensa-caixa[data-dica], .badge-trl[data-dica], .trl-etapa[data-dica] { cursor: help; }
.grade-grupos td.etapa-situacao { font-weight: 700; white-space: nowrap; }
/* Cabeçalho das colunas das etapas, repetido embaixo de cada entrega (não fica mais só no topo). */
.grade-grupos tr.grade-grupos-th th { font-size: var(--fs-xs); padding-top: 0.35rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--gray-300); }
.grade-grupos tbody tr.grade-grupos-th:hover { background: transparent; }
/* Faixa da entrega: o título que quebra linha continua alinhado ao início dele (não volta para baixo do tipo). */
.entrega-titulo-linha { display: flex; align-items: flex-start; gap: 0.4rem; }
.entrega-titulo-linha > .grade-grupos-num, .entrega-titulo-linha > .badge { flex: 0 0 auto; margin-right: 0; margin-left: 0; }
.entrega-titulo-linha > .grade-grupos-titulo { flex: 1 1 auto; min-width: 0; padding-top: 0.1rem; }

/* "Imprimir / salvar PDF" das listas enquanto o relatório carrega no quadro escondido (app.js). */
a[data-imprimir-pdf].carregando { opacity: 0.6; cursor: progress; pointer-events: none; }

/* Mapa de Cobertura (Metas e Submetas): linha da meta, código do item e barras de cobertura/cumprimento.
   Na tela e na impressão (relatorio_ver.php). */
.metas-linha-meta td { background: var(--primary-lighter); }
body.dark-theme .metas-linha-meta td { background: rgba(255,255,255,0.06); }
.metas-codigo { white-space: nowrap; font-weight: 600; padding-left: 1.5rem !important; }
.linha-inativa td { opacity: 0.55; }
.cob-barra { width: 90px; height: 8px; background: var(--gray-200, #e9ecef); border-radius: 999px; overflow: hidden; margin-bottom: 3px; }
.cob-barra-fill { height: 100%; border-radius: 999px; }
.cob-ok { background: var(--success); } .cob-parcial { background: var(--warning); } .cob-sem { background: var(--danger); }
@media print {
    .metas-linha-meta td, .cob-barra, .cob-barra-fill, .projeto-tabela tr.linha-atrasada td:first-child { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}