/**
 * MGPanel V11 → V12 — estilos de compatibilidad para sitios migrados.
 * Origen: MGPanel-V11-Front frontend/css/styles.css (curado)
 *         + frontend/page/contenidos/controlador/styles.css
 * No incluye: body global, .mg_posts/.mg_productos (V12 usa mg-blog-* / mg-store-*), #Page_404
 */

/* ── Banners de contenido (contenidos/controlador/styles.css) ── */
.mg_banner_content,
.mg_banner_categoria_blog {
  position: relative;
}
.mg_banner_content::before,
.mg_banner_categoria_blog::before {
  content: "";
  background: rgb(0 0 0 / 50%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.mg_banner_content h1,
.mg_banner_categoria_blog h1 {
  color: #fff;
  text-align: center;
  padding: 40px 15px 50px;
  margin: 0;
  position: relative;
}

/* ── Blog V11 → V12 (listado shortcode) ── */
.mg-shortcode-blog-grid,
.mg_posts {
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 50px auto;
  position: relative;
}
.mg-card-image,
.mg_post_img {
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
}
.mg-card-image img,
.mg_post_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mg-card-body,
.mg_post_content {
  padding: 15px 20px;
  position: relative;
}
.mg-card-category,
.mg_post_categorias {
  margin: 10px 0 5px;
}
.mg-card-category a,
.mg_post_categorias a {
  background: #000;
  color: #fff;
  font-size: 12px;
  padding: 3px 5px 2px;
  text-transform: capitalize;
  text-decoration: none;
}
.mg-card-title,
.mg_post_title {
  font-size: 1.7rem;
  font-weight: bold;
}
.mg_categoria_blog,
.mg-blog-container {
  display: block;
}
.mg_sin_resultados,
.mg-shortcode-blog-empty {
  text-align: center;
  padding: 2rem;
  color: #6b7280;
}
.mg_patrocinador_post,
.mg-ads-container {
  display: none;
}
.mg_post_more,
.mg-card-meta {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 6px 0;
}
.mg_btn-accion,
.mg-btn-text {
  display: inline-block;
  margin-top: 8px;
  text-decoration: none;
}
@media (min-width: 1600px) {
  .mg-shortcode-blog-grid,
  .mg_posts {
    max-width: 1400px;
  }
}

/* ── Blog V11 → V12 (artículo individual) ── */
.mg-article-container,
.mg_vista_post {
  display: flex;
  flex-direction: column;
  padding: 50px 20% 20px;
}
.mg-article-container img,
.mg_post_portada img {
  width: 100%;
  border-radius: 8px;
}
.mg-more-articles,
.mg_lateral_post {
  display: flex;
  margin: 70px 0 50px;
  flex-wrap: wrap;
}
.mg-more-articles article,
.mg_lateral_post article {
  width: 29.33%;
  margin: 2%;
}
@media screen and (max-width: 990px) {
  .mg-article-container,
  .mg_vista_post {
    padding: 30px 5% 20px;
  }
  .mg-more-articles article,
  .mg_lateral_post article {
    width: 100%;
    margin: 0;
  }
}

/* ── Utilidades sitio V11 ── */
.mg_scroll-to-top {
  z-index: 102;
  position: fixed;
  display: none;
  right: 40px;
  bottom: 20px;
  width: 45px;
  height: 45px;
  line-height: 46px;
  background-color: #8c8c8c;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding-top: 1px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
.mg_scroll-to-top:hover {
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  opacity: 0.7;
}
.mg_error {
  border: 1px solid #ff3451;
}

/* ── Tienda: quick add (HTML estático migrado) ── */
.mg_quick_add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.mg_quick_add_qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
}
.mg_quick_add_qty a {
  display: inline-block;
  padding: 4px 8px;
  color: #444;
  text-decoration: none;
  font-weight: 600;
}
.mg_quick_add_qty a:hover {
  background-color: #f1f1f1;
}
.mg_quick_add_input {
  width: 46px;
  text-align: center;
  border: 0;
  box-shadow: none;
  padding: 4px 0;
}
.mg_quick_add_btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 6px 10px;
  font-size: 0.85rem;
}

/* ── Coming soon (HTML en accounts.cms.coming_soon_code) ── */
#mg_comingsoon_page {
  overflow: hidden auto;
  height: 100%;
  position: fixed;
  width: 100%;
  margin: 0 -15px;
}
#mg_comingsoon_page .col-md-6 {
  display: flex;
  align-items: end;
  justify-content: center;
  flex-direction: column;
}
#mg_comingsoon_page .col-md-6 img {
  height: 250px;
}
#mg_comingsoon_page .container,
#mg_comingsoon_page .row {
  height: 100%;
  margin: auto;
}

/* ── Formulario V11 → V12 ── */
.mg_formulario_contacto_web,
.mg-form {
  width: 100%;
}
.form-row,
.mg-form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.form-group,
.mg-form-field {
  margin-bottom: 16px;
  width: 100%;
}
.form-control,
.mg-form-control {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #fff;
}
.form-control:focus,
.mg-form-control:focus {
  outline: none;
  border-color: #86b7fe;
  box-shadow: 0 0 0 3px rgb(13 110 253 / 25%);
}
.mg_btn-accion,
.mg-btn.mg-btn-primary {
  display: inline-block;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none;
}

/* ── Responsive ── */
@media screen and (max-width: 990px) {
  #mg_comingsoon_page .col-md-6 img {
    height: initial;
    width: 100%;
  }
  #mg_comingsoon_page .col-md-6 {
    align-items: end;
    justify-content: end;
    text-align: center;
  }
  #mg_comingsoon_page .row > .col-md-6:first-child {
    justify-content: flex-end;
    margin-bottom: 30px;
  }
  .mg_scroll-to-top {
    right: 20px;
    bottom: 20px;
  }
}