/* =====================================================================
   Acordos Judiciais — camada complementar

   O design system (tokens, fontes, Training Rail, liquid glass) e a
   biblioteca de componentes (app.css) sao os MESMOS do sistema de
   Contratos/PJs e do Portal RH. Este arquivo cobre apenas:

     1. equivalencias de nome usadas nas telas deste sistema
        (ex.: .table-wrap = .table-wrapper, .check = .checkbox);
     2. componentes que so existem aqui (parcelas, prioridade, multa).

   Carregado DEPOIS de app.css. Nao altere os arquivos do design system:
   eles precisam continuar identicos nos tres sistemas.
   ===================================================================== */

/* =====================================================================
   1. Equivalencias de nome
   ===================================================================== */

/* --- Tabelas --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table td.num, .table th.num,
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table th.num, .table td.num { text-align: right; }
.table td.actions { white-space: nowrap; text-align: right; }
.table tfoot td {
    font-weight: 700;
    background: var(--ink-050);
    border-top: 2px solid var(--ink-200);
}

/* --- Cartoes --- */
.card__header h2, .card__header h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.card__body--tight { padding: var(--space-3) var(--space-5); }

/* --- Grades de cartoes --- */
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* --- Indicadores --- */
.kpi__hint { font-size: .78rem; color: var(--ink-500); margin-top: 5px; }
.kpi__value { font-size: 1.5rem; }
.kpi--primary::before { background: var(--brand-primary); }
.kpi--ok::before      { background: var(--ok-500); }
.kpi--warn::before    { background: var(--warn-500); }

/* --- Selos --- */
.badge--ok   { background: var(--ok-100); color: var(--ok-700); border-color: color-mix(in srgb, var(--ok-500) 30%, white); }
.badge--warn { background: var(--warn-100); color: var(--warn-700); border-color: color-mix(in srgb, var(--warn-500) 30%, white); }

/* --- Botoes --- */
.btn--dark { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
.btn--dark:hover { background: var(--ink-900); color: #fff; }
.btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* --- Formularios: as telas usam <label>, <input>, <select> e <textarea>
       sem classe. Recebem o mesmo visual de .field__label e .input.       --- */
.field > label,
.field > .label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-700);
}
.field > label .req { color: var(--brand-primary); margin-left: 2px; }

.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=date], .field input[type=number], .field input[type=search],
.field input[type=tel], .field input[type=url], .field select, .field textarea,
.card__body input[type=text], .card__body input[type=email], .card__body input[type=password],
.card__body input[type=date], .card__body input[type=number], .card__body input[type=search],
.card__body select, .card__body textarea,
.card__footer input[type=text], .card__footer input[type=email], .card__footer input[type=date],
.card__footer select, .card__footer textarea,
.table input[type=text], .table input[type=date], .table input[type=number], .table select {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--ink-300);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: .9rem;
    color: var(--ink-900);
    background: #fff;
}
.field textarea, .card__body textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus,
.card__body input:focus, .card__body select:focus, .card__body textarea:focus {
    border-color: var(--brand-primary);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 16%, transparent);
}
.field input:disabled, .field select:disabled, .field textarea:disabled {
    background: var(--ink-100); color: var(--ink-500); cursor: not-allowed;
}
.field input[type=color] { padding: 3px; min-height: 40px; }
.field input[type=file] {
    font-size: .85rem; color: var(--ink-700);
    padding: 8px 0;
}

.hint { font-size: .76rem; color: var(--ink-500); }
.field-error { font-size: .78rem; color: var(--danger-700); font-weight: 500; }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--brand-primary); flex: 0 0 17px; }
.check span { min-width: 0; }

fieldset {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin: 0 0 var(--space-4);
}
legend { font-weight: 700; font-size: .88rem; padding: 0 var(--space-2); color: var(--brand-secondary); }

/* Filtros: neste sistema o proprio <form class="filters"> e a grade.       */
.filters {
    background: transparent;
    border: 0;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-3);
    align-items: end;
}
.filters .field { grid-column: auto; }
.filters__actions { display: flex; gap: var(--space-2); padding: 0; flex-wrap: wrap; align-items: end; }

/* --- Paginacao: as telas usam <a> e <span> diretos --- */
.pagination a, .pagination span:not(.list-meta) {
    min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--radius-sm);
    border: 1px solid var(--ink-200); background: #fff; color: var(--ink-700);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .84rem; font-weight: 600;
}
.pagination a:hover { background: var(--ink-050); text-decoration: none; }
.pagination .is-current { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.pagination .is-disabled { opacity: .4; pointer-events: none; }
.pagination { border-top: 0; padding: 0; justify-content: flex-start; }
.list-meta { font-size: .82rem; color: var(--ink-600); border: 0 !important; background: none !important; }

/* --- Abas: as telas usam <a> direto --- */
.tabs a {
    padding: 10px 16px; font-size: .89rem; font-weight: 600; color: var(--ink-600);
    border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap;
}
.tabs a:hover { color: var(--brand-secondary); text-decoration: none; }
.tabs a.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

/* --- Linha do tempo em <ul><li> --- */
ul.timeline { list-style: none; margin: 0; padding-left: 30px; }
ul.timeline > li { position: relative; padding-bottom: var(--space-5); }
ul.timeline > li:last-child { padding-bottom: 0; }
ul.timeline > li::before {
    content: ''; position: absolute; left: -30px; top: 4px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid var(--brand-primary);
}
.timeline__time { font-size: .78rem; color: var(--ink-500); }
.timeline__title { font-weight: 600; font-size: .92rem; color: var(--ink-900); }
.timeline__body { font-size: .88rem; color: var(--ink-600); }

/* --- Listas de definicao em <dl><dt><dd> --- */
dl.dl { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: var(--space-2) var(--space-4); }
dl.dl dt {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-500); font-weight: 700; align-self: center;
}
dl.dl dd { margin: 0; font-size: .92rem; color: var(--ink-900); word-break: break-word; }

/* --- Estado vazio com <strong> --- */
.empty-state strong {
    display: block; font-size: 1.05rem; font-weight: 600;
    color: var(--ink-800); margin-bottom: 6px;
}
.empty-state__icon { display: block; font-size: 1.9rem; opacity: .35; margin-bottom: var(--space-3); }

/* --- Cabecalho de pagina e trilha --- */
.page-header__text { flex: 1; min-width: 240px; }
.page-header__text h1 { margin: 0; font-size: 1.6rem; }
.page-header__text p { color: var(--ink-600); font-size: .92rem; margin: 4px 0 0; }
.breadcrumbs { display: flex; gap: 6px; font-size: .8rem; color: var(--ink-500); margin-bottom: var(--space-2); flex-wrap: wrap; }
.breadcrumbs a { color: var(--ink-600); }

/* =====================================================================
   2. Componentes proprios deste sistema
   ===================================================================== */

/* Aviso destacado dentro de uma tela (regra de multa, divergencia, etc.) */
.callout {
    border-left: 3px solid var(--info-500);
    background: var(--info-100);
    color: var(--info-700);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: .88rem;
}
.callout--warn   { border-left-color: var(--warn-500); background: var(--warn-100); color: var(--warn-700); }
.callout--danger { border-left-color: var(--danger-500); background: var(--danger-100); color: var(--danger-700); }

/* Faixa lateral da linha da tabela: sinaliza atraso sem depender so de cor */
.row-flag > td:first-child { border-left: 3px solid transparent; }
.row-flag--danger > td:first-child { border-left-color: var(--danger-500); }
.row-flag--warn   > td:first-child { border-left-color: var(--warn-500); }
.row-flag--ok     > td:first-child { border-left-color: var(--ok-500); }
.row-flag--info   > td:first-child { border-left-color: var(--info-500); }

/* Prioridade do processo: marcador textual antes do rotulo */
.priority { font-weight: 700; font-size: .78rem; letter-spacing: .02em; }
.priority::before { content: attr(data-mark); margin-right: 4px; color: var(--ink-500); }

/* Barra de progresso do acordo (pago x total) */
.progress { height: 6px; background: var(--ink-100); border-radius: 999px; overflow: hidden; }
.progress__bar { height: 100%; background: var(--ok-500); border-radius: 999px; }

.money-positive { color: var(--ok-700); font-weight: 600; }
.money-negative { color: var(--danger-700); font-weight: 600; }

/* Assinatura do desenvolvedor no rodape */
.footer__brand { display: flex; align-items: center; gap: 8px; opacity: .6; transition: opacity .16s; }
.footer__brand:hover { opacity: 1; }
.footer__brand span { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.footer__brand img { height: 20px; width: auto; display: block; }

/* =====================================================================
   3. Utilitarios usados nas telas
   ===================================================================== */

.xsmall { font-size: .76rem; }
.text-muted, .text-soft { color: var(--ink-500); }
.text-danger { color: var(--danger-700); }
.text-ok { color: var(--ok-700); }
.text-warn { color: var(--warn-700); }
.nowrap { white-space: nowrap; }
.spacer { margin-left: auto; }
.flex-wrap { flex-wrap: wrap; }
.flex { display: flex; gap: var(--space-2); align-items: center; }
.mt-1 { margin-top: var(--space-2); } .mt-2 { margin-top: var(--space-4); } .mt-3 { margin-top: var(--space-5); }
.mb-1 { margin-bottom: var(--space-2); } .mb-2 { margin-bottom: var(--space-4); } .mb-3 { margin-bottom: var(--space-5); }
.divider { height: 1px; background: var(--ink-200); margin: var(--space-4) 0; border: 0; }
.text-center { text-align: center; }
.text-right { text-align: right; }

code {
    background: var(--ink-100); border-radius: 4px; padding: 1px 5px;
    font-size: .8rem;
}

@media (max-width: 768px) {
    .filters { grid-template-columns: 1fr 1fr; }
    dl.dl { grid-template-columns: 1fr; }
    dl.dl dt { margin-top: var(--space-2); }
}
@media (max-width: 520px) {
    .filters { grid-template-columns: 1fr; }
}

/* =====================================================================
   4. Pagina de erro (funciona no layout interno e na caixa de login)
   ===================================================================== */

.error-page {
    max-width: 560px;
    margin: var(--space-6) auto;
    text-align: center;
}
.error-page__code {
    font-size: 3.2rem; font-weight: 800; line-height: 1;
    color: var(--ink-300); margin: 0 0 var(--space-2);
}
.error-page__title { font-size: 1.35rem; margin: 0 0 var(--space-2); }
.error-page__text { color: var(--ink-600); margin: 0 0 var(--space-4); }
.error-page__actions { justify-content: center; }
.error-page__debug { margin-top: var(--space-5); text-align: left; }
.error-page__debug summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--ink-600); }
.error-page__debug pre {
    margin-top: var(--space-2); padding: var(--space-3);
    background: var(--ink-050); border: 1px solid var(--ink-200); border-radius: var(--radius-sm);
    font-size: .76rem; white-space: pre-wrap; overflow: auto; max-height: 340px;
}

/* Dentro da caixa de login o fundo e escuro: inverte os tons. */
.login-box .error-page__code { color: rgba(255, 255, 255, .28); }
.login-box .error-page__title { color: #fff; }
.login-box .error-page__text { color: rgba(255, 255, 255, .70); }
.login-box .error-page__debug summary { color: rgba(255, 255, 255, .70); }
.login-box .error-page__debug pre {
    background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .82);
}
.login-box .btn--secondary { background: rgba(255, 255, 255, .10); color: #fff; border-color: rgba(255, 255, 255, .20); }
.login-box .btn--secondary:hover { background: rgba(255, 255, 255, .18); }
.login-box .auth__title { color: #fff; }

/* A camada de equivalencia acima pinta os campos de branco. Dentro da caixa
   de login o fundo e escuro, entao o vidro precisa vencer em especificidade. */
.login-box .field input[type=text],
.login-box .field input[type=email],
.login-box .field input[type=password] {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .20);
    color: #fff;
}
.login-box .field input:focus {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .50);
    box-shadow: none;
}
.login-box .field input::placeholder { color: rgba(255, 255, 255, .35); }

/* ==========================================================================
   Verificacao em duas etapas
   ========================================================================== */

.input--code {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: .35em;
    text-align: center;
    padding-inline: .5rem;
}

.totp-setup {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--space-6, 1.5rem);
    align-items: start;
    margin-block: var(--space-5, 1.25rem);
    padding: var(--space-5, 1.25rem);
    border: 1px solid var(--border, rgba(148, 163, 184, .32));
    border-radius: var(--radius-lg, 14px);
    background: var(--surface-2, rgba(148, 163, 184, .08));
}

.totp-setup__qr {
    line-height: 0;
    padding: var(--space-3, .75rem);
    background: #fff;
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
}

.totp-setup__qr svg { display: block; max-width: 100%; height: auto; }

.totp-setup__manual h3 {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
}

.totp-setup__secret {
    margin: .5rem 0;
}

.totp-setup__secret code {
    display: inline-block;
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: .12em;
    word-break: break-all;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm, 8px);
    background: var(--surface-3, rgba(148, 163, 184, .16));
}

.totp-setup__confirm { max-width: 22rem; }

.steps {
    margin: 0 0 var(--space-4, 1rem);
    padding-left: 1.25rem;
    display: grid;
    gap: .5rem;
}

.recovery-codes {
    list-style: none;
    margin: var(--space-4, 1rem) 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .5rem;
}

.recovery-codes code {
    display: block;
    text-align: center;
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 1rem;
    letter-spacing: .08em;
    padding: .55rem .4rem;
    border: 1px solid var(--border, rgba(148, 163, 184, .32));
    border-radius: var(--radius-sm, 8px);
    background: var(--surface, rgba(255, 255, 255, .06));
}

.recovery-codes__hint { font-size: .9rem; opacity: .85; }

.status-line {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 var(--space-4, 1rem);
}

.auth__details {
    margin-bottom: .75rem;
    text-align: left;
}

.auth__details summary {
    cursor: pointer;
    font-weight: 500;
}

.auth__details p {
    margin: .5rem 0 0;
    font-size: .9rem;
    line-height: 1.5;
    opacity: .9;
}

@media (max-width: 720px) {
    .totp-setup { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .totp-setup__manual { text-align: center; }
}

/* Caixa do reCAPTCHA nas telas publicas ------------------------------------ */
.recaptcha {
    display: flex;
    justify-content: center;
    margin-block: var(--space-4, 1rem);
}

.recaptcha .g-recaptcha {
    /* O iframe do Google tem 304px fixos; encolhe junto em telas estreitas. */
    transform-origin: center;
    max-width: 100%;
}

@media (max-width: 360px) {
    .recaptcha .g-recaptcha { transform: scale(.88); }
}