/* Pedidos, Relatórios e Configurações (carregado por js/p-outros.js) */

/* ---------- pedidos ---------- */
.ped-lista > li { align-items: flex-start; }
.ped-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--verde-claro); color: var(--verde-esc); }
.ped-ic.qr_code { background: var(--azul-claro); color: var(--azul); }
.ped-ic .ic { width: 20px; height: 20px; }
.ped-lista .info small.ped-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--texto2); margin-top: 2px; }
.ped-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.ped-dir small { font-size: 12px; white-space: nowrap; }
@media (max-width: 560px) {
  .ped-lista > li { flex-wrap: wrap; padding: 12px 14px; }
  .ped-dir { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; padding-left: 50px; }
}

/* ---------- relatórios ---------- */
.rel-per .filtros { border-bottom: 0; }
.rel-per .seg { align-self: flex-end; }
.rel-card .card-corpo { padding: 16px 18px; }
.rel-card .card-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rel-card .tab-wrap { margin: -16px -18px; }
.kpi-pq { font-size: 14px; font-weight: 600; color: var(--texto3); }
.peq-v { padding: 24px 10px !important; font-size: 14px; }
.hbar .rot-h { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tec-n { display: inline-flex; align-items: center; gap: 8px; }
.tec-n i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cel-bar { position: relative; display: inline-block; min-width: 110px; padding: 2px 6px; text-align: right; z-index: 0; }
.cel-bar i { position: absolute; right: 0; top: 0; bottom: 0; background: var(--verde-claro); border-radius: 5px; z-index: -1; }
.mg { font-weight: 700; color: var(--verde-esc); }
.mg.baixa { color: var(--alerta); }
.vermelho { color: var(--perigo); font-weight: 700; }
.rosca { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rosca svg { width: 150px; height: 150px; flex: none; }
.rosca .r-n { font-size: 22px; font-weight: 800; fill: var(--texto); }
.rosca .r-s { font-size: 9.5px; fill: var(--texto3); }
.rosca ul { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; display: grid; gap: 4px; font-size: 13.5px; }
.rosca li { display: flex; align-items: center; gap: 8px; }
.rosca li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rosca li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.funil-v { display: grid; gap: 8px; }
.fv { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 10px; font-size: 13.5px; }
.fv-b { background: linear-gradient(90deg, var(--verde), #2fbf6b); color: #fff; border-radius: 8px; padding: 7px 10px; min-width: 40px; }
.fv span small { font-weight: 700; color: var(--verde-esc); }
.fv-pe { margin: 12px 0 0; font-size: 13.5px; }
.fin-res { border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; background: var(--verde-claro); }
.fin-res.neg { background: var(--perigo-claro); }
.fin-res small { display: block; color: var(--texto2); }
.fin-res b { font-size: 26px; font-weight: 800; color: var(--verde-esc); font-variant-numeric: tabular-nums; }
.fin-res.neg b { color: var(--perigo); }
.fin-l { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; margin-bottom: 8px; }
.fin-t { height: 12px; background: var(--fundo); border-radius: 99px; overflow: hidden; }
.fin-t i { display: block; height: 100%; background: var(--verde); border-radius: 99px; }
.fin-t i.azul { background: #3b82f6; }
.fin-t i.verm { background: #ef4444; }
.fin-l b { font-variant-numeric: tabular-nums; }
.mini-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-k > div { background: var(--fundo); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.mini-k b { font-size: 24px; font-weight: 800; }
.mini-k span { font-size: 12.5px; color: var(--texto2); }
.mini-k a { font-size: 12.5px; font-weight: 600; }
.mini-k .ruim b { color: var(--perigo); }
@media (max-width: 560px) {
  .fv { grid-template-columns: 1fr 110px; }
  .fin-l { grid-template-columns: 96px 1fr auto; }
  .mini-k b { font-size: 20px; }
  .rel-per .seg { width: 100%; }
  .rel-per .filtros .btn { flex: 1 1 100%; }
  .rosca svg { width: 120px; height: 120px; }
}
@media print {
  .rel-card { break-inside: avoid; }
  .rel-per { display: none; }
}

/* ---------- configurações ---------- */
.cfg-g { align-items: start; }
.cfg-estreito { max-width: 760px; }
.cfg-pe { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--borda2); background: #fbfcfb; border-radius: 0 0 var(--raio2) var(--raio2); }
.logo-box { min-height: 90px; border: 1px dashed var(--borda); border-radius: 12px; display: grid; place-items: center; padding: 10px; background: repeating-conic-gradient(#f6f8f7 0 25%, #fff 0 50%) 0 0/16px 16px; }
.logo-box img { max-height: 80px; max-width: 100%; object-fit: contain; }
.cor-l { display: flex; gap: 8px; align-items: center; }
.cor-l input:not([type=color]) { max-width: 120px; font-family: monospace; }
.prev-marca .pm { margin-top: 6px; display: flex; align-items: center; gap: 10px; color: #fff; padding: 12px 14px; border-radius: 12px; min-height: 52px; }
.prev-marca .pm img { max-height: 32px; max-width: 90px; background: #fff; border-radius: 6px; padding: 2px 4px; object-fit: contain; }
.prev-marca .pm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-l { display: flex; gap: 8px; align-items: stretch; }
.link-l input { flex: 1; min-width: 0; }
.link-l .btn { flex: none; }
.slug-pre span { font-size: 13px; white-space: nowrap; }
.slug-qr { width: 180px; max-width: 100%; margin: 0 auto 8px; }
.slug-qr svg { width: 100%; height: auto; display: block; }
.centro { text-align: center; }
.mt2 { margin-top: 22px !important; }
.teste-box { background: var(--fundo); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.autos { list-style: none; margin: 0 0 8px; padding: 0; }
.autos li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--borda2); }
.autos li > div { flex: 1; min-width: 0; }
.autos li b { display: block; }
.autos li small { display: block; color: var(--texto2); font-size: 13px; }
.chave { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; cursor: pointer; }
.chave input { opacity: 0; width: 0; height: 0; position: absolute; }
.chave span { position: absolute; inset: 0; background: #cbd5d0; border-radius: 99px; transition: background .15s; }
.chave span::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.chave input:checked + span { background: var(--verde); }
.chave input:checked + span::before { transform: translateX(20px); }
.chave input:focus-visible + span { box-shadow: 0 0 0 3px rgba(18,161,80,.3); }
.chave input:disabled + span { opacity: .6; }
.msgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start; }
.msgs .card + .card { margin-top: 0; }
.msg-card .card-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.msg-card .card-cab small { display: block; font-size: 12.5px; margin-top: 2px; }
.msg-card .card-corpo { padding: 12px 16px 14px; }
.vars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vars button { border: 1px solid var(--borda); background: #fff; border-radius: 99px; padding: 2px 10px; font-size: 12.5px; font-family: monospace; color: var(--verde-esc); cursor: pointer; }
.vars button:hover { background: var(--verde-claro); border-color: #bfe6cf; }
.prev-msg { margin-top: 10px; font-size: 13.5px; }
.prev-msg summary { cursor: pointer; color: var(--texto2); font-weight: 600; }
.bolha { margin-top: 8px; background: #dcf8c6; border-radius: 10px 10px 10px 2px; padding: 8px 10px; max-width: 360px; overflow-wrap: anywhere; color: #111; }
@media (max-width: 560px) {
  .link-l { flex-wrap: wrap; }
  .link-l input { flex: 1 1 100%; }
  .link-l .btn { flex: 1; }
  .slug-pre span { font-size: 12px; padding: 0 6px; }
}
#rel .grade > .card { margin-top: 0; }
#rel .grade + .grade, #rel .grade + .card, #rel .card + .grade { margin-top: 16px; }
.msg-card > .card-cab { flex-wrap: nowrap; }
.msg-card > .card-cab > div { min-width: 0; }