/* Acréscimos do app escritos à mão (o painel.css é gerado do wireframe e não se edita). Cada tela acrescenta o seu bloco com um comentário "T0N". */

/* T10 · Acessos e Meus acessos (a gaveta é a do wireframe: .body-under + .drawer; os campos são formulário de verdade, sem JavaScript) */
.t10-aberta { padding-right: 500px; }
.t10 a.tr:hover, .t10 a.ccli:hover { background: var(--dc-navy-soft); }
.t10 .tr.thd + .tr, .t10 .t10-fora .tr { border-top: 0; }
.t10-gaveta { overflow-y: auto; }
.t10-fecha { font-size: 16px; padding: 2px 6px; }
.t10-form { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; margin: 0; }
.t10-form .t10-enviar { margin-top: auto; }
.t10 input.fld { font: inherit; font-size: 14px; color: var(--ink); width: 100%; border-radius: 0; }
.t10 input.fld::placeholder { color: var(--ink-3); }
.t10 input.fld:focus { outline: 2px solid var(--dc-amber); outline-offset: -1px; border-color: var(--dc-navy); }
.t10-seg > label { flex: 1; text-align: center; padding: 6px 4px; font-size: 13px; border-left: 1.5px solid var(--dc-navy); white-space: nowrap; cursor: pointer; position: relative; }
.t10-seg > label:first-child { border-left: 0; }
.t10-seg > label:has(input:checked) { background: var(--dc-navy); color: #fff; font-weight: 600; }
.t10-seg > label:has(input:focus-visible) { outline: 2px solid var(--dc-amber); outline-offset: -3px; }
.t10-seg input, .t10-ck input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.t10-ck { cursor: pointer; position: relative; }
.t10-ck input:checked + .ck { background: var(--ink); }
.t10-ck input:checked + .ck::after { content: "✓"; color: var(--screen); }
.t10-ck input:focus-visible + .ck { outline: 2px solid var(--dc-amber); outline-offset: 1px; }
.t10-form:has(input[name="papel"]:not([value="atendimento"]):checked) .t10-clientes { opacity: .45; }
.t10-quebra { white-space: normal; }
.t10-tirar { display: flex; flex-direction: column; gap: 8px; }
.t10-tirar.row { flex-direction: row; }
.t10-tirar > summary { list-style: none; align-self: flex-start; }
.t10-tirar > summary::-webkit-details-marker { display: none; }
.t10-confirma { border: 1.5px solid var(--dc-amber); background: var(--dc-amber-soft); padding: 10px 12px; margin: 0; align-items: flex-start; }
.t10-fora { display: flex; flex-direction: column; gap: 6px; }
.t10-meus .tr { grid-template-columns: 170px minmax(0, 1fr); align-items: start; }
.t10-meus .tr:last-child { border-bottom: 0; }
@media (max-width: 760px) {
  .t10 .t10-form .fl.pr { padding-left: 0; }
  .t10-meus .tr { grid-template-columns: 1fr; gap: 4px; }
}
.t10-meus { max-width: 760px; }
/* T10 · a senha (07/10): a provisória que aparece uma vez, o selo de bloqueio e o bloco "Senha" da gaveta */
.t10-com-senha { gap: 10px; }
.t10-prov { border-top: 1.5px solid var(--line-2, #E5E7EB); padding-top: 10px; gap: 6px; align-items: flex-start; }
.t10-prov-senha { font-size: 22px; letter-spacing: .06em; color: var(--dc-navy); user-select: all; }
.t10-bloq { align-self: flex-start; margin-top: 3px; white-space: nowrap; }
.t10-senha { gap: 6px; }

/* T02 · Entrar, Esqueci minha senha e Trocar a senha (e-mail e senha, 07/10): os campos no cartão do wireframe */
.t02-form { display: flex; flex-direction: column; gap: 12px; margin: 0; text-align: left; }
.t02 input.fld { font: inherit; font-size: 16px; color: var(--ink); width: 100%; border-radius: 0; padding: 10px 12px; }
.t02 input.fld:focus { outline: 2px solid var(--dc-amber); outline-offset: -1px; border-color: var(--dc-navy); }
.t02 .t02-aviso { text-align: left; }
.t02-texto { margin: 0; text-align: left; }
.t02 .card > .lk { align-self: center; }
.t02-senha { max-width: 440px; }

/* T06 · Pendências (e o rótulo das caixas tracejadas, que T07 e T08 também usam) */
.box.st > .stl { position: absolute; top: -9px; left: 18px; background: var(--screen); padding: 0 6px; font: 600 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.pills > a.pl:hover { color: var(--ink); }
.t06-tr:hover, .t07-tr:hover { background: var(--dc-navy-soft); }
.t06-tr .dr { margin-left: 4px; }
.t06-seg > span { padding: 0; }
.t06-seg > span > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 6px 4px; color: inherit; text-align: center; }
.t06-outras .li a:hover b { text-decoration: underline; }
.t06-quais > summary, .t08-quais > summary { list-style: none; cursor: pointer; display: inline; }
.t06-quais > summary::-webkit-details-marker { display: none; }
.t06-quais[open] > summary { display: none; }
.t06-como { display: flex; flex-direction: column; gap: 6px; border-color: var(--dc-amber); }
.t06-cheia { padding: 22px; gap: 10px; }
a.ccli:hover { border-color: var(--dc-navy); }

/* T07 · Fornecedores e veículos */
.t07-seg > span { padding: 0; }
.t07-seg > span > a { display: block; padding: 6px 4px; color: inherit; text-align: center; }
.t07-nome { display: flex; align-items: center; gap: 6px; min-width: 0; }
.t07-nome .dr { flex: none; }
.t07-mais > summary { cursor: pointer; }
.t07-mais .menu { max-height: 320px; overflow-y: auto; }
.t07-aberto { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; border-color: var(--dc-navy); box-shadow: inset 4px 0 0 var(--dc-amber); }
.t07-aberto .tr { font-size: 13px; }
.app-pc .so-cel-in, .so-cel .so-pc-in { display: none; }
.t07-on { border-color: var(--dc-navy); background: var(--dc-navy-soft); }

/* T08 · Saúde dos dados */
.t08-ler { margin: 0; display: inline-flex; }
.t08-ler.full { display: flex; width: 100%; }
.t08-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.t08-achou { color: inherit; }
a.t08-achou:hover .t08-clamp { text-decoration: underline; text-decoration-color: var(--dc-navy-2); }
.t08-detalhe { scroll-margin-top: 16px; }
.t08-detalhe .li .sm { line-height: 1.45; }
.t08-erro { border-color: #DC2626; background: #FEF2F2; }
.t08-on { border-color: var(--dc-navy); background: var(--dc-navy-soft); }

/* T01 · o menu "Mais" e a página de filtros do celular */
.t01-mais { padding: 4px 6px; display: flex; flex-direction: column; }
.t01-mais .mi { display: block; padding: 12px 10px; border-bottom: 1px solid var(--line-2); border-radius: 0; font-size: 15px; }
.t01-mais .mi:last-child { border-bottom: 0; }
.t01-mais .mi:hover { background: var(--dc-navy-soft); }
.t01-filtros { gap: 12px; margin: 0; }
.t01-periodo { gap: 10px; align-items: stretch; }
.t01-periodo > .t01-campo { flex: 1; }
.t01-campo select.fld { font: inherit; font-size: 15px; color: var(--ink); border-radius: 0; appearance: auto; }
.t01-campo select.fld:focus { outline: 2px solid var(--dc-amber); outline-offset: -1px; border-color: var(--dc-navy); }

/* T03 · Visão geral (e as peças que T04 e T05 repetem: barras do mês que filtram, linhas que filtram, acordeões do celular) */
a.tr.t03-tr:hover, a.tr.t04-tr:hover { background: var(--dc-navy-soft); }
a.kp:hover { border-color: var(--dc-navy); }
a.vb:hover i { background: var(--dc-navy-2); }
a.vb.on:hover i { background: var(--dc-navy); }
.vb.fora { opacity: .45; }
a.t03-lk:hover .grow { text-decoration: underline; text-decoration-color: var(--dc-navy-2); }
.t03-lk.on .grow { font-weight: 600; color: var(--dc-navy); }
.t03-mais > summary, .t03-acc > summary, .t04-av > summary, .t04-mais > summary, .t04-camp > summary, .t05-bloco > summary, .t05-mais > summary { list-style: none; cursor: pointer; }
.t03-mais > summary::-webkit-details-marker, .t03-acc > summary::-webkit-details-marker, .t04-av > summary::-webkit-details-marker, .t04-mais > summary::-webkit-details-marker,
.t04-camp > summary::-webkit-details-marker, .t05-bloco > summary::-webkit-details-marker, .t05-mais > summary::-webkit-details-marker { display: none; }
.t03-mais[open] > summary { display: none; }
.t03-mais > .col { margin-top: 0; }
.t03-acc > .box, .t04-av > .box { border-top: 0; }
.t03-acc .chev::before, .t04-av .chev::before, .t04-camp .chev::before, .t05-bloco .chev::before { content: "▸"; }
.t03-acc[open] .chev::before, .t04-av[open] .chev::before, .t04-camp[open] > summary .chev::before, .t05-bloco[open] > summary .chev::before { content: "▾"; }
.t03-acc .vbars { gap: 4px; }

/* T04 · Cliente */
.t04-mais > summary { padding: 6px 0; }
.t04-mais[open] > summary { display: none; }
.t04-camp > summary.tr { cursor: pointer; }
.t04-camp > summary.tr:hover { background: var(--dc-navy-soft); }
.t04-camp-in { padding: 2px 0 8px 14px; border-left: 3px solid var(--dc-amber); margin-bottom: 4px; }
.t04-troca { display: block; }
.t04-troca > .menu { max-height: 340px; overflow-y: auto; right: 0; }
.t04-av .li { line-height: 1.45; }

/* T05 · Orçamento (gaveta no computador, tela cheia no celular) */
.t05-sob { pointer-events: none; user-select: none; }
.gaveta-fundo.t05-fundo { background: transparent; top: 54px; left: 232px; }
.gaveta.t05-gaveta { box-shadow: -8px 0 0 var(--fill); }
.t05-x { font-size: 15px; padding: 2px 6px; color: var(--ink); }
.t05-x:hover { color: var(--dc-navy); }
.t05-bloco { display: block; border: 1.5px solid var(--line); padding: 12px 14px; background: var(--screen); min-width: 0; }
.t05-bloco > summary { display: flex; align-items: center; gap: 10px; min-width: 0; }
.t05-bloco > summary .xs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t05-bloco > summary .chev { color: var(--ink-2); flex: none; margin-left: 8px; font-size: 12px; }
.t05-bloco[open] { border-color: var(--dc-navy); box-shadow: inset 4px 0 0 var(--dc-amber); }
.t05-linhas { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.t05-linhas .tr { font-size: 13px; gap: 10px; padding: 8px 0; }
.t05-linhas .tr.thd { font-size: 12px; padding-bottom: 6px; }
.t05-mais > summary { margin-top: 6px; display: inline-block; }
.t05-mais[open] > summary { display: none; }
.t05-cel .t05-bloco { padding: 12px; }
.so-cel .mpg.t05-cel { padding-bottom: 18px; }
.so-cel:has(.t05-cel) > .mbar { display: none; }
@media (max-width: 760px) { .gaveta.so-pc, .gaveta-fundo.so-pc { display: none; } }

/* T09 · simulador do WhatsApp (só na bancada): a cara do WhatsApp Web do wireframe, com o formulário de verdade */
.t09-sim { background: #F0F2F5; }
.t09-quadro { display: flex; height: 100vh; max-width: 1360px; margin: 0 auto; background: var(--screen); border-inline: 1px solid var(--line); }
.t09-quadro .wacl { overflow-y: auto; }
.t09-quadro .wacl a.li:hover { background: var(--dc-navy-soft); }
.t09-quadro .wacl .li.on { background: #F0F2F5; border-radius: 0; padding-inline: 14px; }
.t09-chat { min-width: 0; }
.t09-chat .wa { overflow-y: auto; }
.t09-chat .bub { white-space: normal; overflow-wrap: anywhere; }
.t09-info { display: block; margin-top: 4px; font-size: 10.5px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 3px; }
.t09-form { margin: 0; }
.t09-form input.fld { font: inherit; font-size: 14px; border-radius: 0; color: var(--ink); flex: 1; min-width: 0; }
.t09-chat .bub { max-width: min(86%, 640px); }
.t09-form input.fld:focus { outline: 2px solid var(--dc-amber); outline-offset: -1px; }
.t09-op { gap: 4px; white-space: nowrap; cursor: pointer; }
.t09-chat .wah form { margin: 0; }
@media (max-width: 760px) {
  .t09-quadro { flex-direction: column; height: auto; min-height: 100vh; }
  .t09-quadro .wacl { width: auto; max-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }
  .t09-chat .wa { min-height: 60vh; }
  .t09-form { flex-wrap: wrap; }
  .t09-form input.fld { flex: 1 1 100%; }
  .t09-chat .bub { max-width: 90%; }
}

/* T11 · Perguntas no WhatsApp */
.t11-form { margin: 0; }
.t11-form .b[disabled] { opacity: .5; cursor: progress; }
.t11 .tr:last-child { border-bottom: 0; }
.t11-vazio { padding: 18px 0 8px; }
.t11-erro { border-color: #DC2626; background: #FEF2F2; border-radius: 0; }
.t11-erro b { color: #B91C1C; }
.t11-erradas { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.t11-faixa { border-radius: 0; }
.t11 .ccli .row .sp { min-width: 8px; }