/* ===== TeUbika.com — css/blog.css =====
   Estilos exclusivos de blog.html (índice de categorías, tarjetas de
   documentos y ventana emergente de lectura de artículos). Archivo
   nuevo y aislado a propósito: no se toca ningún otro .css existente,
   así que este cambio no puede afectar el resto del sitio.

   Reutiliza variables ya definidas en base.css (--azul, --azul-2,
   --verde-dark, --gris-texto, --borde) y la clase .filters-panel
   (borde/padding de tarjeta) que ya trae map-filters.css. */

.blog-indice{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:10px; margin-bottom:8px;
}
.blog-indice-item{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border:1.5px solid var(--borde); border-radius:10px; text-decoration:none;
  transition:.15s;
}
.blog-indice-item:hover{border-color:var(--verde); background:#f3fbf6;}
.blog-indice-num{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--azul);
  color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center;
  justify-content:center;
}
.blog-indice-nombre{flex:1; font-size:13.5px; font-weight:700; color:var(--azul);}
.blog-indice-count{font-size:11px; color:var(--gris-texto); white-space:nowrap;}

.blog-seccion{margin-bottom:22px; scroll-margin-top:90px;}
.blog-seccion-header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:8px; margin-bottom:14px;
}
.blog-seccion-header h3{font-size:16px; color:var(--azul); font-weight:800;}
.blog-seccion-num{color:var(--verde-dark);}
.blog-volver-indice{font-size:12px; color:var(--verde-dark); font-weight:700; text-decoration:none;}
.blog-doc-vacio{font-size:13.5px; color:var(--gris-texto); font-style:italic; margin:0;}

.blog-doc-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;}
.blog-doc-card{
  border:1.5px solid var(--borde); border-radius:12px; padding:16px;
  display:flex; flex-direction:column; gap:8px;
}
.blog-doc-badge{
  align-self:flex-start; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; padding:3px 9px; border-radius:20px;
}
.blog-doc-badge-articulo{background:#e7f6ec; color:var(--verde-dark);}
.blog-doc-badge-archivo{background:#eaf1fb; color:var(--azul-2);}
.blog-doc-card h4{font-size:14.5px; color:var(--azul); font-weight:800; line-height:1.35; margin:0;}
.blog-doc-meta{font-size:11.5px; color:var(--gris-texto);}
.blog-doc-resumen{font-size:13px; color:#3a475c; line-height:1.55; margin:0;}
.blog-doc-archivo-nombre{font-size:11.5px; color:var(--gris-texto); font-style:italic; word-break:break-word;}
.blog-doc-acciones{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto;}
.blog-doc-download, .blog-doc-abrir, .blog-doc-leer{align-self:flex-start; padding:8px 14px; font-size:12.5px; cursor:pointer;}
.blog-doc-leer{margin-top:auto;}

.blog-reader-meta{font-size:12px; color:var(--gris-texto); margin-bottom:16px;}
.blog-reader-body{font-size:14px; color:#3a475c; line-height:1.75;}
.blog-reader-body p{margin-bottom:12px;}
.blog-reader-iframe{width:100%; height:65vh; min-height:360px; border:1px solid var(--borde); border-radius:8px; background:#fff;}

@media (max-width: 600px){
  .blog-indice{grid-template-columns:1fr;}
  .blog-doc-grid{grid-template-columns:1fr;}
}