/* MindTCG Leitor (iq) — LAYOUT da Central (câmera em cima + trilho embaixo + menu ao tocar).
   CORES do zip do leitor: câmera escura (#111418), folha clara (#F4F5F7), moldura branca->âmbar,
   botão "Ver na Liga" escuro, âmbar só na bolinha/cantos, bolinha azul ao reconhecer. */
:root{
  --bg:#F4F5F7; --surface:#FFFFFF; --surface2:#EEF1F4; --border:#DADDE2;
  --text:#111418; --text2:#6B7686; --primary:#111418; --on-primary:#FFFFFF;
  --ink-link:#4A6587; --accent:#E0A21C; --cam-bg:#111418;
  --aco:#93ADCB; --aco-ink:#4A6587;   /* azul claro / aço metálico — destaques refinados (o ouro fica só na bolinha + cantos ao reconhecer) */
}
*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; } .hidden{ display:none !important; }
html,body{ height:100%; }
body{ background:var(--bg); color:var(--text); font-family:"Manrope",system-ui,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ display:block; } button{ font-family:inherit; cursor:pointer; } .ph{ line-height:1; }

/* ---------- SPLASH ---------- */
.iq-splash{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:200; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .4s ease; }
.iq-splash.sai{ opacity:0; pointer-events:none; }
.iq-splash .an{ width:128px; height:128px; margin-bottom:24px; }
.iq-splash img{ width:224px; max-width:62vw; height:auto; }
.iq-splash .sl{ margin-top:14px; color:var(--text2); font-size:14px; }

/* ---------- APP (layout da Central) ---------- */
.cam{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:10; background:var(--cam-bg);
  display:flex; flex-direction:column; }
.cam-top{ flex:none; min-height:54px; display:flex; align-items:center; padding:env(safe-area-inset-top) 14px 0; color:#fff; }
.cam-logo{ flex:none; height:28px; width:auto; margin-right:10px; }
.cam-tt{ flex:1; min-width:0; line-height:1.15; }
.cam-tt b{ display:block; font-size:15px; font-weight:800; }
.cam-tt small{ display:block; font-size:11.5px; color:#A9B2C1; font-weight:600; }

.cam-visor{ flex:none; position:relative; height:46vh; min-height:250px; max-height:560px; overflow:hidden; background:var(--cam-bg); }
#cam-video{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.cam-mira{ position:absolute; left:50%; top:50%; width:52%; max-width:220px; height:74%;
  transform:translate(-50%,-54%); pointer-events:none; }
.cam-mira b{ position:absolute; width:26px; height:26px; border:4px solid rgba(255,255,255,.78); transition:border-color .15s; }
.cam-mira.ok b{ border-color:var(--accent); }
.cam-mira b:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0; border-radius:10px 0 0 0; }
.cam-mira b:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; border-radius:0 10px 0 0; }
.cam-mira b:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; border-radius:0 0 0 10px; }
.cam-mira b:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; border-radius:0 0 10px 0; }

.cam-vb{ position:absolute; top:12px; width:40px; height:40px; border-radius:50%; background:rgba(17,20,24,.55);
  color:#fff; border:0; display:flex; align-items:center; justify-content:center; font-size:19px; z-index:3; }
.cam-vb.l{ left:12px; } .cam-vb.r{ right:12px; } .cam-vb.on{ background:var(--accent); color:#111418; }

.cam-status{ position:absolute; left:12px; right:12px; bottom:18px; display:flex; align-items:center;
  background:rgba(17,20,24,.86); color:#fff; border-radius:14px; padding:8px 10px; z-index:2; }
.cam-status .ic{ flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  margin-right:9px; font-size:17px; background:#1A1F26; color:var(--accent); }
.cam-status .ic.ic--load{ background:#1A1F26; padding:0; } .cam-status .ic.ic--load svg{ display:block; }
.cam-st-tx{ min-width:0; } .cam-st-tx b{ display:block; font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cam-st-tx small{ display:block; font-size:11.5px; color:#A9B2C1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cam-disp{ position:absolute; left:50%; bottom:16px; margin-left:-27px; width:54px; height:54px; border-radius:50%;
  border:3px solid #fff; background:rgba(255,255,255,.18); z-index:3; }
.cam-disp:active{ background:rgba(255,255,255,.35); }

/* folha CLARA com o trilho */
.cam-folha{ flex:1; min-height:0; background:var(--bg); border-radius:18px 18px 0 0; margin-top:-14px; position:relative;
  display:flex; flex-direction:column; }
.cam-corpo{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:18px 16px calc(14px + env(safe-area-inset-bottom)); }
.cam-corpo.lendo .cam-trilho{ opacity:.6; transition:opacity .15s; }

.cam-trilho{ display:flex; flex-wrap:wrap; }
.cam-trilho .cam-op, .cam-trilho .cam-esq{ width:calc((100% - 14px) / 3); margin:0 7px 7px 0; }
.cam-trilho .cam-op:nth-child(3n), .cam-trilho .cam-esq:nth-child(3n){ margin-right:0; }
.cam-op{ position:relative; display:block; padding:0; border:0; background:none; text-align:left; cursor:pointer; }
.cam-card{ display:block; border-radius:10px; overflow:hidden; border:1px solid var(--border); background:var(--surface2); }
.cam-op.melhor .cam-card{ border-color:var(--aco); box-shadow:inset 0 0 0 2px var(--aco); }
.cam-selo{ position:absolute; right:5px; top:5px; z-index:3; width:21px; height:21px; border-radius:50%;
  background:var(--accent); color:#111418; display:flex; align-items:center; justify-content:center; font-size:12px; box-shadow:0 1px 3px rgba(17,20,24,.3); }

.aspect-card{ position:relative; width:100%; padding-top:139.6%; }
.tile-img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.tile-scrim{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 7px 7px;
  background:linear-gradient(to top, rgba(17,20,24,.82), rgba(17,20,24,0)); pointer-events:none; }
.tile-linha{ display:flex; align-items:baseline; min-width:0; }
.tile-nome{ color:#fff; font-size:12px; font-weight:700; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tile-num{ flex:none; color:rgba(255,255,255,.75); font-size:9.5px; font-weight:600; margin-left:4px; }
.tile-ed{ color:rgba(255,255,255,.7); font-size:9.5px; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cam-esq .skel{ width:100%; padding-top:139.6%; border-radius:12px; border:1px solid var(--border);
  background:linear-gradient(100deg, var(--surface2) 30%, #F6F8FA 50%, var(--surface2) 70%); background-size:200% 100%; animation:iqSkel 1.3s linear infinite; }
@keyframes iqSkel{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ---------- menu de ações (ao tocar) ---------- */
.cam-acoes{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:40; background:rgba(2,6,23,.45);
  display:flex; flex-direction:column; justify-content:flex-end; }
.cam-acoes-card{ background:var(--surface); border-radius:18px 18px 0 0; padding:16px 16px calc(18px + env(safe-area-inset-bottom)); max-width:520px; width:100%; margin:0 auto; }
.cam-acoes-cab{ margin-bottom:12px; } .cam-acoes-cab b{ display:block; font-size:16px; font-weight:800; }
.cam-acoes-cab span{ font-size:12.5px; color:var(--text2); }
.cam-acao{ width:100%; display:flex; align-items:center; justify-content:center; padding:14px; border-radius:13px;
  font-weight:700; font-size:15px; border:1px solid transparent; }
.cam-acao + .cam-acao{ margin-top:8px; } .cam-acao i{ font-size:18px; margin-right:8px; }
.cam-acao-liga{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.cam-acao-x{ background:none; color:var(--text2); }

/* ---------- painel da Liga (iframe) ---------- */
.liga-fundo{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:130; background:var(--surface);
  display:flex; flex-direction:column; }
.liga-painel{ background:var(--surface); width:100%; height:100%; margin:0; display:flex; flex-direction:column; overflow:hidden; }
.liga-cab{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; padding-top:calc(12px + env(safe-area-inset-top)); border-bottom:1px solid var(--border); }
.liga-cab b{ font-size:15px; } .liga-cab .dir{ display:flex; align-items:center; }
.liga-abrir{ color:var(--ink-link); font-weight:700; font-size:13.5px; text-decoration:none; margin-right:14px; }
.liga-x{ background:none; border:0; font-size:20px; color:var(--text2); line-height:1; }
.liga-corpo{ flex:1 1 auto; position:relative; } #ligaFrame{ width:100%; height:100%; border:0; }
.liga-bloq{ position:absolute; top:0; right:0; bottom:0; left:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; }
.liga-bloq p{ color:var(--text2); margin-bottom:16px; }
.liga-bloq a{ background:var(--primary); color:#fff; text-decoration:none; border-radius:12px; padding:13px 18px; font-weight:700; display:inline-flex; align-items:center; }
.liga-bloq a i{ margin-right:8px; }

@media (min-width:560px){
  .cam-folha{ max-width:560px; margin-left:auto; margin-right:auto; width:100%; }
  .cam-trilho .cam-op, .cam-trilho .cam-esq{ width:calc(25% - 9px); }
  .cam-trilho .cam-op:nth-child(3n), .cam-trilho .cam-esq:nth-child(3n){ margin-right:12px; }
  .cam-trilho .cam-op:nth-child(4n), .cam-trilho .cam-esq:nth-child(4n){ margin-right:0; }
}