/* ==========================================================
   PokerFin - identidade visual
   Feltro de mesa, latao de ficha, vermelho de naipe.
   ========================================================== */

:root {
  --noite:        #080D0B;
  --feltro:       #0E2C23;
  --feltro-alto:  #14392D;
  --carta:        #102520;
  --carta-alt:    #0C1D19;
  --linha:        #1D4034;
  --ouro:         #C9A227;
  --ouro-claro:   #E3C25C;
  --naipe:        #C0392B;
  --naipe-claro:  #E05B4C;
  --creme:        #EDE7D4;
  --mudo:         #7E9389;
  --positivo:     #4FA97B;
  --negativo:     #D9584B;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --sombra: 0 10px 30px rgba(0, 0, 0, .45);
  --barra: 60px;

  --fonte-corpo: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fonte-titulo: "Helvetica Neue", "Arial Narrow", Helvetica, Arial, sans-serif;
  --fonte-num: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(1100px 620px at 50% -10%, #17402F 0%, transparent 62%),
    var(--noite);
  color: var(--creme);
  font-family: var(--fonte-corpo);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0;
}

a { color: var(--ouro-claro); }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.num { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }
.pos { color: var(--positivo); }
.neg { color: var(--negativo); }
.mudo { color: var(--mudo); }

/* ---------------------------- ACESSO ---------------------------- */

.acesso {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.acesso-caixa {
  width: 100%;
  max-width: 400px;
  background: linear-gradient(180deg, var(--feltro) 0%, var(--carta) 100%);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
  padding: 34px 30px 30px;
}

/* Assinatura da marca: a ficha de poker */
.ficha {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, var(--feltro-alto) 0 54%, var(--naipe) 54% 100%);
  border: 3px solid var(--ouro);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .12), inset 0 0 18px rgba(0, 0, 0, .5);
  position: relative;
}

.ficha::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px dashed rgba(237, 231, 212, .55);
}

.ficha span {
  font-family: var(--fonte-titulo);
  font-size: 26px;
  color: var(--creme);
  line-height: 1;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.acesso-caixa h1 {
  text-align: center;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--creme);
}

.acesso-caixa .legenda {
  text-align: center;
  color: var(--mudo);
  font-size: 13px;
  margin: 6px 0 24px;
}

/* --------------------------- FORMULARIOS --------------------------- */

.campo { margin-bottom: 14px; }

.campo label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mudo);
  margin-bottom: 6px;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--carta-alt);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  color: var(--creme);
  transition: border-color .15s ease, background .15s ease;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--ouro);
  background: #0A1714;
  outline: none;
}

.campo input[type="file"] { padding: 8px; color: var(--mudo); }
.campo textarea { min-height: 76px; resize: vertical; }
.campo .dica { font-size: 12px; color: var(--mudo); margin-top: 5px; }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }

/* ---------------------------- BOTOES ---------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--ouro);
  color: #1A1204;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform .12s ease, filter .15s ease;
}

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-bloco { width: 100%; }

.btn-secundario {
  background: transparent;
  border-color: var(--linha);
  color: var(--creme);
}
.btn-secundario:hover { border-color: var(--ouro); background: rgba(201, 162, 39, .08); }

.btn-perigo { background: var(--naipe); color: #fff; }
.btn-mini { padding: 6px 11px; font-size: 12.5px; border-radius: var(--r-sm); }

/* ---------------------------- ESTRUTURA ---------------------------- */

.topo {
  height: var(--barra);
  background: linear-gradient(180deg, #0F3327 0%, #0B2119 100%);
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.topo .marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 15px;
  font-weight: 700;
}

.topo .marca i {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--feltro-alto) 0 52%, var(--naipe) 52% 100%);
  border: 2px solid var(--ouro);
  display: inline-block;
}

.topo .espaco { flex: 1; }

.usuario-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--mudo);
}

.usuario-chip strong { color: var(--creme); font-weight: 600; }

.papel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--ouro);
  color: var(--ouro-claro);
}

.abrir-menu {
  display: none;
  background: none;
  border: 1px solid var(--linha);
  color: var(--creme);
  border-radius: var(--r-sm);
  padding: 7px 11px;
  cursor: pointer;
}

.corpo { display: flex; min-height: calc(100dvh - var(--barra)); }

.lateral {
  width: 232px;
  flex-shrink: 0;
  background: var(--carta-alt);
  border-right: 1px solid var(--linha);
  padding: 18px 12px;
}

.lateral nav { display: flex; flex-direction: column; gap: 3px; }

.lateral a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--creme);
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: background .14s ease;
}

.lateral a:hover { background: rgba(255, 255, 255, .04); }

.lateral a.ativo {
  background: rgba(201, 162, 39, .1);
  border-left-color: var(--ouro);
  color: var(--ouro-claro);
  font-weight: 600;
}

/* Os naipes marcam cada modulo: eles sao o indice do sistema, nao enfeite */
.naipe { font-size: 15px; width: 16px; text-align: center; }
.naipe.vermelho { color: var(--naipe-claro); }
.naipe.preto { color: var(--mudo); }
.lateral a.ativo .naipe.preto { color: var(--ouro-claro); }

.lateral .grupo {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--mudo);
  padding: 16px 12px 7px;
}

.conteudo { flex: 1; padding: 24px 26px 60px; min-width: 0; }

.cabecalho-tela {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.cabecalho-tela h2 {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.cabecalho-tela .sub { color: var(--mudo); font-size: 13px; margin-top: 3px; }
.cabecalho-tela .acoes { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }

/* ------------------------------ CARDS ------------------------------ */

.cartao {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 18px;
}

.cartao > h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--ouro);
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--linha);
}

.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.indicador {
  background: linear-gradient(160deg, var(--feltro) 0%, var(--carta) 100%);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}

.indicador::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -26px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px dashed rgba(201, 162, 39, .16);
}

.indicador .rot {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--mudo);
}

.indicador .val {
  font-family: var(--fonte-num);
  font-size: 25px;
  font-weight: 700;
  margin-top: 7px;
  letter-spacing: -.02em;
}

.indicador .pe { font-size: 12px; color: var(--mudo); margin-top: 3px; }

/* ------------------------------ TABELAS ------------------------------ */

.tabela-area { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 620px;
}

table.tab thead th {
  background: var(--feltro);
  color: var(--creme);
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .11em;
  padding: 11px 12px;
  white-space: nowrap;
  border-bottom: 2px solid var(--ouro);
}

table.tab tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}

table.tab tbody tr:nth-child(even) { background: rgba(255, 255, 255, .015); }
table.tab tbody tr:hover { background: rgba(201, 162, 39, .06); }
table.tab .dir { text-align: right; }
table.tab .acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }

.selo {
  display: inline-block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}

.selo.aberta   { color: var(--ouro-claro); border-color: var(--ouro); }
.selo.encerrada{ color: var(--positivo);  border-color: var(--positivo); }
.selo.cancelada{ color: var(--mudo);      border-color: var(--mudo); }
.selo.deve     { color: var(--negativo);  border-color: var(--negativo); }
.selo.receber  { color: var(--positivo);  border-color: var(--positivo); }

/* --------------------------- FILTROS --------------------------- */

.filtros {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--carta-alt);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.filtros .campo { margin: 0; min-width: 148px; flex: 1 1 148px; }

/* --------------------------- MESA (assinatura) --------------------------- */

.mesa {
  background:
    radial-gradient(ellipse at 50% 48%, #1A4A38 0%, #0E2C23 68%, #0A1E18 100%);
  border: 3px solid #3A2B14;
  border-radius: 180px / 96px;
  padding: 30px 26px;
  margin-bottom: 18px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .5);
}

.mesa .assentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: 12px;
}

.assento {
  background: rgba(8, 20, 16, .68);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 12px 14px;
}

.assento .nome {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.assento .linha-val {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--mudo);
  padding: 2px 0;
}

.assento .linha-val b { font-family: var(--fonte-num); color: var(--creme); font-weight: 600; }
.assento .resultado { border-top: 1px dashed var(--linha); margin-top: 8px; padding-top: 8px; }

.pilha {
  display: inline-flex;
  flex-direction: column-reverse;
  gap: 1px;
  vertical-align: middle;
}

.pilha i {
  display: block;
  width: 15px;
  height: 3px;
  border-radius: 2px;
  background: var(--ouro);
  opacity: .85;
}

/* --------------------------- CAIXA / DIALOGO --------------------------- */

.fundo-modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 7, .78);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 90;
}

.modal {
  width: 100%;
  max-width: 620px;
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
}

.modal header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  background: var(--carta);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.modal header h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ouro);
}

.modal header button {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--mudo);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.modal .miolo { padding: 20px; }
.modal footer {
  padding: 14px 20px;
  border-top: 1px solid var(--linha);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* --------------------------- AVISOS --------------------------- */

.aviso {
  padding: 11px 14px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  margin-bottom: 14px;
  border: 1px solid;
}

.aviso.erro  { background: rgba(192, 57, 43, .12); border-color: var(--naipe); color: #F0B4AE; }
.aviso.ok    { background: rgba(79, 169, 123, .12); border-color: var(--positivo); color: #A9DCC2; }
.aviso.alerta{ background: rgba(201, 162, 39, .1); border-color: var(--ouro); color: var(--ouro-claro); }

.recado {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  background: var(--feltro-alto);
  border: 1px solid var(--ouro);
  border-left-width: 4px;
  border-radius: var(--r-md);
  padding: 12px 18px;
  box-shadow: var(--sombra);
  max-width: 340px;
  animation: sobe .22s ease;
}

.recado.erro { border-color: var(--naipe); background: #3A1512; }

@keyframes sobe {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vazio {
  text-align: center;
  padding: 46px 20px;
  color: var(--mudo);
}

.vazio .simbolo { font-size: 34px; margin-bottom: 10px; opacity: .5; }
.vazio p { margin: 0 0 16px; }

.carregando {
  text-align: center;
  padding: 40px;
  color: var(--mudo);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}

/* ------------------------- LINHA DO TEMPO (auditoria) ------------------------- */

.tempo { position: relative; padding-left: 26px; }

.tempo::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--linha);
}

.tempo-item { position: relative; margin-bottom: 16px; }

.tempo-item::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--carta);
  border: 2px solid var(--ouro);
}

.tempo-item .quando {
  font-family: var(--fonte-num);
  font-size: 12px;
  color: var(--mudo);
}

.tempo-item .caixa {
  background: var(--carta-alt);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 11px 14px;
  margin-top: 5px;
}

.tempo-item .caixa strong { color: var(--ouro-claro); }

.tempo-item pre {
  margin: 8px 0 0;
  font-family: var(--fonte-num);
  font-size: 12px;
  color: var(--mudo);
  white-space: pre-wrap;
  word-break: break-word;
}

.paginacao { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 16px; }

/* ------------------------------ RESPONSIVO ------------------------------ */

@media (max-width: 900px) {
  .abrir-menu { display: block; }

  .lateral {
    position: fixed;
    top: var(--barra);
    left: 0;
    bottom: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .2s ease;
    overflow-y: auto;
  }

  .lateral.aberta { transform: translateX(0); box-shadow: var(--sombra); }

  .veu-lateral {
    position: fixed;
    inset: var(--barra) 0 0 0;
    background: rgba(0, 0, 0, .6);
    z-index: 45;
  }

  .conteudo { padding: 18px 14px 60px; }
  .grade-2, .grade-3 { grid-template-columns: 1fr; }
  .mesa { border-radius: var(--r-lg); padding: 18px 14px; }
  .cabecalho-tela .acoes { margin-left: 0; width: 100%; }
  .cabecalho-tela .acoes .btn { flex: 1; }
  .filtros .campo { flex: 1 1 100%; }
  .recado { left: 14px; right: 14px; max-width: none; }
}

@media (max-width: 520px) {
  .topo .marca span { display: none; }
  .usuario-chip strong { display: none; }
  .indicador .val { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .topo, .lateral, .filtros, .acoes, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .cartao, table.tab { border-color: #ccc; }
}