/* ============================================================
   TECHILL · DESIGN SYSTEM · componentes.css  (v1 — 15/09/2026)
   Mobile-first, arquivo único, sem build. Cada componente tem
   estado vazio/carregando quando faz sentido. Toque mínimo 44px.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--fundo);color:var(--tinta);font:var(--t-14)/1.45 var(--fonte-texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
button{font:inherit;color:inherit}
.serif{font-family:var(--fonte-titulo);font-weight:800;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.oculto{display:none!important}

/* ---------- casca ---------- */
#app{max-width:var(--largura-app);margin:0 auto;min-height:100%;padding-bottom:calc(var(--altura-nav) + 40px);position:relative}
.topo{background:radial-gradient(circle at 85% -20%,rgba(255,255,255,.22),transparent 52%),linear-gradient(165deg,var(--marca-fundo) 0%,var(--marca) 60%,var(--marca-2) 100%);color:var(--marca-tinta);padding:18px 16px 60px;border-radius:0 0 var(--r-xg) var(--r-xg);position:relative;overflow:hidden}
.topo::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.6px);background-size:18px 18px;pointer-events:none}
.topo>*{position:relative}
.cabeca{display:flex;align-items:center;gap:12px}
.cabeca .quando{font-size:var(--t-12);font-weight:600;opacity:.8;letter-spacing:.04em;text-transform:uppercase}
.cabeca h1{font-size:24px;line-height:1;color:var(--marca-tinta)}
.logo-cliente{width:64px;height:52px;border-radius:var(--r-m);background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 rgba(255,255,255,.4) inset,var(--sombra-forte);padding:3px;overflow:hidden;flex:0 0 auto}
.logo-cliente img{width:100%;height:100%;object-fit:contain}
.logo-cliente.grande{width:150px;height:118px;margin:14px auto 12px;border-radius:22px;padding:8px}
.icone-btn{width:40px;height:40px;border-radius:var(--r-pill);background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;border:0;color:var(--marca-tinta);cursor:pointer;flex:0 0 auto;font-weight:800;font-size:16px}
.sobe{margin:-46px 16px 0;display:flex;flex-direction:column;gap:12px}
.secao{margin:16px 16px 0;display:flex;flex-direction:column;gap:12px}

/* ---------- cartão ---------- */
.cartao{background:var(--card);border-radius:var(--r-g);box-shadow:var(--sombra-media);padding:16px}
.cartao.leve{box-shadow:var(--sombra-leve);border-radius:var(--r-m);padding:12px 14px}
.cartao.toque{transition:transform var(--dur-toque) ease;cursor:pointer}
.cartao.toque:active{transform:scale(.985)}
.linha-titulo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.linha-titulo h2{font-size:var(--t-18)}
.mini{font-size:var(--t-12);font-weight:700;color:var(--cinza)}
.tit-mini{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza)}
.frase{font-size:15px;line-height:1.55;color:var(--tinta-2)}
.frase b{color:var(--tinta)}
.divisor{margin-top:12px;padding-top:12px;border-top:1px solid var(--linha)}

/* ---------- botão ---------- */
.botao{min-height:var(--toque-min);border:0;border-radius:var(--r-m);padding:10px 16px;font-weight:800;font-size:var(--t-14);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform var(--dur-toque) ease,opacity var(--dur-toque) ease;background:var(--card-2);color:var(--tinta)}
.botao:active{transform:scale(.97)}
.botao:disabled{opacity:.55;cursor:default}
.botao.escuro{background:var(--marca);color:var(--marca-tinta)}
.botao.claro{background:var(--card-2);color:var(--tinta)}
.botao.contorno{background:transparent;border:1.5px solid var(--linha);color:var(--tinta)}
.botao.perigo{background:var(--problema-bg);color:var(--problema-tx)}
.botao.largo{width:100%}
.botao.pequeno{min-height:34px;padding:6px 12px;font-size:var(--t-13);border-radius:var(--r-s)}
.volta{background:none;border:0;padding:0;font-weight:800;color:var(--marca);cursor:pointer;font-size:var(--t-13);min-height:var(--toque-min);display:inline-flex;align-items:center}

/* ---------- campo ---------- */
.campo{width:100%;min-height:var(--toque-min);border:1.5px solid var(--linha);border-radius:var(--r-m);padding:10px 14px;font-size:var(--t-16);background:var(--card);color:var(--tinta);margin-bottom:10px;outline:none;transition:border-color var(--dur-media)}
.campo:focus{border-color:var(--marca-2)}
.campo.erro{border-color:var(--problema)}
textarea.campo{min-height:88px;resize:vertical;font-family:inherit}
.rotulo{display:block;font-size:var(--t-12);font-weight:800;color:var(--tinta-2);margin:0 0 6px 2px;letter-spacing:.02em}
.msg-campo{font-size:var(--t-12);min-height:16px;margin-top:-4px;margin-bottom:8px}
.msg-campo.erro{color:var(--problema-tx)}.msg-campo.ok{color:var(--ok-tx)}
.interruptor{display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-height:var(--toque-min)}
.interruptor input{display:none}
.interruptor i{width:44px;height:26px;border-radius:var(--r-pill);background:var(--linha);position:relative;transition:background var(--dur-media)}
.interruptor i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--dur-media) var(--curva-entrada)}
.interruptor input:checked+i{background:var(--ok)}
.interruptor input:checked+i::after{transform:translateX(18px)}

/* ---------- chip, tag, situação ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:6px 11px;font-weight:700;font-size:var(--t-13);background:var(--card-2);color:var(--tinta-2)}
.chip i{width:9px;height:9px;border-radius:99px;display:inline-block;background:var(--cinza-2)}
.chip.ok{background:var(--ok-bg);color:var(--ok-tx)}.chip.ok i{background:var(--ok)}
.chip.atencao{background:var(--atencao-bg);color:var(--atencao-tx)}.chip.atencao i{background:var(--atencao)}
.chip.problema{background:var(--problema-bg);color:var(--problema-tx)}.chip.problema i{background:var(--problema)}
.chip.info{background:var(--info-bg);color:var(--info-tx)}.chip.info i{background:var(--info)}
.tag{display:inline-block;border-radius:6px;padding:2px 7px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--card-2);color:var(--cinza)}
.status-frase{font-size:var(--t-13);font-weight:600;color:var(--tinta-2);line-height:1.4}
.status-frase.problema{color:var(--problema-tx)}.status-frase.atencao{color:var(--atencao-tx)}.status-frase.ok{color:var(--ok-tx)}

/* ---------- placa de número (aprovada: "número em plaquinha") ---------- */
.placa{font-family:var(--fonte-titulo);font-weight:700;font-size:.82em;background:linear-gradient(180deg,#FFE9A8,#FFD96E);color:#6d5106;border-radius:.5em;padding:.06em .42em;margin-left:.38em;vertical-align:.06em;display:inline-block;line-height:1.25;box-shadow:var(--relevo)}
.placa.marca{background:var(--marca);color:var(--marca-tinta);box-shadow:none}
.placa.ok{background:linear-gradient(180deg,#CFF0D8,#AEE3BF);color:#1d6b3a}

/* ---------- estatística (tile) ---------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.stats.duas{grid-template-columns:repeat(2,minmax(0,1fr))}
.st{background:var(--card-2);border-radius:var(--r-s);padding:10px 6px;text-align:center}
.st .n{font-family:var(--fonte-titulo);font-weight:700;font-size:var(--t-22);line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums}
.st .r{font-size:10.5px;color:var(--cinza);font-weight:600;margin-top:4px;line-height:1.25}
.st.destaque{background:var(--info-bg)}.st.destaque .n{color:var(--info-tx)}
.st.ok{background:var(--ok-bg)}.st.ok .n{color:var(--ok-tx)}
.st.atencao{background:var(--atencao-bg)}.st.atencao .n{color:var(--atencao-tx)}
.st.problema{background:var(--problema-bg)}.st.problema .n{color:var(--problema-tx)}
.st .n.fraco{color:var(--cinza-2);font-family:var(--fonte-texto);font-weight:600;font-size:15px}

/* ---------- barra de progresso (segmentada) ---------- */
.barra-seg{display:flex;gap:4px;margin:12px 0}
.barra-seg i{flex:1;height:8px;border-radius:var(--r-pill);background:var(--linha)}
.barra-seg i.on{background:var(--ok)}.barra-seg i.atencao{background:var(--atencao)}.barra-seg i.problema{background:var(--problema)}

/* ---------- lista / linha ---------- */
.lista{display:flex;flex-direction:column;gap:8px}
.linha{display:flex;align-items:center;gap:10px;background:var(--card-2);border-radius:var(--r-s);padding:10px 12px;min-height:var(--toque-min)}
.linha .cresce{flex:1;min-width:0}
.linha .nome{font-weight:800;font-size:var(--t-13);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linha .sub{font-size:var(--t-12);color:var(--cinza);font-weight:600}
.linha .valor{font-family:var(--fonte-titulo);font-weight:700;font-size:var(--t-18);font-variant-numeric:tabular-nums}

/* ---------- tabela (rola dentro dela, nunca a página) ---------- */
.tabela-rolo{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
.tabela{width:100%;border-collapse:collapse;font-size:var(--t-13)}
.tabela th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza);font-weight:800;padding:8px 6px;border-bottom:1px solid var(--linha);white-space:nowrap}
.tabela td{padding:9px 6px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tabela td.n,.tabela th.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:800}
.tabela tr:last-child td{border-bottom:0}

/* ---------- estado vazio / carregando / aviso ---------- */
.vazio{text-align:center;padding:22px 14px;color:var(--tinta-2);font-size:var(--t-14);line-height:1.5}
.vazio b{display:block;color:var(--tinta);font-size:var(--t-16);margin-bottom:4px}
.vazio .ico{font-size:32px;margin-bottom:8px;opacity:.5}
.esqueleto{background:linear-gradient(90deg,var(--card-2) 25%,#eef0ec 37%,var(--card-2) 63%);background-size:400% 100%;border-radius:var(--r-s);min-height:14px}
html.fx-ligado .esqueleto{animation:brilhar 1.4s ease infinite}
@keyframes brilhar{0%{background-position:100% 0}100%{background-position:0 0}}
.esqueleto.linha-e{height:14px;margin:8px 0}.esqueleto.bloco{height:72px}
.aviso{border-radius:var(--r-m);padding:12px 14px;font-size:var(--t-13);font-weight:600;line-height:1.45;display:flex;gap:10px;align-items:flex-start}
.aviso.info{background:var(--info-bg);color:var(--info-tx)}.aviso.atencao{background:var(--atencao-bg);color:var(--atencao-tx)}.aviso.problema{background:var(--problema-bg);color:var(--problema-tx)}.aviso.ok{background:var(--ok-bg);color:var(--ok-tx)}

/* ---------- modal (sobe de baixo, como app nativo) ---------- */
.modal{position:fixed;inset:0;background:rgba(10,14,20,.55);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.modal .caixa{background:var(--card);width:100%;max-width:var(--largura-app);border-radius:var(--r-g) var(--r-g) 0 0;padding:18px 16px 28px;max-height:88vh;overflow:auto;box-shadow:0 -10px 40px rgba(0,0,0,.25)}
html.fx-ligado .modal .caixa{animation:subir var(--dur-entrada) var(--curva-entrada) both}
@keyframes subir{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.modal .alca{width:40px;height:4px;border-radius:99px;background:var(--linha);margin:-6px auto 12px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--altura-nav) + 16px);transform:translateX(-50%);background:var(--tinta);color:#fff;border-radius:var(--r-m);padding:10px 16px;font-weight:700;font-size:var(--t-13);box-shadow:var(--sombra-media);z-index:60;max-width:calc(100% - 32px);opacity:0;pointer-events:none;transition:opacity var(--dur-media)}
.toast.on{opacity:1}
.toast.ok{background:var(--ok-tx)}.toast.problema{background:var(--problema-tx)}

/* ---------- navegação inferior ---------- */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--largura-app);height:var(--altura-nav);background:var(--card);border-top:1px solid var(--linha);display:flex;z-index:40;padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;border:0;background:none;font-weight:800;font-size:11.5px;color:var(--cinza);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;min-height:var(--toque-min)}
.nav button .ico{font-size:20px;line-height:1}
.nav button.on{color:var(--marca)}

/* ---------- rodapé com versão + chave de efeitos ---------- */
.rodape{margin:20px 16px 0;text-align:center;font-size:var(--t-11);color:var(--cinza);font-weight:600;line-height:1.6}
.rodape b{color:var(--tinta-2)}

/* ---------- movimento: entradas escalonadas (CSS = plano B sem GSAP) ---------- */
@keyframes surgir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes boiar{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-3px) rotate(1.2deg)}}
html.fx-ligado .sobe>*,html.fx-ligado .secao>.cartao{animation:surgir var(--dur-entrada) var(--curva-entrada) both}
html.fx-ligado .secao>.cartao:nth-child(2){animation-delay:.04s}html.fx-ligado .secao>.cartao:nth-child(3){animation-delay:.08s}html.fx-ligado .secao>.cartao:nth-child(4){animation-delay:.12s}html.fx-ligado .secao>.cartao:nth-child(5){animation-delay:.16s}html.fx-ligado .secao>.cartao:nth-child(6){animation-delay:.2s}
html.fx-ligado .logo-cliente.viva{animation:boiar 4.5s var(--curva-suave) infinite}
/* Sem efeitos ou com "menos movimento": TUDO parado e VISÍVEL (lição do iPhone com bateria fraca). */
@media (prefers-reduced-motion: reduce){ html:not(.fx-ligado) *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }

/* ---------- impressão / modo apresentação ---------- */
@media print{ .nav,.rodape,.icone-btn{display:none!important} #app{padding-bottom:0} .cartao{box-shadow:none;border:1px solid var(--linha)} }