/* EB Despesas e Reembolso: identidade Edson Braga (verde-escuro, grafite e cobre) sobre o layout do MeuCFO.
   Claro e escuro pelo sistema, ou pela escolha do usuário (data-tema no <html>). */

@font-face { font-family: "Cormorant Garamond"; src: url("/marca/fontes/CormorantGaramond-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/marca/fontes/CormorantGaramond-SemiBold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }

:root {
  color-scheme: light dark;
  --verde: #26383A;
  --grafite: #2B2B2B;
  --lavado: #131A1A;
  --degrade-cobre: linear-gradient(135deg, #772C20 0%, #A6644C 38%, #E0A782 70%, #CE855D 100%);
  --fundo-1: light-dark(#FAFAFA, #131A1A);
  --fundo-2: light-dark(#E9EEEB, #1A2526);
  --halo-1: light-dark(#D6E3DD, #223436);
  --halo-2: light-dark(#F2E4DA, #2D221D);
  --texto: light-dark(#1E2A2B, #EDF1EF);
  --suave: light-dark(#5A6567, #9FAEAB);
  --linha: light-dark(rgba(38, 56, 58, .14), rgba(255, 255, 255, .12));
  --vidro: light-dark(rgba(255, 255, 255, .72), rgba(38, 56, 58, .48));
  --vidro-forte: light-dark(rgba(255, 255, 255, .92), rgba(27, 41, 43, .94));
  --vidro-borda: light-dark(rgba(255, 255, 255, .95), rgba(255, 255, 255, .09));
  --campo: light-dark(rgba(255, 255, 255, .92), rgba(19, 26, 26, .62));
  --marca: light-dark(#26383A, #E0A782);
  --sobre-marca: light-dark(#FFFFFF, #131A1A);
  --marca-suave: light-dark(rgba(38, 56, 58, .09), rgba(224, 167, 130, .14));
  --cobre: light-dark(#A6644C, #E0A782);
  --ok: light-dark(#2B6B55, #7CD1A8);
  --ok-fundo: light-dark(rgba(43, 107, 85, .12), rgba(124, 209, 168, .14));
  --aviso: light-dark(#A5531B, #F0A262);
  --aviso-fundo: light-dark(rgba(196, 107, 38, .13), rgba(240, 162, 98, .15));
  --erro: light-dark(#B42318, #F58A7E);
  --erro-fundo: light-dark(rgba(180, 35, 24, .09), rgba(245, 138, 126, .14));
  --azul: light-dark(#2B5C8A, #8DB8E8);
  --azul-fundo: light-dark(rgba(43, 92, 138, .11), rgba(141, 184, 232, .15));
  --sombra: light-dark(0 10px 34px rgba(38, 56, 58, .09), 0 10px 34px rgba(0, 0, 0, .38));
  --trilho: 64px;
  /* Gráficos: cinco cores categóricas validadas para daltonismo (claro e escuro) e uma neutra; série única em cobre. */
  --serie-1: light-dark(#2a78d6, #3987e5);
  --serie-2: light-dark(#c4622d, #d27443);
  --serie-3: light-dark(#1f9e7a, #199e70);
  --serie-4: light-dark(#d99a00, #c98500);
  --serie-5: light-dark(#a8527c, #cf6f9b);
  --serie-neutra: light-dark(#a3acaa, #5f6b69);
  --barra-unica: light-dark(#A6644C, #E0A782);
}
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--texto);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1100px 620px at 8% -8%, var(--halo-1), transparent 62%),
    radial-gradient(900px 520px at 104% 2%, var(--halo-2), transparent 58%),
    linear-gradient(180deg, var(--fundo-1), var(--fundo-2));
  background-attachment: fixed;
}
a { color: var(--cobre); }
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: .005em; }
h1 { font-size: 2.15rem; line-height: 1.1; margin: 0; }
h2 { font-size: 1.4rem; margin: 0 0 .7rem; display: flex; align-items: center; gap: .4rem; }
h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.suave { color: var(--suave); }
.pequeno { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cobre); outline-offset: 2px; }

/* ------------------------------------------------------------ Trilho de ícones (barra inferior no celular) */
.trilho {
  position: fixed; left: 14px; top: 14px; bottom: 14px; width: var(--trilho); z-index: 30; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px; padding: 14px 10px;
  background: linear-gradient(185deg, #2D4244 0%, var(--verde) 46%, #1B2A2C 100%);
  border-radius: 24px; box-shadow: 0 14px 40px rgba(19, 26, 26, .35), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: width .22s ease;
}
.trilho:hover, .trilho:focus-within, .trilho.aberto { width: 252px; }
.trilho-marca { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 9px; margin-bottom: 8px; text-decoration: none; color: #F3C9A9; white-space: nowrap; }
.trilho-marca img { width: 28px; height: 34px; flex: none; }
.trilho-marca span { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.12rem; line-height: 1.05; opacity: 0; transition: opacity .15s; }
.trilho-itens { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.trilho .item {
  display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 12px; flex: none; border-radius: 15px;
  color: #BFCBC9; text-decoration: none; white-space: nowrap; background: none; border: 0; font: inherit; font-weight: 500; cursor: pointer; width: 100%; text-align: left;
}
.trilho .item svg { flex: none; }
.trilho .item .rotulo { opacity: 0; transition: opacity .15s; }
.trilho:hover .rotulo, .trilho:focus-within .rotulo, .trilho.aberto .rotulo, .trilho:hover .trilho-marca span, .trilho:focus-within .trilho-marca span, .trilho.aberto .trilho-marca span { opacity: 1; }
.trilho .item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.trilho .item.ativo { background: rgba(224, 167, 130, .17); color: #F3C9A9; }
.trilho-pe { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .09); }
.trilho .quem { display: flex; align-items: center; gap: 12px; padding: 6px 8px 0; color: #BFCBC9; font-size: .8rem; white-space: nowrap; line-height: 1.2; }
.trilho .quem .inicial { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--degrade-cobre); color: #fff; font-weight: 700; font-size: .85rem; }
.trilho .quem .nomes { opacity: 0; transition: opacity .15s; overflow: hidden; text-overflow: ellipsis; }
.trilho:hover .nomes, .trilho:focus-within .nomes, .trilho.aberto .nomes { opacity: 1; }
.trilho .quem strong { display: block; color: #fff; font-weight: 600; }
.so-celular { display: none !important; }

.tela { max-width: 1180px; margin: 0 auto; padding: 1.6rem 18px 7rem calc(var(--trilho) + 52px); }
body.sem-trilho .tela { padding-left: 18px; }
.carregando { color: var(--suave); }

.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.cabecalho .acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.saudacao { font-size: 2.4rem; }
.selo-teste { background: var(--aviso-fundo); color: var(--aviso); border-radius: 8px; padding: .1rem .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }

/* ------------------------------------------------------------ Cartões de vidro */
.cartao {
  background: var(--vidro); border: 1px solid var(--vidro-borda); border-radius: 24px; box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35);
  padding: 1.15rem 1.3rem; margin-bottom: 1rem;
}
.cartao.com-pendencia { border-color: var(--erro); box-shadow: 0 0 0 3px var(--erro-fundo), var(--sombra); }
.nota-pendencia { background: var(--erro-fundo); color: var(--erro); border-radius: 12px; padding: .45rem .7rem; font-size: .88rem; margin: -.1rem 0 .75rem; font-weight: 500; }
.pendente input, .pendente select, .pendente textarea { border-color: var(--erro); background: var(--erro-fundo); }
.pendencias { border-color: var(--erro); background: var(--erro-fundo); }
.pendencias.resolvidas { border-color: var(--linha); background: var(--vidro); }
.pendencias h2 { color: var(--erro); }
.pendencias.resolvidas h2 { color: var(--suave); }
.pendencias ul { margin: .4rem 0; padding-left: 1.2rem; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.indicador { background: var(--vidro); border: 1px solid var(--vidro-borda); border-radius: 24px; padding: 1rem 1.2rem; box-shadow: var(--sombra); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.indicador .rotulo { color: var(--suave); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.indicador .valor { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1.05; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.indicador.alerta { border-color: var(--erro); }
.indicador.alerta .valor { color: var(--erro); }
.info { background: var(--marca-suave); border-radius: 16px; padding: .65rem .9rem; font-size: .9rem; margin-bottom: 1rem; }
.aviso-cartao { background: var(--aviso-fundo); color: var(--aviso); border-radius: 16px; padding: .65rem .9rem; font-size: .9rem; margin-bottom: 1rem; font-weight: 500; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.duas-colunas > .cartao { margin-bottom: 0; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--linha); }
.lista-simples li:last-child { border-bottom: 0; }
.lista-simples .esq { min-width: 0; }

/* ------------------------------------------------------------ Botões */
button, .botao {
  font: inherit; font-weight: 600; cursor: pointer; color: var(--texto);
  border: 1px solid var(--linha); background: var(--vidro-forte); border-radius: 14px; padding: .5rem .95rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px;
}
button:hover, .botao:hover { border-color: var(--cobre); }
button:disabled { opacity: .5; cursor: not-allowed; }
.principal { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.principal:hover { filter: brightness(1.12); border-color: var(--marca); }
.cobre { background: var(--degrade-cobre); border-color: transparent; color: #fff; }
.cobre:hover { filter: brightness(1.07); border-color: transparent; }
.perigo { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 45%, var(--linha)); }
.perigo:hover { background: var(--erro-fundo); border-color: var(--erro); }
.perigo-cheio { background: var(--erro); border-color: var(--erro); color: #fff; }
.pequeno-btn { padding: .25rem .65rem; min-height: 32px; font-size: .85rem; border-radius: 11px; }
.icone-btn { padding: 0; width: 38px; min-height: 38px; justify-content: center; border-radius: 50%; }
.link { border: 0; background: none; color: var(--cobre); padding: 0; min-height: 0; font-weight: 500; }

/* ------------------------------------------------------------ Formulários */
label { display: block; font-size: .83rem; color: var(--suave); font-weight: 600; }
input, select, textarea {
  font: inherit; color: var(--texto); background: var(--campo); border: 1px solid var(--linha);
  border-radius: 12px; padding: .5rem .7rem; width: 100%; margin-top: .22rem; min-height: 42px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--cobre) 60%, transparent); border-color: var(--cobre); }
input:disabled, select:disabled, textarea:disabled { opacity: .72; }
input[type=checkbox], input[type=radio] { width: 19px; height: 19px; min-height: 0; margin: 0; accent-color: var(--verde); flex: none; }
.marcar { display: flex; align-items: center; gap: .55rem; color: var(--texto); font-size: .95rem; font-weight: 500; margin: .4rem 0; }
.grade { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grade + .grade, .grade + label, label + .grade { margin-top: .8rem; }
.largo { grid-column: 1 / -1; }
.contador { font-size: .8rem; text-align: right; color: var(--suave); }
.contador.passou { color: var(--erro); }
.contador.ok { color: var(--ok); }
.frase { background: var(--marca-suave); border-radius: 12px; padding: .5rem .75rem; font-size: .9rem; margin-top: .5rem; }
.erro-texto { color: var(--erro); font-size: .9rem; margin: .4rem 0; }

.ponto { border: 1px solid var(--linha); border-radius: 18px; padding: .85rem; margin-bottom: .8rem; }
.ponto h3 { display: flex; align-items: center; gap: .5rem; }
.letra { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--verde); color: #fff; font: 700 .8rem -apple-system, "Segoe UI", sans-serif; }
.letra.b { background: var(--cobre); }
.km-linha { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.km-linha label { width: 130px; }
.km-linha .igual { font-size: 1.15rem; font-weight: 700; padding-bottom: .55rem; }
.mapa-previa { width: 100%; border-radius: 16px; border: 1px solid var(--linha); margin-top: .75rem; display: block; }

.despesa { border: 1px solid var(--linha); border-radius: 18px; padding: .85rem; margin-bottom: .8rem; }
.despesa.pendente { border-color: var(--erro); }
.despesa .topo-despesa { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.numero { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 9px; background: var(--marca-suave); font-weight: 700; font-size: .85rem; }
.anexo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; font-size: .9rem; }
.anexo .nome { overflow-wrap: anywhere; }
.arquivo-btn { position: relative; overflow: hidden; }
.arquivo-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; }
.lista-alvos { max-height: 50vh; overflow: auto; margin: .6rem 0; }
.alvo { border-bottom: 1px solid var(--linha); padding: .4rem 0; }
.alvo textarea { margin-top: .3rem; }
.escolha-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .2rem .8rem; }

/* ------------------------------------------------------------ Quadro de prestação de contas */
.quadro { width: 100%; border-collapse: collapse; font-size: .92rem; }
.quadro td { padding: .35rem .2rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.quadro tr.total td { font-weight: 700; border-bottom: 0; }
.saldo { border-radius: 18px; padding: .85rem 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .8rem; border: 2px solid; }
.saldo .valor { white-space: nowrap; font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.2rem; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.saldo.aReceber { border-color: var(--ok); background: var(--ok-fundo); color: var(--ok); }
.saldo.aDevolver { border-color: var(--aviso); background: var(--aviso-fundo); color: var(--aviso); }
.saldo.quitado { border-color: var(--linha); background: var(--marca-suave); color: var(--suave); }
.alertas { list-style: none; padding: 0; margin: .8rem 0 0; font-size: .9rem; }
.alertas li { padding: .4rem .7rem; border-radius: 12px; margin-bottom: .3rem; }
.alertas .erro { background: var(--erro-fundo); color: var(--erro); }
.alertas .aviso { background: var(--aviso-fundo); color: var(--aviso); }

/* Barra de ações fixa */
.barra {
  position: fixed; left: calc(var(--trilho) + 40px); right: 14px; bottom: 14px; z-index: 20;
  background: var(--vidro-forte); border: 1px solid var(--vidro-borda); border-radius: 22px; box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  padding: .6rem .9rem; display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; align-items: center;
}
.barra .resumo-barra { margin-right: auto; font-size: .9rem; }

/* ------------------------------------------------------------ Tabelas e selos */
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); padding: .45rem .5rem; border-bottom: 1px solid var(--linha); }
.tabela td { padding: .6rem .5rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .acoes { display: flex; gap: .35rem; justify-content: flex-end; }
.tabela td:first-child a { white-space: nowrap; font-weight: 600; }
.selo { display: inline-block; border-radius: 999px; padding: .1rem .65rem; font-size: .76rem; font-weight: 700; white-space: nowrap; background: var(--marca-suave); color: var(--suave); }
.s-rascunho { background: var(--marca-suave); color: var(--suave); }
.s-enviado { background: var(--azul-fundo); color: var(--azul); }
.s-pendente { background: var(--erro-fundo); color: var(--erro); }
.s-aprovado, .s-aprovada { background: var(--ok-fundo); color: var(--ok); }
.s-pago, .s-concluida { background: var(--degrade-cobre); color: #fff; }
.s-indeferida { background: var(--erro); color: #fff; }
.s-cancelada { background: var(--marca-suave); color: var(--suave); text-decoration: line-through; }
.cor-aReceber { color: var(--ok); }
.cor-aDevolver { color: var(--aviso); }
.cor-quitado { color: var(--suave); }
.vazio { text-align: center; padding: 2.5rem 1rem; color: var(--suave); }
.filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filtros label { min-width: 150px; }

.historico { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.historico li { padding: .4rem 0; border-bottom: 1px solid var(--linha); }
.historico li:last-child { border-bottom: 0; }
.ficha { display: grid; grid-template-columns: 11rem 1fr; gap: .25rem .9rem; margin: 0; font-size: .92rem; }
.ficha dt { color: var(--suave); font-weight: 600; }
.ficha dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ Entrada */
.logo-texto { display: block; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.entrar { max-width: 520px; margin: 6vh auto 2rem; text-align: center; padding: 2rem 1.8rem; }
.entrar .logo-texto { --logo: url("/marca/logo-grafite.svg"); width: 190px; height: 130px; margin: 0 auto 1rem; color: var(--texto); }
.entrar h1 { font-size: 1.9rem; }
.entrar .metodos { display: grid; gap: .6rem; margin: 1.2rem 0; text-align: left; }
.entrar .metodos .botao, .entrar .metodos button { justify-content: center; min-height: 46px; }
.entrar form { text-align: left; display: grid; gap: .7rem; margin-top: .8rem; }
.entrar .separador { color: var(--suave); font-size: .82rem; margin: .8rem 0 0; }
.entrar .usuario { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--linha); text-align: left; }
.entrar .usuario:last-child { border-bottom: 0; }

/* ------------------------------------------------------------ Diálogos e avisos */
dialog.dialogo {
  color: var(--texto); background: var(--vidro-forte); border: 1px solid var(--vidro-borda); border-radius: 26px; box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
  padding: 0; width: min(520px, 94vw); max-height: 90vh; overflow: hidden;
}
dialog.dialogo.largo { width: min(760px, 94vw); }
dialog.dialogo::backdrop { background: rgba(19, 26, 26, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialogo-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.2rem .2rem; }
.dialogo-topo h2 { margin: 0; font-size: 1.6rem; }
.dialogo-corpo { padding: .4rem 1.2rem 1.2rem; overflow: auto; max-height: calc(90vh - 70px); }
.acoes-dialogo { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1rem; }

.toast {
  position: fixed; left: 50%; bottom: 5.8rem; transform: translateX(-50%); z-index: 60;
  background: var(--verde); color: #fff; padding: .7rem 1.1rem; border-radius: 16px; max-width: min(92vw, 560px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3); font-size: .92rem;
}
.toast.ruim { background: var(--erro); color: #fff; }
:root[data-tema="escuro"] .toast:not(.ruim) { background: #E0A782; color: #131A1A; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .toast:not(.ruim) { background: #E0A782; color: #131A1A; } }

.ajuda details { border-bottom: 1px solid var(--linha); padding: .6rem 0; }
.ajuda summary { cursor: pointer; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.3rem; }
.ajuda ol, .ajuda ul { padding-left: 1.3rem; margin: .4rem 0; }
.ajuda li { margin: .25rem 0; }

/* ------------------------------------------------------------ Celular: trilho vira barra inferior, tabelas viram cartões */
@media (max-width: 760px) {
  .trilho, .trilho:hover, .trilho:focus-within, .trilho.aberto {
    left: 10px; right: 10px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; height: 64px;
    flex-direction: row; align-items: center; justify-content: space-around; padding: 6px 8px; border-radius: 22px; gap: 2px;
  }
  .trilho-marca, .trilho-pe, .so-desktop { display: none !important; }
  .trilho-itens { flex-direction: row; justify-content: space-around; overflow: visible; }
  .trilho .item { flex-direction: column; justify-content: center; gap: 2px; height: 50px; padding: 0 4px; flex: 1; width: auto; min-width: 0; border-radius: 14px; align-items: center; }
  .trilho .item .rotulo { opacity: 1; font-size: .66rem; }
  .trilho .item.escondido-celular { display: none; }
  .so-celular { display: flex !important; }
  .tela { padding: 1rem 14px 15rem; }
  h1 { font-size: 1.8rem; }
  .saudacao { font-size: 2rem; }
  .barra { left: 10px; right: 10px; bottom: calc(82px + env(safe-area-inset-bottom)); }
  .barra button, .barra .botao { flex: 1; justify-content: center; }
  .barra .resumo-barra { width: 100%; }
  .toast { bottom: 11rem; }
  .ficha { grid-template-columns: 1fr; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { border: 1px solid var(--linha); border-radius: 18px; padding: .5rem .8rem; margin-bottom: .6rem; background: var(--vidro); }
  .tabela td { border: 0; padding: .2rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .tabela td::before { content: attr(data-rotulo); color: var(--suave); font-size: .82rem; text-align: left; }
  .tabela td.acoes { justify-content: flex-start; padding-top: .5rem; flex-wrap: wrap; }
  .tabela td.acoes::before { content: none; }
  .cartao.tabela-cartao { background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .duas-colunas { grid-template-columns: 1fr; }
  .indicadores { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .indicador { padding: .75rem .85rem; border-radius: 20px; }
  .indicador .rotulo { font-size: .7rem; }
}
@media print { .trilho, .barra, .toast { display: none !important; } .tela { padding: 0; } }

label.espaco-acima { margin-top: .8rem; }

/* Campos de valor (R$ e km) e campos desativados */
.campo-moeda { position: relative; display: flow-root; }
.campo-moeda .prefixo { position: absolute; left: .75rem; top: calc(.22rem + 21px); transform: translateY(-50%); color: var(--suave); font-weight: 600; font-size: .85rem; pointer-events: none; }
.campo-moeda input { padding-left: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; }
input:disabled, select:disabled, textarea:disabled { background: color-mix(in srgb, var(--suave) 16%, transparent); color: var(--suave); opacity: 1; cursor: not-allowed; }
.campo-moeda.desativado .prefixo { opacity: .5; }
.ajuste-item { border: 1px solid var(--erro); border-radius: 16px; padding: .7rem .85rem; margin-bottom: .6rem; background: var(--erro-fundo); }
.ajuste-item textarea { background: var(--campo); }
.ajuste-item .acoes { display: flex; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }
.filtros-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; }

/* ------------------------------------------------------------ Gráficos */
.dica { position: fixed; z-index: 80; background: var(--vidro-forte); color: var(--texto); border: 1px solid var(--linha); border-radius: 12px; padding: .45rem .7rem; font-size: .82rem; box-shadow: var(--sombra); pointer-events: none; max-width: 300px; }
.dica-titulo { font-weight: 700; }
.grafico-rosca { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.rosca { width: 170px; height: 170px; flex: none; }
.rosca-fundo { stroke: var(--marca-suave); }
.rosca-fatia { transition: opacity .15s; outline: none; }
.rosca-fatia:hover, .rosca-fatia:focus { opacity: .8; }
.rosca-centro { font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-weight: 600; fill: var(--texto); }
.rosca-sub { font-size: 11px; fill: var(--suave); }
.legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 210px; display: grid; gap: .35rem; }
.legenda li { display: grid; grid-template-columns: 12px 1fr auto; gap: .55rem; align-items: center; font-size: .88rem; }
.legenda li.apagado { opacity: .45; }
.amostra { width: 12px; height: 12px; border-radius: 4px; }
.leg-valor { color: var(--suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.grafico-colunas svg { width: 100%; height: auto; display: block; overflow: visible; }
.coluna-barra { fill: var(--barra-unica); }
.coluna { outline: none; }
.coluna:hover .coluna-barra, .coluna:focus .coluna-barra { filter: brightness(1.15); }
.coluna .alvo { fill: transparent; }
.linha-grade { stroke: var(--linha); stroke-dasharray: 3 4; }
.eixo { stroke: var(--suave); stroke-width: 1; }
.eixo-texto { font-size: 11px; fill: var(--suave); }
.rotulo-valor { font-size: 11px; font-weight: 700; fill: var(--texto); }
.barras { display: grid; gap: .2rem; }
.barra-linha { display: grid; grid-template-columns: minmax(110px, 32%) 1fr auto; gap: .7rem; align-items: center; font-size: .88rem; padding: .25rem .35rem; border-radius: 10px; outline: none; }
.barra-linha.clicavel { cursor: pointer; }
.barra-linha:hover, .barra-linha:focus { background: var(--marca-suave); }
.barra-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-texto { color: var(--suave); font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trilho-barra { height: 10px; border-radius: 6px; background: var(--marca-suave); overflow: hidden; }
.trilho-barra > span { display: block; height: 100%; background: var(--barra-unica); border-radius: 0 4px 4px 0; }
.divergente { display: grid; gap: .15rem; }
.div-cabecalho, .div-linha { display: grid; grid-template-columns: 1fr minmax(150px, 32%) 1fr; gap: .7rem; align-items: center; }
.div-cabecalho { font-size: .75rem; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.div-cabecalho span:first-child { text-align: right; }
.div-linha { padding: .3rem .2rem; border-radius: 10px; outline: none; }
.div-linha:hover, .div-linha:focus { background: var(--marca-suave); }
.div-lado { display: flex; height: 12px; }
.div-lado.esq { justify-content: flex-end; }
.div-barra { display: block; height: 12px; }
.div-barra.devolver { background: var(--aviso); border-radius: 4px 0 0 4px; }
.div-barra.receber { background: var(--ok); border-radius: 0 4px 4px 0; }
.div-rotulo { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.25; border-left: 2px solid var(--linha); border-right: 2px solid var(--linha); padding: 0 .4rem; }
.filtros-cartao summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.filtros-cartao[open] summary { margin-bottom: .8rem; }
.barra-lote { display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; padding: .7rem 1rem; }
.barra-lote .acoes { display: flex; gap: .4rem; flex-wrap: wrap; }
.indicador .rotulo svg { vertical-align: -3px; }
@media (max-width: 760px) {
  .grafico-rosca { justify-content: center; }
  .barra-linha { grid-template-columns: 1fr; gap: .25rem; }
  .barra-linha .barra-rotulo { white-space: normal; }
  .barra-linha .barra-texto { white-space: normal; }
  .div-cabecalho { display: none; }
  .div-linha { grid-template-columns: 1fr; gap: .3rem; }
  .div-rotulo { order: -1; border: 0; align-items: flex-start; text-align: left; padding: 0; }
  .div-lado.esq { justify-content: flex-start; }
  .div-lado:empty { display: none; }
  .div-barra.devolver, .div-barra.receber { border-radius: 4px; }
}

/* Tabelas largas rolam dentro do cartão, nunca a página inteira. */
.tabela-cartao { overflow-x: auto; }
.tela { overflow-x: clip; }
.tabela .acoes-empilhadas { flex-direction: column; align-items: stretch; }
@media (min-width: 761px) and (max-width: 1100px) { .tabela { font-size: .86rem; } .tabela td, .tabela th { padding: .5rem .35rem; } }
.cartao.tabela-cartao > h2 { padding-left: .3rem; }

/* Logomarca Edson Braga (a mesma da tela de login) no topo do trilho: pequena fechado, maior aberto. */
.trilho-marca { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; height: auto; min-height: 52px; padding: 4px 0 6px 0; }
.logo-trilho { --logo: url("/marca/logo-branco.svg"); color: #F3C9A9; width: 44px; height: 30px; flex: none; transition: width .22s ease, height .22s ease; }
.trilho:hover .logo-trilho, .trilho:focus-within .logo-trilho, .trilho.aberto .logo-trilho { width: 132px; height: 90px; }
.trilho-marca .trilho-nome { font-size: .95rem; padding-left: 4px; }
.trilho-marca .logo-trilho { opacity: 1; }