/*
 * PratiqueTech Studio — estilo das ferramentas.
 *
 * Tudo escopado em .pts-tool, por dois motivos: não vazar estilo para o resto
 * do site, e não brigar com as regras que o tema já tem.
 *
 * As cores saem das variáveis do tema PratiqueTech quando existem, com valor
 * de reserva embutido. No tema do site herda a paleta; em qualquer outro tema
 * a ferramenta continua legível sozinha.
 */

.pts-tool{
  --c-bg:      var(--pt-bg, #0f172a);
  --c-surface: var(--pt-surface, #1e293b);
  --c-border:  var(--pt-border, #334155);
  --c-text:    var(--pt-text, #e2e8f0);
  --c-muted:   var(--pt-muted, #94a3b8);
  --c-accent:  #22d3ee;
  --c-on-accent:#0f172a;
  --c-ok:      #4ade80;
  --c-error:   #f87171;

  display:block;
  margin:28px 0;
  color:var(--c-text);
  font-size:15px;
  line-height:1.6;
}

/* No modo claro do tema, o ciano precisa fechar para continuar legível. */
:root[data-theme="light"] .pts-tool{
  --c-accent:#0e7490;
  --c-on-accent:#ffffff;
  --c-ok:#15803d;
  --c-error:#b91c1c;
}

.pts-tool *,
.pts-tool *::before,
.pts-tool *::after{box-sizing:border-box;}

/* ---------- Cabeçalho do bloco ---------- */
.pts-tool-head{display:flex; gap:14px; align-items:flex-start; margin-bottom:14px;}
.pts-tool-icon{
  flex:none; font-size:22px; line-height:1;
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-surface); border:1px solid var(--c-border);
}
.pts-tool-title{margin:0 0 3px; font-size:17px; font-weight:700; color:var(--c-text); line-height:1.3;}
.pts-tool-intro{margin:0; font-size:13.5px; color:var(--c-muted);}

/* ---------- Caixa ---------- */
.pts-box{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:12px; padding:20px;
}
.pts-center{text-align:center;}
.pts-btn-row{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}

/* ---------- Botões ---------- */
.pts-tool .pts-btn-primary,
.pts-tool .pts-btn-secondary{
  font-family:inherit; cursor:pointer; border-radius:8px; font-weight:700;
  transition:background-color .15s ease, transform .15s ease, opacity .15s ease;
}
.pts-tool .pts-btn-primary{
  background:var(--c-accent); color:var(--c-on-accent); border:none;
  padding:12px 22px; font-size:14.5px;
}
.pts-tool .pts-btn-primary:hover{filter:brightness(1.08); transform:translateY(-1px);}
.pts-tool .pts-btn-primary:disabled{opacity:.6; cursor:progress; transform:none;}
.pts-tool .pts-btn-secondary{
  background:var(--c-border); color:var(--c-text); border:none;
  padding:11px 18px; font-size:13.5px; font-weight:600;
}
.pts-tool .pts-btn-secondary:hover{filter:brightness(1.12); transform:translateY(-1px);}
.pts-tool button:focus-visible,
.pts-tool input:focus-visible,
.pts-tool textarea:focus-visible{outline:2px solid var(--c-accent); outline-offset:2px;}

/* ---------- Campos ---------- */
.pts-tool .pts-input,
.pts-tool .pts-json-input{
  width:100%; background:var(--c-bg); border:1px solid var(--c-border);
  border-radius:8px; padding:11px 14px; color:var(--c-text);
  font-family:inherit; font-size:14px; transition:border-color .15s ease;
}
.pts-tool .pts-input:focus,
.pts-tool .pts-json-input:focus{border-color:var(--c-accent);}
.pts-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.pts-json-input{min-height:170px; resize:vertical; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px;}
.pts-json-output{
  background:var(--c-bg); border:1px solid var(--c-border); border-radius:8px;
  padding:14px; margin:14px 0 0; color:var(--c-text);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px; overflow-x:auto; white-space:pre; max-height:420px; overflow-y:auto;
}
.pts-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Status ---------- */
.pts-status-ok{color:var(--c-ok); font-size:13.5px; font-weight:600; margin-top:14px;}
.pts-status-error{
  color:var(--c-error); font-size:13.5px; margin-top:14px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Verificador de IP ---------- */
.pts-ip-result{
  margin-top:18px; display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap;
}
.pts-ip-value{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:26px; font-weight:700; color:var(--c-accent); letter-spacing:-.5px;
}

/* ---------- Calculadora CIDR ---------- */
.pts-cidr-row{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;}
.pts-cidr-field{flex:1 1 200px;}
.pts-cidr-field--small{flex:0 1 130px;}
.pts-cidr-field label{display:block; font-size:12px; color:var(--c-muted); margin-bottom:6px;}
.pts-cidr-row .pts-btn-primary{height:44px; padding:0 22px;}
.pts-cidr-results{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:12px; margin-top:18px;
}
.pts-stat{background:var(--c-bg); border:1px solid var(--c-border); border-radius:8px; padding:12px;}
.pts-stat-label{font-size:11px; color:var(--c-muted); margin-bottom:4px;}
.pts-stat-value{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight:700; color:var(--c-text); font-size:14px; word-break:break-all;
}
.pts-stat-value.is-blue{color:var(--c-accent);}
.pts-stat-value.is-green{color:var(--c-ok);}
.pts-binary-toggle{margin-top:14px;}
.pts-binary-view{
  margin-top:12px; background:var(--c-bg); border:1px solid var(--c-border);
  border-radius:8px; padding:14px; overflow-x:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px; color:var(--c-muted); line-height:1.9;
}
.pts-bit-1{color:var(--c-accent); font-weight:700;}
.pts-bit-0{color:var(--c-muted);}

/* ---------- Histórico local ---------- */
.pts-history{margin-top:18px; border-top:1px solid var(--c-border); padding-top:14px; text-align:left;}
.pts-history-title{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--c-muted); margin-bottom:8px;}
.pts-history ul{list-style:none; margin:0; padding:0;}
.pts-history li{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12.5px; color:var(--c-muted); padding:5px 0;
  border-bottom:1px solid var(--c-border);
}
.pts-history li:last-child{border-bottom:none;}
.pts-history-value{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:var(--c-text); font-weight:600;
}

/* ---------- Cartão de link (ferramenta repetida na mesma página) ---------- */
.pts-tool-card{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:12px; padding:16px 18px;
  transition:border-color .2s ease, transform .2s ease;
}
.pts-tool-card:hover{border-color:var(--c-accent); transform:translateY(-1px);}
.pts-tool-card-body{display:flex; flex-direction:column; flex:1; min-width:0;}
.pts-tool-card-title{font-weight:700; font-size:15px; color:var(--c-text);}
.pts-tool-card-sub{font-size:13px; color:var(--c-muted);}
.pts-tool-card-cta{color:var(--c-accent); font-weight:700; font-size:13.5px; white-space:nowrap;}

.pts-tool-error{
  border:1px dashed var(--c-error); color:var(--c-error);
  border-radius:8px; padding:12px 14px; font-size:13.5px;
}

/* Versão compacta: sem cabeçalho, para caber no meio de um parágrafo. */
.pts-tool.is-compact{margin:20px 0;}

@media (max-width:560px){
  .pts-cidr-row .pts-btn-primary{width:100%;}
  .pts-ip-value{font-size:22px;}
}