/* Estilo só de telas/inicio.js (01-inicio.html e 02-criar-quiz.html). Componente compartilhado fica em base.css. */

/* ===== 01 Início ===== */
.inicio .ttl{display:flex;align-items:flex-end;gap:12px}
.inicio .sum{display:flex;gap:18px;font-size:12.5px;color:var(--chumbo);min-height:16px}
.inicio .sum b{color:var(--tinta);font-weight:650}
.inicio .tools{display:flex;align-items:center;gap:8px;margin:20px 0 12px;flex-wrap:wrap}
.inicio .search{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--linha);border-radius:8px;background:#fff;width:260px;color:var(--t3)}
.inicio .search:focus-within{border-color:var(--tinta);box-shadow:0 0 0 3px rgba(14,15,17,.08)}
.inicio .search input{border:0;outline:0;background:none;font-size:13px;color:var(--tinta);flex:1;min-width:0;height:100%}
.inicio .search input::-webkit-search-cancel-button{cursor:pointer}
.inicio .ordem{padding:4px 10px 5px;width:180px}
.inicio .ordem select{font-size:12.5px}
.ql{background:#fff;border:1px solid var(--nevoa);border-radius:var(--r)}
.qr{display:grid;grid-template-columns:minmax(0,2.4fr) 120px 110px 100px 100px 120px 128px;align-items:center;gap:12px;padding:0 14px;height:64px;border-top:1px solid var(--nevoa);position:relative}
.qr:first-child{border-top:0}
.qr.h{height:38px;font-size:11.5px;color:var(--chumbo);font-weight:600}
.qr:not(.h):hover{background:#FAFAFB}
.qr .menu{right:14px;top:52px}
.qr .menu .mi{width:100%;text-align:left}
.thumb{width:34px;height:46px;border-radius:7px;border:1px solid var(--nevoa);background:#fff;display:flex;flex-direction:column;gap:3px;padding:6px 5px;flex:none}
.thumb i{display:block;height:3px;border-radius:2px;background:var(--nevoa)}
.thumb b{display:block;height:7px;border-radius:2px;margin-top:auto}
.qg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.qc{background:#fff;border:1px solid var(--nevoa);border-radius:var(--r);padding:14px;display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;color:inherit}
.qc:hover{border-color:var(--prata);box-shadow:var(--sh-1)}
.qc .thumb{width:64px;height:92px;padding:9px 8px;gap:5px}
.qc .thumb i{height:4px}
.qc .thumb b{height:12px}
.qc .st3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.qc .st3 div{font-size:11px;color:var(--chumbo)}
.qc .st3 b{display:block;font-size:14px;color:var(--tinta);font-weight:650}

@media (max-width:1100px){
  .qr{grid-template-columns:minmax(0,1fr) 100px 80px 70px 80px 128px}
  .qr>.qa,.qr.h>span:nth-child(6){display:none}
  .qg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Celular: a linha vira um bloco (nome, situação e números embaixo, ações à direita). */
@media (max-width:760px){
  .inicio .ttl{flex-wrap:wrap}
  .inicio .sum{flex-wrap:wrap}
  .inicio .search{width:100%}
  .inicio .tools .sp{display:none}
  .inicio .ordem{flex:1;width:auto}
  .qr.h{display:none}
  .qr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n x" "s s" "v v";height:auto;padding:12px;row-gap:8px}
  .qr .qn{grid-area:n}
  .qr .qx{grid-area:x}
  .qr .qx .btn-s,.qr .qx .btn-g{display:none}
  .qr .qs{grid-area:s;display:flex;gap:12px;align-items:center}
  .qr .qv,.qr .ql2,.qr .qc2{display:none}
  .qr .menu{top:46px;right:8px}
  .qg{grid-template-columns:minmax(0,1fr)}
}

/* ===== 02 Criar quiz ===== */
.wz label.f,.inicio label.f{display:block}
.wz .chev-dir{transform:rotate(-90deg)}
.wz{height:100vh;height:100dvh;display:grid;grid-template-rows:56px minmax(0,1fr) 64px;overflow:hidden;background:#fff}
.wz .hd .h2{min-width:0}
.wzm{display:grid;grid-template-columns:240px minmax(0,1fr) 440px;min-height:0}
.wzm>*{min-height:0}
.wsteps{border-right:1px solid var(--nevoa);padding:20px 12px;background:#FBFBFC;display:flex;flex-direction:column;gap:2px}
.ws{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:8px;color:var(--chumbo);width:100%;text-align:left;border:1px solid transparent}
.ws:hover{background:var(--gelo)}
.ws .n{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--prata);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.ws.done .n{background:var(--grafite);border-color:var(--grafite);color:#fff}
.ws.on{background:#fff;color:var(--tinta);font-weight:600;box-shadow:var(--sh-1);border-color:var(--nevoa)}
.ws.on .n{border-color:var(--tinta);color:var(--tinta)}
.wnota{padding:14px 10px}
.wc{overflow:auto;padding:28px 32px 40px}
.cq-passo{max-width:760px}
.wp{background:var(--gelo);border-left:1px solid var(--nevoa);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px}
.wp .phone{height:min(640px,calc(100vh - 220px));min-height:480px;width:340px}
.wf{display:flex;align-items:center;gap:10px;padding:0 24px;border-top:1px solid var(--nevoa);background:#fff}
.start{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.so{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--linha);border-radius:var(--r);background:#fff;text-align:left;cursor:pointer}
.so:hover{border-color:var(--metal)}
.so.on{border-color:var(--tinta);box-shadow:0 0 0 1px var(--tinta)}
.so .top{display:flex;align-items:center;justify-content:space-between}
.so .t{font-weight:700;font-size:14px}
.so .d{font-size:12px;color:var(--chumbo);line-height:1.4}
.fil{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 12px}
.fil button{height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--linha);font-size:12px;background:#fff;color:var(--grafite)}
.fil button.on{background:var(--tinta);border-color:var(--tinta);color:#fff}
.tg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tc{border:1px solid var(--nevoa);border-radius:var(--r);background:#fff;overflow:hidden;cursor:pointer;text-align:left;padding:0;display:flex;flex-direction:column;align-items:stretch}
.tc:hover{border-color:var(--metal)}
.tc.on{border-color:var(--tinta);box-shadow:0 0 0 1px var(--tinta)}
.tc .pv{height:118px;background:var(--gelo);display:grid;place-items:center;position:relative}
.tc .mini{width:72px;height:100px;border-radius:10px;background:#fff;border:1px solid var(--nevoa);padding:9px 8px;display:flex;flex-direction:column;gap:5px}
.tc .mini i{display:block;height:4px;border-radius:2px;background:var(--nevoa)}
.tc .mini b{display:block;height:13px;border-radius:3px;margin-top:auto}
.tc .bd{padding:10px 12px 12px}
.tc .ck{position:absolute;top:10px;right:10px}
.cq-desc{margin-top:6px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tone{display:grid;gap:8px}
.tone>button{display:grid;grid-template-columns:18px 1fr;gap:10px;padding:12px 14px;border:1px solid var(--linha);border-radius:10px;background:#fff;cursor:pointer;text-align:left;align-items:start}
.tone>button .rd{margin-top:1px}
.tone>button.on{border-color:var(--tinta);box-shadow:0 0 0 1px var(--tinta)}
.tone .ex{font-size:12px;color:var(--chumbo);margin-top:3px;font-style:italic}
.swg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.swg .f .v{overflow:visible}
.swg input[type=color]{width:22px;height:22px;padding:0;border:1px solid var(--nevoa);border-radius:5px;background:none;flex:none;cursor:pointer;display:inline-block}
.swg input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.swg input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
.swg input[data-cor-hex]{font-variant-numeric:tabular-nums}
.drop{border:1.5px dashed var(--prata);border-radius:var(--r);padding:16px;display:flex;align-items:center;gap:14px;background:#fff}
.cq-logo{width:96px;height:48px;border:1px solid var(--nevoa);border-radius:10px;display:grid;place-items:center;flex:none;color:var(--t3);overflow:hidden}
.cq-logo img{max-width:88px;max-height:40px;object-fit:contain}
.cq-previa-nota{text-align:center}

@media (max-width:1180px){
  .wzm{grid-template-columns:200px minmax(0,1fr)}
  .wp{display:none}
  .tg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .wz{grid-template-rows:56px minmax(0,1fr) auto}
  .wzm{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .wsteps{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--nevoa);padding:8px 12px;gap:6px}
  .ws{width:auto;flex:none;height:34px}
  .ws:not(.on) .ell{display:none}
  .wnota{display:none}
  .wc{padding:20px 16px 32px}
  .start,.tg,.swg,.fg2{grid-template-columns:minmax(0,1fr)}
  .wf{padding:10px 16px;flex-wrap:wrap}
}