/* Etapa 7, Parte 7 — a Tessa: as 8 abas de UM escritório do setor (tessa_esc.js). Só as peças novas: cartões, tabelas, botões, selos, abas
   e formulários vêm de base.css e app.css. Tudo com o prefixo te- para não cruzar com tessa.css (a moldura e as páginas do setor). */
.te-abas{margin:0 0 12px}
.te-esc .grade2{align-items:start}
.te-esc .cartao p{line-height:1.5}
.te-esc a:not(.btn):not(.aba){color:var(--cor-txt,var(--cor));font-weight:650}
.te-cinza{color:var(--cinza)}

/* Cadastro: os dados, o aviso do perfil incompleto, o logo */
.te-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.te-dado span{display:block;font-size:12px;color:var(--cinza);margin-bottom:2px}
.te-dado b{font-weight:600;overflow-wrap:anywhere}
.te-dado small{color:var(--cinza);font-weight:400}
.te-falta{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:9px 12px;border-radius:9px;line-height:1.45;background:color-mix(in srgb,var(--alerta) 13%,transparent)}
.te-falta svg{width:17px;height:17px;flex:none;color:var(--alerta);margin-top:1px}
.te-falta-txt{color:var(--alerta);font-weight:600}
.te-logo{display:grid;place-items:center;min-height:96px;border:1px dashed var(--linha);border-radius:10px;padding:12px;background:#eef0f3}
/* o logo do escritório aparece como ele é (letras escuras somem no fundo escuro da Tessa) */
.te-logo img{max-width:100%;max-height:110px;object-fit:contain;display:block}
.te-situ{margin:0 0 12px;font-size:13px}

/* formulários: a caixa de marcar e o seletor de cor não esticam */
.te-esc .form input[type=checkbox]{width:auto;padding:0;accent-color:var(--cor)}
.te-esc .form input[type=color]{width:46px;height:36px;padding:2px;flex:none;cursor:pointer}
.te-esc .form textarea{height:96px}
.te-esc .form .te-marca{display:flex;gap:8px;align-items:center;color:var(--tinta);font-size:13.5px;cursor:pointer}
.te-cor{display:flex;gap:8px;align-items:center;max-width:220px}

/* Aparência: a amostra das cores escolhidas */
.te-amostra{--am-cor:#0b6b5d;--am-cor2:#0b6b5d;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:10px;border:1px solid #dce1e5;background:#f3f5f7;color:#25282b}
.te-amostra[data-tema=escuro]{background:#0e0f11;color:#c4c9ce;border-color:rgba(255,255,255,.12)}
.te-amostra.vidro{background-image:linear-gradient(135deg,rgba(127,127,127,.16),rgba(127,127,127,0) 60%)}
.te-am-tile{width:28px;height:28px;border-radius:8px;background:var(--am-cor)}
.te-am-tile.ativo{background:var(--am-cor2)}
.te-am-aba{border-radius:16px;padding:3px 12px;background:var(--am-cor);color:#fff;font-weight:600;font-size:12.5px}
.te-am-txt{font-weight:650;color:var(--am-cor)}
.te-amostra[data-tema=escuro] .te-am-txt{color:color-mix(in srgb,var(--am-cor2) 62%,#fff)}

/* Funções: as chaves */
.te-func{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--linha2)}
.te-func:last-of-type{border-bottom:0}
.te-fn{flex:1;min-width:0}
.te-fn small{display:block;color:var(--cinza);font-size:12px}
.te-chave{width:38px;height:22px;border-radius:11px;background:#8f969d;position:relative;flex:none;cursor:pointer;border:0;padding:0}
.te-chave::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.te-chave.sim{background:var(--cor)}
.te-chave.sim::after{left:19px}
.te-chave:focus-visible{outline:2px solid var(--cor2);outline-offset:2px}

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

/* Skills */
.te-sk-topo{margin:0 0 4px}
.te-sk-nota{margin:6px 2px 12px}
.selo.te-perigo{background:color-mix(in srgb,var(--perigo) 15%,transparent);color:var(--perigo)}
.te-skills td .selo{margin:0 4px 3px 0}
.t tr.te-apagada td{opacity:.55}
.te-motivo{display:block;font-size:12.5px;color:var(--perigo);white-space:pre-line;max-width:340px}
.modal-caixa.te-largo{width:min(1100px,100%)}
.te-editor{display:flex;flex-direction:column;gap:8px}
.te-editor .te-nome{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--cinza)}
.te-editor input{font:inherit;padding:7px 10px;border:1px solid var(--linha);border-radius:8px;background:var(--campo);color:var(--tinta);min-width:min(320px,100%)}
.te-editor input[readonly]{opacity:.75}
.te-editor .nota{margin:0 2px}
.te-editor textarea{width:100%;height:min(60vh,600px);font:13px/1.5 "Cascadia Mono",Consolas,monospace;padding:10px 12px;border:1px solid var(--linha);border-radius:9px;background:var(--campo);color:var(--tinta);resize:vertical}
.te-modal-form textarea{width:100%;height:110px;font:inherit;padding:8px 10px;border:1px solid var(--linha);border-radius:9px;background:var(--campo);color:var(--tinta);resize:vertical}
.te-trava{border:1px solid var(--perigo);border-radius:9px;padding:8px 12px;color:var(--perigo);background:color-mix(in srgb,var(--perigo) 8%,transparent)}
.te-trava pre{margin:6px 0 0;white-space:pre-wrap;font:12.5px/1.45 "Cascadia Mono",Consolas,monospace}
.te-nota-teste{white-space:pre-line}
/* Skills › «copiada da skill n.º N do …» e a caixa «Usar noutro escritório» (T.4) */
.te-copiada{display:block;margin-top:2px;font-size:12px;color:var(--cinza)}
.te-usar-lista{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}
.te-usar-op{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid var(--linha);border-radius:10px;cursor:pointer;line-height:1.4;min-width:0}
.te-usar-op input{margin-top:3px;flex:none;accent-color:var(--cor)}
.te-usar-op>span{min-width:0;overflow-wrap:anywhere}
.te-usar-op:has(input:checked){border-color:var(--cor);background:color-mix(in srgb,var(--cor) 7%,transparent)}
.te-usar-op.te-apagada{opacity:.55;cursor:default}
.te-usar-marcas{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.te-usar-marcas .selo{max-width:100%;overflow-wrap:anywhere}
.te-usar-situ{margin:0 0 8px}
pre.te-texto,pre.te-dif{max-height:62vh;overflow:auto;margin:8px 0 0;padding:10px 12px;border:1px solid var(--linha);border-radius:9px;background:var(--campo);color:var(--tinta);font:12.5px/1.5 "Cascadia Mono",Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
pre.te-dif .mais{color:var(--ok)}
pre.te-dif .menos{color:var(--perigo)}
pre.te-dif .arroba{color:var(--cinza)}

/* Skills › Testes (área de teste): a lista e o teste aberto (as saídas de cada análise; com a mãe, lado a lado) */
.te-testes{margin-top:14px}
.te-testes-topo{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 8px;font-size:13px}
.te-rola{overflow-x:auto}
.te-tab-testes td .selo{margin:0 4px 3px 0}
.te-jobs{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:10px}
.te-jobs.te-lado{grid-template-columns:repeat(2,minmax(0,1fr))}
.te-job{border:1px solid var(--linha);border-radius:11px;padding:10px 12px;min-width:0}
.te-job-topo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.te-job-topo small{margin-left:auto}
.te-job .te-trava{margin:6px 0}
.te-saida{margin-top:10px}
.te-saida-topo{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.te-saida-topo b{overflow-wrap:anywhere;font-size:13px}
.te-saida-topo .btn{margin-left:auto}
.te-job pre.te-texto{max-height:50vh;margin-top:6px}

/* Gastos: o mês, os 4 números, a barra por função e as barras por dia */
.te-mes{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.te-mes label{display:flex;gap:8px;align-items:center;color:var(--cinza);font-size:13px}
.te-mes input{font:inherit;padding:6px 9px;border:1px solid var(--linha);border-radius:8px;background:var(--campo);color:var(--tinta)}
.te-mes .btn{margin-left:auto}
.te-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.te-stat{background:var(--sup);border:1px solid var(--linha);border-radius:12px;padding:10px 14px;min-width:0}
.te-stat small{display:block;color:var(--cinza);font-size:12px}
.te-stat b{display:block;font-size:23px;font-weight:650;font-variant-numeric:tabular-nums;margin:2px 0;overflow-wrap:anywhere}
.te-stat b.te-menor{font-size:18px}
.te-stat b.te-sobe{color:var(--alerta)}
body.vidro .te-stat{background:rgba(255,255,255,.56);backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25)}
body[data-tema=escuro].vidro .te-stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.te-barra-td{width:22%}
.te-barra{height:8px;border-radius:4px;background:color-mix(in srgb,var(--cinza) 18%,transparent);min-width:80px}
.te-barra>div{height:100%;border-radius:4px;background:var(--cor2)}
.te-dias{display:flex;align-items:stretch;gap:3px;height:150px;padding-top:6px}
.te-dia{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.te-dia-area{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.te-dia-barra{width:100%;max-width:22px;background:var(--cor2);border-radius:3px 3px 0 0}
.te-dia small{font-size:10px;color:var(--cinza);font-variant-numeric:tabular-nums;line-height:1}
.te-dia:hover .te-dia-barra{background:var(--cor)}

/* Conexões */
.te-url{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font-size:13px}

@media (max-width:1100px){.te-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .te-dados{grid-template-columns:1fr}
  .te-mes .btn{margin-left:0}
  .te-dia small{font-size:8px}
  .te-dia:nth-child(even) small{visibility:hidden}
  .te-motivo{max-width:none}
  .te-jobs.te-lado{grid-template-columns:minmax(0,1fr)}
}