:root{
  /* Paleta/variables compartidas (mismo look & feel) */
  --bg:#0b0e12;
  --elev:#10151b;
  --card:#141b23;
  --text:#e8edf5;
  --muted:#9fb1c9;
  --brand:#4fa3ff;
  --brand2:#19c5aa;
  --border:#223243;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Reset mínimo + fondo transparente para integrarse en el lector */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:transparent; color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;
  line-height:1.6; overflow-x:hidden; /* sin scroll horizontal */
}
img{max-width:100%;display:block;height:auto}

/* Scrollbar consistente (vertical) */
:root{scrollbar-color: var(--border) transparent; scrollbar-width:thin}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-track{background:transparent}
body::-webkit-scrollbar-thumb{background:linear-gradient(var(--border),#1b2938);border-radius:10px}

/* Layout 1 columna: ocupar todo el ancho disponible del contenedor padre */
.article{
  width:100%; /* ocupa el 100% del contenedor que lo aloja */
  max-width:unset; /* sin límite fijo, es el contenedor quien limita */
  margin:0 auto; padding:24px 18px 60px;
  background:transparent;
}

.article__header{margin-bottom:18px}
.eyebrow{letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-size:.78rem; margin:0 0 6px}
.article__title{font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.25; margin:0 0 8px}
.article__lead{color:var(--muted); margin:0 0 14px}

/* Chips */
.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0}
.chip{
  background:var(--card); color:var(--text); border:1px solid var(--border);
  padding:8px 12px; border-radius:999px; cursor:pointer; box-shadow:var(--shadow);
  font-size:.9rem; transition:transform .12s ease, border-color .12s ease;
}
.chip:hover{transform:translateY(-1px); border-color:var(--brand)}

/* Cards */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; margin:14px 0;
}
.divider{height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); margin:20px 0}

.h2{font-size:1.2rem; margin:0 0 8px}
.list{margin:8px 0 0 16px}
.list li{margin:6px 0}

/* Tabla responsiva sin overflow horizontal */
.table-wrap{overflow:auto hidden; /* solo vertical si hace falta */}
.table{width:100%; border-collapse:collapse; font-size:.95rem}
.table th,.table td{border:1px solid var(--border); padding:10px 12px; text-align:left}
.table thead th{background:linear-gradient(180deg,#18222d,var(--card)); color:var(--text); position:sticky; top:0}
.table tbody tr:nth-child(odd){background:#111821}
.table code{white-space:nowrap}

/* Código */
.code{position:relative; background:#0f1620; border:1px solid var(--border); border-radius:12px; padding:12px; overflow:auto}
.code pre{margin:0}
.code .btn-copy{
  position:absolute; top:8px; right:8px; border:1px solid var(--border);
  background:#0e131a; color:var(--muted); border-radius:10px; font-size:.8rem; padding:6px 8px; cursor:pointer
}
.code .btn-copy:hover{color:var(--brand)}

/* Notas */
.note{background:#0f1924; border:1px dashed var(--border); border-radius:12px; padding:10px 12px; color:var(--muted); margin-top:8px}

/* Footer */
.article__footer{display:flex; justify-content:flex-end; margin-top:24px}
.to-top{display:inline-block; padding:10px 12px; border:1px solid var(--border); border-radius:10px; color:var(--text); text-decoration:none}
.to-top:hover{border-color:var(--brand2)}

/* Accesibilidad mínima */
:focus-visible{outline:2px dashed var(--brand); outline-offset:2px}