/* Portal do Cliente (/portal) — complementa o style.css (mesmas cores e componentes) com o que é só do
   portal: barra do topo enxuta, caixa de login e a tela de documentos. Pensado pra celular também. */
.portal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--branco);
  border-top: 4px solid var(--marca);
  border-bottom: 1px solid var(--borda);
  padding: 12px 24px;
}
.portal-marca { display: flex; align-items: center; gap: 12px; color: var(--marca); font-weight: 700; font-size: 1.05rem; }
.portal-marca:hover { text-decoration: none; }
.portal-logo { height: 30px; width: auto; display: block; }
.portal-usuario { display: flex; align-items: center; gap: 16px; font-size: 0.9rem; flex-wrap: wrap; }
.portal-usuario-nome { color: var(--cinza-claro); }
.portal-usuario form { margin: 0; }

.portal-container { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; }
.portal-rodape { text-align: center; color: var(--cinza-claro); font-size: 0.8rem; padding: 0 16px 32px; }

.portal-caixa {
  max-width: 420px;
  margin: 40px auto;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 32px;
}
.portal-caixa h1 { font-size: 1.3rem; margin: 0 0 8px; text-align: center; }
.portal-texto { font-size: 0.92rem; color: var(--cinza-texto); line-height: 1.5; margin: 0 0 14px; }
.portal-texto-pequeno { font-size: 0.82rem; color: var(--cinza-claro); text-align: center; margin: 16px 0 0; }
.portal-caixa .btn { text-align: center; }
/* "Esqueci minha senha" como botão de verdade, da largura do "Entrar" e logo abaixo dele */
.portal-botao-largo { display: block; margin-top: 10px; }
/* "Mostrar/Ocultar" da senha: texto clicável (o <button> sem estilo aparecia como botão cinza do navegador) */
.portal-caixa .senha-com-botao .btn-link {
  background: none; border: none; padding: 6px 4px; cursor: pointer; color: var(--marca); font-size: 0.85rem; text-decoration: underline;
}
.portal-privacidade { margin-top: 6px; }

.portal-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.portal-cabecalho h1 { margin: 0 0 4px; font-size: 1.5rem; }
.portal-cabecalho .portal-texto { margin-bottom: 0; }
.portal-seletor label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--cinza-claro); }
.portal-seletor select { min-width: 260px; max-width: 100%; }
.portal-filtros { margin: 16px 0; }
.portal-vazio { background: var(--branco); border: 1px dashed var(--borda); border-radius: 10px; padding: 36px 24px; text-align: center; }
.portal-tabela td { vertical-align: middle; }
.portal-tabela td:last-child { text-align: right; white-space: nowrap; }

/* Abas (Documentos | Pastas) logo abaixo da barra do topo, alinhadas com o conteúdo */
.portal-abas { max-width: 1100px; margin: 0 auto; padding: 16px 24px 0; display: flex; gap: 6px; }
.portal-abas a { padding: 8px 16px; border-radius: 6px; font-weight: 600; font-size: 0.92rem; color: var(--cinza-texto); border: 1px solid transparent; }
.portal-abas a:hover { background: var(--fundo); text-decoration: none; }
.portal-abas a.ativa { background: var(--branco); color: var(--marca); border-color: var(--borda); }

/* Área de pastas do Drive: trilha de navegação, lista de pastas e o campo de envio */
.portal-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.88rem; margin: 0 0 14px; color: var(--cinza-claro); }
.portal-trilha strong { color: var(--cinza-texto); }
.portal-pastas { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.portal-pasta { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; color: var(--cinza-texto); font-weight: 600; min-width: 0; }
.portal-pasta:hover { border-color: var(--marca); text-decoration: none; }
.portal-pasta-icone { flex: none; color: var(--marca); }
.portal-pasta-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Pasta com muitos anos/meses: um bloco por ano (o mais recente aberto, os outros recolhidos) e os meses em botões pequenos */
.portal-ano { margin: 0 0 6px; }
.portal-ano > summary { display: flex; align-items: baseline; gap: 10px; padding: 8px 2px; cursor: pointer; list-style: none; border-bottom: 1px solid var(--borda); margin-bottom: 10px; }
.portal-ano > summary::-webkit-details-marker { display: none; }
.portal-ano > summary::before { content: '▸'; color: var(--cinza-claro); font-size: 0.85rem; transition: transform 0.15s; }
.portal-ano[open] > summary::before { transform: rotate(90deg); }
.portal-ano-titulo { font-size: 1.1rem; font-weight: 700; color: var(--cinza-texto); }
.portal-ano-contagem { font-size: 0.85rem; color: var(--cinza-claro); }
.portal-pastas-meses { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; margin-bottom: 14px; }
.portal-pasta-mes { padding: 9px 12px; gap: 8px; font-size: 0.92rem; }
/* Usuários da empresa (administrador do cliente) */
.portal-subtitulo { font-size: 1.05rem; margin: 26px 0 10px; }
.portal-usuarios-convite { max-width: none; margin-top: 0; }
.portal-usuario-grupo { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.portal-usuario-grupo select { max-width: 200px; font-size: 0.9rem; padding: 6px 8px; }

/* Arrastar arquivo até uma pasta */
.portal-recado[hidden] { display: none; }
.portal-dica-mover { margin: 0 0 8px; font-size: 0.88rem; color: var(--cinza-claro); }
.portal-arrastavel { cursor: grab; }
.portal-arrastando { opacity: 0.45; }
.portal-movendo { opacity: 0.5; pointer-events: none; }
.portal-alvo-solto { border-color: var(--marca); background: var(--fundo); box-shadow: 0 0 0 2px var(--marca); }
.portal-acoes-caixa { display: inline-flex; align-items: center; gap: 8px; }
.portal-mover { max-width: 150px; font-size: 0.85rem; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; background: var(--branco); color: var(--cinza-texto); }
.portal-envio { margin-top: 28px; background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; padding: 20px 22px; max-width: 720px; }
.portal-envio h2 { font-size: 1.05rem; margin: 0 0 6px; }
.portal-envio-dica { background: var(--fundo); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.portal-envio-status { font-size: 0.85rem; color: var(--cinza-claro); }
.portal-envio-erro { color: var(--vermelho); font-weight: 600; }

/* Aviso de Privacidade: coluna de leitura (~75 caracteres por linha) */
.portal-aviso { max-width: 780px; margin: 0 auto; }
.portal-aviso h1 { font-size: 1.5rem; margin: 0 0 4px; }
.portal-aviso h2 { font-size: 1.1rem; margin: 28px 0 8px; }
.portal-aviso .portal-texto { line-height: 1.6; margin-bottom: 12px; }
.portal-aviso .portal-atualizacao { color: var(--cinza-claro); font-size: 0.85rem; margin-bottom: 18px; }
.portal-lista-aviso { margin: 0 0 12px; padding-left: 22px; font-size: 0.92rem; color: var(--cinza-texto); line-height: 1.6; }
.portal-lista-aviso li + li { margin-top: 4px; }
.portal-tabela-aviso td { vertical-align: top; font-size: 0.88rem; line-height: 1.5; }
.portal-voltar { margin: 28px 0 0; }

@media (max-width: 640px) {
  .portal-abas { padding: 12px 14px 0; }
  .portal-pastas { grid-template-columns: 1fr; }
  .portal-pastas-meses { grid-template-columns: repeat(2, 1fr); }
  .portal-envio { padding: 16px 14px; }
  .portal-topbar { padding: 10px 14px; }
  .portal-container { padding: 18px 14px 40px; }
  .portal-caixa { margin: 20px auto; padding: 24px 18px; }
  .portal-seletor select { min-width: 0; width: 100%; }
}

/* Celular: a tabela de documentos vira uma lista de cartões (título, dados e o botão "Baixar" sempre à vista,
   sem precisar rolar a tabela pro lado pra achar o botão). Os rótulos vêm do data-label de cada célula. */
@media (max-width: 640px) {
  .portal-tabela, .portal-tabela tbody, .portal-tabela tr, .portal-tabela td { display: block; width: 100%; }
  .portal-tabela { border: none; background: transparent; }
  .portal-tabela thead { display: none; }
  .portal-tabela tr { background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
  .portal-tabela td { display: flex; gap: 8px; border: none; padding: 3px 0; font-size: 0.85rem; }
  .portal-tabela td::before { content: attr(data-label); flex: 0 0 96px; color: var(--cinza-claro); font-size: 0.78rem; }
  .portal-tabela td:first-child { display: block; font-size: 0.95rem; padding-bottom: 6px; }
  .portal-tabela td:first-child::before { content: none; }
  .portal-tabela td:last-child { display: block; text-align: left; padding-top: 10px; }
  .portal-tabela td:last-child::before { content: none; }
  .portal-tabela td:last-child .btn { display: block; text-align: center; }

  /* tabela do Aviso de Privacidade: cada linha vira um bloco com o rótulo de cada coluna em cima */
  .portal-tabela-aviso, .portal-tabela-aviso tbody, .portal-tabela-aviso tr, .portal-tabela-aviso td { display: block; width: 100%; }
  .portal-tabela-aviso thead { display: none; }
  .portal-tabela-aviso tr { background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
  .portal-tabela-aviso td { border: none; padding: 6px 0; }
  .portal-tabela-aviso td::before { content: attr(data-label); display: block; color: var(--cinza-claro); font-size: 0.75rem; font-weight: 600; margin-bottom: 2px; }
}