/*
 * bplanessentials — kit de componentes de contenido
 * Fecha: 11/10/2026
 * Depende de las variables --bp-* definidas en style.css del tema hijo.
 * Cambiar la paleta = editar esas variables; estos componentes la heredan.
 *
 * Bloques, en el orden en que aparecen en una página:
 *   .bp-page        envoltorio de todo el contenido
 *   .bp-ev          insignia de nivel de evidencia (A/B/C/D/X)
 *   .bp-resp        respuesta directa en 2-3 frases
 *   .bp-meta        autor + revisor + fechas
 *   .bp-aviso       aviso de seguridad
 *   .bp-block       sección con h2
 *   .bp-tabla       tabla comparativa
 *   .bp-ficha       caja de producto (AAWP dentro)
 *   .bp-comprar     comprar en España
 *   .bp-criterios   criterios de compra / descartados
 *   .bp-hub         índice de clústeres de un pilar
 *   .bp-cards       rejilla de tarjetas
 *   .bp-faq         preguntas frecuentes
 *   .bp-fuentes     fuentes numeradas
 *   .bp-disc        divulgación de afiliación
 */

/* ---------- envoltorio ---------- */
.bp-page{max-width:min(100%,780px);margin:0 auto;font-family:var(--bp-font-sans);color:var(--bp-text);line-height:1.68;font-size:17px}
.bp-page.bp-wide{max-width:min(100%,1100px)}
.bp-page>*+*{margin-top:26px}
.bp-page h1{font-family:var(--bp-font-display);font-size:clamp(28px,4.6vw,40px);line-height:1.18;letter-spacing:-.015em;color:var(--bp-ink);margin:0 0 14px;text-wrap:balance}
.bp-page h2{font-size:clamp(22px,3vw,27px);line-height:1.26;letter-spacing:-.01em;color:var(--bp-ink);margin:0 0 12px;text-wrap:balance}
.bp-page h3{font-size:19px;line-height:1.34;color:var(--bp-ink);margin:22px 0 8px}
.bp-page p{margin:0 0 14px}
.bp-page p:last-child{margin-bottom:0}
.bp-page a{color:var(--bp-brand-primary);text-underline-offset:2px}
.bp-page a:hover{color:var(--bp-brand-deep)}
.bp-lead{font-size:19px;line-height:1.6;color:var(--bp-text);max-width:64ch}
.bp-page ul,.bp-page ol{margin:0 0 14px;padding-left:22px}
.bp-page li+li{margin-top:6px}
.bp-page img{max-width:100%;height:auto}

/* ---------- insignia de evidencia ---------- */
.bp-ev{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;line-height:1;
  padding:7px 12px;border-radius:999px;border:1px solid;text-decoration:none;white-space:nowrap}
.bp-ev:hover{text-decoration:none;filter:brightness(.96)}
.bp-ev::before{content:attr(data-nivel);display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:700;background:currentColor;color:#fff}
.bp-ev-a{color:#065F46;background:#D1FAE5;border-color:#A7F3D0}
.bp-ev-b{color:#047857;background:#ECFDF5;border-color:#A7F3D0}
.bp-ev-c{color:#92400E;background:var(--bp-accent-soft);border-color:#FDE68A}
.bp-ev-d{color:#4B5563;background:var(--bp-surface-soft);border-color:var(--bp-border)}
.bp-ev-x{color:#991B1B;background:#FEE2E2;border-color:#FECACA}
.bp-ev-nota{font-size:14px;color:var(--bp-text-muted);margin:10px 0 0}

/* ---------- respuesta directa ---------- */
.bp-resp{background:var(--bp-surface-alt);border:1px solid var(--bp-border);border-left:4px solid var(--bp-brand-medium);
  border-radius:10px;padding:18px 20px}
.bp-resp .bp-resp-t{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--bp-brand-primary);margin:0 0 8px}
.bp-resp p:last-child{margin-bottom:0}
.bp-resp strong{color:var(--bp-ink)}

/* ---------- autoría y fechas ---------- */
.bp-meta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:14px;color:var(--bp-text-muted);
  padding:12px 0;border-top:1px solid var(--bp-border);border-bottom:1px solid var(--bp-border)}
.bp-meta span{display:inline-flex;align-items:center;gap:6px}
.bp-meta a{color:var(--bp-text-muted);text-decoration:underline}

/* ---------- aviso de seguridad ---------- */
.bp-aviso{background:#FEF2F2;border:1px solid #FECACA;border-radius:10px;padding:16px 18px;font-size:16px}
.bp-aviso .bp-aviso-t{font-weight:700;color:#991B1B;margin:0 0 6px}
.bp-aviso p:last-child{margin-bottom:0}
.bp-nota{background:var(--bp-info-soft);border:1px solid #BFDBFE;border-radius:10px;padding:16px 18px;font-size:16px}
.bp-nota p:last-child{margin-bottom:0}

/* ---------- sección ---------- */
.bp-block{padding-top:4px}

/* ---------- tabla comparativa ---------- */
.bp-tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bp-border);border-radius:10px}
.bp-tabla{width:100%;border-collapse:collapse;font-size:15px;background:var(--bp-surface);margin:0}
.bp-tabla th,.bp-tabla td{padding:11px 13px;text-align:left;vertical-align:top;border-bottom:1px solid var(--bp-border-soft)}
.bp-tabla thead th{background:var(--bp-surface-alt);font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--bp-text-muted);white-space:nowrap;border-bottom:1px solid var(--bp-border)}
.bp-tabla tbody tr:last-child td{border-bottom:0}
.bp-tabla tbody tr:hover{background:var(--bp-surface-alt)}
.bp-tabla .bp-si{color:#047857;font-weight:600}
.bp-tabla .bp-no{color:#991B1B;font-weight:600}
.bp-tabla-nota{font-size:14px;color:var(--bp-text-muted);margin:8px 0 0}

/* ---------- caja de producto ---------- */
.bp-ficha{border:1px solid var(--bp-border);border-radius:12px;padding:18px 20px;background:var(--bp-surface);
  box-shadow:var(--bp-shadow-sm)}
.bp-ficha>h3:first-child{margin-top:0}
.bp-ficha .bp-pros{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 0}
.bp-ficha .bp-pros>div{margin:0}
.bp-ficha .bp-pros h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px}
.bp-ficha .bp-pros .bp-p h4{color:#047857}
.bp-ficha .bp-pros .bp-c h4{color:#991B1B}
.bp-ficha .bp-pros ul{margin:0;padding-left:18px;font-size:15px}
@media (max-width:560px){.bp-ficha .bp-pros{grid-template-columns:1fr}}

/* ---------- comprar en España ---------- */
.bp-comprar{background:var(--bp-surface-alt);border:1px solid var(--bp-border);border-radius:10px;padding:16px 18px;font-size:16px}
.bp-comprar .bp-comprar-t{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--bp-text-muted);margin:0 0 8px}
.bp-comprar dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:15px}
.bp-comprar dt{font-weight:600;color:var(--bp-ink)}
.bp-comprar dd{margin:0;color:var(--bp-text)}

/* ---------- criterios y descartados ---------- */
.bp-criterios{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.bp-criterios>div{background:var(--bp-surface-alt);border:1px solid var(--bp-border);border-radius:10px;
  padding:14px 16px;margin:0}
.bp-criterios .bp-crit-t{font-weight:700;color:var(--bp-ink);font-size:16px;margin:0 0 4px}
.bp-criterios p{font-size:15px;color:var(--bp-text-muted);margin:0}

/* ---------- índice de clústeres (pilar) ---------- */
.bp-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.bp-hub .bp-item{position:relative;background:var(--bp-surface);border:1px solid var(--bp-border);
  border-radius:12px;padding:18px 20px;margin:0;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.bp-hub .bp-item:hover{border-color:var(--bp-brand-medium);box-shadow:var(--bp-shadow-md);transform:translateY(-2px)}
.bp-hub .bp-item .bp-t{font-size:17px;font-weight:700;line-height:1.3;margin:0 0 6px}
.bp-hub .bp-item .bp-t a{color:var(--bp-ink);text-decoration:none}
.bp-hub .bp-item .bp-t a::after{content:"";position:absolute;inset:0;z-index:1}
.bp-hub .bp-item .bp-t a:focus-visible{outline:2px solid var(--bp-brand-primary);outline-offset:3px}
.bp-hub .bp-item p{font-size:15px;color:var(--bp-text-muted);margin:0}
.bp-hub .bp-item .bp-ev{margin-top:10px;position:relative;z-index:2}

/* ---------- tarjetas ---------- */
.bp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.bp-cards .bp-card{background:var(--bp-surface);border:1px solid var(--bp-border);border-radius:12px;
  overflow:hidden;margin:0;display:flex;flex-direction:column}
.bp-cards .bp-img{aspect-ratio:4/3;background:var(--bp-surface-soft);overflow:hidden}
.bp-cards .bp-img img{width:100%;height:100%;object-fit:cover;display:block}
.bp-cards .bp-cbody{padding:14px 16px}
.bp-cards .bp-name{font-weight:700;color:var(--bp-ink);font-size:16px;margin:0 0 4px}
.bp-cards .bp-tag{font-size:14px;color:var(--bp-text-muted);margin:0}

/* ---------- FAQ ---------- */
.bp-faq{border:1px solid var(--bp-border);border-radius:12px;overflow:hidden;background:var(--bp-surface)}
.bp-faq details+details{border-top:1px solid var(--bp-border-soft)}
.bp-faq summary{cursor:pointer;padding:15px 18px;font-weight:600;color:var(--bp-ink);font-size:17px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.bp-faq summary::-webkit-details-marker{display:none}
.bp-faq summary::after{content:"+";font-size:20px;font-weight:400;color:var(--bp-text-muted);flex:0 0 auto;line-height:1}
.bp-faq details[open] summary::after{content:"−"}
.bp-faq summary:hover{background:var(--bp-surface-alt)}
.bp-faq .bp-ans{padding:0 18px 16px;font-size:16px;color:var(--bp-text)}
.bp-faq .bp-ans p:last-child{margin-bottom:0}

/* ---------- fuentes ---------- */
.bp-fuentes{background:var(--bp-surface-alt);border:1px solid var(--bp-border);border-radius:10px;padding:16px 20px}
.bp-fuentes .bp-fuentes-t{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--bp-text-muted);margin:0 0 10px}
.bp-fuentes ol{margin:0;padding-left:20px;font-size:14px;color:var(--bp-text-muted)}
.bp-fuentes li+li{margin-top:7px}
.bp-fuentes a{color:var(--bp-brand-primary)}

/* ---------- divulgación ---------- */
.bp-disc{font-size:13px;color:var(--bp-text-muted);background:var(--bp-surface-alt);
  border:1px solid var(--bp-border);border-radius:8px;padding:12px 16px;line-height:1.55}

/* ---------- utilidades ---------- */
.bp-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  padding:6px 12px;border-radius:999px;background:var(--bp-surface-soft);color:var(--bp-text-muted)}
.bp-cta{display:inline-flex;align-items:center;gap:8px;background:var(--bp-accent);color:var(--bp-ink);
  font-weight:700;font-size:16px;padding:13px 22px;border-radius:10px;text-decoration:none;
  transition:background .15s,transform .15s}
.bp-cta:hover{background:var(--bp-accent-dark);color:var(--bp-ink);text-decoration:none;transform:translateY(-1px)}

@media (max-width:600px){
  .bp-page{font-size:16.5px}
  .bp-page>*+*{margin-top:22px}
  .bp-resp,.bp-ficha,.bp-comprar,.bp-aviso,.bp-nota,.bp-fuentes{padding-left:16px;padding-right:16px}
}

/* ---------- etiqueta de nivel dentro de la caja de fuentes ---------- */
.bp-fuentes .bp-nivel{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.03em;
  padding:2px 8px;border-radius:999px;background:var(--bp-surface-soft);color:var(--bp-text-muted);
  border:1px solid var(--bp-border);margin-left:4px;white-space:nowrap}