/* Etapa 7, Parte 8 — o MAESTRO (só no app de mesa «ZT Maestro»): o tema vem do tessa.css pela classe `tessa` do body (escuro, vidro, as cores
   do logo novo do Dr.; decisão cz3q1). Cartões, tabelas, botões, selos, abas, stats e a conversa vêm de base.css, app.css e tessa.css; aqui, só o
   que é do Maestro: a marca da ZT na barra, as tabelas largas que rolam dentro do cartão, os números e o gráfico dos Gastos, os cartões do que
   vem depois e a troca do código do celular. Prefixo m- (Conhecimento, Skills e Evolução têm o maestro_cs.css, prefixo mc-). */

/* a marca: o logo do Dr. na barra aberta; com a barra recolhida, o ícone «ZT» (icone.svg) ao lado do botão da barra */
body.maestro .lado-topo .lado-logo{height:34px;max-width:170px}
.m-icone{display:none;width:26px;height:26px;flex:none}
body.maestro .app.recolhido .m-icone{display:block}
body.maestro .app.recolhido .lado-topo{gap:2px}
body.maestro .app.recolhido .lado-topo .btn-lado{width:36px}
/* o papel de parede: o logo do Dr. bem claro (app.js, aplicarTemaMaestro), um pouco mais visível no Início */
body.maestro[data-tema=escuro] .app::before{opacity:.055;background-size:min(72%,1000px) auto}
body.maestro[data-tema=escuro] .app:has(.palco.casa)::before{opacity:.11}

/* as tabelas largas rolam dentro do cartão (nunca a página): 1.536, 1.366 e 390 px */
.m-rola{overflow-x:auto;max-width:100%;margin:0 0 14px;border-radius:10px}
.cartao .m-rola,.modal-caixa .m-rola{margin-bottom:0}
.m-rola>table.t{min-width:460px}
.m-rola>table.t.m-larga{min-width:980px}
.t tr.m-apagada td{opacity:.55}
.m-filtros{margin:0 0 10px}

/* Início: o número de itens de cada pedido, à direita */
.m-inicio{max-width:1040px}
body.maestro .alerta-item[data-ir]{cursor:pointer;border-radius:7px}
body.maestro .alerta-item[data-ir]:hover{background:rgba(255,255,255,.035)}
.alerta-item .m-n{margin-left:auto;align-self:center;flex:none;font-size:11.5px;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.09);border-radius:10px;padding:1px 8px}

/* o que vem numa etapa futura e os avisos */
.m-futuro{border-style:dashed}
.m-futuro-topo{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:8px}
.m-futuro-topo b{font-size:14.5px}
.m-futuro p{margin:0 0 8px;line-height:1.5}
.m-futuro p:last-child{margin-bottom:0}
.m-aviso{border-color:var(--alerta);background:color-mix(in srgb,var(--alerta) 10%,var(--sup,#fff))}
.m-info{max-width:1100px}
.m-info .pode{margin-bottom:14px}

/* Gastos: os 4 números e as barras por dia */
.stats.m-quatro{grid-template-columns:repeat(4,minmax(0,1fr))}
.m-dias{display:flex;align-items:stretch;gap:3px;height:150px;padding-top:6px}
.m-dia{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.m-dia-area{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.m-dia-barra{width:100%;max-width:22px;background:var(--cor2);border-radius:3px 3px 0 0}
.m-dia small{font-size:10px;color:var(--cinza);font-variant-numeric:tabular-nums;line-height:1}
.m-dia:hover .m-dia-barra{background:var(--cor)}

/* Busca: o campo grande com o botão */
.m-busca{max-width:760px}
.m-busca .btn{flex:none}

/* as caixas: a larga (extrato, histórico), a chave nova e os códigos de recuperação do segundo fator */
.modal-caixa.m-largo{width:min(980px,100%)}
.m-chave{font-family:Consolas,"Cascadia Mono",monospace;font-size:16px;letter-spacing:.06em;border:1px dashed var(--linha);border-radius:9px;padding:10px 12px;margin:0 0 12px;overflow-wrap:anywhere;user-select:all}
.m-codigos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;font-family:Consolas,"Cascadia Mono",monospace;font-size:14px;margin:0 0 12px;user-select:all}
.form .m-marca{display:flex;gap:8px;align-items:center;color:var(--tinta);font-size:13.5px;cursor:pointer}
.form .m-marca input[type=checkbox]{width:auto;padding:0;accent-color:var(--cor)}

@media (max-width:1100px){.stats.m-quatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .m-dia small{font-size:8px}
  .m-dia:nth-child(even) small{visibility:hidden}
  .m-busca{flex-wrap:wrap}
  .m-busca input{min-width:0}
}
/* no celular a grade do base.css vira uma coluna «1fr», que cresce com a tabela mais larga e empurra a página para o lado: no Maestro a
   coluna não passa da tela (a tabela rola dentro do cartão) */
body.maestro .grade2>*{min-width:0}
@media (max-width:1100px){body.maestro .grade2{grid-template-columns:minmax(0,1fr)}}