/* As cores desta folha saem de --sec-c / --sec-rgb, publicados pelo
   _mkSecLF e reescritos por _p4dPintaFamilias: no painel do lote quem manda
   na cor de uma seção é a FAMÍLIA sob a qual ela está, e literal em CLASSE
   é a fresta por onde a cor de outra família volta a entrar — a tinturaria
   do painel (_p4dTinge) só alcança `style=` inline. Os valores depois da
   vírgula são a queda de quem renderizar fora de um grupo.
   --sec-claro é o degrau acima, para o segundo nível de accordion. */
.p4d-sec-card{ --sec-claro:color-mix(in srgb, var(--sec-c, #60a5fa) 55%, #fff); }

/* 99-lote-licenciamentos.css — seções LICENCIAMENTOS e LINHA DO TEMPO do painel de lote
   Extraído do deploy v11. O NÚMERO no nome é a posição na cascata:
   folha nova entra no FIM da lista do index.html, não no meio. */

    /* ── LICENCIAMENTOS do lote fiscal ──────────────────────────────────────
       Sub-accordions e cards do grupo LICENCIAMENTOS. Reaproveitavam o
       .proj-details do painel do EU: caixa cinza, contagem em 20px e chevron
       ▶ girando 90°. Dentro de um _mkSecLF azul isso lia como um bloco de
       outro painel, e os grupos de situação do Portal ainda entravam cada um
       com a sua cor. Aqui vale o mesmo desenho que INDICADORES URBANÍSTICOS
       já usa nos painéis de distrito e quadra (_subAccD): azul do pai,
       rótulo 11px em display e chevron ▾. */
    .lf-sub {
      background: rgba(var(--sec-rgb, 96,165,250), 0.04);
      border: 1px solid rgba(var(--sec-rgb, 96,165,250), 0.18);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 6px;
    }

    .lf-sub > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 11px;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    .lf-sub > summary::-webkit-details-marker { display: none; }

    .lf-sub > summary .lf-sub-label {
      font-family: var(--display);
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--sec-c, #60a5fa);
    }

    .lf-sub > summary .lf-sub-right {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .lf-sub > summary .lf-sub-badge {
      font-family: var(--display);
      font-size: 12px;
      font-weight: 700;
      color: var(--sec-c, #60a5fa);
    }

    .lf-sub > summary .lf-sub-chev {
      font-size: 11px;
      color: var(--muted);
      transition: transform 0.2s;
    }

    .lf-sub[open] > summary .lf-sub-chev { transform: rotate(180deg); }

    .lf-sub-body { padding: 4px 11px 8px; }

    /* Segundo nível — MAIS PROJETOS, MAIS CARTAS e os grupos de situação do
       Portal. Mesma família azul um degrau abaixo: sem preenchimento, para o
       aninhamento ficar visível sem introduzir outra cor. */
    .lf-sub.lf-sub-2 {
      background: transparent;
      border-color: rgba(var(--sec-rgb, 96,165,250), 0.16);
      margin-top: 6px;
      margin-bottom: 0;
    }

    .lf-sub.lf-sub-2 > summary .lf-sub-label,
    .lf-sub.lf-sub-2 > summary .lf-sub-badge { color: var(--sec-claro, #93c5fd); }

    /* Os cards herdavam a Inter do painel e traziam rótulo cinza, enquanto a
       síntese logo acima (EXPEDIENTE ÚNICO, ÚLTIMO PROJETO APROVADO…) usa
       Space Grotesk com rótulo azul. Eram dois pares rótulo/valor com dois
       desenhos dentro do mesmo bloco azul. Aqui vale o da síntese —
       ver _lfBlocoLF(). */
    .lf-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 9px 11px;
      margin-bottom: 6px;
      font-family: var(--display);
      font-size: 13px;
    }

    .lf-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 5px;
    }

    /* Data ou razão social — o equivalente ao <b> do valor da síntese, que
       também é var(--text) e não #fff. */
    .lf-card-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      min-width: 0;
      overflow-wrap: anywhere;
    }

    /* Rodapé de procedência (CADASTRO PREDIAL, endereço do alvará) segue
       cinza: é nota de origem, não o par rótulo/valor. */
    .lf-card-foot {
      font-size: 9.5px;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin-top: 5px;
    }

    /* .proj-row só é flex quando pendurada em .proj-card. As linhas do bloco
       de VGV ficavam fora de um card e saíam como texto corrido, com rótulo
       e valor colados ("VGV estimadoR$ 320.573.054"). .lf-row não depende do
       ancestral. */
    .lf-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
      font-family: var(--display);
      color: var(--sec-c, #60a5fa);
      font-size: 11px;
      line-height: 1.5;
      padding: 1px 0;
    }

    /* Rótulo no desenho do label da síntese: 10px, azul, caixa alta espaçada.
       O text-transform evita reescrever "Área construída" e companhia nos
       templates — o texto continua legível em pt-BR no código. */
    .lf-row > span:first-child {
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--sec-c, #60a5fa);
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .lf-row > span:last-child {
      color: var(--text);
      text-align: right;
      max-width: 65%;
      overflow-wrap: anywhere;
    }

    .lf-row.total { font-weight: 600; }

    .lf-eu {
      display: inline-flex;
      align-items: center;
      border: 1px solid rgba(var(--sec-rgb, 96,165,250), 0.35);
      background: rgba(var(--sec-rgb, 96,165,250), 0.1);
      border-radius: 4px;
      padding: 1px 5px;
      font-family: var(--display);
      font-size: 9.5px;
      color: var(--sec-claro, #93c5fd);
    }

    .lf-pager {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding-top: 7px;
    }

    .lf-page-btn {
      width: 26px;
      height: 26px;
      border: 1px solid rgba(var(--sec-rgb, 96,165,250), 0.3);
      background: rgba(var(--sec-rgb, 96,165,250), 0.08);
      color: var(--sec-claro, #93c5fd);
      border-radius: 5px;
      cursor: pointer;
    }

    .lf-page-btn:disabled { opacity: 0.4; cursor: default; }

    .lf-page-label {
      font-family: var(--display);
      font-size: 10px;
      color: var(--muted);
    }

    /* A Linha do Tempo do lote fiscal reusa toda a mecânica de filtro e play
       do painel do EU, mas o accordion dela é índigo (P4D_ACC_COLORS.tempo) e
       não o teal do EU. Só troca o acento. */
    .timeline-lf .timeline-filter-btn.active {
      color: var(--sec-claro, #a5b4fc);
      border-color: rgba(var(--sec-rgb, 129,140,248), 0.45);
      background: rgba(var(--sec-rgb, 129,140,248), 0.14);
    }

    .timeline-lf .timeline-year-badge { color: var(--sec-claro, #a5b4fc); }
    .timeline-lf .timeline-year-badge:empty::before { color: rgba(165, 180, 252, 0.35); }

    .timeline-lf .timeline-play-btn {
      background: rgba(var(--sec-rgb, 129,140,248), 0.12);
      border-color: rgba(var(--sec-rgb, 129,140,248), 0.45);
      color: var(--sec-claro, #a5b4fc);
    }

    .timeline-lf .timeline-play-btn:hover {
      background: rgba(var(--sec-rgb, 129,140,248), 0.22);
      border-color: var(--sec-c, #818cf8);
    }

    .timeline-lf .timeline-play-btn.active {
      background: rgba(var(--sec-rgb, 129,140,248), 0.3);
      border-color: var(--sec-c, #818cf8);
      color: var(--sec-claro, #e0e7ff);
    }

    .timeline-lf .timeline-progress-fill {
      background: linear-gradient(90deg, var(--sec-c, #818cf8), var(--sec-c, #38bdf8));
      box-shadow: 0 0 6px rgba(var(--sec-rgb, 129,140,248), 0.5);
    }