/* Etapa 7, Parte 7 — a TESSA (só no app de mesa «Tessa LawAI»): a moldura da Consultoria e as páginas do setor (tessa.js). Cartões, tabelas,
   botões, selos, abas e a conversa vêm de base.css e app.css; aqui, o tema da Tessa e as peças novas (as classes com t- e as da maquete:
   stats/stat, barrinha/barra-fundo, pode). As 8 abas de um escritório têm o tessa_esc.css (prefixo te-). */

/* o tema da Tessa: sempre escuro, com vidro, nas cores do logo novo do Dr. (--z violeta, --zt-meio azul-petróleo, --t verde-água; app.css) */
body.tessa[data-tema=escuro]{--cor:var(--zt-meio);--cor2:var(--t);--cor-txt:color-mix(in srgb,var(--t) 60%,#fff);--lawai:#e3e6e9}
body.tessa .tile{background:linear-gradient(135deg,var(--z),var(--zt-meio));color:#fff}
body.tessa .item.ativo .tile{background:linear-gradient(135deg,var(--zt-meio),var(--t));box-shadow:0 0 0 2px color-mix(in srgb,var(--t) 75%,transparent)}
body.tessa .tile.tia{background:linear-gradient(135deg,var(--z),var(--t))}
body.tessa[data-tema=escuro] .item.ativo>.item-btn{background:color-mix(in srgb,var(--cor2) 16%,transparent)}
body.tessa[data-tema=escuro] .sub-item.ativo{color:var(--cor-txt);background:color-mix(in srgb,var(--cor2) 13%,transparent)}
body.tessa[data-tema=escuro] .btn:hover{border-color:var(--cor2)}
body.tessa[data-tema=escuro] .btn.pri{background:linear-gradient(100deg,var(--z),var(--zt-meio));border-color:transparent;color:#fff}
body.tessa[data-tema=escuro] .btn.pri[disabled]{opacity:.5;cursor:default}
body.tessa[data-tema=escuro] .btn.liga{background:color-mix(in srgb,var(--cor2) 16%,transparent);border-color:var(--cor2);color:var(--cor-txt)}
body.tessa[data-tema=escuro] .t tr.sel td,body.tessa[data-tema=escuro] .protocolo.ativo{background:color-mix(in srgb,var(--cor2) 14%,transparent)}
body.tessa[data-tema=escuro] .msg.eu,body.tessa[data-tema=escuro] .bolha.eu{background:color-mix(in srgb,var(--zt-meio) 26%,transparent)}
body.tessa[data-tema=escuro] .aba.sim{background:var(--cor);border-color:var(--cor);color:#fff}
body.tessa[data-tema=escuro] .rapidos button:hover{border-color:var(--cor2)}
/* o papel de parede: a marca «Tessa LawAI» bem clara (app.js, fundoTessa), mais visível no Início — como na maquete */
body.tessa[data-tema=escuro] .app::before{opacity:.06}
body.tessa[data-tema=escuro] .app:has(.palco.casa)::before{opacity:.13}

/* a marca «Tessa LawAI» no alto da barra (o mesmo desenho da Zaya: o nome no degradê do logo, o «LawAI» do logo do Dr.) e na entrada */
.tessa-marca{display:flex;align-items:center;height:38px;overflow:visible}
.tessa-marca svg{height:25px;width:auto;max-width:196px;display:block;overflow:visible}
.tessa-marca .cn{fill:#0A91B3}
.tessa-marca .cw,.tessa-marca .ca{fill:var(--lawai)}
.caixa-entrada .marca.tessa-marca{height:auto;margin:4px auto 18px;justify-content:center}
.caixa-entrada .tessa-marca svg{height:auto;width:min(300px,100%);max-width:none}
body.tessa .proc-id .sair{display:inline-block;margin-top:3px}

/* a entrada do administrador no app: a escolha do setor */
.t-setores{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.t-setor{display:block;width:100%;text-align:left;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 12px;background:rgba(12,13,15,.7);color:#e3e6e9;font:inherit;cursor:pointer}
.t-setor:hover{border-color:var(--t)}
.t-setor[disabled]{opacity:.6;cursor:default}
.t-setor b{display:block;font-size:14.5px}
.t-setor small{display:block;color:#9aa1a7;font-size:12.5px;margin-top:2px}

/* Início: para hoje, alertas, a busca e os atalhos */
.t-inicio{max-width:1000px}
body.tessa .alerta-item[data-ir]{cursor:pointer;border-radius:7px}
body.tessa .alerta-item[data-ir]:hover{background:rgba(255,255,255,.035)}
.alerta-item .ico.hoje{background:var(--cor2);color:#06121a}
.secao.t-sub{margin:12px 0 2px}
.secao.t-sub:first-of-type{margin-top:0}
.chip.zero{opacity:.55}

/* Protocolos: o filtro por escritório e o alto da conversa com o Encerrar */
.t-lista-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 8px;border-bottom:1px solid var(--linha2)}
.t-lista-topo .secao{margin:0}
.t-filtro{font:inherit;font-size:12.5px;padding:3px 6px;border:1px solid var(--linha);border-radius:7px;background:var(--campo);color:var(--tinta);max-width:170px}
.t-prot-topo{display:flex;gap:10px;align-items:flex-start}
.t-prot-topo>div{flex:1;min-width:0}
.t-prot-topo .btn{padding:5px 11px;flex:none}

/* Alertas de vigência: o texto anterior e o novo, abertos sob pedido */
.t-vig td:nth-child(2){max-width:440px}
.t-textos{margin-top:6px}
.t-textos summary{cursor:pointer;color:var(--cor-txt);font-size:12.5px}
.t-textos small{display:block;color:var(--cinza);font-size:11.5px;margin-top:6px}
.t-textos p{margin:2px 0 0;white-space:pre-wrap;font-family:Georgia,serif;font-size:13.5px;line-height:1.5}

/* Gastos do setor: o mês, os números e a barra (as peças da maquete) */
.t-mes{margin:0 0 2px}
.t-mes label{display:flex;gap:8px;align-items:center;color:var(--cinza);font-size:13px}
.t-mes input{font:inherit;padding:6px 9px;border:1px solid var(--linha);border-radius:8px;background:var(--campo);color:var(--tinta)}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 0 14px}
.stats.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{background:var(--sup);border:1px solid var(--linha);border-radius:12px;padding:10px 14px;min-width:0}
.stat small{display:block;color:var(--cinza);font-size:12px}
.stat b{display:block;font-size:23px;font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat b.menor{font-size:18px}
body.vidro .stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.barra-fundo{background:rgba(255,255,255,.07);border-radius:4px;height:8px;width:100%;min-width:80px}
.barrinha{height:8px;border-radius:4px;background:var(--cor2)}
.t td.t-barra{width:22%;vertical-align:middle}

/* Padrões do setor: um cartão por bloco */
.t-padroes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr));gap:14px;margin-bottom:14px;align-items:start}
.t-padroes .cartao{margin:0}
.t-form-col{grid-template-columns:1fr}
.t-form-col textarea{height:130px}
.t-aviso{border-style:dashed}

/* Terminal: só a informação (o terminal vem na etapa própria) */
.t-terminal{max-width:1100px}
.pode{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pode .cartao{margin:0}
.pode ul{margin:6px 0 0;padding-left:18px;line-height:1.6}
.pode .nao li::marker{color:var(--perigo)}
.pode .sim li::marker{color:var(--ok)}

@media (max-width:1100px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.pode{grid-template-columns:1fr}}
@media (max-width:760px){
  .stats,.stats.tres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-padroes{grid-template-columns:1fr}
  .t-lista-topo{flex-wrap:wrap}
  .t-filtro{max-width:none;flex:1}
  .t-vig td:nth-child(2){max-width:none}
}