/* Widget "Productos para blog (SEO)". La tarjeta usa calculadora-loop.css. */
.calc-productos-blog {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.calc-productos-blog-item { min-width: 0; }

/* Titulo: calculadora-loop.css lo estiliza como h2.calc-loop-title (ligado al h2).
   El widget usa h3/h4/p por defecto, asi que se replica aqui la misma regla
   para que la tarjeta se vea igual que en la tienda. Mantener sincronizado. */
.calc-productos-blog .calc-loop-title {
    margin: 12px 0 4px;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 25px !important;
    display: block;
    min-height: 75px;
}

/* Solo en el editor de Elementor */
.calc-productos-blog-estado {
    font: 600 12px/1.35 system-ui, sans-serif;
    padding: 6px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
}
.calc-productos-blog-estado--activa    { background: #e6f4ea; color: #1e6b34; }
.calc-productos-blog-estado--pendiente { background: #fff4d6; color: #7a5a00; }
.calc-productos-blog-estado--error     { background: #fde8e8; color: #9b1c1c; }
.calc-productos-blog-estado--info      { background: #e8f0fe; color: #1a4b9b; }
.calc-productos-blog-aviso {
    border: 2px dashed #9b1c1c;
    color: #9b1c1c;
    padding: 16px;
    font: 14px/1.4 system-ui, sans-serif;
}