/* Painel UniPlay — folha única, neutra, sem marca do CinePlay. */
:root {
  --fundo: #f6f7f9; --papel: #fff; --texto: #1c1f23; --fraco: #667;
  --linha: #dde1e6; --acento: #2b6cb0; --erro: #c53030; --alerta: #b7791f;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto);
       font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }

header { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem;
         background: var(--papel); border-bottom: 1px solid var(--linha); }
header strong { font-size: 1.1rem; }
header nav { display: flex; gap: 1rem; flex: 1; }
header a { color: var(--acento); text-decoration: none; }
header a:hover { text-decoration: underline; }

main { max-width: 60rem; margin: 1.5rem auto; padding: 0 1rem; }
h1, h2 { margin: 0 0 1rem; font-size: 1.25rem; }

.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: 8px;
          padding: 1.25rem; margin-bottom: 1rem; }
form.cartao { max-width: 22rem; margin: 3rem auto; }

label { display: block; margin-bottom: .75rem; font-size: .875rem; color: var(--fraco); }
input, select { width: 100%; padding: .5rem; margin-top: .25rem; font: inherit;
                border: 1px solid var(--linha); border-radius: 4px; background: var(--papel);
                color: var(--texto); }
button { padding: .5rem 1rem; font: inherit; cursor: pointer; border: 0; border-radius: 4px;
         background: var(--acento); color: #fff; }
button:disabled { opacity: .55; cursor: default; }
button.secundario { background: transparent; color: var(--acento); border: 1px solid var(--linha); }

table { width: 100%; border-collapse: collapse; background: var(--papel); }
th, td { padding: .6rem .5rem; text-align: left; border-bottom: 1px solid var(--linha); }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--fraco); }
td.num, th.num { text-align: right; white-space: nowrap; }

.erro { color: var(--erro); }
.vencido { color: var(--erro); font-weight: 600; }
.aviso { color: var(--alerta); }
.fraco { color: var(--fraco); font-size: .875rem; }
.acoes { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }

dialog { border: 1px solid var(--linha); border-radius: 8px; padding: 1.25rem;
         max-width: 32rem; width: calc(100% - 2rem); }
dialog::backdrop { background: rgb(0 0 0 / .4); }

/* Telefone: a tabela vira lista de cartões — sem isso as colunas espremem e o valor
   fica ilegível justamente na tela onde se confere dinheiro. */
@media (max-width: 40rem) {
  thead { display: none; }
  tr { display: block; border: 1px solid var(--linha); border-radius: 6px;
       margin-bottom: .5rem; background: var(--papel); padding: .5rem; }
  td { display: flex; justify-content: space-between; border: 0; padding: .25rem 0; }
  td::before { content: attr(data-rot); color: var(--fraco); font-size: .8rem; }
  td.num { text-align: right; }
}