/* ===== Blog (estilos principales) ===== */

/* Badges / Chips (UNIFICADO) */
.badge{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.45rem .75rem;
  border-radius:9999px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  border:1px solid rgba(0,0,0,.08);
  background:linear-gradient(180deg,#ffffff 0%,#f2f4f7 100%);
  color:#2b2f36;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  text-decoration:none;
}
.badge:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(0,0,0,.12);
}

/* Badges en filtros y tarjetas */
.filters .badge,
.card .badge{
  margin:.25rem .4rem .25rem 0;
}

/* Estado activo (filtro seleccionado) */
.filters .badge.active{
  background:linear-gradient(180deg,#111827 0%,#1f2937 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 16px rgba(17,24,39,.25);
}

/* Variantes opcionales */
.badge-cat{
  background:linear-gradient(180deg,#e6f4ff 0%,#d9ecff 100%);
  color:#0b5ed7;
  border-color:rgba(13,110,253,.25);
}
.badge-outline{
  background:#fff;
  color:#2b2f36;
  border:1px solid #cfd6e0;
}
.badge-glow{
  background:#fffbe6;
  border-color:#ffd24d;
  box-shadow:0 0 0 3px rgba(255,210,77,.2);
}

.outline{
  background:#cb07dd;
}

/* Modo oscuro suave */
@media (prefers-color-scheme: dark){
  .badge{
    background:linear-gradient(180deg,#202531 0%,#1a1f2b 100%);
    color:#e6edf3;
    border-color:#2b3343;
    box-shadow:0 6px 14px rgba(0,0,0,.35);
  }
  .filters .badge.active{
    background:linear-gradient(180deg,#0d1320 0%,#0b0f14 100%);
    box-shadow:0 10px 18px rgba(0,0,0,.45);
  }
  .badge-cat{
    background:linear-gradient(180deg,#0f1a2b 0%,#0d1726 100%);
    color:#9bc4ff;
    border-color:#1e2b40;
  }
  .badge , .outline{
    background:#cb07dd;
  }
}

/* Tarjetas y utilidades */
.card{ border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; }
.card-body{ padding:1rem; }
.grid img{ display:block; width:100%; height:auto; }

/* Botón simple (por si lo usas en blog) */
.btn{
  display:inline-block;
  padding:.45rem .9rem;
  border:1px solid #111;
  border-radius:8px;
  text-decoration:none;
}

/* Filtros */
.filters a{ text-decoration:none; }

/* Cabeceras de sección del blog */
.header-blog{
  background:#0b0f14;
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.blog-navbar{ font-size:.9rem; }
.blog-banner{
  background:radial-gradient(1200px 800px at 80% -10%, #122036 0%, #0b0f14 60%), var(--bg);
  padding:3rem 1rem;
}
.blog-foto-perfil{
  width:120px; height:120px; border-radius:50%;
  border:3px solid #fff; object-fit:cover;
}



/* ---- Estética moderna (usa tus variables de style.css) ---- */
.show-wrap{position:relative}
#read-progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));z-index:9999;transition:width .1s ease}
.card-modern{background:var(--panel);color:var(--ink);border:1px solid #1b2637;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem}
.entry .title{font-size:clamp(1.6rem,2.3vw,2.4rem);letter-spacing:.3px;margin:0}
.eyebrow{margin-bottom:.4rem}
.chip{display:inline-block;padding:.38rem .7rem;border-radius:999px;background:rgba(110,231,255,.08);border:1px solid rgba(110,231,255,.35);color:var(--acc);font-size:.78rem;text-decoration:none}
.chip-outline{background:transparent;border-color:#2b3343;color:#9fb0c3}
.link-clean{color:var(--ink);text-decoration:none}
.link-clean:hover{text-decoration:underline}
.hero img{width:100%;height:auto;border-radius:12px}
.sticky{position:sticky;top:1.25rem}
.btn-soft{background:#0e1522;border:1px solid #273247;color:#cfe2f5;padding:.5rem .9rem;border-radius:10px}
.btn-soft:hover{border-color:#3a4f72}
.toc{padding:1rem}
.toc-title{display:block;margin-bottom:.4rem;color:#cfe2f5}
.toc-list{margin:0;padding-left:1rem}
.toc-list a{color:#9fb0c3;text-decoration:none}
.toc-list a:hover{text-decoration:underline;color:#e6edf3}
/* contenido */
.entry-content h2{margin-top:1.4rem}
.entry-content pre{background:#0e1522;border:1px solid #273247;border-radius:10px;padding:1rem;overflow:auto}
.entry-content code{background:#0e1522;border:1px solid #273247;color:#a8d1ff;padding:2px 6px;border-radius:6px}
.entry-content img{cursor:zoom-in;border-radius:12px}
#imgbox{border:none;padding:0;background:transparent}
#imgbox::backdrop{background:rgba(0,0,0,.65)}
#imgbox img{max-width:min(96vw,1100px);max-height:92vh;border-radius:12px;display:block}