/* ============================================================
   OAB INTERNAL — Design system de telas internas
   Cores: OAB red #ec5d4f / hover #d45447 / bg light #fff5f4
   Aplicar carregando este CSS em qualquer .xhtml de tela interna,
   dentro do <ui:define name="body">, após theme.css.
   ============================================================ */

/* ============ RESET DO .CARD DO TEMPLATE ============ */
/* O template.xhtml envolve o body em .row > .card > .header + .content.
   Quando a página tem .oab-page, neutralizamos esse card pra não duplicar
   visual (card-in-card) nem repetir o título. */
.main-panel .card:has(.oab-page) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.main-panel .card:has(.oab-page) > .header {
    display: none !important;
}
.main-panel .card:has(.oab-page) > .content {
    padding: 0 !important;
    background: transparent !important;
}

/* ============ PAGE WRAPPER ============ */
.oab-page {
    font-family: 'Muli', 'Open Sans', Arial, sans-serif;
    color: #1a1a1a;
    padding: 0 0 32px;
}
.oab-page * { box-sizing: border-box; }

/* Aproxima migalhas → título quando a tela é refatorada (.oab-page).
   .migalhas tem margin-bottom:25px no css.css global — telas antigas mantêm. */
.migalhas:has(+ .oab-page),
.migalhas + .oab-page,
body:has(.oab-page) .migalhas {
    margin-bottom: 17px !important;
}

/* ============ PAGE HEADER ============ */
.oab-page-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
}
.oab-page-header-text {
    flex: 1;
    min-width: 0;
}
.oab-page-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 3px;
    letter-spacing: -0.3px;
}
.oab-page-header p {
    margin: 0;
    color: #5f5f5f;
    font-size: 12px;
}
/* Setinha de voltar ao lado do título (navegação rápida) */
.oab-page-back,
a.oab-page-back,
a.oab-page-back:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff !important;
    border: 1.5px solid #ececec !important;
    color: #666 !important;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all .18s ease;
    text-decoration: none !important;
    cursor: pointer;
}
.oab-page-back:hover,
.oab-page-back:focus,
a.oab-page-back:hover,
a.oab-page-back:focus {
    background: #fff5f4 !important;
    color: #ec5d4f !important;
    border-color: #ec5d4f !important;
    text-decoration: none !important;
}
.oab-page-back i { font-size: 14px; color: inherit !important; }

/* ============ CARDS ============ */
.oab-card {
    background: #fff;
    border: 1.5px solid #ececec;
    border-radius: 10px;
    padding: 18px 20px;
    margin: 0 0 16px;
}

/* ============ FORM ROW / FORM GROUP ============ */
.oab-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 14px;
}
.oab-form-group {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.oab-form-group.full-width { flex: 1 1 100%; }
/* Larguras fixas pra campo único numa linha. Em telas <=768px viram 100%
   pra não cortar o input no celular. */
.oab-form-group.half-width    { flex: 0 1 calc(50% - 6px); max-width: calc(50% - 6px); }
.oab-form-group.third-width   { flex: 0 1 calc(33.333% - 8px); max-width: calc(33.333% - 8px); }
.oab-form-group.quarter-width { flex: 0 1 calc(25% - 9px); max-width: calc(25% - 9px); }
@media (max-width: 768px) {
    .oab-form-group.half-width,
    .oab-form-group.third-width,
    .oab-form-group.quarter-width { flex: 1 1 100%; max-width: 100%; }
}
.oab-form-group label {
    font-size: 11px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.2px;
    margin: 0;
    /* line-height fixo pra evitar que um label com <i class="bi ..."> fique
       mais alto que os outros da mesma linha (o ícone do BS Icons usa
       vertical-align: -.125em e expande o line-box do label) — o que descia
       o input/select alguns px e quebrava o alinhamento horizontal. */
    line-height: 1.4;
}
.oab-form-group label .bi {
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
}
.oab-form-group input,
.oab-form-group select,
.oab-form-group textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 12px;
    background: #fff;
    color: #1a1a1a;
    font-family: inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.oab-form-group input:focus,
.oab-form-group select:focus,
.oab-form-group textarea:focus {
    outline: none;
    border-color: #ec5d4f;
    box-shadow: 0 0 0 3px rgba(236, 93, 79, .12);
}
.oab-form-group input::placeholder,
.oab-form-group textarea::placeholder {
    color: #8a8a8a;
}
.oab-form-group input:disabled,
.oab-form-group select:disabled,
.oab-form-group textarea:disabled {
    background: #f5f5f5;
    color: #777;
    cursor: not-allowed;
}

/* ============ ACTION TOOLBAR ============ */
.oab-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 0;
}
.oab-toolbar-left,
.oab-toolbar-right {
    display: flex;
    gap: 6px;
    align-items: center;
}
.oab-toolbar-right { margin-left: auto; }

/* Espaçamento quando uma toolbar precede diretamente uma tabela — evita
   que o botão de ação (ex.: "Adicionar X") fique colado no header da tabela. */
.oab-toolbar + .oab-table { margin-top: 12px; }

/* ============ BUTTONS ============ */
.oab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.3px;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s ease;
    font-family: inherit;
    white-space: nowrap;
}
.oab-btn i { font-size: 13px; line-height: 1; }
.oab-btn:focus { outline: none; }
.oab-btn:focus-visible { box-shadow: 0 0 0 3px rgba(236, 93, 79, .25); }

/* Cor herdada pelos filhos (span, i) — necessário pra sobrescrever `a { color: #68B3C8 }` do theme.css */
.oab-btn,
.oab-btn span,
.oab-btn i { color: inherit !important; }

/* Botão visualmente desabilitado — usado quando o link <a> não pode usar o
   atributo HTML `disabled` (não é padrão em <a>). pointer-events:none é o que
   de fato bloqueia o clique; opacity dá o feedback visual de "off". */
.oab-btn.oab-btn-disabled,
.oab-btn.oab-btn-disabled:hover,
.oab-btn.oab-btn-disabled:focus {
    opacity: 0.55;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
    transform: none !important;
}

/* Override do theme PF: pr:commandLink/commandButton recebem classes ui-commandlink/ui-button
   que duplicam padding/font do PF, deixando o botão maior que os <a class="oab-btn"> normais. */
.oab-btn.ui-commandlink,
.oab-btn.ui-button,
button.oab-btn {
    padding: 7px 15px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    height: auto !important;
}

/* Primary — Pesquisar / Salvar / Confirmar / Novo / Aprovar */
.oab-btn-primary,
a.oab-btn-primary,
a.oab-btn-primary:visited {
    background: #ec5d4f !important;
    color: #fff !important;
    border-color: #ec5d4f !important;
}
.oab-btn-primary:hover,
.oab-btn-primary:focus-visible,
a.oab-btn-primary:hover,
a.oab-btn-primary:focus-visible {
    background: #d45447 !important;
    border-color: #d45447 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Primary outline — ações secundárias de navegação contextual (atalhos pra
   sub-telas relacionadas) — mantém a identidade vermelha do sistema sem
   competir com o "Salvar" primary cheio do rodapé. */
.oab-btn-primary-outline,
a.oab-btn-primary-outline,
a.oab-btn-primary-outline:visited {
    background: #fff !important;
    color: #ec5d4f !important;
    border-color: #ec5d4f !important;
}
.oab-btn-primary-outline:hover,
.oab-btn-primary-outline:focus-visible,
a.oab-btn-primary-outline:hover,
a.oab-btn-primary-outline:focus-visible {
    background: #ec5d4f !important;
    color: #fff !important;
    border-color: #ec5d4f !important;
    text-decoration: none !important;
}

/* Light — Limpar / Cancelar / Voltar / Imprimir / Exportar / Reprovar */
.oab-btn-light,
a.oab-btn-light,
a.oab-btn-light:visited {
    background: #fff !important;
    color: #555 !important;
    border-color: #c8c8c8 !important;
}
.oab-btn-light:hover,
.oab-btn-light:focus-visible,
a.oab-btn-light:hover,
a.oab-btn-light:focus-visible {
    background: #fff5f4 !important;
    color: #ec5d4f !important;
    border-color: #ec5d4f !important;
    text-decoration: none !important;
}

/* Danger — Excluir confirm */
.oab-btn-danger,
a.oab-btn-danger,
a.oab-btn-danger:visited {
    background: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}
.oab-btn-danger:hover,
.oab-btn-danger:focus-visible,
a.oab-btn-danger:hover,
a.oab-btn-danger:focus-visible {
    background: #b02a37 !important;
    border-color: #b02a37 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Warning — ações intermediárias / reversíveis (Diligência, Desistência, Remover anexo etc) */
.oab-btn-warning,
a.oab-btn-warning,
a.oab-btn-warning:visited {
    background: #d4a017 !important;
    color: #fff !important;
    border-color: #d4a017 !important;
}
.oab-btn-warning:hover,
.oab-btn-warning:focus-visible,
a.oab-btn-warning:hover,
a.oab-btn-warning:focus-visible {
    background: #b88912 !important;
    border-color: #b88912 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Icon-only — ações por linha de tabela */
.oab-btn-icon,
.oab-btn-icon-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all .18s ease;
    text-decoration: none;
    font-size: 12px;
}
.oab-btn-icon,
a.oab-btn-icon,
a.oab-btn-icon:visited {
    background: #fff5f4 !important;
    color: #ec5d4f !important;
}
.oab-btn-icon:hover,
.oab-btn-icon:focus-visible,
a.oab-btn-icon:hover,
a.oab-btn-icon:focus-visible {
    background: #ec5d4f !important;
    color: #fff !important;
    text-decoration: none !important;
}
.oab-btn-icon-danger,
a.oab-btn-icon-danger,
a.oab-btn-icon-danger:visited {
    background: #fdeaec !important;
    color: #dc3545 !important;
}
.oab-btn-icon-danger:hover,
.oab-btn-icon-danger:focus-visible,
a.oab-btn-icon-danger:hover,
a.oab-btn-icon-danger:focus-visible {
    background: #dc3545 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ============ REALCE NO HOVER ============
   Os usuarios pediram destaque maior: passar o mouse so escurecia um pouco e o
   feedback ficava discreto. Acrescenta elevacao + sombra na cor do proprio botao —
   e o mesmo efeito que .oab-btn-ia e os botoes do datepicker ja usavam aqui, agora
   valendo para a familia toda e com a mesma medida (0 4px 12px, alfa ~.35).

   POR QUE em regras so de :hover, e nao dentro dos blocos de cor acima: aqueles
   blocos agrupam :hover COM :focus-visible, e o anel de foco de teclado tambem e
   feito por box-shadow (.oab-btn:focus-visible). Declarar a sombra do hover la
   apagaria o anel de quem navega por Tab. Separado, os dois convivem.

   :active devolve o botao ao lugar para dar a sensacao de clique. Botao desabilitado
   ja esta protegido: .oab-btn-disabled zera transform e box-shadow com !important. */
.oab-btn:hover { transform: translateY(-1px); }
.oab-btn:active { transform: translateY(0); }

.oab-btn-primary:hover,
a.oab-btn-primary:hover { box-shadow: 0 4px 12px rgba(236, 93, 79, .38) !important; }

.oab-btn-primary-outline:hover,
a.oab-btn-primary-outline:hover { box-shadow: 0 4px 12px rgba(236, 93, 79, .32) !important; }

.oab-btn-light:hover,
a.oab-btn-light:hover { box-shadow: 0 4px 12px rgba(236, 93, 79, .22) !important; }

.oab-btn-danger:hover,
a.oab-btn-danger:hover { box-shadow: 0 4px 12px rgba(176, 42, 55, .38) !important; }

.oab-btn-warning:hover,
a.oab-btn-warning:hover { box-shadow: 0 4px 12px rgba(184, 137, 18, .38) !important; }

/* Botoes redondos de 28px da coluna Acoes: mesma elevacao, sombra um pouco menor
   para nao pesar dentro da linha da tabela. */
.oab-btn-icon:hover,
a.oab-btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 9px rgba(236, 93, 79, .35) !important;
}
.oab-btn-icon-danger:hover,
a.oab-btn-icon-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 9px rgba(220, 53, 69, .35) !important;
}
.oab-btn-icon i,
.oab-btn-icon-danger i,
.oab-btn-icon span,
.oab-btn-icon-danger span { color: inherit !important; }
.oab-btn-icon i,
.oab-btn-icon-danger i {
    font-size: 13px;
    -webkit-text-stroke: 0.5px currentColor;
}
.oab-cell-actions {
    text-align: center;
    white-space: nowrap;
}
.oab-cell-actions .oab-btn-icon,
.oab-cell-actions .oab-btn-icon-danger {
    margin: 0 2px;
}

/* Linha horizontal de botões dentro de uma célula de tabela — usado quando a
   coluna mistura botões com label (ex.: "Definir como principal" + "Remover").
   Flex resolve o alinhamento vertical que <td vertical-align: middle> só
   garante quando o conteúdo é um único nó inline. */
.oab-cell-actions-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Coluna de ações de tabela: encolhida no fim, sem quebra, centralizada.
   width: 1% + white-space: nowrap empurra demais colunas pra ocupar o resto.
   min-width garante espaço pro header "AÇÕES" (uppercase + letter-spacing
   ~56px) + padding (24px), sem cortar quando a célula só tem ícones. */
th.oab-col-actions,
td.oab-col-actions {
    width: 1%;
    min-width: 100px;
    white-space: nowrap;
    text-align: center;
}
/* Specificity-bump: .oab-table thead th tem 0,1,2 e ganha do seletor acima.
   Esta regra repete text-align: center + min-width com 0,2,2 pra vencer no header. */
.oab-table thead th.oab-col-actions,
.oab-table tbody td.oab-col-actions {
    text-align: center;
    min-width: 100px;
}

/* Coluna de checkbox boolean em tabelas — narrow, centralizada, sem wrap.
   Usado quando a célula só tem um <selectBooleanCheckbox> com label curto
   no header (ex.: Criar, Editar, Pesquisar). min-width acomoda "PESQUISAR"
   uppercase com letter-spacing. */
th.oab-col-checkbox,
td.oab-col-checkbox {
    width: 1%;
    min-width: 95px;
    white-space: nowrap;
    text-align: center;
}

/* Utilitário pra centralizar header E célula de uma coluna de tabela.
   Usar como headerClass="oab-col-center" styleClass="oab-col-center".
   O ".ui-column-title" override é pra pr:column do PrimeFaces — ele wrappa
   o título em <span class="ui-column-title"> com float/display próprio. */
th.oab-col-center,
td.oab-col-center,
.oab-table thead th.oab-col-center,
.oab-table tbody td.oab-col-center {
    text-align: center !important;
}
th.oab-col-center .ui-column-title,
.oab-table thead th.oab-col-center .ui-column-title {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    float: none !important;
}
.oab-table thead th.oab-col-checkbox,
.oab-table tbody td.oab-col-checkbox {
    text-align: center;
    min-width: 95px;
}

/* ============ INPUTS DENTRO DE TABELA ============
   Quando <h:inputText>, <h:selectBooleanCheckbox> ou similares são
   renderizados dentro de células de .oab-table, o browser aplica estilo
   default (cinza, borda fina, checkbox 13px). Aqui replicamos o estilo dos
   .oab-form-group inputs, mas com padding mais compacto pra caber em
   altura de linha de tabela. */
.oab-table tbody td input[type="text"],
.oab-table tbody td input[type="number"],
.oab-table tbody td input[type="email"],
.oab-table tbody td input:not([type]),
.oab-table tbody td select,
.ui-datatable.oab-table tbody td input[type="text"],
.ui-datatable.oab-table tbody td input[type="number"],
.ui-datatable.oab-table tbody td input[type="email"],
.ui-datatable.oab-table tbody td input:not([type]),
.ui-datatable.oab-table tbody td select {
    width: 100%;
    padding: 6px 10px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    color: #1a1a1a;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.oab-table tbody td input[type="text"]:focus,
.oab-table tbody td input[type="number"]:focus,
.oab-table tbody td input[type="email"]:focus,
.oab-table tbody td input:not([type]):focus,
.oab-table tbody td select:focus,
.ui-datatable.oab-table tbody td input[type="text"]:focus,
.ui-datatable.oab-table tbody td input[type="number"]:focus,
.ui-datatable.oab-table tbody td input[type="email"]:focus,
.ui-datatable.oab-table tbody td input:not([type]):focus,
.ui-datatable.oab-table tbody td select:focus {
    outline: none;
    border-color: #ec5d4f;
    box-shadow: 0 0 0 3px rgba(236, 93, 79, .12);
}
.oab-table tbody td input::placeholder,
.ui-datatable.oab-table tbody td input::placeholder {
    color: #8a8a8a;
}

/* Checkbox boolean dentro de tabela — usa accent-color pra ficar vermelho
   OAB quando marcado, em tamanho um pouco maior que o default do browser. */
.oab-table tbody td input[type="checkbox"],
.ui-datatable.oab-table tbody td input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #ec5d4f;
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
}

/* ============ VIDEO LOADING OVERLAY ============
   Wrapper que posiciona um overlay com spinner SOBRE o <video> enquanto o
   blob carrega do servidor. JS adiciona .hidden quando o src é atribuído. */
.oab-video-wrapper {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    min-height: 200px;
}
.oab-video-wrapper video {
    display: block;
    width: 100%;
    height: auto;
}
.oab-video-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    z-index: 2;
    transition: opacity .25s ease;
}
.oab-video-loading.hidden {
    opacity: 0;
    pointer-events: none;
}
.oab-video-loading.error {
    background: rgba(120, 30, 30, 0.85);
}
.oab-video-loading.error i {
    font-size: 32px;
}
.oab-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.22);
    border-top-color: #ec5d4f;
    border-radius: 50%;
    animation: oab-spin .8s linear infinite;
}
@keyframes oab-spin {
    to { transform: rotate(360deg); }
}

/* Ícones e texto de status sim/não (ex.: coluna "Assinou?" em tabelas de
   assinaturas). Aplica em <i class="bi bi-...-fill oab-status-yes/no"> e
   também em rótulos textuais ("Sim"/"Não") via .oab-status-label.
   !important porque .oab-table tbody td tem 'color: #1a1a1a' e venceria
   por especificidade — é exatamente o que essas classes utilitárias
   devem sobrescrever. */
.oab-status-yes     { color: #10b981 !important; }
.oab-status-no      { color: #dc3545 !important; }
.oab-status-warning { color: #d97706 !important; }
.oab-status-neutral { color: #6b7280 !important; }
i.oab-status-yes, i.oab-status-no, i.oab-status-warning, i.oab-status-neutral { font-size: 16px; }
.oab-status-label { font-weight: 700; }

/* Tabela com células sem quebra de linha — quando o conteúdo precisa ficar
   numa só linha (e horizontalmente escrolla se transbordar via wrapper).  */
.oab-table-nowrap td,
.oab-table-nowrap th {
    white-space: nowrap;
}

/* Bloco de assinantes — colapsa em 10 linhas até clicar "Exibir todos".
   Quando .expanded é adicionado, mostra todas as linhas. */
.oab-assinantes-bloco:not(.expanded) .oab-assinantes-tabela tbody tr:nth-child(n+11) {
    display: none;
}
/* Fade gradiente nas últimas linhas pra dar a sensação de "tem mais embaixo"
   enquanto o bloco está colapsado. Some assim que expande. */
.oab-assinantes-bloco:not(.expanded) .oab-assinantes-tabela tbody {
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0,0,0,0.25) 100%);
    mask-image: linear-gradient(to bottom, #000 78%, rgba(0,0,0,0.25) 100%);
}
.oab-assinantes-toggle-wrapper {
    display: flex;
    justify-content: center;
    margin: 8px 0 4px;
}

/* Wrapper pra tabelas que podem extrapolar a largura do card —
   permite scroll horizontal sem cortar conteúdo. */
.oab-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* Toolbar acima da tabela (campo de busca, filtros leves). */
.oab-table-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}
.oab-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 320px;
}
.oab-search-wrapper i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8a8a;
    font-size: 13px;
    pointer-events: none;
}
.oab-search-input {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 30px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    color: #1a1a1a;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.oab-search-input:focus {
    outline: none;
    border-color: #d4a017;
    box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.15);
}

/* Barra com paginação + seletor de tamanho de página. */
.oab-pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}
.oab-pagination-bar .oab-pagination { margin: 0; flex: 1 1 auto; }

.oab-page-size {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
}
.oab-page-size label { font-weight: 700; margin: 0; }
.oab-page-size select {
    height: 28px;
    padding: 0 8px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    color: #1a1a1a;
    cursor: pointer;
}

/* Paginação client-side simples (botões 1/2/3...). */
.oab-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}
.oab-page-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.oab-page-btn:hover {
    background: #fff5f4;
    border-color: #ec5d4f;
    color: #ec5d4f;
    transform: translateY(-1px);
    box-shadow: 0 3px 9px rgba(236, 93, 79, .22);
}
.oab-page-btn.active {
    background: #d4a017;
    border-color: #d4a017;
    color: #fff;
}
.oab-page-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Utilitário pra colunas de tabela que não devem quebrar linha
   (datas, valores monetários, IDs com máscara). Centraliza header + célula.
   Seletores combinados com th/td pra vencer specificity de `.oab-table thead th`. */
th.oab-nowrap,
td.oab-nowrap {
    white-space: nowrap;
    text-align: center;
}

/* ============ TABLE ============ */
.oab-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1.5px solid #ececec;
    border-radius: 10px;
    overflow: hidden;
    font-size: 12px;
    margin: 0 0 14px;
}
.oab-table thead th {
    background: #fafafa;
    color: #666;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 6px 12px;
    text-align: left;
    border-bottom: 1px solid #ececec;
}
.oab-table tbody td {
    padding: 6px 12px;
    color: #1a1a1a;
    border-bottom: 1px solid #f4f4f4;
    vertical-align: middle;
    line-height: 1.35;
}
.oab-table tbody tr:last-child td { border-bottom: none; }
.oab-table tbody tr:hover { background: #fafafa; }

/* ============ PRIMEFACES DATATABLE — alinhar com .oab-table ============
   Quando usamos <pr:dataTable styleClass="oab-table">, o PF aplica a classe
   no DIV wrapper externo (.ui-datatable), não na <table> interna. Replicamos
   os estilos com seletores que descem até a tabela real. */
.ui-datatable.oab-table {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.ui-datatable.oab-table > .ui-datatable-tablewrapper,
.ui-datatable.oab-table > div {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}
.ui-datatable.oab-table table {
    width: 100% !important;
    /* PF default é table-layout:fixed, que ignora min-width e força colunas
       a respeitarem width:1% literal — cortando o header "AÇÕES". Forçamos
       auto pra que o browser dimensione pelas larguras de conteúdo. */
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
    border: 1.5px solid #ececec !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    margin: 0 0 8px !important;
}
.ui-datatable.oab-table thead th {
    background: #fafafa !important;
    color: #666 !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    padding: 6px 12px !important;
    text-align: left !important;
    border-bottom: 1px solid #ececec !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    /* PF default `overflow:hidden` corta "AÇÕES" no header — reset pra visible */
    overflow: visible !important;
}
.ui-datatable.oab-table tbody td {
    padding: 6px 12px !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid #f4f4f4 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle !important;
    line-height: 1.35 !important;
    background: #fff !important;
    overflow: visible !important;
}
.ui-datatable.oab-table tbody tr:last-child td { border-bottom: none !important; }
.ui-datatable.oab-table tbody tr:hover td,
.ui-datatable.oab-table tbody tr.ui-state-hover td { background: #fafafa !important; }
/* Coluna Ações em pr:dataTable: mantém o `width:1%` (encolhe a coluna ao
   máximo, empurra Descrição pra ocupar o resto e mantém Ações no extremo
   direito), mas com `min-width` garantindo espaço pro label "AÇÕES" sem
   cortar. Sem min-width, o `width:1%` no PF datatable encolhe até o ícone
   e o header vaza. */
.ui-datatable.oab-table thead th.oab-col-actions,
.ui-datatable.oab-table tbody td.oab-col-actions {
    width: 1% !important;
    min-width: 110px !important;
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* ============ PRIMEFACES PAGINATOR — mesmo padrão do composite paginacao ============
   Replicamos o visual do <paginacao:paginacao> (.oab-page-btn definido em
   sidebar-modern.css): quadrado arredondado branco com borda cinza clara,
   active em vermelho OAB (#ec5d4f). Aplica em qualquer .ui-paginator interno
   do pr:dataTable. flex-wrap:wrap pra o currentPageReport quebrar pra próxima
   linha (via flex-basis:100% + order:99 abaixo). */
.ui-datatable .ui-paginator,
.ui-paginator.ui-paginator-bottom,
.ui-paginator.ui-paginator-top {
    background: transparent !important;
    border: none !important;
    padding: 8px 0 4px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px;
    font-size: 11.5px !important;
    color: #666 !important;
}
.ui-paginator a.ui-paginator-first,
.ui-paginator a.ui-paginator-prev,
.ui-paginator a.ui-paginator-next,
.ui-paginator a.ui-paginator-last,
.ui-paginator a.ui-paginator-page,
.ui-paginator .ui-paginator-pages a,
.ui-paginator span.ui-paginator-first,
.ui-paginator span.ui-paginator-prev,
.ui-paginator span.ui-paginator-next,
.ui-paginator span.ui-paginator-last {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 9px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1.5px solid #ececec !important;
    background: #fff !important;
    color: #666 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: none !important;
    box-sizing: border-box;
}
.ui-paginator .ui-paginator-pages {
    display: inline-flex !important;
    gap: 5px;
    margin: 0 !important;
}
.ui-paginator a:hover,
.ui-paginator .ui-paginator-pages a:hover,
.ui-paginator a.ui-state-hover {
    background: #fff5f4 !important;
    color: #ec5d4f !important;
    border-color: #ec5d4f !important;
}
.ui-paginator a.ui-state-active,
.ui-paginator .ui-paginator-pages a.ui-state-active {
    background: #ec5d4f !important;
    color: #fff !important;
    border-color: #ec5d4f !important;
    cursor: default;
}
.ui-paginator a.ui-state-disabled,
.ui-paginator a.ui-state-disabled:hover,
.ui-paginator span.ui-state-disabled {
    background: #fafafa !important;
    color: #ccc !important;
    border-color: #f0f0f0 !important;
    cursor: not-allowed;
    opacity: 1;
}
/* Esconde os <span class="ui-icon"> defaults e injeta Bootstrap Icons.
   PrimeFaces 14 PageLinkRenderer escreve uma letra placeholder dentro do
   span ("F"/"P"/"N"/"E" pra first/prev/next/end) — escondemos com
   font-size:0 no container e damos font-size:13px no ::before pra exibir
   só o glyph do bi-chevron-*. */
.ui-paginator .ui-icon {
    width: auto !important;
    height: auto !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    overflow: visible !important;
    font-size: 0 !important;
    line-height: 1 !important;
    display: inline-block;
    color: inherit !important;
}
.ui-paginator .ui-icon-seek-first::before,
.ui-paginator .ui-icon-seek-prev::before,
.ui-paginator .ui-icon-seek-next::before,
.ui-paginator .ui-icon-seek-end::before {
    font-family: "bootstrap-icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-block;
    color: inherit !important;
    vertical-align: middle;
}
.ui-paginator .ui-icon-seek-first::before { content: "\f27f"; }   /* bi-chevron-double-left */
.ui-paginator .ui-icon-seek-prev::before  { content: "\f284"; }   /* bi-chevron-left */
.ui-paginator .ui-icon-seek-next::before  { content: "\f285"; }   /* bi-chevron-right */
.ui-paginator .ui-icon-seek-end::before   { content: "\f280"; }   /* bi-chevron-double-right */

/* Current-page report ("Exibindo X-Y de Z") — quebra linha e vira info text
   abaixo da paginação, mesmo look do composite .oab-pagination-info. Specificity
   alta pra vencer o tema PF default (que aplica float/position). */
.ui-paginator span.ui-paginator-current,
.ui-datatable .ui-paginator .ui-paginator-current,
.ui-paginator.ui-paginator-bottom .ui-paginator-current {
    flex: 0 0 100% !important;
    order: 99 !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    color: #5f5f5f !important;
    font-size: 11px !important;
    font-weight: normal !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    height: auto !important;
    min-width: 0 !important;
    line-height: 1.4 !important;
    float: none !important;
    position: static !important;
}
/* Dropdown de "registros por página" — não usado, mas o PF pode renderizar
   quando rowsPerPageTemplate está presente. Escondemos via CSS. */
.ui-paginator .ui-paginator-rpp-options,
.ui-paginator .ui-paginator-jtp-select {
    display: none !important;
}

/* ============ RESULT HEADER (acima da tabela) ============ */
.oab-result-header {
    margin: 16px 0 8px;
    color: #666;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Cabeçalho de seção com ação à direita — usado quando o card precisa de um
   botão alinhado ao título (ex.: "Sócio" + "Representante legal"). Zera as
   margens internas dos filhos pra centralizar verticalmente. */
.oab-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0 8px;
}
.oab-section-head > .oab-result-header { margin: 0; }

/* ============ EMPTY STATE ============ */
.oab-empty-state {
    text-align: center;
    padding: 48px 16px;
    color: #5f5f5f;
    font-size: 12.5px;
    background: #fff;
    border: 1.5px dashed #ececec;
    border-radius: 10px;
    margin: 16px 0;
}
.oab-empty-state i {
    display: block;
    font-size: 32px;
    color: #ddd;
    margin-bottom: 8px;
}
.oab-empty-state strong {
    display: block;
    color: #555;
    font-weight: 700;
    margin-bottom: 3px;
    font-size: 13px;
}

/* ============ ALERTS (substituem .well bg-*) ============ */
.oab-alert {
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 12px;
}
.oab-alert-warning {
    background: #fff8e6;
    border: 1px solid #f5d586;
    border-left: 4px solid #d4a017;
    color: #6b4f00;
}
.oab-alert-danger {
    background: #fdeaec;
    border: 1px solid #f5b5bc;
    border-left: 4px solid #dc3545;
    color: #842029;
}
.oab-alert-success {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-left: 4px solid #4caf50;
    color: #1b5e20;
}

/* Layout interno dos alertas que têm botão de ação à direita
   (ex.: alerta verde "documento disponível" com botão Download). */
.oab-alert-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.oab-alert-text {
    flex: 1 1 0;
    min-width: 200px;
}

/* ============ DOWNLOAD READY (card celebrativo de documento pronto) ============ */
.oab-download-ready {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 28px;
    margin-top: 16px;
    background: linear-gradient(135deg, #f0faf2 0%, #d8f0dd 100%);
    border: 1px solid #a5d6a7;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.08);
    flex-wrap: wrap;
}
.oab-download-ready-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.oab-download-ready-icon .bi {
    font-size: 36px;
    color: #d32f2f;
    line-height: 1;
}
.oab-download-ready-icon::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #4caf50;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}
.oab-download-ready-body {
    flex: 1 1 0;
    min-width: 200px;
}
.oab-download-ready-title {
    margin: 0 0 4px 0;
    color: #1b5e20;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
.oab-download-ready-subtitle {
    margin: 0;
    color: #2e7d32;
    font-size: 14px;
    line-height: 1.4;
}
.oab-download-ready-action {
    flex-shrink: 0;
}
.oab-download-ready-action .oab-btn {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
}
@media (max-width: 640px) {
    .oab-download-ready {
        flex-direction: column;
        text-align: center;
    }
    .oab-download-ready-action {
        width: 100%;
    }
    .oab-download-ready-action .oab-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============ NAV TILES (atalhos de navegação visuais — usado p/ acessar subviews
   de um registro: ex. gerenciarEmpresa → Quadro societário, Filial, Histórico ato, etc.) ============ */
.oab-nav-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.oab-nav-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    text-decoration: none;
    color: #2c3e50;
}
.oab-nav-tile:hover {
    border-color: #ec5d4f;
    box-shadow: 0 6px 16px rgba(236, 93, 79, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: #2c3e50;
}
.oab-nav-tile:focus,
.oab-nav-tile:active {
    text-decoration: none;
    color: #2c3e50;
}
.oab-nav-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
}
.oab-nav-tile-icon.is-blue   { background: #e3f2fd; color: #1565c0; }
.oab-nav-tile-icon.is-purple { background: #f3e5f5; color: #7b1fa2; }
.oab-nav-tile-icon.is-green  { background: #e8f5e9; color: #2e7d32; }
.oab-nav-tile-icon.is-orange { background: #fff3e0; color: #ef6c00; }
.oab-nav-tile-icon.is-red    { background: #ffebee; color: #c62828; }
.oab-nav-tile-icon.is-teal   { background: #e0f2f1; color: #00796b; }
.oab-nav-tile-content {
    flex: 1 1 0;
    min-width: 0;
}
.oab-nav-tile-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: #2c3e50;
}
.oab-nav-tile-arrow {
    color: #adb5bd;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.18s ease, color 0.18s ease;
}
.oab-nav-tile:hover .oab-nav-tile-arrow {
    color: #ec5d4f;
    transform: translateX(3px);
}

/* ============ ACESSO NEGADO (página 403 estilizada) ============ */
.oab-acesso-negado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
    min-height: calc(100vh - 220px);
    background: radial-gradient(ellipse at top, #fff5f4 0%, transparent 60%);
}
.oab-acesso-negado-icon {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff 0%, #ffe5e2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    box-shadow: 0 14px 50px rgba(236, 93, 79, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: oab-an-pulse 2.6s ease-in-out infinite;
}
.oab-acesso-negado-icon i {
    font-size: 70px;
    color: #ec5d4f;
    filter: drop-shadow(0 4px 10px rgba(236, 93, 79, 0.25));
    animation: oab-an-tilt 4.2s ease-in-out infinite;
}
@keyframes oab-an-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@keyframes oab-an-tilt {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}
/* Bolinhas decorativas flutuando ao redor do escudo */
.oab-acesso-negado-dot {
    position: absolute;
    border-radius: 50%;
    background: #ec5d4f;
    opacity: 0.55;
}
.oab-acesso-negado-dot-1 {
    width: 14px; height: 14px;
    top: 8px; right: -6px;
    animation: oab-an-float-1 3.6s ease-in-out infinite;
}
.oab-acesso-negado-dot-2 {
    width: 10px; height: 10px;
    bottom: 18px; left: -10px;
    background: #d4a017;
    animation: oab-an-float-2 4.2s ease-in-out infinite;
}
.oab-acesso-negado-dot-3 {
    width: 8px; height: 8px;
    top: -4px; left: 24px;
    background: #ec5d4f;
    opacity: 0.4;
    animation: oab-an-float-3 5s ease-in-out infinite;
}
@keyframes oab-an-float-1 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(4px, -8px); }
}
@keyframes oab-an-float-2 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-6px, 4px); }
}
@keyframes oab-an-float-3 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(3px, 6px); }
}
.oab-acesso-negado-titulo {
    font-size: 30px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 14px;
    letter-spacing: -0.3px;
}
.oab-acesso-negado-mensagem {
    font-size: 15px;
    color: #555;
    line-height: 1.65;
    max-width: 520px;
    margin: 0 0 22px;
}
.oab-acesso-negado-dica {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff8e6;
    border: 1px solid #f5d586;
    border-left: 4px solid #d4a017;
    color: #6b4f00;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    margin: 0 0 32px;
    max-width: 520px;
}
.oab-acesso-negado-dica i { font-size: 14px; }
.oab-acesso-negado-acoes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.oab-acesso-negado-acoes .oab-btn { padding: 10px 22px; font-size: 13px; }
@media (max-width: 600px) {
    .oab-acesso-negado-icon { width: 120px; height: 120px; }
    .oab-acesso-negado-icon i { font-size: 56px; }
    .oab-acesso-negado-titulo { font-size: 24px; }
}

/* ============ PAGE FOOTER (botão Voltar etc) ============ */
.oab-page-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 22px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #ececec;
}

/* ============ MODAL — apenas visual; deixa o BS5 controlar stacking/transição ============ */
.modal-content {
    border: 1.5px solid #ececec !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
}
.modal-header {
    border-bottom: 1px solid #f1f1f1 !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.modal-title {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin: 0 !important;
}
.modal .panel-body,
.modal-body {
    padding: 18px 20px !important;
    font-size: 12.5px;
}
.modal-footer {
    border-top: 1px solid #f1f1f1 !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
}
.modal-footer .pull-left,
.modal-footer .pull-right { float: none !important; }
/* btn-close (BS5 nativo) — só ajustar tamanho/posição se necessário */
.modal-header .btn-close {
    margin: 0;
    padding: .4rem;
    opacity: .6;
    transition: opacity .18s;
}
.modal-header .btn-close:hover { opacity: 1; }

/* ============ TERMS BOX (texto longo só-leitura — substitui textarea disabled) ============ */
.oab-terms-box {
    max-height: 260px;
    overflow-y: auto;
    padding: 14px 18px;
    border: 1px solid #e8edf3;
    border-left: 4px solid #d4a017;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%);
    font-size: 12.5px;
    line-height: 1.6;
    color: #2c3e50;
    white-space: pre-wrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,0.03);
}
.oab-terms-box::-webkit-scrollbar { width: 8px; }
.oab-terms-box::-webkit-scrollbar-thumb {
    background: #cfd6df;
    border-radius: 4px;
}
.oab-terms-box::-webkit-scrollbar-thumb:hover { background: #b0b8c2; }

/* Variante fluida — sem altura máxima, deixa o texto crescer naturalmente.
   Útil em modais (o próprio modal-body já rola se passar da viewport). */
.oab-terms-box-fluid {
    max-height: none;
    overflow-y: visible;
}

/* ============ RADIO GROUP (h:selectOneRadio) ============
   Mojarra renderiza como <table><tr><td><input/><label/></td></tr></table>.
   A tabela default herda width do pai (fica 100%) e espalha as opções pelos
   extremos. Forçamos display:inline-flex em TODA a cadeia (table→tbody→tr→td)
   pra colapsar a largura no conteúdo e controlar o gap entre opções. */
.oab-radio-group,
.oab-radio-group > tbody,
.oab-radio-group > tbody > tr {
    display: inline-flex !important;
    width: auto !important;
    align-items: center;
    flex-wrap: nowrap;
    border-spacing: 0;
}
.oab-radio-group > tbody > tr > td {
    display: inline-flex !important;
    align-items: center;
    padding: 4px 0 !important;
    margin: 0 !important;
    border: none !important;
    white-space: nowrap;
    vertical-align: middle;
    width: auto !important;
}
/* Gap entre opções (Sim ↔ Não) — só entre td vizinhos, não nos extremos. */
.oab-radio-group > tbody > tr > td + td {
    margin-left: 18px !important;
}
.oab-radio-group input[type="radio"] {
    width: auto !important;
    margin: 0 5px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle;
    cursor: pointer;
    accent-color: #ec5d4f;
}
.oab-radio-group label {
    display: inline !important;
    margin: 0 !important;
    font-size: 12px;
    font-weight: 500;
    color: #1a1a1a;
    vertical-align: middle;
    cursor: pointer;
}

/* ============ CHECKBOX INLINE (label envolvendo input + texto) ============
   Neutraliza o width:100% global do .oab-form-group input — o checkbox
   ocupava a linha toda e empurrava o texto pra baixo. */
.oab-form-group input[type="checkbox"] {
    width: auto !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle;
    cursor: pointer;
}
.oab-form-group label.form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 12px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
}
.oab-form-group label.form-check-label span,
.oab-form-group label.form-check-label i {
    vertical-align: middle;
}

/* ============================================================
   OAB DATEPICKER — estiliza o overlay do PrimeFaces (.ui-datepicker)
   Tema "moderno e suave": header gradiente, dias arredondados,
   hoje em pill, animação de entrada.
   PrimeFaces 14 ainda usa classes prefixadas com .ui-* (jQuery UI)
   no overlay do calendar — não .p-datepicker (que é PF 11+ "nova").
   ============================================================ */

/* Wrapper do componente (campo + botão) — aparece inline na página */
.oab-form-group .ui-calendar {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* O painel do calendário é FILHO deste wrapper (o p:datePicker usa appendTo=null) e o PF o
   posiciona com `top: String(container.innerHeight())` — string SEM unidade, que o browser
   descarta; o top continua `auto`. Com o wrapper no display:inline-block do PF isso passa
   despercebido, porque a posição estática de um filho absoluto em fluxo normal é logo ABAIXO
   do campo. Aqui o wrapper é flex, e num container flex a posição estática vira o canto do
   content box: o calendário abre EM CIMA do campo e passa a engolir os cliques dos campos
   ao redor (medido em Chrome: top resolvia para 0px em vez de 57px). Fixar o top devolve o
   painel para baixo do campo, sem depender do valor quebrado que o PF manda. */
.oab-form-group .ui-calendar > .ui-datepicker {
    top: 100% !important;
    margin-top: 4px;
}
.oab-form-group .ui-calendar .ui-inputfield,
.oab-form-group .ui-calendar input.hasDatepicker {
    flex: 1 1 auto;
    width: 100% !important;
    padding: 8px 11px !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    background: #fff !important;
    color: #1a1a1a !important;
    font-family: inherit !important;
    height: auto !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}
.oab-form-group .ui-calendar .ui-inputfield:focus {
    outline: none !important;
    border-color: #ec5d4f !important;
    box-shadow: 0 0 0 3px rgba(236, 93, 79, .12) !important;
}
.oab-form-group .ui-calendar .ui-inputfield::placeholder {
    color: #8a8a8a !important;
}
/* Botão de calendário (showIcon="true") — ícone à direita, colado no input */
.oab-form-group .ui-calendar .ui-datepicker-trigger {
    flex: 0 0 38px;
    width: 38px;
    height: auto;
    margin-left: -38px;
    background: transparent !important;
    border: none !important;
    color: #5f5f5f !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .18s ease;
}
.oab-form-group .ui-calendar .ui-datepicker-trigger:hover,
.oab-form-group .ui-calendar .ui-datepicker-trigger:focus {
    color: #ec5d4f !important;
    background: transparent !important;
    outline: none;
}
/* Esconde o texto/ícone padrão do PF e injeta um ícone Bootstrap Icons */
.oab-form-group .ui-calendar .ui-datepicker-trigger .ui-button-text,
.oab-form-group .ui-calendar .ui-datepicker-trigger .ui-icon {
    display: none !important;
}
.oab-form-group .ui-calendar .ui-datepicker-trigger::before {
    font-family: "bootstrap-icons" !important;
    content: "\f214"; /* bi-calendar3 */
    font-size: 16px;
    line-height: 1;
    display: inline-block;
}
/* Reserva espaço pro ícone sobreposto */
.oab-form-group .ui-calendar:has(.ui-datepicker-trigger) .ui-inputfield {
    padding-right: 38px !important;
}

/* ============ OVERLAY (PAINEL DO CALENDÁRIO) ============ */
/* Aparece em body como #ui-datepicker-div (inline) ou .ui-datepicker (overlay PF) */
.ui-datepicker,
#ui-datepicker-div {
    background: #fff !important;
    border: 1px solid #ececec !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(20, 30, 60, .12), 0 2px 6px rgba(20, 30, 60, .06) !important;
    padding: 8px !important;
    font-family: 'Muli', 'Open Sans', Arial, sans-serif !important;
    color: #1a1a1a !important;
    animation: oab-dp-fade .18s ease-out;
    z-index: 1100 !important;
    width: auto !important;
    min-width: 0 !important;
}
@keyframes oab-dp-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Header com mês/ano + setas */
.ui-datepicker .ui-datepicker-header {
    background: linear-gradient(135deg, #ec5d4f 0%, #d45447 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 5px 7px !important;
    margin: 0 0 6px !important;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 0;
    gap: 4px;
}
.ui-datepicker .ui-datepicker-title {
    margin: 0 !important;
    line-height: 1 !important;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2px;
    color: #fff !important;
    flex: 1;
    text-align: center;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
/* Esconde o <input> de ano enquanto nosso JS não substitui por <select>.
   Evita flash do input numérico cinza no header. */
.ui-datepicker input.ui-datepicker-year {
    display: none !important;
}

/* Selects de mês/ano — pílulas em tom vermelho escuro sobre o gradiente
   do header, texto branco. Combinam com a paleta sem "saltar". */
.ui-datepicker .ui-datepicker-title select,
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    background-color: #a8453a !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 9px 9px !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 4px 22px 4px 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1px;
    cursor: pointer !important;
    font-family: inherit !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .15) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    width: auto !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.ui-datepicker .ui-datepicker-title select::-ms-expand,
.ui-datepicker select.ui-datepicker-month::-ms-expand,
.ui-datepicker select.ui-datepicker-year::-ms-expand {
    display: none;
}
.ui-datepicker .ui-datepicker-title select:hover,
.ui-datepicker select.ui-datepicker-month:hover,
.ui-datepicker select.ui-datepicker-year:hover {
    background-color: #8f372d !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
.ui-datepicker .ui-datepicker-title select:focus,
.ui-datepicker select.ui-datepicker-month:focus,
.ui-datepicker select.ui-datepicker-year:focus {
    outline: none !important;
    background-color: #8f372d !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 4px rgba(168, 69, 58, .55) !important;
}
.ui-datepicker .ui-datepicker-title select option,
.ui-datepicker select.ui-datepicker-month option,
.ui-datepicker select.ui-datepicker-year option {
    color: #1a1a1a !important;
    background: #fff !important;
    font-weight: 500;
    padding: 4px 8px;
}
.ui-datepicker .ui-datepicker-title select option:checked,
.ui-datepicker select.ui-datepicker-month option:checked,
.ui-datepicker select.ui-datepicker-year option:checked {
    color: #ec5d4f !important;
    font-weight: 700;
}
/* Setas prev/next — bolinhas brancas com SVG inline (à prova de override do tema) */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker a.ui-datepicker-prev,
.ui-datepicker a.ui-datepicker-next {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, .22) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 11px 11px !important;
    border: none !important;
    color: transparent !important;
    cursor: pointer;
    display: inline-block !important;
    transition: background-color .15s ease, transform .15s ease;
    flex-shrink: 0;
    text-indent: -9999px;
    overflow: hidden !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    vertical-align: middle;
}
.ui-datepicker .ui-datepicker-prev {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !important;
}
.ui-datepicker .ui-datepicker-next {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    background-color: rgba(255, 255, 255, .42) !important;
    transform: scale(1.08);
    border: none !important;
    text-decoration: none !important;
}
.ui-datepicker .ui-datepicker-prev > *,
.ui-datepicker .ui-datepicker-next > *,
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
    display: none !important;
}

/* Tabela do calendário — centralizada caso o panel cresça por causa do
   buttonbar (que tem 2 botões + gap, ficando maior que a grade de 7 dias). */
.ui-datepicker table.ui-datepicker-calendar {
    margin: 0 auto !important;
    border-collapse: separate !important;
    border-spacing: 0;
    width: auto !important;
}
.ui-datepicker table.ui-datepicker-calendar th {
    background: transparent !important;
    color: #6b6b6b !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: none;
    letter-spacing: 0;
    padding: 4px 2px !important;
    border: none !important;
    text-align: center;
    width: 32px;
}
.ui-datepicker table.ui-datepicker-calendar td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: center;
    width: 32px;
    height: 28px;
}
.ui-datepicker table.ui-datepicker-calendar td a,
.ui-datepicker table.ui-datepicker-calendar td span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50% !important;
    background: transparent !important;
    color: #1a1a1a !important;
    border: 1.5px solid transparent !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    padding: 0 !important;
    line-height: 1 !important;
}
.ui-datepicker table.ui-datepicker-calendar td a:hover {
    background: #fff5f4 !important;
    color: #ec5d4f !important;
    border-color: #ffd6d2 !important;
    transform: scale(1.06);
}
/* Hoje — pill branca com borda vermelha grossa e número vermelho escuro.
   Contraste alto pra o número não sumir dentro da bolinha. */
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today a,
.ui-datepicker table.ui-datepicker-calendar td a.ui-state-highlight {
    background: #fff !important;
    color: #b8392c !important;
    border-color: #ec5d4f !important;
    border-width: 2px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today a:hover,
.ui-datepicker table.ui-datepicker-calendar td a.ui-state-highlight:hover {
    background: #fff5f4 !important;
    color: #b8392c !important;
}
/* Dia selecionado — vermelho cheio com texto branco. */
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-current-day a,
.ui-datepicker table.ui-datepicker-calendar td a.ui-state-active {
    background: #ec5d4f !important;
    color: #fff !important;
    border-color: #ec5d4f !important;
    border-width: 1.5px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    box-shadow: 0 2px 8px rgba(236, 93, 79, .4);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-current-day a:hover,
.ui-datepicker table.ui-datepicker-calendar td a.ui-state-active:hover {
    background: #d45447 !important;
    color: #fff !important;
}
/* Dia de outro mês — esmaecido */
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-other-month a,
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-other-month span {
    color: #d4d4d4 !important;
    font-weight: 400 !important;
}
/* Fim de semana — destacado pra orientação visual rápida.
   Domingo = primeira coluna (firstDay=0 no locale pt_BR), Sábado = última.
   Usa tanto :first/:last-child quanto a classe .ui-datepicker-week-end
   pra cobrir variações de locale. */
.ui-datepicker table.ui-datepicker-calendar th:first-child,
.ui-datepicker table.ui-datepicker-calendar th:last-child {
    color: #ec5d4f !important;
}
.ui-datepicker table.ui-datepicker-calendar td:first-child a,
.ui-datepicker table.ui-datepicker-calendar td:last-child a,
.ui-datepicker table.ui-datepicker-calendar td:first-child span,
.ui-datepicker table.ui-datepicker-calendar td:last-child span,
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-week-end a,
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-week-end span {
    color: #ec5d4f !important;
    font-weight: 700;
}
/* No hover/today/selecionado, mantém a cor base do estado */
.ui-datepicker table.ui-datepicker-calendar td:first-child a:hover,
.ui-datepicker table.ui-datepicker-calendar td:last-child a:hover {
    color: #ec5d4f !important;
}
.ui-datepicker table.ui-datepicker-calendar td:first-child.ui-datepicker-other-month a,
.ui-datepicker table.ui-datepicker-calendar td:last-child.ui-datepicker-other-month a,
.ui-datepicker table.ui-datepicker-calendar td:first-child.ui-datepicker-other-month span,
.ui-datepicker table.ui-datepicker-calendar td:last-child.ui-datepicker-other-month span {
    color: #f0c4be !important;
    font-weight: 400 !important;
}
/* Override pra fim de semana + selecionado/hoje — sem isso o vermelho
   do weekend sobrescreve o branco do dia selecionado, deixando o número
   invisível em cima do fundo vermelho do "active". */
.ui-datepicker table.ui-datepicker-calendar td:first-child a.ui-state-active,
.ui-datepicker table.ui-datepicker-calendar td:last-child a.ui-state-active,
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-week-end a.ui-state-active,
.ui-datepicker table.ui-datepicker-calendar td:first-child.ui-datepicker-current-day a,
.ui-datepicker table.ui-datepicker-calendar td:last-child.ui-datepicker-current-day a {
    color: #fff !important;
    font-weight: 700 !important;
}
.ui-datepicker table.ui-datepicker-calendar td:first-child a.ui-state-highlight,
.ui-datepicker table.ui-datepicker-calendar td:last-child a.ui-state-highlight,
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-week-end a.ui-state-highlight,
.ui-datepicker table.ui-datepicker-calendar td:first-child.ui-datepicker-today a,
.ui-datepicker table.ui-datepicker-calendar td:last-child.ui-datepicker-today a {
    color: #b8392c !important;
    font-weight: 700 !important;
}
/* Dia desabilitado */
.ui-datepicker table.ui-datepicker-calendar td.ui-state-disabled span,
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-unselectable span {
    color: #d4d4d4 !important;
    cursor: not-allowed;
    opacity: .55;
}

/* ButtonBar (PF 14 showButtonBar=true) — barra com "Hoje" e "Limpar".
   PF 14 usa classes .ui-datepicker-buttonbar > .ui-g > .ui-g-6 > button
   (jQuery UI legado usava .ui-datepicker-buttonpane).
   Atenção: .ui-g-6 do PF tem `float:left; width:50%` no CSS legado que
   quebra linha em painel estreito. Neutralizamos com flex nowrap. */
.ui-datepicker .ui-datepicker-buttonbar {
    border-top: 1px solid #f0f0f0 !important;
    padding: 8px 0 0 !important;
    margin: 8px 0 0 !important;
    background: transparent !important;
}
.ui-datepicker .ui-datepicker-buttonbar .ui-g {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
.ui-datepicker .ui-datepicker-buttonbar .ui-g::after,
.ui-datepicker .ui-datepicker-buttonbar .ui-g::before {
    display: none !important;
    content: none !important;
}
.ui-datepicker .ui-datepicker-buttonbar .ui-g-6 {
    flex: 0 0 auto !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    display: inline-flex !important;
    text-align: center !important;
}

.ui-datepicker .ui-datepicker-buttonbar button,
.ui-datepicker .ui-today-button,
.ui-datepicker .ui-clear-button {
    padding: 5px 12px !important;
    border-radius: 999px !important;
    border: 1.5px solid #ec5d4f !important;
    background: #fff !important;
    color: #ec5d4f !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.2 !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    width: auto !important;
}
.ui-datepicker .ui-datepicker-buttonbar button:hover,
.ui-datepicker .ui-today-button:hover,
.ui-datepicker .ui-clear-button:hover {
    background: #ec5d4f !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(236, 93, 79, .3) !important;
}
.ui-datepicker .ui-datepicker-buttonbar button .ui-button-text,
.ui-datepicker .ui-today-button .ui-button-text,
.ui-datepicker .ui-clear-button .ui-button-text {
    padding: 0 !important;
    color: inherit !important;
}
/* "Limpar" — variante mais neutra, pra diferenciar do "Hoje" (primário) */
.ui-datepicker .ui-clear-button {
    border-color: #ccc !important;
    color: #666 !important;
}
.ui-datepicker .ui-clear-button:hover {
    background: #f5f5f5 !important;
    color: #1a1a1a !important;
    border-color: #999 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .08) !important;
}

/* ============ TABELA DE PARÂMETROS ============
   Nome do parâmetro: monospace + nowrap, larguras enxutas pra deixar
   espaço pra Descrição (a coluna mais larga). Valor truncado com ellipsis
   pra evitar URLs/JSONs gigantes quebrarem o layout — clique no editar
   abre modal com textarea full. */
th.oab-col-parametro-nome,
td.oab-col-parametro-nome {
    width: 22%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
}
th.oab-col-parametro-valor,
td.oab-col-parametro-valor {
    width: 24%;
    max-width: 280px;
}
.oab-text-truncate {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Campo readonly no modal de edição — mostra o valor como texto destacado
   sem visual de input editável (evita confusão com o campo Valor). */
.oab-readonly-field {
    display: block;
    padding: 9px 12px;
    background: #f5f6f8;
    border: 1px solid #e2e4e8;
    border-radius: 6px;
    color: #1a1a1a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    word-break: break-all;
}

/* Badge mostrando arquivo anexado — ícone + label + nome em destaque.
   Usado nas telas de upload (ex.: anexar certificado .pfx) pra dar feedback
   visual de "arquivo já está no sistema" sem precisar de tooltip. */
.oab-attached-file {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 0;
    padding: 12px 16px;
    background: #f5f7f9;
    border: 1px solid #e2e5e9;
    border-left: 4px solid #ec5d4f;
    border-radius: 8px;
}
.oab-attached-file > i {
    color: #ec5d4f;
    font-size: 22px;
    line-height: 1;
}
.oab-attached-file-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.oab-attached-file-label {
    color: #5f5f5f;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.oab-attached-file-info strong {
    color: #1a1a1a;
    font-size: 13.5px;
    font-weight: 700;
    word-break: break-all;
}
/* Validade do certificado — pílula verde quando dentro do prazo,
   vermelha (oab-validity-expired) quando vencido. */
.oab-attached-file-validity {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 10px;
    background: #e7f5ec;
    border: 1px solid #b8e0c6;
    border-radius: 999px;
    color: #207d3b;
    font-size: 11.5px;
    font-weight: 700;
    width: fit-content;
}
.oab-attached-file-validity i { font-size: 12px; line-height: 1; }
.oab-attached-file-validity.oab-validity-expired {
    background: #fdecec;
    border-color: #f4b9b9;
    color: #c0392b;
}

/* Variante compacta inline para vazio — quando ainda não tem nada anexado.
   Tom neutro, sem alarmar. */
.oab-empty-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 10px 14px;
    background: #fafafa;
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    color: #5f5f5f;
    font-size: 12.5px;
}
.oab-empty-inline > i {
    font-size: 15px;
    color: #aaa;
}

/* ============ CHECKLIST DE REQUISITOS DE SENHA ============
   Lista de critérios (8 chars, maiúscula, minúscula, número, especial, match)
   que ficam cinza quando ainda não atendidos e verdes com check quando ok.
   JS na tela atualiza .req-met conforme o user digita. */
.oab-password-requirements {
    margin-top: 12px;
    padding: 12px 14px;
    background: #fafbfc;
    border: 1px solid #e8ebef;
    border-radius: 8px;
}
.oab-password-requirements-title {
    display: block;
    color: #666;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.oab-password-requirements ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
}
.oab-password-requirements li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5f5f5f;
    font-size: 12px;
    line-height: 1.3;
    transition: color .2s ease;
}
.oab-password-requirements li i {
    font-size: 14px;
    line-height: 1;
    color: #ccc;
    transition: color .2s ease, transform .2s ease;
    flex-shrink: 0;
}
.oab-password-requirements li.req-met {
    color: #207d3b;
    font-weight: 500;
}
.oab-password-requirements li.req-met i {
    color: #207d3b;
    transform: scale(1.1);
}
@media (max-width: 768px) {
    .oab-password-requirements ul {
        grid-template-columns: 1fr;
    }
}

/* Checkbox inline logo abaixo de um campo de filtro — ex.: "Valor exato"
   abaixo do input "Valor". Usa accent-color OAB no checkbox nativo. */
.oab-checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #555;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    user-select: none;
}
.oab-checkbox-inline input[type="checkbox"] {
    accent-color: #ec5d4f;
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

/* Textarea do modal — permite resize vertical e usa monospace pra
   editar URLs/JSON com mais legibilidade. */
.oab-textarea-resize {
    width: 100%;
    resize: vertical;
    min-height: 80px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    padding: 9px 12px;
    border: 1px solid #d0d3d8;
    border-radius: 6px;
}
.oab-textarea-resize:focus {
    outline: none;
    border-color: #ec5d4f;
    box-shadow: 0 0 0 2px rgba(236, 93, 79, .15);
}

/* ============================================================
   RESPONSIVO — CELULAR E TABLET

   Este bloco fica no FIM do arquivo de propósito: quase toda regra aqui empata em
   especificidade com a que ela ajusta, e nesse empate quem decide é a ordem.

   O que resolve de longe a maior parte do problema no celular NÃO está aqui, e sim no
   sidebar-modern.css: a coluna da sidebar estava travada em 260px e, num aparelho de
   390px, sobravam 130px para tudo isto. Aqui ficam os ajustes que continuam valendo
   depois de o conteúdo ganhar a largura inteira.
   ============================================================ */
@media (max-width: 767.98px) {

    /* ---- Cabeçalho e moldura ---- */
    .oab-page { padding: 0 0 24px; }
    .oab-page-header { flex-wrap: wrap; }
    .oab-page-header h2 { font-size: 16px; }
    .oab-page-header p { font-size: 11.5px; }
    .oab-card { padding: 14px 13px; }

    /* ---- Barras de ação ----
       Sem o wrap os botões escapam do card, porque as três barras são flex com
       justify-content: space-between e nenhuma delas quebra linha. Ocupando a linha
       inteira o botão também ganha área de toque decente. */
    .oab-page-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
    .oab-page-footer .oab-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    .oab-toolbar-left,
    .oab-toolbar-right { flex-wrap: wrap; }
    .oab-toolbar-right { margin-left: 0; }

    /* Alvo de toque: com padding 7px e fonte 11.5px o botão fica em ~28px de altura, e
       a referência para o dedo é 44px. 36px é o meio possível sem redesenhar a escala. */
    .oab-btn {
        min-height: 36px;
        padding: 9px 16px;
    }

    /* ---- Campos: o zoom automático do iOS ----
       O iOS dá zoom ao focar campo com fonte abaixo de 16px e deixa a página deslocada na
       horizontal depois — é a sensação de "a tela saiu do lugar" ao digitar. O outro jeito
       de evitar isso é maximum-scale=1 no viewport, que foi justamente o que saiu dos
       templates por bloquear o pinça-zoom. 16px aqui é o preço de manter o zoom manual.

       Os seletores de célula de tabela vêm escritos por extenso porque a regra original
       chega a (0,3,3) com o `input[type="text"]` — um `.oab-page input` não a alcançaria. */
    .oab-page input,
    .oab-page select,
    .oab-page textarea,
    .oab-search-input,
    .oab-table tbody td input[type="text"],
    .oab-table tbody td input[type="number"],
    .oab-table tbody td input[type="email"],
    .oab-table tbody td input:not([type]),
    .oab-table tbody td select,
    .ui-datatable.oab-table tbody td input[type="text"],
    .ui-datatable.oab-table tbody td input[type="number"],
    .ui-datatable.oab-table tbody td input[type="email"],
    .ui-datatable.oab-table tbody td input:not([type]),
    .ui-datatable.oab-table tbody td select {
        font-size: 16px;
    }

    /* ---- Tabelas ----
       Os 12px de respiro por lado são 24px por coluna: numa listagem de 9 colunas isso
       soma 216px, mais da metade de um celular. E o cabeçalho passa a quebrar em duas
       linhas em vez de esticar a coluna — ele é uppercase com letter-spacing e costuma
       ser mais largo que o próprio dado (mesmo raciocínio de .oab-table-compacta). */
    .oab-table thead th,
    .oab-table tbody td { padding: 6px 8px; }
    .oab-table thead th { white-space: normal; }
    .ui-datatable.oab-table thead th,
    .ui-datatable.oab-table tbody td { padding: 6px 8px !important; }
    .ui-datatable.oab-table thead th { white-space: normal !important; }

    /* O pr:dataTable rola dentro do próprio wrapper em vez de arrastar a página inteira.

       `width: auto` com `min-width: 100%` é o que faz a barra aparecer SÓ quando a tabela
       realmente não cabe: com `width: 100%` ela nunca transborda — apenas comprime as
       colunas até o mínimo, que é o sintoma de uma palavra por linha.

       ATENÇÃO ao alcance: isto vale para os pr:dataTable (a classe cai num DIV wrapper).
       A maioria das listagens do admin é h:dataTable, que renderiza a <table> direto, sem
       wrapper onde pendurar a rolagem — essas continuam rolando pela área de conteúdo. Para
       elas existe .oab-table-wrapper, que é markup e se aplica tela por tela. Mudar o
       display da <table> para block resolveria em bloco, mas trocaria o modelo de caixa de
       60+ tabelas de uma vez, e tabela estreita passaria a ter separador de linha mais
       curto que a moldura. */
    .ui-datatable.oab-table > .ui-datatable-tablewrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ui-datatable.oab-table table {
        width: auto !important;
        min-width: 100% !important;
    }

    /* Paginador: 30px de alvo é pouco para o dedo, e é onde mais se erra o toque. */
    .ui-paginator a.ui-paginator-first,
    .ui-paginator a.ui-paginator-prev,
    .ui-paginator a.ui-paginator-next,
    .ui-paginator a.ui-paginator-last,
    .ui-paginator a.ui-paginator-page,
    .ui-paginator .ui-paginator-pages a {
        min-width: 36px !important;
        height: 36px !important;
    }

    /* ---- Modal ----
       O BS5 já é responsivo; o que aperta é o respiro herdado do desktop. */
    .modal-header { padding: 12px 14px !important; }
    .modal-body { padding: 14px !important; }
    .modal-footer { padding: 12px 14px !important; }
}