.jlj-tt { margin: 16px 0; }
.jlj-tt-card {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

.jlj-tt-header { margin-bottom: 12px; }
.jlj-tt-title { margin: 0 0 6px; font-size: 18px; }
.jlj-tt-subtitle { margin: 0; opacity: .8; }

.jlj-tt-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}
.jlj-tt-tab {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fafafa;
  cursor: pointer;
  font-size: 13px;
}
.jlj-tt-tab.is-active {
  background: #f0f0f0;
  border-color: rgba(0,0,0,.30);
}

.jlj-tt-form {
  display: grid;
  gap: 10px;
  align-items: end;
  margin: 12px 0;
}
.jlj-tt-form-4 { grid-template-columns: 1fr 170px 220px 120px; }
.jlj-tt-form-2 { grid-template-columns: 1fr 220px; }
.jlj-tt-form-3 { grid-template-columns: 1fr 1fr 140px; }
.jlj-tt-form-v6 { grid-template-columns: 1fr 170px 160px; }
.jlj-tt-side { display: grid; gap: 10px; align-content: start; }

.jlj-tt-label { display: grid; gap: 6px; font-size: 12px; opacity: .92; }
.jlj-tt-input, .jlj-tt-textarea {
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}
.jlj-tt-textarea { resize: vertical; }

.jlj-tt-btn {
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  background: #f5f5f5;
  cursor: pointer;
}
.jlj-tt-btn:hover { filter: brightness(.98); }

.jlj-tt-copy {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fafafa;
  cursor: pointer;
  font-size: 12px;
}

.jlj-tt-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.jlj-tt-error {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff2f2;
  border: 1px solid rgba(255,0,0,.25);
  margin: 8px 0;
}

.jlj-tt-note {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6fbff;
  border: 1px solid rgba(0,128,255,.18);
  margin: 8px 0;
  opacity: .95;
}

.jlj-tt-hint { margin: 0; opacity: .78; font-size: 13px; }

.jlj-tt-results { margin-top: 10px; }
.jlj-tt-tablewrap { overflow: auto; border-radius: 12px; border: 1px solid rgba(0,0,0,.10); }
.jlj-tt-table { width: 100%; border-collapse: collapse; }
.jlj-tt-tablewrap.is-wide .jlj-tt-table { min-width: 980px; } /* solo para tablas grandes */
.jlj-tt-table th, .jlj-tt-table td {
  text-align: left;
  padding: 10px 8px;
  border-top: 1px solid rgba(0,0,0,.08);
  vertical-align: middle;
}
.jlj-tt-table thead th {
  border-top: none;
  background: #fafafa;
  position: sticky;
  top: 0;
}
.jlj-tt-table th { opacity: .85; }
.jlj-tt-table code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.jlj-tt-details { margin-top: 12px; }
.jlj-tt-binary code { display: inline-block; padding: 4px 8px; border-radius: 8px; background: #f7f7f7; }

.jlj-tt-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.jlj-tt-box {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.jlj-tt-h4 { margin: 0 0 8px; font-size: 14px; }
.jlj-tt-pre {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fafafa;
  overflow: auto;
  min-height: 90px;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Badge para “tipo de IP” */
.jlj-tt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #f7f7f7;
  font-size: 12px;
  line-height: 1.2;
}
.jlj-tt-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
}

.jlj-tt-badge.is-public::before { background: #1b5e20; }
.jlj-tt-badge.is-private::before { background: #0d47a1; }
.jlj-tt-badge.is-cgnat::before { background: #1565c0; }
.jlj-tt-badge.is-loopback::before { background: #4e342e; }
.jlj-tt-badge.is-linklocal::before { background: #6a1b9a; }
.jlj-tt-badge.is-multicast::before { background: #ff6f00; }
.jlj-tt-badge.is-broadcast::before { background: #b71c1c; }
.jlj-tt-badge.is-doc::before { background: #37474f; }
.jlj-tt-badge.is-reserved::before { background: #455a64; }

/* Badge para IPv6 */
.jlj-tt-badge.is-v6-gua::before { background: #1b5e20; }
.jlj-tt-badge.is-v6-ula::before { background: #0d47a1; }
.jlj-tt-badge.is-v6-linklocal::before { background: #6a1b9a; }
.jlj-tt-badge.is-v6-multicast::before { background: #ff6f00; }
.jlj-tt-badge.is-v6-loopback::before { background: #4e342e; }
.jlj-tt-badge.is-v6-unspecified::before { background: #455a64; }
.jlj-tt-badge.is-v6-doc::before { background: #37474f; }
.jlj-tt-badge.is-v6-ipv4mapped::before { background: #1565c0; }
.jlj-tt-badge.is-v6-nat64::before { background: #1565c0; }
.jlj-tt-badge.is-v6-6to4::before { background: #455a64; }
.jlj-tt-badge.is-v6-reserved::before { background: #455a64; }

/* Bloque “¿pertenece a esta red?” */
.jlj-tt-membership { margin-top: 12px; }
.jlj-tt-note.is-bad {
  background: #fff2f2;
  border: 1px solid rgba(255,0,0,.25);
}

/* ✅ Responsive (móviles/tablets) */
@media (max-width: 920px) {
  .jlj-tt-form-4 { grid-template-columns: 1fr; }
  .jlj-tt-form-3 { grid-template-columns: 1fr; }
  .jlj-tt-form-v6 { grid-template-columns: 1fr; }
  .jlj-tt-form-2 { grid-template-columns: 1fr; }
  .jlj-tt-grid2 { grid-template-columns: 1fr; }
}

/* Evita que el tema limite el ancho de inputs/textarea */
.jlj-tt .jlj-tt-input,
.jlj-tt .jlj-tt-textarea {
  max-width: none !important;
}

/* En pantallas grandes: usa más ancho de la pantalla sin romper el layout */
@media (min-width: 1100px) {
  /* Mata el "boxed max-width" del tema si lo aplica */
  .entry-content .jlj-tt,
  .jlj-tt {
    max-width: none !important;
  }

  /* Full-bleed centrado (más robusto que calc(50%-50vw)) */
  .jlj-tt {
    position: relative;
    left: 55%;
    right: 0%;
    width: 90vw;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  /* La tarjeta ahora sí se expande y se centra */
  .jlj-tt-card {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Inputs sin límites del tema */
  .jlj-tt .jlj-tt-input,
  .jlj-tt .jlj-tt-textarea {
    max-width: none !important;
  }

  /* Mejor reparto de columnas */
  .jlj-tt-form-4 {
    grid-template-columns:
      minmax(320px, 2fr)
      minmax(160px, 1fr)
      minmax(360px, 2fr)
      160px;
  }

  .jlj-tt-form-3 {
    grid-template-columns:
      minmax(320px, 2fr)
      minmax(360px, 2fr)
      160px;
  }

  .jlj-tt-form-v6 {
    grid-template-columns:
      minmax(480px, 3fr)
      180px
      160px;
  }
}