/* ==========================================================================
   Tags / Archives – CSS saneado y unificado
   - Mobile-first
   - Grid de tarjetas (1/2/3 columnas)
   - Sidebar + sticky controlado por JS (fallback CSS opcional)
   - Breadcrumbs “píldoras” unificados (igual que Noticias/Artículos)
   - Botones de compartir (azul oscuro + icono blanco)
   ========================================================================== */

/* ===== Variables ===== */
:root{
  --brand-blue: #172EEB;       /* azul marca (hover/activo breadcrumbs) */
  --accent-blue: #192EEC;      /* azul acento (badges, barras) */
  --btn-blue: #032A53;         /* azul oscuro para botones share */
  --text-100: #101828;
  --text-300: #374151;
  --text-500: #6b7280;
  --pill-bg: #E0E0E0;
  --muted: #7D7F8A;
  --border: #e5e7eb;
  --shadow-xs: 0 2px 10px rgba(0,0,0,.06);
}

/* ===== Contenedor / encabezado ===== */
.archive-wrap{ max-width:1200px; margin:0 auto; padding:24px; }
.archive-head{ display:flex; margin:8px 0 20px; justify-content: space-between; align-items: center; }
.archive-title{ display:flex; align-items:center; gap:10px; font-size:32px; font-weight:800; margin:0; }
.archive-title--emph{ font-size:36px; font-weight:800; letter-spacing:-.2px; margin:6px 0 12px; text-transform: capitalize; }
.archive-title--emph::after{
  content:""; display:block; width:160px; height:4px; background:var(--accent-blue); border-radius:999px; margin-top:6px;
}
.archive-desc{ color:var(--text-500); margin:6px 0 18px; }
.archive-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 8px; border-radius:999px;
  background:#eef2ff; color:var(--accent-blue); font-weight:800; font-size:14px;
}
.header-compl{flex:33%;}
.hero-pic {
    display: flex;
    justify-content: flex-end;
}
.hero-img {
  max-width: 50%;
}

@media (max-width:768px){
  .archive-head, .archive-title {flex-direction: column;}
  .post-share.social-row, .hero-pic {justify-content:center ;}
}
/* ===== Breadcrumbs (unificados con Noticias/Artículos) ===== */
.archive-breadcrumbs{ margin:0 0 10px; }
.archive-breadcrumbs .crumbs{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  font-size:12px; line-height:1;
}
.archive-breadcrumbs .crumbs a{
  display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; text-transform:capitalize;
  background:var(--pill-bg); color:#555; font-weight:500; border-radius:15px; padding:5px 10px;
  transition:background-color .25s ease, color .25s ease;
}
.archive-breadcrumbs .crumbs a:hover{ background:var(--brand-blue); color:#fff; }
.archive-breadcrumbs .crumbs a:first-of-type{
  text-indent:-9999px;
  background:url('https://cdn.inspenet.com/icon-home-breadcrumbs.webp') center/contain no-repeat, var(--pill-bg);
  width:22px; height:26px; padding:0; border-radius:6px;
}
.archive-breadcrumbs .crumbs a:last-of-type{ background:var(--brand-blue); color:#fff; }
.archive-breadcrumbs .crumbs .separator,
.archive-breadcrumbs .crumbs .sep{
  display:inline-flex; align-items:center; margin:0 4px; transform:translateY(2px);
  font-size:16px; line-height:16px; color:var(--muted);
}
.archive-breadcrumbs .crumbs span{ color:var(--muted); }

.custom-breadcrumbs a {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 5px 10px;
    white-space: nowrap;
    margin: 0 0;
    color: #3b3b3b;
    font-weight: 500;
    font-size: 12px;
    transition: background-color 0.3s,color 0.3s;
    text-transform: capitalize
}

.rank-math-breadcrumb .separator {
    transform: translateY(2px);
    margin: 0 4px;
    font-size: 16px;
    color: #7D7F8A;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
    margin-top: 2px
}

.custom-breadcrumbs a:hover {
    background-color: #172EEB;
    color: #FFF
}

.custom-breadcrumbs span {
    color: #3b3b3b
}

.custom-breadcrumbs a:first-of-type {
    text-indent: -9999px;
    background: none;
    background-image: url(https://cdn.inspenet.com/icon-home-breadcrumbs.webp);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-flex;
    align-items: center;
    width: 22px;
    height: 26px;
    margin: 0 0
}

.custom-breadcrumbs a:last-of-type {
    background-color: #172EEB;
    color: #FFF;
    border-radius: 15px;
    padding: 5px 10px;
    white-space: nowrap;
    margin: 0 0;
    font-weight: 500;
    font-size: 12px;
    transition: background-color 0.3s,color 0.3s;
    text-transform: capitalize
}

/* ===== Layout 2 columnas (main + sidebar) ===== */
.archive-row{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:1024px){
  .archive-row{ grid-template-columns:3fr 1.2fr; }
}
.archive-main{ min-width:0; }

.archive-sidebar{ position:relative; z-index:1; overflow:visible; }

/* ===== Sticky (fallback CSS; el affix JS gobierna en desktop) ===== */
@supports (position: sticky){
  @media (min-width:1024px){
    .sticky-widget{ position:sticky; top:var(--stickyTop, 96px); }
  }
}

/* ===== Grid de tarjetas ===== */
.cards-grid,
.archive-grid{
  display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:28px;
}
@media (min-width:768px){
  .cards-grid, .archive-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1100px){
  .cards-grid, .archive-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ===== Tarjeta ===== */
.post-card{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:transform .2s ease, box-shadow .2s ease;
}
.post-card:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.1); }

/* Enlaces (card completa o título) */
.card-link{ display:block; color:inherit; text-decoration:none; }
.card-link:hover .card-title{ color:#0b56d5; }
.post-card__title a{ color:var(--text-100); text-decoration:none; }
.post-card__title a:hover{ text-decoration:underline; }

/* Media */
.card-thumb img,
.post-card__thumb img{
  display:block; width:100%; height:210px; object-fit:cover;
}

/* Body */
.card-body,
.post-card__body{ padding:16px; }

/* Badge/Categoría */
.badge,
.post-card__cat{
  display:inline-block; background:var(--accent-blue); color:#fff; border-radius:999px;
  padding:4px 10px; font-size:12px; font-weight:700; margin-bottom:8px;
}

/* Título / Meta / Extracto */
.card-title,
.post-card__title{
  font-size:18px; line-height:1.25; margin:6px 0 8px; font-weight:800; color:var(--text-100);
}
.card-meta,
.post-card__meta{ font-size:12px; color:var(--text-500); margin-bottom:8px; }
.card-excerpt,
.post-card__excerpt{ font-size:14px; color:var(--text-300); margin:0; }

/* ===== Paginación (mismo estilo que Noticias Home) ===== */
.archive-pager,
.navigation.pagination{
  text-align: center;
  margin: 20px 0;
}

/* Contenedor de las páginas */
.archive-pager ul.page-numbers,
.navigation.pagination ul.page-numbers,
ul.page-numbers{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Cada item */
.archive-pager li,
.navigation.pagination li{
  display: block;
}

/* Enlaces y spans (números, puntos, prev/next) */
.archive-pager a,
.archive-pager span,
.navigation.pagination a,
.navigation.pagination span,
.page-numbers a,
.page-numbers span{
  display: block;
  padding: 8px 12px;
  background: var(--color-paginacion, #f5f5f5);
  color: #333;
  text-decoration: none;
  border-radius: 12px;
  font-size: var(--tamano-paginacion, 14px);
  transition: background-color .3s ease, color .3s ease;
}

/* Hover */
.archive-pager a:hover,
.navigation.pagination a:hover,
.page-numbers a:hover{
  background: var(--color-paginacion-hover, #e0e0e0);
}

/* Página actual */
.archive-pager .current,
.navigation.pagination .current,
.page-numbers .current{
  background: var(--color-paginacion-activa, #032A53);
  color: #fff;
}

/* Prev/Next un poco más marcados (opcional) */
.navigation.pagination .prev,
.navigation.pagination .next,
.archive-pager .prev,
.archive-pager .next{
  font-weight: 600;
}

/* ===== Sidebar widgets (genéricos) ===== */
.sb-widget,
.sidebar-widget{
  background:#fff; border-radius:12px; box-shadow:var(--shadow-xs);
  padding:14px 14px 8px; margin-bottom:18px;
}
.sb-title, .sidebar-title{ margin:0 0 10px; font-size:18px; font-weight:800; color:var(--text-100); }
.sb-list, .mini-list{ list-style:none; padding:0; margin:0; }
.sb-item{ display:flex; gap:12px; align-items:center; padding:8px 0; }
.sb-link, .mini-link{ display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit; }
.sb-thumb img, .mini-thumb img{ width:86px; height:64px; object-fit:cover; border-radius:6px; display:block; }
.sb-item-title, .mini-title{ display:block; font-size:14px; font-weight:700; line-height:1.25; color:var(--text-100); }
.sb-item-date, .mini-date{ display:block; font-size:12px; color:var(--text-500); }
.mini-item { margin: 0.5rem 0;}

/* ===== Share (azul oscuro + icono blanco; igual que single) ===== */
.post-share.social-row{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:8px 0 6px;
}
.post-share .btn-social{
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--btn-blue); color:#fff; text-decoration:none;
  box-shadow:0 1px 2px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .08s ease, filter .2s ease; outline:none; line-height:1;
}
.post-share .btn-social:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.post-share .btn-social:focus-visible{
  box-shadow:0 0 0 3px rgba(22,119,255,.25), 0 1px 2px rgba(16,24,40,.12);
}
.post-share .btn-social svg{
  display:block; width:20px; height:20px; fill:currentColor; color:#fff;
}
@media (max-width:1023.98px){
  .post-share .btn-social{ width:40px; height:40px; }
  .post-share .btn-social svg{ width:18px; height:18px; }
}

/* === Grid: 1 -> 2 columnas; sin 3-col === */
@media (min-width:768px){
  .cards-grid, .archive-grid{ grid-template-columns:repeat(2,1fr); }
}
/* Fuerza 2 col también en pantallas grandes */
@media (min-width:1100px){
  .cards-grid, .archive-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Elmina cualquier separación extra arriba del sidebar en tags */
.archive-row .archive-sidebar{ margin-top: 0; padding-top: 0; }
.archive-row .archive-sidebar .sticky-widget{ margin-top: 0; }

/* Post-type Tabs (left sidebar) */
.pt-tabs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }

.pt-tab__link{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px;
  text-decoration:none; color:#101828; background:#fff;
}
.pt-tab.is-active .pt-tab__link{
  border-color:#192EEC; background:#eef2ff; color:#0b56d5; font-weight:800;
}
.pt-tab__label{ font-size:14px; font-weight:700; }
.pt-tab__count{
  min-width:26px; padding:0 8px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:#eef2ff; color:#192EEC; font-weight:800; font-size:12px;
}

/* A11y helper */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Mobile control (hidden on desktop) */
.archive-controls{
  position: sticky; top: 0; z-index: 20;
  display: none; /* default hidden; shown on mobile */
  background:#fff; border-bottom:1px solid #e5e7eb;
  padding:8px 12px;
}
.pt-select{
  width:100%; height:38px; border:1px solid #e5e7eb; border-radius:10px;
  background:#fff; padding:0 12px; font-size:14px; font-weight:600; color:#101828;
}

/* Sidebar visibility */
@media (max-width: 1023px){
  .archive-sidebar{ display:none; content-visibility: hidden;}        /* hide tabs sidebar on mobile */
  .archive-controls{ display:block; }      /* show compact dropdown */
}

/* Desktop: keep current layout; hide dropdown */
@media (min-width: 1024px){
  .archive-controls{ display:none; }
}

/* Loading overlay (from your previous step) */
.tab-panel[data-panel="loop"]{ position:relative; }
.tab-panel[data-panel="loop"].is-loading::after{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,0.08); backdrop-filter: blur(1px); pointer-events: all;
}
.tab-panel[data-panel="loop"].is-loading{ min-height: 240px; }


.tab-panel.is-hidden{ display:none; }
.pt-tabs .pt-tab__link{ width:100%; text-align:left; background:transparent; border:1px solid #e5e7eb; padding:10px 12px; border-radius:10px; cursor:pointer; }
.pt-tab.is-active .pt-tab__link{ border-color:#192EEC; background:#eef2ff; font-weight:800; }
.pt-tab__link:hover{color:#002990;border:1px solid #192EEC;}

/* Overlay on the loop panel when loading */
.tab-panel[data-panel="loop"]{
  position: relative;
}
.tab-panel[data-panel="loop"].is-loading::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,0.08); /* grayish veil */
  backdrop-filter: blur(1px);
  pointer-events: all;           /* block clicks while loading */
}
.tab-panel[data-panel="loop"].is-loading{
  /* optional: prevent layout jumps while overlay is up */
  min-height: 240px;
}

.rt-sep{ border:0; border-top:1px solid #e5e7eb; margin:16px 0 12px; }

.related-topics{ margin-top:8px; }
.rt-title{ font-size:16px; font-weight:800; margin:0 0 10px; color:#101828; }

/* Chips/grid that wraps nicely on mobile */
.rt-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:8px;
  text-transform: capitalize;
}
.rt-item{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #e5e7eb; border-radius:999px;
  padding:6px 10px; background:#fff;
}
.rt-link{ text-decoration:none; color:#0b56d5; font-weight:700; }
.rt-link:hover{ text-decoration:underline; }
.rt-count{
  font-size:12px; font-weight:700;
  background:#eef2ff; color:#192EEC; border-radius:999px;
  line-height:1; padding:3px 8px; display:inline-block;
}