/*
 * Morrow Blog — estilos de marca para los artículos generados en madebymorrow.com.
 *
 * Prefijo de clases: mwb- ("morrow blog"). Deliberadamente NO se usa mw-, que ya está ocupado
 * por los componentes del propio sitio (header, calculadora, timeline...), para que el CSS de
 * los artículos generados nunca pise el del tema ni al revés.
 *
 * El HTML generado no lleva NUNCA atributos style inline: solo estas clases reutilizables, que
 * el navegador descarga y cachea en un único archivo.
 *
 * Paleta: sistema de diseño Morrow Studio, centralizado aquí como variables CSS.
 */
.mwb-article {
  /* Sistema de diseño Morrow Studio: azul #1938FF, negro #0d0d0d, crema #FFFFEE, radio 0. */
  --mwb-navy: #1938FF;          /* color primario de marca */
  --mwb-navy-light: #1230d6;    /* variante oscura para degradados */
  --mwb-navy-soft: rgba(25, 56, 255, 0.08);
  --mwb-gold: #1938FF;          /* acento = mismo azul de marca, sin dorado */
  --mwb-gold-light: #4d64ff;
  --mwb-gold-soft: rgba(25, 56, 255, 0.06);
  --mwb-red: #c0392b;
  --mwb-red-soft: #fdf1ef;
  --mwb-green: #2f7d5c;
  --mwb-bg: #FFFFEE;            /* crema de marca */
  --mwb-card: #ffffff;
  --mwb-border: rgba(13, 13, 13, 0.12);
  --mwb-text: #0d0d0d;
  --mwb-muted: #5a5a55;
  --mwb-radius: 0;              /* zero border-radius, spec de marca */
  --mwb-shadow: none;
}

/* Migas de pan bajo el H1 */
.mwb-breadcrumb {
  font-size: 0.85em;
  color: #767676;
  margin: 0 0 1.2em 0;
}
.mwb-breadcrumb a {
  color: #767676;
  text-decoration: underline;
}

/* Párrafo de entrada (lede) */
.mwb-lede {
  font-family: inherit;
}

/* Imagen principal (insertada por PHP, no por la IA) */
.mwb-imagen-principal {
  width: 100%;
  height: auto;
  border-radius: var(--mwb-radius);
  margin: 0 0 1.4em 0;
  display: block;
}

/* Imágenes adicionales repartidas por el cuerpo */
.mwb-imagen-inline {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: var(--mwb-radius);
  margin: 1.2em auto;
  display: block;
}

/* Tarjeta de material/ficha destacada */
.mwb-material-card {
  font-family: inherit;
  background: var(--mwb-card);
  border: 1px solid var(--mwb-border);
  border-radius: 0;
  padding: 16px 20px;
  margin: 0 0 1.4em 0;
}
.mwb-material-card h3 {
  font-family: inherit;
  color: var(--mwb-navy);
  margin-top: 0;
}

/* Caja de consejo práctico */
.mwb-tip-box {
  font-family: inherit;
  background: var(--mwb-gold-soft);
  border-left: 4px solid var(--mwb-gold);
  border-radius: 0;
  padding: 16px 20px;
  margin: 0 0 1.4em 0;
  color: var(--mwb-text);
}

/* Caja de advertencia */
.mwb-warn-box {
  font-family: inherit;
  background: var(--mwb-navy-soft);
  border-left: 4px solid var(--mwb-navy);
  border-radius: 0;
  padding: 16px 20px;
  margin: 0 0 1.4em 0;
  color: var(--mwb-text);
}

/* Caja de error/mito frecuente */
.mwb-error-box {
  background: var(--mwb-red-soft);
  border-left: 4px solid var(--mwb-red);
  border-radius: 0;
  padding: 16px 20px;
  margin: 0 0 1.4em 0;
}
.mwb-error-box > div {
  font-family: inherit;
  color: var(--mwb-text);
}

/* Cuadrícula de comparación rápida (2 columnas) */
.mwb-stain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0 0 1.4em 0;
}
.mwb-stain-item {
  font-family: inherit;
  background: var(--mwb-bg);
  border: 1px solid var(--mwb-border);
  border-radius: 0;
  padding: 14px 16px;
}
.mwb-stain-item strong {
  color: var(--mwb-navy);
}

/* Tarjetas en cuadrícula responsive (3-6 opciones) */
.mwb-aspects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0 0 1.4em 0;
}
.mwb-aspect-card {
  font-family: inherit;
  background: var(--mwb-card);
  border: 1px solid var(--mwb-border);
  border-radius: 0;
  padding: 16px 18px;
}
.mwb-aspect-card p {
  margin: 0;
}

/* Tabla comparativa */
.mwb-table-wrap {
  border: 1px solid var(--mwb-border);
  border-radius: 0;
  overflow: hidden;
  margin: 0 0 1.4em 0;
}
.mwb-table {
  font-family: inherit;
  width: 100%;
  border-collapse: collapse;
}
.mwb-table thead tr {
  background: var(--mwb-navy);
}
.mwb-table th {
  font-family: inherit;
  color: #ffffff;
  padding: 12px 16px;
  text-align: left;
}
.mwb-table tbody tr {
  border-top: 1px solid var(--mwb-border);
}
.mwb-table td {
  font-family: inherit;
  padding: 10px 16px;
}

/* Insignia corta en línea */
.mwb-badge {
  font-family: inherit;
  display: inline-block;
  background: var(--mwb-navy);
  color: #ffffff;
  font-size: 0.75em;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 0;
}
.mwb-badge.mwb-orange {
  background: var(--mwb-gold);
}
.mwb-badge.mwb-green {
  background: var(--mwb-green);
}

/*
 * Enlace transaccional dentro del cuerpo (a una página de categoría/producto). Dorado siempre,
 * visible tanto sobre fondo claro (párrafos normales) como sobre el navy degradado del CTA —
 * fix real: antes, sin esta clase, el enlace podía heredar un color igual al fondo y desaparecer.
 */
.mwb-link-inline {
  color: var(--mwb-navy);
  font-weight: 700;
  text-decoration: underline;
}

/* Caja de cierre/CTA con fondo oscuro degradado */
.mwb-promo-box {
  background: linear-gradient(135deg, var(--mwb-navy), var(--mwb-navy-light));
  border-radius: var(--mwb-radius);
  padding: 28px 30px;
  margin: 0 0 1.4em 0;
  text-align: center;
}
.mwb-promo-box h2 {
  font-family: inherit;
  color: #ffffff;
  margin-top: 0;
}
.mwb-promo-box p {
  font-family: inherit;
  color: rgba(255, 255, 238, 0.85);
}
.mwb-cta-btn,
.mwb-cta-btn:link,
.mwb-cta-btn:visited {
  font-family: inherit;
  display: inline-block;
  background: var(--mwb-navy);
  color: #FFFFEE;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 0;
  text-decoration: none;
  margin-top: 8px;
}
/* Fix real: el tema pone en :hover el mismo color que el fondo dorado del botón (heredado del
   estilo global de enlaces), dejando el texto invisible al pasar el cursor. Se fija el color
   explícitamente en :hover/:focus/:active para que nunca dependa del CSS del tema. */
.mwb-cta-btn:hover,
.mwb-cta-btn:focus,
.mwb-cta-btn:active {
  color: #FFFFEE !important;
  text-decoration: none;
}

/* Red de seguridad: si la IA añadiera pese a todo un bloque de "artículos relacionados"
   inventado, se oculta por CSS además de eliminarse por PHP (doble protección). */
.mwb-closing,
.mwb-closing-links {
  display: none;
}

/* NOTA: el extracto bajo el título en las tarjetas de /blog/ se oculta hoy vía CSS del
   Customizer de Bricks (fuera de este plugin, ligado al ID interno de ese elemento en la
   plantilla del tema). Cuando se porte también esa plantilla al plugin (Fase 2), esa regla se
   trae aquí para tenerlo todo centralizado en un único archivo. */


/* ---------------------------------------------------------------------------
 * Tablas dentro de los artículos generados. Van en un elemento Rich Text de
 * Bricks (no en un elemento Code), así que no necesitan firma de código; el
 * estilo vive aquí, cargado una sola vez para todo el sitio.
 * ------------------------------------------------------------------------- */
.mwb-scroll-hint {
  display: none;
  font-size: 0.85em;
  color: var(--mwb-muted);
  margin: 0 0 8px 0;
}
.mwb-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--mwb-border);
  margin: 0 0 1.4em 0;
}
.mwb-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
}
.mwb-table thead tr {
  background: var(--mwb-navy);
}
.mwb-table th {
  color: #FFFFEE;
  text-align: left;
  padding: 14px 18px;
  font-weight: 600;
  white-space: nowrap;
}
.mwb-table tbody tr {
  border-top: 1px solid var(--mwb-border);
}
.mwb-table td {
  padding: 12px 18px;
  vertical-align: top;
}
@media (max-width: 640px) {
  .mwb-scroll-hint { display: block; }
  .mwb-table th,
  .mwb-table td { padding: 12px 14px; }
}