/* Zubi · las secciones nuevas del panel.
   Se apoya en las variables que ya define el panel (--brand, --line, --soft…)
   y no toca ninguna clase suya: todo lo nuevo empieza por zbp-. */

.zbp-datos{display:grid;gap:2px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.zbp-dato{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;margin:0 0 8px}
.zbp-dato span{color:var(--soft);font-size:13.5px}
.zbp-dato b{font-size:15px;text-align:right;word-break:break-word}

.zbp-barra{height:10px;border-radius:999px;background:#f0e7d8;overflow:hidden;margin:12px 0 10px}
.zbp-barra i{display:block;height:100%;border-radius:999px;background:var(--brand);
  transition:width .4s ease}

.zbp-amigo{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.zbp-amigo h3{font-size:16px;margin:0}
.zbp-amigo-cif{margin:0 0 6px;font-size:15px}
.zbp-amigo-cif b{font-size:18px;color:var(--brand)}

.zbp-lista{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.zbp-lista li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.zbp-lista li b{display:block;font-size:15px}
.zbp-lista li span{display:block;font-size:13px;color:var(--soft)}
.zbp-lista .zbp-notas{margin-top:5px;color:var(--muted, #5b4f42);font-style:italic}

@media (max-width:600px){
  .zbp-dato{flex-direction:column;gap:2px}
  .zbp-dato b{text-align:left}
}