/* Painel do lojista com a identidade e-link. Carregado só em /painel/ (body.app-elink),
   depois de style.css e painel.css: redefine as variáveis que os componentes comuns usam
   (editor, formulários, mensagens) e acrescenta o layout novo. */

body.app-elink{
  /* Tokens e-link */
  --el-marinho:#0B2D5B;
  --el-azul:#2563EB;
  --el-azul-escuro:#1E40AF;
  --el-turquesa:#06D6C7;
  --el-fundo:#F5F8FF;
  --el-superficie:#FFFFFF;
  --el-texto:#1E293B;
  --el-suave:#64748B;
  --el-borda:#E2E8F0;
  --el-azul-claro:#EAF1FF;
  --el-sucesso:#16A34A;
  --el-atencao:#F59E0B;
  --el-erro:#DC2626;
  --el-sombra:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.05);
  --el-raio:16px;
  --el-raio-controle:10px;

  /* Variáveis usadas por style.css e painel.css, agora com as cores e-link */
  --tinta:var(--el-marinho);
  --acento:var(--el-azul);
  --acento-claro:var(--el-turquesa);
  --texto:var(--el-texto);
  --papel:var(--el-fundo);

  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--el-fundo);
  color:var(--el-texto);
}
body.app-elink :focus-visible{outline:3px solid var(--el-azul);outline-offset:2px}
.app-elink .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app-elink .dica,.app-elink .carregando{color:var(--el-suave)}
.app-elink h1,.app-elink h2,.app-elink h3{color:var(--el-marinho);letter-spacing:-.01em}

/* ---------------------------------------------------------------
   Botões
   --------------------------------------------------------------- */
.el-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-size:.95rem;line-height:1.2;padding:11px 18px;border-radius:var(--el-raio-controle);border:1.5px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.el-btn:disabled{opacity:.55;cursor:not-allowed}
.el-btn-primario{background:var(--el-azul);color:#fff}
.el-btn-primario:hover:not(:disabled){background:var(--el-azul-escuro)}
.el-btn-marinho{background:var(--el-azul-escuro);color:#fff}
.el-btn-marinho:hover:not(:disabled){background:var(--el-marinho)}
.el-btn-contorno{background:#fff;color:var(--el-azul-escuro);border-color:var(--el-azul)}
.el-btn-contorno:hover:not(:disabled){background:var(--el-azul-claro)}
.el-btn-grande{padding:14px 24px;font-size:1.02rem}
.el-btn-pequeno{padding:8px 14px;font-size:.88rem}
.el-btn-fantasma{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.88rem;font-weight:500;color:var(--el-texto);background:#F1F5F9;border:0;border-radius:var(--el-raio-controle);padding:8px 14px;cursor:pointer}
.el-btn-fantasma:hover{background:var(--el-azul-claro);color:var(--el-azul-escuro)}
.el-icone-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--el-suave);cursor:pointer;flex:none}
.el-icone-btn:hover{background:var(--el-azul-claro);color:var(--el-azul)}
.el-btn.copiado,.el-icone-btn.copiado{border-color:var(--el-sucesso);color:var(--el-sucesso);background:#ECFDF3}

/* Botões que já existiam (login, editor, balcão) com o raio e as cores novas */
.app-elink .botao,.app-elink .botao-sec{border-radius:var(--el-raio-controle);font-weight:600}
.app-elink .painel button.botao,.app-elink .editor button.botao{font-size:.98rem}
.app-elink .botao:hover{background:var(--el-azul-escuro)}

/* ---------------------------------------------------------------
   Cabeçalho
   --------------------------------------------------------------- */
.el-cabecalho{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;padding:0 28px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--el-borda)}
.el-logo-painel{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.el-marca{font-size:1.75rem;font-weight:700;color:var(--el-marinho);letter-spacing:-.03em;display:inline-flex;align-items:center}
.el-traco{display:inline-block;width:.42em;height:.16em;background:var(--el-turquesa);margin:0 .05em;border-radius:1px;transform:translateY(.05em)}
.el-cabecalho-acoes{display:flex;align-items:center;gap:14px}
.el-btn-admin{padding:9px 14px}

.el-conta{position:relative}
.el-conta summary{list-style:none;display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:12px;cursor:pointer;background:#F8FAFC;border:1px solid var(--el-borda)}
.el-conta summary::-webkit-details-marker{display:none}
.el-conta summary:hover{background:var(--el-azul-claro)}
.el-avatar{width:36px;height:36px;border-radius:50%;background:var(--el-azul-escuro);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.el-conta-nome{display:flex;flex-direction:column;line-height:1.2}
.el-conta-nome strong{color:var(--el-marinho);font-size:.95rem}
.el-conta-nome small{color:var(--el-suave);font-size:.78rem}
.el-conta-seta{color:var(--el-suave)}
.el-conta[open] .el-conta-seta{transform:rotate(180deg)}
.el-conta-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:#fff;border:1px solid var(--el-borda);border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.12);padding:6px;display:flex;flex-direction:column}
.el-conta-menu button{display:flex;align-items:center;gap:10px;font:inherit;font-size:.92rem;font-weight:500;color:var(--el-texto);background:none;border:0;border-radius:8px;padding:10px 12px;cursor:pointer;text-align:left}
.el-conta-menu button:hover{background:var(--el-azul-claro);color:var(--el-azul-escuro)}

/* ---------------------------------------------------------------
   Estrutura: menu lateral + conteúdo
   --------------------------------------------------------------- */
.el-app{display:flex;min-height:calc(100vh - 72px)}
.el-lateral{width:260px;flex:none;background:#fff;border-right:1px solid var(--el-borda);padding:24px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:sticky;top:72px;height:calc(100vh - 72px)}
.el-menu-lateral{display:flex;flex-direction:column;gap:4px}
.el-menu-lateral a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;color:var(--el-texto);text-decoration:none;font-weight:500}
.el-menu-lateral a .ic{width:20px;height:20px;color:var(--el-suave)}
.el-menu-lateral a:hover{background:#F8FAFC}
.el-menu-lateral a[aria-current="page"]{background:var(--el-azul-claro);color:var(--el-azul-escuro);font-weight:600}
.el-menu-lateral a[aria-current="page"] .ic{color:var(--el-azul)}
.el-ajuda{background:var(--el-fundo);border:1px solid var(--el-borda);border-radius:14px;padding:16px}
.el-ajuda p{margin:0 0 12px;font-size:.85rem;color:var(--el-suave)}
.el-ajuda-titulo{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--el-marinho)!important;font-size:.95rem!important;margin-bottom:4px!important}
.el-ajuda-titulo .ic{color:var(--el-azul)}
.el-ajuda .el-btn{width:100%;padding:9px 12px;font-size:.88rem}

.app-elink .el-conteudo{flex:1;min-width:0;max-width:1240px;margin:0 auto;padding:32px 36px 64px}
/* Antes do login (sem menu lateral), o cartão de acesso fica centralizado */
.app-elink:not(.logado) .el-conteudo{max-width:520px}

/* ---------------------------------------------------------------
   Cards e elementos comuns
   --------------------------------------------------------------- */
.app-elink .cartao-acesso,.app-elink .fid-balcao,.app-elink .fid-programa,.app-elink .el-placa{background:var(--el-superficie);border:1px solid var(--el-borda);border-radius:var(--el-raio);box-shadow:var(--el-sombra)}
.app-elink .cartao-acesso{margin-top:48px}
.app-elink .painel input,.app-elink .painel select,.app-elink .painel textarea,.app-elink .editor input:not([type=radio]):not([type=checkbox]):not([type=range]),.app-elink .editor select,.app-elink .editor textarea{border-color:var(--el-borda);border-radius:var(--el-raio-controle);padding:11px 14px}
.app-elink .painel input:focus-visible,.app-elink .painel select:focus-visible,.app-elink .painel textarea:focus-visible{outline:3px solid rgba(37,99,235,.25);border-color:var(--el-azul);outline-offset:0}
.app-elink .editor{border-radius:var(--el-raio)}
.app-elink .vazio{border-color:var(--el-borda);border-radius:var(--el-raio);color:var(--el-suave)}
.app-elink .mensagem{border-radius:12px}
.app-elink .selo-status{background:#FEF2F2;color:#B91C1C}
.app-elink .selo-status.ok{background:#ECFDF3;color:#15803D}
.el-icone-caixa{width:44px;height:44px;border-radius:12px;background:var(--el-azul-claro);color:var(--el-azul);display:inline-flex;align-items:center;justify-content:center;flex:none}
.el-icone-caixa .ic{width:22px;height:22px}
.el-icone-turquesa{background:#E6FBF9;color:#0E9F96}

/* ---------------------------------------------------------------
   Minhas placas
   --------------------------------------------------------------- */
.el-pagina-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px}
.el-pagina-topo h1,.el-titulo-pagina{font-size:clamp(1.8rem,3vw,2.3rem);font-weight:700;margin:0 0 10px}
.el-uso{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.el-uso p{margin:0;color:var(--el-texto)}
.el-uso p strong{font-size:1.3rem;color:var(--el-marinho)}
.el-uso-barra{width:min(340px,40vw);height:8px;border-radius:999px;background:#E2E8F0;overflow:hidden}
.el-uso-barra span{display:block;height:100%;background:var(--el-azul);border-radius:999px;min-width:8px}
.el-uso .el-uso-pct{color:var(--el-suave);font-size:.9rem}

.el-lista-placas{gap:20px!important}
.el-placa{display:grid;grid-template-columns:190px minmax(0,1fr) 230px;gap:28px;padding:24px;align-items:start}
.el-placa.inativa{opacity:.72}
.el-placa-qr{display:flex;flex-direction:column;align-items:center;gap:10px;border:1px solid var(--el-borda);border-radius:14px;padding:16px 12px 12px}
.el-qr-caixa svg{display:block;width:150px;height:150px}
.el-placa-info{min-width:0;display:flex;flex-direction:column;gap:10px}
.el-placa-titulo{display:flex;align-items:center;gap:14px}
.el-placa-titulo h2{margin:0;font-size:1.35rem;font-weight:700}
.el-placa-destino{margin:0;color:var(--el-texto);overflow-wrap:anywhere}
.el-placa-destino a{color:var(--el-azul)}
.el-placa-link{margin:0;display:flex;align-items:center;gap:6px;color:var(--el-azul);font-size:.92rem}
.el-placa-link span{overflow-wrap:anywhere}
.tipo-instagram{background:#FDECF3;color:#D6246E}
.tipo-whatsapp{background:#ECFDF3;color:var(--el-sucesso)}
.tipo-pix{background:#E6FBF9;color:#0E9F96}
.tipo-fidelidade{background:#FFF7E6;color:#D97706}

.el-acessos{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:14px;background:var(--el-fundo);border-radius:14px;padding:14px 18px;margin-top:4px}
.el-acessos .el-icone-caixa{background:#fff}
.el-acessos-total{margin:0;display:flex;flex-direction:column;line-height:1.3}
.el-acessos-total strong{color:var(--el-marinho);font-size:1.02rem}
.el-acessos-total small{color:var(--el-suave);font-size:.85rem}
.el-mini-grafico{min-width:0}
.el-barras{display:flex;align-items:flex-end;gap:2px;height:44px;border-bottom:1px solid #CBD5E1}
.el-barras span{flex:1;border-radius:2px 2px 0 0;min-height:2px}
.el-barras .com{background:var(--el-azul)}
.el-barras .sem{background:#D9E3F5}
.el-barras-legenda{display:flex;justify-content:space-between;font-size:.75rem;color:var(--el-suave);margin-top:4px}

.el-placa-acoes{display:flex;flex-direction:column;gap:10px;padding-left:28px;border-left:1px solid var(--el-borda)}
.el-placa-acoes .el-btn{width:100%;justify-content:flex-start;padding-left:18px}

.el-qr-grande{align-items:center;text-align:center}
.el-qr-grande .el-qr-caixa svg{width:min(320px,70vw);height:auto}
.el-qr-grande .el-placa-link{justify-content:center}

/* ---------------------------------------------------------------
   Cartão fidelidade
   --------------------------------------------------------------- */
.app-elink .fid-painel{margin:0;padding:0;border:0}
.app-elink .fid-balcao{border-width:1px;padding:24px;margin-bottom:32px}
.el-balcao-cabeca{display:flex;gap:16px;align-items:flex-start;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--el-borda)}
.el-balcao-cabeca h2{margin:0 0 4px;font-size:1.35rem}
.el-balcao-cabeca .dica{margin:0}
.app-elink .fid-balcao form{grid-template-columns:1fr auto auto;gap:14px}
.app-elink .fid-balcao form .el-btn{height:46px}
.app-elink .fid-ficha{border-radius:12px}

.el-secao-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.el-secao-topo h2{margin:0;font-size:1.5rem}

.app-elink .el-programa{display:grid;grid-template-columns:auto minmax(0,1fr) 250px;gap:20px;padding:24px;margin-bottom:16px;align-items:start}
.el-programa.pausado{opacity:.75}
.el-icone-programa{width:64px;height:64px;border-radius:16px}
.el-icone-programa .ic{width:30px;height:30px}
.el-programa-info{min-width:0}
.el-programa-info h3{margin:0 0 4px;font-size:1.2rem;font-weight:700}
.el-programa-regra{margin:0 0 10px}
.el-programa-link{display:flex;align-items:center;gap:8px;margin:0 0 6px;background:var(--el-fundo);border:1px solid var(--el-borda);border-radius:10px;padding:4px 4px 4px 12px;color:var(--el-texto);font-size:.85rem}
.el-programa-link > .ic{color:var(--el-azul)}
.el-programa-link span{flex:1;min-width:0;overflow-wrap:anywhere}
.el-programa-info .dica{font-size:.82rem;margin:0 0 12px}
.app-elink .el-programa .acoes-linha{justify-content:flex-start;gap:8px}
.el-programa-meta{display:flex;align-items:center;gap:14px;border-radius:14px;padding:16px 18px}
.el-programa-meta .ic{width:30px;height:30px}
.el-programa-meta p{margin:0;display:flex;flex-direction:column;line-height:1.3}
.el-programa-meta strong{color:var(--el-marinho);font-size:1.05rem}
.el-programa-meta small{color:var(--el-suave)}
.el-programa-extra{grid-column:1/-1;margin-top:0}
.tema-azul{background:var(--el-azul-claro);color:var(--el-azul)}
.tema-laranja{background:#FFF4E5;color:var(--el-atencao)}
.tema-turquesa{background:#E6FBF9;color:#0E9F96}

/* ---------------------------------------------------------------
   Peças comuns a Meus clientes e Relatórios
   --------------------------------------------------------------- */
.el-card{background:var(--el-superficie);border:1px solid var(--el-borda);border-radius:var(--el-raio);box-shadow:var(--el-sombra)}
.el-subtitulo{color:var(--el-suave);margin:-4px 0 24px}
.tema-verde{background:#ECFDF3;color:var(--el-sucesso)}

.el-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.el-kpis:empty{display:none}
.el-kpi{display:flex;align-items:center;gap:14px;padding:18px 20px}
.el-kpi .el-icone-caixa{width:48px;height:48px}
.el-kpi p{margin:0;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.el-kpi strong{font-size:1.7rem;font-weight:700;color:var(--el-marinho);font-variant-numeric:tabular-nums}
.el-kpi span{color:var(--el-texto);font-size:.9rem}
.el-kpi small{color:var(--el-suave);font-size:.78rem}

.el-filtros{display:flex;flex-wrap:wrap;gap:8px}
.el-filtros button{font:inherit;font-size:.88rem;font-weight:600;color:var(--el-texto);background:#fff;border:1px solid var(--el-borda);border-radius:999px;padding:8px 16px;cursor:pointer}
.el-filtros button:hover{border-color:var(--el-azul);color:var(--el-azul-escuro)}
.el-filtros button[aria-pressed="true"]{background:var(--el-azul-claro);border-color:var(--el-azul);color:var(--el-azul-escuro)}

.el-progresso{height:8px;border-radius:999px;background:#E2E8F0;overflow:hidden}
.el-progresso span{display:block;height:100%;border-radius:999px;background:var(--el-azul)}

/* ---------------------------------------------------------------
   Meus clientes
   --------------------------------------------------------------- */
.el-ferramentas{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 16px;margin-bottom:16px}
.el-busca{flex:1 1 280px;display:flex!important;flex-direction:row!important;align-items:center;gap:10px;background:var(--el-fundo);border:1px solid var(--el-borda);border-radius:var(--el-raio-controle);padding:0 12px;color:var(--el-suave)}
.app-elink .painel .el-busca input{border:0;background:transparent;padding:11px 0;outline:none}
.el-busca:focus-within{border-color:var(--el-azul);box-shadow:0 0 0 3px rgba(37,99,235,.2)}

.el-lista-clientes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.el-cliente{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr) auto;gap:24px;align-items:center;padding:18px 22px}
.el-cliente-quem{display:flex;align-items:center;gap:14px;min-width:0}
.el-avatar-cliente{width:44px;height:44px;background:var(--el-azul-claro);color:var(--el-azul-escuro);font-size:1.05rem;flex:none}
.el-cliente-nome{margin:0;font-weight:600;color:var(--el-marinho);overflow-wrap:anywhere}
.el-cliente-quem .dica{margin:2px 0 0;font-size:.82rem}
.el-cliente-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.el-cliente-cartao p{margin:0 0 6px;display:flex;justify-content:space-between;gap:8px;font-size:.88rem}
.el-cliente-cartao p span{overflow-wrap:anywhere}
.el-cliente-cartao strong{color:var(--el-marinho);font-variant-numeric:tabular-nums}
.el-cliente-cartao.completo .el-progresso span{background:var(--el-atencao)}
.el-cliente-cartao small{display:block;margin-top:4px;color:#B45309;font-size:.78rem;font-weight:600}
.el-cliente-numeros{display:flex;gap:22px;margin:0}
.el-cliente-numeros div{text-align:center}
.el-cliente-numeros dt{font-size:.75rem;color:var(--el-suave);white-space:nowrap}
.el-cliente-numeros dd{margin:2px 0 0;font-weight:700;color:var(--el-marinho);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------
   Relatórios
   --------------------------------------------------------------- */
.el-relatorio-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.el-relatorio-card{padding:22px 24px}
.el-relatorio-card h2{margin:0 0 4px;font-size:1.1rem;font-weight:600}
.el-relatorio-card .dica{margin:0 0 14px;font-size:.85rem}
.el-largura-total{grid-column:1/-1}

.el-grafico{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:12px}
.el-grafico-eixo{display:flex;flex-direction:column;justify-content:space-between;height:180px;font-size:.72rem;color:var(--el-suave);text-align:right;font-variant-numeric:tabular-nums}
.el-grafico-area{min-width:0}
.el-grafico-colunas{display:flex;align-items:flex-end;gap:3px;height:180px;border-bottom:1px solid #CBD5E1;background:repeating-linear-gradient(to top,transparent 0,transparent calc(50% - 1px),#EEF2F7 calc(50% - 1px),#EEF2F7 50%)}
.el-coluna{flex:1;height:100%;display:flex;flex-direction:column-reverse;justify-content:flex-start;gap:1px;min-width:0}
.el-coluna span{display:block;width:100%;border-radius:3px 3px 0 0;min-height:2px}
.el-coluna .vazia{height:2px;background:#E2E8F0;border-radius:2px}
.serie-azul{background:var(--el-azul)}
.serie-laranja{background:var(--el-atencao)}
.el-grafico-datas{display:flex;justify-content:space-between;font-size:.75rem;color:var(--el-suave);margin-top:6px}
.el-legenda{display:flex;gap:18px;font-size:.85rem;color:var(--el-suave);margin:4px 0 0}
.el-legenda span{display:inline-flex;align-items:center;gap:6px}
.el-legenda i{width:12px;height:12px;border-radius:3px;display:inline-block}

.el-ranking{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.el-ranking p{margin:0 0 6px;display:flex;justify-content:space-between;gap:12px;font-size:.9rem}
.el-ranking p span{overflow-wrap:anywhere;color:var(--el-texto)}
.el-ranking strong{color:var(--el-marinho);white-space:nowrap;font-weight:600}

.el-entregas{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}
.el-entregas li{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--el-borda);font-size:.92rem}
.el-entregas li:last-child{border-bottom:0}
.el-entregas strong{margin-left:auto;font-size:1.1rem;color:var(--el-marinho);font-variant-numeric:tabular-nums}
.el-ponto{width:10px;height:10px;border-radius:50%;flex:none}
.el-ponto.verde{background:var(--el-sucesso)}
.el-ponto.azul{background:var(--el-azul)}
.el-ponto.laranja{background:var(--el-atencao)}
.el-ponto.turquesa{background:var(--el-turquesa)}

/* ---------------------------------------------------------------
   Manual do painel
   --------------------------------------------------------------- */
.el-manual{max-width:860px}
.el-manual details{margin-bottom:12px;padding:0 22px}
.el-manual summary{list-style:none;display:flex;align-items:center;gap:14px;padding:16px 0;cursor:pointer;font-weight:600;font-size:1.05rem;color:var(--el-marinho)}
.el-manual summary::-webkit-details-marker{display:none}
.el-manual summary::after{content:"+";margin-left:auto;font-size:1.5rem;font-weight:400;line-height:1;color:var(--el-azul)}
.el-manual details[open] summary::after{content:"−"}
.el-manual summary .el-icone-caixa{width:40px;height:40px;border-radius:10px}
.el-manual summary .el-icone-caixa .ic{width:20px;height:20px}
.el-manual details > :not(summary){margin-top:0}
.el-manual details > :last-child{padding-bottom:18px;margin-bottom:0}
.el-manual details h3{font-size:1rem;margin:8px 0 8px}
.el-manual ul,.el-manual ol{margin:0 0 12px;padding-left:22px;line-height:1.6}
.el-manual li{margin-bottom:6px}
.el-manual p{line-height:1.6}
.el-passos-manual{counter-reset:passo;list-style:none;padding-left:0!important}
.el-passos-manual li{counter-increment:passo;position:relative;padding-left:40px;margin-bottom:12px}
.el-passos-manual li::before{content:counter(passo);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;background:var(--el-azul-claro);color:var(--el-azul-escuro);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.el-faq{margin:0 0 4px}
.el-faq dt{font-weight:600;color:var(--el-marinho);margin-top:12px}
.el-faq dd{margin:4px 0 0;color:var(--el-texto);line-height:1.6}
.el-manual-suporte{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 22px;margin-top:8px}
.el-manual-suporte p{margin:0}
.el-ajuda a{color:var(--el-azul-escuro);font-weight:600}

/* ---------------------------------------------------------------
   Pedidos (só super admin)
   --------------------------------------------------------------- */
.el-btn-perigo{background:#fff;color:var(--el-erro);border-color:#FCA5A5}
.el-btn-perigo:hover:not(:disabled){background:#FEF2F2;border-color:var(--el-erro)}

.el-lista-pedidos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.el-pedido{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr) 170px auto;gap:24px;align-items:center;padding:18px 22px}
.el-pedido-quem{min-width:0}
.el-pedido-quem p{margin:0}
.el-pedido-numero{font-size:.8rem;font-weight:600;color:var(--el-azul);font-variant-numeric:tabular-nums}
.el-pedido-quem .dica{margin-top:2px;font-size:.82rem;overflow-wrap:anywhere}
.el-pedido-itens{display:flex;align-items:center;gap:14px;min-width:0}
.el-pedido-itens p{margin:0;font-size:.9rem;overflow-wrap:anywhere}
.el-pedido-fotos{display:flex;flex:none}
.el-pedido-fotos img{width:34px;height:auto;aspect-ratio:1055/1491;object-fit:cover;border-radius:5px;border:2px solid #fff;box-shadow:0 0 0 1px var(--el-borda);background:var(--el-fundo)}
.el-pedido-fotos img + img{margin-left:-12px}
.el-pedido-valor{display:flex;flex-direction:column;gap:8px}
.el-pedido-valor strong{font-size:1.15rem;color:var(--el-marinho);font-variant-numeric:tabular-nums}
.app-elink .painel .el-pedido-valor select{padding:7px 10px;font-size:.88rem;font-weight:600}
.el-pedido-valor .status-aprovado,.el-pedido-valor .status-producao,.el-pedido-valor .status-enviado{background:var(--el-azul-claro);color:var(--el-azul-escuro)}
.el-pedido-valor .status-entregue{background:#ECFDF3;color:#15803D}
.el-pedido-valor .status-cancelado{background:#FEF2F2;color:#B91C1C}
.el-pedido-acoes{display:flex;flex-direction:column;gap:8px}
.el-pedido-acoes .el-btn{justify-content:flex-start}

/* Ficha no diálogo */
.el-ficha fieldset{border-top:1px solid var(--el-borda);padding-top:18px}
.el-ficha fieldset:first-of-type{border-top:0;padding-top:0}
.el-ficha legend{font-size:1.05rem}
.el-ficha .dica{margin:0 0 12px}
.el-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.el-ficha .el-filtros{margin-bottom:14px}
.el-galeria-plaquinhas{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:14px}
.el-galeria-plaquinhas li[hidden]{display:none}
.el-plaquinha{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;font:inherit;font-size:.8rem;font-weight:600;color:var(--el-marinho);text-align:center;background:none;border:0;padding:0;cursor:pointer}
.el-plaquinha img,.el-plaquinha .el-sem-foto{width:100%;height:auto;aspect-ratio:1055/1491;object-fit:contain;background:var(--el-fundo);border:2px solid var(--el-borda);border-radius:10px}
.el-plaquinha small{display:inline-flex;align-items:center;gap:4px;color:var(--el-azul);font-weight:600}
.el-plaquinha small .ic{width:14px;height:14px}
.el-plaquinha:hover img,.el-plaquinha:hover .el-sem-foto{border-color:var(--el-azul)}
.el-sem-foto{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.72rem;color:var(--el-suave);padding:6px}
.el-itens-pedido{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.el-item-pedido{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start;background:var(--el-fundo);border:1px solid var(--el-borda);border-radius:14px;padding:16px}
.el-item-pedido > img,.el-item-pedido > .el-sem-foto{width:64px;height:auto;aspect-ratio:1055/1491;object-fit:contain;background:#fff;border-radius:8px}
.el-item-campos{display:flex;flex-direction:column;gap:12px;min-width:0}
.el-item-campos .el-campos{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.el-item-nome{margin:0;color:var(--el-marinho)}
.el-item-nome small{color:var(--el-suave);font-weight:400;margin-left:4px}
.el-item-campos [data-remover-item]{align-self:flex-start}
.el-observacoes{margin-top:14px}
.el-total-pedido{margin:0;display:flex;justify-content:flex-end;align-items:baseline;gap:10px;font-weight:600;color:var(--el-suave)}
.el-total-pedido strong{font-size:1.5rem;color:var(--el-marinho);font-variant-numeric:tabular-nums}

@media(max-width:1180px){
  .el-pedido{grid-template-columns:minmax(0,1fr) 170px;grid-template-areas:"quem valor" "itens itens" "acoes acoes"}
  .el-pedido-quem{grid-area:quem}
  .el-pedido-itens{grid-area:itens}
  .el-pedido-valor{grid-area:valor}
  .el-pedido-acoes{grid-area:acoes;flex-direction:row;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--el-borda)}
}
@media(max-width:640px){
  .el-pedido{grid-template-columns:1fr;grid-template-areas:"quem" "itens" "valor" "acoes";gap:14px;padding:16px}
  .el-pedido-acoes .el-btn{flex:1 1 100%;justify-content:center}
  .el-item-pedido{grid-template-columns:1fr}
  .el-item-pedido > img,.el-item-pedido > .el-sem-foto{display:none}
  .el-galeria-plaquinhas{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
  .el-ficha .acoes-form .el-btn{flex:1 1 100%}
}

/* ---------------------------------------------------------------
   Telas menores
   --------------------------------------------------------------- */
@media(max-width:1180px){
  .el-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .el-cliente{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"quem numeros" "cartoes cartoes"}
  .el-cliente-quem{grid-area:quem}
  .el-cliente-cartoes{grid-area:cartoes}
  .el-cliente-numeros{grid-area:numeros}
}
@media(max-width:640px){
  .el-kpis{grid-template-columns:1fr 1fr;gap:10px}
  .el-kpi{flex-direction:column;align-items:flex-start;padding:14px}
  .el-kpi strong{font-size:1.4rem}
  .el-cliente{grid-template-columns:1fr;grid-template-areas:"quem" "cartoes" "numeros";gap:14px;padding:16px}
  .el-cliente-numeros{justify-content:space-between}
  .el-relatorio-grade{grid-template-columns:1fr}
  .el-relatorio-card{padding:18px}
  .el-grafico-colunas,.el-grafico-eixo{height:140px}
  .el-grafico-colunas{gap:1px}
}
@media(max-width:1180px){
  .el-placa{grid-template-columns:170px minmax(0,1fr);grid-template-areas:"qr info" "acoes acoes"}
  .el-placa-qr{grid-area:qr}
  .el-placa-info{grid-area:info}
  .el-placa-acoes{grid-area:acoes;flex-direction:row;flex-wrap:wrap;padding:20px 0 0;border-left:0;border-top:1px solid var(--el-borda)}
  .el-placa-acoes .el-btn{width:auto;flex:1 1 180px;justify-content:center;padding-left:18px}
  .el-qr-caixa svg{width:130px;height:130px}
  .app-elink .el-programa{grid-template-columns:auto minmax(0,1fr)}
  .el-programa-meta{grid-column:2}
}

/* Tablet e celular: o menu lateral vira uma barra de abas abaixo do cabeçalho */
@media(max-width:900px){
  .el-app{flex-direction:column}
  .el-lateral{position:sticky;top:72px;z-index:15;width:auto;height:auto;flex-direction:row;padding:8px 12px;border-right:0;border-bottom:1px solid var(--el-borda);overflow-x:auto}
  .el-menu-lateral{flex-direction:row}
  .el-menu-lateral a{padding:10px 14px;white-space:nowrap}
  .el-ajuda{display:none}
  .app-elink .el-conteudo{padding:24px 20px 56px}
  .el-pagina-topo{flex-direction:column}
  .app-elink .fid-balcao form{grid-template-columns:1fr 1fr}
  .app-elink .fid-balcao form label{grid-column:1/-1}
}

@media(max-width:640px){
  .el-cabecalho{padding:0 16px;height:64px}
  .el-lateral{top:64px}
  .el-marca{font-size:1.45rem}
  .el-btn-admin span,.el-conta-nome,.el-conta-seta{display:none}
  .el-conta summary{padding:4px;background:none;border:0}
  .app-elink .el-conteudo{padding:20px 16px 48px}
  .el-pagina-topo .el-btn{width:100%}
  .el-uso-barra{width:100%}
  .el-placa{grid-template-columns:1fr;grid-template-areas:"info" "qr" "acoes";padding:18px;gap:18px}
  .el-placa-qr{justify-self:center;width:100%}
  .el-qr-caixa svg{width:170px;height:170px}
  .el-placa-acoes .el-btn{flex:1 1 100%}
  .el-acessos{grid-template-columns:auto 1fr}
  .el-mini-grafico{grid-column:1/-1}
  .app-elink .fid-balcao{padding:18px}
  .app-elink .fid-balcao form{grid-template-columns:1fr}
  .app-elink .el-programa{grid-template-columns:1fr;padding:18px}
  .el-programa-meta{grid-column:1}
  .el-secao-topo{flex-direction:column;align-items:stretch}
  .app-elink .el-programa .acoes-linha .el-btn{flex:1 1 calc(50% - 8px)}
}