/* ===================================================================== ESTILO5.CSS - versão do estilo.css para as páginas já migradas para o Bootstrap 5 (o estilo.css continua atendendo as páginas em Bootstrap 3) CAMADA DE BASE: diferenças do Bootstrap 5 em relação ao Bootstrap 3 que mudariam o visual atual. Fica no início do arquivo para que as regras próprias da plataforma, mais abaixo, continuem valendo. ===================================================================== */ label { margin-bottom: 5px; } h1 small, h2 small, h3 small, .h1 small, .h2 small, .h3 small, h1 .small, h2 .small, h3 .small, .h1 .small, .h2 .small, .h3 .small { font-size: 65%; font-weight: 400; line-height: 1; color: #777; } h4 small, h5 small, h6 small, .h4 small, .h5 small, .h6 small, h4 .small, h5 .small, h6 .small, .h4 .small, .h5 .small, .h6 .small { font-size: 75%; font-weight: 400; line-height: 1; color: #777; } /* cores de texto do BS3 (no BS5 elas usam a cor cheia do tema, mais clara). Sem !important, como no BS3: uma regra mais específica da plataforma continua valendo (o bootstrap5.css também teve o !important retirado) */ .text-primary { color: #337ab7; } .text-success { color: #3c763d; } .text-info { color: #31708f; } .text-warning { color: #8a6d3b; } .text-danger { color: #a94442; } /* links de abas e menus com o espaçamento do BS3 */ .nav-link { padding: 10px 15px; } /* abas: o BS3 deixa 2px entre uma aba e outra */ .nav-tabs > .nav-item > .nav-link { margin-right: 2px; } /* tabelas: no BS3 cada célula tem borda em cima; no BS5, embaixo. As bordas do BS3 vêm da seção de componentes, mais abaixo */ .table > :not(caption) > * > * { border-bottom-width: 0; } .table-bordered > :not(caption) > * { border-width: 0; } /* tabelas: no BS3 o fundo (listras, hover e as linhas coloridas da plataforma: .primary, .success...) é pintado na linha . O BS5 pinta cada célula de branco, com uma camada por cima para listra/hover, e isso esconde a cor da linha. As células voltam a ser transparentes; listras e hover vêm das regras do BS3 e do estilo da plataforma */ .table > :not(caption) > * > * { background-color: transparent; box-shadow: none; } /* linhas coloridas (.table-info, .table-success...): o BS5 também troca a cor do texto e da borda da linha; no BS3 só o fundo muda (o fundo vem das regras do BS3 mais abaixo) */ .table-active, .table-primary, .table-success, .table-info, .table-warning, .table-danger { color: inherit; border-color: inherit; } /* no celular, o BS3 não quebra o texto das tabelas responsivas (a tabela rola para o lado); o BS5 quebra */ @media (max-width: 767.98px) { .table-responsive > .table > :not(caption) > * > * { white-space: nowrap; } } /* elementos com os espaçamentos do BS3 (o BS5 zera o topo dos títulos e usa outras medidas) */ h1, .h1, h2, .h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; } h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; } .modal-title, .offcanvas-title, .accordion-header, .popover-header, .card-title { margin-top: 0; } legend { float: none; display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; color: #333; border: 0; border-bottom: 1px solid #e5e5e5; } legend + * { clear: none; } ul, ol { margin-top: 0; margin-bottom: 10px; padding-left: 40px; } ul ul, ul ol, ol ul, ol ol { margin-bottom: 0; } dl { margin-top: 0; margin-bottom: 20px; } dd { margin-bottom: 0; margin-left: 0; } input[type=checkbox], input[type=radio] { margin: 4px 0 0; line-height: normal; } input[type=file] { display: block; } .btn-sm { line-height: 1.5; } .btn-lg { line-height: 1.3333333; } .form-control-sm, .form-select-sm { line-height: 1.5; } .form-control-lg, .form-select-lg { line-height: 1.3333333; } input[type=range] { display: block; width: 100%; } select[multiple], select[size] { height: auto; } blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; } code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; } .text-muted { color: #777; } hr { opacity: 1; border-top-color: #eee; } /* títulos e parágrafos dentro de alertas e listas, como no BS3 */ .alert h4 { margin-top: 0; color: inherit; } .alert .alert-link { font-weight: 700; } .alert > p, .alert > ul { margin-bottom: 0; } .alert > p + p { margin-top: 5px; } .list-group-item-heading { margin-top: 0; margin-bottom: 5px; } .list-group-item-text { margin-bottom: 0; line-height: 1.3; } .bg-primary { color: #fff; } /* colunas fora de uma .row: no BS3 elas flutuavam lado a lado mesmo sem a .row; no BS5 só ficam lado a lado dentro dela */ :not(.row) > :is([class^="col-"], [class*=" col-"]):not(td):not(th) { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } :not(.row) > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12):not(td):not(th) { float: left; } @media (min-width: 768px) { :not(.row) > [class*="col-md-"]:not(td):not(th) { float: left; } } @media (min-width: 992px) { :not(.row) > [class*="col-lg-"]:not(td):not(th) { float: left; } } @media (min-width: 1200px) { :not(.row) > [class*="col-xl-"]:not(td):not(th) { float: left; } } @media (min-width: 1500px) { :not(.row) > [class*="col-xxl-"]:not(td):not(th) { float: left; } } /* célula de tabela com classe de coluna (ex.: ): como no BS3, continua célula (a coluna flutuante viraria bloco e o colspan deixaria de valer) */ table td[class*="col-"], table th[class*="col-"] { position: static; display: table-cell; float: none; } /*
vazio dentro de uma .row: no BS3 a margem que alguma regra desse a ele era absorvida pela limpeza das colunas flutuantes; na .row do BS5 (flex) ele vira um item comum e a margem passa a contar */ .row > div[style*="clear"]:empty { margin: 0 !important; } /*
sem classe dentro de uma .row, envolvendo colunas (ex.:
que o JS mostra/esconde): no BS3 as colunas flutuavam e o invólucro não interferia; na .row do BS5 (flex) ele vira um item de largura total e joga as colunas para outra linha. O invólucro fica "transparente" e as colunas dele passam a ser itens da .row, com o mesmo espaçamento que a .row dá aos filhos diretos (especificidade zero, para as col-* continuarem valendo) */ .row > div:not([class]):has(> [class^="col"], > [class*=" col"]) { display: contents; } :where(.row > div:not([class]) > [class^="col"], .row > div:not([class]) > [class*=" col"]) { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); } /* .input-group usado só como invólucro de uma caixa de marcar com o texto ao lado: no BS3 ele era display:table e o texto corria em linha; no BS5 ele é flex e cada pedaço do texto vira um bloco separado (texto encostado na caixa e quebrado em linhas). Volta a ser bloco comum só quando a caixa é filha direta dele. */ .input-group:has(> input[type=checkbox], > input[type=radio]) { display: block; } /* botão que era .btn-block no BS3 (o conversor troca por w-100): no BS3 ele era bloco, e dois seguidos tinham 5px entre si. Como inline-block, dentro de uma célula de tabela com texto sem quebra ele alargava a tabela no celular */ /* no BS3 o texto do botão não quebra linha (no BS5 quebra) */ .btn { white-space: nowrap; } .btn.w-100 { display: block; } .btn.w-100 + .btn.w-100 { margin-top: 5px; } /* janelas modais: título com a altura de linha do BS3 */ .modal-title { line-height: 1.42857143; } /* --------------------------------------------------------------------- COMPONENTES DO BS3 QUE O BS5 REMOVEU E A PLATAFORMA CONTINUA USANDO (.panel -> .card, .badge, .pagination no formato antigo, .hidden, bordas e cores de linha das tabelas etc.). Regras copiadas do bootstrap.css 3.3.6, com .in trocado por .show. Quando uma página passar a usar o componente equivalente do BS5, a regra daqui pode sair. --------------------------------------------------------------------- */ @media print { .table {border-collapse:collapse!important} .table td, .table th {background-color:#fff!important} } .list-inline {padding-left:0; margin-left:-5px; list-style:none} .list-inline>li {display:inline-block; padding-right:5px; padding-left:5px} .table {width:100%; max-width:100%; margin-bottom:20px} .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {padding:8px; line-height:1.42857143; vertical-align:top; border-top:1px solid #ddd} .table>thead>tr>th {vertical-align:bottom; border-bottom:2px solid #ddd} .table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {border-top:0} .table>tbody+tbody {border-top:2px solid #ddd} .table .table {background-color:#fff} .table-bordered {border:1px solid #ddd} .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {border:1px solid #ddd} .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {border-bottom-width:2px} .table-striped>tbody>tr:nth-of-type(odd) {background-color:#f9f9f9} .table-hover>tbody>tr:hover {background-color:#f5f5f5} .table>tbody>tr.table-active>td, .table>tbody>tr.table-active>th, .table>tbody>tr>td.table-active, .table>tbody>tr>th.table-active, .table>tfoot>tr.table-active>td, .table>tfoot>tr.table-active>th, .table>tfoot>tr>td.table-active, .table>tfoot>tr>th.table-active, .table>thead>tr.table-active>td, .table>thead>tr.table-active>th, .table>thead>tr>td.table-active, .table>thead>tr>th.table-active {background-color:#f5f5f5} .table-hover>tbody>tr.table-active:hover>td, .table-hover>tbody>tr.table-active:hover>th, .table-hover>tbody>tr:hover>.table-active, .table-hover>tbody>tr>td.table-active:hover, .table-hover>tbody>tr>th.table-active:hover {background-color:#e8e8e8} .table>tbody>tr.table-success>td, .table>tbody>tr.table-success>th, .table>tbody>tr>td.table-success, .table>tbody>tr>th.table-success, .table>tfoot>tr.table-success>td, .table>tfoot>tr.table-success>th, .table>tfoot>tr>td.table-success, .table>tfoot>tr>th.table-success, .table>thead>tr.table-success>td, .table>thead>tr.table-success>th, .table>thead>tr>td.table-success, .table>thead>tr>th.table-success {background-color:#dff0d8} .table-hover>tbody>tr.table-success:hover>td, .table-hover>tbody>tr.table-success:hover>th, .table-hover>tbody>tr:hover>.table-success, .table-hover>tbody>tr>td.table-success:hover, .table-hover>tbody>tr>th.table-success:hover {background-color:#d0e9c6} .table>tbody>tr.table-info>td, .table>tbody>tr.table-info>th, .table>tbody>tr>td.table-info, .table>tbody>tr>th.table-info, .table>tfoot>tr.table-info>td, .table>tfoot>tr.table-info>th, .table>tfoot>tr>td.table-info, .table>tfoot>tr>th.table-info, .table>thead>tr.table-info>td, .table>thead>tr.table-info>th, .table>thead>tr>td.table-info, .table>thead>tr>th.table-info {background-color:#d9edf7} .table-hover>tbody>tr.table-info:hover>td, .table-hover>tbody>tr.table-info:hover>th, .table-hover>tbody>tr:hover>.table-info, .table-hover>tbody>tr>td.table-info:hover, .table-hover>tbody>tr>th.table-info:hover {background-color:#c4e3f3} .table>tbody>tr.table-warning>td, .table>tbody>tr.table-warning>th, .table>tbody>tr>td.table-warning, .table>tbody>tr>th.table-warning, .table>tfoot>tr.table-warning>td, .table>tfoot>tr.table-warning>th, .table>tfoot>tr>td.table-warning, .table>tfoot>tr>th.table-warning, .table>thead>tr.table-warning>td, .table>thead>tr.table-warning>th, .table>thead>tr>td.table-warning, .table>thead>tr>th.table-warning {background-color:#fcf8e3} .table-hover>tbody>tr.table-warning:hover>td, .table-hover>tbody>tr.table-warning:hover>th, .table-hover>tbody>tr:hover>.table-warning, .table-hover>tbody>tr>td.table-warning:hover, .table-hover>tbody>tr>th.table-warning:hover {background-color:#faf2cc} .table>tbody>tr.table-danger>td, .table>tbody>tr.table-danger>th, .table>tbody>tr>td.table-danger, .table>tbody>tr>th.table-danger, .table>tfoot>tr.table-danger>td, .table>tfoot>tr.table-danger>th, .table>tfoot>tr>td.table-danger, .table>tfoot>tr>th.table-danger, .table>thead>tr.table-danger>td, .table>thead>tr.table-danger>th, .table>thead>tr>td.table-danger, .table>thead>tr>th.table-danger {background-color:#f2dede} .table-hover>tbody>tr.table-danger:hover>td, .table-hover>tbody>tr.table-danger:hover>th, .table-hover>tbody>tr:hover>.table-danger, .table-hover>tbody>tr>td.table-danger:hover, .table-hover>tbody>tr>th.table-danger:hover {background-color:#ebcccc} .table-responsive {min-height:.01%; overflow-x:auto} @media screen and (max-width:767px) { .table-responsive {width:100%; margin-bottom:15px; overflow-y:hidden; -ms-overflow-style:-ms-autohiding-scrollbar; border:1px solid #ddd} .table-responsive>.table {margin-bottom:0} .table-responsive>.table>tbody>tr>td, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>td, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>thead>tr>th {white-space:nowrap} .table-responsive>.table-bordered {border:0} .table-responsive>.table-bordered>tbody>tr>td:first-child, .table-responsive>.table-bordered>tbody>tr>th:first-child, .table-responsive>.table-bordered>tfoot>tr>td:first-child, .table-responsive>.table-bordered>tfoot>tr>th:first-child, .table-responsive>.table-bordered>thead>tr>td:first-child, .table-responsive>.table-bordered>thead>tr>th:first-child {border-left:0} .table-responsive>.table-bordered>tbody>tr>td:last-child, .table-responsive>.table-bordered>tbody>tr>th:last-child, .table-responsive>.table-bordered>tfoot>tr>td:last-child, .table-responsive>.table-bordered>tfoot>tr>th:last-child, .table-responsive>.table-bordered>thead>tr>td:last-child, .table-responsive>.table-bordered>thead>tr>th:last-child {border-right:0} .table-responsive>.table-bordered>tbody>tr:last-child>td, .table-responsive>.table-bordered>tbody>tr:last-child>th, .table-responsive>.table-bordered>tfoot>tr:last-child>td, .table-responsive>.table-bordered>tfoot>tr:last-child>th {border-bottom:0} } * > .dropdown-toggle.show.btn-primary {color:#fff; background-color:#286090; border-color:#204d74} * > .dropdown-toggle.show.btn-primary.focus, * > .dropdown-toggle.show.btn-primary:focus, * > .dropdown-toggle.show.btn-primary:hover {color:#fff; background-color:#204d74; border-color:#122b40} * > .dropdown-toggle.show.btn-primary {background-image:none} .btn-primary .badge {color:#337ab7; background-color:#fff} * > .dropdown-toggle.show.btn-success {color:#fff; background-color:#449d44; border-color:#398439} * > .dropdown-toggle.show.btn-success.focus, * > .dropdown-toggle.show.btn-success:focus, * > .dropdown-toggle.show.btn-success:hover {color:#fff; background-color:#398439; border-color:#255625} * > .dropdown-toggle.show.btn-success {background-image:none} .btn-success .badge {color:#5cb85c; background-color:#fff} * > .dropdown-toggle.show.btn-info {color:#fff; background-color:#31b0d5; border-color:#269abc} * > .dropdown-toggle.show.btn-info.focus, * > .dropdown-toggle.show.btn-info:focus, * > .dropdown-toggle.show.btn-info:hover {color:#fff; background-color:#269abc; border-color:#1b6d85} * > .dropdown-toggle.show.btn-info {background-image:none} .btn-info .badge {color:#5bc0de; background-color:#fff} * > .dropdown-toggle.show.btn-warning {color:#fff; background-color:#ec971f; border-color:#d58512} * > .dropdown-toggle.show.btn-warning.focus, * > .dropdown-toggle.show.btn-warning:focus, * > .dropdown-toggle.show.btn-warning:hover {color:#fff; background-color:#d58512; border-color:#985f0d} * > .dropdown-toggle.show.btn-warning {background-image:none} .btn-warning .badge {color:#f0ad4e; background-color:#fff} * > .dropdown-toggle.show.btn-danger {color:#fff; background-color:#c9302c; border-color:#ac2925} * > .dropdown-toggle.show.btn-danger.focus, * > .dropdown-toggle.show.btn-danger:focus, * > .dropdown-toggle.show.btn-danger:hover {color:#fff; background-color:#ac2925; border-color:#761c19} * > .dropdown-toggle.show.btn-danger {background-image:none} .btn-danger .badge {color:#d9534f; background-color:#fff} .dropdown-menu {position:absolute; top:100%; left:0; z-index:1000; display:none; float:left; min-width:160px; padding:5px 0; margin:2px 0 0; font-size:14px; text-align:left; list-style:none; background-color:#fff; -webkit-background-clip:padding-box; background-clip:padding-box; border:1px solid #ccc; border:1px solid rgba(0,0,0,.15); border-radius:4px; -webkit-box-shadow:0 6px 12px rgba(0,0,0,.175); box-shadow:0 6px 12px rgba(0,0,0,.175)} .dropdown-menu .divider {height:1px; margin:9px 0; overflow:hidden; background-color:#e5e5e5} .dropdown-menu>li>a {display:block; padding:3px 20px; clear:both; font-weight:400; line-height:1.42857143; color:#333; white-space:nowrap} .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {color:#262626; text-decoration:none; background-color:#f5f5f5} .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {color:#fff; text-decoration:none; background-color:#337ab7; outline:0} .dropdown-menu>.disabled>a, .dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover {color:#777} .dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover {text-decoration:none; cursor:not-allowed; background-color:transparent; background-image:none} * > .dropdown-menu.show {display:block} * > a.show {outline:0} .dropdown-menu-right {right:0; left:auto} .nav {padding-left:0; margin-bottom:0; list-style:none} .nav>li {position:relative; display:block} .nav>li>a {position:relative; display:block; padding:10px 15px} .nav>li>a:focus, .nav>li>a:hover {text-decoration:none; background-color:#eee} .nav>li.disabled>a {color:#777} .nav>li.disabled>a:focus, .nav>li.disabled>a:hover {color:#777; text-decoration:none; cursor:not-allowed; background-color:transparent} .nav * > a.show, .nav * > a.show:focus, .nav * > a.show:hover {background-color:#eee; border-color:#337ab7} .nav>li>a>img {max-width:none} .pagination {display:inline-block; padding-left:0; margin:20px 0; border-radius:4px} .pagination>li {display:inline} .pagination>li>a, .pagination>li>span {position:relative; float:left; padding:6px 12px; margin-left:-1px; line-height:1.42857143; color:#337ab7; text-decoration:none; background-color:#fff; border:1px solid #ddd} .pagination>li:first-child>a, .pagination>li:first-child>span {margin-left:0; border-top-left-radius:4px; border-bottom-left-radius:4px} .pagination>li:last-child>a, .pagination>li:last-child>span {border-top-right-radius:4px; border-bottom-right-radius:4px} .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {z-index:2; color:#23527c; background-color:#eee; border-color:#ddd} .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {z-index:3; color:#fff; cursor:default; background-color:#337ab7; border-color:#337ab7} .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {color:#777; cursor:not-allowed; background-color:#fff; border-color:#ddd} .pagination-lg>li>a, .pagination-lg>li>span {padding:10px 16px; font-size:18px; line-height:1.3333333} .pagination-lg>li:first-child>a, .pagination-lg>li:first-child>span {border-top-left-radius:6px; border-bottom-left-radius:6px} .pagination-lg>li:last-child>a, .pagination-lg>li:last-child>span {border-top-right-radius:6px; border-bottom-right-radius:6px} .pagination-sm>li>a, .pagination-sm>li>span {padding:5px 10px; font-size:12px; line-height:1.5} .pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span {border-top-left-radius:3px; border-bottom-left-radius:3px} .pagination-sm>li:last-child>a, .pagination-sm>li:last-child>span {border-top-right-radius:3px; border-bottom-right-radius:3px} .badge {display:inline-block; min-width:10px; padding:3px 7px; font-size:12px; font-weight:700; line-height:1; color:#fff; text-align:center; white-space:nowrap; vertical-align:middle; background-color:#777; border-radius:10px} .badge:empty {display:none} .btn .badge {position:relative; top:-1px} a.badge:focus, a.badge:hover {color:#fff; text-decoration:none; cursor:pointer} .card {margin-bottom:20px; background-color:#fff; border:1px solid transparent; border-radius:4px; -webkit-box-shadow:0 1px 1px rgba(0,0,0,.05); box-shadow:0 1px 1px rgba(0,0,0,.05)} .card-body {padding:15px} .card-header {padding:10px 15px; border-bottom:1px solid transparent; border-top-left-radius:3px; border-top-right-radius:3px} .card-header>.dropdown .dropdown-toggle {color:inherit} .card-title {margin-top:0; margin-bottom:0; font-size:16px; color:inherit} .card-title>.small, .card-title>.small>a, .card-title>a, .card-title>small, .card-title>small>a {color:inherit} .card-footer {padding:10px 15px; background-color:#f5f5f5; border-top:1px solid #ddd; border-bottom-right-radius:3px; border-bottom-left-radius:3px} .card>.table, .card>.table-responsive>.table {margin-bottom:0} .card>.table caption, .card>.table-responsive>.table caption {padding-right:15px; padding-left:15px} .card>.table-responsive:first-child>.table:first-child, .card>.table:first-child {border-top-left-radius:3px; border-top-right-radius:3px} .card>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child, .card>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child, .card>.table:first-child>tbody:first-child>tr:first-child, .card>.table:first-child>thead:first-child>tr:first-child {border-top-left-radius:3px; border-top-right-radius:3px} .card>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child, .card>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child, .card>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child, .card>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child, .card>.table:first-child>tbody:first-child>tr:first-child td:first-child, .card>.table:first-child>tbody:first-child>tr:first-child th:first-child, .card>.table:first-child>thead:first-child>tr:first-child td:first-child, .card>.table:first-child>thead:first-child>tr:first-child th:first-child {border-top-left-radius:3px} .card>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child, .card>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child, .card>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child, .card>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child, .card>.table:first-child>tbody:first-child>tr:first-child td:last-child, .card>.table:first-child>tbody:first-child>tr:first-child th:last-child, .card>.table:first-child>thead:first-child>tr:first-child td:last-child, .card>.table:first-child>thead:first-child>tr:first-child th:last-child {border-top-right-radius:3px} .card>.table-responsive:last-child>.table:last-child, .card>.table:last-child {border-bottom-right-radius:3px; border-bottom-left-radius:3px} .card>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child, .card>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child, .card>.table:last-child>tbody:last-child>tr:last-child, .card>.table:last-child>tfoot:last-child>tr:last-child {border-bottom-right-radius:3px; border-bottom-left-radius:3px} .card>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child, .card>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child, .card>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child, .card>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child, .card>.table:last-child>tbody:last-child>tr:last-child td:first-child, .card>.table:last-child>tbody:last-child>tr:last-child th:first-child, .card>.table:last-child>tfoot:last-child>tr:last-child td:first-child, .card>.table:last-child>tfoot:last-child>tr:last-child th:first-child {border-bottom-left-radius:3px} .card>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child, .card>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child, .card>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child, .card>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child, .card>.table:last-child>tbody:last-child>tr:last-child td:last-child, .card>.table:last-child>tbody:last-child>tr:last-child th:last-child, .card>.table:last-child>tfoot:last-child>tr:last-child td:last-child, .card>.table:last-child>tfoot:last-child>tr:last-child th:last-child {border-bottom-right-radius:3px} .card>.card-body+.table, .card>.card-body+.table-responsive, .card>.table+.card-body, .card>.table-responsive+.card-body {border-top:1px solid #ddd} .card>.table>tbody:first-child>tr:first-child td, .card>.table>tbody:first-child>tr:first-child th {border-top:0} .card>.table-bordered, .card>.table-responsive>.table-bordered {border:0} .card>.table-bordered>tbody>tr>td:first-child, .card>.table-bordered>tbody>tr>th:first-child, .card>.table-bordered>tfoot>tr>td:first-child, .card>.table-bordered>tfoot>tr>th:first-child, .card>.table-bordered>thead>tr>td:first-child, .card>.table-bordered>thead>tr>th:first-child, .card>.table-responsive>.table-bordered>tbody>tr>td:first-child, .card>.table-responsive>.table-bordered>tbody>tr>th:first-child, .card>.table-responsive>.table-bordered>tfoot>tr>td:first-child, .card>.table-responsive>.table-bordered>tfoot>tr>th:first-child, .card>.table-responsive>.table-bordered>thead>tr>td:first-child, .card>.table-responsive>.table-bordered>thead>tr>th:first-child {border-left:0} .card>.table-bordered>tbody>tr>td:last-child, .card>.table-bordered>tbody>tr>th:last-child, .card>.table-bordered>tfoot>tr>td:last-child, .card>.table-bordered>tfoot>tr>th:last-child, .card>.table-bordered>thead>tr>td:last-child, .card>.table-bordered>thead>tr>th:last-child, .card>.table-responsive>.table-bordered>tbody>tr>td:last-child, .card>.table-responsive>.table-bordered>tbody>tr>th:last-child, .card>.table-responsive>.table-bordered>tfoot>tr>td:last-child, .card>.table-responsive>.table-bordered>tfoot>tr>th:last-child, .card>.table-responsive>.table-bordered>thead>tr>td:last-child, .card>.table-responsive>.table-bordered>thead>tr>th:last-child {border-right:0} .card>.table-bordered>tbody>tr:first-child>td, .card>.table-bordered>tbody>tr:first-child>th, .card>.table-bordered>thead>tr:first-child>td, .card>.table-bordered>thead>tr:first-child>th, .card>.table-responsive>.table-bordered>tbody>tr:first-child>td, .card>.table-responsive>.table-bordered>tbody>tr:first-child>th, .card>.table-responsive>.table-bordered>thead>tr:first-child>td, .card>.table-responsive>.table-bordered>thead>tr:first-child>th {border-bottom:0} .card>.table-bordered>tbody>tr:last-child>td, .card>.table-bordered>tbody>tr:last-child>th, .card>.table-bordered>tfoot>tr:last-child>td, .card>.table-bordered>tfoot>tr:last-child>th, .card>.table-responsive>.table-bordered>tbody>tr:last-child>td, .card>.table-responsive>.table-bordered>tbody>tr:last-child>th, .card>.table-responsive>.table-bordered>tfoot>tr:last-child>td, .card>.table-responsive>.table-bordered>tfoot>tr:last-child>th {border-bottom:0} .card>.table-responsive {margin-bottom:0; border:0} .nav:after, .nav:before, .card-body:after, .card-body:before {display:table; content:" "} .nav:after, .card-body:after {clear:both} .hidden {display:none!important} /* moldura das páginas (card .painelprincipal, antigo panel): em bloco, como no BS3. O .card do BS5 é flex e, no celular, onde o cabeçalho e o conteúdo não têm espaçamento interno, isso somaria 10px no topo das páginas */ .card.painelprincipal { display: block; } .container:before, .container:after, .container-fluid:before, .container-fluid:after, .card-body:before, .card-body:after { display: table; content: " "; } .container:after, .container-fluid:after, .card-body:after { clear: both; } /* Tom Select: o tema do BS5 troca a setinha do campo por uma imagem (a mesma do .form-select). Aqui volta a setinha do tema anterior, que vira para cima com a lista aberta e é ajustada mais abaixo */ .ts-wrapper.single:not(.form-control, .form-select) .ts-control { background-image: none; } .ts-wrapper.single .ts-control::after { content: " "; display: block; position: absolute; top: 50%; width: 0; height: 0; border-style: solid; } /* tabela compacta (table-sm, antigo table-condensed): 5px nas células, como no BS3 */ .table-sm>tbody>tr>td, .table-sm>tbody>tr>th, .table-sm>tfoot>tr>td, .table-sm>tfoot>tr>th, .table-sm>thead>tr>td, .table-sm>thead>tr>th {padding:5px} /* ===================================================================== FIM DA CAMADA DE BASE - daqui para baixo, o conteúdo do estilo.css ===================================================================== */ /* ===================================================================== CLASSES DO BS3 MANTIDAS COMO CLASSES DA PLATAFORMA O BS5 não tem equivalente com o mesmo visual: .well, .btn-default, .label, .text-justify e as cores .card-default/.card-primary/.card-success (que vieram do .panel). Regras copiadas do bootstrap.css 3.3.6 (saíram da camada de compatibilidade); o visual final de várias delas é ajustado mais abaixo. ===================================================================== */ @media print { .label {border:1px solid #000} } .text-justify {text-align:justify} .btn-default {color:#333; background-color:#fff; border-color:#ccc} .btn-default.focus, .btn-default:focus {color:#333; background-color:#e6e6e6; border-color:#8c8c8c} .btn-default:hover {color:#333; background-color:#e6e6e6; border-color:#adadad} .btn-default.active, .btn-default:active, * > .dropdown-toggle.show.btn-default {color:#333; background-color:#e6e6e6; border-color:#adadad} .btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, * > .dropdown-toggle.show.btn-default.focus, * > .dropdown-toggle.show.btn-default:focus, * > .dropdown-toggle.show.btn-default:hover {color:#333; background-color:#d4d4d4; border-color:#8c8c8c} .btn-default.active, .btn-default:active, * > .dropdown-toggle.show.btn-default {background-image:none} .btn-default.disabled.focus, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled].focus, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover {background-color:#fff; border-color:#ccc} .btn-default .badge {color:#fff; background-color:#333} .label {display:inline; padding:.2em .6em .3em; font-size:75%; font-weight:700; line-height:1; color:#fff; text-align:center; white-space:nowrap; vertical-align:baseline; border-radius:.25em} a.label:focus, a.label:hover {color:#fff; text-decoration:none; cursor:pointer} .label:empty {display:none} .btn .label {position:relative; top:-1px} .label-default {background-color:#777} .label-default[href]:focus, .label-default[href]:hover {background-color:#5e5e5e} .label-success {background-color:#5cb85c} .label-success[href]:focus, .label-success[href]:hover {background-color:#449d44} .label-warning {background-color:#f0ad4e} .label-warning[href]:focus, .label-warning[href]:hover {background-color:#ec971f} .label-danger {background-color:#d9534f} .label-danger[href]:focus, .label-danger[href]:hover {background-color:#c9302c} .card-default {border-color:#ddd} .card-default>.card-header {color:#333; background-color:#f5f5f5; border-color:#ddd} .card-default>.card-header .badge {color:#f5f5f5; background-color:#333} .card-primary {border-color:#337ab7} .card-primary>.card-header {color:#fff; background-color:#337ab7; border-color:#337ab7} .card-primary>.card-header .badge {color:#337ab7; background-color:#fff} .card-success {border-color:#d6e9c6} .card-success>.card-header {color:#3c763d; background-color:#dff0d8; border-color:#d6e9c6} .card-success>.card-header .badge {color:#dff0d8; background-color:#3c763d} .well {min-height:20px; padding:19px; margin-bottom:20px; background-color:#f5f5f5; border:1px solid #e3e3e3; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05); box-shadow:inset 0 1px 1px rgba(0,0,0,.05)} .well blockquote {border-color:#ddd; border-color:rgba(0,0,0,.15)} .well-sm {padding:9px; border-radius:3px} /* xs até 767 sm de 768 até 991 md de 992 até 1199 lg de 1200 em diante */ body {background-color: #dee2e6; color: rgba(0,0,0,.8); font-family: 'Roboto', sans-serif; } legend { color: rgba(0,0,0,.8);} .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-weight: 400;} b, strong { font-weight: 500; } label {font-weight: 500; color: #445244; } .fundo-vermelho { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #c30; border-radius: 3px; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); } .fundo-verde { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #3c763d; border-radius: 3px; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); } .fundo-amarelo { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #D59F00; border-radius: 3px; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); } .fundo-azul { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #428bca; border-radius: 3px; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); } .fonte16 {font-size: 16px;} .topmenos20 { margin-top: -20px; } .modal-body-filtro { max-height: calc(100vh - 200px); overflow-y: auto; } /*centraliza verticalmente elementos apenas em dispositivos maiores*/ @media(min-width:768px) { .vcenter-computer { display: inline-block; vertical-align: middle; float: none; } } .rodape {text-align: center; margin: 15px 0 20px 0; } .swal2-popup { font-size: 1rem !important; } #loading {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100%; background: rgba(0,0,0,0.75) url(../images/loading.gif) no-repeat center center;z-index: 10000; } #loadingCidade { margin-top: 35px; } #loadingCidade2 { float: right; margin-left: 10px; } #loadingCidadebusca { margin-top: 2px; float: left; } .nopadding { padding: 0 } .noresize { resize: none; } .conteudo { display: none; } .alert { margin-bottom: 10px; } .card { margin-bottom: 10px; } .small { font-size: 90%; } @media(min-width:768px) { .card { margin-bottom: 20px; background-color: #fff; border-radius: 10px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 1px 2px rgba(0, 0, 0, .15); box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 1px 2px rgba(0, 0, 0, .15); border:0; } .card-body { padding:15px 20px 15px 20px; } .card-primary>.card-header { color: #333 !important; background-color: #f8f8f8 !important; border-color: #ddd !important; padding: 10px 15px !important; border-bottom: 1px solid #DDD !important; border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; border-top: 1px solid #DDD !important; } } /*somente xs*/ @media(max-width:767px) { .card-body { padding:0; } .card-primary>.card-header { color: transparent!important; background-color: transparent !important; border-color: transparent !important; padding: 0 !important; border-bottom: transparent !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: 0 !important; margin-bottom:10px; } } .card-atalho { background:#fff; border:1px solid #e8e8e8; border-radius:6px; box-shadow:none; margin-bottom:18px; text-align:center; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .card-atalho:hover { border-color:#cfcfcf; box-shadow:0 3px 10px rgba(0,0,0,.08); transform:translateY(-2px); } .card-atalho .card-body { min-height:145px; padding:18px 10px 15px !important; } .card-atalho img { height:82px; width:auto; max-width:100%; margin-bottom:8px; } .card-atalho .small { min-height:32px; font-size:12px; line-height:1.35; color:#555; } a:hover .card-atalho .small { color:#333; } @media(min-width:992px) { .card.card-atalho { height:auto; } } .text-cinza {color: #777;} table.alinhar-dados-tabela-verticalmente td { vertical-align: middle !important; float: none; } .opcoes_relatorios a,.opcoes_relatorios .lista { background: #FFF; border-bottom: 1px solid #ececec; display: block; margin: 0; padding: 12px 12px; text-decoration: none; font-weight: normal; } .opcoes_relatorios li { margin: 0; padding: 0; list-style: none; } .img-wrapper-associado { position: relative; width: 100%; /* Largura dinâmica com base na coluna */ padding-top: 100%; /* Mantém um quadrado proporcional com base na largura */ overflow: hidden; } .img-square-associado { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; /* Mantém a proporção da imagem */ object-position: center; /* Centraliza a imagem */ } /* PRIMARY */ .nav-tabs.nav-primary > li > a.active, .nav-tabs.nav-primary > li > a.active:focus, .nav-tabs.nav-primary > li > a.active:hover { color: #FFFFFF !important; background-color: #0d6efd !important; /* cor base primary */ border: 1px solid #0b5ed7 !important; /* borda um pouco mais escura */ } .nav-tabs.nav-primary > li > a { color: #0a58ca !important; background-color: #f5f5f5 !important; border: 1px solid transparent !important; border-radius: 4px 4px 0 0 !important; } .nav-tabs.nav-primary > li > a:hover { background-color: #e6e6e6 !important; color: #0a58ca !important; /* tom mais escuro no hover */ } /* SUCCESS */ .nav-tabs.nav-success > li > a.active, .nav-tabs.nav-success > li > a.active:focus, .nav-tabs.nav-success > li > a.active:hover { color: #FFFFFF !important; background-color: #3a9761 !important; /* cor base success */ border: 1px solid #318054 !important; } .nav-tabs.nav-success > li > a { color: #3a9761 !important; background-color: #f5f5f5 !important; border: 1px solid transparent !important; border-radius: 4px 4px 0 0 !important; } .nav-tabs.nav-success > li > a:hover { background-color: #e6e6e6 !important; color: #276644 !important; } /* INFO */ .nav-tabs.nav-info > li > a.active, .nav-tabs.nav-info > li > a.active:focus, .nav-tabs.nav-info > li > a.active:hover { color: #FFFFFF !important; background-color: #167da1 !important; /* cor base info */ border: 1px solid #136b89 !important; /* borda mais escura */ } .nav-tabs.nav-info > li > a { color: #167da1 !important; background-color: #f5f5f5 !important; border: 1px solid transparent !important; border-radius: 4px 4px 0 0 !important; } .nav-tabs.nav-info > li > a:hover { background-color: #e6e6e6 !important; color: #105a72 !important; /* tom mais escuro no hover */ } /* DANGER */ .nav-tabs.nav-danger > li > a.active, .nav-tabs.nav-danger > li > a.active:focus, .nav-tabs.nav-danger > li > a.active:hover { color: #FFFFFF !important; background-color: #e72822 !important; /* cor base danger */ border: 1px solid #c3211d !important; } .nav-tabs.nav-danger > li > a { color: #e72822 !important; background-color: #f5f5f5 !important; border: 1px solid transparent !important; border-radius: 4px 4px 0 0 !important; } .nav-tabs.nav-danger > li > a:hover { background-color: #e6e6e6 !important; color: #a91c19 !important; } /* WARNING */ .nav-tabs.nav-warning > li > a.active, .nav-tabs.nav-warning > li > a.active:focus, .nav-tabs.nav-warning > li > a.active:hover { color: #000000 !important; background-color: #ffc107 !important; /* amarelo warning */ border: 1px solid #e0a800 !important; } .nav-tabs.nav-warning > li > a { color: #856404 !important; background-color: #f5f5f5 !important; border: 1px solid transparent !important; border-radius: 4px 4px 0 0 !important; } .nav-tabs.nav-warning > li > a:hover { background-color: #e6e6e6 !important; color: #664d03 !important; } .form-control, .form-select { -webkit-box-shadow: none; box-shadow: none; } .form-control:focus, .form-select:focus { border-color: #66afe9; outline: 0; box-shadow: 0 0 0 3px rgba(102,175,233,.25), 0 4px 10px rgba(102,175,233,.15); } .faixa-titulo-pagina { padding: 12px 15px; background-color: #eef2f7; border-left: 4px solid #5a6b7d; border-radius: 3px; color: #3f4a56; } .faixa-titulo-pagina strong { color: #263240; } /* Espacamento uniforme entre os criterios do filtro de busca */ .modal-body-filtro .row > *:not(.clearfix) { margin-top: 12px; } .modal-body-filtro .row > *:first-child { margin-top: 0; } /* Avisos e notas dentro dos criterios */ .modal-body-filtro .row .alert, .modal-body-filtro .row small, .modal-body-filtro .row .small { display: block; margin-top: 6px; margin-bottom: 6px; } /* Avisos dentro dos criterios */ .modal-body-filtro .text-info { margin-bottom: 8px; } /* Opcoes com caixa de selecao dentro dos criterios */ .modal-body-filtro .checkbox { padding-top: 2px; margin-top: 4px; margin-bottom: 6px; } /* Caixa de cada opcao nos criterios com selecao multipla */ .modal-body-filtro .well { padding: 4px 10px; margin-bottom: 8px; } /* Notas com exemplos abaixo dos campos */ .modal-body-filtro .nota-exemplo { margin-top: 6px; margin-bottom: 10px; } /* NO FILTRO RECOLHIDO, so aparece o que estiver marcado como criterio-simples. Assim os sub-blocos internos de cada criterio (as caixas de selecao dos idiomas, do estado civil, e assim por diante) somem junto, sem precisar de marcacao. */ .modal-body-filtro.filtro-recolhido > .row > *:not(.criterio-simples):not(.clearfix) { display: none !important; } .titulo-grupo-filtro { font-size: 12px; color: #999; text-transform: none; border-top: 1px dotted #e5e5e5; padding-top: 10px; margin-top: 18px; } .link-mais-criterios { display: inline-block; margin-top: 14px; font-size: 13px; text-decoration: none; } .link-mais-criterios:hover { text-decoration: underline; } /* * Component: Listagens de candidatos (Painel do Associado) * -------------------------------------------------------- * Usado em: exibe_curriculos_vaga e buscar_curriculos */ .divider { height: 1px; width:100%; display:block; /* for use on default inline elements like span */ margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } /* CAIXA DE COMANDOS DA LISTAGEM */ .caixa-comandos { padding: 15px; background-color: #f7f9fa; border: 1px solid #dde3e6; border-radius: 4px; } .divisor-comandos { height: 1px; width: 100%; margin: 10px 0 12px 0; background-color: #dde3e6; } /* BOTOES DA BARRA DE ACOES */ .btn.botao-modo-compacto { background-color: #4a4f54; border-color: #3d4145; color: #fff; } .btn.botao-modo-compacto:hover, .btn.botao-modo-compacto:focus, .btn.botao-modo-compacto:active, .btn.botao-modo-compacto:focus:active { background-color: #3d4145; border-color: #303336; color: #fff; } .badge-selecionados { position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; padding: 0; border-radius: 50%; background-color: #c62828; border: 2px solid #fff; color: #fff; font-size: 11px; font-weight: bold; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.25); } .btn.botao-comparar { position: relative; } /* MODO COMPACTO DA LISTAGEM */ .lista-candidatos.modo-compacto .bs-callout { padding-bottom: 8px; margin-bottom: 8px !important; } .lista-candidatos.modo-compacto .col-lg-2 .img-thumbnail { width: 55px; height: 55px; } .lista-candidatos.modo-compacto .col-lg-2 .avatar-iniciais { width: 55px; height: 55px; font-size: 19px; } .lista-candidatos.modo-compacto .col-lg-2 div.small, .lista-candidatos.modo-compacto .caixa-favorito, .lista-candidatos.modo-compacto .bloco-analise, .lista-candidatos.modo-compacto .bloco-analise-ia, .lista-candidatos.modo-compacto tbody tr:not(.linha-essencial), .lista-candidatos.modo-compacto .coluna-acoes .col-lg-12:not(.acao-essencial) { display: none; } .lista-candidatos.modo-compacto table.table > tbody > tr > td { padding: 3px 8px; border-top: 0; } /* FAIXA DE SELECAO DO CANDIDATO */ .lista-candidatos .bs-callout { padding-top: 0 !important; overflow: hidden; } .lista-candidatos .faixa-selecao { display: flex; align-items: center; justify-content: center; height: 30px; font-weight: normal; margin: 15px 0 15px 0; background-color: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.10); border-radius: 3px; cursor: pointer; } .lista-candidatos .faixa-selecao:hover { background-color: rgba(0,0,0,0.09); } .lista-candidatos .faixa-selecao:has(input:checked) { background-color: #d9edf7; border-color: #9acfea; } .lista-candidatos .faixa-selecao input { margin: 0; width: 18px; height: 18px; cursor: pointer; } @media (min-width: 992px) { .lista-candidatos .bs-callout { position: relative; --largura-faixa: clamp(40px, 5vw, 85px); padding-top: 15px !important; padding-left: calc(var(--largura-faixa) + 20px); } .lista-candidatos .faixa-selecao { position: absolute; left: 0; top: 0; bottom: 0; width: var(--largura-faixa); height: auto; margin: 0; padding: 0; background-color: rgba(0,0,0,0.03); border: 0; border-right: 1px solid rgba(0,0,0,0.08); border-radius: 0; } .lista-candidatos.modo-compacto .bs-callout { padding-top: 8px !important; } } @media (max-width: 767px) { .caixa-comandos .btn { display: block; width: 100%; margin-right: 0 !important; } .caixa-comandos .badge-selecionados { right: -5px; } } .btn.botao-desmarcar-todos { background-color: #fdeaea; border-color: #ef9a9a; color: #c62828; } .btn.botao-desmarcar-todos:hover, .btn.botao-desmarcar-todos:focus, .btn.botao-desmarcar-todos:active, .btn.botao-desmarcar-todos:focus:active { background-color: #f9dcdc; border-color: #e57373; color: #b71c1c; } /*somente xs*/ @media(max-width:767px) { body { background: none; background-color: #FFFFFF; } .card-body:first-child { padding: 0; padding-top:10px; padding-bottom: 10px; } .painelprincipal { background: none; background-color: #FFFFFF; margin: 0; margin-top: 10px; margin-bottom:0; padding: 0; border:0; } } /*sm para cima */ @media(min-width:768px) { .rodape { margin-top: 0; } } /*abaixo de md */ @media(max-width:991px) { .centralizar { text-align: center; } .collapse.show { display: block !important; } } /*md para cima*/ @media(min-width:992px) { .equal{ display: -ms-flexbox; display: -webkit-flex; display: flex; } .card { width: 100%; } .equal > * > .card { height: 100%; } .margin-top-md { margin-top: 10px !important; } } .contador_caracteres { font-size: 12px; font-style: italic; float: right; color: #535362; } /* Alert Success */ .alert-success { color: #318054 !important; /* texto em tom mais escuro do verde */ background-color: #d9f2e4 !important; /* fundo verde bem claro */ border-color: #b8e6cd !important; /* borda em verde suave */ } /* Alert Primary */ .alert-primary { color: #0a58ca !important; /* texto azul mais escuro */ background-color: #cfe2ff !important; /* fundo azul claro */ border-color: #b6d4fe !important; /* borda intermediária */ } /* Alert Info */ .alert-info { color: #105a72 !important; /* texto em azul info mais escuro */ background-color: #d7eff6 !important; /* fundo azul claro suave */ border-color: #b5e0ec !important; /* borda intermediária */ } /* Alert Warning */ .alert-warning { color: #664d03 !important; background-color: #fff3cd !important; border-color: #ffecb5 !important; } /* Alert Danger */ .alert-danger { color: #842029 !important; /* texto em vermelho escuro */ background-color: #f5d0cf !important; /* fundo vermelho claro */ border-color: #eba8a6 !important; /* borda avermelhada */ } .alert-cinza { color: #525557; background-color: #ededed; border-color: #dadcdd; } /* Botão Primary (Bootstrap 5 style) */ .btn-primary { background-color: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background-color: #0b5ed7 !important; /* hover mais escuro */ border-color: #0a58ca !important; color: #fff !important; } /* Botão Info */ .btn-info { background-color: #167da1 !important; /* cor base info */ border-color: #136b89 !important; /* borda mais escura */ color: #fff !important; } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active { background-color: #136b89 !important; /* escurece no hover */ border-color: #105a72 !important; color: #fff !important; } /* Botão Success */ .btn-success { background-color: #3a9761 !important; border-color: #318054 !important; color: #fff !important; } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active { background-color: #318054 !important; border-color: #276644 !important; color: #fff !important; } /* Botão Danger */ .btn-danger { background-color: #e72822 !important; border-color: #c3211d !important; color: #fff !important; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active { background-color: #c3211d !important; border-color: #a91c19 !important; color: #fff !important; } /* Botão Cinza */ .btn-cinza { background-color: #f4f4f4 !important; /* base cinza muito claro */ border-color: #e0e0e0 !important; /* borda levemente mais escura */ color: #444 !important; /* texto preto para contraste */ } .btn-cinza:hover, .btn-cinza:focus, .btn-cinza:active, .btn-cinza.active { background-color: #e0e0e0 !important; /* hover escurece um pouco */ border-color: #cccccc !important; color: #444 !important; } * > .dropdown-toggle.show.btn-info { color: #fff !important; background-color: #167da1 !important; /* cor base info */ border-color: #136b89 !important; } * > .dropdown-toggle.show.btn-info { color: #fff !important; background-color: #167da1 !important; /* cor base info */ border-color: #136b89 !important; } * > .dropdown-toggle.show.btn-info.focus, * > .dropdown-toggle.show.btn-info:focus, * > .dropdown-toggle.show.btn-info:hover { color: #fff !important; background-color: #136b89 !important; /* mais escuro no hover */ border-color: #105a72 !important; } .table {margin-bottom: 10px;} .alert-purple { border-color: #694D9F; background: #694D9F; color: #fff; } .alert-info-alt {border-color: #B4E1E4; background: #81c7e1; color: #fff; } .alert-danger-alt { border-color: #B63E5A; background: #E26868; color: #fff; } .alert-warning-alt { border-color: #F3F3EB; background: #E9CEAC; color: #fff; } .alert-success-alt { border-color: #19B99A; background: #20A286; color: #fff; } .alert-empresa { border-color: #337ab7; background: #337ab7; color: #fff; } .bs-callout { padding: 20px; margin: 0 0 10px 0; border: 1px solid #eee; border-left-width: 5px; border-radius: 3px; } .bs-callout h4 { margin-top: 0; margin-bottom: 5px; } .bs-callout p:last-child { margin-bottom: 0; } .bs-callout code { border-radius: 3px; } .bs-callout+.bs-callout { margin-top: -5px; } .bs-callout-default { border-left-color: #777; } .bs-callout-default h4 { color: #777; } .bs-callout-primary { border-left-color: #0d6efd !important; } .bs-callout-primary h4 { color: #0d6efd !important; } .bs-callout-success { border-left-color: #318054 !important; } .bs-callout-success h4 { color: #318054 !important; } .bs-callout-danger { border-left-color: #842029 !important; } .bs-callout-danger h4 { color: #842029 !important; } .bs-callout-warning { border-left-color: #664d03 !important; } .bs-callout-warning h4 { color: #664d03 !important; } .bs-callout-info { border-left-color: #167da1 !important; } .bs-callout-info h4 { color: #167da1 !important; } .bs-callout .table{ margin-bottom: 0; } .well { margin-bottom: 10px;} legend { margin-bottom: 10px;} /* Botão switch: trilho com a bola por dentro; cinza desligado e verde (--ace-success) ligado */ .botao-switch { line-height: 0; position: relative; } /* o campo fica invisível, mas continua recebendo o foco pelo teclado (Tab + barra de espaço) */ .botao-switch > input[type="checkbox"] { height: 1px; margin: 0; opacity: 0; pointer-events: none; position: absolute; width: 1px; } .botao-switch > label { background-color: transparent !important; /* anula o fundo da classe label-success no próprio label */ cursor: pointer; display: inline-block; height: 24px; margin: 0; position: relative; vertical-align: middle; width: 44px; } /* trilho */ .botao-switch > label::before { background: #CBD5E1; border-radius: 24px; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; transition: background-color 0.2s ease, box-shadow 0.2s ease; } /* bola */ .botao-switch > label::after { background: #FFFFFF; border-radius: 50%; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3); content: ''; height: 18px; left: 3px; position: absolute; top: 3px; transition: transform 0.2s ease; width: 18px; } .botao-switch > label:hover::before { background: #B8C4D3; } .botao-switch > input[type="checkbox"]:checked + label::before { background: var(--ace-success); } .botao-switch > input[type="checkbox"]:checked + label:hover::before { background: var(--ace-success-strong); } .botao-switch > input[type="checkbox"]:checked + label::after { transform: translateX(20px); } /* anel de foco: aparece só quando o campo é alcançado pelo teclado */ .botao-switch > input[type="checkbox"]:focus-visible + label::before { box-shadow: 0 0 0 3px var(--ace-focus-strong); } .botao-switch:has(> input[type="checkbox"].disabled) { cursor: not-allowed; } .botao-switch > input[type="checkbox"].disabled { visibility: hidden; /* sai da sequência do Tab */ } .botao-switch > input[type="checkbox"].disabled + label { opacity: 0.5; /* Reduz a opacidade para dar aparência de desabilitado */ pointer-events: none; /* Impede interações do usuário */ } /* Linha PRIMARY */ .table.table-striped .table-primary { background-color: #e7f1ff !important; /* fundo bem claro do primary */ border-color: #cfe5ff !important; /* borda intermediária */ color: #000000 !important; } .table.table-striped .table-primary:hover, .table.table-striped .table-primary:focus, .table.table-striped .table-primary.table-active, .table.table-striped .table-primary:active, .table.table-striped * > .dropdown-toggle.show.table-primary { background-color: #cfe5ff !important; /* hover mais escuro */ border-color: #b6d8ff !important; color: #000000 !important; } /* Linha SUCCESS */ .table.table-striped .table-success { background-color: #d1e7dd !important; /* fundo claro do success */ border-color: #badbcc !important; color: #000000 !important; } .table.table-striped .table-success:hover, .table.table-striped .table-success:focus, .table.table-striped .table-success.table-active, .table.table-striped .table-success:active, .table.table-striped * > .dropdown-toggle.show.table-success { background-color: #badbcc !important; border-color: #9ec5b6 !important; color: #000000 !important; } /* Linha INFO */ .table.table-striped .table-info { background-color: #cff4fc !important; /* fundo claro do info */ border-color: #b6effb !important; color: #000000 !important; } .table.table-striped .table-info:hover, .table.table-striped .table-info:focus, .table.table-striped .table-info.table-active, .table.table-striped .table-info:active, .table.table-striped * > .dropdown-toggle.show.table-info { background-color: #b6effb !important; border-color: #9ee6f8 !important; color: #000000 !important; } /* Linha WARNING */ .table.table-striped .table-warning { background-color: #fff3cd !important; /* fundo claro do warning */ border-color: #ffecb5 !important; color: #000000 !important; } .table.table-striped .table-warning:hover, .table.table-striped .table-warning:focus, .table.table-striped .table-warning.table-active, .table.table-striped .table-warning:active, .table.table-striped * > .dropdown-toggle.show.table-warning { background-color: #ffe69c !important; border-color: #ffda6a !important; color: #000000 !important; } /* Linha DANGER */ .table.table-striped .table-danger { background-color: #f8d7da !important; /* fundo claro do danger */ border-color: #f5c2c7 !important; color: #000000 !important; } .table.table-striped .table-danger:hover, .table.table-striped .table-danger:focus, .table.table-striped .table-danger.table-active, .table.table-striped .table-danger:active, .table.table-striped * > .dropdown-toggle.show.table-danger { background-color: #f1aeb5 !important; border-color: #ea868f !important; color: #000000 !important; } /* Linha INFO */ .table.table-striped .table-info { background-color: #e4e3f0 !important; /* tom claro do #6e6b94 */ border-color: #cbc9e0 !important; color: #000000 !important; } .table.table-striped .table-info:hover, .table.table-striped .table-info:focus, .table.table-striped .table-info.table-active, .table.table-striped .table-info:active, .table.table-striped * > .dropdown-toggle.show.table-info { background-color: #cbc9e0 !important; border-color: #b2b0cf !important; color: #000000 !important; } /* Linha SUCCESS */ .table.table-striped .table-success { background-color: #d9f2e4 !important; /* tom claro do #3a9761 */ border-color: #b8e6cd !important; color: #000000 !important; } .table.table-striped .table-success:hover, .table.table-striped .table-success:focus, .table.table-striped .table-success.table-active, .table.table-striped .table-success:active, .table.table-striped * > .dropdown-toggle.show.table-success { background-color: #b8e6cd !important; border-color: #9cdab7 !important; color: #000000 !important; } /* Linha WARNING */ .table.table-striped .table-warning { background-color: #fff3cd !important; /* padrão amarelo suave */ border-color: #ffecb5 !important; color: #000000 !important; } .table.table-striped .table-warning:hover, .table.table-striped .table-warning:focus, .table.table-striped .table-warning.table-active, .table.table-striped .table-warning:active, .table.table-striped * > .dropdown-toggle.show.table-warning { background-color: #ffe69c !important; border-color: #ffda6a !important; color: #000000 !important; } /* Linha DANGER */ .table.table-striped .table-danger { background-color: #f5d0cf !important; /* tom claro do #e72822 */ border-color: #eba8a6 !important; color: #000000 !important; } .table.table-striped .table-danger:hover, .table.table-striped .table-danger:focus, .table.table-striped .table-danger.table-active, .table.table-striped .table-danger:active, .table.table-striped * > .dropdown-toggle.show.table-danger { background-color: #eba8a6 !important; border-color: #e1827e !important; color: #000000 !important; } .text-primary { color: #0a58ca !important; } .text-success { color: #3a9761 !important; } .text-info { color: #167da1 !important; } .text-danger { color: #e72822 !important; } .text-warning { color: #856404 !important; } .xdsoft_autocomplete, .xdsoft_autocomplete div, .xdsoft_autocomplete span{ /* -moz-box-sizing: border-box !important; box-sizing: border-box !important;*/ } .xdsoft_autocomplete{ display:inline; position:relative; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; text-align: start; font-family: 'Roboto', sans-serif; font-size: 14px; } .xdsoft_autocomplete .xdsoft_input{ position:relative; z-index:2; } .xdsoft_autocomplete .xdsoft_autocomplete_dropdown{ position:absolute; border: 1px solid #ccc; border-top-color: #d9d9d9; box-shadow: 0 2px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2); cursor: default; display:none; z-index: 1001; margin-top:-1px; background-color:#fff; min-width:100%; overflow:auto; } .xdsoft_autocomplete .xdsoft_autocomplete_hint{ position:absolute; z-index:1; color:#ccc !important; -webkit-text-fill-color:#ccc !important; text-fill-color:#ccc !important; overflow:hidden !important; white-space: pre !important; } .xdsoft_autocomplete .xdsoft_autocomplete_hint span{ color:transparent; opacity: 0.0; } .xdsoft_autocomplete .xdsoft_autocomplete_dropdown > .xdsoft_autocomplete_copyright{ color:#ddd; font-size:10px; text-decoration:none; right:5px; position:absolute; margin-top:-15px; z-index:1002; } .xdsoft_autocomplete .xdsoft_autocomplete_dropdown > div{ background:#fff; white-space: nowrap; cursor: pointer; line-height: 1.5em; padding: 2px 0px 2px 0px; } .xdsoft_autocomplete .xdsoft_autocomplete_dropdown > div.active{ background: #0097CF; color: #FFFFFF; } /* ===================================================================== TEMA ACE CURRÍCULOS - DEMAIS PAINÉIS --------------------------------------------------------------------- Camada visual aplicada sobre o Bootstrap 3, usando a mesma paleta adotada no Painel da Entidade (AdminLTE.css) e na tela de login (estilo_login_entidade.css). Atinge todas as páginas que carregam este arquivo: os painéis administrador, associado, candidato, compartilhamento, parceria, precadastro, profissional, vagas e cancelamento, além das páginas de relatório e impressão do Painel da Entidade. As telas de login e demais páginas não logadas dos painéis da entidade, do associado, do candidato e do compartilhamento não são afetadas: elas possuem arquivos próprios (estilo_login_*.css) e não carregam mais este arquivo. Todo o tema está concentrado neste bloco, no final do arquivo, e apenas sobrescreve regras anteriores. Para desativá-lo, basta comentar ou remover o trecho até o fim do arquivo. As regras de botões e alertas usam !important porque as regras originais deste mesmo arquivo também usam. ===================================================================== */ :root{ --ace-blue: #1775B9; --ace-blue-dark: #125D93; --ace-blue-darker: #0F4F7D; --ace-blue-pale: #EAF3FB; --ace-blue-soft: #BFD9EF; --ace-navy: #1F2044; --ace-text: #1E293B; --ace-text-muted: #64748B; --ace-label: #334155; --ace-border: #E1E8F0; --ace-border-soft: #EDF1F5; --ace-border-input: #CBD5E1; --ace-surface: #F8FAFC; --ace-surface-hover: #F1F5F9; --ace-table-head: #F3F6F9; --ace-table-stripe: #FAFBFD; --ace-table-hover: #F1F6FB; --ace-success: #1E8E5A; --ace-success-strong: #1A7F50; --ace-success-dark: #146A42; --ace-success-darker: #115A38; --ace-danger: #D64545; --ace-danger-dark: #B83737; --ace-danger-pale: #FBEAEA; --ace-danger-soft: #F1C4C4; --ace-warning: #D98E04; --ace-warning-dark: #8A5A00; --ace-warning-pale: #FEF6E4; --ace-warning-soft: #F3D9A4; --ace-focus: rgba(23, 117, 185, .18); --ace-focus-strong: rgba(23, 117, 185, .35); --ace-radius: 12px; --ace-radius-control: 8px; --ace-radius-small: 6px; } /* --------------------------------------------------------------------- Base: fundo, texto, links e títulos --------------------------------------------------------------------- */ body{ background-color: #E7ECF1; color: var(--ace-text); } a{ color: var(--ace-blue); } a:hover, a:active, a:focus{ color: var(--ace-blue-dark); } /* O anel de foco padrao do navegador (quase preto) aparece tambem no clique de mouse. Aqui ele e removido nesse caso e mantido, na cor da ACE, quando o foco vem pelo teclado. */ a:focus{ outline: none; } a:focus-visible{ outline: 2px solid var(--ace-blue); outline-offset: 2px; border-radius: 3px; } label{ color: var(--ace-label); } legend{ color: var(--ace-navy); border-bottom-color: var(--ace-border); } hr{ border-top-color: var(--ace-border-soft); } .text-cinza{ color: var(--ace-text-muted); } /* --------------------------------------------------------------------- Painéis --------------------------------------------------------------------- */ @media(min-width:768px){ .card{ border-radius: var(--ace-radius); -webkit-box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08); } .card-primary > .card-header{ color: var(--ace-navy) !important; background-color: var(--ace-surface) !important; border-color: var(--ace-border-soft) !important; border-top-color: var(--ace-border-soft) !important; border-top-left-radius: calc(var(--ace-radius) - 1px) !important; border-top-right-radius: calc(var(--ace-radius) - 1px) !important; } } .card-footer{ background-color: var(--ace-surface); border-top-color: var(--ace-border-soft); border-bottom-left-radius: calc(var(--ace-radius) - 1px); border-bottom-right-radius: calc(var(--ace-radius) - 1px); } .card-default{ border-color: var(--ace-border); } .card-default > .card-header{ color: var(--ace-navy); background-color: var(--ace-surface); border-color: var(--ace-border-soft); } .card-info{ border-color: var(--ace-blue-soft); } .card-info > .card-header{ color: var(--ace-blue-dark); background-color: var(--ace-blue-pale); border-color: var(--ace-blue-soft); } .card-success{ border-color: #BFE3CF; } .card-success > .card-header{ color: var(--ace-success-dark); background-color: #E6F5EC; border-color: #BFE3CF; } .card-warning{ border-color: var(--ace-warning-soft); } .card-warning > .card-header{ color: var(--ace-warning-dark); background-color: var(--ace-warning-pale); border-color: var(--ace-warning-soft); } .card-danger{ border-color: var(--ace-danger-soft); } .card-danger > .card-header{ color: var(--ace-danger-dark); background-color: var(--ace-danger-pale); border-color: var(--ace-danger-soft); } /* Atalhos da página inicial */ .card-atalho{ border-color: var(--ace-border); border-radius: var(--ace-radius); } .card-atalho:hover{ border-color: var(--ace-blue-soft); -webkit-box-shadow: 0 4px 14px rgba(15, 23, 42, .09); box-shadow: 0 4px 14px rgba(15, 23, 42, .09); } @media(min-width:992px){ .card.card-atalho{ border-radius: var(--ace-radius); } } /* --------------------------------------------------------------------- Faixa de título e caixas auxiliares --------------------------------------------------------------------- */ .faixa-titulo-pagina{ background-color: var(--ace-surface); border-left-color: var(--ace-blue); border-radius: var(--ace-radius-control); color: var(--ace-label); } .faixa-titulo-pagina strong{ color: var(--ace-navy); } .well{ background-color: var(--ace-surface); border-color: var(--ace-border); border-radius: var(--ace-radius); -webkit-box-shadow: none; box-shadow: none; } /* A faixa colorida lateral vira uma sombra interna, que acompanha o arredondamento. A cor vem da variável --ace-callout-accent. */ .bs-callout{ --ace-callout-accent: var(--ace-border-input); border: 1px solid var(--ace-border); border-left-color: var(--ace-callout-accent); border-radius: var(--ace-radius); -webkit-box-shadow: inset 3px 0 0 var(--ace-callout-accent); box-shadow: inset 3px 0 0 var(--ace-callout-accent); } .bs-callout-default{ --ace-callout-accent: #94A3B8; } .bs-callout-primary, .bs-callout-info{ --ace-callout-accent: var(--ace-blue); } .bs-callout-success{ --ace-callout-accent: var(--ace-success); } .bs-callout-danger{ --ace-callout-accent: var(--ace-danger); } .bs-callout-warning{ --ace-callout-accent: var(--ace-warning); } .bs-callout-default h4{ color: var(--ace-text-muted); } .bs-callout-primary h4, .bs-callout-info h4{ color: var(--ace-blue); } .bs-callout-success h4{ color: var(--ace-success); } .bs-callout-danger h4{ color: var(--ace-danger); } .bs-callout-warning h4{ color: var(--ace-warning-dark); } /* Pergunta com erro no teste de perfil comportamental: destaque até ser corrigida */ .bs-callout.pergunta-com-erro{ --ace-callout-accent: var(--ace-danger); border-left-color: var(--ace-danger) !important; background-color: var(--ace-danger-pale); } /* --------------------------------------------------------------------- Botões Hierarquia: sólido apenas para ações principais (success/primary); info, warning e danger em versão suave; default/cinza em branco. --------------------------------------------------------------------- */ .btn{ border-radius: var(--ace-radius-control); font-weight: 500; -webkit-transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } .btn-sm, .btn-xs, .btn-group-sm > .btn, .btn-group-xs > .btn{ border-radius: var(--ace-radius-small); } .btn:focus-visible{ outline: none; -webkit-box-shadow: 0 0 0 3px var(--ace-focus-strong); box-shadow: 0 0 0 3px var(--ace-focus-strong); } /* Sucesso (ação principal: salvar, enviar, confirmar) */ .btn-success{ color: #FFFFFF !important; background-color: var(--ace-success-strong) !important; border-color: var(--ace-success-strong) !important; } .btn-success:hover, .btn-success:focus, .btn-success.focus{ color: #FFFFFF !important; background-color: var(--ace-success-dark) !important; border-color: var(--ace-success-dark) !important; } .btn-success:active, .btn-success.active, * > .dropdown-toggle.show.btn-success, .btn-success:active:hover, .btn-success.active:hover, .btn-success:active:focus, .btn-success.active:focus, * > .dropdown-toggle.show.btn-success:hover, * > .dropdown-toggle.show.btn-success:focus, * > .dropdown-toggle.show.btn-success.focus{ color: #FFFFFF !important; background-color: var(--ace-success-darker) !important; border-color: var(--ace-success-darker) !important; background-image: none; } .btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus{ color: #FFFFFF !important; background-color: var(--ace-success-strong) !important; border-color: var(--ace-success-strong) !important; } /* Primário (buscar, acessar, ação azul) */ .btn-primary{ color: #FFFFFF !important; background-color: var(--ace-blue) !important; border-color: var(--ace-blue) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus{ color: #FFFFFF !important; background-color: var(--ace-blue-dark) !important; border-color: var(--ace-blue-dark) !important; } .btn-primary:active, .btn-primary.active, * > .dropdown-toggle.show.btn-primary, .btn-primary:active:hover, .btn-primary.active:hover, .btn-primary:active:focus, .btn-primary.active:focus, * > .dropdown-toggle.show.btn-primary:hover, * > .dropdown-toggle.show.btn-primary:focus, * > .dropdown-toggle.show.btn-primary.focus{ color: #FFFFFF !important; background-color: var(--ace-blue-darker) !important; border-color: var(--ace-blue-darker) !important; background-image: none; } .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus{ color: #FFFFFF !important; background-color: var(--ace-blue) !important; border-color: var(--ace-blue) !important; } /* Info (ações utilitárias: imprimir, exportar) - versão suave */ .btn-info{ color: var(--ace-blue-dark) !important; background-color: var(--ace-blue-pale) !important; border-color: var(--ace-blue-soft) !important; } .btn-info:hover, .btn-info:focus, .btn-info.focus{ color: var(--ace-blue-darker) !important; background-color: #DCEBF8 !important; border-color: #9CC4E6 !important; } .btn-info:active, .btn-info.active, * > .dropdown-toggle.show.btn-info, .btn-info:active:hover, .btn-info.active:hover, .btn-info:active:focus, .btn-info.active:focus, * > .dropdown-toggle.show.btn-info:hover, * > .dropdown-toggle.show.btn-info:focus, * > .dropdown-toggle.show.btn-info.focus{ color: var(--ace-blue-darker) !important; background-color: #CFE3F5 !important; border-color: #9CC4E6 !important; background-image: none; } .btn-info.disabled, .btn-info[disabled], fieldset[disabled] .btn-info, .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled.focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info.focus{ color: var(--ace-blue-dark) !important; background-color: var(--ace-blue-pale) !important; border-color: var(--ace-blue-soft) !important; } /* Atenção - versão suave */ .btn-warning{ color: var(--ace-warning-dark) !important; background-color: var(--ace-warning-pale) !important; border-color: var(--ace-warning-soft) !important; } .btn-warning:hover, .btn-warning:focus, .btn-warning.focus{ color: #6E4800 !important; background-color: #FCEDC8 !important; border-color: #EACB85 !important; } .btn-warning:active, .btn-warning.active, * > .dropdown-toggle.show.btn-warning, .btn-warning:active:hover, .btn-warning.active:hover, .btn-warning:active:focus, .btn-warning.active:focus, * > .dropdown-toggle.show.btn-warning:hover, * > .dropdown-toggle.show.btn-warning:focus, * > .dropdown-toggle.show.btn-warning.focus{ color: #6E4800 !important; background-color: #F9E3AE !important; border-color: #EACB85 !important; background-image: none; } .btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-warning, .btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled.focus, .btn-warning[disabled].focus, fieldset[disabled] .btn-warning.focus{ color: var(--ace-warning-dark) !important; background-color: var(--ace-warning-pale) !important; border-color: var(--ace-warning-soft) !important; } /* Perigo (excluir, fechar, cancelar) - versão suave */ .btn-danger{ color: var(--ace-danger-dark) !important; background-color: var(--ace-danger-pale) !important; border-color: var(--ace-danger-soft) !important; } .btn-danger:hover, .btn-danger:focus, .btn-danger.focus{ color: #9E2C2C !important; background-color: #F7DADA !important; border-color: #E8A9A9 !important; } .btn-danger:active, .btn-danger.active, * > .dropdown-toggle.show.btn-danger, .btn-danger:active:hover, .btn-danger.active:hover, .btn-danger:active:focus, .btn-danger.active:focus, * > .dropdown-toggle.show.btn-danger:hover, * > .dropdown-toggle.show.btn-danger:focus, * > .dropdown-toggle.show.btn-danger.focus{ color: #9E2C2C !important; background-color: #F2CACA !important; border-color: #E8A9A9 !important; background-image: none; } .btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger, .btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled.focus, .btn-danger[disabled].focus, fieldset[disabled] .btn-danger.focus{ color: var(--ace-danger-dark) !important; background-color: var(--ace-danger-pale) !important; border-color: var(--ace-danger-soft) !important; } /* Neutros (btn-default e btn-cinza) - branco com borda */ .btn-default{ color: var(--ace-navy) !important; background-color: #FFFFFF !important; border-color: var(--ace-border-input) !important; } .btn-default:hover, .btn-default:focus, .btn-default.focus{ color: var(--ace-navy) !important; background-color: var(--ace-surface) !important; border-color: #94A3B8 !important; } .btn-default:active, .btn-default.active, * > .dropdown-toggle.show.btn-default, .btn-default:active:hover, .btn-default.active:hover, .btn-default:active:focus, .btn-default.active:focus, * > .dropdown-toggle.show.btn-default:hover, * > .dropdown-toggle.show.btn-default:focus, * > .dropdown-toggle.show.btn-default.focus{ color: var(--ace-navy) !important; background-color: var(--ace-surface-hover) !important; border-color: #94A3B8 !important; background-image: none; } .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus{ color: var(--ace-navy) !important; background-color: #FFFFFF !important; border-color: var(--ace-border-input) !important; } .btn-cinza{ color: var(--ace-navy) !important; background-color: #FFFFFF !important; border-color: var(--ace-border-input) !important; } .btn-cinza:hover, .btn-cinza:focus, .btn-cinza.focus{ color: var(--ace-navy) !important; background-color: var(--ace-surface) !important; border-color: #94A3B8 !important; } .btn-cinza:active, .btn-cinza.active, * > .dropdown-toggle.show.btn-cinza, .btn-cinza:active:hover, .btn-cinza.active:hover, .btn-cinza:active:focus, .btn-cinza.active:focus, * > .dropdown-toggle.show.btn-cinza:hover, * > .dropdown-toggle.show.btn-cinza:focus, * > .dropdown-toggle.show.btn-cinza.focus{ color: var(--ace-navy) !important; background-color: var(--ace-surface-hover) !important; border-color: #94A3B8 !important; background-image: none; } .btn-cinza.disabled, .btn-cinza[disabled], fieldset[disabled] .btn-cinza, .btn-cinza.disabled:hover, .btn-cinza[disabled]:hover, fieldset[disabled] .btn-cinza:hover, .btn-cinza.disabled:focus, .btn-cinza[disabled]:focus, fieldset[disabled] .btn-cinza:focus, .btn-cinza.disabled.focus, .btn-cinza[disabled].focus, fieldset[disabled] .btn-cinza.focus{ color: var(--ace-navy) !important; background-color: #FFFFFF !important; border-color: var(--ace-border-input) !important; } /* --------------------------------------------------------------------- Formulários --------------------------------------------------------------------- */ .form-control, .form-select{ color: var(--ace-text); border-color: var(--ace-border-input); border-radius: var(--ace-radius-control); -webkit-box-shadow: none; box-shadow: none; } .form-control:focus, .form-select:focus{ border-color: var(--ace-blue); -webkit-box-shadow: 0 0 0 3px var(--ace-focus); box-shadow: 0 0 0 3px var(--ace-focus); } .form-control::placeholder, .form-select::placeholder{ color: #94A3B8; opacity: 1; } .form-control[disabled], .form-select[disabled], .form-control[readonly], .form-select[readonly], fieldset[disabled] .form-control, fieldset[disabled] .form-select{ background-color: var(--ace-surface-hover); } .input-sm, .form-group-sm .form-control, .form-group-sm .form-select, .input-group-sm > .form-control, .input-group-sm > .form-select{ border-radius: var(--ace-radius-small); } .input-group .input-group-text{ color: #475569; background-color: var(--ace-surface); border-color: var(--ace-border-input); border-radius: var(--ace-radius-control); } .input-group .input-group-text:first-child{ border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group .input-group-text:last-child{ border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group .input-group-text:not(:first-child):not(:last-child){ border-radius: 0; } /* Tom Select com a mesma aparência dos inputs e do bootstrap-select. O tema do Tom Select usa rem e, no Bootstrap 3, o html tem font-size 10px, por isso as medidas são fixadas aqui em px */ .ts-wrapper.single .ts-control{ --ts-pr-caret: 30px; min-height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: var(--ace-navy); background-color: #FFFFFF; border-color: var(--ace-border-input); border-radius: var(--ace-radius-control); -webkit-box-shadow: none; box-shadow: none; } .ts-wrapper.single:not(.focus) .ts-control:hover{ border-color: #94A3B8; } .ts-wrapper.focus .ts-control, .plugin-dropdown_input.focus.dropdown-active .ts-control{ border-color: var(--ace-blue); -webkit-box-shadow: 0 0 0 3px var(--ace-focus); box-shadow: 0 0 0 3px var(--ace-focus); } .ts-wrapper.single .ts-control::after{ margin-top: -2px; border-width: 4px 4px 0 4px; border-color: var(--ace-navy) transparent transparent transparent; } .ts-wrapper.single .ts-control:not(.rtl)::after{ right: 12px; } .ts-wrapper.single.dropdown-active .ts-control::after{ margin-top: -2px; border-width: 0 4px 4px 4px; border-color: transparent transparent var(--ace-navy) transparent; } .ts-dropdown{ margin-top: 2px; font-size: 14px; color: var(--ace-text); border-color: var(--ace-border); border-radius: 10px; overflow: hidden; -webkit-box-shadow: 0 10px 30px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06); box-shadow: 0 10px 30px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06); } .ts-dropdown .option, .ts-dropdown .no-results{ padding: 5px 12px; line-height: 1.42857143; } .ts-dropdown .active{ color: var(--ace-navy); background-color: var(--ace-surface-hover); } .plugin-dropdown_input .dropdown-input-wrap{ padding: 8px; border-bottom: 1px solid var(--ace-border-soft); } .plugin-dropdown_input .dropdown-input{ height: 32px; padding: 5px 10px; font-size: 14px; color: var(--ace-text); border: 1px solid var(--ace-border-input); border-radius: var(--ace-radius-small); } .plugin-dropdown_input.focus .ts-dropdown .dropdown-input{ border-color: var(--ace-blue); -webkit-box-shadow: 0 0 0 3px var(--ace-focus); box-shadow: 0 0 0 3px var(--ace-focus); } /* Tom Select de seleção múltipla (ex.: área de interesse), no mesmo padrão */ .ts-wrapper.multi .ts-control{ --ts-pr-min: 30px; min-height: 34px; padding: 5px 12px 2px 12px; font-size: 14px; line-height: 1.42857143; color: var(--ace-navy); background-color: #FFFFFF; border-color: var(--ace-border-input); border-radius: var(--ace-radius-control); -webkit-box-shadow: none; box-shadow: none; } .ts-wrapper.multi.has-items .ts-control{ padding: 5px 12px 2px 6px; } .ts-wrapper.multi:not(.focus) .ts-control:hover{ border-color: #94A3B8; } .ts-wrapper.multi .ts-control > .item{ margin: 0 4px 3px 0; padding: 1px 8px; font-size: 13px; color: var(--ace-navy); background: var(--ace-blue-pale); border: 1px solid var(--ace-blue-soft); border-radius: var(--ace-radius-small); } .ts-wrapper.multi .ts-control > .item.active{ color: #FFFFFF; background: var(--ace-blue); border-color: var(--ace-blue); } .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{ margin-left: 6px; border-left-color: var(--ace-blue-soft); } .ts-dropdown .optgroup-header{ padding: 6px 12px 2px; font-size: 12px; font-weight: 700; color: var(--ace-text-muted); } .ts-dropdown .optgroup::before{ margin: 4px 0; border-top-color: var(--ace-border-soft); } .plugin-checkbox_options:not(.rtl) .option input{ margin: 0 8px 0 0; vertical-align: -2px; } /* No filtro, o campo múltiplo vazio equivale a "Indiferente": mesma cor de texto e mesma seta dos demais campos */ .ts-wrapper.multi .ts-control input::placeholder{ color: var(--ace-navy); opacity: 1; } .ts-wrapper.multi .ts-control::after{ content: " "; display: block; position: absolute; top: 50%; right: 12px; margin-top: -2px; width: 0; height: 0; border-style: solid; border-width: 4px 4px 0 4px; border-color: var(--ace-navy) transparent transparent transparent; } .ts-wrapper.multi.dropdown-active .ts-control::after{ border-width: 0 4px 4px 4px; border-color: transparent transparent var(--ace-navy) transparent; } /* Select nativo do filtro de currículos com a mesma aparência do Tom Select. A seta é desenhada em SVG, na cor --ace-navy (#1F2044) */ .modal-body-filtro select.form-control, .modal-body-filtro select.form-select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 30px; color: var(--ace-navy); background-color: #FFFFFF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Cpath d='M0 0h8L4 4z' fill='%231F2044'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 8px 4px; cursor: pointer; } .modal-body-filtro select.form-control:hover:not(:focus), .modal-body-filtro select.form-select:hover:not(:focus){ border-color: #94A3B8; } /* --------------------------------------------------------------------- Menus suspensos --------------------------------------------------------------------- */ .dropdown-menu{ border-color: var(--ace-border); border-radius: 10px; -webkit-box-shadow: 0 10px 30px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06); box-shadow: 0 10px 30px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06); } .dropdown-menu > li > a{ color: var(--ace-text); } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{ color: var(--ace-navy); background-color: var(--ace-surface-hover); } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus{ color: var(--ace-blue-dark); background-color: var(--ace-blue-pale); } .dropdown-menu .divider{ background-color: var(--ace-border-soft); } /* --------------------------------------------------------------------- Tabelas As cores das linhas de status (primary, success, info, warning, danger) são mantidas como estão, pois indicam situação do registro. --------------------------------------------------------------------- */ .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{ border-top-color: var(--ace-border-soft); } .table > thead{ background-color: var(--ace-table-head); } .table > thead > tr > th{ color: #475569; font-weight: 500; border-bottom: 1px solid var(--ace-border); } .table-bordered{ border-color: var(--ace-border); } .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td{ border-color: var(--ace-border-soft); } .table-bordered > thead > tr > th, .table-bordered > thead > tr > td{ border-bottom-width: 1px; border-bottom-color: var(--ace-border); } .table-striped > tbody > tr:nth-of-type(odd){ background-color: var(--ace-table-stripe); } .table-hover > tbody > tr:hover{ background-color: var(--ace-table-hover); } /* --------------------------------------------------------------------- Paginação --------------------------------------------------------------------- */ .pagination > li > a, .pagination > li > span{ color: #475569; background-color: transparent; border-color: transparent; border-radius: var(--ace-radius-small); margin: 0 2px; } .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span, .pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span, .pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span{ border-radius: var(--ace-radius-small); } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus{ color: var(--ace-navy); background-color: var(--ace-surface-hover); border-color: transparent; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{ color: var(--ace-blue-dark); background-color: var(--ace-blue-pale); border-color: transparent; font-weight: 500; } .pagination > .disabled > a, .pagination > .disabled > span, .pagination > .disabled > a:hover, .pagination > .disabled > span:hover, .pagination > .disabled > a:focus, .pagination > .disabled > span:focus{ color: var(--ace-border-input); background-color: transparent; border-color: transparent; } /* --------------------------------------------------------------------- Abas (nav-tabs): de "pasta" para texto com sublinhado --------------------------------------------------------------------- */ .nav-tabs{ border-bottom-color: var(--ace-border) !important; } .nav-tabs > li > a, .nav-tabs.nav-primary > li > a, .nav-tabs.nav-success > li > a, .nav-tabs.nav-info > li > a, .nav-tabs.nav-danger > li > a, .nav-tabs.nav-warning > li > a{ color: #475569 !important; background-color: transparent !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; padding-bottom: 7px !important; } .nav-tabs > li > a:hover, .nav-tabs > li > a:focus, .nav-tabs.nav-primary > li > a:hover, .nav-tabs.nav-success > li > a:hover, .nav-tabs.nav-info > li > a:hover, .nav-tabs.nav-danger > li > a:hover, .nav-tabs.nav-warning > li > a:hover{ color: var(--ace-navy) !important; background-color: transparent !important; border-bottom-color: var(--ace-border-input) !important; } .nav-tabs > li > a.active, .nav-tabs > li > a.active:hover, .nav-tabs > li > a.active:focus, .nav-tabs.nav-primary > li > a.active, .nav-tabs.nav-primary > li > a.active:hover, .nav-tabs.nav-primary > li > a.active:focus, .nav-tabs.nav-info > li > a.active, .nav-tabs.nav-info > li > a.active:hover, .nav-tabs.nav-info > li > a.active:focus{ color: var(--ace-blue) !important; background-color: transparent !important; border: 0 !important; border-bottom: 3px solid var(--ace-blue) !important; font-weight: 500 !important; } .nav-tabs.nav-success > li > a.active, .nav-tabs.nav-success > li > a.active:hover, .nav-tabs.nav-success > li > a.active:focus{ color: var(--ace-success) !important; background-color: transparent !important; border: 0 !important; border-bottom: 3px solid var(--ace-success) !important; font-weight: 500 !important; } .nav-tabs.nav-danger > li > a.active, .nav-tabs.nav-danger > li > a.active:hover, .nav-tabs.nav-danger > li > a.active:focus{ color: var(--ace-danger) !important; background-color: transparent !important; border: 0 !important; border-bottom: 3px solid var(--ace-danger) !important; font-weight: 500 !important; } .nav-tabs.nav-warning > li > a.active, .nav-tabs.nav-warning > li > a.active:hover, .nav-tabs.nav-warning > li > a.active:focus{ color: var(--ace-warning-dark) !important; background-color: transparent !important; border: 0 !important; border-bottom: 3px solid var(--ace-warning) !important; font-weight: 500 !important; } /* --------------------------------------------------------------------- Modais --------------------------------------------------------------------- */ .modal-content{ border-radius: var(--ace-radius); -webkit-box-shadow: 0 20px 50px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .08); box-shadow: 0 20px 50px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .08); } .modal-header{ border-bottom-color: var(--ace-border-soft); border-radius: var(--ace-radius) var(--ace-radius) 0 0; } /* Cabeçalho azul (bg-primary) passa a ser branco, com título escuro */ .modal-header.bg-primary{ color: var(--ace-navy) !important; background-color: #FFFFFF !important; } .modal-title{ font-weight: 500; } /* botão de fechar (btn-close): fica à direita do título, mesmo vindo antes dele no HTML */ .modal-header .btn-close{ order: 2; opacity: .55; } .modal-header .btn-close:hover, .modal-header .btn-close:focus{ opacity: .9; } .modal-footer{ background-color: var(--ace-surface); border-top-color: var(--ace-border-soft); border-radius: 0 0 var(--ace-radius) var(--ace-radius); } /* ===================================================================== Modais de confirmação e de pergunta ===================================================================== */ /* Modal centralizado verticalmente (mesma técnica do modal-dialog-centered do Bootstrap 4) */ .modal-centralizado .modal-dialog{ display: flex; align-items: center; min-height: calc(100% - 20px); } .modal-centralizado .modal-content{ width: 100%; } @media (min-width: 768px) { .modal-centralizado .modal-dialog{ min-height: calc(100% - 60px); } } /* Ícone de confirmação: círculo e check desenhados em sequência */ .icone-confirmacao{ display: block; width: 72px; height: 72px; margin: 8px auto 16px; stroke: var(--ace-success); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; } .icone-confirmacao-circulo{ stroke-dasharray: 151; stroke-dashoffset: 151; animation: icone-confirmacao-desenhar .6s ease-out forwards; } .icone-confirmacao-check{ stroke-dasharray: 34; stroke-dashoffset: 34; animation: icone-confirmacao-desenhar .35s ease-out .5s forwards; } @keyframes icone-confirmacao-desenhar{ to{ stroke-dashoffset: 0; } } /* Ícone de pergunta: círculo e ponto de interrogação desenhados em sequência */ .icone-pergunta{ display: block; width: 72px; height: 72px; margin: 8px auto 16px; stroke: var(--ace-warning); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; } .icone-pergunta.icone-perigo{ stroke: var(--ace-danger); } .icone-pergunta-circulo{ stroke-dasharray: 151; stroke-dashoffset: 151; animation: icone-confirmacao-desenhar .6s ease-out forwards; } .icone-pergunta-simbolo{ stroke-dasharray: 35; stroke-dashoffset: 35; animation: icone-confirmacao-desenhar .4s ease-out .5s forwards; } .icone-pergunta-ponto{ opacity: 0; animation: icone-pergunta-surgir .2s ease-out .9s forwards; } @keyframes icone-pergunta-surgir{ to{ opacity: 1; } } /* Ícone de erro: círculo e "X" desenhados em sequência */ .icone-erro{ display: block; width: 72px; height: 72px; margin: 8px auto 16px; stroke: var(--ace-danger); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; } .icone-erro-circulo{ stroke-dasharray: 151; stroke-dashoffset: 151; animation: icone-confirmacao-desenhar .6s ease-out forwards; } .icone-erro-x{ stroke-dasharray: 46; stroke-dashoffset: 46; animation: icone-confirmacao-desenhar .4s ease-out .5s forwards; } /* Quem desativou as animações no sistema vê os ícones prontos */ @media (prefers-reduced-motion: reduce) { .icone-confirmacao-circulo, .icone-confirmacao-check, .icone-pergunta-circulo, .icone-pergunta-simbolo, .icone-erro-circulo, .icone-erro-x{ animation: none; stroke-dashoffset: 0; } .icone-pergunta-ponto{ animation: none; opacity: 1; } } /* Rodapé de modal com botões centralizados */ .modal-footer.botoes-empilhados{ text-align: center; } /* Rodapé de modal com botões empilhados, ocupando a largura inteira no celular */ @media (max-width: 767px) { .modal-footer.botoes-empilhados .btn{ display: block; width: 100%; margin: 0 0 8px 0; white-space: normal; } .modal-footer.botoes-empilhados .btn + .btn{ margin-left: 0; } .modal-footer.botoes-empilhados .btn:last-child{ margin-bottom: 0; } } /* --------------------------------------------------------------------- Alertas e labels --------------------------------------------------------------------- */ .alert{ border-radius: 10px; } .alert-info{ color: var(--ace-blue-dark) !important; background-color: var(--ace-blue-pale) !important; border-color: var(--ace-blue-soft) !important; } .alert-cinza{ color: var(--ace-label); background-color: var(--ace-surface); border-color: var(--ace-border); } .label{ border-radius: 999px; padding: .25em .7em .3em; font-weight: 500; } /* .label-success: a cor do botão switch (botao-switch) agora vem direto de --ace-success */ .label-success{ background-color: var(--ace-success) !important; } .label-danger{ background-color: var(--ace-danger) !important; } .label-warning{ background-color: var(--ace-warning) !important; } .label-primary, .label-info{ background-color: var(--ace-blue) !important; } /* --------------------------------------------------------------------- Textos coloridos --------------------------------------------------------------------- */ .text-primary{ color: var(--ace-blue); } .text-success{ color: var(--ace-success); } .text-info{ color: var(--ace-blue-dark); } .text-danger{ color: var(--ace-danger-dark); } .text-warning{ color: var(--ace-warning-dark); } /* --------------------------------------------------------------------- Rodapé --------------------------------------------------------------------- */ .rodape{ color: var(--ace-text-muted); } /* --------------------------------------------------------------------- Celular: conteudo de ponta a ponta, sobre fundo branco --------------------------------------------------------------------- Em telas pequenas o cartao deixa de ser um cartao: some a moldura, os cantos arredondados e as margens laterais, e o fundo da pagina fica branco. O respiro do conteudo passa a vir apenas do padding das colunas. A regra de fundo branco repete o que o arquivo ja fazia mais acima; ela precisa estar aqui porque a regra de body deste bloco de tema vem depois daquela e a sobrescreveria. --------------------------------------------------------------------- */ @media (max-width: 767px){ body{ background-color: #FFFFFF; } .container{ padding-left: 0; padding-right: 0; } /* As margens negativas das .row so sao anuladas quando elas ficam direto no container, que agora nao tem padding. Dentro dos paineis elas sao mantidas e compensadas pelo padding do .panel-body, para que titulos, avisos e tabelas fiquem alinhados com o conteudo das colunas. */ .container > .row{ margin-left: 0; margin-right: 0; } /* A coluna que envolve o painel tambem perde o recuo, para que o painel chegue as bordas da tela. O respiro do conteudo passa a vir somente do padding do .panel-body, abaixo. */ .container > .row > [class*="col-"]{ padding-left: 0; padding-right: 0; } .card-body, .card-body:first-child{ padding-left: 15px; padding-right: 15px; } .card{ border: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; margin-bottom: 12px; } .card-default > .card-header, .card-primary > .card-header, .card-info > .card-header, .card-success > .card-header, .card-warning > .card-header, .card-danger > .card-header{ border-radius: 0; } .well, .bs-callout{ border-radius: 0; border-right: 0; } .modal-content{ border-radius: 0; } } /* --------------------------------------------------------------------- Acessibilidade: respeita a preferência por menos movimento --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .btn, .form-control, .form-select, .card-atalho{ -webkit-transition: none; transition: none; } .card-atalho:hover{ -webkit-transform: none; transform: none; } } /* ====================================================== TELAS DE CURRICULOS exibe_curriculos_vaga e buscar_curriculos ====================================================== */ /* Marcacao de candidato contratado */ .selo-contratado { background: #fffbe6; border: 1px solid #f0e2a8; border-left: 4px solid #d4a017; border-radius: 3px; padding: 10px 14px; font-size: 13px; color: #6b5312; } /* Reune as avaliacoes internas: observacao da analise e feedback */ .bloco-analise { background: #fbfbfb; border: 1px dashed #ddd; border-radius: 3px; padding: 10px 14px; font-size: 13px; } .bloco-analise > div + div { border-top: 1px dotted #e5e5e5; padding-top: 8px; margin-top: 8px; } /* Analise gerada por inteligencia artificial */ .bloco-analise-ia { background: #fafafa; border: 1px solid #e0e0e0; border-left: 4px solid #6a7f95; border-radius: 3px; padding: 12px 14px; color: inherit; font-size: 13px; } /* A tabela de dados fica sobre fundo branco, destacando-se da cor do cartao */ .lista-candidatos .bs-callout .table { background: #fff; border-radius: 4px; overflow: hidden; } .bs-callout-cinza { border-left-color: #ccc; } /* Botao com observacao registrada */ .com-observacao { border-left: 3px solid #3c763d !important; } /* Caixa de dicas recolhivel */ .link-dicas, .link-dicas:hover, .link-dicas:focus { color: #8a6d3b; text-decoration: none; display: inline-block; } .link-dicas[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); } /* FAVORITO: estrela vazada quando nao marcado, cheia e dourada quando marcado */ .estrela-favorito { display: inline-block; font-size: 26px; color: #d8d8d8; text-decoration: none; transition: transform .15s, color .15s; } /* O hover so vale onde existe mouse. No toque, o navegador mantem esse estado apos o clique, e a estrela ficaria amarela mesmo depois de desfavoritada. */ @media (hover: hover) { .estrela-favorito:hover { color: #e8c14a; transform: scale(1.15); text-decoration: none; } } .estrela-favorito.favoritado { color: #e0a800; text-shadow: 0 0 6px rgba(224,168,0,0.35); } .estrela-favorito.salvando { opacity: 0.4; pointer-events: none; } .estrela-favorito.acabou-de-marcar { animation: pulo-estrela .4s; } @keyframes pulo-estrela { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } } /* ------------------------------------------------------ CLASSIFICACAO POR COR ------------------------------------------------------ */ .bolinha-cor { font-size: 22px; margin: 0 6px; opacity: 0.30; text-decoration: none; } .bolinha-cor:hover { opacity: 0.75; } .bolinha-cor.bolinha-ativa { opacity: 1; text-shadow: 0 0 0 #000; transform: scale(1.25); display: inline-block; } .bloco-cor-candidatura { position: relative; } .aviso-cor-candidatura:not(:empty) { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; z-index: 5; white-space: nowrap; background: rgba(255,255,255,0.95); border-radius: 3px; padding: 3px 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } /* Navegacao por classificacao (pastilhas) */ .nav-cores { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; } .nav-cores li a { display: block; padding: 6px 14px; border: 1px solid #e0e0e0; border-radius: 20px; background: #fafafa; color: #555; font-size: 13px; text-decoration: none; transition: all .15s; } .nav-cores li a:hover { background: #f0f0f0; border-color: #ccc; } .nav-cores li.ativo a { background: #37474f; border-color: #37474f; color: #fff; } .nav-cores .contador { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 10px; background: rgba(0,0,0,0.07); font-weight: bold; } .nav-cores li.ativo .contador { background: rgba(255,255,255,0.22); } /* Enquanto nenhuma cor foi usada, as pastilhas de cor nao filtram nada */ .nav-cores.sem-cores li.pastilha-cor { display: none; } .aviso-recorte-vazio { background: #fafafa; border: 1px solid #e0e0e0; border-left: 4px solid #ccc; border-radius: 3px; padding: 20px; text-align: center; margin-bottom: 15px; } /* --------------------------------------------------------------------- Tela inicial do Painel do Candidato (inicio2) --------------------------------------------------------------------- */ .painel-candidato-inicio .cabecalho-candidato{ display: flex; align-items: center; gap: 16px; background: #F3F7FB; border: 1px solid var(--ace-blue-soft); border-radius: var(--ace-radius); padding: 16px; } .painel-candidato-inicio .avatar-candidato{ width: 96px; height: 96px; border-radius: 50%; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ace-blue-soft), var(--ace-blue)); color: #FFFFFF; font-size: 24px; font-weight: 700; } .painel-candidato-inicio .avatar-candidato img{ width: 100%; height: 100%; object-fit: cover; } .painel-candidato-inicio .cabecalho-texto{ flex: 1 1 auto; min-width: 0; } .painel-candidato-inicio .cabecalho-texto h2{ margin: 0; font-size: 18px; font-weight: 700; color: var(--ace-text); } .painel-candidato-inicio .cabecalho-texto .detalhe1{ color: var(--ace-text-muted); font-size: 12.5px; margin-top: 4px; } .painel-candidato-inicio .cabecalho-texto .detalhe2{ font-size: 11px; } .painel-candidato-inicio .cabecalho-texto .chip{ display: inline-block; margin-top: 8px; margin-right: 4px; font-size: 11.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--ace-blue-pale); color: var(--ace-blue-dark); } .painel-candidato-inicio .anel-progresso{ position: relative; width: 84px; height: 84px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--cor-anel) calc(var(--valor-anel) * 1%), #E5E9EF 0); } .painel-candidato-inicio .anel-progresso::after{ content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #FFFFFF; } .painel-candidato-inicio .anel-progresso .anel-conteudo{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.1; } .painel-candidato-inicio .anel-progresso strong{ font-size: 16px; color: var(--ace-text); } .painel-candidato-inicio .anel-progresso small{ font-size: 9.5px; color: var(--ace-text-muted); white-space: nowrap; } /* Barra de largura inteira, usada no lugar do anel no celular */ .painel-candidato-inicio .barra-progresso{ display: none; flex: 1 1 100%; margin-top: 2px; } .painel-candidato-inicio .barra-progresso-topo{ display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--ace-text-muted); margin-bottom: 5px; } .painel-candidato-inicio .barra-progresso-topo strong{ font-size: 14px; color: var(--ace-text); } .painel-candidato-inicio .barra-progresso-trilho{ height: 10px; border-radius: 999px; background: #E5E9EF; overflow: hidden; } .painel-candidato-inicio .barra-progresso-valor{ height: 100%; border-radius: 999px; background: var(--cor-anel); } .painel-candidato-inicio .barra-danger { --cor-anel: var(--ace-danger); } .painel-candidato-inicio .barra-warning { --cor-anel: var(--ace-warning); } .painel-candidato-inicio .barra-info { --cor-anel: var(--ace-blue); } .painel-candidato-inicio .barra-success { --cor-anel: var(--ace-success); } .painel-candidato-inicio .anel-danger { --cor-anel: var(--ace-danger); } .painel-candidato-inicio .anel-warning { --cor-anel: var(--ace-warning); } .painel-candidato-inicio .anel-info { --cor-anel: var(--ace-blue); } .painel-candidato-inicio .anel-success { --cor-anel: var(--ace-success); } /* Próximo passo e avisos */ .painel-candidato-inicio .proximo-passo{ display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: var(--ace-radius); background: var(--ace-warning-pale); border: 1px solid var(--ace-warning-soft); font-size: 13px; } .painel-candidato-inicio .proximo-passo .icone{ width: 32px; height: 32px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ace-warning); color: #FFFFFF; font-size: 14px; } .painel-candidato-inicio .proximo-passo .texto{ flex: 1 1 0; min-width: 0; } .painel-candidato-inicio .proximo-passo .texto strong{ display: block; } .painel-candidato-inicio .proximo-passo .btn{ flex: none; white-space: nowrap; } .painel-candidato-inicio .proximo-passo.concluido{ background: #E6F4EC; border-color: #BFE3CE; } .painel-candidato-inicio .proximo-passo.concluido .icone{ background: var(--ace-success); } /* Aviso fixo da entidade */ .painel-candidato-inicio .aviso-entidade{ display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: var(--ace-radius); background: #EEF7F2; border: 1px solid #BFE3CE; border-left: 4px solid var(--ace-success); font-size: 13px; } .painel-candidato-inicio .aviso-entidade .icone{ width: 32px; height: 32px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ace-success); color: #FFFFFF; font-size: 14px; } .painel-candidato-inicio .aviso-entidade .texto{ flex: 1 1 0; min-width: 0; } .painel-candidato-inicio .aviso-entidade .texto > strong{ display: block; margin-bottom: 4px; } .painel-candidato-inicio .aviso-entidade-conteudo{ font-size: 13px; line-height: 1.5; color: var(--ace-text); } .painel-candidato-inicio .aviso-entidade-conteudo p{ margin: 0 0 6px; } .painel-candidato-inicio .aviso-entidade-conteudo p:last-child{ margin-bottom: 0; } .painel-candidato-inicio .aviso-entidade-conteudo{ max-height: 98px; overflow: hidden; position: relative; } .painel-candidato-inicio .aviso-entidade-conteudo.recolhido::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(to bottom, rgba(238, 247, 242, 0), #EEF7F2); } .painel-candidato-inicio .aviso-entidade.expandido .aviso-entidade-conteudo{ max-height: none; } .painel-candidato-inicio .aviso-entidade.expandido .aviso-entidade-conteudo.recolhido::after{ display: none; } .painel-candidato-inicio .aviso-entidade-expandir{ display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--ace-success-dark); } .painel-candidato-inicio .aviso-entidade-expandir:hover, .painel-candidato-inicio .aviso-entidade-expandir:focus{ text-decoration: none; color: var(--ace-success-dark); } /* Cartões de números */ .painel-candidato-inicio .cartoes-numeros{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; } .painel-candidato-inicio .cartao-numero{ position: relative; display: block; padding: 12px 14px; border-radius: var(--ace-radius); background: var(--ace-blue-pale); border: 1px solid var(--ace-blue-soft); color: var(--ace-text); text-decoration: none; -webkit-transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .painel-candidato-inicio .cartao-numero:hover, .painel-candidato-inicio .cartao-numero:focus{ text-decoration: none; color: var(--ace-text); border-color: var(--ace-blue-soft); box-shadow: 0 2px 8px rgba(15, 79, 125, .08); } .painel-candidato-inicio .cartao-numero .numero{ font-size: 24px; font-weight: 700; line-height: 1; color: var(--ace-blue-dark); } .painel-candidato-inicio .cartao-numero .legenda{ font-size: 12px; color: var(--ace-text-muted); margin-top: 4px; } .painel-candidato-inicio .cartao-numero .ir{ position: absolute; right: 12px; top: 12px; font-size: 11.5px; font-weight: 500; color: var(--ace-blue); } .painel-candidato-inicio .cartao-numero.atencao{ background: var(--ace-warning-pale); border-color: var(--ace-warning-soft); } .painel-candidato-inicio .cartao-numero.atencao .numero{ color: var(--ace-warning-dark); } .painel-candidato-inicio .cartao-numero.desativado{ opacity: .6; pointer-events: none; } /* Título de seção */ .painel-candidato-inicio .titulo-secao{ display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; } .painel-candidato-inicio .titulo-secao h3{ margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ace-navy); } .painel-candidato-inicio .titulo-secao span{ font-size: 12px; color: var(--ace-text-muted); } /* Lista de verificação do currículo */ .painel-candidato-inicio .lista-curriculo{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .painel-candidato-inicio .item-curriculo{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--ace-radius); background: #F6F9FC; border: 1px solid var(--ace-border); border-left: 4px solid var(--ace-success); color: var(--ace-text); text-decoration: none; -webkit-transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .painel-candidato-inicio .item-curriculo.pendente{ background: #FDF6F6; border-left-color: var(--ace-danger); } .painel-candidato-inicio .item-curriculo .icone{ background: #FFFFFF; border: 1px solid var(--ace-border); } .painel-candidato-inicio .item-curriculo:hover, .painel-candidato-inicio .item-curriculo:focus{ text-decoration: none; color: var(--ace-text); background: #FFFFFF; box-shadow: 0 2px 8px rgba(15, 79, 125, .10); } .painel-candidato-inicio .item-curriculo .icone{ width: 38px; height: 38px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--ace-blue-pale); color: var(--ace-blue); } .painel-candidato-inicio .item-curriculo.pendente .icone{ background: var(--ace-danger-pale); color: var(--ace-danger); } .painel-candidato-inicio .item-curriculo .texto{ flex: 1 1 auto; min-width: 0; } .painel-candidato-inicio .item-curriculo .texto strong{ display: block; font-size: 13px; font-weight: 500; line-height: 1.25; } .painel-candidato-inicio .item-curriculo .texto small{ display: block; color: var(--ace-text-muted); font-size: 11.5px; margin-top: 2px; } .painel-candidato-inicio .item-curriculo .etiqueta{ flex: none; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .painel-candidato-inicio .etiqueta-ok{ background: #D9F0E5; color: var(--ace-success-dark); } .painel-candidato-inicio .etiqueta-pendente{ background: var(--ace-danger-pale); color: var(--ace-danger-dark); } /* Ações secundárias */ .painel-candidato-inicio .acoes-secundarias{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .painel-candidato-inicio .acoes-secundarias a{ font-size: 12.5px; color: var(--ace-text-muted); background: #EEF2F6; border: 1px solid #E1E8F0; border-radius: 999px; padding: 6px 14px; text-decoration: none; } .painel-candidato-inicio .acoes-secundarias a:hover{ color: var(--ace-text); border-color: var(--ace-blue-soft); } .painel-candidato-inicio .acoes-secundarias a.perigo{ color: var(--ace-danger); } /* Celular e telas pequenas */ @media (max-width: 767px){ .painel-candidato-inicio .cabecalho-candidato{ flex-direction: column; align-items: center; text-align: center; gap: 10px; } .painel-candidato-inicio .cabecalho-texto{ flex: 0 0 auto; width: 100%; } .painel-candidato-inicio .cabecalho-texto h2{ text-align: center; } .painel-candidato-inicio .cabecalho-texto .chip{ margin-right: 0; } .painel-candidato-inicio .barra-progresso{ width: 100%; margin-top: 6px; } .painel-candidato-inicio .anel-progresso{ display: none; } .painel-candidato-inicio .barra-progresso{ display: block; } .painel-candidato-inicio .proximo-passo{ flex-wrap: wrap; } .painel-candidato-inicio .proximo-passo .btn{ width: 100%; } .painel-candidato-inicio .cartoes-numeros{ grid-template-columns: repeat(2, 1fr); } .painel-candidato-inicio .lista-curriculo{ grid-template-columns: 1fr; } } /* Avatar quadrado com as iniciais, usado no lugar do user.jpg nas listagens */ .avatar-iniciais{ display: inline-flex; align-items: center; justify-content: center; width: 130px; height: 130px; border-radius: 4px; background: linear-gradient(135deg, var(--ace-blue-soft), var(--ace-blue)); color: #FFFFFF; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: .02em; -webkit-user-select: none; user-select: none; } .avatar-iniciais.avatar-iniciais-comparacao{ width: 110px; height: 110px; font-size: 38px; } /* Estilo inicial da imagem */ .logo-associado { transition: transform 0.3s ease; /* Animação suave */ transform: scale(1); /* Tamanho inicial */ opacity: 1; /* Opacidade inicial */ max-width: 320px; /* Evita que a logomarca fique grande demais */ height: auto; } /* Efeito ao passar o mouse */ .logo-associado:hover { transform: scale(1.02); /* Aumenta levemente a escala */ opacity: 0.7; /* Reduz a opacidade no hover */ } /* DIVULGAÇÃO DO BANCO */ .bloco-divulgacao-home { background:#f7fbfd; border:1px solid #d9edf7; border-left:4px solid #167da1; border-radius:4px; padding:14px 16px; font-size:12px; line-height:1.55; color:#555; } .bloco-divulgacao-home .titulo { font-size:14px; font-weight:500; color:#167da1; margin-bottom:7px; } .bloco-divulgacao-home .link-compartilhar { display:inline-block; margin-top:8px; word-break:break-all; } /* --------------------------------------------------------------------- Tela inicial do Painel do Associado (inicio2) --------------------------------------------------------------------- */ .painel-associado .cabecalho-associado{ position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; background: #FFFFFF; border: 1px solid var(--ace-border); border-radius: var(--ace-radius); box-shadow: 0 1px 3px rgba(15, 23, 42, .06); padding: 20px 16px 16px; margin-top: 12px; overflow: hidden; } /* Faixa do topo na cor de destaque da entidade (mesma técnica da tela inicial da entidade) */ .painel-associado .cabecalho-associado:before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ini-cor, var(--ace-blue)); } .painel-associado .logo-associado{ width: 96px; height: 96px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(var(--ini-cor-rgb, 23, 117, 185), .06); border: 1px solid rgba(var(--ini-cor-rgb, 23, 117, 185), .18); color: var(--ini-cor, var(--ace-blue)); font-size: 32px; font-weight: 700; } .painel-associado .logo-associado img{ width: 100%; height: 100%; object-fit: contain; } .painel-associado .cabecalho-texto{ flex: 1 1 320px; min-width: 0; } .painel-associado .cabecalho-texto h2{ margin: 0; font-size: 18px; font-weight: 700; color: var(--ace-text); } .painel-associado .cabecalho-texto .detalhe{ color: var(--ace-text-muted); font-size: 12.5px; margin-top: 3px; } .painel-associado .cabecalho-texto .detalhe .nome-associado{ color: var(--ini-cor, var(--ace-blue)); } .painel-associado .cabecalho-texto .chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .painel-associado .chip{ display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px; background: rgba(var(--ini-cor-rgb, 23, 117, 185), .10); color: var(--ini-cor, var(--ace-blue)); white-space: nowrap; } .painel-associado .cabecalho-links{ flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; border-top: 1px solid #EEF2F6; padding-top: 10px; margin-top: 2px; font-size: 12.5px; } .painel-associado .cabecalho-links a{ color: var(--ini-cor, var(--ace-blue)); } .painel-associado .cabecalho-links a i{ margin-right: 4px; } /* Cartões de números */ .painel-associado .cartoes-numeros{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; } .painel-associado .cartao-numero{ position: relative; padding: 15px 14px 12px; border-radius: var(--ace-radius); background: #FFFFFF; border: 1px solid var(--ace-border); overflow: hidden; } .painel-associado .cartao-numero:before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ini-cor, var(--ace-blue)); } .painel-associado .cartao-numero .numero{ font-size: 24px; font-weight: 700; line-height: 1; color: var(--ini-cor, var(--ace-blue)); } .painel-associado .cartao-numero .legenda{ font-size: 12px; color: var(--ace-text-muted); margin-top: 4px; } /* Avisos (mensagem da entidade, dica do dia e divulgação) */ .painel-associado .aviso-painel{ display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: var(--ace-radius); font-size: 13px; } .painel-associado .aviso-painel .icone{ width: 32px; height: 32px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 14px; } .painel-associado .aviso-painel .texto{ flex: 1 1 0; min-width: 0; } .painel-associado .aviso-painel .texto > strong{ display: block; margin-bottom: 3px; } .painel-associado .aviso-conteudo{ line-height: 1.5; } .painel-associado .aviso-conteudo p{ margin: 0 0 6px; } .painel-associado .aviso-conteudo p:last-child{ margin-bottom: 0; } .painel-associado .aviso-entidade{ background: #EEF7F2; border: 1px solid #BFE3CE; border-left: 4px solid var(--ace-success); } .painel-associado .aviso-entidade .icone{ background: var(--ace-success); } .painel-associado .aviso-divulgacao{ background: #2F3640; border: 1px solid #2F3640; border-left: 4px solid #1F242B; color: #E5E9EF; } .painel-associado .aviso-divulgacao .texto > strong{ color: #FFFFFF; } .painel-associado .aviso-divulgacao .icone{ background: #4A5462; } .painel-associado .aviso-divulgacao .link-divulgacao .btn-primary{ background: #FFFFFF; border-color: #FFFFFF; color: #2F3640; } .painel-associado .aviso-divulgacao .link-divulgacao .btn-primary:hover, .painel-associado .aviso-divulgacao .link-divulgacao .btn-primary:focus{ background: #E5E9EF; border-color: #E5E9EF; color: #1F242B; } .painel-associado .aviso-divulgacao .link-divulgacao .btn-default{ background: transparent; border-color: rgba(255, 255, 255, .45); color: #FFFFFF; } .painel-associado .aviso-divulgacao .link-divulgacao .btn-default:hover, .painel-associado .aviso-divulgacao .link-divulgacao .btn-default:focus{ background: rgba(255, 255, 255, .10); border-color: #FFFFFF; color: #FFFFFF; } .painel-associado .link-divulgacao{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .painel-associado .link-divulgacao .form-control, .painel-associado .link-divulgacao .form-select{ flex: 1 1 260px; height: 32px; font-size: 12.5px; background: #FFFFFF; } /* Cartões dos módulos */ .painel-associado .cartao-modulo{ background: #FFFFFF; border: 1px solid var(--ace-border); border-radius: var(--ace-radius); margin-top: 12px; overflow: hidden; } .painel-associado .secao-modulo{ margin-top: 20px; } .painel-associado .secao-modulo .cabecalho-modulo{ padding: 0; background: transparent; border-bottom: 0; margin-bottom: 10px; } .painel-associado .secao-modulo .atalhos-modulo{ padding: 0; } .painel-associado .cabecalho-modulo{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ace-surface); border-bottom: 1px solid var(--ace-border); } .painel-associado .cabecalho-modulo .icone{ width: 32px; height: 32px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(var(--ini-cor-rgb, 23, 117, 185), .10); color: var(--ini-cor, var(--ace-blue)); font-size: 15px; } .painel-associado .cabecalho-modulo h3{ margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ace-navy); } .painel-associado .cabecalho-modulo small{ display: block; color: var(--ace-text-muted); font-size: 12px; margin-top: 1px; } .painel-associado .cabecalho-modulo .acao-modulo{ margin-left: auto; font-size: 12px; white-space: nowrap; color: var(--ini-cor, var(--ace-blue)); } /* Atalhos */ .painel-associado .atalhos-modulo{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 10px; } .painel-associado .atalho{ position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 11px 12px; border-radius: 10px; background: rgba(var(--ini-cor-rgb, 23, 117, 185), .05); border: 1px solid rgba(var(--ini-cor-rgb, 23, 117, 185), .20); color: var(--ace-text); text-decoration: none; -webkit-transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .painel-associado .atalho:hover, .painel-associado .atalho:focus{ text-decoration: none; color: var(--ace-text); border-color: var(--ini-cor, var(--ace-blue)); box-shadow: 0 2px 8px rgba(var(--ini-cor-rgb, 23, 117, 185), .10); -webkit-transform: translateY(-1px); transform: translateY(-1px); } .painel-associado .atalho .icone{ width: 42px; height: 42px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: #FFFFFF; } .painel-associado .atalho .icone img{ width: 28px; height: 28px; object-fit: contain; } .painel-associado .atalho .texto{ min-width: 0; } .painel-associado .atalho .texto strong{ display: block; font-size: 13.5px; font-weight: 500; line-height: 1.25; } .painel-associado .atalho .texto small{ display: block; color: var(--ace-text-muted); font-size: 12px; line-height: 1.3; margin-top: 2px; } /* Seta indicando que o atalho é clicável */ .painel-associado .atalho .seta{ margin-left: auto; flex: none; font-size: 12px; color: var(--ace-border-input); -webkit-transition: color .15s ease; transition: color .15s ease; } .painel-associado .atalho:hover .seta, .painel-associado .atalho:focus .seta{ color: var(--ini-cor, var(--ace-blue)); } /* Notificações (tabela mantida por causa do JS) */ .painel-associado .tabela-notificacoes{ margin-bottom: 0; } .painel-associado .tabela-notificacoes td{ padding: 0; border: 0; } .painel-associado .tabela-notificacoes tr:not(.cabecalho-mensagens) td{ padding: 8px 10px 0; } .painel-associado .tabela-notificacoes tr:last-child td{ padding-bottom: 10px; } .painel-associado .notificacao{ position: relative; padding: 10px 12px; padding-right: 80px; border-radius: var(--ace-radius-control); background: #F6F9FC; border: 1px solid var(--ace-border); font-size: 13px; } .painel-associado .notificacao .data{ display: block; font-size: 11.5px; color: var(--ace-danger); font-weight: 500; margin-bottom: 4px; } .painel-associado .notificacao .data i{ margin-right: 4px; } .painel-associado .notificacao-texto p{ margin: 0 0 6px; } .painel-associado .notificacao-texto p:last-child{ margin-bottom: 0; } .painel-associado .fechar-notificacao{ position: absolute; top: 10px; right: 12px; font-size: 11.5px; color: var(--ace-text-muted); white-space: nowrap; } /* Notificações sem o card ao redor: o título fica solto, como nas demais seções */ .painel-associado .secao-notificacoes .tabela-notificacoes tr:not(.cabecalho-mensagens) td{ padding: 0 0 8px; } .painel-associado .secao-notificacoes .tabela-notificacoes tr:last-child td{ padding-bottom: 0; } .painel-associado .fechar-notificacao:hover, .painel-associado .fechar-notificacao:focus{ color: var(--ace-danger); text-decoration: none; } /* Telas médias */ @media (max-width: 1199px){ .painel-associado .atalhos-modulo{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Celular */ @media (max-width: 767px){ .painel-associado .cabecalho-associado{ flex-direction: column; align-items: center; text-align: center; gap: 10px; } .painel-associado .cabecalho-texto{ flex: 0 0 auto; width: 100%; } .painel-associado .cabecalho-texto .chips, .painel-associado .cabecalho-links{ justify-content: center; } .painel-associado .cabecalho-texto .detalhe .separador{ display: none; } .painel-associado .cabecalho-texto .detalhe .painel-entidade{ display: block; margin-top: 2px; } .painel-associado .cartoes-numeros, .painel-associado .atalhos-modulo{ grid-template-columns: repeat(2, 1fr); } .painel-associado .atalho{ flex-direction: column; justify-content: center; text-align: center; gap: 8px; padding: 14px 8px 12px; } .painel-associado .atalho .seta{ display: none; } .painel-associado .atalho .icone{ width: 46px; height: 46px; } .painel-associado .atalho .icone img{ width: 32px; height: 32px; } .painel-associado .atalho .texto strong{ font-size: 13px; } .painel-associado .atalho .texto small{ font-size: 11px; } .painel-associado .notificacao{ padding-right: 12px; } .painel-associado .fechar-notificacao{ position: static; display: inline-block; margin-top: 6px; } } /* Filtros ativos (etiquetas resumidas abaixo dos botões do filtro) */ .filtros-ativos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; background-color: #FFFFFF; border: 1px solid #dde3e6; border-radius: 4px; } .filtros-ativos-rotulo { font-size: 12px; font-weight: 500; color: var(--ace-text-muted); white-space: nowrap; margin-right: 4px; } .etiqueta-filtro { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.3; padding: 4px 6px 4px 10px; border-radius: 999px; background-color: var(--ace-blue-pale); border: 1px solid var(--ace-blue-soft); color: var(--ace-blue-dark); text-decoration: none; -webkit-transition: background-color .15s ease, border-color .15s ease, color .15s ease; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .etiqueta-filtro .fechar { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 15px; line-height: 1; color: #94A3B8; -webkit-transition: background-color .15s ease, color .15s ease; transition: background-color .15s ease, color .15s ease; } .etiqueta-filtro:hover, .etiqueta-filtro:focus { background-color: #FFFFFF; border-color: var(--ace-danger); color: var(--ace-danger-dark); text-decoration: none; } .etiqueta-filtro:hover .fechar, .etiqueta-filtro:focus .fechar { background-color: var(--ace-danger); color: #FFFFFF; } .filtros-ativos-limpar { font-size: 12px; color: var(--ace-danger); white-space: nowrap; margin-left: 4px; } .filtros-ativos-limpar:hover, .filtros-ativos-limpar:focus { color: var(--ace-danger-dark); text-decoration: none; } /* ===================================================================== Páginas internas (painéis e relatórios que usam o estilo.css): acabamentos gerais ===================================================================== */ /* Callouts: a faixa lateral passa a ser desenhada no fundo, com espessura uniforme e recortada pelo arredondamento (sem afinar nos cantos) */ .bs-callout{ border-left-width: 1px; border-left-color: transparent; background-image: linear-gradient(var(--ace-callout-accent), var(--ace-callout-accent)); background-repeat: no-repeat; background-position: left top; background-size: 4px 100%; background-origin: border-box; background-clip: border-box; -webkit-box-shadow: none; box-shadow: none; } /* Neste arquivo as variações do callout definem a cor da borda com !important; a borda fica transparente para aparecer só a faixa desenhada no fundo */ .bs-callout-primary, .bs-callout-info, .bs-callout-success, .bs-callout-danger, .bs-callout-warning{ border-left-color: transparent !important; } /* Linha de status das tabelas dentro dos callouts: verde e vermelho suaves */ .bs-callout .table > tbody > tr.table-success > td, .bs-callout .table > tbody > tr.table-success > th{ background-color: #EAF6EF; color: var(--ace-success-dark); } .bs-callout .table > tbody > tr.table-danger > td, .bs-callout .table > tbody > tr.table-danger > th{ background-color: var(--ace-danger-pale); color: var(--ace-danger-dark); } /* Etiquetas (Sim/Não, áreas etc.): formato de pílula, cor suave e texto na cor */ .fundo-verde, .fundo-vermelho, .fundo-amarelo, .fundo-azul{ display: inline-block; padding: 1px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 88%; font-weight: 500; line-height: 1.5; -webkit-box-shadow: none; box-shadow: none; } .fundo-verde{ background-color: #EAF6EF; border-color: #BFE3CE; color: var(--ace-success-dark); } .fundo-vermelho{ background-color: var(--ace-danger-pale); border-color: var(--ace-danger-soft); color: var(--ace-danger-dark); } .fundo-amarelo{ background-color: var(--ace-warning-pale); border-color: var(--ace-warning-soft); color: var(--ace-warning-dark); } .fundo-azul{ background-color: var(--ace-blue-pale); border-color: var(--ace-blue-soft); color: var(--ace-blue-dark); } /* Numerais: círculo com 1 algarismo e cápsula quando o número cresce */ .fundo-numero-verde, .fundo-numero-vermelho, .fundo-numero-amarelo{ display: inline-block; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; font-size: 12px; font-weight: 500; line-height: 22px; text-align: center; color: #FFFFFF; font-variant-numeric: tabular-nums; vertical-align: middle; } .fundo-numero-verde{ background-color: var(--ace-success); } .fundo-numero-vermelho{ background-color: var(--ace-danger); } .fundo-numero-amarelo{ background-color: var(--ace-warning); } /* Listagens: contorno arredondado, bordas leves e linha destacada ao passar o mouse. O contorno só entra quando a tabela é de dados (listrada ou com bordas), para não atingir as tabelas usadas apenas para diagramação */ .table-responsive:has(> .table-striped), .table-responsive:has(> .table-bordered){ border: 1px solid var(--ace-border); border-radius: var(--ace-radius); background: #FFFFFF; } /* O espaço abaixo da tabela fica no contorno, e não dentro dele */ .table-responsive{ margin-bottom: 10px; } .table-responsive > .table{ margin-bottom: 0; } .table-responsive > .table-bordered{ border: 0; } .table-responsive > .table-bordered > thead > tr > th:first-child, .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child{ border-left: 0; } .table-responsive > .table-bordered > thead > tr > th:last-child, .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child{ border-right: 0; } .table-responsive > .table-bordered > tbody > tr:last-child > td, .table-responsive > .table-bordered > tbody > tr:last-child > th{ border-bottom: 0; } .table-responsive > .table-bordered > thead:first-child > tr:first-child > th, .table-responsive > .table-bordered > tbody:first-child > tr:first-child > td{ border-top: 0; } .table-responsive > .table > thead > tr > th{ background-color: #F6F8FB; } .table-responsive > .table-striped > tbody > tr:hover{ background-color: var(--ace-table-hover); } /* Dentro dos callouts, a tabela segue sem o contorno (o próprio callout já contorna) */ .bs-callout .table-responsive{ margin-bottom: 0; border: 0; border-radius: 0; background: transparent; } /* Well no padrão dos cartões novos */ .well{ padding: 16px; background-color: #F6F9FC; border: 1px solid var(--ace-border); border-radius: var(--ace-radius); -webkit-box-shadow: none; box-shadow: none; } /* Separadores
no mesmo padrão da linha pontilhada. Neste arquivo a cor é semitransparente, para a linha aparecer tanto nos cartões brancos quanto no fundo cinza dos relatórios */ hr{ border: 0; border-top: 1px dotted rgba(15, 23, 42, .18); } /* Informações empilhadas separadas por linha pontilhada (substitui o
). Nas colunas do Bootstrap, a linha respeita o recuo de 15px, como o
fazia. */ .info-lateral{ position: relative; margin-top: 18px; padding-top: 14px; } .info-lateral:before{ content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px dotted rgba(15, 23, 42, .18); } [class*="col-"].info-lateral:before{ left: 15px; right: 15px; } /* ===================================================================== Central de Suporte e chamados: cabeçalho e conversa dos modais ===================================================================== */ /* Cabeçalho do atendimento (código, assunto, autor e status) */ .atendimento-cabecalho{ display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--ace-border); border-radius: var(--ace-radius); background-color: var(--ace-surface); } .atendimento-cabecalho-icone{ flex: 0 0 42px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ace-border); border-radius: 50%; background-color: #FFFFFF; color: var(--ace-text-muted); font-size: 18px; } .atendimento-cabecalho-texto{ flex: 1 1 auto; min-width: 0; } .atendimento-cabecalho-codigo{ font-size: 12px; color: var(--ace-text-muted); } .atendimento-cabecalho-titulo{ margin: 2px 0 4px; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ace-text); word-wrap: break-word; } .atendimento-cabecalho-detalhe{ font-size: 12px; color: var(--ace-text-muted); } .atendimento-cabecalho-status{ flex: 0 0 auto; } /* Ticket: identidade azul da Central de Suporte */ .atendimento-ticket{ background-color: var(--ace-blue-pale); border-color: var(--ace-blue-soft); } .atendimento-ticket .atendimento-cabecalho-icone{ border-color: var(--ace-blue-soft); color: var(--ace-blue); } .atendimento-ticket .atendimento-cabecalho-codigo{ color: var(--ace-blue); } .atendimento-ticket .atendimento-cabecalho-titulo{ color: var(--ace-blue-dark); } /* Área das mensagens, com rolagem própria */ .atendimento-conversa{ max-height: 380px; margin-top: 12px; padding: 12px; overflow-x: hidden; overflow-y: auto; border: 1px solid var(--ace-border); border-radius: var(--ace-radius); background-color: var(--ace-surface); } /* Cartão de mensagem: a faixa lateral é desenhada no fundo, como nos callouts */ .atendimento-msg{ --atendimento-faixa: var(--ace-border-input); margin-bottom: 10px; padding: 10px 14px 10px 17px; border: 1px solid var(--ace-border); border-radius: var(--ace-radius); background-color: #FFFFFF; background-image: linear-gradient(var(--atendimento-faixa), var(--atendimento-faixa)); background-repeat: no-repeat; background-position: left top; background-size: 3px 100%; } .atendimento-msg:last-child{ margin-bottom: 0; } .atendimento-msg-suporte{ --atendimento-faixa: var(--ace-blue); } .atendimento-msg-entidade{ background-color: var(--ace-table-stripe); } .atendimento-msg-topo{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dotted #E5E5E5; font-size: 12px; color: var(--ace-text-muted); } .atendimento-msg-autor{ font-weight: 500; color: var(--ace-label); } .atendimento-msg-suporte .atendimento-msg-autor{ color: var(--ace-blue-dark); } .atendimento-msg-texto{ font-size: 13px; line-height: 1.6; color: var(--ace-text); word-wrap: break-word; } .atendimento-msg-anexo{ margin-top: 8px; font-size: 12px; } .atendimento-msg-rodape{ margin-top: 6px; font-size: 11px; font-style: italic; color: var(--ace-text-muted); } /* Aviso abaixo da conversa (ex.: atendimento encerrado) */ .atendimento-aviso{ margin-top: 8px; font-size: 12px; text-align: right; color: var(--ace-danger-dark); } /* Celular: o status desce para baixo do texto, alinhado com ele */ @media (max-width: 767px){ .atendimento-cabecalho{ flex-wrap: wrap; } .atendimento-cabecalho-status{ flex-basis: 100%; padding-left: 56px; } .atendimento-conversa{ max-height: 320px; padding: 8px; } } /* Listagem da Central de Suporte: um cartão por ticket */ .atendimento-item{ display: flex; align-items: center; gap: 16px; margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--ace-border); border-radius: var(--ace-radius); background-color: #FFFFFF; } .atendimento-item:hover{ border-color: var(--ace-blue-soft); } .atendimento-item-ticket .atendimento-cabecalho-icone{ border-color: var(--ace-blue-soft); background-color: var(--ace-blue-pale); color: var(--ace-blue); } .atendimento-item-ticket .atendimento-cabecalho-codigo{ color: var(--ace-blue); } /* Encerrado: ícone e código em cinza, para não competir com os abertos */ .atendimento-item-encerrado .atendimento-cabecalho-icone{ border-color: var(--ace-border); background-color: var(--ace-surface); color: var(--ace-text-muted); } .atendimento-item-encerrado .atendimento-cabecalho-codigo{ color: var(--ace-text-muted); } .atendimento-item-texto{ flex: 1 1 auto; min-width: 0; } .atendimento-item-situacao{ margin-top: 8px; } .atendimento-item-situacao:empty{ display: none; } .atendimento-item-dica{ margin-top: 6px; font-size: 12px; font-style: italic; color: var(--ace-text-muted); } .atendimento-item-acoes{ flex: 0 0 200px; } /* Celular: o botão desce para baixo do texto, em largura inteira */ @media (max-width: 767px){ .atendimento-item{ flex-wrap: wrap; align-items: flex-start; } .atendimento-item-acoes{ flex-basis: 100%; } } /* ===================================================================== Chamados (entidade e candidato): identidade verde e balões de conversa ===================================================================== */ /* Cabeçalho do chamado: callout branco com faixa verde, para não se confundir com os balões verdes da conversa */ .atendimento-chamado{ padding-left: 20px; border-color: var(--ace-border); background-color: #FFFFFF; background-image: linear-gradient(var(--ace-success), var(--ace-success)); background-repeat: no-repeat; background-position: left top; background-size: 4px 100%; } .atendimento-chamado .atendimento-cabecalho-icone, .atendimento-item-chamado .atendimento-cabecalho-icone{ border-color: #BFE3CE; background-color: #EAF6EF; color: var(--ace-success-dark); } .atendimento-item-chamado .atendimento-cabecalho-icone{ background-color: #EAF6EF; } .atendimento-chamado .atendimento-cabecalho-codigo, .atendimento-item-chamado .atendimento-cabecalho-codigo{ color: var(--ace-success-strong); } .atendimento-chamado .atendimento-cabecalho-titulo{ color: var(--ace-text); } .atendimento-item-chamado:hover{ border-color: #BFE3CE; } /* Chamado encerrado: ícone e código voltam ao cinza */ .atendimento-item-chamado.atendimento-item-encerrado .atendimento-cabecalho-icone{ border-color: var(--ace-border); background-color: var(--ace-surface); color: var(--ace-text-muted); } .atendimento-item-chamado.atendimento-item-encerrado .atendimento-cabecalho-codigo{ color: var(--ace-text-muted); } /* Avatar com as iniciais do candidato (no lugar do ícone) */ .atendimento-avatar{ font-size: 14px; font-weight: 500; letter-spacing: .02em; -webkit-user-select: none; user-select: none; } /* Área da conversa em formato de chat: um balão abaixo do outro */ .atendimento-chat{ display: flex; flex-direction: column; gap: 8px; } .atendimento-balao{ max-width: 80%; padding: 8px 12px; border: 1px solid var(--ace-border); border-radius: 14px; background-color: #FFFFFF; font-size: 13px; line-height: 1.55; color: var(--ace-text); word-wrap: break-word; } /* Quem está usando o painel fica sempre à direita, em verde */ .atendimento-balao-meu{ align-self: flex-end; border-color: #BFE3CE; border-bottom-right-radius: 4px; background-color: #EAF6EF; } /* A outra parte fica à esquerda, em branco */ .atendimento-balao-outro{ align-self: flex-start; border-bottom-left-radius: 4px; } .atendimento-balao-autor{ margin-bottom: 3px; font-size: 12px; font-weight: 500; color: var(--ace-label); } .atendimento-balao-meu .atendimento-balao-autor{ color: var(--ace-success-dark); } .atendimento-balao-info{ margin-top: 4px; font-size: 11px; color: var(--ace-text-muted); } .atendimento-balao-meu .atendimento-balao-info{ text-align: right; } @media (max-width: 767px){ .atendimento-balao{ max-width: 92%; } } /* Caixa de Entrada do candidato: o cartão inteiro abre a conversa */ a.atendimento-item-link, a.atendimento-item-link:hover, a.atendimento-item-link:focus{ color: inherit; text-decoration: none; cursor: pointer; } /* Conversa com mensagem nova ainda não lida: contorno azul */ .atendimento-item-nova{ border-color: var(--ace-blue-soft); background-color: #FBFDFF; } .atendimento-item-nova .atendimento-cabecalho-icone{ border-color: var(--ace-blue-soft); background-color: var(--ace-blue-pale); color: var(--ace-blue); } /* Data da última mensagem, à direita do cartão */ .atendimento-item-data{ flex: 0 0 auto; font-size: 12px; text-align: right; white-space: nowrap; color: var(--ace-text-muted); } @media (max-width: 767px){ .atendimento-item-data{ flex-basis: 100%; padding-left: 58px; text-align: left; } } /* ===================================================================== Estado vazio: busca sem resultado ou lista sem registros (substitui o alert-danger nessas situações, que não são erros)
Título

Texto opcional

Variação compacta (páginas que já exibem uma ilustração no topo):
===================================================================== */ .estado-vazio{ margin: 0 0 20px; padding: 28px 18px; background: var(--ace-surface); border-radius: var(--ace-radius); text-align: center; } .estado-vazio .icone{ width: 88px; height: 88px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--ini-cor-rgb, 23, 117, 185), .10); color: var(--ini-cor, var(--ace-blue)); font-size: 38px; } .estado-vazio strong{ display: block; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ace-text); } .estado-vazio p{ margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ace-text-muted); } /* Variação compacta */ .estado-vazio.compacto{ padding: 18px 16px; } .estado-vazio.compacto .icone{ width: 44px; height: 44px; margin-bottom: 10px; border-radius: 12px; font-size: 20px; } /* Celular */ @media (max-width: 767px){ .estado-vazio{ padding: 22px 14px; } .estado-vazio .icone{ width: 72px; height: 72px; font-size: 30px; } .estado-vazio.compacto .icone{ width: 40px; height: 40px; font-size: 18px; } } /* ===================================================================== Orientação das páginas internas (mesmo fundo e borda do aviso das visões gerais, em formato simples) ===================================================================== */ .orientacao-pagina{ margin: 0 0 10px; padding: 12px 14px; background: var(--ace-warning-pale); border: 1px solid var(--ace-warning-soft); border-radius: var(--ace-radius); color: var(--ace-text); line-height: 1.55; } /* Ícone de informação do início da caixa */ .orientacao-pagina > .fa-solid:first-child{ color: var(--ace-warning); margin-right: 2px; } .orientacao-pagina ul{ margin: 6px 0 0; padding-left: 20px; color: #475569; } .orientacao-pagina li{ margin-bottom: 2px; } /* Quando há mais conteúdo depois da lista (outro título ou outra lista), separa um pouco */ .orientacao-pagina ul:not(:last-child){ margin-bottom: 10px; } .orientacao-pagina a{ font-weight: 500; } /* ===================================================================== Listas que abrem e fecham (accordion do BS5): Perguntas Frequentes e Auxílio para divulgação. Antes eram panel-group/panel-collapse do BS3. ===================================================================== */ .accordion{ --bs-accordion-color: var(--ace-text); --bs-accordion-border-color: var(--ace-border); --bs-accordion-border-radius: var(--ace-radius-control); --bs-accordion-inner-border-radius: calc(var(--ace-radius-control) - 1px); --bs-accordion-btn-padding-x: 16px; --bs-accordion-btn-padding-y: 13px; --bs-accordion-btn-color: var(--ace-navy); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--ace-focus); --bs-accordion-body-padding-x: 16px; --bs-accordion-body-padding-y: 16px; --bs-accordion-active-color: var(--ace-blue-dark); --bs-accordion-active-bg: var(--ace-blue-pale); margin-bottom: 20px; } .accordion-button{ font-size: 14px; font-weight: 500; } /* Lista de artigos (antes panel-group do BS3): cartões com 5px entre eles */ .lista-cartoes-artigos{ margin-bottom: 20px; } .lista-cartoes-artigos > .card{ margin-bottom: 0; border-radius: 4px; } .lista-cartoes-artigos > .card > .card-header{ border-bottom: 0; } .lista-cartoes-artigos > .card + .card{ margin-top: 5px; } /* Caixas de marcar e opções (form-check do BS5, antes .checkbox/.radio-inline do BS3) com as cores da ACE */ /* texto ao lado da caixa: peso normal e sem a margem de baixo dos rótulos (como no BS3) */ .form-check-label, label.form-check{ margin-bottom: 0; font-weight: 400; } .form-check-input{ border-color: #94A3B8; } .form-check-input:checked{ background-color: var(--ace-blue); border-color: var(--ace-blue); } .form-check-input:focus{ border-color: var(--ace-blue-soft); box-shadow: 0 0 0 3px var(--ace-focus); } /* botão flutuante (.m-fab-box) da página inicial: só aparece a partir de 992px, como antes com .hidden-xs .hidden-sm. Não dá para usar o d-lg-block: o plugin só mostra o botão quando há conteúdo (com display:inline-block no próprio elemento) e o d-lg-block forçaria o botão a aparecer sempre */ @media (max-width: 991.98px){ .m-fab-box{ display: none !important; } } /* ===================================================================== TOPO DOS PAINÉIS SEM MENU LATERAL (administrador, associado, candidato, compartilhamento, parceria, profissional e cancelamento) Mesmo componente do topo do Painel da Entidade (entidade5.css): barra branca fixa, logomarca e nome à esquerda e "Minha conta" à direita. O conteúdo do topo fica alinhado com o quadro da página (.container). Marcação: menu_principal.php de cada painel (e as páginas avulsas com o topo escrito na própria página). ===================================================================== */ :root{ --painel-topo-altura: 60px; } /* espaço do topo fixo no início da página */ body:has(.painel-topo){ padding-top: var(--painel-topo-altura); } /* links internos (#âncora) não ficam escondidos atrás do topo */ html:has(.painel-topo){ scroll-padding-top: calc(var(--painel-topo-altura) + 10px); } /* o topo é escrito dentro do .card-header do quadro da página; como ele é fixo, o .card-header fica vazio e é zerado (sem espaço e sem a linha de baixo); o important vence as regras do .card-primary > .card-header, que também usam important */ .card-header:has(> .painel-topo){ min-height: 0; padding: 0 !important; border: 0 !important; } .painel-topo{ position: fixed; top: 0; right: 0; left: 0; z-index: 1030; height: var(--painel-topo-altura); background-color: #FFFFFF; box-shadow: 0 1px 0 var(--ace-border); } .painel-topo-interno{ display: flex; align-items: center; height: 100%; } /* logomarca e nome */ .painel-topo-entidade{ display: flex; flex: 1 1 auto; align-items: center; gap: 14px; min-width: 0; color: var(--ace-navy); text-decoration: none; } .painel-topo-entidade:hover{ color: var(--ace-navy); text-decoration: none; } .painel-topo-entidade img{ max-width: 140px; max-height: 42px; } .painel-topo-entidade-texto{ display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } /* linha sutil separando a logomarca do nome */ .painel-topo-entidade img + .painel-topo-entidade-texto{ padding: 2px 0 2px 14px; border-left: 1px solid var(--ace-border); } .painel-topo-entidade-texto strong{ overflow: hidden; font-size: 15px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; } .painel-topo-entidade-texto small{ color: var(--ace-text-muted); font-size: 12px; } /* Minha conta */ .painel-topo-usuario{ flex: 0 0 auto; height: 100%; } .painel-topo-usuario-botao{ display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 0 0 16px; border: 0; background: transparent; color: var(--ace-navy); text-align: left; } .painel-topo-usuario-botao:hover, .painel-topo-usuario-botao[aria-expanded="true"]{ color: var(--ace-blue); } .painel-topo-usuario-botao:focus-visible{ outline: 0; box-shadow: inset 0 0 0 3px var(--ace-focus-strong); } .painel-topo-usuario-nome{ font-size: 13px; font-weight: 500; white-space: nowrap; } .painel-topo-usuario-botao .fa-chevron-down{ color: var(--ace-text-muted); font-size: 10px; } /* ícone do usuário (no topo e no cabeçalho do menu) */ .painel-avatar{ display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--ace-blue); font-size: 30px; line-height: 1; } .painel-topo-usuario-menu{ width: 300px; margin-top: 0 !important; padding: 0; overflow: hidden; border: 1px solid var(--ace-border); border-radius: 0 0 var(--ace-radius-control) var(--ace-radius-control); box-shadow: 0 10px 24px rgba(15, 23, 42, .12); } .painel-topo-usuario-dados{ display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--ace-border-soft); background: var(--ace-surface); } .painel-topo-usuario-dados .painel-avatar{ width: 42px; height: 42px; font-size: 40px; } .painel-topo-usuario-dados div{ min-width: 0; line-height: 1.4; } .painel-topo-usuario-dados strong{ display: block; color: var(--ace-text); font-weight: 500; } .painel-topo-usuario-dados div span{ display: block; overflow: hidden; color: var(--ace-text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; } .painel-topo-usuario-menu .dropdown-item{ display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; } .painel-topo-usuario-menu .dropdown-item i{ width: 16px; color: var(--ace-text-muted); text-align: center; } .painel-topo-usuario-menu .dropdown-item.sair, .painel-topo-usuario-menu .dropdown-item.sair i{ color: var(--ace-danger-dark); } .painel-topo-usuario-menu .dropdown-divider{ margin: 0; } /* botão flutuante do canto superior esquerdo (início do administrador): abaixo do topo (o body:has vence a regra do fab-buttons.min.css, que é carregado depois deste arquivo) */ body:has(.painel-topo) .m-fab-box.m-top-left{ top: calc(var(--painel-topo-altura) + 20px); } /* a partir do tablet, o quadro da página fica um pouco mais afastado do topo */ @media (min-width: 768px){ body:has(.painel-topo) .painelprincipal{ margin-top: 20px !important; } } /* computador: topo mais alto, com a logomarca maior */ @media (min-width: 992px){ :root{ --painel-topo-altura: 84px; } .painel-topo-entidade img{ max-width: 200px; max-height: 52px; } } /* computador, painéis sem o menu lateral (administrador, associado...): espaço interno do topo do quadro igual ao das laterais (20px), para os botões do início da página não ficarem colados na borda */ @media (min-width: 992px){ body:has(.painel-topo):not(.estrutura-entidade) .painelprincipal > .card-body{ padding-top: 20px; } } /* tablet: só o nome, sem o nome do painel */ @media (max-width: 991.98px){ .painel-topo-entidade-texto small{ display: none; } } /* até 767px o .container perde o espaçamento lateral (o quadro da página vai até a borda da tela); o topo mantém 15px de cada lado, alinhado com o conteúdo do quadro */ @media (max-width: 767.98px){ .container.painel-topo-interno{ padding-left: 15px; padding-right: 15px; } } /* celular: só a logomarca e o ícone da conta (o nome aparece no menu da conta) */ @media (max-width: 575.98px){ .painel-topo-entidade-texto{ display: none; } .painel-topo-usuario-nome, .painel-topo-usuario-botao .fa-chevron-down{ display: none; } /* menu da conta com 15px de cada lado, alinhado com o topo e com o quadro */ .painel-topo-usuario-menu{ width: calc(100vw - 30px); } /* o topo deixa de ser fixo e rola junto com a página: sem o espaço reservado no início da página e sem o afastamento do quadro (o topo fica colado no alto da tela) */ .painel-topo{ position: static; } body:has(.painel-topo){ padding-top: 0; } html:has(.painel-topo){ scroll-padding-top: 10px; } body:has(.painel-topo) .painelprincipal{ margin-top: 0 !important; } } @media print{ .painel-topo{ display: none !important; } body:has(.painel-topo){ padding-top: 0; } }