/* Giostra · acabamento visual comum. Carregado por último: refina o que cada tela define. */
body { font-family: var(--font); background: var(--bg); color: var(--tx); -webkit-font-smoothing: antialiased; }
::selection { background: #c8a25c55; }
* { scrollbar-width: thin; scrollbar-color: #4a3f33 transparent; }

/* cabeçalho: faixa verde do lambri com filete de latão */
header {
  background: linear-gradient(180deg, var(--green2) 0%, var(--green) 100%);
  border-bottom: 1px solid #c8a25c59;
  box-shadow: 0 2px 12px #00000059;
}
header h1 {
  font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: 1.5px;
  color: var(--ac2); text-transform: uppercase; white-space: nowrap;
}
header button, header select, header a, header nav a, header nav button, header .navl {
  background: #0000003d; border-color: #ffffff1f; border-radius: var(--r-sm);
}
header button:hover, header a:hover, header nav button:hover, header .navl:hover { border-color: var(--ac); background: #00000059; }
header .on, header nav .on, header button.on {
  background: linear-gradient(180deg, var(--ac2), var(--ac)); color: #1d1608; border-color: var(--ac); font-weight: 600;
}

/* controles */
button, select, input, textarea { border-radius: var(--r-sm); transition: border-color .15s, background .15s, box-shadow .15s; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--ac2); outline-offset: 1px;
}
input:focus, select:focus, textarea:focus { border-color: var(--ac); }
button.pri, .pri {
  background: linear-gradient(180deg, var(--ac2), var(--ac)); color: #1d1608; border-color: var(--ac); font-weight: 600;
}
button.pri:hover { filter: brightness(1.06); }
button:disabled { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* títulos de seção */
h2 { font-family: var(--font); font-weight: 600; letter-spacing: 1.4px; color: var(--mut); }
h2::after { content: ""; display: block; height: 1px; margin-top: 6px; background: linear-gradient(90deg, #c8a25c66, transparent 60%); }

/* cartões, indicadores e tabelas */
.tile, .card, .ins, .wrap, .mbox, .box {
  border-radius: var(--r-md); border-color: var(--line); box-shadow: var(--shadow);
}
.tile, .card, .ins { background: linear-gradient(180deg, #211c18, var(--panel)); }
.tile b, .big { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.1; letter-spacing: .5px; }
.tile.warn { border-color: #f0c75e66; } .tile.bad { border-color: #e8756f66; }
.card h3, .mbox h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: .3px; color: var(--ac2); }
th { background: #171310; color: var(--mut); font-weight: 600; }
tbody tr:hover td { background: #ffffff06; }
.chip { border-radius: 99px; padding: 2px 9px; }
.alert { border-radius: var(--r-md); }
.bars i { background: linear-gradient(180deg, var(--ac2), var(--ac)); }
#toast, #msg { border: 1px solid #c8a25c59; border-radius: 99px; padding: 9px 18px; box-shadow: 0 8px 24px #00000080; }
#mod, #modal { backdrop-filter: blur(3px); }

/* calendário */
.cal .d { border-radius: var(--r-sm); }
.cal .d.today { box-shadow: 0 0 0 1px var(--ac2) inset; }
.cal .d .n { font-family: var(--font-display); font-size: 18px; }

/* tela de login */
.pg-login { background: radial-gradient(1200px 600px at 50% -10%, #2c4a3766, transparent 60%), var(--bg); }
.pg-login .box { border-top: 3px solid var(--ac); padding: 28px; }
.pg-login h1 { font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: 4px; text-align: center; color: var(--ac2); }
.pg-login #sub { text-align: center; }
.pg-login button { background: linear-gradient(180deg, var(--ac2), var(--ac)); border-radius: var(--r-sm); }

/* salão 3D: painéis laterais e balão */
.pg-salao aside { background: linear-gradient(180deg, #1f1a16, var(--panel)); }
.pg-salao #stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 140px #000000a6; }
.pg-salao #hint { border: 1px solid #ffffff14; border-radius: 99px; padding: 5px 12px; background: #000000b3; z-index: 2; }
.pg-salao #warn { border-radius: 99px; z-index: 2; }
.pg-salao #tip { border-color: #c8a25c59; border-radius: var(--r-md); box-shadow: 0 10px 30px #000000a6; }
.pg-salao .rrow { border-radius: var(--r-sm); }
.pg-salao .pal button { text-align: left; }