/* =========================================================
   KIT DE TI — ferramentas/kit.html · js/kit.js
   A base (painel, abas, campos, dados, tabela) vem de css/calculadora-rede.css;
   aqui ficam só as peças próprias de cada ferramenta.
   ========================================================= */

#kit-app { min-height: 640px; }
.kit-abas { margin-bottom: 1.5rem; }
.kit-sub { justify-self: start; margin-bottom: .25rem; }
.kit-sub button[aria-checked="true"] { background: color-mix(in srgb, var(--cream) 14%, transparent); color: var(--cream); }
#kit-corpo { display: grid; gap: 1.1rem; }
#kit-corpo > .rc-campo, #kit-corpo > .rc-campos { margin: 0; }
.rc-campos.kit-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-campos.kit-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kit-par { display: flex; gap: .4rem; }
.kit-par input { flex: 1 1 auto; }
.kit-par .kit-un { width: auto !important; flex: none; }

/* senha */
.kit-saida { display: grid; gap: .75rem; padding: 1.1rem 1.2rem; border-radius: 1.1rem; background: color-mix(in srgb, var(--gray) 10%, transparent); }
.kit-senha { display: block; font-family: var(--mono); font-size: clamp(1.05rem, 2.3vw, 1.45rem); line-height: 1.45; letter-spacing: .02em; overflow-wrap: anywhere; user-select: all; }
.kit-senha.is-vazia { font-family: inherit; font-size: 1rem; color: var(--gray); user-select: auto; }
.kit-saida .rc-acoes { margin-top: 0; }
.kit-forca { display: grid; gap: .5rem; }
.kit-barra { height: .45rem; border-radius: 980px; overflow: hidden; background: color-mix(in srgb, var(--gray) 16%, transparent); }
.kit-barra i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; transition: width .3s var(--ease-out), background-color .3s ease; }
.kit-forca p { font-size: .92rem; color: var(--gray); }
.kit-forca p b { color: var(--cream); font-weight: 600; }
.k-fraca { background: #e5604f; } b.k-fraca { color: #e5604f !important; background: none; }
.k-media { background: #e5a963; } b.k-media { color: #e5a963 !important; background: none; }
.k-forte { background: #7fcf7a; } b.k-forte { color: #7fcf7a !important; background: none; }
.k-otima { background: #3fb98a; } b.k-otima { color: #3fb98a !important; background: none; }
body.light-theme b.k-media { color: #a35406 !important; } body.light-theme b.k-forte { color: #2f7d2a !important; } body.light-theme b.k-otima { color: #0a6b66 !important; }
.kit-checks { display: flex; flex-wrap: wrap; gap: .45rem; }
.kit-check { position: relative; display: inline-flex; cursor: pointer; }
.kit-check input { position: absolute; opacity: 0; pointer-events: none; }
.kit-check span { padding: .45rem .9rem; border-radius: 980px; font-size: .88rem; border: 1px solid var(--glass-line); color: var(--gray); transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.kit-check input:checked + span { color: var(--cream); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.kit-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* SLA: régua dos "noves" */
.kit-noves { display: flex; gap: 3px; margin-top: 1rem; }
.kit-noves span { flex: 1; padding: .45rem .3rem; border-radius: .5rem; text-align: center; font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--gray); background: color-mix(in srgb, var(--gray) 10%, transparent); }
.kit-noves span.on { color: #111; background: var(--accent); }
body.light-theme .kit-noves span.on { color: #fff; }

/* RAID */
.kit-discos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.kit-disco { display: grid; gap: 3px; width: 2.6rem; padding: .35rem; border-radius: .6rem; background: color-mix(in srgb, var(--gray) 12%, transparent); }
.kit-disco i { height: .7rem; border-radius: .2rem; }
.kit-disco span { margin-top: .15rem; font-size: .68rem; text-align: center; color: var(--gray); font-variant-numeric: tabular-nums; }
.t-d { background: var(--accent); }
.t-p { background: #5fe0d8; }
.t-e { background: color-mix(in srgb, var(--accent) 45%, transparent); }
body.light-theme .t-p { background: #a35406; }
.kit-legenda { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .6rem; font-size: .85rem; color: var(--gray); }
.kit-legenda span { display: inline-flex; align-items: center; gap: .4rem; background: none; }
.kit-legenda span::before { content: ''; width: .8rem; height: .8rem; border-radius: .2rem; }
.kit-legenda .t-d::before { background: var(--accent); }
.kit-legenda .t-p::before { background: #5fe0d8; }
body.light-theme .kit-legenda .t-p::before { background: #a35406; }
.kit-legenda .t-e::before { background: color-mix(in srgb, var(--accent) 45%, transparent); }

/* hash */
.kit-area { width: 100%; padding: .75rem .85rem; border-radius: .8rem; font-family: var(--mono); font-size: .95rem; color: var(--cream); resize: vertical; background: color-mix(in srgb, var(--gray) 12%, transparent); border: 1px solid var(--glass-line); }
.kit-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#kit-corpo .rc-acoes { margin-top: 0; }
.kit-hashes { display: grid; gap: .5rem; }
.kit-hashes:empty { display: none; }
.kit-hashes div { padding: .7rem .9rem; border-radius: .9rem; background: color-mix(in srgb, var(--gray) 10%, transparent); }
.kit-hashes dt { font-size: .78rem; color: var(--gray); margin-bottom: .25rem; }
.kit-hashes dd { display: flex; align-items: flex-start; gap: .75rem; }
.kit-hashes code { flex: 1; min-width: 0; font-family: var(--mono); font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.kit-copia { flex: none; padding: .2rem .65rem; border-radius: 980px; font: inherit; font-size: .78rem; color: var(--accent); background: none; border: 1px solid var(--glass-line); cursor: pointer; }
.kit-copia:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.kit-solta { position: relative; display: grid; place-items: center; min-height: 6rem; margin: 1rem 0; padding: 1rem; border-radius: 1rem; text-align: center; font-size: .92rem; color: var(--gray); border: 1.5px dashed var(--glass-line); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.kit-solta input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kit-solta:hover, .kit-solta.is-sobre { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.kit-solta:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.kit-conf { margin-top: .6rem; font-weight: 500; }
.kit-conf.ok { color: #3fb98a; } .kit-conf.nao { color: #e5604f; }
body.light-theme .kit-conf.ok { color: #0a6b66; }

/* QR do Wi-Fi */
.kit-wifi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 1.5rem; align-items: start; }
.kit-wifi-campos { display: grid; gap: 1rem; }
.kit-wifi-cartao { display: grid; justify-items: center; gap: .35rem; padding: 1.25rem; border-radius: 1.3rem; text-align: center; color: #111; background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); }
.kit-qr { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.kit-qr svg { width: 100%; height: auto; display: block; }
.kit-qr p { padding: 1rem; font-size: .88rem; color: #666; }
.kit-qr:has(> p) { aspect-ratio: auto; min-height: 9rem; }
.kit-wifi-rede { font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.kit-wifi-senha { font-family: var(--mono); font-size: .92rem; color: #444; overflow-wrap: anywhere; }
.kit-wifi-rede:empty, .kit-wifi-senha:empty { display: none; }
.kit-wifi-dica { margin-top: .25rem; font-size: .78rem; color: #777; }

/* impressão: só o cartão do Wi-Fi */
@media print {
  body.kit-imprimindo * { visibility: hidden !important; }
  body.kit-imprimindo .kit-wifi-cartao, body.kit-imprimindo .kit-wifi-cartao * { visibility: visible !important; }
  body.kit-imprimindo .kit-wifi-cartao { position: fixed; top: 2cm; left: 50%; width: 9cm; transform: translateX(-50%); box-shadow: none; border: 1px solid #ccc; }
}

@media (max-width: 760px) {
  .rc-campos.kit-2, .rc-campos.kit-3 { grid-template-columns: 1fr; }
  .kit-wifi { grid-template-columns: 1fr; }
  .kit-wifi-cartao { max-width: 320px; justify-self: center; width: 100%; }
  /* abas numa linha só, rolando para o lado */
  .kit-abas { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .kit-abas::-webkit-scrollbar { display: none; }
  .kit-abas button { flex: none; white-space: nowrap; padding: .5rem .9rem; }
}
@media (prefers-reduced-motion: reduce) { .kit-barra i, .kit-check span { transition: none; } }