/* Pedidos de autorização (assets/autorizacoes-painel.js): o mesmo card para o vendedor e para o supervisor. */

/* Venda: preço editável, aviso do desconto e botão de alterar o total */
#painel #varejo-carrinho td small { display: block; margin-top: 3px; color: var(--pal-736c80, #736c80); font-size: 11px; white-space: nowrap; text-align: right; }
#painel .varejo-alterar-total { width: 100%; margin-top: 8px; }
#painel .varejo-desconto-situacao { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; }
#painel .varejo-desconto-situacao.ok { background: #eef8f1; color: #22653a; }
#painel .varejo-desconto-situacao.autorizado { background: #eef8f1; color: #22653a; font-weight: 600; }
#painel .varejo-desconto-situacao.precisa { background: #fff6e5; color: #8a4f07; }

/* Janela */
#painel .autorizacao-dialogo { width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; background: transparent; overflow: visible; }
#painel .autorizacao-dialogo::backdrop { background: rgba(23, 19, 38, .45); }
#painel .autorizacao-card { max-height: calc(100dvh - 24px); overflow-y: auto; }
#painel .autorizacao-card .dialogo-cliente-os-cabecalho { align-items: flex-start; gap: 16px; }

/* Quem pediu, cliente e hora */
#painel .autorizacao-quem { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 14px 0 10px; }
#painel .autorizacao-quem span { display: block; color: var(--pal-736c80, #736c80); font-size: 12px; }
#painel .autorizacao-quem strong { font-size: 15px; }
#painel .autorizacao-regra { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: #fff6e5; color: #8a4f07; font-size: 13px; font-weight: 600; }

/* Itens */
#painel .autorizacao-tabela { max-height: 240px; overflow-y: auto; border: 1px solid var(--pal-ded4ef, #ded4ef); border-radius: 12px; }
#painel .autorizacao-tabela table { width: 100%; border-collapse: collapse; font-size: 13px; }
#painel .autorizacao-tabela th { position: sticky; top: 0; padding: 8px 10px; background: #f6f2fd; color: var(--pal-736c80, #736c80); font-size: 11px; text-align: left; text-transform: uppercase; letter-spacing: .03em; }
#painel .autorizacao-tabela td { padding: 8px 10px; border-top: 1px solid #f0ebf8; vertical-align: top; }
#painel .autorizacao-tabela .num { text-align: right; white-space: nowrap; }
#painel .autorizacao-tabela td small { display: block; color: var(--pal-736c80, #736c80); font-size: 11px; }
#painel .autorizacao-abaixo td { background: #fff8ec; }
#painel .autorizacao-tag-abaixo { color: #a14a06 !important; font-weight: 700; }

#painel .autorizacao-prejuizo td { background: #fdeef0; }
#painel .autorizacao-negativo strong { color: #a12f45; }
#painel .autorizacao-baixa strong { color: #a14a06; }

/* Para decidir (só o supervisor) */
#painel .autorizacao-decidir { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 12px 0 0; padding: 12px 14px; border: 1px solid #d9eedf; border-radius: 12px; background: #f4fbf6; }
#painel .autorizacao-decidir.prejuizo { border-color: #f1cbd1; background: #fff6f7; }
#painel .autorizacao-decidir span { display: block; color: var(--pal-736c80, #736c80); font-size: 12px; }
#painel .autorizacao-decidir strong { font-size: 15px; }
#painel .autorizacao-decidir small { display: block; color: var(--pal-736c80, #736c80); font-size: 12px; }
#painel .autorizacao-decidir small b { color: #a12f45; }
#painel .autorizacao-alerta-prejuizo { grid-column: 1 / -1; margin: 0; color: #a12f45; font-weight: 700; }

/* Totais */
#painel .autorizacao-totais { display: grid; gap: 6px; margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: #f8f6fc; }
#painel .autorizacao-totais div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
#painel .autorizacao-totais dt { color: var(--pal-736c80, #736c80); }
#painel .autorizacao-totais dd { margin: 0; font-weight: 600; }
#painel .autorizacao-destaque dd { color: var(--pal-6b56d6, #6b56d6); }
#painel .autorizacao-destaque dd span { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #ece6fb; font-size: 12px; }
#painel .autorizacao-falta dd { color: #a14a06; }
#painel .autorizacao-total { padding-top: 6px; border-top: 1px solid var(--pal-ded4ef, #ded4ef); }
#painel .autorizacao-total dt, #painel .autorizacao-total dd { color: var(--pal-2b2541, #2b2541); font-size: 16px; font-weight: 700; }

/* Motivo (supervisor) e formulários */
#painel .autorizacao-motivo { margin: 0 0 12px; padding: 10px 12px; border-left: 4px solid var(--pal-6b56d6, #6b56d6); border-radius: 8px; background: #faf8fe; }
#painel .autorizacao-motivo span { color: var(--pal-736c80, #736c80); font-size: 12px; }
#painel .autorizacao-motivo p { margin: 2px 0 0; font-size: 15px; }
#painel .autorizacao-card .autorizacao-form { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
#painel .autorizacao-card .autorizacao-form > * { grid-column: 1 / -1; }
#painel .autorizacao-form label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; }
#painel .autorizacao-form textarea, #painel .autorizacao-form input:not([type="radio"]) { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border: 1px solid var(--pal-ded4ef, #ded4ef); border-radius: 10px; font: inherit; font-weight: 400; }

/* Escolha do supervisor */
#painel .autorizacao-supervisores { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
#painel .autorizacao-supervisores legend { margin-bottom: 6px; font-size: 12px; font-weight: 600; }
#painel .autorizacao-supervisor { position: relative; display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px !important; padding: 10px 12px; border: 2px solid var(--pal-ded4ef, #ded4ef); border-radius: 12px; cursor: pointer; }
#painel .autorizacao-supervisor input { position: absolute; opacity: 0; }
#painel .autorizacao-supervisor strong { font-size: 14px; }
#painel .autorizacao-supervisor small { grid-column: 2; color: #22653a; font-weight: 500; }
#painel .autorizacao-ponto { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: #2f9e5b; box-shadow: 0 0 0 3px #dff3e7; }
#painel .autorizacao-supervisor:has(input:checked) { border-color: var(--pal-6b56d6, #6b56d6); background: #f6f2fd; }
#painel .autorizacao-supervisor:has(input:focus-visible) { outline: 3px solid var(--pal-6b56d6, #6b56d6); outline-offset: 2px; }
#painel .autorizacao-supervisor.ausente { opacity: .55; cursor: not-allowed; }
#painel .autorizacao-supervisor.ausente .autorizacao-ponto { background: #b9b3c6; box-shadow: none; }
#painel .autorizacao-supervisor.ausente small { color: var(--pal-736c80, #736c80); }
#painel .autorizacao-vazio { grid-column: 1 / -1; margin: 0; color: #8a4f07; font-size: 13px; }

/* Situação do pedido */
#painel .autorizacao-status { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; }
#painel .autorizacao-status.aguardando { background: #f2eefc; color: var(--pal-6b56d6, #6b56d6); }
#painel .autorizacao-status.aguardando::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: autorizacao-gira .8s linear infinite; }
#painel .autorizacao-status.aprovado { background: #eef8f1; color: #22653a; }
#painel .autorizacao-status.recusado { background: #fdeef0; color: #a12f45; }
@keyframes autorizacao-gira { to { transform: rotate(360deg); } }
#painel .autorizacao-recusar { border-color: #f1cbd1; color: #a12f45; }

/* Fila do supervisor */
#painel .autorizacao-fila { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 50%; }
#painel .autorizacao-fila button { position: relative; display: grid; justify-items: center; min-width: 54px; padding: 6px 10px; border: 1px solid var(--pal-ded4ef, #ded4ef); border-radius: 10px; background: #fff; font: 700 14px inherit; cursor: pointer; }
#painel .autorizacao-fila button small { font-size: 10px; font-weight: 500; color: var(--pal-736c80, #736c80); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#painel .autorizacao-fila button[aria-pressed="true"] { border-color: var(--pal-6b56d6, #6b56d6); background: #f6f2fd; color: var(--pal-6b56d6, #6b56d6); }
#painel .autorizacao-novo { position: absolute; top: -8px; right: -6px; padding: 1px 6px; border-radius: 999px; background: #e0457b; color: #fff; font-size: 10px; font-weight: 700; animation: autorizacao-pulsa 1.4s ease-in-out infinite; }
#painel .autorizacao-aviso-novo { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: #fdeef4; color: #a12f5c; font-size: 13px; font-weight: 600; }
@keyframes autorizacao-pulsa { 50% { transform: scale(1.12); } }

/* Selo flutuante quando o supervisor deixa para decidir depois */
#painel .autorizacao-selo { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px;
  background: linear-gradient(120deg, var(--pal-6b56d6, #6b56d6), #a24bf0); color: #fff; font: 700 14px inherit; box-shadow: 0 10px 26px rgba(70, 40, 140, .35); cursor: pointer; }
#painel .autorizacao-selo span { color: #ffd6e5; animation: autorizacao-pulsa 1.4s ease-in-out infinite; }

@media (max-width: 620px) {
  #painel .autorizacao-fila { max-width: 100%; justify-content: flex-start; }
  #painel .autorizacao-card .dialogo-cliente-os-cabecalho { flex-direction: column; }
  #painel .autorizacao-card .dialogo-cliente-os-acoes { flex-direction: column-reverse; }
  #painel .autorizacao-card .dialogo-cliente-os-acoes button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #painel .autorizacao-novo, #painel .autorizacao-selo span, #painel .autorizacao-status.aguardando::before { animation: none; }
}
/* O supervisor vê mais colunas (custo, margem, estoque): janela mais larga */
#painel #autorizacao-supervisor { width: min(980px, calc(100vw - 24px)); }