/* tool-fullscreen.css — Layout das páginas de ferramenta */

/* Breadcrumb (Início › Ferramenta) */
.tool-breadcrumb {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-md) 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--color-muted);
}
.tool-breadcrumb a {
  display: flex; align-items: center; gap: 4px;
  color: var(--color-muted);
  text-decoration: none;
  transition: color .15s;
}
.tool-breadcrumb a:hover { color: var(--brand-primary); }
.tool-breadcrumb-sep { color: var(--color-border); }
.tool-breadcrumb-current { color: var(--color-text); font-weight: 600; }

/* A área abaixo do header preenche o viewport inteiro */
.tool-screen {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
  text-align: center;
  background: var(--color-bg);
}

/* Ícone da ferramenta (dentro da faixa colorida) */
.tool-icon-wrap {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-md);
}

.tool-icon-wrap svg { width: 100%; height: 100%; display: block; }

/* Título — fora da faixa colorida */
.tool-screen h1 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: var(--space-md) 0 var(--space-lg);
}

/* Botão principal de seleção — branco sobre a faixa colorida */
.upload-main-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
  color: var(--brand-primary);
  font-size: 1rem;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  overflow: hidden;
}
.upload-main-btn:hover { background: #fff; color: var(--brand-primary-pressed); box-shadow: 0 6px 20px rgba(0,0,0,.22); transform: translateY(-1px); }
.upload-main-btn:active { transform: translateY(0); }
.upload-main-btn input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }

/* Faixa colorida de upload (estilo Smallpdf/ilovepdf) */
.tool-drop-zone {
  width: 100%;
  max-width: 720px;
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  border: 2px dashed rgba(255,255,255,.55);
  border-radius: var(--radius-xl);
  background: var(--brand-primary);
  color: #fff;
  transition: border-color .2s, filter .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tool-drop-zone.drag-over {
  border-color: #fff;
  filter: brightness(1.06);
}

/* Ou solte aqui — texto claro sobre a faixa colorida */
.drop-hint {
  margin-top: var(--space-sm);
  font-size: .82rem;
  color: rgba(255,255,255,.85);
}
.drop-hint a { color: #fff; text-decoration: underline; }

/* Painel branco: aparece abaixo da faixa colorida com arquivos, progresso e resultado */
.tool-panel {
  width: 100%;
  max-width: 720px;
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tool-panel:empty { display: none; margin-top: 0; }

/* Anúncio abaixo da ferramenta */
.tool-ad-wrap {
  width: 100%;
  max-width: 720px;
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* Lista de arquivos selecionados */
.file-chips {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 auto;
  width: 100%; max-width: 580px;
  text-align: left;
}

.file-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.file-chip-icon { font-size: 1.2rem; flex-shrink: 0; }
.file-chip-info { flex: 1; min-width: 0; }
.file-chip-name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip-size { font-size: .75rem; color: var(--color-muted); }
.file-chip-remove { background:none; border:none; cursor:pointer; color:var(--color-muted); font-size:1rem; padding:2px 6px; border-radius:4px; transition:background .12s, color .12s; flex-shrink:0; }
.file-chip-remove:hover { background:var(--color-bg); color:var(--color-error); }

/* Botão converter (aparece após selecionar) */
.convert-action {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: var(--space-lg);
}
.btn-convert-main {
  padding: 14px 40px; font-size: 1rem; font-weight: 700;
  border-radius: var(--radius-md);
}

/* Progresso */
.progress-area {
  width: 100%; max-width: 420px; text-align: center;
  margin: var(--space-lg) auto 0; display: none;
}
.progress-area.visible { display: flex; flex-direction: column; align-items: center; }
.progress-label {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  font-size: .82rem; font-weight: 600; color: var(--color-text); margin-bottom: 10px;
}
.progress-label span:first-child { color: var(--color-muted); font-weight: 500; }
#progress-pct { color: var(--brand-primary); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: left; }

.progress-bar {
  width: 100%; height: 10px;
  background: var(--color-border); border-radius: 99px;
  overflow: hidden; position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.progress-fill {
  height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-primary), #5AC8FA);
  transition: width .35s cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
}
/* Brilho animado sobre o preenchimento — sinaliza atividade contínua */
.progress-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%);
  animation: progress-shine 1.6s ease-in-out infinite;
}

/* Fase de processamento no servidor: não há como medir o progresso real
   (o backend só responde quando a conversão termina), então em vez de
   fingir uma porcentagem que trava a barra vira indeterminada — estilo
   Material Design, barra deslizando de ponta a ponta. */
.progress-fill.indeterminate {
  width: 40% !important;
  animation: progress-indeterminate 1.3s cubic-bezier(.4,0,.2,1) infinite;
}
.progress-fill.indeterminate::after { content: none; }
@keyframes progress-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@keyframes progress-shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Resultado */
.result-area {
  background: var(--color-surface);
  border: 1.5px solid var(--color-success);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  width: 100%; max-width: 460px;
  margin: 0 auto;
  display: none;
}
.result-area.visible { display: block; }
.result-icon { font-size: 2.5rem; margin-bottom: var(--space-sm); }
.result-filename { font-size: .9rem; font-weight: 600; margin-bottom: var(--space-lg); color: var(--color-muted); }
.result-btns { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }

/* Erro */
.error-msg {
  background: rgba(218,45,38,.08); color: var(--color-error);
  border-radius: var(--radius-sm); padding: 10px 16px;
  font-size: .85rem; margin: var(--space-md) auto 0;
  display: none; width: 100%; max-width: 460px;
}
.error-msg.visible { display: block; }

/* Aviso de limite */
.limit-bar {
  margin-top: var(--space-lg);
  font-size: .78rem; color: var(--color-muted);
}
.limit-bar a { color: var(--brand-primary); }

/* Seção de confiança (abaixo do fold — acessível por scroll) */
.tool-details {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3xl) 0;
}
.tool-trust {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  gap: var(--space-2xl);
  align-items: flex-start;
  flex-wrap: wrap;
  text-align: left;
}
.tool-trust-desc {
  flex: 1 1 320px;
  color: var(--color-text);
  font-size: .95rem;
  line-height: 1.7;
}
.tool-trust-list {
  flex: 1 1 260px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
}
.tool-trust-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .9rem; color: var(--color-text);
}
.tool-trust-list .check-icon { color: var(--color-success); flex-shrink: 0; margin-top: 2px; }