/* Blog — usa clases compartidas + .article-preview de components.css
   REDISEÑO CLARO: grid de imágenes con selección en azul acero */

.img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.img-opt {
    position: relative;
    border: 2px solid #e6eaef;
    border-radius: 9px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-2);
    transition: border-color 120ms, transform 120ms, box-shadow 120ms;
}
.img-opt img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
}
.img-opt figcaption {
    font-size: 9.5px;
    color: var(--ink-2);
    text-align: center;
    padding: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--bg-1);
}
.img-opt:hover { transform: scale(1.03); border-color: var(--border-2); box-shadow: 0 6px 16px -8px rgba(20,26,34,0.25); }
.img-opt.sel { border-color: var(--accent); }
.img-opt.sel::after {
    content: '✓ elegida';
    position: absolute; top: 5px; right: 5px;
    background: var(--accent); color: #fff;
    font-size: 9px; font-weight: 700;
    padding: 2px 7px; border-radius: 5px;
}

/* Bloque de sugerencias: icono guía */
.sugg-ico {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: var(--accent-soft); color: var(--accent-2);
    display: grid; place-items: center; font-size: 18px;
}