/* Página de aprovações e pedidos da HubCred */
:root{
  --marfim:#F8F5F0; --papel:#FFFFFF; --chumbo:#1E1E1E; --imperial:#404040; --mut:#6F6A60;
  --borda:#C8C4BB; --borda-2:#E4DFD5; --ouro:#A68B5B; --ouro-dk:#8a7249;
  --ok:#3E7B4F; --ok-bg:#E6F0E8; --aj:#A8681A; --aj-bg:#F7EBD9; --rep:#B0413E; --rep-bg:#F6E1E0;
  --raio:10px; --sombra:0 1px 2px rgba(30,30,30,.06),0 4px 16px rgba(30,30,30,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--marfim);color:var(--chumbo);font:16px/1.5 'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;line-height:1.15;margin:0;letter-spacing:-.01em}
button{font:inherit;cursor:pointer}
a{color:var(--ouro-dk)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}

/* topo */
.barra{background:var(--chumbo);color:#EDE8DF}
.barra .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px}
.barra img{height:26px;display:block}
.barra .rot{font:500 12px/1 'Space Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#B9B2A5}
.quem{display:flex;align-items:center;gap:8px;font-size:14px;color:#D8D2C7}
.quem b{color:#fff;font-weight:600}
.quem button{background:none;border:1px solid #555;color:#D8D2C7;border-radius:999px;padding:3px 10px;font-size:12px}

.cab{padding:32px 0 8px}
.cab .cli{font:600 13px/1 'Space Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro-dk)}
.cab h1{font-size:clamp(28px,4.4vw,40px);margin:10px 0 8px}
.cab p{margin:0;color:var(--imperial);max-width:760px}
.progresso{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--borda);background:var(--papel);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--imperial)}
.pill i{width:8px;height:8px;border-radius:50%;display:inline-block}

.caixa{background:var(--papel);border:1px solid var(--borda-2);border-radius:var(--raio);padding:18px 20px;margin:20px 0;box-shadow:var(--sombra)}
.caixa h3{font-size:16px;margin-bottom:8px}
.caixa ol,.caixa ul{margin:0;padding-left:20px;color:var(--imperial)}
.caixa li+li{margin-top:6px}
.nota{border-left:3px solid var(--ouro)}

/* grupos */
.grupo{margin:36px 0}
.grupo-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:1px solid var(--borda);padding-bottom:12px;margin-bottom:16px}
.grupo-cab h2{font-size:24px}
.grupo-cab p{margin:4px 0 0;color:var(--imperial);max-width:680px;font-size:15px}
.escolher{border:1.5px solid var(--chumbo);background:transparent;border-radius:999px;padding:9px 18px;font-weight:600;font-size:14px}
.escolher.on{background:var(--chumbo);color:#fff}
.escolhido-por{font-size:12px;color:var(--mut);margin-top:4px;text-align:right}
.grupo.vencedor .grupo-cab{border-bottom:2px solid var(--ouro)}

.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.card{background:var(--papel);border:1px solid var(--borda-2);border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column}
.card .thumb{position:relative;background:#e9e5dd;cursor:zoom-in;border:0;padding:0;display:block;width:100%}
.card .thumb img{width:100%;display:block}
.card .thumb .n{position:absolute;top:8px;right:8px;background:rgba(30,30,30,.82);color:#fff;border-radius:999px;font-size:12px;padding:2px 9px}
.card .corpo{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.card .tit{font-weight:600;font-size:14px}
.status{display:flex;gap:4px}
.status button{flex:1;border:1px solid var(--borda);background:var(--papel);border-radius:7px;padding:5px 0;font-size:12px;color:var(--imperial)}
.status button.on[data-s=aprovado]{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);font-weight:600}
.status button.on[data-s=ajustar]{background:var(--aj-bg);border-color:var(--aj);color:var(--aj);font-weight:600}
.status button.on[data-s=reprovado]{background:var(--rep-bg);border-color:var(--rep);color:var(--rep);font-weight:600}
.card[data-s=aprovado]{outline:2px solid var(--ok)}
.card[data-s=ajustar]{outline:2px solid var(--aj)}
.card[data-s=reprovado]{outline:2px solid var(--rep)}

/* comentários */
.coment{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.coment li{background:var(--marfim);border:1px solid var(--borda-2);border-radius:8px;padding:10px 12px}
.coment .meta{font-size:12px;color:var(--mut);display:flex;justify-content:space-between;gap:8px}
.coment .meta b{color:var(--chumbo)}
.coment .pin{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--ouro);color:#fff;font-size:11px;font-weight:700;margin-right:6px}
.coment p{margin:4px 0 0;white-space:pre-wrap}
.coment .del{background:none;border:0;color:var(--mut);font-size:12px;padding:0}
textarea{width:100%;min-height:84px;border:1px solid var(--borda);border-radius:8px;padding:10px 12px;font:inherit;background:var(--papel);resize:vertical}
textarea:focus,input:focus{outline:2px solid var(--ouro);outline-offset:1px}
.btn{border:0;background:var(--chumbo);color:#fff;border-radius:8px;padding:10px 18px;font-weight:600}
.btn.sec{background:transparent;color:var(--chumbo);border:1px solid var(--borda)}
.btn.ouro{background:var(--ouro);color:#fff}
.linha{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dica{font-size:13px;color:var(--mut)}

/* detalhe */
.det{position:fixed;inset:0;background:rgba(20,17,13,.92);z-index:50;display:none}
.det.on{display:flex}
.det-in{display:grid;grid-template-columns:minmax(0,1fr) 380px;width:100%;height:100%}
.det-img{position:relative;display:flex;align-items:center;justify-content:center;padding:20px;min-height:0}
.palco{position:relative;max-height:100%;max-width:100%;cursor:crosshair}
.palco img{display:block;max-height:calc(100vh - 40px);max-width:100%}
.palco .p{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:var(--ouro);color:#fff;border:2px solid #fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none}
.palco .p.novo{background:#fff;color:var(--chumbo);border-color:var(--ouro)}
.det-lado{background:var(--papel);overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.det-lado h2{font-size:20px}
.nav{display:flex;gap:8px}
.nav button,.fechar{background:transparent;border:1px solid var(--borda);border-radius:8px;padding:6px 12px}
.fechar{margin-left:auto}

.rodape{margin:40px 0 64px;text-align:center}
.rodape .caixa{text-align:left}
.concluidos{font-size:14px;color:var(--ok);margin-top:10px}

/* modal nome */
.modal{position:fixed;inset:0;background:rgba(20,17,13,.6);z-index:60;display:none;align-items:center;justify-content:center;padding:16px}
.modal.on{display:flex}
.modal .caixa{max-width:420px;width:100%;margin:0}
.modal input{width:100%;border:1px solid var(--borda);border-radius:8px;padding:11px 12px;font:inherit;margin:10px 0 14px}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--chumbo);color:#fff;padding:9px 16px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .2s;z-index:70;pointer-events:none}
.toast.on{opacity:1}

@media (max-width:820px){
  .det-in{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow:auto}
  .det-img{padding:12px}
  .palco img{max-height:62vh}
  .det-lado{border-radius:14px 14px 0 0}
  .grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grupo-cab{align-items:flex-start}
  .escolhido-por{text-align:left}
}

/* pedido: texto corrido com prints */
.corpo-doc{max-width:820px}
.corpo-doc h3{font-size:18px;margin:22px 0 6px}
.corpo-doc h3:first-child{margin-top:0}
.corpo-doc p{margin:8px 0;line-height:1.6;color:var(--imperial)}
.corpo-doc a{color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:600;overflow-wrap:anywhere}
.corpo-doc figure{margin:14px 0 18px}
.corpo-doc figure img{display:block;width:100%;height:auto;border:1px solid var(--borda-2);border-radius:10px}
.corpo-doc figcaption{font-size:13px;color:var(--mut);margin-top:6px}
.corpo-doc .aviso{border-left:3px solid var(--rep);padding:8px 12px;background:rgba(200,60,60,.06);border-radius:6px}

/* WhatsApp glyph: Font Awesome Free 6.5.1, CC BY 4.0 */
.btn.zap{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#0b2c4d;text-decoration:none;margin-left:10px;padding:14px 22px;font-size:16px}
.btn.zap:hover{background:#1FBF5B}
.btn[hidden],.dica[hidden]{display:none}

/* tema HubCred: identidade visual do cliente nas subpáginas */
[data-cliente="hubcred"]{--marfim:#f4f6fa;--papel:#fff;--chumbo:#01377F;--imperial:#14213d;--mut:#5b6678;--borda:#c9d2e3;--borda-2:#e3e8f2;--ouro:#ED6C0E;--ouro-dk:#B8500A}
[data-cliente="hubcred"] body,[data-cliente="hubcred"] button,[data-cliente="hubcred"] textarea,[data-cliente="hubcred"] input{font-family:'Montserrat',system-ui,sans-serif}
[data-cliente="hubcred"] h1,[data-cliente="hubcred"] h2,[data-cliente="hubcred"] h3,[data-cliente="hubcred"] .cab .cli,[data-cliente="hubcred"] .barra .rot{font-family:'Montserrat',system-ui,sans-serif;letter-spacing:0}
[data-cliente="hubcred"] .cab h1{color:#01377F}
[data-cliente="hubcred"] .barra{background:#01377F;color:#fff;border-bottom:4px solid #ED6C0E}
[data-cliente="hubcred"] .barra img{height:24px}
[data-cliente="hubcred"] .barra .rot{color:#dbe5f7}
[data-cliente="hubcred"] .btn.ouro{background:#ED6C0E}
b.para{display:inline-block;margin-left:10px;box-shadow:0 2px 6px rgba(237,108,14,.35);font:700 13px/1 'Montserrat',system-ui,sans-serif;letter-spacing:0;text-transform:none;border-radius:99px;padding:6px 13px;vertical-align:middle;color:#fff;background:#ED6C0E}

.caixa[hidden]{display:none}