@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

:root{
  --cor-primaria:#0F6E5C;
  --cor-primaria-clara:#E4F2EE;
  --fundo:#FAF6EF;
  --superficie:#FFFFFF;
  --superficie-2:#F2ECDD;
  --borda:#E7DDC7;
  --texto:#201C15;
  --texto-fraco:#8A8171;
  --ok:#1E8E5A;
  --alerta:#B8791A;
  --erro:#C4483A;
  --info:#3B6EA8;

  /* cores de "sinal" — como as luzes de status de uma bancada de conserto.
     fixas de propósito (não seguem a cor da loja), pra sempre dar pra
     diferenciar o status de longe, façam a loja escolher a cor que escolher. */
  --sinal-recebido:#8B8578;
  --sinal-andamento:#E8890C;
  --sinal-aguardando:#7C5CFC;
  --sinal-aprovado:#16A34A;
  --sinal-finalizado:#0EA5E9;
  --sinal-entregue:#0D9488;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--fundo); color:var(--texto); font-family:'Inter',sans-serif; min-height:100vh;}
h1,h2,h3,.marca{font-family:'Fraunces',serif;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--cor-primaria); outline-offset:2px;}
button,input,select,textarea{font-family:inherit;}

.container-auth{max-width:420px; margin:0 auto; padding:60px 20px;}
.marca{font-weight:600; font-size:25px; margin-bottom:8px; letter-spacing:-.4px;}
.marca span{color:var(--cor-primaria);}
.cartao{background:var(--superficie); border:1px solid var(--borda); border-radius:16px; padding:26px; box-shadow:0 1px 2px rgba(32,28,21,.03), 0 12px 28px -18px rgba(32,28,21,.35);}
.titulo-pagina{font-size:24px; font-weight:600; margin:0 0 6px;}
.subtitulo-pagina{color:var(--texto-fraco); font-size:14px; margin:0 0 24px;}

.campo{margin-bottom:16px;}
.campo label{display:block; font-size:13px; color:var(--texto-fraco); margin-bottom:6px; font-weight:600;}
.campo input, .campo select, .campo textarea{
  width:100%; padding:11px 13px; border-radius:9px; border:1.5px solid var(--borda);
  background:var(--superficie); color:var(--texto); font-size:14.5px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{border-color:var(--cor-primaria);}
.ajuda{font-size:12.5px; color:var(--texto-fraco); margin-top:5px;}
.erro-campo{color:var(--erro); font-size:13px; margin-top:10px;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:9px; padding:12px 20px; font-weight:600; font-size:14.5px; cursor:pointer; transition:opacity .15s, transform .1s;}
.btn:hover{opacity:.92;}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-primario{background:linear-gradient(155deg, color-mix(in srgb, var(--cor-primaria) 88%, white), var(--cor-primaria)); color:#fff; box-shadow:0 3px 10px -3px color-mix(in srgb, var(--cor-primaria) 55%, transparent);}
.btn-secundario{background:var(--superficie); color:var(--texto); border:1.5px solid var(--borda);}
.btn-bloco{width:100%;}
.btn-perigo{background:var(--erro); color:#fff;}
.btn-sucesso{background:var(--ok); color:#fff;}
.btn-whats{background:#25D366; color:#fff;}
.link-secundario{color:var(--cor-primaria); font-size:13.5px; font-weight:600;}

/* ---------- layout do painel ---------- */
.shell{
  position:relative; display:grid; grid-template-columns:72px 1fr; min-height:100vh;
  transition:grid-template-columns .28s ease;
}
.shell:has(.lateral[data-modo="auto"]:hover), .shell:has(.lateral[data-modo="expandido"]){grid-template-columns:280px 1fr;}
@media (max-width:820px){.shell{grid-template-columns:1fr;} .lateral{display:none;}}

.lateral{
  background:var(--superficie); border-right:1px solid var(--borda);
  padding:18px 10px; display:flex; flex-direction:column; overflow:hidden;
  transition:padding .28s ease;
}
.lateral[data-modo="auto"]:hover, .lateral[data-modo="expandido"]{padding:20px 18px;}

.topo-lateral{display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 0 20px;}
.lateral[data-modo="auto"]:hover .topo-lateral, .lateral[data-modo="expandido"] .topo-lateral{flex-direction:row; align-items:center; justify-content:space-between;}

.marca-compacta{
  display:flex; width:38px; height:38px; border-radius:10px; background:var(--cor-primaria-clara); color:var(--cor-primaria);
  align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; flex-shrink:0;
  overflow:hidden;
}
.marca-compacta img{width:100%; height:100%; object-fit:cover;}
.lateral[data-modo="auto"]:hover .marca-compacta, .lateral[data-modo="expandido"] .marca-compacta{display:none;}

.marca-loja{display:none; align-items:center; gap:9px; min-width:0; flex:1 1 auto;}
.lateral[data-modo="auto"]:hover .marca-loja, .lateral[data-modo="expandido"] .marca-loja{display:flex;}
.marca-loja img{width:34px; height:34px; border-radius:9px; object-fit:cover; flex-shrink:0;}
.marca-loja .nome-loja{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:16.5px; line-height:1.15; color:var(--texto);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.2px; min-width:0;
}

.select-modo-menu{
  width:100%; max-width:50px; font-size:9.5px; font-weight:600; padding:5px 1px; text-align:center;
  border-radius:7px; border:1px solid var(--borda); background:var(--superficie-2); color:var(--texto-fraco); cursor:pointer;
  flex-shrink:0;
}
.lateral[data-modo="auto"]:hover .select-modo-menu, .lateral[data-modo="expandido"] .select-modo-menu{max-width:74px; text-align:left; padding:6px 6px;}

.nav-lateral{display:flex; flex-direction:column; gap:3px;}
.nav-lateral a{display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:9px; font-size:14.5px; color:var(--texto); font-weight:600; opacity:.6; white-space:nowrap;}
.nav-lateral a:hover{background:var(--superficie-2); opacity:1;}
.nav-lateral a.ativo{background:var(--cor-primaria-clara); color:var(--cor-primaria); opacity:1;}
.icone-nav{
  width:27px; height:27px; border-radius:8px; background:var(--superficie-2); color:var(--texto-fraco);
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; flex-shrink:0; letter-spacing:.2px;
  font-family:'Poppins',sans-serif;
}
.nav-lateral a.ativo .icone-nav{background:var(--cor-primaria); color:#fff;}
.lateral[data-modo="auto"]:hover .icone-nav, .lateral[data-modo="expandido"] .icone-nav{display:none;}
.rotulo-nav{display:none;}
.lateral[data-modo="auto"]:hover .rotulo-nav, .lateral[data-modo="expandido"] .rotulo-nav{display:inline;}

.lateral .rodape-lateral{margin-top:auto; padding-top:16px; border-top:1px solid var(--borda); display:none;}
.lateral[data-modo="auto"]:hover .rodape-lateral, .lateral[data-modo="expandido"] .rodape-lateral{display:block;}
.lateral .usuario-nome{font-size:13.5px; font-weight:700; white-space:nowrap;}
.lateral .usuario-papel{font-size:12px; color:var(--texto-fraco); text-transform:capitalize; white-space:nowrap;}

.conteudo{padding:28px 32px 60px;}
@media (max-width:600px){.conteudo{padding:20px 16px 50px;}}
.cabecalho-pagina{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:24px; flex-wrap:wrap;}

.grade-contadores{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:28px;}
.contador{
  background:var(--superficie); border:1px solid var(--borda); border-left:3px solid var(--cor-contador, var(--borda));
  border-radius:14px; padding:16px 18px;
  box-shadow:0 1px 2px rgba(32,28,21,.03), 0 10px 24px -18px rgba(32,28,21,.35);
}
.contador.contador-recebido{--cor-contador:var(--sinal-recebido);}
.contador.contador-em_andamento{--cor-contador:var(--sinal-andamento);}
.contador.contador-aguardando_aprovacao{--cor-contador:var(--sinal-aguardando);}
.contador.contador-aprovado{--cor-contador:var(--sinal-aprovado);}
.contador.contador-finalizado{--cor-contador:var(--sinal-finalizado);}
.contador.contador-entregue{--cor-contador:var(--sinal-entregue);}
.contador .n{font-family:'Fraunces',serif; font-size:26px; font-weight:600;}
.contador .l{font-size:12.5px; color:var(--texto-fraco); margin-top:2px;}

.tabela{width:100%; border-collapse:collapse; background:var(--superficie); border:1px solid var(--borda); border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(32,28,21,.03), 0 12px 28px -18px rgba(32,28,21,.35);}
.tabela th, .tabela td{text-align:left; padding:12px 14px; font-size:14px; border-bottom:1px solid var(--borda);}
.tabela th{color:var(--texto-fraco); font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; background:var(--superficie-2);}
.tabela tr:last-child td{border-bottom:none;}
.tabela tr:hover td{background:var(--superficie-2);}
.linha-vazia td{text-align:center; color:var(--texto-fraco); padding:36px 14px;}

.selo-status{display:inline-flex; align-items:center; gap:6px; padding:4px 11px 4px 8px; border-radius:999px; font-size:12px; font-weight:700;}
.selo-status::before{content:""; width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.selo-recebido{background:#EFEDE6; color:#655F52;}
.selo-recebido::before{background:var(--sinal-recebido);}
.selo-em_andamento{background:#FDF0DA; color:#9A5B00;}
.selo-em_andamento::before{--cor-sinal:var(--sinal-andamento); background:var(--cor-sinal); box-shadow:0 0 0 3px color-mix(in srgb, var(--cor-sinal) 22%, transparent); animation:pulso-sinal 2s ease-in-out infinite;}
.selo-aguardando_aprovacao{background:#EEE9FE; color:#6337E8;}
.selo-aguardando_aprovacao::before{--cor-sinal:var(--sinal-aguardando); background:var(--cor-sinal); box-shadow:0 0 0 3px color-mix(in srgb, var(--cor-sinal) 22%, transparent); animation:pulso-sinal 2s ease-in-out infinite;}
.selo-aprovado{background:#E0F5E7; color:#0F7A34;}
.selo-aprovado::before{background:var(--sinal-aprovado);}
.selo-finalizado{background:#DFF1FB; color:#0A79B0;}
.selo-finalizado::before{background:var(--sinal-finalizado);}
.selo-entregue{background:#DAF1EC; color:#0A6B5C;}
.selo-entregue::before{background:var(--sinal-entregue);}
@keyframes pulso-sinal{
  0%, 100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--cor-sinal) 24%, transparent);}
  50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--cor-sinal) 8%, transparent);}
}
@media (prefers-reduced-motion: reduce){.selo-status::before{animation:none !important;}}

.card-status-whats{
  display:flex; align-items:center; gap:12px; background:var(--superficie); border:1px solid var(--borda);
  border-radius:14px; padding:16px 18px; margin-bottom:24px;
  box-shadow:0 1px 2px rgba(32,28,21,.03), 0 10px 24px -18px rgba(32,28,21,.35);
}
.pontinho{width:10px; height:10px; border-radius:50%; background:var(--erro); flex-shrink:0;}
.pontinho.conectado{background:var(--sinal-aprovado); box-shadow:0 0 0 4px color-mix(in srgb, var(--sinal-aprovado) 20%, transparent); animation:pulso-conectado 2.4s ease-in-out infinite;}
@keyframes pulso-conectado{
  0%, 100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--sinal-aprovado) 22%, transparent);}
  50%{box-shadow:0 0 0 7px color-mix(in srgb, var(--sinal-aprovado) 7%, transparent);}
}
@media (prefers-reduced-motion: reduce){.pontinho.conectado{animation:none !important;}}

.filtros{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.filtros select, .filtros input{padding:10px 12px; border-radius:9px; border:1.5px solid var(--borda); background:var(--superficie); color:var(--texto); font-size:14px;}

.caixa-links{background:var(--superficie-2); border:1px dashed var(--borda); border-radius:12px; padding:14px 16px; margin-top:10px;}
.caixa-links .rot{font-size:11.5px; color:var(--texto-fraco); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;}
.caixa-links .valor{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.caixa-links input{flex:1; min-width:160px; background:transparent; border:none; color:var(--texto); font-size:13.5px; padding:6px 0;}

/* ---------- portal público ---------- */
.pagina-portal{max-width:520px; margin:0 auto; padding:40px 18px 60px;}
.cabecalho-loja{text-align:center; margin-bottom:28px; padding-top:8px; position:relative;}
.cabecalho-loja::before{
  content:""; position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  width:220px; height:220px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, color-mix(in srgb, var(--cor-primaria) 16%, transparent), transparent 70%);
}
.cabecalho-loja .logo{width:60px; height:60px; border-radius:16px; object-fit:cover; margin-bottom:12px; box-shadow:0 8px 20px -8px color-mix(in srgb, var(--cor-primaria) 45%, transparent);}
.cabecalho-loja .logo-inicial{
  width:60px; height:60px; border-radius:16px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, color-mix(in srgb, var(--cor-primaria) 85%, white), var(--cor-primaria));
  color:#fff; font-family:'Fraunces',serif; font-weight:600; font-size:24px;
  box-shadow:0 8px 20px -8px color-mix(in srgb, var(--cor-primaria) 45%, transparent);
}
.cabecalho-loja h1{font-size:23px; margin:0 0 4px;}
.cabecalho-loja p{color:var(--texto-fraco); font-size:13.5px; margin:0;}

.linha-tempo{display:flex; flex-direction:column; gap:0; margin-top:18px;}
.evento-tempo{display:flex; gap:14px; padding-bottom:22px; position:relative;}
.evento-tempo::before{content:""; position:absolute; left:5px; top:16px; bottom:0; width:1.5px; background:var(--borda);}
.evento-tempo:last-child::before{display:none;}
.evento-tempo .ponto{width:11px; height:11px; border-radius:50%; background:var(--cor-primaria); margin-top:4px; flex-shrink:0;}
.evento-tempo .conteudo-evento{flex:1;}
.evento-tempo .titulo-evento{font-weight:600; font-size:14.5px;}
.evento-tempo .meta-evento{font-size:12px; color:var(--texto-fraco); margin-top:2px;}
.evento-tempo .desc-evento{font-size:13.5px; color:var(--texto-fraco); margin-top:4px;}

.grade-lojas{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:24px;}
.cartao-loja{background:var(--superficie); border:1px solid var(--borda); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px;}
.cartao-loja h3{margin:0; font-size:16px;}

/* ---------- site principal (index) ---------- */
.hero-site{text-align:center; padding:64px 20px 20px; max-width:640px; margin:0 auto; position:relative;}
.hero-site::before{
  content:""; position:absolute; top:-30px; left:50%; transform:translateX(-50%); z-index:-1;
  width:420px; height:260px; pointer-events:none; filter:blur(38px);
  background:
    radial-gradient(circle at 28% 35%, color-mix(in srgb, var(--sinal-andamento) 20%, transparent), transparent 62%),
    radial-gradient(circle at 72% 55%, color-mix(in srgb, var(--sinal-aguardando) 18%, transparent), transparent 62%),
    radial-gradient(circle at 50% 85%, color-mix(in srgb, var(--sinal-aprovado) 16%, transparent), transparent 62%);
}
.hero-site h1{font-size:clamp(28px,4vw,38px); margin:10px 0 12px;}
.hero-site p{color:var(--texto-fraco); font-size:15.5px; max-width:44ch; margin:0 auto 28px;}
.acoes-hero{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px;}

/* ---------- impressão A4 ---------- */
.folha-a4{max-width:720px; margin:0 auto; padding:40px;}
.folha-a4 .cabecalho-impressao{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--texto); padding-bottom:16px; margin-bottom:20px;}
.folha-a4 .qrcode-caixa{text-align:center;}
.folha-a4 table.dados-impressao{width:100%; border-collapse:collapse; margin-bottom:18px;}
.folha-a4 table.dados-impressao td{padding:6px 0; font-size:13.5px; vertical-align:top;}
.folha-a4 table.dados-impressao td:first-child{color:var(--texto-fraco); width:160px;}
@media print{
  .nao-imprimir{display:none !important;}
  body{background:#fff;}
  .folha-a4{padding:0;}
}