/* ===========================================================================
   PADRÃO DAS LISTAGENS  —  referência: PRO002 (Propostas de Produto)
   ---------------------------------------------------------------------------
   O visual da listagem é quase todo Bootstrap: a tabela continua sendo
   `table table-hover align-middle mb-0` dentro de `.table-responsive`, com
   `<thead class="table-light">`. O que este arquivo acrescenta é o que o
   Bootstrap não tem: a MOLDURA da seção, o CABEÇALHO com contador e a
   densidade COMPACTA.

   DUAS DENSIDADES (decisão do usuário):
     • normal   — 16px, como a PRO002. É o padrão; não precisa de classe.
     • compacta — `.lst-compacta` na <table>, para listas de muitas colunas
                  (EST005, FIS003...) que não cabem em 16px.
   A moldura, o cabeçalho e os badges são IGUAIS nas duas densidades.

   COMO USAR
     <div class="lst-sec lst-sec--destaque shadow-sm mb-4">
       <div class="lst-head"><i class="bi bi-send-exclamation"></i>Título
         <span class="badge text-bg-warning ms-1">12</span></div>
       <div class="table-responsive">
         <table class="table table-hover align-middle mb-0"> ... </table>
       </div>
     </div>
   =========================================================================== */

/* ---- Moldura da seção ---------------------------------------------------- */
.lst-sec            { border:1px solid #e6e9ee; border-radius:12px; overflow:hidden;
                      background:#fff; }
/* Seção que EXIGE ação (ex.: "a emitir"): moldura âmbar de atenção. */
.lst-sec--destaque  { border:2px solid #E0B83A; }
/* Seção secundária (o que já foi resolvido): sem moldura, texto menor. */
.lst-sec--secundaria { border:0; border-radius:0; background:transparent; }

/* ---- Cabeçalho da seção (título + contador) ------------------------------ */
.lst-head { display:flex; align-items:center; gap:8px; font-weight:800;
            padding:10px 16px; color:#15263f; border-bottom:1px solid #eef1f4; }
.lst-sec--destaque > .lst-head { background:#fff8e6; color:#8a5a00;
                                 border-bottom-color:#f0e2b8; }
/* Cabeçalho discreto (seção secundária): sem fundo nem borda. */
.lst-head--discreto { color:#6c757d; font-weight:700; padding:8px 4px;
                      background:transparent; border-bottom:0; }

/* Realce da linha sob o mouse, na moldura de destaque. */
.lst-sec--destaque tbody tr > td { border-left:3px solid transparent; }
.lst-sec--destaque tbody tr:hover > td:first-child { border-left-color:#E0B83A; }

/* Tabela da seção secundária: um pouco menor e mais apagada. */
.lst-sec--secundaria table { font-size:.9rem; }
.lst-sec--secundaria td    { color:#6c757d; }

/* ---- Densidade COMPACTA (listas de muitas colunas) ----------------------- */
.lst-compacta                        { font-size:12.5px; }
.lst-compacta > thead > tr > th      { font-size:11px; text-transform:uppercase;
                                       letter-spacing:.4px; }
.lst-compacta > tbody > tr > td,
.lst-compacta > tbody > tr > th      { padding-top:.35rem; padding-bottom:.35rem; }

/* ---- Linha cancelada (comum às listagens de proposta) -------------------- */
/* Fica aqui para não ser redefinida em cada tela (estava duplicada em PRO002,
   EST018 e app.css, com regras conflitantes). */
.lst-cancelada > td       { background:#fbeaea !important; color:#9a6a6a; }
.lst-cancelada .num-prop  { text-decoration:line-through; }