/* TR242 Lives - PWA do iPhone (mockup v2 aprovado pelo Vitor 05/11 10:03 + valor vendido). Fonte minima 16px. */
:root{--bg:#0b0b0d;--card:#17171b;--card2:#202026;--line:#2c2c34;--txt:#fff;--sub:#c9cfdb;
--red:#E3001B;--yel:#FFD23F;--grn:#2ee27a;--amb:#ffb020;
--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;color:var(--txt);font-size:17px;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
.tela{height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;position:relative;overflow:hidden;padding-top:var(--st)}
.faixa{height:6px;flex:none;background:repeating-linear-gradient(135deg,var(--red) 0 18px,var(--yel) 18px 36px)}
.top{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;flex:none}
.logo{font-weight:900;font-size:22px;letter-spacing:.5px}
.logo b{color:var(--yel)} .logo i{font-style:normal;background:var(--red);padding:2px 8px;border-radius:6px;margin-left:6px;font-size:16px}
.sair{font-size:16px;color:var(--sub);border:1px solid var(--line);padding:7px 14px;border-radius:12px}
.conteudo{flex:1;padding:2px 16px 10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
.mac{background:#3a2a05;border:1px solid var(--amb);color:#ffd27a;border-radius:14px;padding:8px 12px;font-size:16px;line-height:1.3}
.status{border-radius:20px;padding:10px 18px;display:flex;align-items:center;gap:14px;background:var(--card);border:2px solid var(--line)}
.status.verde{background:linear-gradient(135deg,#0f3d24,#0c2a1a);border-color:var(--grn)}
.status.vermelho{background:linear-gradient(135deg,#3d0f15,#2a0c10);border-color:var(--red)}
.status.amarelo{background:linear-gradient(135deg,#3d300f,#2a210c);border-color:var(--amb)}
.bola{width:22px;height:22px;border-radius:50%;flex:none;background:#555}
.bola.v{background:var(--grn);box-shadow:0 0 12px var(--grn)} .bola.r{background:var(--red);box-shadow:0 0 12px var(--red)}
.bola.a{background:var(--amb);box-shadow:0 0 10px var(--amb)} .bola.c{background:#555}
.status h1{font-size:24px;line-height:1.1}
.status p{font-size:17px;color:#bdf5d3;margin-top:3px}
.status.vermelho p,.status.amarelo p{color:#f3d9c0}
.metricas{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.met,.val{background:var(--card);border-radius:16px;padding:8px 10px;border:1px solid var(--line);min-width:0}
.met small,.val small{display:block;font-size:16px;color:var(--sub);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.met strong{font-size:24px;display:block;margin-top:2px;font-variant-numeric:tabular-nums}
.valores{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.val{border-color:#5a4a12;background:linear-gradient(135deg,#1f1b0c,#17171b)}
.val strong{font-size:22px;display:block;margin-top:2px;color:var(--yel);font-variant-numeric:tabular-nums;white-space:nowrap}
.amarelo{color:var(--yel)} .verde{color:var(--grn)} .vermelho{color:#ff5a6a}
.relogios{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rel{background:var(--card);border-radius:16px;padding:8px 12px;border:1px solid var(--line)}
.rel small{display:block;font-size:16px;color:var(--sub)}
.rel strong{font-size:24px;font-variant-numeric:tabular-nums}
.rel strong span{font-size:16px;color:var(--sub);font-weight:600;margin-left:6px}
.rel.destaque{border-color:var(--yel)} .rel.destaque strong{color:var(--yel)}
.rod{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px 10px 10px}
.rod-t{font-size:16px;color:var(--sub);font-weight:600;margin:0 0 7px 4px;display:flex;justify-content:space-between}
.rod-t b{color:var(--yel)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#0f0f12;border-radius:13px;padding:4px}
.seg button{height:50px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:700;color:var(--sub);text-align:center;line-height:1.1}
.seg button.on{background:var(--yel);color:#000}
.seg .rd{width:20px;height:20px;border-radius:50%;border:2px solid #666;flex:none}
.seg .on .rd{border:6px solid #000;background:var(--yel)}
.btn{border:0;border-radius:20px;font-size:21px;font-weight:800;padding:0 18px;height:58px;display:flex;align-items:center;gap:14px;width:100%;color:#fff;letter-spacing:.3px;flex:none}
.btn:disabled{opacity:.38}
.btn .ic{width:40px;height:40px;border-radius:12px;background:rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;font-size:20px}
.ic2{font-size:26px}
.b-loop{background:var(--grn);color:#062b16}
.b-parar{background:var(--card2);border:2px solid var(--amb);color:var(--amb)}
.b-vivo{background:var(--red)}
.b-enc{background:transparent;border:2px solid var(--red);color:#ff5a6a;height:52px;font-size:19px;justify-content:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 .btn{flex-direction:column;justify-content:center;height:76px;gap:4px;font-size:18px;text-align:center}
.grid2 .btn.m0{height:56px;font-size:19px;margin:0}
.nav{height:64px;flex:none;border-top:1px solid var(--line);background:#111114;display:flex;justify-content:space-around;padding-top:7px;box-sizing:content-box;padding-bottom:max(var(--sb),8px)}
.nav button{font-size:16px;color:var(--sub);text-align:center;width:96px}
.nav button span{display:block;font-size:24px;line-height:1.1;margin-bottom:1px}
.nav .on{color:var(--yel);font-weight:700}
.escuro{position:absolute;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:flex-end;z-index:10}
.folha{background:#1b1b20;width:100%;border-radius:28px 28px 0 0;padding:12px 18px calc(var(--sb) + 14px);border-top:4px solid var(--red);max-height:92%;overflow-y:auto}
.folha.verde{border-top-color:var(--grn)} .folha.amarela{border-top-color:var(--yel)}
.puxa{width:50px;height:5px;background:#555;border-radius:3px;margin:0 auto 14px}
.folha .grande{width:76px;height:76px;border-radius:50%;background:rgba(227,0,27,.18);border:3px solid var(--red);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:34px}
.folha.verde .grande{background:rgba(46,226,122,.15);border-color:var(--grn)} .folha.amarela .grande{background:rgba(255,210,63,.15);border-color:var(--yel)}
.folha h2{font-size:25px;text-align:center}
.folha .txt{font-size:17px;color:var(--sub);margin:8px 0 12px;line-height:1.4;white-space:pre-line;max-height:30vh;overflow-y:auto}
.resumo{background:var(--card2);border-radius:16px;padding:12px 16px;font-size:17px;line-height:1.65;margin-bottom:14px}
.resumo b{color:var(--yel)}
.bloq{background:#3d0f15;border:1px solid var(--red);border-radius:14px;padding:10px 14px;font-size:16px;line-height:1.35;margin-bottom:12px;color:#ffd0d6}
.b-sim{background:var(--red);justify-content:center;height:66px;font-size:22px}
.b-sim.verde{background:var(--grn);color:#062b16} .b-sim.amarela{background:var(--yel);color:#000}
.b-nao{background:var(--card2);justify-content:center;margin-top:10px;height:58px;color:#fff;border:1px solid #444;font-size:19px}
.segura{font-size:16px;color:var(--sub);text-align:center;margin-top:10px}
.esperando{text-align:center;color:var(--sub);font-size:18px;padding:24px 0}
.titulo{font-size:26px;font-weight:800;padding:2px 2px 0}
.lab{display:block;font-size:16px;color:var(--sub);margin:0 0 6px 4px;font-weight:600}
.lab.sem-m{margin-bottom:0}
.sel{background:var(--card);border:2px solid var(--line);border-radius:16px;height:58px;display:flex;align-items:center;padding:0 16px;font-size:18px;justify-content:space-between;width:100%;text-align:left}
.sel .seta{color:var(--yel);font-size:20px}
.sel .mini{width:46px;height:34px;border-radius:7px;background:linear-gradient(135deg,#3a1015,#6a4a10);margin-right:12px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px}
.sel .t{display:flex;align-items:center;min-width:0}
.sel .t span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aberto{border:2px solid var(--yel);border-radius:16px;overflow:hidden;background:#222228;margin-bottom:12px;max-height:45vh;overflow-y:auto}
.op{min-height:54px;display:flex;align-items:center;gap:12px;padding:6px 16px;border-bottom:1px solid #34343c;font-size:18px;width:100%;text-align:left}
.op:last-child{border:0}
.op .rd{width:24px;height:24px;border-radius:50%;border:2px solid #666;flex:none}
.op.on{background:rgba(255,210,63,.12)}
.op.on .rd{border:7px solid var(--yel)}
.op .tx{flex:1;line-height:1.2;min-width:0;overflow-wrap:anywhere}
.op .tx small{display:block;font-size:16px;color:var(--sub);font-weight:400}
.op.on .tx{color:var(--yel);font-weight:700}
.op.novo{color:var(--grn);font-weight:800}
.op.novo .rd{border:0;background:var(--grn);color:#062b16;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900}
.contas-top{display:flex;justify-content:space-between;align-items:flex-end;margin-top:2px}
.contas-top .tudo{font-size:16px;color:var(--yel);font-weight:700}
.lista{background:var(--card);border-radius:18px;border:1px solid var(--line);overflow:hidden;flex:none}
.conta{display:flex;align-items:center;gap:12px;padding:0 14px;min-height:52px;border-bottom:1px solid var(--line);font-size:17px;width:100%;text-align:left}
.conta:last-child{border:0}
.conta .bola{width:14px;height:14px}
.conta .nome{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;padding:6px 0}
.conta .nome em{font-style:normal;color:#ff5a6a;font-size:16px;display:block;white-space:normal}
.conta.desl .nome{color:#888}
.chk{width:30px;height:30px;border-radius:9px;border:2px solid #555;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900;flex:none}
.chk.on{background:var(--yel);border-color:var(--yel);color:#000}
.salvar{background:var(--yel);color:#000;justify-content:center;height:60px}
.passos{display:flex;gap:8px;justify-content:center}
.passos i{width:34px;height:8px;border-radius:4px;background:#333}
.passos i.on{background:var(--yel)}
.passo{background:var(--card);border-radius:18px;border:1px solid var(--line);padding:12px 14px;display:flex;gap:12px;align-items:center;margin-bottom:9px}
.num{width:34px;height:34px;border-radius:50%;background:var(--yel);color:#000;font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center;flex:none}
.passo h3{font-size:19px}
.passo p{font-size:16px;color:var(--sub);line-height:1.3;margin-top:2px}
.passo p b{color:#fff} .passo p b.verde{color:var(--grn)} .passo p b.vermelho{color:#ff5a6a}
.desenho{width:62px;height:62px;flex:none;border-radius:14px;background:#0f0f12;display:flex;align-items:center;justify-content:center}
.pi{padding:9px 12px}.pi .desenho{width:52px;height:52px}
.icone-mini{background:linear-gradient(135deg,#E3001B,#7a0010)!important}
.icone-mini span{font-weight:900;font-size:16px;color:#FFD23F}
.passo.atual{border:2px solid var(--yel);background:#1f1c10}
.aviso{background:#111114;border:1px dashed var(--yel);border-radius:16px;padding:10px 14px;font-size:16px;line-height:1.4;color:var(--sub)}
.aviso b{color:var(--yel)}
.login{display:flex;flex-direction:column;gap:12px;margin:8px 0 6px}
.campo{background:var(--card);border:2px solid var(--line);border-radius:16px;height:58px;padding:0 16px;font-size:20px;color:#fff;width:100%}
.campo:focus{outline:none;border-color:var(--yel)}
.msg{min-height:22px;color:#ff5a6a;font-size:17px;text-align:center}
.toast{position:absolute;left:16px;right:16px;bottom:calc(var(--sb) + 84px);background:#26262d;border:1px solid var(--line);border-radius:16px;padding:12px 16px;font-size:17px;line-height:1.35;z-index:20;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.toast.ok{border-color:var(--grn)} .toast.erro{border-color:var(--red)}
.espaco{height:12px}