/* ==========================================================================
   Shortcodes heredados del ePanel de Divi (epanel/shortcodes/shortcodes.php)
   Siguen en descripciones de productos (corta y pestañas) y pueden estar en
   cualquier página:

   [box type="info|warning|download|bio|shadow"]…[/box]
     → <div class="et-box et-{type}"><div class="et-box-content">…</div></div>
   [button link="…" color="blue" type="small|big|icon" newwindow="yes"]…[/button]
     → <a class="small-button small{color}">, <a class="big-button big{color}">
       o <a class="icon-button {icon}-icon">…<span class="et-icon"></span></a>

   Se pasan al sistema del tema: planos, sin sombras, degradados ni bordes
   redondeados. Divi los estiliza en su style.css (gradientes, sprites y algunos
   !important); se le gana con `.byc` + clase, y con !important solo donde
   Divi lo usa (color de texto y peso de los botones).
   ========================================================================== */

/* ---------- Iconos (máscaras, toman el color del texto) ---------- */
.byc :is(.et-box, .small-button, .big-button, a.icon-button[class*="-icon"]) {
  --legacy-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E");
  --legacy-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3Z'/%3E%3Cpath d='M12 10v4M12 17v.5'/%3E%3C/svg%3E");
  --legacy-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M4 20h16'/%3E%3C/svg%3E");
  --legacy-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}

/* ---------- [box] ---------- */
.byc .et-box {
  position: relative;
  margin: 24px 0;
  padding: 0;
  border: 0;
  border-left: 3px solid var(--color-ink);
  border-radius: 0;
  background: var(--color-cream);
  box-shadow: none;
  color: var(--color-ink);
  font-size: inherit;
}
.byc .et-box:first-child { margin-top: 0; }
.byc .et-box:last-child { margin-bottom: 0; }

.byc .et-box .et-box-content {
  min-height: 0;
  padding: 14px 20px 14px 52px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.5;
  text-shadow: none;
}
.byc .et-box .et-box-content :is(p, ul, ol) { margin: 0; padding: 0; }
.byc .et-box .et-box-content :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 0.5em; }
.byc .et-box .et-box-content :is(strong, b, h5, h6) { color: var(--color-ink); font-weight: 600; }
.byc .et-box .et-box-content a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Icono: pisa el sprite de Divi (.et-info:before…) */
.byc .et-box::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 18px;
  width: 20px;
  height: 20px;
  margin: 0;
  background: currentColor;
  -webkit-mask: var(--legacy-icon-info) no-repeat center / contain;
  mask: var(--legacy-icon-info) no-repeat center / contain;
}

.byc .et-box.et-warning {
  border-left-color: var(--color-peach-strong);
  background: var(--color-peach);
}
.byc .et-box.et-warning::before {
  -webkit-mask-image: var(--legacy-icon-warning);
  mask-image: var(--legacy-icon-warning);
}

.byc .et-box.et-download::before {
  -webkit-mask-image: var(--legacy-icon-download);
  mask-image: var(--legacy-icon-download);
}

/* bio y shadow (el tipo por defecto): caja neutra, sin icono */
.byc .et-box:is(.et-bio, .et-shadow) {
  border-left-color: var(--color-line-strong);
  background: var(--color-media);
}
.byc .et-box:is(.et-bio, .et-shadow)::before { display: none; }
.byc .et-box:is(.et-bio, .et-shadow) .et-box-content { padding-left: 20px; }

/* ---------- [button] ----------
   small → contorno (como .button--outline, compacto); big → sólido negro.
   Colores: red/orange/pink → acento durazno; black → sólido; silver → crema;
   el resto (blue, lightblue, teal, turquoise, green, purple) → estilo base.
   !important: Divi fija color (a.small{color}) y font-weight con !important.
   Selectores separados (no :is()): :is() toma la especificidad de su argumento
   más pesado y la regla base les ganaría a las variantes. */
.byc a.small-button,
.byc a.big-button,
.byc a.icon-button[class*="-icon"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto;
  min-height: 44px;
  margin: 0 8px 8px 0;
  padding: 10px 20px;
  border: 1px solid var(--color-ink);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-ink) !important;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: pointer;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition);
}

.byc a.small-button:hover,
.byc a.big-button:hover,
.byc a.icon-button[class*="-icon"]:hover {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white) !important;
  text-decoration: none;
}

/* Icono: descarga en PDFs y en [button type="icon"], flecha en links externos */
.byc :is(a.small-button, a.big-button)[target="_blank"]::before,
.byc :is(a.small-button, a.big-button)[href$=".pdf" i]::before,
.byc a.icon-button[class*="-icon"]::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--legacy-icon-arrow) no-repeat center / contain;
  mask: var(--legacy-icon-arrow) no-repeat center / contain;
}
.byc :is(a.small-button, a.big-button)[href$=".pdf" i]::before,
.byc a.icon-button[class*="-icon"]::before {
  -webkit-mask-image: var(--legacy-icon-download);
  mask-image: var(--legacy-icon-download);
}

/* El span del sprite de Divi en [button type="icon"] */
.byc a.icon-button[class*="-icon"] .et-icon { display: none; }

.byc a.big-button {
  min-height: 48px;
  padding: 12px 28px;
  background: var(--color-ink);
  color: var(--color-white) !important;
  font-size: var(--fs-sm);
}
.byc a.big-button:hover {
  border-color: var(--color-ink-soft);
  background: var(--color-ink-soft);
}

.byc a.smallred,
.byc a.smallorange,
.byc a.smallpink,
.byc a.bigred,
.byc a.bigorange {
  border-color: var(--color-peach);
  background: var(--color-peach);
  color: var(--color-ink) !important;
}
.byc a.smallred:hover,
.byc a.smallorange:hover,
.byc a.smallpink:hover,
.byc a.bigred:hover,
.byc a.bigorange:hover {
  border-color: var(--color-peach-strong);
  background: var(--color-peach-strong);
  color: var(--color-ink) !important;
}

.byc a.smallblack {
  background: var(--color-ink);
  color: var(--color-white) !important;
}
.byc a.smallblack:hover { background: var(--color-ink-soft); }

.byc a.smallsilver {
  border-color: var(--color-line-strong);
  background: var(--color-cream);
}
.byc a.smallsilver:hover {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

/* [button br="yes"] */
.byc br.clear { display: block; }