/* Acabamento comum das telas: superfícies, estados e movimento discreto. */
:root {
  --texto2: #b3c2d0;
  --texto3: #91a3b4;
  --borda: rgba(174, 202, 222, .12);
  --borda2: rgba(174, 202, 222, .22);
  --card: linear-gradient(145deg, rgba(24, 40, 47, .76), rgba(14, 23, 33, .94));
  --motion: 180ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
button, input, select, textarea { accent-color: var(--verde); }
:where(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: 2px solid var(--azul); outline-offset: 3px;
}
::selection { background: rgba(34,197,94,.32); color: #fff; }
.menu-topo { background: linear-gradient(180deg, #111e29, #0c141d); box-shadow: 0 6px 24px rgba(0,0,0,.16); }
.menu-topo button.item {
  appearance: none; border: 1px solid transparent; background: transparent;
  font-family: var(--fonte); font-weight: 600; position: relative;
  transition: color var(--motion), background var(--motion), border-color var(--motion);
}
.menu-topo .item:hover, .menu-topo .item.nav-ativa {
  background: linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.03));
  color: #dcfce7; border-color: rgba(34,197,94,.2);
}
.menu-topo .item.nav-ativa::after {
  content: ''; position: absolute; bottom: 0; height: 3px; left: 25%; right: 25%;
  border-radius: 3px; background: var(--verde); box-shadow: 0 0 14px var(--verde-glow);
}
.lateral .bloco, .coluna-ficha .ficha {
  background: var(--card); border-color: var(--borda);
  box-shadow: 0 4px 16px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.025);
}
.lateral .cabeca .nome { letter-spacing: -.4px; }
.lateral .proximo { background: rgba(255,255,255,.025); }
.lateral .faixa-preta, .coluna-ficha .rotulo { color: #74df9c; }
.elenco { background: linear-gradient(150deg, rgba(18,29,39,.85), rgba(9,17,24,.94)); }
.elenco th { background: #182632; color: #bdcdd9; }
.elenco tbody tr:nth-child(even) td { background-color: rgba(157,192,213,.025); }
.elenco tr.sel td, .tabela-branca tr.sel td { background: rgba(34,197,94,.15); }
.elenco tr.sel td:first-child { box-shadow: inset 3px 0 var(--verde); }
.elenco tr:hover td { background: rgba(84,136,165,.11); }
:is(.tabela-class, .tabela-branca) th { background: rgba(120,161,185,.08); }
:is(.tabela-class, .tabela-branca) tbody tr:hover td { background-color: rgba(84,136,165,.1); }
.dialogo { background: linear-gradient(145deg, #172531, #111c27 75%); box-shadow: 0 28px 80px rgba(0,0,0,.5); }
.dialogo > .titulo { background: linear-gradient(100deg, #172d2b, #13212e 60%); border-bottom-color: var(--borda2); }
.dialogo .titulo > span:first-child { font-weight: 700; letter-spacing: -.25px; }
.est-nav-item { position: relative; border: 1px solid transparent; transition: color var(--motion), background var(--motion), border-color var(--motion); }
.est-nav-item:hover { background: rgba(115,167,189,.08); color: var(--texto); }
.est-nav-item.ativa { background: linear-gradient(100deg, rgba(34,197,94,.17), rgba(34,197,94,.05)); color: #91efb3; border-color: rgba(34,197,94,.2); box-shadow: inset 3px 0 var(--verde); }
.est-nav-grupo { color: var(--texto3); letter-spacing: .1em; }
:is(.abas, .guia) > .ativa { box-shadow: inset 0 -2px var(--verde); }
.btn { transition: transform var(--motion) var(--ease), box-shadow var(--motion), background var(--motion), border-color var(--motion); }
.btn.primario { box-shadow: 0 4px 16px rgba(34,197,94,.22); }
.btn.primario:hover { box-shadow: 0 7px 22px rgba(34,197,94,.3); }
.btn:disabled:hover { box-shadow: none; }
.hub-carregando { display: flex; align-items: center; gap: 10px; color: var(--texto2); }
.hub-carregando::before { content: ''; width: 16px; height: 16px; flex: none; border: 2px solid var(--borda2); border-top-color: var(--verde); border-radius: 50%; animation: xf-girar .8s linear infinite; }
@keyframes xf-girar { to { transform: rotate(360deg); } }
@keyframes xf-aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.sem-movimento) .dialogo { animation: xf-aparecer 220ms var(--ease) both; }
  html:not(.sem-movimento) .hub-corpo { animation: xf-aparecer 180ms var(--ease) both; }
  html:not(.sem-movimento) .lateral > .bloco { animation: xf-aparecer 260ms var(--ease) both; }
  html:not(.sem-movimento) .lateral > .bloco:nth-child(2) { animation-delay: 35ms; }
  html:not(.sem-movimento) .lateral > .bloco:nth-child(3) { animation-delay: 70ms; }
}
html.sem-movimento *, html.sem-movimento *::before, html.sem-movimento *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
html.mobile .menu-topo { scroll-snap-type: x proximity; }
html.mobile .menu-topo .item { scroll-snap-align: start; }
html.mobile .est-nav-item { min-height: 40px; }
html.mobile .dialogo > .titulo { padding: 14px; }
html.mobile .dialogo .fechar { min-height: 36px; min-width: 36px; }
.est-nav-item .tecla { margin-left: 8px; }
html.mobile .dialogo .conteudo .linha { flex-wrap: wrap; gap: 8px; margin: 14px 0; }
html.mobile .dialogo .conteudo .linha > label:first-child { flex-basis: 100%; color: var(--texto2); }
html.mobile .dialogo .musica-ctl.inline { width: 100%; min-width: 0; }
html.mobile .dialogo .musica-ctl .chk { white-space: normal; }
html.mobile .dialogo :is(input, select, .sw) { max-width: 100%; }
html.mobile .dialogo .rodape-botoes { flex-wrap: wrap; }
html.mobile .est-layout { grid-template-columns: minmax(0, 1fr); }
html.mobile .est-conteudo { min-width: 0; max-width: 100%; }
html.mobile .dialogo .conteudo .linha > label:first-child { width: auto; text-align: left; }
/* Central do Treinador */
.menu-topo button.item { width: 88px; flex-shrink: 1; }
.comando { display: flex; flex-direction: column; gap: 18px; }
.comando-nav { display: flex; gap: 5px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.comando-nav button { background: transparent; color: var(--texto2); border: 1px solid transparent; padding: 10px 12px; border-radius: 9px; cursor: pointer; font-weight: 600; transition: background .18s, color .18s; }
.comando-nav button:hover { background: rgba(255,255,255,.05); }
.comando-nav button.ativa { color: #91efb3; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); }
.comando-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.comando-cab h2 { margin: 4px 0 0; font-size: 24px; letter-spacing: -.6px; }
.comando small { color: var(--texto3); }
.comando-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.comando-card { padding: 18px; border: 1px solid var(--borda); border-radius: 14px; background: linear-gradient(140deg, rgba(38,60,70,.45), rgba(12,22,32,.45)); margin-bottom: 14px; min-width: 0; }
.comando-grade .comando-card { margin-bottom: 0; }
.comando-card h3 { font-size: 16px; margin: 0 0 12px; }
.comando-card h4 { margin-bottom: 8px; }
.comando-nota { color: var(--texto2); font-size: 12.5px; line-height: 1.65; margin: 8px 0; }
.comando-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.comando-acoes input { flex: 1; min-width: 140px; }
.comando-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.comando-form label, .comando-identidade label { display: flex; flex-direction: column; gap: 7px; color: var(--texto2); font-size: 12px; }
.comando-form select, .comando-identidade select { width: 100%; min-width: 0; }
.comando-identidade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.comando-indicadores { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.comando-numero { border: 1px solid var(--borda); border-radius: 12px; padding: 16px; background: rgba(34,197,94,.04); display: flex; flex-direction: column; gap: 7px; }
.comando-numero b { font: 700 24px var(--mono); color: #91efb3; }
.comando-numero span { font-size: 11px; color: var(--texto2); }
.comando-rival { display: flex; gap: 14px; align-items: center; }
.comando-rival img { width: 54px; height: 54px; object-fit: contain; }
.comando-rival h3 { margin: 0; font-size: 20px; }
.comando-forma { display: flex; gap: 6px; margin: 10px 0; }
.comando-forma span { border-radius: 7px; padding: 5px 9px; background: rgba(255,255,255,.08); font-weight: 700; }
.comando-forma .V { color: var(--verde); } .comando-forma .D { color: #f87171; }
.comando-vazio { text-align: center; padding: 30px 16px; color: var(--texto3); }
.comando-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.comando-memorias { padding: 12px 0; }
.comando-memorias article { display: flex; gap: 14px; padding: 0 0 22px; }
.comando-memorias p { margin: 6px 0 0; line-height: 1.5; }
.comando-marco { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--verde); margin-top: 5px; box-shadow: 0 0 12px rgba(34,197,94,.2); }
.comando-corpo.entrar { animation: xf-aparecer .18s ease-out; }
.int-taticas .comando-identidade { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 700px) { .comando-grade, .comando-form { grid-template-columns: 1fr; } .comando-identidade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .comando-indicadores { gap: 6px; } .comando-numero { padding: 10px; } .comando-numero b { font-size: 17px; } .comando-cab { align-items: flex-start; } .comando-nav button { padding: 9px; font-size: 11px; } .comando-card { padding: 14px; } }
html.mobile .menu-topo button.item { flex-shrink: 0; width: 66px; }

/* Operação comercial do estádio: números compactos e controles que cabem no celular. */
.est-fin-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.est-fin-linha b { flex: none; }
.est-conteudo .op-evento select, .est-conteudo .nm-card select { width: 100%; min-width: 0; }
@media (max-width: 900px) { .est-conteudo .op-eventos { grid-template-columns: minmax(0, 1fr); } }

/* Planejamento comercial: projeções e histórico cabem também no celular. */
.est-tabela-scroll { max-width:100%; overflow-x:auto; margin:12px 0; }
.est-comparacao { margin-top:18px; }
.est-comparacao th, .est-comparacao td { padding:8px; }
.est-compromissos { padding:12px; margin:12px 0; border:1px solid var(--borda); border-radius:8px; }
.est-publico input[type=number] { width:90px; }
[data-est-gestao] .ap-proj { grid-template-columns:repeat(3,minmax(0,1fr)); }
[data-est-gestao] .ap-proj[aria-busy=true] { opacity:.55; }
[data-est-gestao] .ap-k b { overflow-wrap:anywhere; }
@media(max-width:650px) { [data-est-gestao] .ap-proj { grid-template-columns:repeat(2,minmax(0,1fr)); } .est-publico .ctl-linha { flex-wrap:wrap; } }