/* ================================================
   PROJECT ARTICLE — ADD-ON CSS
   Prefijo: "pa-"  (project article)
   Añadir DESPUÉS de article_add_on_style.css
   Solo contiene estilos nuevos no cubiertos por aa-
   ================================================ */

/* ------------------------------------------------
   BACK LINK
   ------------------------------------------------ */
.pa-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fuzzy-aqua, #00b76c);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.2s, gap 0.2s;
}

.pa-back-link:hover {
  color: var(--fuzzy-ocean, #006a87);
  gap: 10px;
}

/* ------------------------------------------------
   CODE BLOCK
   ------------------------------------------------ */
.aa-code-block {
  background: var(--fuzzy-night, #001f3d);
  border-radius: 12px;
  overflow: hidden;
  margin: 20px 0 28px;
  border: 1px solid rgba(50, 236, 253, 0.12);
}

.aa-code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.aa-code-block__lang {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fuzzy-cyan, #32ecfd);
  background: rgba(50, 236, 253, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.aa-code-block__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.04em;
}

.aa-code-block__pre {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.aa-code-block__pre code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.9;
  color: #e2f0ff;
  white-space: pre;
  display: block;
}

/* Keyword highlighting via spans — optional, works without JS */
.aa-code-block__pre code .kw  { color: var(--fuzzy-cyan,  #32ecfd); }  /* keywords */
.aa-code-block__pre code .fn  { color: var(--fuzzy-lime,  #b2d56a); }  /* functions */
.aa-code-block__pre code .st  { color: var(--fuzzy-mint,  #a9ffcf); }  /* strings */
.aa-code-block__pre code .cm  { color: rgba(255,255,255,0.35); font-style: italic; } /* comments */
.aa-code-block__pre code .nm  { color: var(--fuzzy-aqua,  #00b76c); }  /* numbers */

/* ------------------------------------------------
   TABLE EXTRAS
   ------------------------------------------------ */

/* Highlighted winning row */
.aa-table tbody tr.pa-row-highlight {
  background: rgba(0, 183, 108, 0.07);
}

.aa-table tbody tr.pa-row-highlight:hover {
  background: rgba(0, 183, 108, 0.12);
}

.aa-table tbody tr.pa-row-highlight td {
  color: var(--fuzzy-night, #001f3d);
}

/* ------------------------------------------------
   BADGES (colored status indicators)
   Used in DNS table and deployment table
   ------------------------------------------------ */
.pa-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.5;
}

.pa-badge--green {
  background: rgba(0, 183, 108, 0.12);
  color: var(--fuzzy-aqua, #00b76c);
  border: 1px solid rgba(0, 183, 108, 0.3);
}

.pa-badge--yellow {
  background: rgba(234, 179, 8, 0.1);
  color: #a07800;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.pa-badge--orange {
  background: rgba(234, 120, 8, 0.1);
  color: #b85a00;
  border: 1px solid rgba(234, 120, 8, 0.3);
}

.pa-badge--red {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

/* ================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ================================================ */
@media (max-width: 768px) {

  .pa-back-link {
    font-size: 13px;
    margin-bottom: 20px;
  }

  /* Code block */
  .aa-code-block {
    border-radius: 8px;
    margin: 16px 0 20px;
  }

  .aa-code-block__header {
    padding: 8px 14px;
  }

  .aa-code-block__pre {
    padding: 14px 16px;
  }

  .aa-code-block__pre code {
    font-size: 12px;
    line-height: 1.8;
  }

  /* Badges in table */
  .pa-badge {
    font-size: 10px;
    padding: 2px 8px;
  }
}

/* ================================================
   MOBILE PEQUEÑO (≤ 480px)
   ================================================ */
@media (max-width: 480px) {

  .aa-code-block__pre code {
    font-size: 11px;
  }

  .aa-code-block__pre {
    padding: 12px 14px;
  }
}