/* Minha conta: the Site's look (tokens and shell from site-shell.css and
   site-v2.css) for sign-in, the overview, the orders and the details. */
[hidden]{display:none!important}
body{background:var(--cinza)}
.topo .acts a[aria-current="page"]{color:var(--laranja-escuro)}
#quem{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ped{padding-top:28px;padding-bottom:64px;min-height:70vh}
.ped h1{font-size:30px;font-weight:800;margin-bottom:14px}
.pedAviso{margin-bottom:14px;padding:12px 16px;border-radius:var(--raio2);background:var(--aviso-fundo);border:1px solid var(--aviso-linha);font-size:15px}
.pedMsg{margin-bottom:14px;padding:10px 14px;border-radius:var(--raio2);background:var(--verde-fundo);color:var(--verde);font-size:15px}
.pedMsg.erro{background:#FDE8E6;color:#B42318}
.pedMsg:empty{display:none}

/* Buttons, as on the Site. */
.bPri{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer}
.bPri:hover:not(:disabled){background:#FFB53D}
.bPri.bMini{height:38px;padding:0 16px;font-size:15px}
.bSec{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px;border:1px solid #D6D6D6;border-radius:var(--raio2);background:#fff;color:var(--preto);font-family:"Inter",sans-serif;font-weight:700;font-size:15px;cursor:pointer}
.bSec:hover:not(:disabled){border-color:var(--preto)}
.bSec .ic{width:18px;height:18px}
.bLink{align-self:flex-start;margin-top:12px;padding:0;border:0;background:none;color:var(--laranja-escuro);font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
button:disabled{opacity:.6;cursor:default}

/* Forms. */
.acessoGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.bloco{display:flex;flex-direction:column;margin-bottom:16px;padding:22px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
.bloco h2{font-size:20px;font-weight:800}
.nota2{margin:4px 0 8px;font-size:14.5px;color:var(--fraco)}
/* The signup code: one field, big and spaced, so it reads as six digits. */
.bloco input.codigo{height:60px;font-size:30px;font-weight:700;letter-spacing:.45em;text-align:center;font-variant-numeric:tabular-nums;padding-left:.45em}
.codigoAcoes{display:flex;flex-wrap:wrap;gap:4px 22px}
#fCodigo{max-width:520px}
#fEmailCodigo input.codigo{max-width:340px}
.nota2 a{color:var(--laranja-escuro)}
.bloco label{margin:10px 0 5px;font-size:14px;font-weight:600;color:var(--texto2)}
.bloco label .obs{font-weight:400;color:var(--fraco)}
.bloco input,.busca2 input,.busca2 select,.correcaoForm textarea{width:100%;height:46px;padding:0 13px;border:1px solid #D6D6D6;border-radius:var(--raio2);font:inherit;font-size:16px;background:#fff;color:var(--preto)}
.bloco input[readonly]{background:var(--cinza);color:var(--texto2)}
.bloco input:focus,.busca2 input:focus,.busca2 select:focus,.correcaoForm textarea:focus{outline:none;border-color:var(--laranja);box-shadow:0 0 0 3px rgba(255,168,26,.2)}
.bloco>.bPri,.bloco>.bSec{margin-top:16px;align-self:flex-start}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.tres{display:grid;grid-template-columns:1fr 1fr 90px;gap:0 12px}
.duas>div,.tres>div{display:flex;flex-direction:column}

/* The account area: menu on the side, one view beside it. */
.area{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;align-items:start}
.lateral{position:sticky;top:90px;display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
.lateral a,.lateral button{display:block;padding:10px 12px;border:0;border-radius:var(--raio2);background:none;color:var(--texto2);font:inherit;font-size:15.5px;text-align:left;text-decoration:none;cursor:pointer}
.lateral a:hover,.lateral button:hover{background:var(--cinza);color:var(--preto)}
.lateral a.on{background:var(--aviso-fundo);color:var(--laranja-escuro);font-weight:700}
.lateral button{margin-top:6px;border-top:1px solid var(--linha);border-radius:0 0 var(--raio2) var(--raio2)}
.conta{margin:-8px 0 16px;font-size:15px;color:var(--fraco)}
.acessoIntro{margin:-6px 0 14px;font-size:15px;color:var(--texto2)}
.acessoIntro:empty{display:none}
.tituloGrupo{margin:22px 0 10px;font-size:18px;font-weight:800}

/* Overview. */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.metrica{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff;color:var(--texto2);font-size:14.5px;text-decoration:none}
.metrica:hover{border-color:var(--laranja)}
.metrica b{font-family:"Inter",sans-serif;font-size:28px;font-weight:800;color:var(--preto)}
.metrica.alerta{border-color:#F3B7A9;background:#FFF6F4}
.verTodos{display:inline-block;margin-top:12px;color:var(--laranja-escuro);font-weight:700;text-decoration:none}

/* Orders: filters, rows, pages. */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.chipF{height:36px;padding:0 14px;border:1px solid #D6D6D6;border-radius:999px;background:#fff;color:var(--texto2);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.chipF:hover{border-color:var(--preto)}
.chipF.on{border-color:var(--laranja);background:var(--aviso-fundo);color:var(--laranja-escuro)}
.busca2{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:10px;margin-bottom:12px}
.lista{border:1px solid var(--linha);border-radius:var(--raio);background:#fff;overflow:hidden}
.lista:empty{display:none}
.item+.item{border-top:1px solid var(--linha)}
.item.pendente{background:#FFFCF6}
.linha{display:grid;grid-template-columns:90px minmax(0,1fr) auto 110px 90px;gap:14px;align-items:center;padding:14px 18px;cursor:pointer}
.item.pendente .linha{cursor:default}
.linha:hover{background:var(--cinza)}
.linha .num{font-family:"Inter",sans-serif;font-size:16px}
.oque{display:flex;flex-direction:column;min-width:0}
.oque span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.oque .data{font-size:14px;color:var(--fraco)}
.estadoW{display:flex;align-items:center;gap:6px}
.estado{padding:4px 10px;border-radius:999px;font-family:"Inter",sans-serif;font-size:13.5px;font-weight:700;background:var(--cinza);color:var(--texto2);white-space:nowrap}
.via{font-size:13px;font-weight:700;color:var(--fraco)}
.est-fin{background:var(--verde-fundo);color:var(--verde)}
.est-cor{background:#FDE8E6;color:#B42318}
.est-pay{background:#FFF1D6;color:#8A4B00}
.est-rev{background:#EEF1F5;color:#45505E}
.est-imp,.est-fil,.est-tra,.est-rec{background:#E7F0FB;color:#1D4E89}
.linha .valor{font-family:"Inter",sans-serif;font-size:16px;text-align:right}
.acao{display:flex;justify-content:flex-end}
.acao .bSec{height:36px;padding:0 14px}
.paginas{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.pags{display:flex;gap:6px}
.pag{min-width:38px;height:38px;border:1px solid #D6D6D6;border-radius:var(--raio2);background:#fff;font:inherit;font-weight:700;cursor:pointer}
.pag.on{border-color:var(--laranja);background:var(--aviso-fundo);color:var(--laranja-escuro);cursor:default}
.vazio{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 22px;font-size:16px;color:var(--texto2)}

/* An order opened in the list. */
.detalhe{padding:4px 18px 18px;border-top:1px dashed var(--linha);background:#fff}
.trilha{display:flex;list-style:none;margin:18px 0 6px;padding:0}
.trilha li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:14px;color:var(--fraco)}
.trilha li::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:#E0E0E0;z-index:0}
.trilha li:first-child::before{display:none}
.trilha li.feito::before,.trilha li.atual::before{background:var(--verde)}
.trilha .marca{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #D0D0D0;background:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:14px}
.trilha .marca .ic{width:16px;height:16px;stroke-width:3}
.trilha li.feito{color:var(--verde)}
.trilha li.feito .marca{background:var(--verde-fundo);border-color:var(--verde-fundo);color:var(--verde)}
.trilha li.atual{color:var(--preto)}
.trilha li.atual .marca{background:var(--laranja);border-color:var(--laranja)}
.trilha b{font-weight:600}
.trilha li.atual b{font-weight:800}
.pedAlerta{display:flex;gap:10px;align-items:flex-start;margin:16px 0 4px;padding:12px 14px;border-radius:var(--raio2);background:#FDE8E6;color:#7A1C10;font-size:15px}
.pedAlerta .ic{flex:none;width:20px;height:20px;margin-top:1px;color:#B42318}
.itensPed{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--linha)}
.itensPed li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--linha);font-size:15.5px}
.itensPed .nome{flex:1;font-weight:600}
.itensPed .qt{color:var(--fraco)}
.itensPed b{min-width:96px;text-align:right;font-family:"Inter",sans-serif}
.itensPed .frete .nome{font-weight:400;color:var(--texto2)}
.entregaPed{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:15px;color:var(--texto2)}
.entregaPed .ic{flex:none;width:19px;height:19px;color:var(--laranja-escuro)}
.secao{margin-top:16px}
.secao h4{margin-bottom:8px;font-size:16px;font-weight:800}
.historico{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--linha)}
.historico li{position:relative;padding:0 0 12px 12px;font-size:15px}
.historico li::before{content:"";position:absolute;left:-20px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--laranja)}
.historico li b{margin-right:8px}
.historico li span{color:var(--fraco)}
.historico .motivo{margin-top:4px;padding:8px 10px;border-radius:8px;background:#FDE8E6;font-size:14.5px}
.arquivo{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linha)}
.arquivo>div{flex:1;min-width:0;display:flex;flex-direction:column}
.arquivo b{overflow-wrap:anywhere;font-size:15px}
.arquivo span{font-size:14px;color:var(--fraco)}
.correcaoForm{display:flex;flex-direction:column;padding:16px;border-radius:var(--raio2);background:var(--cinza)}
.correcaoForm label{margin:10px 0 5px;font-size:14px;font-weight:600;color:var(--texto2)}
.correcaoForm textarea{height:auto;padding:10px 13px;resize:vertical}
.correcaoForm .bPri{margin-top:14px;align-self:flex-start}

@media (max-width:820px){
  .area{grid-template-columns:1fr;gap:16px}
  .lateral{position:static;flex-direction:row;flex-wrap:wrap}
  .lateral button{margin:0;border:0;border-radius:var(--raio2)}
  .linha{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .linha .num{grid-column:1}
  .linha .oque{grid-column:1/-1;grid-row:2}
  .linha .estadoW{grid-column:2;grid-row:1;justify-self:end}
  .linha .valor{grid-column:1;grid-row:3;text-align:left}
  .linha .acao{grid-column:2;grid-row:3}
}
@media (max-width:600px){
  .ped h1{font-size:26px}
  .trilha b{font-size:12.5px}
  .duas,.tres,.busca2{grid-template-columns:1fr}
}