/* ==========================================================================
   Sunmarket Wellness - Add Products PRO IA v1.9.0
   Estilos de las fichas generadas por el modulo.
   Se sirve desde modules/smkproducts/views/css/smk-front.css mediante el hook
   displayHeader, asi que no hay que pegar nada en el tema.
   Todas las reglas estan limitadas a las clases .smk-*: no tocan el tema.
   ========================================================================== */

:root {
  --smk-t: #45BFC8;   /* turquesa de marca */
  --smk-t-d: #2E9AA3; /* turquesa oscuro */
  --smk-n: #12242E;   /* texto principal */
  --smk-m: #5C6B76;   /* texto secundario */
  --smk-l: #F7F7F5;   /* fondo suave */
  --smk-b: #E4E9EC;   /* bordes */
  --smk-r: 12px;      /* radio */
}

/* --- Ritmo general de la descripcion ------------------------------------ */
.smk-lead {
  font-size: 1.12em;
  line-height: 1.65;
  color: var(--smk-n);
  margin: 0 0 20px;
}

.smk-wrap { margin: 0; }

/* --- Badges y chips ------------------------------------------------------ */
.smk-badge,
.smk-chip {
  display: inline-block;
  padding: 6px 13px;
  margin: 0 8px 8px 0;
  border-radius: 999px;
  font-size: 0.86em;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  background: var(--smk-l);
  color: var(--smk-n);
  border: 1px solid var(--smk-b);
}

.smk-badge.b-teal    { background: rgba(69, 191, 200, 0.14); border-color: rgba(69, 191, 200, 0.45); color: #14646b; }
.smk-badge.b-orange  { background: rgba(240, 150, 60, 0.15); border-color: rgba(240, 150, 60, 0.45); color: #8a4d05; }
.smk-badge.b-info    { background: rgba(70, 130, 200, 0.13); border-color: rgba(70, 130, 200, 0.42); color: #1d4b7d; }
.smk-badge.b-success { background: rgba(70, 175, 110, 0.14); border-color: rgba(70, 175, 110, 0.45); color: #1d6b40; }

/* --- Cifras clave -------------------------------------------------------- */
.smk-kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 18px;
  border: 1px solid var(--smk-b);
  border-radius: var(--smk-r);
  background: #fff;
  text-align: center;
}

.smk-kpi-num {
  display: block;
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.15;
  color: var(--smk-t-d);
}

.smk-kpi-label {
  display: block;
  margin-top: 6px;
  font-size: 0.85em;
  color: var(--smk-m);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Rejilla de tarjetas ------------------------------------------------- */
.smk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 26px 0;
}

.smk-card {
  padding: 22px 20px;
  border: 1px solid var(--smk-b);
  border-radius: var(--smk-r);
  background: #fff;
}

.smk-card h3,
.smk-card-title {
  margin: 0 0 10px;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.35;
  color: var(--smk-n);
}

.smk-card p { margin: 0; color: var(--smk-m); line-height: 1.6; }
.smk-card p + p { margin-top: 10px; }

/* --- Lista de especificaciones ------------------------------------------ */
ul.smk-card-specs {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  border: 1px solid var(--smk-b);
  border-radius: var(--smk-r);
  overflow: hidden;
}

ul.smk-card-specs li {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--smk-b);
  line-height: 1.55;
}

ul.smk-card-specs li:nth-child(odd) { background: var(--smk-l); }
ul.smk-card-specs li:last-child { border-bottom: 0; }
ul.smk-card-specs li strong { display: inline-block; min-width: 190px; color: var(--smk-n); }

/* --- Pasos numerados ----------------------------------------------------- */
.smk-steps { margin: 26px 0; }

.smk-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--smk-b);
}

.smk-step:last-child { border-bottom: 0; }

.smk-num {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--smk-t);
  color: #fff;
  font-weight: 700;
  font-size: 1.05em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smk-step h3 { margin: 2px 0 6px; font-size: 1.05em; color: var(--smk-n); }
.smk-step p { margin: 0; color: var(--smk-m); line-height: 1.6; }

/* --- Cajas de nota ------------------------------------------------------- */
.smk-note,
.smk-box {
  margin: 24px 0;
  padding: 18px 20px;
  border-radius: var(--smk-r);
  background: var(--smk-l);
  border-left: 4px solid var(--smk-t);
  line-height: 1.6;
}

.smk-box { border-left-color: var(--smk-b); }
.smk-note p:last-child,
.smk-box p:last-child { margin-bottom: 0; }

.smk-highlight {
  background: rgba(69, 191, 200, 0.16);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}

/* --- Avisos -------------------------------------------------------------- */
.smk-alert {
  margin: 24px 0;
  padding: 16px 20px;
  border-radius: var(--smk-r);
  border-left: 4px solid var(--smk-m);
  background: var(--smk-l);
  line-height: 1.6;
}

.smk-alert.danger  { border-left-color: #c0392b; background: rgba(192, 57, 43, 0.07); }
.smk-alert.warning { border-left-color: #d68910; background: rgba(214, 137, 16, 0.08); }
.smk-alert.orange  { border-left-color: #e07b1a; background: rgba(224, 123, 26, 0.08); }
.smk-alert.info    { border-left-color: #2e86c1; background: rgba(46, 134, 193, 0.07); }
.smk-alert.success { border-left-color: #229954; background: rgba(34, 153, 84, 0.07); }
.smk-alert.neutral { border-left-color: var(--smk-b); }
.smk-alert p:last-child { margin-bottom: 0; }

/* --- Tablas -------------------------------------------------------------- */
table.smk-tbl,
table.smk-cmp,
table.smk-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.96em;
  display: block;
  overflow-x: auto;
}

table.smk-tbl th,
table.smk-cmp th,
table.smk-table th,
table.smk-tbl td,
table.smk-cmp td,
table.smk-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--smk-b);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

table.smk-tbl th,
table.smk-cmp th,
table.smk-table th {
  background: var(--smk-l);
  font-weight: 700;
  color: var(--smk-n);
  border-bottom: 2px solid var(--smk-b);
}

table.smk-tbl tbody tr:nth-child(even),
table.smk-table tbody tr:nth-child(even) { background: rgba(247, 247, 245, 0.6); }

table.smk-cmp td:not(:first-child),
table.smk-cmp th:not(:first-child) { text-align: center; }

.smk-yes,
.smk-no {
  display: inline-block;
  min-width: 24px;
  font-weight: 700;
}

.smk-yes { color: #1d8348; }
.smk-no  { color: #b03a2e; }

/* --- A quien le encaja --------------------------------------------------- */
ul.smk-pros,
ul.smk-cons {
  list-style: none;
  margin: 18px 0;
  padding: 0;
}

ul.smk-pros li,
ul.smk-cons li {
  position: relative;
  padding: 7px 0 7px 30px;
  line-height: 1.6;
}

ul.smk-pros li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 7px;
  color: #1d8348;
  font-weight: 700;
}

ul.smk-cons li::before {
  content: "\2717";
  position: absolute;
  left: 0;
  top: 7px;
  color: #b03a2e;
  font-weight: 700;
}

/* --- Imagenes dentro de la descripcion ----------------------------------- */
.smk-media { margin: 28px 0; }

.smk-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--smk-r);
}

.smk-media-caption {
  margin: 10px 0 0;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--smk-m);
}

.smk-media-grid,
.smk-gal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 28px 0;
}

.smk-media-grid .smk-media,
.smk-gal .smk-media { margin: 0; }

.smk-figure { margin: 28px 0; }
.smk-figure img { width: 100%; height: auto; border-radius: var(--smk-r); }
.smk-figure figcaption { margin-top: 10px; font-size: 0.9em; color: var(--smk-m); }

/* --- Video --------------------------------------------------------------- */
.smk-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 32px 0;
  border-radius: var(--smk-r);
  background: #000;
}

.smk-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Preguntas frecuentes ------------------------------------------------ */
.smk-faq {
  margin: 28px 0;
  border-top: 1px solid var(--smk-b);
}

.smk-faq-q {
  margin: 0;
  padding: 16px 0 6px;
  font-weight: 700;
  color: var(--smk-n);
  line-height: 1.5;
}

.smk-faq-a {
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--smk-b);
  color: var(--smk-m);
  line-height: 1.65;
}

/* --- Cierre -------------------------------------------------------------- */
.smk-cta {
  margin: 34px 0 8px;
  padding: 26px 24px;
  border-radius: var(--smk-r);
  background: linear-gradient(135deg, rgba(69, 191, 200, 0.13), rgba(69, 191, 200, 0.04));
  border: 1px solid rgba(69, 191, 200, 0.35);
}

.smk-cta p { margin: 0 0 10px; line-height: 1.65; color: var(--smk-n); }
.smk-cta p:last-child { margin-bottom: 0; }

/* --- Movil --------------------------------------------------------------- */
@media (max-width: 767px) {
  .smk-grid { grid-template-columns: 1fr; gap: 14px; }
  .smk-media,
  .smk-video { margin: 20px 0; }
  ul.smk-card-specs li strong { display: block; min-width: 0; margin-bottom: 2px; }
  table.smk-tbl th,
  table.smk-cmp th,
  table.smk-table th,
  table.smk-tbl td,
  table.smk-cmp td,
  table.smk-table td { padding: 9px 10px; font-size: 0.92em; }
  .smk-kpi { padding: 16px 12px; }
  .smk-kpi-num { font-size: 1.45em; }
}