/* =========================================================================
       TOKENS DE DESIGN — cores, status e aliases semânticos
       ========================================================================= */
    :root {
      /* --- Cores primárias da marca (troque estes valores por cliente) --- */
      --brand-gradientv: linear-gradient(180deg ,#01a39e 0%, #007E7a 50%, #015551 100%);
      --brand-gradienth: linear-gradient(270deg ,#01a39e 0%, #007E7a 50%, #015551 100%);
      --brand-primary-alpha:  #007a7e33; /* Cor primária com 20% de opacidade */
      --brand-primary:        #007a7e;   /* Cor primária da marca */
      --brand-primary-dark:   #006661;   /* Variante escura — sidebar, hover */
      --brand-primary-light:  #E0F4F3;   /* Variante clara — fundos de destaque */

      /* --- Cores de destaque da marca --- */
      --brand-accent:       #f7d58b;   /* Destaque e seleção */
      --brand-accent-light: #FDF3D9;   /* Destaque claro — fundo de badge */

      /* --- Neutros --- */
      --neutral-gray:   #77787B;   /* Texto secundário */
      --neutral-bg:     #e2e2e2;   /* Fundo geral */
      --neutral-border: #f3f3f300;   /* Bordas e divisórias */
      --neutral-black:  #292929;   /* Texto principal */
      --neutral-white:  #f5f5f5;   /* Texto em fundos claros */


      /* --- Status (convenção interna da equipe — não alterados) --- */
      --verde:       #16a34a;  --verde-bg:  #dcfce7;   /* status "Ativo" */
      --amarelo:     #b45309;  --amarelo-bg:#fef3c7;   /* avisos */
      --roxo:        #6d28d9;  --roxo-bg:   #ede9fe;   /* destaque reservado */
    }

    /* =========================================================================
       RESET E BASE
       ========================================================================= */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Segoe UI semibold', Tahoma, Geneva, Verdana, sans-serif, Helvetica, sans-serif;
      background: var(--neutral-bg);
      color: var(--neutral-black);
      display: flex;          /* layout em 3 colunas: sidebar | lista | detalhe */
      height: 100vh;
      overflow: hidden;
    }

    /* =========================================================================
       SIDEBAR (menu lateral fixo)
       ========================================================================= */


    .sidebar {
      width: 240px;
      flex-shrink: 0;
      background: var(--brand-gradientv);
      color: var(--neutral-white);
      display: flex;
      flex-direction: column;
      padding: 22px 0;
    }
    .sidebar .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 22px 28px;
    }
    .sidebar .logo .ico {
      width: 128px;
      height: 128px;
      border: none;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    .sidebar .logo b {
      font-size: 17px;
      line-height: 1.1;
    }
    /* Imagem do logo dentro do container .ico (sidebar e header mobile) */
    .sidebar .logo .ico img,
    .header-mobile .ico img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .sidebar .card {
      display: block;
      text-decoration: none;
      color: inherit;
      text-align: center;
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .sidebar .card:not(.em-breve):hover {
      transform: translateY(-3px);

    }
    .sidebar .card .ico {
      width: 56px;
      height: 56px;
      margin: 0 auto 14px;
      border-radius: 50%;
      
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
    }

    /* Itens de navegação */
    .nav a {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 13px 22px;
      color: rgba(255,255,255,.6);
      text-decoration: none;
      font-size: 14.5px;
      border-left: 3px solid transparent;
    }
    .nav a.ativo {
      background: var(--brand-primary-alpha);
      color: #fff;
      border-left-color: var(--brand-accent);
    }
    .nav a:hover:not(.ativo) {
      background: rgba(0,0,0,.18);
      color: #fff;
    }
    .nav .ico {
      width: 20px;
      text-align: center;
    }

    /* Rodapé da sidebar (ancorado na base) */
    .sidebar .rodape {
      margin-top: auto;
      padding: 18px 22px;
      color: rgba(255,255,255,.4);
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* =========================================================================
       COLUNA LISTA (busca, filtros, lista de pacotes e paginação)
       ========================================================================= */
    .coluna-lista {
      width: 380px;
      flex-shrink: 0;
      background: #fff;
      border-right: 1px solid var(--neutral-border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* Campo de busca */
    .topo-busca {
      padding: 18px 20px;
      border-bottom: 1px solid var(--neutral-border);
    }
    .busca {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--neutral-bg);
      border: 1px solid var(--neutral-border);
      border-radius: 9px;
      padding: 10px 14px;
    }
    .busca input {
      flex: 1;
      border: none;
      background: none;
      outline: none;
      font-size: 14px;
      color: var(--neutral-black);
    }

    /* Bloco de filtros (Área, CWP, Disciplina) */
    .filtros {
      padding: 16px 20px;
      border-bottom: 1px solid var(--neutral-border);
    }
    .filtros .cab {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .filtros .cab b {
      font-size: 13px;
      letter-spacing: .5px;
      color: var(--neutral-gray);
    }
    .filtros .cab span {
      font-size: 13px;
      color: var(--brand-primary);
      cursor: pointer;
    }
    .campo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .campo label {
      min-width: 80px;
      font-size: 13.5px;
      color: var(--neutral-gray);
    }
    .campo select
    {
      flex: 1;
      padding: 8px 10px;
      border: 1px solid var(--neutral-gray);
      border-radius: 8px;
      font-size: 13.5px;
      background: #fff;
      color: var(--neutral-black);
      outline: none;
      cursor: pointer;
    }

    /* Cabeçalho da lista (título + contagem de resultados) */
    .lista-cab {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 14px 20px 8px;
    }
    .lista-cab b {
      font-size: 13px;
      letter-spacing: .5px;
      color: var(--neutral-gray);
    }
    .lista-cab small {
      font-size: 12.5px;
      color: var(--neutral-gray);
    }

    /* Área rolável com os cards */
    .lista {
      flex: 1;
      overflow-y: auto;
      padding: 0 12px 12px;
    }

    /* Card individual de pacote */
    .card {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 8px;
      padding: 13px 14px;
      margin-bottom: 4px;
      border: 1px solid transparent;
      border-radius: 10px;
      cursor: pointer;
    }
    .card:hover {
      
    }
    .card.sel {
      background: var(--brand-accent-light);
      border-color: var(--brand-accent);
    }
    .card .cod {
      font-size: 13.5px;
      font-weight: 600;
    }
    .card .nome {
      margin: 3px 0 6px;
      font-size: 12.5px;
      color: var(--neutral-gray);
    }
    .card .disc {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      color: var(--brand-primary);
    }
    .card .disc::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--brand-primary);
    }

    /* Etiqueta de status */
    .tag {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 20px;
      white-space: nowrap;
    }
    .tag.ativo {
      background: var(--verde-bg);
      color: var(--verde);
    }

    /* Controles de paginação */
    .paginacao {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 14px;
      border-top: 1px solid var(--neutral-border);
    }
    .paginacao button {
      min-width: 32px;
      height: 32px;
      border: 1px solid var(--neutral-border);
      background: #fff;
      border-radius: 7px;
      font-size: 13px;
      color: var(--neutral-black);
      cursor: pointer;
    }
    .paginacao button.atual {
      background: var(--brand-primary);
      color: #fff;
      border-color: var(--brand-primary);
    }
    .paginacao button:disabled {
      opacity: .4;
      cursor: default;
    }

    /* =========================================================================
       PAINEL DE DETALHE (área principal à direita)
       ========================================================================= */
    .detalhe {
      flex: 1;
      overflow-y: auto;
      padding: 24px 28px;
    }
    .voltar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      color: var(--brand-primary);
      font-size: 14px;
      cursor: pointer;
    }

    /* Cabeçalho do detalhe (ícone + título + badges) */
    .det-cab {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 22px;
    }
    .det-cab .icone {
      width: 64px;
      height: 64px;
      flex-shrink: 0;
      background: var(--brand-accent);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
    }
    .det-cab h1 {
      font-size: 24px;
      margin-bottom: 4px;
    }
    .det-cab .sub {
      margin-bottom: 10px;
      color: var(--neutral-gray);
      font-size: 15px;
    }

    /* Badges informativos */
    .badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .badge {
      padding: 5px 11px;
      font-size: 12.5px;
      border-radius: 20px;
      background: var(--neutral-bg);
      border: 1px solid var(--neutral-border);
    }
    .badge b {
      font-weight: 600;
    }
    .badge.verde {
      background: var(--verde-bg);
      color: var(--verde);
      border: none;
    }

    /* Grade de painéis (informações + visualizador) */
    .grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 18px;
      margin-bottom: 18px;
    }
    .painel {
      background: #fff;
      border: 1px solid var(--neutral-border);
      border-radius: 14px;
      padding: 20px;
    }
    .painel h3 {
      margin-bottom: 16px;
      font-size: 13px;
      letter-spacing: .5px;
      color: var(--neutral-gray);
    }

    /* Linha de informação (rótulo à esquerda, valor à direita) */
    .info-linha {
      display: flex;
      justify-content: space-between;
      padding: 7px 0;
      font-size: 14px;
    }
    .info-linha .lbl {
      color: var(--neutral-gray);
    }
    .info-linha .val {
      font-weight: 500;
      text-align: right;
    }

    /* ---- Galeria principal (visualizador) ---- */
    .visualizador {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 16/10;
      background: #ffffff;
      border-radius: 10px;
      overflow: hidden;
    }
    .visualizador img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      cursor: zoom-in;
    }

    /* Setas de navegação sobre a imagem */
    .nav-vista {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid var(--neutral-border);
      background: rgba(255,255,255,.9);
      box-shadow: 0 2px 8px rgba(0,0,0,.1);
      font-size: 18px;
      cursor: pointer;
    }
    .nav-vista.esq { left: 12px; }
    .nav-vista.dir { right: 12px; }

    /* Botões de navegação entre pacotes (painel de detalhe) */
    .nav-pacote {
      padding: 7px 14px;
      background: var(--brand-primary);
      color: var(--neutral-white);
      border: 1px solid var(--neutral-border);
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
    }
    .nav-pacote:hover { background: var(--brand-primary-dark); color: var(--neutral-white); border-color: var(--neutral-border); }

    /* Etiqueta do nome da vista atual */
    .vista-label {
      position: absolute;
      bottom: 12px;
      left: 12px;
      padding: 5px 12px;
      background: rgba(11,31,58,.85);
      color: #fff;
      font-size: 12.5px;
      border-radius: 20px;
    }

    /* Linha com nome do arquivo + link original */
    .arquivo-linha {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 14px;
      font-size: 13px;
      color: var(--neutral-gray);
    }

    /* Estado vazio (nenhum pacote selecionado) */
    .vazio {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: var(--neutral-gray);
      text-align: center;
    }
    .vazio .big {
      margin-bottom: 14px;
      font-size: 48px;
      opacity: .4;
    }

    /* =========================================================================
       LIGHTBOX (visualização da imagem em tela cheia)
       ========================================================================= */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;                 /* exibido via .aberto */
      align-items: center;
      justify-content: center;
      background: rgba(7,15,30,.92);
    }
    .lightbox.aberto {
      display: flex;
    }
    .lightbox img {
      max-width: 92vw;
      max-height: 88vh;
      object-fit: contain;
      border-radius: 6px;
    }
    .lightbox .fechar {
      position: absolute;
      top: 22px;
      right: 28px;
      color: #fff;
      font-size: 34px;
      line-height: 1;
      cursor: pointer;
    }
    .lightbox .lb-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 0 22px;
      color: #fff;
      font-size: 42px;
      cursor: pointer;
      user-select: none;
    }
    .lightbox .lb-nav.esq { left: 0; }
    .lightbox .lb-nav.dir { right: 0; }
    .lightbox .lb-cap {
      position: absolute;
      bottom: 24px;
      padding: 6px 16px;
      background: rgba(0,0,0,.4);
      color: #fff;
      font-size: 14px;
      border-radius: 20px;
    }

    /* =========================================================================
       RESPONSIVIDADE
       ========================================================================= */
    @media (max-width: 1100px) {
      .grid        { grid-template-columns: 1fr; }
    }

    /* =========================================================================
       ABA IMPRESSÃO — visibilidade controlada pelo atributo data-aba do body
       ========================================================================= */
    body:not([data-aba="impressao"]) #area-impressao { display: none; }
    body[data-aba="impressao"] .coluna-lista,
    body[data-aba="impressao"] #detalhe              { display: none; }
    body[data-aba="impressao"] #area-impressao       { display: block; }

    .area-impressao {
      flex: 1;
      overflow-y: auto;
      background: var(--neutral-bg);
      padding: 28px 32px;
    }

    .imp-controles {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .imp-controles button {
      padding: 9px 20px;
      border: none;
      border-radius: 9px;
      font-size: 14px;
      cursor: pointer;
    }
    .imp-btn-voltar { background: var(--brand-primary); color: var(--neutral-white); border: 1px solid var(--neutral-border) !important; }
    .imp-btn-print  { background: var(--brand-primary); color: var(--neutral-white); font-weight: 600; }

    /* Botões de orientação */
    .imp-btn-orient {
      background: var(--neutral-white);
      color: var(--neutral-black);
      border: 1px solid var(--neutral-border) !important;
    }
    .imp-btn-orient.ativo {
      background: var(--brand-primary);
      color: var(--neutral-white);
      border: 1px solid var(--neutral-border) !important;
      font-weight: 600;
    }

    /* Folha paisagem (A4 horizontal) */
    .imp-pagina--paisagem {
      width: 297mm;
      min-height: 210mm;
    }
    .imp-pagina--paisagem .imp-galeria {
      grid-template-columns: repeat(3, 1fr);
    }

    /* Folha A4 simulada na tela */
    .imp-pagina {
      background: var(--neutral-white);
      width: 210mm;
      min-height: 297mm;
      margin: 0 auto;
      padding: 18mm 20mm;
      box-shadow: 0 4px 24px rgba(0,0,0,.25);
      font-size: 13px;
      color: var(--neutral-black);
    }

    .imp-topo {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 2px solid var(--brand-primary);
      padding-bottom: 10px;
      margin-bottom: 16px;
    }
    .imp-topo h2   { font-size: 16px; margin-bottom: 2px; }
    .imp-topo .sub { font-size: 12px; color: var(--neutral-black); }
    .imp-topo .data{ font-size: 12px; color: var(--neutral-black); white-space: nowrap; }

    .imp-info {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    .imp-info td {
      padding: 6px 10px;
      border: 1px solid var(--neutral-border);
      font-size: 13px;
    }
    .imp-info td:first-child {
      width: 35%;
      background: var(--neutral-bg);
      font-weight: 600;
      color: var(--neutral-black);
    }

    .imp-sec-titulo {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .6px;
      color: var(--neutral-black);
      margin-bottom: 12px;
    }

    .imp-galeria {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
    .imp-vista {
      border: 1px solid var(--neutral-border);
      border-radius: 6px;
      overflow: hidden;
    }
    .imp-vista img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: contain;
      background: #eef1f7;
      display: block;
    }
    .imp-vista .imp-cap {
      padding: 5px 8px;
      font-size: 11.5px;
      color: var(--neutral-black);
      text-align: center;
      border-top: 1px solid var(--neutral-border);
    }

    .imp-rodape {
      margin-top: 20px;
      padding-top: 10px;
      border-top: 1px solid var(--neutral-border);
      font-size: 11px;
      color: var(--neutral-black);
      display: flex;
      justify-content: space-between;
    }

    /* =========================================================================
       ELEMENTOS EXCLUSIVOS DO MOBILE (ocultos em desktop por padrão)
       ========================================================================= */
    .header-mobile { display: none; }
    .nav-bottom    { display: none; }

    /* =========================================================================
       TABLET (768px – 1023px) — sidebar recolhida a ícones
       ========================================================================= */
    @media (max-width: 1023px) and (min-width: 768px) {
      .sidebar {
        width: 60px;
        overflow: hidden;
      }
      .sidebar .logo {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
      }
      .sidebar .logo b  { display: none; }
      .sidebar .rodape  { display: none; }
      .sidebar .logo .ico { width: 36px; height: 36px; }
      .nav a {
        justify-content: center;
        padding: 26px 0;
        gap: 0;
        font-size: 0;        /* oculta texto, mantém ícone */
      }
      .nav a .ico { font-size: 18px; }
      .coluna-lista { width: 300px; }
    }

    /* =========================================================================
       MOBILE (< 768px) — layout em pilha, um painel por vez
       ========================================================================= */
    @media (max-width: 767px) {
      body {
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
      }

      /* ---- Cabeçalho mobile ---- */
      .header-mobile {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 16px;
        height: 52px;
        flex-shrink: 0;
        background: var(--brand-gradienth);
        color: var(--neutral-white);
        z-index: 10;
      }
      .header-mobile .ico {
        width: 32px;
        height: 32px;
        
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
      }
      .header-mobile b { font-size: 14px; }

      /* ---- Sidebar: oculta ---- */
      .sidebar { display: none; }

      /* ---- Lista: largura total, com espaço para nav inferior ---- */
      .coluna-lista {
        width: 100%;
        flex: 1;
        overflow: hidden;
        padding-bottom: 58px;
      }

      /* ---- Painel de detalhe: desliza da direita ---- */
      .detalhe {
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        bottom: 58px;
        z-index: 20;
        background: var(--neutral-bg);
        padding: 14px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .3s ease;
      }
      body[data-sel] .detalhe                   { transform: translateX(0); }
      body[data-aba="impressao"] .detalhe        { transform: translateX(100%); }

      /* ---- Área de impressão: espaço para nav inferior ---- */
      .area-impressao {
        padding: 16px 16px 74px;
      }
      .imp-controles {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
      }
      .imp-pagina {
        width: 100%;
        min-height: unset;
        padding: 12px;
        font-size: 12px;
      }
      .imp-pagina--paisagem {
        width: 100%;
        min-height: unset;
      }
      .imp-galeria,
      .imp-pagina--paisagem .imp-galeria { grid-template-columns: 1fr; }

      /* ---- Navegação inferior ---- */
      .nav-bottom {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 58px;
        z-index: 30;
        background: var(--brand-gradienth);
        border-top: 1px solid rgba(255,255,255,.12);
      }
      .nav-bottom a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: rgba(255,255,255,.5);
        text-decoration: none;
        font-size: 10px;
        border-top: 2px solid transparent;
      }
      .nav-bottom a .ico { font-size: 18px; line-height: 1; }
      .nav-bottom a.ativo {
        color: var(--neutral-white);
        border-top-color: var(--brand-accent);
      }

      /* ---- Ajustes de conteúdo no detalhe ---- */
      .det-cab { flex-direction: column; gap: 10px; }
      .det-cab h1  { font-size: 20px; }
      .det-cab .sub { font-size: 13px; }
      .grid        { grid-template-columns: 5fr; }
      .vistas-grid { grid-template-columns: repeat(2, 1fr); }

      /* ---- Filtros: campos em coluna ---- */
      .campo { flex-direction: column; align-items: stretch; gap: 5px; }
      .campo label  { min-width: unset; }
      .campo select { width: 100%; }
    }

    /* =========================================================================
       FASE 02 — Safe area, touch targets, gestos e micro-interações
       ========================================================================= */

    /* Safe area insets — iOS com notch, Dynamic Island e home bar */
    @supports (padding: env(safe-area-inset-bottom)) {
      @media (max-width: 767px) {
        .nav-bottom {
          height: calc(58px + env(safe-area-inset-bottom));
          padding-bottom: env(safe-area-inset-bottom);
        }
        .coluna-lista   { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
        .detalhe        { bottom: calc(58px + env(safe-area-inset-bottom)); }
        .area-impressao { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
        .header-mobile  { padding-top: env(safe-area-inset-top); height: calc(52px + env(safe-area-inset-top)); }
        .detalhe        { top: calc(52px + env(safe-area-inset-top)); }
      }
    }

    @media (max-width: 767px) {

      /* ---- Touch targets mínimos 44px (Fitts' Law) ---- */
      .card             { min-height: 64px; }
      .paginacao button { min-width: 44px; height: 44px; font-size: 14px; }
      .nav-bottom a     { min-height: 44px; }
      .voltar           { min-height: 44px; align-items: center; }

      /* font-size 16px em inputs: previne zoom automático no iOS */
      .busca input,
      .campo select     { font-size: 16px; }

      /* ---- Feedback visual no toque (sem hover no mobile) ---- */
      .card:active {
        background: var(--brand-primary-light);
        transform: scale(0.985);
        transition: transform .1s ease, background .1s ease;
      }
      .nav-bottom a:active { opacity: .65; }
      .paginacao button:active:not(:disabled) { background: var(--neutral-bg); }

      /* ---- Filtros recolhíveis ---- */
      .filtros-campos {
        overflow: hidden;
        max-height: 500px;
        transition: max-height .3s ease;
      }
      .filtros--recolhido .filtros-campos { max-height: 0; }

      .filtro-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        min-height: 32px;
        color: var(--brand-primary);
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        font-style: normal;
      }
      .filtro-toggle .chevron {
        display: inline-block;
        font-size: 14px;
        transition: transform .25s ease;
      }
      .filtros--recolhido .filtro-toggle .chevron { transform: rotate(-90deg); }

      /* ---- Indicador de swipe no painel de detalhe ---- */
      .detalhe::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--neutral-border);
        border-radius: 2px;
        margin: 0 auto 14px;
        flex-shrink: 0;
      }
    }

    /* =========================================================================
       @MEDIA PRINT — oculta tudo exceto a folha A4
       ========================================================================= */
    @media print {
      .sidebar, .coluna-lista, .imp-controles, .lightbox { display: none !important; }

      body {
        overflow: visible !important;
        height: auto !important;
        background: #fff !important;
      }

      .area-impressao {
        display: block !important;
        background: none !important;
        padding: 0 !important;
        overflow: visible !important;
      }

      .imp-pagina {
        box-shadow: none !important;
        width: 100% !important;
        min-height: unset !important;
        padding: 10mm !important;
        margin: 0 !important;
      }
    }