/* ═══════════════════════════════════════════════════════════
   CX4 UI EXTRA — refinos de botões e grids (carrega após cx4-premium)
   ═══════════════════════════════════════════════════════════ */

/* ----- Botões gerais ----- */
.btn{ border-radius:10px !important; font-weight:600 !important; letter-spacing:.01em; transition:transform .15s ease, box-shadow .18s ease, filter .15s ease !important; }
.btn:hover{ transform:translateY(-1px); }
.btn-success{ box-shadow:0 10px 22px -12px rgba(46,158,91,.65); }
.btn-primary{ box-shadow:0 10px 22px -12px rgba(30,111,219,.65); }
.btn i.mdi, .btn i.fas, .btn i.far{ vertical-align:middle; }

/* ----- Ícones de ação nas grids: CÍRCULO colorido + ícone BRANCO ----- */
.cx4-grid-act{ display:inline-flex !important; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50% !important; color:#fff !important; font-size:1rem; text-decoration:none !important; transition:transform .15s ease, filter .15s ease; margin:0 3px; background:#1e6fdb !important; border:0 !important; box-shadow:0 5px 12px -5px rgba(30,111,219,.6); }
.cx4-grid-act:hover{ transform:scale(1.12); color:#fff !important; filter:brightness(1.06); }
/* cor do CÍRCULO por tipo de ação (detecta o ícone dentro) */
.cx4-grid-act:has(.mdi-pencil), .cx4-grid-act:has(.mdi-pencil-outline){ background:#f2a000 !important; box-shadow:0 5px 12px -5px rgba(242,160,0,.6); }
.cx4-grid-act:has(.mdi-trash-can-outline), .cx4-grid-act:has(.mdi-delete), .cx4-grid-act:has(.mdi-delete-outline), .cx4-grid-act:has(.mdi-trash-can){ background:#e5484d !important; box-shadow:0 5px 12px -5px rgba(229,72,77,.6); }
.cx4-grid-act:has(.mdi-printer), .cx4-grid-act:has(.mdi-file-pdf-box), .cx4-grid-act:has(.mdi-printer-outline){ background:#5b6b85 !important; box-shadow:0 5px 12px -5px rgba(91,107,133,.55); }
.cx4-grid-act:has(.mdi-content-copy), .cx4-grid-act:has(.mdi-eye), .cx4-grid-act:has(.mdi-eye-outline), .cx4-grid-act:has(.mdi-open-in-new), .cx4-grid-act:has(.mdi-view-dashboard-outline){ background:#1e6fdb !important; }
/* ÍCONE sempre branco (vence regras de cor de ícone do dark) */
.cx4-grid-act i, .cx4-grid-act .mdi, html.cx4-dark .cx4-grid-act i, html.cx4-dark .cx4-grid-act .mdi{ color:#fff !important; }
html.cx4-dark .cx4-grid-act{ color:#fff !important; }

/* ----- Toggles (custom-switch): centralizar a chave com o rótulo ----- */
.custom-control.custom-switch{ display:inline-flex !important; align-items:center !important; min-height:0 !important; }
.custom-switch .custom-control-label{ line-height:1.3 !important; cursor:pointer; }
.custom-switch .custom-control-label::before{ top:50% !important; margin-top:-9.6px !important; }
.custom-switch .custom-control-label::after{ top:50% !important; margin-top:-7.6px !important; }

/* ----- Scroll: tabela rola DENTRO do card (não estoura a página) ----- */
.table-responsive{ display:block !important; width:100% !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; border-radius:12px; }
.dataTables_wrapper{ overflow:hidden; }
.dataTables_scrollBody{ overflow-x:auto !important; }
/* barra de rolagem mais discreta */
.table-responsive::-webkit-scrollbar{ height:8px; }
.table-responsive::-webkit-scrollbar-thumb{ background:#c3cfe2; border-radius:100px; }
html.cx4-dark .table-responsive::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); }

/* ----- Campo de procura: não estoura o card ----- */
.dataTables_filter{ float:right; max-width:100%; }
.dataTables_filter input, .dataTables_filter input[type="search"]{
    min-width:0 !important; width:220px !important; max-width:100% !important;
    border-radius:10px !important; border:1px solid #e2e8f2 !important; padding:7px 13px !important; transition:.15s;
}
.dataTables_filter input:focus{ border-color:#1e6fdb !important; box-shadow:0 0 0 3px rgba(30,111,219,.12) !important; outline:0 !important; }
.dataTables_length select{ border-radius:9px !important; border:1px solid #e2e8f2 !important; padding:4px 26px 4px 10px !important; }
.dataTables_paginate .paginate_button{ border-radius:8px !important; }
@media (max-width:600px){ .dataTables_filter{ float:none; } .dataTables_filter input{ width:100% !important; } }

/* ----- Cabeçalho da grid ----- */
table.dataTable thead th{ text-transform:uppercase; font-size:.72rem; letter-spacing:.04em; color:#8a9bb8; }

/* ═══ CX4 Voz — botão de ditado por voz ═══ */
.cx4-voz-wrap{ position:relative; display:block; }
.cx4-voz-wrap.is-input{ display:block; }
.cx4-voz-btn{
    position:absolute; bottom:8px; right:8px; width:34px; height:34px;
    border-radius:50%; border:0; background:#1e6fdb; color:#fff;
    box-shadow:0 6px 16px -6px rgba(30,111,219,.7); cursor:pointer;
    display:flex; align-items:center; justify-content:center; z-index:6;
    transition:transform .15s ease, background .15s ease; padding:0;
}
.cx4-voz-wrap.is-input .cx4-voz-btn{ bottom:auto; top:50%; transform:translateY(-50%); width:30px; height:30px; }
.cx4-voz-btn i, .cx4-voz-btn .mdi{ font-size:18px; line-height:1; color:#fff !important; }
.cx4-voz-btn:hover{ transform:scale(1.08); background:#1860c4; }
.cx4-voz-wrap.is-input .cx4-voz-btn:hover{ transform:translateY(-50%) scale(1.08); }
.cx4-voz-wrap.is-input input.cx4-voz{ padding-right:42px !important; }
.cx4-voz-btn.rec{ background:#e23950; animation:cx4VozPulse 1.1s infinite; }
.cx4-voz-btn.rec:hover{ background:#cc2c41; }
@keyframes cx4VozPulse{
    0%{ box-shadow:0 0 0 0 rgba(226,57,80,.55); }
    70%{ box-shadow:0 0 0 11px rgba(226,57,80,0); }
    100%{ box-shadow:0 0 0 0 rgba(226,57,80,0); }
}
/* mic dentro de editores ricos (Summernote) */
.note-editor.note-frame{ position:relative; }
.cx4-voz-btn.cx4-voz-ed{ top:6px; right:8px; bottom:auto; width:30px; height:30px; z-index:25; }
.cx4-voz-btn.cx4-voz-ed i{ font-size:16px; }
/* cor do botão respeitando light/dark */
.cx4-voz-btn{ background:#1e6fdb; box-shadow:0 6px 16px -6px rgba(30,111,219,.55); }
.cx4-voz-btn:hover{ background:#1860c4; }
html.cx4-dark .cx4-voz-btn{ background:#3a82e6; box-shadow:0 6px 16px -6px rgba(0,0,0,.6); }
html.cx4-dark .cx4-voz-btn:hover{ background:#4f93f0; }
.cx4-voz-btn.rec{ background:#e23950 !important; }
html.cx4-dark .cx4-voz-btn.rec{ background:#ef4b62 !important; }

/* ═══════════════════════════════════════════════════════════
   GRIDS — cara de sistema (enterprise) + legibilidade no dark
   ═══════════════════════════════════════════════════════════ */
/* densidade e respiro das células (claro e escuro) */
table.dataTable tbody td, .table tbody td,
table.dataTable thead th, .table thead th{
    padding-top:12px !important; padding-bottom:12px !important;
    vertical-align:middle !important;
}
table.dataTable tbody td, .table tbody td{ font-size:.875rem; }
table.dataTable thead th, .table thead th{
    text-transform:uppercase; font-size:.7rem; font-weight:700; letter-spacing:.05em;
}
/* CLARO: cabeçalho com leve fundo + divisória nítida; linhas com hover */
.table thead th, table.dataTable thead th{
    background:#f7f9fc; color:#7186a6; border-bottom:2px solid #e3e9f3 !important;
}
.table tbody tr, table.dataTable tbody tr{ border-bottom:1px solid #eef2f8; }
.table-hover tbody tr:hover, table.dataTable.table-hover tbody tr:hover{ background:#f4f8ff !important; }
.table tbody td, table.dataTable tbody td{ color:#33425c; border-top-color:#eef2f8 !important; }

/* selos de status (.cx4-chip): estilo TONAL vivo, adapta aos 2 temas (var --c) */
.cx4-chip{
    --c:#1e6fdb;
    background:color-mix(in srgb, var(--c) 15%, transparent);
    color:color-mix(in srgb, var(--c) 70%, #0a1020);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
    text-shadow:none;
    padding:5px 13px; font-weight:800; letter-spacing:.01em;
}
.cx4-chip::before{ background:currentColor; opacity:1; box-shadow:none; }
html.cx4-dark .cx4-chip{
    background:color-mix(in srgb, var(--c) 26%, transparent);
    color:color-mix(in srgb, var(--c) 60%, #ffffff);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
}

/* ===== DARK: tudo mais claro e com contraste de sistema grande ===== */
html.cx4-dark .table thead th,
html.cx4-dark table.dataTable thead th,
html.cx4-dark #datatable-buttons thead th{
    background:#0e1729 !important; color:#9fb1d0 !important;
    border-bottom:2px solid rgba(255,255,255,.12) !important;
}
html.cx4-dark .table tbody td,
html.cx4-dark .table tbody td a,
html.cx4-dark table.dataTable tbody td,
html.cx4-dark table.dataTable tbody td a,
html.cx4-dark #datatable-buttons tbody td,
html.cx4-dark #datatable-buttons tbody td a{
    color:#e3ebf8 !important; border-top-color:rgba(255,255,255,.07) !important;
}
html.cx4-dark .table tbody tr, html.cx4-dark table.dataTable tbody tr{ border-bottom:1px solid rgba(255,255,255,.06); }
html.cx4-dark .table-striped tbody tr:nth-of-type(odd){ background:rgba(255,255,255,.028) !important; }
html.cx4-dark .table-hover tbody tr:hover,
html.cx4-dark table.dataTable.table-hover tbody tr:hover,
html.cx4-dark #datatable-buttons tbody tr:hover{ background:rgba(93,184,255,.12) !important; }
/* títulos de seção dentro de cards (ex.: "Ações", "INFORMAÇÕES") */
html.cx4-dark .card-body h4, html.cx4-dark .card-body h5,
html.cx4-dark .col-form-label, html.cx4-dark label{ color:#dbe5f5 !important; }
/* rodapé/contagem/paginação da grid no dark */
html.cx4-dark .dataTables_info, html.cx4-dark .dataTables_length label,
html.cx4-dark .dataTables_filter label{ color:#9fb1d0 !important; }
html.cx4-dark .dataTables_paginate .paginate_button{ color:#c8d3e6 !important; }
html.cx4-dark .dataTables_paginate .paginate_button.current{ background:#1e6fdb !important; border-color:#1e6fdb !important; color:#fff !important; }
html.cx4-dark .dataTables_filter input{ background:#0e1729 !important; border-color:rgba(255,255,255,.14) !important; color:#e3ebf8 !important; }
html.cx4-dark .dataTables_length select{ background:#0e1729 !important; border-color:rgba(255,255,255,.14) !important; color:#e3ebf8 !important; }
/* ícones de ação na linha (lápis/lixeira) mais visíveis no dark */
html.cx4-dark .table tbody td a i, html.cx4-dark table.dataTable tbody td a i{ color:#9fb1d0; }

/* ═══════════════════════════════════════════════════════════
   BOTÕES DE EXPORTAÇÃO (DataTables) — toolbar com cara de sistema
   substitui as "pílulas" azuis por uma barra de ferramentas sóbria
   ═══════════════════════════════════════════════════════════ */
.dt-buttons{ gap:6px !important; }
.dt-button, .dt-buttons .btn, button.dt-button{
    background:#fff !important;
    border:1px solid #dce4f0 !important;
    color:#3a4a64 !important;
    border-radius:9px !important;
    font-weight:600 !important;
    font-size:.8rem !important;
    letter-spacing:.01em !important;
    text-transform:none !important;
    padding:.48rem .95rem !important;
    box-shadow:0 1px 2px rgba(16,40,80,.06) !important;
}
.dt-button:hover, button.dt-button:hover, .dt-buttons .btn:hover{
    background:#f4f8ff !important;
    border-color:#bcd4ef !important;
    color:#13478f !important;
    transform:none !important;
    box-shadow:0 4px 10px -5px rgba(30,111,219,.35) !important;
}
.dt-button:focus, .dt-button:active{ outline:0 !important; box-shadow:0 0 0 3px rgba(30,111,219,.16) !important; }
/* ícone colorido por tipo (a label fica sóbria) */
.dt-button.buttons-print::before{ color:#5b6b85 !important; }
.dt-button.buttons-copy::before{ color:#1e6fdb !important; }
.dt-button.buttons-excel::before, .dt-button.buttons-csv::before{ color:#1f9d57 !important; }
.dt-button.buttons-pdf::before{ color:#e5484d !important; }
.dt-button.buttons-colvis::before{ color:#7d57e0 !important; }

/* dark */
html.cx4-dark .dt-button, html.cx4-dark button.dt-button, html.cx4-dark .dt-buttons .btn{
    background:#16223c !important; border-color:rgba(255,255,255,.12) !important; color:#cdd9ec !important;
    box-shadow:0 1px 2px rgba(0,0,0,.4) !important;
}
html.cx4-dark .dt-button:hover, html.cx4-dark button.dt-button:hover, html.cx4-dark .dt-buttons .btn:hover{
    background:#1c2c4d !important; border-color:rgba(93,184,255,.42) !important; color:#fff !important;
}
html.cx4-dark .dt-button.buttons-print::before{ color:#9fb1d0 !important; }
html.cx4-dark .dt-button.buttons-copy::before{ color:#5db8ff !important; }
html.cx4-dark .dt-button.buttons-excel::before{ color:#3fd07f !important; }
html.cx4-dark .dt-button.buttons-pdf::before{ color:#ff6b75 !important; }
html.cx4-dark .dt-button.buttons-colvis::before{ color:#a784f5 !important; }

/* ═══════════════════════════════════════════════════════════
   SISTEMA ROBUSTO — botões (Material Design) + ícones, geral
   ═══════════════════════════════════════════════════════════ */
/* botões secundários (Voltar/Editar/Cancelar...) com superfície real */
.btn-light, .btn-outline-secondary{
    background:#fff !important; border:1px solid #e1e8f2 !important; color:#33425c !important;
    box-shadow:0 1px 2px rgba(16,40,80,.07) !important;
}
.btn-light:hover, .btn-outline-secondary:hover{
    background:#f3f7ff !important; border-color:#c3d7f0 !important; color:#13478f !important;
}
html.cx4-dark .btn-light, html.cx4-dark .btn-outline-secondary{
    background:#16223c !important; border:1px solid rgba(255,255,255,.13) !important; color:#dbe5f5 !important;
    box-shadow:0 1px 2px rgba(0,0,0,.4) !important;
}
html.cx4-dark .btn-light:hover, html.cx4-dark .btn-outline-secondary:hover{
    background:#1f2f50 !important; border-color:rgba(93,184,255,.42) !important; color:#fff !important;
}
/* elevação Material nos botões preenchidos + estados */
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark{
    box-shadow:0 2px 5px -1px rgba(16,40,80,.26), 0 1px 2px rgba(16,40,80,.16) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover, .btn-dark:hover{
    box-shadow:0 7px 16px -5px rgba(16,40,80,.42), 0 2px 4px rgba(16,40,80,.2) !important;
}
.btn:active{ transform:translateY(0) !important; filter:brightness(.97); }
/* ícones dentro de botões: proporcionais e alinhados (cara de Material) */
.btn > i.mdi, .btn > i.ri, .btn i.mdi, .btn i.ri{ font-size:1.08em; line-height:1; vertical-align:middle; }

/* editor de texto (Summernote): mantém o visual padrão original (sem override de cor) */
/* remove os botões de cor VAZIOS que criavam buraco/desalinho na barra */
.note-toolbar .note-color-select-btn{ display:none !important; }
.note-toolbar .note-color .dropdown-toggle{ display:none !important; }
/* dropdowns do editor (Fonte, etc.) aparecem por fora, sem corte e por cima */
.note-editor.note-frame{ overflow:visible !important; }
.note-toolbar{ overflow:visible !important; }
.note-dropdown-menu{ z-index:1060 !important; }
/* quando um dropdown abre: eleva o editor acima dos vizinhos e libera o overflow do card */
.note-editor.note-frame:has([aria-expanded="true"]){ position:relative; z-index:50; }
.card:has(.note-editor [aria-expanded="true"]){ overflow:visible !important; }
.main-content:has(.note-editor [aria-expanded="true"]){ overflow:visible !important; }
/* espaçamento UNIFORME entre todos os botões da barra */
.note-toolbar{ display:flex !important; flex-wrap:wrap; align-items:center; gap:5px !important; padding:6px 8px !important; }
.note-toolbar .note-btn-group{ margin:0 !important; display:inline-flex; gap:5px; }
.note-toolbar .note-btn{ border-radius:7px !important; }

/* ícone-cabeçalho de página sempre branco sobre o bloco azul */
.cx4-page-head-icon i{ color:#fff !important; }
/* ícones dentro de badges coloridos (Missão/Visão/Valores) sempre brancos */
.mvv-card label .ic, .mvv-card label .ic i, .mvv-card label .ic .mdi{ color:#fff !important; }
/* date picker nativo: ícone do calendário visível no dark + alinhamento */
html.cx4-dark input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1) brightness(1.6); opacity:.85; cursor:pointer; }
input[type="date"].form-control{ line-height:1.5; }
/* ═══ Modais "Ação do Plano" e "RAT da Ação" — polimento de layout e botões ═══ */
.cx4-acao-form .card, .cx4-rat-form .card{ box-shadow:none; border:0; margin:0; background:transparent; }
.cx4-acao-form .card-body, .cx4-rat-form .card-body{ padding:2px 2px 0; background:transparent !important; }
/* rótulos: caixa-alta discreta, alinhados */
.cx4-acao-form .col-form-label, .cx4-rat-form .col-form-label{
    font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#6b7c99; line-height:1.3;
}
html.cx4-dark .cx4-acao-form .col-form-label, html.cx4-dark .cx4-rat-form .col-form-label{ color:#9fb2d0; }
/* dica de formato (dd/mm/aaaa) menor e suave, em vez de caixa-alta grande */
.cx4-form-hint{ display:block; font-size:.62rem; font-weight:600; color:#9aa9c2; text-transform:none; letter-spacing:0; margin-top:2px; }
.cx4-acao-form .form-group, .cx4-rat-form .form-group{ margin-bottom:1.05rem; }
.cx4-acao-form .form-control, .cx4-rat-form .form-control{ border-radius:10px; }

/* barra de ações unificada (Salvar / Cancelar / Nova RAT / Associar) */
.cx4-form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:4px 0 0; padding-top:16px; border-top:1px solid #e7edf6; }
html.cx4-dark .cx4-form-actions{ border-top-color:rgba(255,255,255,.09); }
.cx4-form-actions + .cx4-form-actions{ border-top:0; padding-top:8px; margin-top:0; }
.cx4-form-actions .btn{ display:inline-flex; align-items:center; gap:7px; border-radius:10px; font-weight:600; padding:9px 18px; margin:0; }
/* ícones dos botões de ação sempre na cor do texto do botão (evita ícone "apagado") */
.cx4-form-actions .btn i, .cx4-form-actions .btn .mdi{ color:inherit !important; opacity:1 !important; }
.cx4-form-actions .sp{ flex:1 1 auto; }
.cx4-form-actions .grp-lbl{ font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#9aa9c2; margin:0 4px 0 0; align-self:center; }

/* cabeçalho da RAT: acento laranja só no título (sem a barra lateral de altura total) */
.cx4-rat-form .card-body{ border-left:0 !important; }
.cx4-rat-form .rat-head{ display:flex; align-items:center; gap:9px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:#b45309;
    margin:0 0 16px; padding:9px 14px; border-radius:11px; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.28); }
html.cx4-dark .cx4-rat-form .rat-head{ color:#f5c97a; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.3); }
.cx4-rat-form .rat-head small{ font-weight:500; color:#8a9bb8; }

/* upload de arquivo mais apresentável */
.cx4-rat-form .custom-file{ height:auto; }
.cx4-rat-form .custom-file-label{ border-radius:10px; padding:9px 14px; height:auto; }
.cx4-rat-form .custom-file-label::after{ height:100%; display:flex; align-items:center; border-radius:0 10px 10px 0; }

/* ═══ Grids (DataTables): busca / seletor visíveis no modo claro ═══ */
.dataTables_filter input{ border:1px solid #d8e2f0 !important; background:#fff; color:#2b3a52; border-radius:9px; padding:7px 12px; outline:none; transition:.15s; }
.dataTables_filter input:focus{ border-color:#1e6fdb !important; box-shadow:0 0 0 3px rgba(30,111,219,.15); }
.dataTables_length select{ border:1px solid #d8e2f0 !important; border-radius:9px; padding:5px 28px 5px 10px; background-color:#fff; color:#2b3a52; }
html.cx4-dark .dataTables_filter input, html.cx4-dark .dataTables_length select{ background-color:#0f1f3a; border-color:rgba(255,255,255,.14) !important; color:#eaf1fb; }
html.cx4-dark .dataTables_filter input:focus{ border-color:#5db8ff !important; }

/* ═══ Botão "Instalar app" (PWA) — pílula flutuante ═══ */
.cx4-install-btn{ position:fixed; right:14px; bottom:14px; left:auto; z-index:10500; display:inline-flex; align-items:center; gap:6px;
    border:0; cursor:pointer; padding:7px 13px; border-radius:100px; font-weight:600; font-size:.76rem;
    color:#fff; background:#1e6fdb; box-shadow:0 6px 16px -8px rgba(30,111,219,.6); opacity:.72; transition:opacity .15s;
    font-family:'Inter',system-ui,sans-serif; }
.cx4-install-btn:hover{ opacity:1; }
.cx4-install-btn i{ font-size:.95rem; }
@media print{ .cx4-install-btn{ display:none !important; } }

/* ═══ Rodapé sempre no fundo da página (sticky footer) em todas as telas ═══ */
.main-content{ display:flex; flex-direction:column; }
.main-content > .page-content{ flex:1 0 auto; }
.main-content > .footer{ margin-top:auto; flex-shrink:0; }

/* ═══ Seleção de planos (Kanban sem plano escolhido) ═══ */
.cx4-plansel{ padding:4px 2px 24px; }
.cx4-plansel-bar{ display:flex; justify-content:center; margin:6px 0 22px; }
.cx4-plansel-search{ position:relative; width:100%; max-width:460px; }
.cx4-plansel-search .mdi{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#8a9bb8; font-size:1.15rem; }
.cx4-plansel-search input{ width:100%; border:1px solid var(--cx4-line,#e7edf6); border-radius:12px; padding:11px 14px 11px 42px; font-size:.92rem; background:#fff; color:#2b3a52; outline:none; transition:.15s; }
.cx4-plansel-search input:focus{ border-color:#1e6fdb; box-shadow:0 0 0 3px rgba(30,111,219,.15); }
html.cx4-dark .cx4-plansel-search input{ background:#0f1f3a; border-color:rgba(255,255,255,.1); color:#eaf1fb; }

.cx4-plansel-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; }
.cx4-plan-card{ display:flex; flex-direction:column; gap:14px; text-decoration:none; background:#fff; border:1px solid var(--cx4-line,#e7edf6);
    border-radius:16px; padding:18px; transition:transform .16s, box-shadow .16s, border-color .16s; box-shadow:0 1px 2px rgba(10,31,68,.04); }
.cx4-plan-card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(10,31,68,.5); border-color:#bcd4ef; }
html.cx4-dark .cx4-plan-card{ background:#0f1f3a; border-color:rgba(255,255,255,.08); box-shadow:none; }
html.cx4-dark .cx4-plan-card:hover{ border-color:rgba(93,184,255,.4); box-shadow:0 18px 40px -22px rgba(0,0,0,.6); }
.cx4-plan-top{ display:flex; align-items:center; gap:12px; }
.cx4-plan-emp-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; color:#fff; font-weight:800; font-size:1.1rem; display:flex; align-items:center; justify-content:center; }
.cx4-plan-tt{ min-width:0; }
.cx4-plan-nome{ font-weight:700; font-size:1rem; color:var(--navy,#0a1f44); line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
html.cx4-dark .cx4-plan-nome{ color:#eef3fb; }
.cx4-plan-emp{ font-size:.8rem; color:#8a9bb8; margin-top:3px; display:flex; align-items:center; gap:5px; }
.cx4-plan-prog-bar{ height:8px; border-radius:99px; background:#eef2f8; overflow:hidden; }
html.cx4-dark .cx4-plan-prog-bar{ background:rgba(255,255,255,.1); }
.cx4-plan-prog-bar span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#1f9d57,#3fd07f); }
.cx4-plan-prog-meta{ font-size:.78rem; color:#5a6b85; margin-top:6px; } html.cx4-dark .cx4-plan-prog-meta{ color:#9fb2d0; }
.cx4-plan-prog-meta b{ color:var(--navy,#0a1f44); } html.cx4-dark .cx4-plan-prog-meta b{ color:#eef3fb; }
.cx4-plan-go{ display:flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; color:#1e6fdb; margin-top:auto; }
.cx4-plan-go .mdi:last-child{ margin-left:auto; transition:transform .16s; }
.cx4-plan-card:hover .cx4-plan-go .mdi:last-child{ transform:translateX(4px); }
.cx4-plan-ciclo{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:.74rem; font-weight:700;
    color:#7d57e0; background:rgba(125,87,224,.12); border:1px solid rgba(125,87,224,.28); border-radius:100px; padding:4px 11px; margin-top:-4px; }
html.cx4-dark .cx4-plan-ciclo{ color:#b79bff; background:rgba(125,87,224,.18); border-color:rgba(125,87,224,.4); }
.cx4-plan-card.tem-ciclo{ border-color:rgba(125,87,224,.35); }
html.cx4-dark .cx4-plan-card.tem-ciclo{ border-color:rgba(125,87,224,.45); }
.cx4-plansel-empty{ text-align:center; padding:48px 0; color:#8a9bb8; }
.cx4-plansel-empty .mdi{ font-size:2.6rem; opacity:.6; } .cx4-plansel-empty p{ margin:8px 0 0; font-size:.95rem; }

/* toggle "Minhas ações" na barra do Kanban — alinhado com os botões */
.cx4-page-head-actions .cx4-kb-filtro{ display:inline-flex; align-items:center; margin:0 6px 0 0; padding-left:2.6rem; }
.cx4-page-head-actions .cx4-kb-filtro .custom-control-label{ font-size:.86rem; font-weight:600; color:#2b3a52; cursor:pointer; white-space:nowrap; }
html.cx4-dark .cx4-page-head-actions .cx4-kb-filtro .custom-control-label{ color:#cdd9ec; }

/* título da lista de RATs dentro da ação */
.cx4-acao-form .cx4-lista-rats-tit{ font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#6b7c99; margin:18px 0 8px; }
html.cx4-dark .cx4-acao-form .cx4-lista-rats-tit{ color:#9fb2d0; }

/* SweetAlert: popup é branco nos 2 temas → texto sempre escuro (no dark estava apagado) */
html.cx4-dark .swal2-popup .swal2-title{ color:#0a1f44 !important; }
html.cx4-dark .swal2-popup .swal2-html-container,
html.cx4-dark .swal2-popup .swal2-content{ color:#2b3a52 !important; }

/* ═══ Alinhamento de formulário: rótulo no topo quando o campo é alto (editor) ═══ */
.form-group.row:has(.note-editor) > label.col-form-label,
.form-group.row:has(textarea.summernote) > label.col-form-label,
.form-group.row:has(textarea.form-control) > label.col-form-label{
    align-self:flex-start; padding-top:9px;
}
/* rótulos de formulário com peso/cor de sistema (uniformes) */
.col-form-label{ font-weight:600; }

/* sobe o conteúdo: remove o vão de 70px herdado do tema (topbar agora é sticky) */
.page-content{ margin-top:0 !important; }

/* ═══ Kanban (dark): título/descrição do card eram escuros (cor inline) e sumiam ═══ */
html.cx4-dark .cx4-card-title{ color:#eef3fb !important; }
html.cx4-dark .cx4-card-desc{ color:#9fb0cc !important; }
html.cx4-dark .cx4-card-id{ color:#9fb0cc !important; }

/* ═══ Kanban: impede o flex-column de ESPREMER os cards ═══
   (.cx4-list é flex de altura fixa; sem isto, cards com overflow:hidden
    encolhem até o padding e cortam o texto quando há muitos cartões) */
.cx4-list .cx4-card{ flex-shrink:0 !important; }

/* ═══ FIX: caixa "Insert Image" do Summernote fugindo do mouse ═══
   O diálogo é renderizado DENTRO do .card. A reskin tem .card:hover{transform},
   e um ancestral com transform vira containing-block de um filho position:fixed
   → toda vez que o mouse entra/sai do hover do card, o modal é re-ancorado e "pula".
   Removendo o transform dos cards QUE CONTÊM editor, o modal volta a se ancorar na
   viewport e fica parado. */
.card:has(.note-editor),
.card:has(.note-editor):hover{ transform:none !important; }
/* trava o modal do Summernote fixo na viewport e acima dos banners (cookie/instalar) */
.note-modal{ position:fixed !important; z-index:12000 !important; }
.note-modal .note-modal-content{ transform:none !important; }