/* ==========================================================================
   CENTRAL DE LICENCAS BINDO - visual de celular (coluna fixa, mesmo aspecto
   no computador: apenas centralizada).
   ========================================================================== */

* { box-sizing: border-box; }

/* Mantem sempre o espaco da barra de rolagem vertical (no computador).
   Sem isto, as paginas compridas (com barra) ficam alguns pixels mais a
   esquerda do que as curtas (sem barra). No celular nao muda nada. */
html { overflow-y: scroll; }

html, body {
  margin: 0;
  padding: 0;
  background: #d9dde3;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  color: #1f2933;
}

.pagina {
  max-width: 420px;
  min-height: 100vh;
  margin: 0 auto;
  background: #f5f6f8;
}

/* --- Topo e menu -------------------------------------------------------- */

.topo {
  background: #0077b6;
  color: #fff;
  padding: 12px 16px;
}

/* Titulo a esquerda e data de Brasilia a direita. */
.topo-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.marca {
  font-size: 20px;
  font-weight: bold;
}

.data-topo {
  font-size: 15px;
  font-weight: normal;
  white-space: nowrap;
}

.menu {
  display: flex;
  flex-wrap: wrap;            /* 4 opcoes em 2 linhas de 2 */
  gap: 8px;
  margin-top: 10px;
}

/* Texto do botao sublinhado ao passar o mouse em qualquer ponto do botao. */
.menu a:hover { text-decoration: underline; }

.menu a {
  flex: 1 1 calc(50% - 4px);
  text-align: center;
  padding: 10px 4px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
}

/* --- Conteudo ----------------------------------------------------------- */

.conteudo { padding: 16px; }

h1 {
  font-size: 20px;
  margin: 0 0 14px 0;
}

.cartao {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  margin-bottom: 14px;
}

label {
  display: block;
  font-weight: bold;
  font-size: 14px;
  margin: 12px 0 6px 0;
}

label:first-child { margin-top: 0; }

input[type=text],
input[type=password],
input[type=tel],
input[type=date],
textarea {
  width: 100%;
  padding: 12px;
  font-size: 16px;            /* 16px evita o zoom automatico no iPhone */
  border: 1px solid #b8c0cc;
  border-radius: 6px;
  background: #fff;
}

textarea { min-height: 80px; resize: vertical; }

.botao {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  font-size: 17px;
  font-weight: bold;
  color: #fff;
  background: #0077b6;
  border: 0;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.botao.secundario { background: #6b7785; }
.botao.sucesso    { background: #2e9e44; }
.botao.perigo     { background: #c62828; }

.aviso-perigo {
  background: #fdecea;
  border-left: 4px solid #c62828;
  padding: 10px 12px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.erro {
  color: #c62828;
  font-weight: bold;
  margin: 12px 0 0 0;
}

.cartao.erro ul { margin: 0; padding-left: 18px; }

.nota {
  margin: 0 0 6px 0;
  font-size: 13px;
  color: #52606d;
}

label.opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: normal;
  font-size: 16px;
  margin: 6px 0;
  padding: 10px 12px;
  background: #f0f2f5;
  border-radius: 6px;
}

label.opcao input { width: 22px; height: 22px; }

.aviso {
  background: #fff4c2;
  border-left: 4px solid #f2c200;
  padding: 10px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
}

/* --- Bolinhas de situacao ---------------------------------------------- */

.bolinha {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  vertical-align: middle;
}

.bolinha.verde    { background: #2e9e44; }
.bolinha.amarela  { background: #f2c200; }
.bolinha.vermelha { background: #d62828; }

/* --- Lista do painel ---------------------------------------------------- */

.resumo {
  display: flex;
  justify-content: space-around;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
  font-weight: bold;
  font-size: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}

.resumo .bolinha { width: 20px; height: 20px; }

/* Cada coluna do resumo: titulo pequeno em cima, bolinha + numero embaixo. */
.resumo-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.resumo-titulo {
  font-size: 12px;
  font-weight: normal;
  color: #52606d;
}

.link-discreto {
  display: block;
  text-align: center;
  margin-top: 18px;
  color: #52606d;
  font-size: 14px;
}

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista li {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}

/* A linha inteira e' clicavel (abre a ficha do cliente). */
.lista a.linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s;
}

/* No computador: linha levemente cinza e nome sublinhado ao passar o mouse. */
.lista a.linha:hover { background: #eceef1; }
.lista a.linha:hover .nome { text-decoration: underline; }

/* No celular: leve escurecimento enquanto o dedo toca a linha. */
.lista a.linha:active { background: #e2e5e9; }

.lista .nome {
  flex: 1;
  font-weight: bold;
  word-break: break-word;
}

.lista .bolinha { flex-shrink: 0; }   /* nao encolhe com nomes longos */

.lista .data {
  font-size: 14px;
  color: #52606d;
  white-space: nowrap;
}

/* --- Contador de meses (UpDown) ---------------------------------------- */

.contador {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contador button {
  width: 52px;
  height: 52px;
  font-size: 26px;
  font-weight: bold;
  border: 1px solid #b8c0cc;
  border-radius: 6px;
  background: #e8ebef;
  cursor: pointer;
}

.contador input {
  width: 70px;
  height: 52px;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  border: 1px solid #b8c0cc;
  border-radius: 6px;
}

/* --- Planos e mensalidade ---------------------------------------------- */

select {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #b8c0cc;
  border-radius: 6px;
  background: #fff;
}

.mensalidade {
  margin: 14px 0 0 0;
  padding: 12px;
  background: #e7f5ea;
  border-radius: 6px;
  font-size: 17px;
}

.destaque { font-size: 17px; color: #1e7b34; }

.subtitulo { margin-top: 26px; }

.plano-topo,
.plano-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.plano-nome  { font-weight: bold; font-size: 17px; }
.plano-preco { font-weight: bold; color: #1e7b34; white-space: nowrap; }
.plano .nota { margin: 8px 0; }

.botao-pequeno {
  padding: 8px 16px;
  background: #0077b6;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

/* --- Dados do cliente --------------------------------------------------- */

.dados td.cor-expiracao { color: #DAB900; }   /* data de expiracao */
.dados td.cor-bloqueio  { color: #A20000; }   /* data de bloqueio (expiracao + tolerancia) */

.dados {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.dados th {
  text-align: left;
  color: #52606d;
  font-weight: normal;
  padding: 6px 8px 6px 0;
  width: 42%;
  vertical-align: top;
}

.dados td {
  padding: 6px 0;
  font-weight: bold;
  word-break: break-all;
}