/* app/static/css/funnel.css */

/* ============================================
   funil-* — classes legadas (português)
   mantidas para compatibilidade com templates
   de comunicação existentes
   ============================================ */

.funil-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Ferramentas Operacionais: 8 tiles em 2 / 4 / 2 (grade de 4 col, tiles normais;
   o 3º e o 7º forçam nova linha → linhas 1 e 3 ficam com 2 e 2 espaços vazios). */
.tools-grid { grid-template-columns: repeat(4, 1fr); }
.tools-grid .funil-tile-break { grid-column-start: 1; }
@media (max-width: 600px) {
  .tools-grid { grid-template-columns: 1fr; }
  .tools-grid .funil-tile-break { grid-column-start: auto; }
}

.funil-tile {
  min-height: 150px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--branco);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.funil-number {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin-top: auto;   /* empurra ícone+form pro fundo do tile */
}

/* Label vai pro topo (alinhado à esquerda, fonte pequena) — mesmo padrão
   de .funnel-label e .tile-title. */
.funil-label {
  order: -1;
  font-size: 0.78rem;
  text-align: left;
  margin: 0 0 6px;
  line-height: 1.25;
}

.funil-footer {
  text-align: center;
  font-size: 11px;
  color: gray;
}

/* ============================================
   funnel-* — classes atuais (inglês)
   ============================================ */

.funnel-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;

}

.funnel-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.funnel-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.funnel-grid-7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.funnel-tile {
  min-height: 95px;
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--branco);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.funnel-tile.small {
  min-height: 78px;
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--branco);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

/* Label vai pro topo do tile (alinhado à esquerda, fonte pequena) —
   mesmo padrão de .tile-title em tiles.css. order: -1 garante que apareça
   antes do .funnel-number, mesmo que o HTML tenha o number primeiro. */
.funnel-label {
  order: -1;
  font-size: 0.78rem;
  text-align: left;
  margin: 0 0 6px;
  line-height: 1.25;
}

.funnel-number {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.funnel-tile.small .funnel-number {
  font-size: 18px;
}

.funnel-sub-block {
  min-height: 28px;
  text-align: center;
  margin-top: auto;   /* empurra o sub-block pro pé do tile */
}

.funnel-sub {
  font-size: 0.78rem;   /* mesmo tamanho de .funnel-label (legibilidade da sub-linha) */
  color: var(--cinza-claro);
  line-height: 1.6;
}

.funnel-subtitle {
  margin-top: 4px;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--azul-slate700);
}

/* ============================================
   @media mobile (passo 4 — Onda 3 Mobile)
   funnel-grid-N degrada para 2 colunas em telas <= 720px.
   Vale pros 4 grids (4/5/6/7) + o legado funil-grid.
   ============================================ */
@media (max-width: 720px) {
  .funnel-grid-4,
  .funnel-grid-5,
  .funnel-grid-6,
  .funnel-grid-7,
  .funil-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* admin/tools.html */
.tool-tile-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tool-tile-select {
    width: 100%;
    margin-bottom: 0 !important;
}

.tool-tile-button {
    align-self: center;
}