/* A tela de contas. Sobria de proposito: nao e uma tela de estudo, e nao
   deve parecer uma. */

:root {
  --papel: #F6F3ED; --tinta: #14130F; --suave: #6A665D;
  --linha: #E3DDD1; --cartao: #FCFAF5; --vermelho: #C0472F;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 15px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 22px; height: 58px;
  border-bottom: 1px solid var(--linha);
  background: rgba(246, 243, 237, .94);
  position: sticky; top: 0; z-index: 5;
}

.marca { font-weight: 500; font-size: 18px; letter-spacing: -.02em;
         text-decoration: none; color: inherit; }
.quem { color: var(--suave); font-size: 14px; }

main { max-width: 1040px; margin: 0 auto; padding: 30px 22px 70px; }

h1 { margin: 0 0 6px; font-size: 27px; letter-spacing: -.02em; }

.nota { margin: 0 0 26px; color: var(--suave); font-size: 14px; max-width: 62ch; }

/* A senha nova aparece uma vez so, entao precisa ser impossivel de nao ver. */
.nota.senha {
  background: #FBF1DE; border: 1px dashed #C79A3E; border-radius: 8px;
  padding: 13px 15px; color: #4A3916; font-family: ui-monospace, Menlo, monospace;
  font-size: 14px; user-select: all;
}

.resumo { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }

.cartao {
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px;
  padding: 13px 17px; min-width: 116px;
  display: flex; flex-direction: column; gap: 2px;
}
.cartao strong { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.cartao span { font-size: 13px; color: var(--suave); }

/* A tabela rola sozinha em vez de espremer a pagina no celular. */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: 10px; }

table { width: 100%; border-collapse: collapse; background: var(--cartao); }

th, td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--linha); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
     color: var(--suave); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.papel { color: var(--suave); white-space: nowrap; }

.nome { font-weight: 500; }
.mail { font-size: 13px; color: var(--suave); }

.etiqueta {
  display: inline-block; margin-top: 5px; padding: 1px 7px;
  border-radius: 999px; background: #FBF1DE; color: #7A5E1E;
  font-size: 11.5px; white-space: nowrap;
}

/* Desligada continua visivel, so apagada: desativar nao apaga ninguem, e a
   linha some da tela seria uma promessa errada. */
.desligada { opacity: .48; }

.acoes { white-space: nowrap; text-align: right; }
.acoes button {
  font: inherit; font-size: 13px; margin-left: 7px;
  padding: 6px 11px; border: 1px solid var(--linha); border-radius: 7px;
  background: #fff; color: var(--tinta); cursor: pointer;
}
.acoes button:hover { border-color: var(--suave); }

.parede {
  margin: 26px 0 0; font-size: 13px; color: var(--suave);
  max-width: 62ch; border-left: 2px solid var(--linha); padding-left: 13px;
}

.recado {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--tinta); color: var(--papel);
  padding: 10px 17px; border-radius: 8px; font-size: 14px;
}

@media (max-width: 600px) {
  main { padding: 22px 14px 60px; }
  .cartao { flex: 1 1 44%; min-width: 0; }
}

/* O nome, editavel no lugar. Sem cara de campo ate encostar nele, para a
   tabela continuar sendo uma tabela. */
input.nome {
  font: inherit; font-weight: 500;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: inherit;
  padding: 3px 6px; margin: -3px -6px 0; width: 100%; max-width: 190px;
}
input.nome:hover { border-color: var(--linha); }
input.nome:focus { border-color: var(--suave); background: #fff; outline: none; }
input.nome::placeholder { color: var(--suave); opacity: .6; font-weight: 400; }

td.papel select {
  font: inherit; font-size: 13px;
  padding: 5px 8px; border: 1px solid var(--linha); border-radius: 7px;
  background: #fff; color: var(--tinta); cursor: pointer;
}
td.papel select:hover { border-color: var(--suave); }