/* ===========================================================================
   TCloud Vault — camada responsiva

   Escrita depois de ver o painel num celular de verdade: a tabela de rotinas
   saía da tela e as colunas que mais importam — situação e ações — ficavam
   escondidas atrás de uma rolagem horizontal que ninguém adivinha que existe.

   A regra que orienta tudo aqui: no celular, informação empilha; ação fica ao
   alcance do polegar. Nada é escondido por falta de espaço.

   Camada complementar ao app.css. Não redefine a identidade visual — as cores,
   as fontes e a linguagem dos cartões continuam as mesmas.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Fundamentos que valem em qualquer tamanho
   --------------------------------------------------------------------------- */

/* Área segura de aparelhos com recorte na tela (iPhone e afins) */
:root{
  --seguro-cima:  env(safe-area-inset-top, 0px);
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  --seguro-esq:   env(safe-area-inset-left, 0px);
  --seguro-dir:   env(safe-area-inset-right, 0px);
  --barra-baixo: 0px;
}

/* Toque: 44px é o mínimo confortável para o dedo, e vale para todos os alvos */
@media (pointer:coarse){
  .btn, .nav__item, .tabela__acao, .paginacao a, .aba, .interruptor{
    min-height:44px;
  }
  .btn--icone{ min-width:44px; }
}

/* Foco visível: quem navega por teclado precisa saber onde está */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--cofre-2);
  outline-offset:2px;
  border-radius:6px;
}

/* Rolagem suave dentro de áreas roláveis, sem travar o gesto do sistema */
.tabela-rolagem, .modal__corpo, .lateral{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* ---------------------------------------------------------------------------
   2. Tablet — até 980px
   --------------------------------------------------------------------------- */
@media (max-width:980px){

  /* A lateral vira gaveta. O botão de menu já existia; aqui ele ganha tamanho
     de toque e a gaveta ganha profundidade, para ficar claro que é temporária. */
  .lateral{
    padding-top:calc(14px + var(--seguro-cima));
    padding-bottom:calc(20px + var(--seguro-baixo));
    z-index:60;
    transition:transform .22s ease;
  }
  .veu-lateral{ backdrop-filter:blur(2px); }

  .menu-btn{
    width:44px; height:44px;
    align-items:center; justify-content:center;
    border-radius:10px;
  }
  .menu-btn:active{ background:var(--superficie-2); }

  /* Cabeçalho fixo: em tela pequena, perder o título ao rolar desorienta */
  .topo{
    position:sticky; top:0; z-index:40;
    padding-top:var(--seguro-cima);
  }

  /* Filtros deixam de disputar espaço horizontal */
  .filtros{ flex-wrap:wrap; gap:10px; align-items:flex-end; }
  .filtros > *{ flex:1 1 180px; min-width:0; }

  /* Botão não estica junto com os campos: um "Limpar" do tamanho de um campo
     de data confunde sobre o que é ação e o que é entrada. */
  .filtros .btn{ flex:0 0 auto; min-width:120px; }
}

/* ---------------------------------------------------------------------------
   3. Celular — até 720px
   --------------------------------------------------------------------------- */
@media (max-width:720px){

  /* Tipografia um pouco maior: a tela é menor, a distância dos olhos é a mesma */
  body{ font-size:15px; }

  /* 16px nos campos evita que o iOS dê zoom sozinho ao focar — o zoom
     desalinha a página e o usuário precisa fechar na unha. */
  input, select, textarea{ font-size:16px !important; }

  .conteudo{
    padding:12px;
    padding-left:calc(12px + var(--seguro-esq));
    padding-right:calc(12px + var(--seguro-dir));
    padding-bottom:calc(16px + var(--barra-baixo) + var(--seguro-baixo));
  }

  /* ---- Cartões e grades ----
     Os indicadores ficam em duas colunas: são quatro números curtos, e
     empilhados um a um empurram o gráfico para fora da primeira tela.
     Cartões com texto continuam em coluna única. */
  /* Flexbox em vez de grid nesta faixa: o resultado é o mesmo e passa a
     funcionar em navegadores embutidos mais antigos, que ainda aparecem em
     tablets de cartório. */
  .grade{ display:flex; flex-wrap:wrap; gap:12px; }
  .grade > *{ flex:1 1 100%; min-width:0; }
  .grade--4 > *{ flex:1 1 calc(50% - 6px); max-width:calc(50% - 6px); }

  .kpi__valor{ font-size:26px; }
  .kpi__rotulo{ font-size:10.5px; }

  /* ---- Cabeçalho da página ----
     O título disputava espaço com o botão de menu e quebrava em duas linhas.
     Menor, com o subtítulo abaixo, cabe e continua orientando. */
  .topo__titulo{ font-size:17px; line-height:1.25; }
  .topo__trilha{ display:block; font-size:11.5px; margin-top:1px; }
  .topo{ min-height:56px; }

  .cartao__cabeca{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .cartao__cabeca .btn{ width:100%; justify-content:center; }

  /* ---- Botões ---- */
  .barra-acoes{ flex-direction:column; align-items:stretch; }
  .barra-acoes .btn{ width:100%; justify-content:center; }

  /* ---- Modal vira folha que sobe de baixo ----
     É o gesto que o celular ensina: conteúdo novo chega por baixo, e o polegar
     alcança os botões sem reposicionar a mão. */
  .modal{ align-items:flex-end; padding:0; }
  .modal__caixa{
    width:100%;
    max-width:none;
    max-height:92vh;
    border-radius:18px 18px 0 0;
    padding-bottom:calc(14px + var(--seguro-baixo));
    animation:subir .22s ease;
  }
  .modal__corpo{ max-height:calc(92vh - 168px); }
  .modal__rodape{ flex-direction:column-reverse; gap:8px; }
  .modal__rodape .btn{ width:100%; justify-content:center; }

  @keyframes subir{ from{ transform:translateY(14px); opacity:.6; } to{ transform:none; opacity:1; } }

  /* ---- Formulários em coluna ---- */
  .linha-campos, .linha-campos--2, .linha-campos--3{ grid-template-columns:1fr; }

  /* ---- Paginação com alvos maiores ---- */
  .paginacao{ flex-wrap:wrap; gap:6px; }
  .paginacao a, .paginacao span{ min-width:44px; text-align:center; }

  /* ---- Entrada ----
     A arte ocupava a primeira tela inteira e o formulário só aparecia depois de
     rolar: quem abre o portal no celular quer entrar, não ler a apresentação.
     Fica uma faixa compacta com a marca; o resto da arte sai. */
  .login{ display:flex; flex-direction:column; min-height:100dvh; }
  .login__arte{ order:2; padding:20px; }
  .login__caixa{ order:1; padding:24px 20px calc(24px + var(--seguro-baixo)); }

  .login__titulo, .login__texto, .login__lista{ display:none; }
  .login__arte{ border-top:1px solid rgba(255,255,255,.08); }
}


/* ---------------------------------------------------------------------------
   3b. Tabelas viram cartões — até 900px

   O corte é mais alto que o dos demais ajustes de propósito: uma tabela de oito
   colunas não cabe nem num tablet em retrato, e a rolagem horizontal esconde
   justamente a coluna de situação e a de ações. Melhor empilhar cedo do que
   deixar informação atrás de um gesto que ninguém adivinha.
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  /* ---- Tabelas viram cartões ----
     Este é o coração da camada. Uma tabela de seis colunas não cabe em 390px,
     e rolagem horizontal esconde justamente a coluna de ações. Cada linha vira
     um cartão, e cada célula mostra o nome da coluna ao lado do valor —
     o rótulo vem do cabeçalho, preenchido pelo JS. */
  .tabela-rolagem{ overflow:visible; }

  table.tabela, table.tabela thead, table.tabela tbody,
  table.tabela tr, table.tabela th, table.tabela td{
    display:block;
  }

  table.tabela thead{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }

  table.tabela tr{
    background:var(--superficie);
    border:1px solid var(--borda);
    border-radius:12px;
    padding:12px 14px;
    margin-bottom:10px;
    box-shadow:0 1px 2px rgba(15,18,32,.04);
  }

  table.tabela td{
    border:0;
    padding:6px 0;
    display:flex;
    align-items:baseline;
    gap:12px;
    min-height:0;
  }

  /* Colunas numéricas vêm alinhadas à direita na tabela; no cartão isso cola o
     valor no rótulo e some com a leitura. Tudo alinha à esquerda aqui. */
  table.tabela td,
  table.tabela td.num,
  table.tabela td[align="right"]{ text-align:left !important; }

  table.tabela td::before{
    content:attr(data-rotulo);
    flex:0 0 38%;
    max-width:38%;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--tinta-3);
    line-height:1.5;
  }

  /* A primeira célula é o nome da coisa: vira título do cartão, sem rótulo */
  table.tabela td:first-child{
    display:block;
    font-size:16px;
    font-weight:700;
    padding:0 0 8px;
    margin-bottom:6px;
    border-bottom:1px solid var(--borda);
  }
  table.tabela td:first-child::before{ display:none; }

  /* Célula vazia não merece uma linha em branco no cartão */
  table.tabela td:empty{ display:none; }

  /* Ações vão para o rodapé do cartão, lado a lado e com área de toque */
  table.tabela td.acoes,
  table.tabela td:last-child:has(.btn){
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding-top:12px;
    margin-top:6px;
    border-top:1px solid var(--borda);
  }
  table.tabela td.acoes::before,
  table.tabela td:last-child:has(.btn)::before{ display:none; }
  table.tabela td.acoes .btn{ flex:1 1 auto; justify-content:center; }

}

/* ---------------------------------------------------------------------------
   4. Barra de navegação inferior — só no celular

   As telas do dia a dia ficam a um toque, na faixa que o polegar alcança sem
   reposicionar a mão. A gaveta lateral continua existindo para o resto.
   --------------------------------------------------------------------------- */
.barra-inferior{ display:none; }

@media (max-width:720px){
  :root{ --barra-baixo:62px; }

  .barra-inferior{
    display:flex;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:50;
    background:var(--superficie);
    border-top:1px solid var(--borda);
    padding-bottom:var(--seguro-baixo);
    box-shadow:0 -2px 12px rgba(15,18,32,.06);
  }

  .barra-inferior__item{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-height:62px;
    padding:8px 4px;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.01em;
    color:var(--tinta-3);
    text-decoration:none;
    position:relative;
  }
  .barra-inferior__item svg{ width:21px; height:21px; }

  .barra-inferior__item.ativo{ color:var(--cofre-2); }
  .barra-inferior__item.ativo::before{
    content:"";
    position:absolute; top:0; left:24%; right:24%;
    height:2.5px;
    border-radius:0 0 3px 3px;
    background:var(--cofre-2);
  }
  .barra-inferior__item:active{ background:rgba(58,92,220,.06); }

  /* No tema escuro a sombra clara desaparece e o contorno some: a barra
     inferior precisa de uma divisória visível. */
  [data-tema="escuro"] .barra-inferior{
    box-shadow:0 -2px 12px rgba(0,0,0,.5);
    border-top-color:var(--borda-forte);
  }
  [data-tema="escuro"] table.tabela tr{
    box-shadow:0 1px 2px rgba(0,0,0,.3);
  }

  .barra-inferior__sino{
    position:absolute;
    top:6px; left:calc(50% + 6px);
    min-width:16px; height:16px;
    padding:0 4px;
    border-radius:9px;
    background:var(--falha);
    color:#fff;
    font-size:9.5px; font-weight:700;
    line-height:16px; text-align:center;
  }
}

/* ---------------------------------------------------------------------------
   5. Celular estreito — até 380px
   --------------------------------------------------------------------------- */
@media (max-width:380px){
  .conteudo{ padding:10px; }
  .grade--4 > *{ flex:1 1 100%; max-width:100%; }   /* abaixo disso, duas colunas apertam */
  .cartao__corpo{ padding:12px; }
  table.tabela td::before{ flex-basis:44%; max-width:44%; }
  .barra-inferior__item{ font-size:10px; }
}

/* ---------------------------------------------------------------------------
   6. Tela deitada e baixa — celular na horizontal
   --------------------------------------------------------------------------- */
@media (max-height:480px) and (orientation:landscape){
  .barra-inferior{ display:none; }      /* sobra pouca altura; o menu resolve */
  :root{ --barra-baixo:0px; }
  .topo{ position:static; }
}

/* ---------------------------------------------------------------------------
   7. Impressão — o relatório impresso não tem gaveta nem barra
   --------------------------------------------------------------------------- */
@media print{
  .barra-inferior, .veu-lateral{ display:none !important; }
  table.tabela thead{ position:static; width:auto; height:auto; clip:auto; }
}

/* ---------------------------------------------------------------------------
   Convite para instalar como aplicativo
   --------------------------------------------------------------------------- */
.convite-app{
  position:fixed;
  left:12px; right:12px;
  bottom:calc(12px + var(--barra-baixo) + var(--seguro-baixo));
  z-index:70;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px;
  border-radius:14px;
  background:var(--superficie);
  border:1px solid var(--borda);
  box-shadow:0 8px 28px rgba(15,18,32,.16);
  animation:convite-sobe .24s ease;
}
@keyframes convite-sobe{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }

.convite-app__texto{ flex:1 1 220px; min-width:0; }
.convite-app__texto strong{ display:block; font-size:14px; color:var(--tinta); }
.convite-app__texto span{ display:block; font-size:12.5px; color:var(--tinta-2); margin-top:2px; }

.convite-app__acoes{ display:flex; gap:8px; flex:0 0 auto; }
.convite-app__acoes .btn{ min-height:40px; }

@media (max-width:420px){
  .convite-app__acoes{ width:100%; }
  .convite-app__acoes .btn{ flex:1 1 0; justify-content:center; }
}

/* ---------------------------------------------------------------------------
   O cofre vira cartões antes das outras tabelas

   Oito colunas, sendo uma um nome de arquivo de setenta caracteres e outra um
   hash. Mesmo com larguras calculadas, abaixo de 1200px as colunas passam a
   disputar espaço e o texto se sobrepõe.

   Empilhar mais cedo resolve de vez, em vez de ficar ajustando percentuais para
   cada resolução: aqui o limite é 1200px, contra os 900px das demais tabelas.
   --------------------------------------------------------------------------- */
@media (max-width:1200px){
  .tabela--cofre{ table-layout:auto; }

  .tabela--cofre, .tabela--cofre thead, .tabela--cofre tbody,
  .tabela--cofre tr, .tabela--cofre th, .tabela--cofre td{
    display:block;
  }

  .tabela--cofre thead{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }

  .tabela--cofre tr{
    background:var(--superficie);
    border:1px solid var(--borda);
    border-radius:12px;
    padding:12px 14px;
    margin-bottom:10px;
  }

  .tabela--cofre td{
    border:0;
    padding:6px 0;
    display:flex;
    align-items:baseline;
    gap:12px;
    text-align:left !important;
  }

  .tabela--cofre td::before{
    content:attr(data-rotulo);
    flex:0 0 34%;
    max-width:34%;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--tinta-3);
    line-height:1.5;
  }

  /* O nome do arquivo é o título do cartão: ocupa a linha inteira, quebra
     onde precisar, e leva o hash junto. */
  .tabela--cofre td:first-child{
    display:block;
    padding:0 0 10px;
    margin-bottom:8px;
    border-bottom:1px solid var(--borda);
  }
  .tabela--cofre td:first-child::before{ display:none; }
  .tabela--cofre td:first-child .dados{ overflow-wrap:anywhere; }

  /* O botão de download vai para o rodapé do cartão */
  .tabela--cofre td:last-child{
    justify-content:flex-start;
    padding-top:10px;
    margin-top:4px;
    border-top:1px solid var(--borda);
  }
  .tabela--cofre td:last-child::before{ display:none; }

  .tabela--cofre .cofre-hash{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
}