/*
 * Blog Automático — estilos de marca para los artículos generados en destockagecarrelage.com.
 *
 * Sustituye al patrón anterior (Code.gs escribía un atributo style="..." completo en cada
 * elemento de cada artículo, repetido cientos de veces). Ahora el HTML generado usa solo estas
 * clases reutilizables; el navegador descarga y cachea este único archivo una vez, en vez de
 * repetir los mismos estilos dentro de cada post_content.
 *
 * Paleta de marca (misma que se usaba inline, ahora centralizada aquí como variables CSS).
 */
.dc-article {
  --dc-navy: #0f2a4a;
  --dc-navy-light: #16406e;
  --dc-navy-soft: #eef3fa;
  --dc-gold: #c9962e;
  --dc-gold-light: #e0b45a;
  --dc-gold-soft: #fdf5e7;
  --dc-red: #c0392b;
  --dc-red-soft: #fdf1ef;
  --dc-green: #2f7d5c;
  --dc-bg: #f6f8fb;
  --dc-card: #ffffff;
  --dc-border: #e3e9f2;
  --dc-text: #17233a;
  --dc-muted: #5c6b84;
  --dc-radius: 14px;
  --dc-shadow: 0 6px 24px rgba(15, 42, 74, 0.08);
}

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

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

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

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

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

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

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

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

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

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

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

/* Insignia corta en línea */
.dc-badge {
  font-family: inherit;
  display: inline-block;
  background: var(--dc-navy);
  color: #ffffff;
  font-size: 0.75em;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.dc-badge.dc-orange {
  background: var(--dc-gold);
}
.dc-badge.dc-green {
  background: var(--dc-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.
 */
.dc-link-inline {
  color: var(--dc-gold);
  font-weight: 700;
  text-decoration: underline;
}

/* Caja de cierre/CTA con fondo oscuro degradado */
.dc-promo-box {
  background: linear-gradient(135deg, var(--dc-navy), var(--dc-navy-light));
  border-radius: var(--dc-radius);
  padding: 28px 30px;
  margin: 0 0 1.4em 0;
  text-align: center;
}
.dc-promo-box h2 {
  font-family: inherit;
  color: #ffffff;
  margin-top: 0;
}
.dc-promo-box p {
  font-family: inherit;
  color: var(--dc-navy-soft);
}
.dc-cta-btn,
.dc-cta-btn:link,
.dc-cta-btn:visited {
  font-family: inherit;
  display: inline-block;
  background: var(--dc-gold);
  color: var(--dc-navy);
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 8px;
  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. */
.dc-cta-btn:hover,
.dc-cta-btn:focus,
.dc-cta-btn:active {
  color: var(--dc-navy) !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). */
.dc-closing,
.dc-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. */