/* ==========================================================================
   Legacy bridge — reskins the class names/widgets that the ~180 content
   views under protected/views/** already emit (Bootstrap 2 grid/buttons,
   and Yii's CGridView/CDetailView/CPortlet/CActiveForm default markup)
   WITHOUT touching those view files. Loaded after Yii's own
   gridview/pager asset CSS, so these rules can override them directly.
   Uses the same --ps-* tokens as app-shell.css so the whole app reads as
   one system.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Bootstrap 2 fluid grid (.row-fluid / .spanN / .offsetN)                 */
/* ---------------------------------------------------------------------- */

.row-fluid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px 20px;
    align-items: start;
    margin-bottom: 16px;
}

/* grid-column-END (não o shorthand "grid-column"): shorthand também seta
   grid-column-start, o que colidiria com .offsetN abaixo (mesma
   propriedade, uma sobrescrevendo a outra por ordem de declaração) e fazia
   o elemento encolher para 1 coluna sempre que span+offset apareciam juntos
   (ex.: login.php usa "span6 offset3") — bug real visto no navegador. */
.span1 { grid-column-end: span 1; }
.span2 { grid-column-end: span 2; }
.span3 { grid-column-end: span 3; }
.span4 { grid-column-end: span 4; }
.span5 { grid-column-end: span 5; }
.span6 { grid-column-end: span 6; }
.span7 { grid-column-end: span 7; }
.span8 { grid-column-end: span 8; }
.span9 { grid-column-end: span 9; }
.span10 { grid-column-end: span 10; }
.span11 { grid-column-end: span 11; }
.span12 { grid-column-end: span 12; }

.offset1 { grid-column-start: 2; }
.offset2 { grid-column-start: 3; }
.offset3 { grid-column-start: 4; }
.offset4 { grid-column-start: 5; }
.offset5 { grid-column-start: 6; }
.offset6 { grid-column-start: 7; }
.offset7 { grid-column-start: 8; }
.offset8 { grid-column-start: 9; }
.offset9 { grid-column-start: 10; }
.offset10 { grid-column-start: 11; }
.offset11 { grid-column-start: 12; }

/* No Bootstrap 2 original, um filho de .row-fluid sem classe .spanN era só
   um bloco normal (100% da largura). Como .row-fluid agora é CSS Grid,
   um filho sem .spanN vira item de grid implícito de 1 coluna só (bem
   estreito) — foi exatamente o que deixou os cards de documento (um
   <legend> sem classe, em candidatoEtapa/nova_inscricao.php e afins)
   espremidos. Restaura o comportamento antigo como padrão. */
.row-fluid > :not([class*="span"]) {
    grid-column: 1 / -1;
}

/* Item de CSS Grid tem min-width:auto por padrão — ou seja, mesmo com
   overflow-x:auto num filho (ex.: .grid-view em torno de uma tabela larga),
   a COLUNA do grid ainda cresce pra caber o conteúdo inteiro, estourando a
   página inteira pro lado (visto em mobile, tabela de "Processos
   encerrados há mais de 8 meses"). Zerar min-width deixa o overflow-x:auto
   interno funcionar de verdade. */
.row-fluid > * {
    min-width: 0;
}

@media (max-width: 768px) {
    .row-fluid {
        grid-template-columns: 1fr;
    }
    .row-fluid [class*="span"] {
        grid-column: 1 / -1;
    }
}

/* "Cartão único centralizado" (span6 offset3 sozinho na row-fluid): padrão
   usado por login, cadastro, ativar-cadastro, perfil e alteração de senha
   (themes/abound/views/site/login.php, protected/views/usuario/{cadastro,
   ativar_cadastro,perfil,update,_form}.php) — sempre o único filho da
   row-fluid, nunca combinado com outras colunas. Centraliza na tela em vez
   de só dentro da grid de 12 colunas, em vez de ficar preso à matemática
   de 50% da grid de 12 colunas. */
.row-fluid:has(> .span6.offset3:only-child) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 48px;
    min-height: calc(100vh - var(--ps-header-height) - var(--ps-footer-height) - 48px);
}

.row-fluid:has(> .span6.offset3:only-child) > .span6.offset3 {
    width: 100%;
}

/* Dentro desse padrão, duas variantes bem diferentes:
   - Login (site/login.php): só 2 campos, nenhuma row-fluid aninhada — cabe
     bem num card estreito de formulário de auth.
   - Cadastro/ativar-cadastro/perfil/atualizar dados (usuario/*.php): 9-11
     row-fluid aninhadas (pares de campos lado a lado) — precisam de bem
     mais largura, senão cada coluna interna fica espremida (era o problema
     relatado: o card ficava com ~190px por campo mesmo em telas grandes). */
.row-fluid:has(> .span6.offset3:only-child):not(:has(.row-fluid)) > .span6.offset3 {
    max-width: 440px;
}

.row-fluid:has(> .span6.offset3:only-child):has(.row-fluid) > .span6.offset3 {
    max-width: 880px;
}

@media (max-width: 768px) {
    .row-fluid:has(> .span6.offset3:only-child) {
        padding-top: 24px;
        min-height: 0;
    }
}

/* ---------------------------------------------------------------------- */
/* Buttons (.btn + Bootstrap 2 variants)                                   */
/* ---------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--ps-outline);
    background: var(--ps-surface);
    color: var(--ps-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    transition: background 150ms ease, box-shadow 150ms ease;
}

.btn:hover {
    box-shadow: var(--ps-elevation-1);
    text-decoration: none;
    color: var(--ps-text);
}

.btn.btn-primary {
    background: var(--ps-primary);
    border-color: var(--ps-primary);
    color: var(--ps-on-primary);
}

.btn.btn-success {
    background: var(--ps-success);
    border-color: var(--ps-success);
    color: #ffffff;
}

.btn.btn-danger {
    background: var(--ps-danger);
    border-color: var(--ps-danger);
    color: #ffffff;
}

.btn.btn-info {
    background: var(--ps-info);
    border-color: var(--ps-info);
    color: #ffffff;
}

.btn.btn-primary:hover,
.btn.btn-success:hover,
.btn.btn-danger:hover,
.btn.btn-info:hover {
    color: #ffffff;
    filter: brightness(0.92);
}

/* Deixa óbvio que o botão não é clicável enquanto disabled (ex.:
   "Efetuar Inscrição" em candidatoEtapa/nova_inscricao.php, que começa
   disabled até os checkboxes finais serem marcados) — sem isso, um botão
   disabled tinha exatamente a mesma aparência de um habilitado. */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
}

.btn:disabled:hover {
    box-shadow: none;
    filter: none;
}

/* ---------------------------------------------------------------------- */
/* CGridView (table.items / .grid-view chrome)                             */
/* ---------------------------------------------------------------------- */

.grid-view {
    padding: 0;
    overflow-x: auto;
}

.grid-view table.items {
    background: var(--ps-surface);
    border: 1px solid var(--ps-outline-variant);
    border-radius: var(--ps-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    width: 100%;
}

.grid-view table.items th,
.grid-view table.items td {
    font-size: 13px;
    border: none;
    border-bottom: 1px solid var(--ps-outline-variant);
    padding: 10px 12px;
    text-align: left;
}

/* Cabeçalho igual ao de table.detail-view: caixa normal, não o
   ALL-CAPS tracked que puxava a atenção pra label em vez do dado. */
.grid-view table.items th {
    background: var(--ps-surface-variant);
    color: var(--ps-text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.grid-view table.items th a {
    color: var(--ps-text-muted);
    text-decoration: none;
    background: none;
    padding: 0;
}

.grid-view table.items th a:hover,
.grid-view table.items th.asc a,
.grid-view table.items th.desc a {
    color: var(--ps-primary);
}

.grid-view table.items tr.even,
.grid-view table.items tr.odd {
    background: var(--ps-surface);
}

.grid-view table.items tbody tr:hover {
    background: var(--ps-surface-dim);
}

/* linha selecionada (checkbox-column / selectableRows): o styles.css do
   widget pinta de verde-limão (#BCE774 / #CCFF66) — fora da paleta. */
.grid-view table.items tr.selected,
.grid-view table.items tbody tr:hover.selected {
    background: var(--ps-primary-container);
}

.grid-view table.items tbody tr:last-child td {
    border-bottom: none;
}

.grid-view .button-column {
    text-align: right;
    width: auto;
    white-space: nowrap;
}

/* moldura dos filtros do CGridView: ver seção de inputs mais abaixo
   (a regra geral .ps-content dá borda/raio; lá embaixo ficam compactos) */

.grid-view .summary {
    color: var(--ps-text-muted);
    font-size: 12px;
    margin: 8px 0;
}

.grid-view .empty {
    padding: 16px;
    color: var(--ps-text-muted);
    font-style: normal;
}

ul.yiiPager {
    display: flex;
    gap: 4px;
    margin: 12px 0 0;
    padding: 0;
}

ul.yiiPager li {
    display: inline;
}

ul.yiiPager a:link,
ul.yiiPager a:visited {
    display: inline-flex;
    min-width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ps-outline);
    border-radius: var(--ps-radius-sm);
    color: var(--ps-text);
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    padding: 0 8px;
}

ul.yiiPager a:hover {
    border-color: var(--ps-primary);
    color: var(--ps-primary);
}

ul.yiiPager .selected a {
    background: var(--ps-primary);
    border-color: var(--ps-primary);
    color: var(--ps-on-primary);
}

ul.yiiPager .hidden a {
    color: var(--ps-outline);
    border-color: var(--ps-outline-variant);
}

/* ---------------------------------------------------------------------- */
/* CListView (.list-view / .view — itemView _view.php gerado pelo Gii)     */
/* O styles.css do widget só estiliza .summary/.sorter/.pager; cada item  */
/* .view fica SEM separação nenhuma (vira uma parede de "rótulo: valor"). */
/* Damos a cada item a mesma cara de card do resto (portlet/detail-view). */
/* ---------------------------------------------------------------------- */

.list-view {
    padding: 0;
}

.list-view .items {
    margin: 12px 0;
}

.list-view .view {
    background: var(--ps-surface);
    border: 1px solid var(--ps-outline-variant);
    border-radius: var(--ps-radius);
    padding: 14px 16px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.7;
}

.list-view .view:last-child {
    margin-bottom: 0;
}

/* rótulos "Campo:" em muted; o valor herda o texto normal */
.list-view .view b {
    color: var(--ps-text-muted);
    font-weight: 600;
}

.list-view .summary {
    color: var(--ps-text-muted);
    font-size: 12px;
}

.list-view .sorter {
    font-size: 12px;
}

.list-view .sorter a {
    color: var(--ps-primary);
}

.list-view .empty {
    padding: 16px;
    color: var(--ps-text-muted);
    background: var(--ps-surface);
    border: 1px solid var(--ps-outline-variant);
    border-radius: var(--ps-radius);
}

/* ---------------------------------------------------------------------- */
/* CDetailView (table.detail-view)                                         */
/* ---------------------------------------------------------------------- */

table.detail-view {
    width: 100%;
    /* separate (não collapse) pra o border-radius do card pegar, mesmo
       motivo do .grid-view table.items */
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ps-surface);
    border: 1px solid var(--ps-outline-variant);
    border-radius: var(--ps-radius);
    overflow: hidden;
}

table.detail-view tr > th,
table.detail-view tr > td {
    font-size: 13px;
    /* o styles.css do widget põe "border: 1px solid white" nos quatro
       lados — deixa hairlines brancas sobre a coluna de rótulo tingida */
    border: none;
    border-bottom: 1px solid var(--ps-outline-variant);
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}

table.detail-view tr:last-child > th,
table.detail-view tr:last-child > td {
    border-bottom: none;
}

table.detail-view tr > th {
    width: 240px;
    color: var(--ps-text-muted);
    font-weight: 600;
    background: var(--ps-surface-variant);
}

/* zebra nativa do CDetailView é um teal (#E5F1F4 / #F8F8F8) fora da
   paleta; a estrutura já vem da coluna de rótulo tingida + divisórias. */
table.detail-view tr.odd,
table.detail-view tr.even {
    background: var(--ps-surface);
}

/* valor nulo: o widget pinta literalmente de "pink" */
table.detail-view .null {
    color: var(--ps-text-muted);
    font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* CPortlet (.portlet / .portlet-decoration / .portlet-content)            */
/* ---------------------------------------------------------------------- */

.portlet {
    background: var(--ps-surface);
    border: 1px solid var(--ps-outline-variant);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-elevation-1);
    overflow: hidden;
    margin-bottom: 20px;
}

.portlet-decoration {
    background: var(--ps-primary);
    color: var(--ps-on-primary);
    padding: 14px 18px;
}

.portlet-decoration .portlet-title {
    font-size: 15px;
    font-weight: 600;
}

.portlet-content {
    padding: 20px;
}

/* ---------------------------------------------------------------------- */
/* Alerts / flash messages / required-field markers                       */
/* ---------------------------------------------------------------------- */

.alert {
    padding: 12px 16px;
    border-radius: var(--ps-radius-sm);
    border: 1px solid transparent;
    margin-bottom: 16px;
    font-size: 13px;
}

.alert-danger {
    background: var(--ps-danger-container);
    color: var(--ps-on-danger-container);
}

.alert-warning {
    background: var(--ps-warning-container);
    color: var(--ps-on-warning-container);
}

div.flash-error,
div.flash-notice,
div.flash-warning,
div.flash-success {
    padding: 12px 16px;
    border-radius: var(--ps-radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
    border: 1px solid transparent;
}

div.flash-error {
    background: var(--ps-danger-container);
    color: var(--ps-on-danger-container);
}

/* "notice" e "warning" são as duas chaves de flash que a aplicação usa pra
   avisos de atenção (ex.: CandidatoProcessoController::setFlash('warning', ...)
   nas telas de boleto) — mesmo tratamento visual, só a chave muda conforme
   quem chamou setFlash(). */
div.flash-notice,
div.flash-warning {
    background: var(--ps-warning-container);
    color: var(--ps-on-warning-container);
}

div.flash-success {
    background: var(--ps-success-container);
    color: var(--ps-on-success-container);
}

div.flash-error a { color: var(--ps-on-danger-container); }
div.flash-notice a,
div.flash-warning a { color: var(--ps-on-warning-container); }
div.flash-success a { color: var(--ps-on-success-container); }

/* Botões (.btn-*) dentro de flash-* já tem contraste próprio (fundo colorido +
   texto branco); sem isso, a regra "div.flash-x a" acima ganha por
   especificidade e deixa o texto do botão escuro/pouco legível. */
div.flash-error a.btn,
div.flash-notice a.btn,
div.flash-warning a.btn,
div.flash-success a.btn { color: #fff; }

.errorSummary {
    background: var(--ps-danger-container);
    color: var(--ps-on-danger-container);
    border: 1px solid transparent;
    border-radius: var(--ps-radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
}

/* Sem isso, um <div class="errorSummary"></div> vazio (ex.: #error em
   candidatoEtapa/nova_inscricao.php, controlado por JS via .html('') /
   .html('<ul>...</ul>')) fica visível o tempo todo como uma barra rosa
   vazia — o padding/background acima davam a ele altura mesmo sem
   conteúdo. Só deve aparecer quando o JS/Yii realmente colocar uma
   mensagem dentro.
   Não dá pra usar só `:empty`: o template PHP deixa um nó de texto em
   branco (indentação/quebra de linha) entre as tags, e isso já conta como
   "ter conteúdo" para `:empty` — a div nunca ficaria realmente vazia aos
   olhos do CSS. Em vez disso, escondemos quando não há uma <ul> dentro
   (tanto o JS quanto o Yii sempre envolvem a mensagem real numa <ul>). */
.errorSummary:empty,
.errorSummary:not(:has(ul)) {
    display: none;
    padding: 0;
    margin: 0;
    border: none;
}

.errorSummary ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

.badge-obrigatorio {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ps-on-danger-container);
    background: var(--ps-danger-container);
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: 4px;
}

/* ---------------------------------------------------------------------- */
/* CActiveForm defaults (.form .row / .errorMessage / label.required)      */
/* ---------------------------------------------------------------------- */

div.form .row {
    margin: 0 0 14px;
}

div.form label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ps-text);
}

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

.errorMessage {
    color: var(--ps-danger);
    font-size: 12px;
    margin-top: 4px;
}

/* Campos de texto em qualquer lugar do conteúdo — não só dentro de
   `div.form`. Muita tela usa CHtml::textField() solto (formulários de
   busca "form-inline", filtros ad-hoc, ex.: motivo/index.php), e esses
   caíam no input cru do navegador. Só aparência: largura fica com quem
   já cuida dela (a regra do "cartão único" abaixo, ou a view). Não mexe no
   textarea de código-fonte do CKEditor 5 (ver override ao fim do arquivo). */
.ps-content input[type="text"],
.ps-content input[type="password"],
.ps-content input[type="email"],
.ps-content input[type="number"],
.ps-content input[type="search"],
.ps-content input[type="tel"],
.ps-content input[type="url"],
.ps-content input[type="date"],
.ps-content input[type="time"],
.ps-content input[type="datetime-local"],
.ps-content textarea,
.ps-content select {
    box-sizing: border-box;
    max-width: 100%;
    border: 1px solid var(--ps-outline);
    border-radius: var(--ps-radius-sm);
    padding: 9px 12px;
    font-size: 14px;
    font-family: var(--ps-font);
    color: var(--ps-text);
    background: var(--ps-surface);
}

.ps-content input[type="text"]:focus,
.ps-content input[type="password"]:focus,
.ps-content input[type="email"]:focus,
.ps-content input[type="number"]:focus,
.ps-content input[type="search"]:focus,
.ps-content input[type="tel"]:focus,
.ps-content input[type="url"]:focus,
.ps-content input[type="date"]:focus,
.ps-content input[type="time"]:focus,
.ps-content input[type="datetime-local"]:focus,
.ps-content textarea:focus,
.ps-content select:focus {
    outline: none;
    border-color: var(--ps-primary);
    box-shadow: 0 0 0 2px var(--ps-primary-container);
}

.ps-content input.error,
.ps-content textarea.error,
.ps-content select.error {
    border-color: var(--ps-danger);
}

/* Campo não-editável — precisa parecer inativo (ex.: "Nome Social" na
   nova inscrição, que só abre ao marcar o checkbox; e a tela de
   "Visualizar inscrição", que é toda somente-leitura via disabled/
   readonly). Sem isso ficava idêntico a um campo editável. Vale pra
   input/textarea/select desabilitado e pra input readonly (o textarea
   readonly de texto longo — aviso LGPD — fica de fora de propósito,
   pra não prejudicar a leitura). */
.ps-content input:disabled,
.ps-content textarea:disabled,
.ps-content select:disabled,
.ps-content input[readonly] {
    background: var(--ps-surface-variant);
    color: var(--ps-text-muted);
    border-color: var(--ps-outline-variant);
    cursor: not-allowed;
    opacity: 1;
}

/* Filtros do CGridView (linha de busca no cabeçalho da tabela) — mesma
   moldura, só que compactos. Fica DEPOIS da regra geral pra vencer. */
.grid-view .filters input,
.grid-view .filters select {
    padding: 4px 8px;
    font-size: 12px;
}

/* Largura 100% + altura de toque confortável só no padrão "cartão único
   centralizado" (login/cadastro/ativar-cadastro/perfil/alterar dados) —
   não globalmente: várias telas de CRUD (Gii _form.php/_search.php) têm
   campos pequenos de propósito lado a lado (uf, cep, "aprovado") que
   quebrariam esticando pra 100% do próprio grid column. */
.row-fluid:has(> .span6.offset3:only-child) input[type="text"],
.row-fluid:has(> .span6.offset3:only-child) input[type="password"],
.row-fluid:has(> .span6.offset3:only-child) input[type="email"],
.row-fluid:has(> .span6.offset3:only-child) select {
    width: 100%;
    min-height: 40px;
}

/* Linha de botões de submit/ação dos formulários (Gii _form.php/_search.php
   e as páginas de conta em site/login.php, usuario/*) — evita que dois
   botões colados estourem a largura em telas estreitas. */
.row.buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

@media (max-width: 480px) {
    .row.buttons .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* CHtml::submitButton()/buttonTag() do Gii não põem classe nenhuma —
   "Salvar", "Buscar" etc. herdavam o botão cinza nativo do navegador.
   Alinhado ao .btn.btn-primary de legacy-bridge. */
.ps-content input[type="submit"]:not([class]),
.ps-content input[type="button"]:not([class]),
.ps-content button[type="submit"]:not([class]),
.ps-content button[type="button"]:not([class]),
.ps-content button:not([type]):not([class]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--ps-primary);
    background: var(--ps-primary);
    color: var(--ps-on-primary);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--ps-font);
    line-height: 1;
    cursor: pointer;
}

.ps-content input[type="submit"]:not([class]):hover,
.ps-content input[type="button"]:not([class]):hover,
.ps-content button[type="submit"]:not([class]):hover,
.ps-content button[type="button"]:not([class]):hover,
.ps-content button:not([type]):not([class]):hover {
    filter: brightness(0.94);
}

/* <fieldset>/<legend> nativos (Gii _form.php, candidatoEtapa/
   nova_inscricao.php, etc.) — o default do navegador é uma borda "groove"
   3D que não combina com o resto. Vira um grupo com cara de card. */
.ps-content fieldset {
    min-width: 0;
    border: 1px solid var(--ps-outline-variant);
    border-radius: var(--ps-radius);
    background: var(--ps-surface);
    padding: 16px 18px;
    margin: 0 0 18px;
}

.ps-content fieldset legend {
    width: auto;
    margin: 0;
    padding: 0 8px;
    border: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ps-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Bootstrap 2 accordion (only used by                                     */
/* protected/views/etapaProcesso/verificar_documentacao.php)                */
/* ---------------------------------------------------------------------- */

.accordion-group {
    border: 1px solid var(--ps-outline-variant);
    border-radius: var(--ps-radius);
    margin-bottom: 8px;
    overflow: hidden;
}

.accordion-heading {
    background: var(--ps-surface-variant);
}

.accordion-toggle {
    display: block;
    padding: 10px 16px;
    font-weight: 600;
    color: var(--ps-text);
    text-decoration: none;
}

.accordion-inner {
    padding: 16px;
}

/* Base do plugin de collapse do Bootstrap 2 (removemos o CSS do Bootstrap,
   mas o JS ainda está registrado só para este acordeão, e ele depende
   destas duas classes para abrir/fechar). */
.collapse {
    position: relative;
    height: 0;
    overflow: hidden;
}

.collapse.in {
    height: auto;
}

/* ---------------------------------------------------------------------- */
/* Plain tables with Bootstrap 2 modifiers (table-striped)                 */
/* ---------------------------------------------------------------------- */

table.table-striped {
    width: 100%;
    border-collapse: collapse;
}

table.table-striped th,
table.table-striped td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ps-outline-variant);
    font-size: 13px;
    text-align: left;
}

table.table-striped tbody tr:nth-child(odd) {
    background: var(--ps-surface-dim);
}

/* ---------------------------------------------------------------------- */
/* Formulário de inscrição do candidato (candidatoEtapa/{nova_inscricao,   */
/* inscricao,view_inscricao}.php) — todas compartilham #formulario_campos, */
/* o card de documentos (.doc-card) e o aviso de LGPD (.lgpd/.tarea).      */
/* Consolida o que antes era CSS inline duplicado (e levemente diferente)  */
/* nos 3 arquivos, alinhado aos tokens --ps-* usados no resto do app.      */
/* ---------------------------------------------------------------------- */

#formulario_campos input[type="text"],
#formulario_campos input[type="password"],
#formulario_campos input[type="email"],
#formulario_campos input[type="number"],
#formulario_campos select,
#formulario_campos textarea:not(.tarea) {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
}

.doc-card {
    background: var(--ps-surface);
    border: 1px solid var(--ps-outline-variant);
    border-radius: var(--ps-radius);
    padding: 16px;
    margin-bottom: 16px;
    transition: box-shadow 150ms ease;
}

.doc-card:hover {
    box-shadow: var(--ps-elevation-1);
}

.doc-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.doc-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--ps-text);
    line-height: 1.3;
}

.doc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 0 auto;
}

.doc-info {
    font-size: 13px;
    color: var(--ps-text-muted);
    margin-top: 6px;
}

.doc-meta {
    color: var(--ps-text-muted);
    font-size: 12px;
}

.badge-eliminatorio {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ps-on-warning-container);
    background: var(--ps-warning-container);
    border-radius: 999px;
    padding: 1px 8px;
}

.doc-uploaded {
    font-size: 13px;
    padding: 10px 0;
    border-top: 1px solid var(--ps-outline-variant);
    margin-top: 8px;
}

.doc-uploaded input[type="file"] {
    margin-top: 6px;
}

#formulario_campos input[type="file"] {
    width: 100%;
    padding: 8px 0;
}

/* Aviso de LGPD */
.lgpd {
    display: block;
    background: var(--ps-surface);
    border: 1px solid var(--ps-outline-variant);
    border-radius: var(--ps-radius);
    padding: 20px;
    margin: 20px 0;
}

.lgpd h4 {
    margin-top: 0;
}

.lgpd p,
.lgpd a {
    overflow-wrap: break-word;
    word-break: break-word;
}

.lgpd textarea.tarea,
textarea.tarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 220px;
    text-align: justify;
    border: 1px solid var(--ps-outline);
    border-radius: var(--ps-radius-sm);
    padding: 12px;
    font-family: var(--ps-font);
    font-size: 13px;
    background: var(--ps-surface-dim);
    color: var(--ps-text);
}

/* .ciencia é aplicado ao <label> (e, por causa de um `class="ciencia, ck"`
   com vírgula sobrando no HTML, não ao checkbox — o "ciencia," vira um
   token de classe diferente de "ciencia"). Não pode virar display:flex
   aqui: um <label> flex vira um box de bloco, força quebra de linha antes
   dele e deixa o checkbox numa linha e o texto embaixo, na outra — era
   exatamente o bug relatado. O alinhamento centralizado é feito no
   wrapper (abaixo), não no label. */
.ciencia {
    display: inline;
    cursor: pointer;
}

/* Alinha checkbox + label na mesma linha nos formulários de
   inscrição/cadastro (ex.: "Utilizar Nome Social", os 3 checkboxes de
   LGPD/veracidade/edital) — qualquer wrapper de campo que tenha um
   checkbox como filho direto, sem precisar de uma classe nova. */
.row-fluid > div:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 8px;
}

.row-fluid > div:has(> input[type="checkbox"]) label {
    margin: 0;
}

.confirmacao-reinscricao {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

.confirmacao-reinscricao input[type="checkbox"] {
    margin: 0;
}

.confirmacao-reinscricao label {
    margin: 0;
    cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* CKEditor 5 — paleta do sistema via custom properties (--ck-*)           */
/* Usado em processoSeletivo/_form.php e divulgacaoResultado/              */
/* divulgar_resultado.php (extensão protected/extensions/ckeditor).        */
/* ---------------------------------------------------------------------- */

.ck.ck-editor {
    --ck-color-base-border: var(--ps-outline);
    --ck-color-base-background: var(--ps-surface);
    --ck-color-base-foreground: var(--ps-surface-variant);
    --ck-color-base-text: var(--ps-text);
    --ck-color-base-active: var(--ps-primary);
    --ck-color-base-active-focus: var(--ps-primary-hover);
    --ck-color-focus-border: var(--ps-primary);
    --ck-color-toolbar-background: var(--ps-surface-variant);
    --ck-color-toolbar-border: var(--ps-outline-variant);
    --ck-color-button-default-hover-background: var(--ps-surface);
    --ck-color-button-default-active-background: var(--ps-primary-container);
    --ck-color-button-on-background: var(--ps-primary-container);
    --ck-color-button-on-hover-background: var(--ps-primary-container);
    --ck-color-button-on-color: var(--ps-on-primary-container);
    --ck-color-button-on-active-background: var(--ps-primary-container);
    --ck-color-button-action-background: var(--ps-primary);
    --ck-color-button-action-hover-background: var(--ps-primary-hover);
    --ck-color-dropdown-panel-background: var(--ps-surface);
    --ck-color-dropdown-panel-border: var(--ps-outline);
    --ck-color-list-button-hover-background: var(--ps-surface-variant);
    --ck-color-list-button-on-background: var(--ps-primary-container);
    --ck-color-list-button-on-text: var(--ps-on-primary-container);
    --ck-border-radius: var(--ps-radius-sm);
    --ck-font-face: var(--ps-font);
    width: 100%;
}

/* Painéis flutuantes (dropdowns, balão de link) ficam acima do shell. */
.ck.ck-balloon-panel,
.ck.ck-dropdown__panel {
    z-index: 1100;
}

.ck.ck-editor__main > .ck-editor__editable {
    border-radius: 0 0 var(--ps-radius-sm) var(--ps-radius-sm);
}

/* Área editável: mesma tipografia do conteúdo do sistema. */
.ck.ck-content {
    font-family: var(--ps-font);
    color: var(--ps-text);
    line-height: 1.5;
}

/* O CSS genérico de textarea do conteúdo (borda/padding) não deve
   alterar o modo "Código-Fonte" do editor. */
.ck.ck-source-editing-area textarea {
    border: 0;
    border-radius: 0;
    max-width: none;
    font-family: Consolas, "Courier New", monospace;
}