/* ==========================================================================
   Barra lateral tipo blog (html/com_content/_blog) — valoriza / mutador 2026-09-17
   Usa las variables y clases del tema (.widget, .widget-title, .tags, .widget-menu)
   ========================================================================== */

.vz-blog-sidebar .widget:not(:last-child) { margin-bottom: 50px; }
.vz-blog-sidebar [hidden] { display: none !important; }

/* ---------- Tarjeta ---------- */
.vz-blog-sidebar a:hover, .vz-blog-sidebar a:focus, .vz-blog-sidebar a:hover * { text-decoration: none; }
.vz-blog-list { margin: 0; }
.vz-blog-row { border-bottom: 1px dotted var(--color-gray-light-5); }
.vz-blog-row:last-child { border-bottom: none; }
.vz-card { display: flex; gap: 14px; align-items: center; padding: 12px 0; text-decoration: none; color: inherit; }
.vz-card-thumb, .vz-card-date { flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--border-radius-default); overflow: hidden; }
.vz-card-thumb { background: var(--color-gray-light-1); }
.vz-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vz-card:hover .vz-card-thumb img { transform: scale(1.06); }
.vz-card-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--color-gray-light-1); color: var(--color-dark-1); transition: background .17s ease; }
.vz-card-date strong { font-size: 22px; font-weight: 500; line-height: 1; }
.vz-card-date span { margin-top: 3px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-gray-3); }
.vz-card:hover .vz-card-date { background: var(--color-gray-light-5); }
.vz-card-body { display: flex; flex-direction: column; min-width: 0; }
.vz-card-body time { font-size: 12px; color: var(--color-gray-3); text-transform: capitalize; }
.vz-card-title { margin-top: 2px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--color-dark-4); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .17s ease; }
.vz-card:hover .vz-card-title { color: var(--color-gray-3); }
.vz-card.is-current .vz-card-title { color: var(--color-dark-1); }
.vz-card.is-current .vz-card-date { background: var(--color-dark-1); color: #fff; }
.vz-card--destacada { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 0; }
.vz-card--destacada .vz-card-thumb, .vz-card--destacada .vz-card-date { flex: none; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.vz-card--destacada .vz-card-title { font-size: 18px; }

/* ---------- Buscador ---------- */
.vz-blog-search { position: relative; }
.vz-blog-search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-gray-3); pointer-events: none; }
.vz-blog-q { width: 100%; height: 48px; padding: 0 40px 0 42px; font-size: 15px; color: var(--color-dark-1); background: #fff; border: 1px solid var(--color-gray-light-5); border-radius: var(--border-radius-default); transition: border-color .17s ease; -webkit-appearance: none; appearance: none; }
.vz-blog-q::-webkit-search-cancel-button { display: none; }
.vz-blog-q:focus { outline: none; border-color: var(--color-dark-4); }
.vz-blog-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--color-gray-3); cursor: pointer; }
.vz-blog-clear:hover { color: var(--color-dark-1); }
.vz-blog-search-results { margin-top: 10px; padding: 4px 14px; border: 1px solid var(--color-gray-light-5); border-radius: var(--border-radius-default); }
.vz-blog-count { margin: 8px 0 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-gray-3); }

/* ---------- Últimas ---------- */
@media (min-width: 992px) {
  .vz-blog-ultimas-list { max-height: 680px; overflow-y: auto; padding-right: 8px; overscroll-behavior: contain; }
}
@media (max-width: 991.98px) {
  .vz-blog-ultimas-list { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; max-height: none; scroll-snap-type: x mandatory; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
  .vz-blog-ultimas-list .vz-blog-row { flex: 0 0 72%; max-width: 260px; scroll-snap-align: start; border-bottom: none; }
  .vz-blog-ultimas-list .vz-card { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; }
  .vz-blog-ultimas-list .vz-card-thumb, .vz-blog-ultimas-list .vz-card-date { flex: none; width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .vz-blog-ultimas-list .vz-card--destacada .vz-card-title { font-size: 15px; }
}

/* ---------- Más leídas ---------- */
.vz-blog-top-list { counter-reset: vztop; margin: 0; }
.vz-blog-top-list li { counter-increment: vztop; display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dotted var(--color-gray-light-5); }
.vz-blog-top-list li:last-child { border-bottom: none; }
.vz-blog-top-list li::before { content: counter(vztop, decimal-leading-zero); flex: 0 0 34px; font-size: 22px; font-weight: 500; line-height: 1.1; color: var(--color-gray-light-5); }
.vz-blog-top-list a { display: flex; flex-direction: column; text-decoration: none; }
.vz-blog-top-title { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--color-dark-4); transition: color .17s ease; }
.vz-blog-top-list a:hover .vz-blog-top-title, .vz-blog-top-list a.is-current .vz-blog-top-title { color: var(--color-gray-3); }
.vz-blog-top-list small { margin-top: 3px; font-size: 12px; color: var(--color-gray-3); }

/* ---------- Histórico ---------- */
.vz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vz-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; font-size: 14px; line-height: 1.2; color: var(--color-dark-4); background: transparent; border: 1px solid var(--color-gray-light-5); border-radius: 100px; cursor: pointer; transition: border-color .17s ease, color .17s ease; }
.vz-chip small { font-size: 11px; color: var(--color-gray-3); }
.vz-chip:hover { border-color: var(--color-dark-4); color: var(--color-dark-1); }
.vz-chip.is-active { background: var(--color-dark-1); border-color: var(--color-dark-1); color: #fff; }
.vz-chip.is-active small { color: rgba(255,255,255,.7); }
.vz-chip:focus-visible { outline: 2px solid var(--color-dark-1); outline-offset: 2px; }
.vz-chip-sm { padding: 3px 9px; font-size: 13px; text-transform: capitalize; }
.vz-historico-months { padding-top: 10px; border-top: 1px dotted var(--color-gray-light-5); }
.vz-blog-empty { margin: 12px 0 0; font-size: 14px; color: var(--color-gray-3); }
.vz-historico-more { margin-top: 16px; width: 100%; }

/* ---------- Categorías / etiquetas ---------- */
.vz-blog-cats .widget-menu { font-size: 16px; }
.vz-blog-tags .tags small { font-size: 11px; color: var(--color-gray-3); }